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分享过来的微信授权 -->
			<view v-if="fromAppShare && !showNormalLogin" class="wechat-auth-box">
				<view class="auth-tips">欢迎使用小程序</view>
				<button 
					class="wechat-auth-btn" 
					open-type="getUserInfo" 
					@getuserinfo="onWechatAuth"
				>
					微信一键登录
				</button>
				<view class="switch-login" @click="showNormalLogin = true">使用账号登录</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} 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(false) // 是否来自APP分享
	const showNormalLogin = ref(false) // 是否显示普通登录
	
	const store = useIsCanBack();

    onLoad((options) => {
        // 判断是否来自APP分享
        if (options.from === 'appcx') {
            fromAppShare.value = true
        }
        getAllImg();
    })
    
    // 微信授权登录
    async function onWechatAuth(e) {
        if (e.detail.errMsg.includes('fail')) {
            toast('授权失败')
            return
        }
        
        uni.showLoading({ title: '登录中' })
        
        try {
            // 获取微信code
            const loginRes = await uni.login()
            
            // 调用后端微信登录接口
            const result = await httpApi.wechatLogin({
                code: loginRes.code,
                userInfo: e.detail.userInfo
            })
            
            if (result.data.success) {
                // 保存用户信息
                cacheManager.set('auth', result.data)
                
                // 检查手机号绑定状态
                const bindResult = await httpApi.checkPhoneBind()
                
                if (bindResult.data.hasPhone) {
                    // 已绑定手机号，进入首页
                    store.setIsCanBack(false)
                    gotoPage()
                } else {
                    // 未绑定手机号，跳转绑定页面
                    uni.navigateTo({
                        url: '/pages/bind-phone/bind-phone'
                    })
                }
            }
        } 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{
                toast('登录失败，您的身份有误，请联系管理员。')
            }
        }).catch(err => {
            store.setIsCanBack(true)
        }).finally(err => {
            uni.hideLoading()
        })
    }
    
    function gotoPage(){
        uni.navigateTo({
            url: `/pages/client/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>