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

<template>
    <view class="login">
        <view class="login-logo">
            <image class="logo" :src="configList && configList.applet_info ? configList.applet_info.paramValueImage : ''" mode="aspectFill"></image>
            <image class="d" :src="configList && configList.logo_icon ? configList.logo_icon.paramValueImage : ''" mode="aspectFill"></image>
        </view>
        <view class="login-submit">
            <up-button class="mt24" type="primary" text="手机号登录" 
                open-type="getPhoneNumber" @getphonenumber="onGetPhoneNumber"
                shape="circle" color="#FFBF60" style="margin-top: 20rpx;"></up-button>
        </view>
        <view class="flex-rowc">
            <view>
                <up-checkbox v-model="isAgree" size="29rpx" icon-size="29rpx" name="agree" usedAlone
                    shape="circle" activeColor="#FFBF60">
                </up-checkbox>
            </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>
    </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>

</template>

<script>
import {
    getOpenIdKey,
    getToken,
    setIsLogin,
    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: '',
            isAgree: false
        }
    },
    computed: {
        ...mapGetters(['configList'])
    },
    mounted() {
        // 组件挂载后的逻辑
    },
    methods: {
        // 微信授权登陆
        loginWx() {
            if (!this.isAgree) {
                return uni.showToast({
                    title: '请先同意隐私协议',
                    icon: 'none'
                })
            }
            this.login()
        },
        
        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)
                        setIsLogin(true)
                        this.getUserInfo()
                    }else{
                        // 如果没有token，可能需要获取手机号
                        uni.showToast({
                            title: '请授权手机号登录',
                            icon: 'none'
                        })
                    }
                }
            })
        },
        
        // 获取用户信息
        async getUserInfo() {
            try {
                const res = await getPersonalInfo()
                if(res && (res.id || res.id === 0)){
                    setStorage('userInfo', res)
                    uni.navigateBack()
                }
            } catch (error) {
                console.error('获取用户信息失败:', error)
            }
        },
        
        // 获取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)
                    setIsLogin(true)
                    this.getUserInfo()
                } 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: 180rpx;
            height: 180rpx;
        }

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

    &-submit {
        padding: 0 76rpx;
        margin: 150rpx 0 40rpx 0;
    }
}

.agreement {
    color: #C7C7C7;
    font-size: 22rpx;
    line-height: 29rpx;
}

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

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