uniProject/pages/Login/components/loginBox.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>
			
			<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" 
				@blur="handleUpdateLLiPassword" @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>
			<button type="default" @click="handleLogin" class="phone-green-btn login-btn">登录</button>
		已加密的:{{lliPassword}}
		</view>
		<passwordLli ref="passLLiRef" :password="password" @lli-password="onLliPassword" />
	</view>
</template>

<script setup>
	import cacheManager from '@/utils/cacheManager.js'
	import * as httpApi from "@/api/login.js"
	import passwordLli from "@/components/password-lli/password-lli.vue";
	import {ref} from "vue"
	import {toast} from "@/utils/common";
	const userName = ref('') // 用户名
	const password = ref('') // 密码
	const lliPassword = ref('') // 加密后的密码
	const passLLiRef = ref(null)
	const showPassword= ref(true)
	const clearTelIcon= ref(false)
	const clearPwIcon= ref(false)
	
	// 加密
	function handleUpdateLLiPassword() {
		passLLiRef.value.lliPassword();
	}
	function onLliPassword(password) {
		lliPassword.value = password;
	}
	
	// 手机号校验
	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
		}
		
		// 去除 userName 两端的空格
		const trimmedUserName = userName.value.trim();
		const trimmedPassword = lliPassword.value.trim();
		console.log(userName.value,'userName.value');
		console.log(lliPassword.value,'lliPassword.value');
		httpApi.login({
			userName: trimmedUserName,
			password: trimmedPassword,
		}).then(res => {
			cacheManager.set('auth', res.data)
			console.log('登录成功')
			// 页面跳转
			gotoPage();
		})
	}
	
	// 跳转
	function gotoPage(){
		// 客户端
		// #ifdef H5
		uni.navigateTo({
			url: `/pages/client/ShouYe/shouye`
		})
		// #endif
		
		// 管理端
		// #ifdef APP-PLUS
		uni.navigateTo({
			url: `/pages/admin/ShouYe/shouye`
		})
		// #endif

	}
</script>

<style>

</style>