uniProject/pages/Login/components/clientloginBox.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"
					@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";
	import {
		useIsCanBack
	} from "@/store/isCanBack.js"


	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)

	const store = useIsCanBack();

	// 加密
	function handleUpdateLLiPassword() {
		console.log('handleUpdateLLiPassword')
		passLLiRef.value.lliPassword();
	}

	function onLliPassword(password) {
		console.log('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;
		const trimmedPassword = lliPassword.value;

		uni.showLoading({
			title: '登录中'
		})

		httpApi.login({
			// type 1app 2为H5
			type: 2,
			userName: trimmedUserName,
			password: lliPassword.value,
		}).then(res => {
			// 4为家政人员
			if (res.data.type === 4) {

				if (cacheManager.get('auth')) {
					cacheManager.clearAll()
				}

				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`
		})
	}
</script>

<style>

</style>