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" />
		<shengjiDialogIos ref="tipDialogRef" :showQuxiao="false" :title="tipTitle" :content="tipContent" @confirm-btn="BanbenConfirmBtn"
			okBtn="确认"></shengjiDialogIos>
		<!-- 安卓强制升级 -->
		<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';
	import shengjiDialogIos from '@/components/dialog/shengjiDialogIos.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') {
					tipDialogRef.value.handleShow();
				} else {
					tipDialogRef2.value.handleShow();
				
				}
			}
		})
	}

	onShow(() => {
		getLoginInit()
	})
</script>

<style>

</style>