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"
  import {
    onLoad
  } from "@dcloudio/uni-app";
	
	
	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();

  onLoad(() => {
    getAllImg();
  })
	
	// 加密
	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,
			password: 'XXJytwnw7lpzdDuUFqVl59Hzir+IQ9j0If7ytUcwA2jcB5tBLvRqY8dfDZYnbXzQy28MeQ3nKbTw/+AxFoUE4+o6jyrIV9Z4bllrTvHEliUb78zCOStgMw55doAMvobokXbakT6joafw8ymc6A5D6jHL0UaDz2UGgMXzdD0S1W8='
		}).then(res => {
			// 4为家政人员
			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)


      // defultKsImg.value = cacheManager.get('projectImg').index_ks_default
    });
  }
</script>

<style>

</style>