flavorOfTimeSz/pages/login/login.vue

<template>
    <view style="padding: 113rpx 58rpx 0;">
        <view class="login-tip">时味苏州 申请获得</view>
        <view class="login-tip2">以下权限</view>
        <view class="login-tip-box">
            <text>获得你的公开信息（昵称、头像、地区及性别）</text>
        </view>
		<view class="article-box">
		    <radio-group @change="toggleAgreement">
		        <radio value="1" :checked="isAgreed" style="transform:scale(0.7)"></radio>
		    </radio-group>
		    <view>同意<text @click="gotoInfo(9)">《用户服务协议》、</text><text @click="gotoInfo(12)">《隐私政策》</text></view>
		</view>
        <view class="btn-box">
            <button bindtap="cancel" type="default" @click="redirectIndex">取消</button>
            <button type="primary" @click="getUserInfo">同意</button>
        </view>
        
        <uni-popup ref="popup" type="bottom" background-color="#fff">
            <button type="default" open-type="getPhoneNumber" @getphonenumber="handlePhoneNumber" style="width: 100%;height: 12vh;line-height: 12vh;">点击授权手机号</button>
        </uni-popup>
    </view>
</template>

<script>
export default {
    name: "login",
    data() {
        return {
            isAgreed: false,
			openid: ''
        };
    },
    onLoad(options) {
        // 只需授权手机号
        if (options.needAuth === '1') {
            setTimeout(() => {
                this.$refs.popup.open('bottom');
            }, 400);
        }
    },
    methods: {
        // 处理手机号授权
        handlePhoneNumber(e) {
            if (e.detail.errMsg === "getPhoneNumber:ok") { // 成功
                this.$refs.popup.close();
                this.Post({
                    code: e.detail.code,
                    encryptedData: e.detail.encryptedData,
                    iv: e.detail.iv,
                    openid: this.openid
                }, '/api/uservice/user/bindPhoneNumber')
               .then(res => {
                    this.$store.commit('changeUserInfo', res.data);
                    this.navigateBasedOnPath();
                })
               .catch(error => {
                    console.error('绑定手机号失败:', error);
                    uni.showToast({
                        title: '绑定手机号失败，请稍后重试',
                        icon: 'none'
                    });
                });
            } else {
                console.error('获取手机号失败:', e.detail.errMsg);
                uni.showToast({
                    title: '获取手机号失败，请稍后重试',
                    icon: 'none'
                });
            }
        },
        // 跳转到协议页面
        gotoInfo(id) {
            uni.navigateTo({
                url: '/subPackages/user/privacyInfo?id=' + id
            });
        },
        // 切换协议同意状态
        toggleAgreement() {
            this.isAgreed = !this.isAgreed;
        },
        // 重定向到首页
        redirectIndex() {
            uni.switchTab({
                url: '/pages/index/index',
            });
        },
        // 获取用户信息
        getUserInfo() {
            if (!this.isAgreed) {
                uni.showToast({
                    title: '请先勾选同意《用户服务协议》、《隐私政策》',
                    icon: 'none'
                });
                return;
            }
            uni.login({
                provider: 'weixin',
                success: (loginRes) => {
                    uni.getUserInfo({
                        withCredentials: true,
                        success: (res) => {
                            this.Post({
                                code: loginRes.code,
                                userInfo: res.userInfo,
                                encryptedData: res.encryptedData,
                                iv: res.iv,
                                wechat_qrcode: uni.getStorageSync('wechat_qrcode') || '',
								loginType: 3
                            }, '/api/uservice/user/wxLogin')
                           .then(resTwo => {
                                this.$store.commit('changeUserInfo', resTwo.data);
                                if (resTwo.data.isBindMobile) {
                                    this.navigateBasedOnPath();
                                } else {
                                    this.openid = resTwo.data.openid
                                    this.$refs.popup.open('bottom');
                                }
                            })
                           .catch(error => {
                                console.error('登录失败:', error);
                                uni.showToast({
                                    title: '登录失败，请稍后重试',
                                    icon: 'none'
                                });
                            });
                        },
                        fail: (err) => {
                            console.error('获取用户信息失败:', err);
                            uni.showToast({
                                title: '获取用户信息失败，请稍后重试',
                                icon: 'none'
                            });
                        }
                    });
                },
                fail: (err) => {
                    console.error('微信登录失败:', err);
                    uni.showToast({
                        title: '微信登录失败，请稍后重试',
                        icon: 'none'
                    });
                }
            });
        },
        // 根据路径进行导航
        navigateBasedOnPath() {
            if (this.$store.state.user.toPath.includes('user/user')) {
                uni.switchTab({
                    url: this.$store.state.user.toPath
                });
            } else {
                uni.navigateBack({});
            }
        }
    },
};
</script>

<style>
.login-tip {
	font-weight: 400;
	font-size: 29rpx;
	color: #020202;
}

.login-tip2 {
    margin-top: 20rpx;
    font-weight: 400;
	font-size: 48rpx;
	color: #000000;
}

.login-tip-box {
    display: flex;
    align-items: flex-start;
    font-weight: 400;
    font-size: 29rpx;
    color: #000000;
    margin-top: 40rpx;
}

.login-tip-box .icon-gou1 {
    line-height: 80rpx;
    margin-top: -20rpx;
    margin-right: 30rpx;
    color: #666;
}

.btn-box {
    display: flex;
    position: absolute;
    bottom: 100rpx;
    left: 22rpx;
    right: 22rpx;
}

.btn-box button {
    width: 347rpx;
}

.article-box {
    font-weight: 400;
    font-size: 27rpx;
    color: #00B200;
	margin-top: 30rpx;
	display: flex;
	align-items: center;
}

.article-box .iconfont {
    margin-right: 10rpx;
    font-size: 26rpx;
}

.article-box text {
    border-bottom: 1px solid;
}
</style>