pet-front-order/pages_order/auth/login.vue

<template>
    <view class="login">
        <view class="login-logo">
            <image class="logo" src="https://img.teyizhao.com/2025-08-07/f5cd742f-fef4-4d9b-84d9-131f0cba716f.png" mode="aspectFill"></image>
        </view>
        <view class="login-submit">

            <up-button class="mt24" type="primary" text="手机号登录" 
            v-if="checkboxValue.length == 0"
            @click="loginWx"
            shape="circle" color="#FFBF60" style="margin-top: 20rpx;"></up-button>


            <up-button class="mt24" type="primary" text="手机号登录" 
            v-else
                open-type="getPhoneNumber" @getphonenumber="onGetPhoneNumber"
                shape="circle" color="#FFBF60" style="margin-top: 20rpx;"></up-button>
        </view>
        <view class="flex-rowc">
            <view>
                <up-checkbox-group v-model="checkboxValue">
                    <up-checkbox v-model="isAgree" size="29rpx" icon-size="29rpx" name="agree"
                        shape="circle" activeColor="#FFBF60">
                    </up-checkbox>
                </up-checkbox-group>
            </view>
            <view class="size-26 agreement">
                <text>我已阅读并同意猫爸狗妈</text>
                <text @click="privacyPolicy('login_xy')" class="main-color">《注册协议》</text>
                <text>与</text>
                <text @click="privacyPolicy('login_ys')" class="main-color">《隐私政策》</text>
            </view>
        </view>
        <view class="login-footer flex-rowc">
            <button @click="cancelLogin" class="btn-cancel" plain>暂不登录</button>
        </view>
        
        <up-popup :show="show" @close="close" :round="10">
            <view style="padding: 10rpx 20rpx;height: 50vh;overflow-y: scroll;" v-html="content"></view>
        </up-popup>
    </view>
</template>

<script>
import {
    getOpenIdKey,
    getToken,
    setOpenIdKey,
    setStorage,
    setToken
} from "../../utils/auth";
import {
    getOpenId,
    getPersonalInfo,
    getPhoneNumber
} from "../../api/system/user";
import { mapGetters } from 'vuex';

export default {
    name: 'AuthIndex',
    data() {
        return {
            value: false,
            show: false,
            content: '',
            checkboxValue: [],
            url : '',
        }
    },
    computed: {
        ...mapGetters(['configList'])
    },
    onLoad(options) {
        this.url = options.url || ''
    },
    methods: {
        // 微信授权登陆
        loginWx() {
            if (this.checkboxValue.length == 0) {
                return uni.showToast({
                    title: '请先同意隐私协议',
                    icon: 'none'
                })
            }
        },
        
        login() {
            uni.login({
                provider: 'weixin',
                success: (loginRes) => {
                    this.getOpenId(loginRes.code)
                },
                fail: function(error) {
                    // 授权失败处理
                    uni.showToast('授权失败，请授权后再试')
                }
            });
        },
        
        getOpenId(code) {
            getOpenId(code).then(res => {
                if (res.code == 200 && res.data) {
                    let resData = JSON.parse(res.data)
                    let token = resData.token;
                    let openId = resData.openId;
                    setOpenIdKey(openId)
                    if(token){ 
                        setToken(token)
                        this.$store.commit('getUserInfo')
                    }else{
                        // 如果没有token，可能需要获取手机号
                        uni.showToast({
                            title: '请授权手机号登录',
                            icon: 'none'
                        })
                    }
                }
            })
        },
        
        // 获取token
        onGetPhoneNumber(e) {
            if(e.detail.errMsg=="getPhoneNumber:fail user deny"){       //用户拒绝授权  
                //拒绝授权后弹出一些提示  
            }else{      //允许授权  
                if(getOpenIdKey()){
                    this.getPhoneNumber({"openId":getOpenIdKey(),"code":e.detail.code})
                }
            }  
        },
        
        getPhoneNumber(data){
            getPhoneNumber(data).then(res=>{
                if(res&&res.code==200){
                    let token = res.data.token
                    setToken(token)
                    this.$store.commit('getUserInfo')
                    
                    if(this.url){
                        uni.redirectTo({
                            url: this.url
                        })
                    }
                } else{
                    uni.showToast({
                        icon:'error',
                        title:'获取手机号失败'
                    })
                }
            })
        },

        
        cancelLogin() {
            uni.switchTab({
                url: "/pages/workbenchManage/index"
            })
        },
        
        close() {
            this.show = false
        },
        
        privacyPolicy(key) {
            this.content = this.configList && this.configList[key] ? this.configList[key].paramValueArea || "" : "";
            this.show = true;
        }
    }
}
</script>

<style scoped lang="scss">
.login {
    height: 100vh;
    background: #ffffff;

    &-logo {
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        height: 504rpx;
        background: linear-gradient(360deg, #FFFFFF 0%, #FFBF60 99%);

        .logo {
            width: 220rpx;
            height: 220rpx;
        }

        .d {
            width: 200rpx;
            height: 80rpx;
            margin-top: 20rpx;
        }
    }

    &-submit {
        padding: 0 76rpx;
        margin: 150rpx 0 40rpx 0;
    }
}
.flex-rowc{
    display: flex;
    justify-content: center;
    align-items: center;
}
.agreement {
    color: #C7C7C7;
    font-size: 22rpx;
    line-height: 29rpx;
}

.login-footer {
    width: 100vw;
    position: fixed;
    bottom: 127rpx;
    text-align: center;

    .btn-cancel {
        color: #C7C7C7;
        font-size: 30rpx;
        line-height: 40rpx;
        border: none;
        display: inline-block;
        padding: 0;
    }
}
</style>