uniProject/pages/Login/clientIndex.vue

<template>
	<view class="phone-login-page">
		<view class="login-wrap-box">
			<view class="bjcx-head-box">
				<icon class="bjcx-logo-box"></icon>
				<view class="bjcx-logo-title">家政学</view>
			</view>
			
			<!-- 如果是APP分享过来的，显示微信授权界面    		@getuserinfo="onWechatAuth"-->
			
			<view v-if="fromAppShare" class="wechat-auth-box"> 
				<view class="auth-tips">欢迎使用小程序</view>
				<button 
					class="wechat-auth-btn" 
					open-type="getUserInfo" 
					@click="onWechatAuth"
			
				>
					微信一键登录
				</button>
				<view class="switch-login" @click="switchToNormalLogin">使用账号登录</view>
			</view>
			
			<!-- 普通登录表单 -->
			<view v-else>
				<view class="login-input-box">
					<icon class="user-icon"></icon>
					<input class="login-input" type="text" v-model="userName" placeholder="请输入手机号" @input="userInputChange">
					<view class="close-btn" v-if="clearTelIcon" @click="clearTel"></view>
				</view>
				<view class="login-input-box">
					<icon class="tel-icon"></icon>
					<input class="login-input" placeholder="请输入证件号后六位" v-model="password" :password="showPassword" 
					 @input="passwordInputChange"/>
					<text class="login-eye" :class="[!showPassword ? 'uni-eye-active' : '']"
						@click="changePassword"></text>
					<view class="close-btn" v-if="clearPwIcon" @click="clearPw"></view>
				</view>
				
				<!-- 协议勾选框和按钮 -->
				<view class="agreement-checkbox-box">
					<checkbox-group @change="handleChange">
						<checkbox class="agreement-checkbox-input" color="#3fd2a1" value="agree"
							:checked="isAgreed" style="transform:scale(0.7)" />
					</checkbox-group>
					<view class="agreement-text-box">
						在使用当前小程序服务之前，请仔细阅读<view class="agreement-text" @click="agreeBtn('yhxy')">《诚祥学用户协议》</view>和<view
							@click="agreeBtn('ystk')" class="agreement-text">《诚祥学隐私政策》</view>，如您同意，请勾选后开始使用
					</view>
				</view>
				
				<button type="default" @click="handleLogin" :disabled="!isAgreed" class="phone-green-btn login-btn">登录</button>
			</view>
		</view>
	</view>
</template>

<script setup>
	import cacheManager from '@/utils/cacheManager.js'
	import * as httpApi from "@/api/login.js"
	import {ref, onMounted} from "vue"
	import {toast} from "@/utils/common";
	import {useIsCanBack} from "@/store/isCanBack.js"
    import { onLoad } from "@dcloudio/uni-app";
	
	// 原有变量
	const userName = ref('')
	const password = ref('')
	const showPassword= ref(true)
	const clearTelIcon= ref(false)
	const clearPwIcon= ref(false)
	const isAgreed = ref(false)
	
	// 新增变量
	const fromAppShare = ref(true) // 是否来自APP分享
	
	const store = useIsCanBack();

    onLoad((options) => {
        // 判断是否来自APP分享
        if (options.from === 'appcx') {
            fromAppShare.value = true
            // APP分享过来直接显示微信授权界面，不需要自动弹窗
        }
        getAllImg();
    })
    
    // 切换到普通登录
    function switchToNormalLogin() {
        fromAppShare.value = false
    }
    
	phoneBind(){
		uni.navigateTo({
		    url: '/pages/Login/AliyunCaptcha',
		    events: {
		        getCaptchaVerifyParam: (captchaVerifyParam) => {
		            // 接收到验证码返回结果
		            console.log('验证码返回结果：', captchaVerifyParam)
		        }
		    },
		    success: () => {
		        console.log('跳转到验证码页面成功')
		    },
		    fail: (err) => {	
		        console.error('跳转到验证码页面失败:', err)
		        toast('验证码加载失败，请重试')
		    }
		})
	}
	
    // 微信授权登录
    async function onWechatAuth(e) {	
        if (e.detail.errMsg.includes('fail')) {
            toast('授权失败')
            return
        }
        
        uni.showLoading({ title: '登录中' })
        console.log('e',e);
        try {
            // 获取微信code
            const loginRes = await uni.login()
            		console.log('loginRes',loginRes);
            // 调用后端微信登录接口
            const result = await httpApi.loginApplet({
                code: loginRes.code,
                userInfo: e.detail.userInfo
            })
			console.log('result',result);
               console.log('result',result);
            if (result.data.bind) {
                // 保存用户信息
				if(res.data.loginVo.type ===4){
				    cacheManager.set('auth', res.data.loginVo)
				    store.setIsCanBack(false)
				    gotoPage();
				}else if(res.data.loginVo.type ===6){
					cacheManager.set('auth', res.data.loginVo)
					store.setIsCanBack(false)
					gotoPage2();
				}else{
				    toast('登录失败，您的身份有误，请联系管理员。')
				}        
            }else{
				//  bind 为 false 未绑定
				
				phoneBind()
			}
        } catch (error) {
            toast('微信登录失败')
        } finally {
            uni.hideLoading()
        }
    }

    // 你原有的所有方法都不变
    function handleChange() {
        isAgreed.value = !isAgreed.value
    }
    
    function agreeBtn(code) {
        if (code === 'yhxy') { 
            uni.navigateTo({
                url:"/pages/client/my/xieyi"
            })
        } else {
            uni.navigateTo({
                url:"/pages/client/my/zhengce"
            })
        }
    }

    function userInputChange(event){
        if (event.detail.value.length > 0) {
            clearTelIcon.value = true;
        } else {
            clearTelIcon.value = false;
        }
    }
    
    function passwordInputChange(event){
        if (event.detail.value.length > 0) {
            clearPwIcon.value = true;
        } else {
            clearPwIcon.value = false;
        }
    }
    
    function clearTel(){
        userName.value = '';
        clearTelIcon.value = false;
    }
    
    function clearPw(){
        password.value = '';
        clearPwIcon.value = false;
    }

    function changePassword() {
        showPassword.value = !showPassword.value;
    }
    
    function handleLogin() {
        if(userName.value.length ===0){
            toast('请输入手机号！')
            return
        }
        
        if(password.value.length ===0){
            toast('请输入密码！')
            return
        }
        
        const trimmedUserName = userName.value;
        const trimmedPassword = password.value;
        
        uni.showLoading({
            title: '登录中'
        })
        
        httpApi.loginTemp({
            type:2,
            userName: trimmedUserName,
            password:trimmedPassword,
        }).then(res => {
            if(res.data.type ===4){
                cacheManager.set('auth', res.data)
                store.setIsCanBack(false)
                gotoPage();
            }else if(res.data.type ===6){
				cacheManager.set('auth', res.data)
				store.setIsCanBack(false)
				gotoPage2();
			}else{
                toast('登录失败，您的身份有误，请联系管理员。')
            }
        }).catch(err => {
            store.setIsCanBack(true)
        }).finally(err => {
            uni.hideLoading()
        })
    }
    
    function gotoPage(){
        uni.navigateTo({
            url: `/pages/client/ShouYe/shouye`
        })
    } 
	function gotoPage2(){
        uni.navigateTo({
            url: `/pages/kehu/shouYe/shouye`
        })
    }

    function getAllImg() {
        httpApi.getAllImgList({}).then(res => {
            cacheManager.set('projectImg', res.data)
        });
    }
</script>

<style scoped>
/* 新增样式 */
.wechat-auth-box {
    text-align: center;
    padding: 40rpx 0;
}

.auth-tips {
    font-size: 32rpx;
    color: #333;
    margin-bottom: 60rpx;
}

.wechat-auth-btn {
    background-color: #07C160;
    color: white;
    border-radius: 50rpx;
    margin-bottom: 30rpx;
}

.switch-login {
    color: #007AFF;
    font-size: 28rpx;
}

/* 你原有的所有样式都保持不变 */
</style>