uniProject/pages/Login/components/adminloginBox.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>
			<!-- 协议勾选框和按钮 -->
			<view class="agreement-checkbox-box">
				<checkbox-group @change="handleAgreementChange">
					<checkbox class="agreement-checkbox-input" color="#FFFFFF" value="agree"
						:checked="isAgreed" />
				</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" class="phone-green-btn login-btn">登录</button>
		<!-- 已加密的:{{lliPassword}} -->
		</view>
		<passwordLli ref="passLLiRef" :password="password" @lli-password="onLliPassword" />
		<tip-dialog ref="tipDialogRef" :title="tipTitle" :content="tipContent"></tip-dialog>
		
		<!-- 安卓强制升级 -->
		<shengJiDialog ref="tipDialogRef2" :closeFlag='false' :title="tipTitle" @confirm-btn="BanbenConfirmBtn" :showTip="true"
			:notClose="true" :content="tipContentAndroid">
		</shengJiDialog>
		
		<!-- 用户协议及隐私保护 -->
		<common-dialog ref="commonDialogRef" :title="yhxyTitle" :content="yhxyContent"
			@confirm-btn="yhxyBtn" okBtn="同意并登录" notBtn="不同意"></common-dialog>
	</view>
</template>

<script setup>
	import {onShow} from '@dcloudio/uni-app';
	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 config from '../../../config.js'
	import tipDialog from '@/components/dialog/tipDialog.vue';
	import shengJiDialog from '@/components/dialog/shengJiDialog.vue';
	import {useVersionUpdate} from "@/utils/versionUpdate.js";
	import commonDialog from '@/components/dialog/commonDialog.vue';
	
	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 isAgreed = ref(false)
	
	const store = useIsCanBack();
	const version = config.appInfo.version;
	const tipDialogRef = ref(null);
	const tipTitle = '升级提醒';
	const tipContent = '您的APP不是最新版本，部分功能不能使用，请升级至最新版本！';
	const tipContentAndroid = '您的APP不是最新版本，部分功能不能使用，请升级至最新版本！'
	
	const tipDialogRef2 = ref(null)
	const updateUrl = ref(null)
	
	const handleAgreementChange = (event) => {
		if (event.detail.value[0] === 'agree') {
			isAgreed.value = true;
		} else {
			isAgreed.value = false;
		}
	}
	
	const commonDialogRef = ref(null);
	const yhxyContent = '我已阅读并同意《家政学用户协议》和《家政学隐私政策》';
	const yhxyTitle = '用户协议及隐私保护';
	
	const {
		initDownload
	} = useVersionUpdate()
	
	const agreeBtn = (data) => {
		if (data === 'yhxy') {
			uni.navigateTo({
			  url: `/pages/admin/my/yhxy?from=login`
			})
		} else {
			uni.navigateTo({
			  url: `/pages/admin/my/yszc?from=login`
			})
		}
	};
	
	function BanbenConfirmBtn() {
		const systemInfo = uni.getSystemInfoSync();
			if (systemInfo.platform == 'ios') {
				const appStoreUrl = 'itms-apps://itunes.apple.com/app/6754060756'
				plus.runtime.openURL(appStoreUrl)
			} else {
				initDownload(updateUrl.value)
			}
	}	
	
	// 加密
	function 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
		}
		if(!isAgreed.value){
			commonDialogRef.value.handleShow();
			return
		}
		
		// 去除 userName 两端的空格
		const trimmedUserName = userName.value;
		const trimmedPassword = lliPassword.value;
		
	
		httpApi.login({
			// type 1app 2为H5
			type:1,
			userName: trimmedUserName,
			password: lliPassword.value,
		}).then(res => {
			// 2为家政管理员
			if(res.data.type ===2 ||res.data.type ===5){
			
				cacheManager.set('auth', res.data)
				store.setIsCanBack(false)
				// 页面跳转
				gotoPage();
			}else{
				toast('登录失败，您的身份有误，请联系管理员。')
			}
		}).catch(err => {
			store.setIsCanBack(true)
		})
	}
	
	function yhxyBtn(){
		isAgreed.value = true;
		handleLogin()
	}
	// 跳转
	function gotoPage(){
        uni.navigateTo({
          url: `/pages/admin/ShouYe/shouye`
        })
		}
		
	function getLoginInit(){
		httpApi.getVersion({}).then(res => {
	
			if (version != res.data.version) {
				updateUrl.value = res.data.updateUrl
				
				const systemInfo = uni.getSystemInfoSync();
				if (systemInfo.platform == 'ios') {
				
				} else {
					tipDialogRef2.value.handleShow();
				}
			}
		})
	}
	
	onShow(() => {
		getLoginInit()
	})	
</script>

<style>

</style>