cgc_WeChat/pages/login/login.vue

<template>
    <div style="padding-top: 88rpx;">
        <div class="login-tip">大美非遗 申请获得</div>
        <div class="login-tip2">以下权限</div>
        <div class="login-tip-box">
            <text>获得你的公开信息（昵称、头像、地区及性别）</text>
        </div>
        <div class="btn-box">
            <button bindtap="cancel" type="default" @click="redirectIndex">取消</button>
            <button type="primary" @click="getUserInfo">同意</button>
        </div>
        <div class="flex-center article-box">
            <radio-group @change="toggleAgreement">
                <radio value="1" :checked="isAgreed" style="transform:scale(0.7)"></radio>
            </radio-group>
            <div>同意<text @click="gotoInfo">《用户服务协议》、《隐私政策》</text></div>
        </div>
        <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>
    </div>
</template>

<script>
export default {
    name: "login",
    data() {
        return {
            isAgreed: false,
        };
    },
    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,
                    token: uni.getStorageSync('token1')
                }, '/api/mini_program/bindPhoneNumber')
               .then(res => {
                    this.$store.commit('changeUserInfo', res.data.userinfo);
                    this.navigateBasedOnPath();
                })
               .catch(error => {
                    console.error('绑定手机号失败:', error);
                    uni.showToast({
                        title: '绑定手机号失败，请稍后重试',
                        icon: 'none'
                    });
                });
            } else {
                console.error('获取手机号失败:', e.detail.errMsg);
                uni.showToast({
                    title: '获取手机号失败，请稍后重试',
                    icon: 'none'
                });
            }
        },
        // 跳转到协议页面
        gotoInfo() {
            uni.navigateTo({
                url: '/subPackages/user/privacy'
            });
        },
        // 切换协议同意状态
        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') || ''
                            }, '/api/mini_program/login')
                           .then(resTwo => {
                                this.$store.commit('changeUserInfo', resTwo.data.userinfo);
                                if (resTwo.data.userinfo.mobile) {
                                    this.navigateBasedOnPath();
                                } else {
                                    uni.setStorageSync('token1', resTwo.data.userinfo.token);
                                    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-size: 28rpx;
    margin: 0 60rpx;
    margin-top: 40rpx;
}

.login-tip2 {
    font-size: 44rpx;
    margin: 0rpx 60rpx;
    margin-top: 20rpx;
    font-weight: 400;
}

.login-tip-box {
    display: flex;
    align-items: flex-start;
    margin: 0 60rpx;
    font-size: 28rpx;
    margin-top: 40rpx;
    line-height: 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: 0;
    right: 0;
}

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

.article-box {
    position: absolute;
    left: 0;
    right: 0;
    justify-content: center;
    font-size: 24rpx;
    color: #1aad19;
    bottom: 40rpx;
}

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

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