登录

common/styles/global/pages.scss

@@ -1,4 +1,32 @@
 /********** 这里放页面样式 **********/
+/*** 登录页面***/
+.phone-login-page{
+	width:100%;height:100vh; background-color: #fff;
+	.login-wrap-box{
+		width:100%;height: 1283rpx;background-image: url("@/static/images/login/login-bj.png");@include ezy-no-repeat-cover(top);
+	}
+	.bjcx-head-box{width: 100%;text-align: center;margin-bottom: 100rpx;
+	margin-top: calc(180rpx + var(--status-bar-height));display: inline-block;}
+	.bjcx-logo-box{
+		width:200rpx;height: 200rpx;background-image: url("@/static/images/login/login-logo.png");@include ezy-no-repeat-cover;
+	}
+	.bjcx-logo-title{font-size: 34rpx;color: #000;margin-top: 16rpx;}
+	
+	.login-input-box{
+		display: flex;align-items: center;border-bottom: 1rpx solid #eee;margin:32rpx 56rpx;
+		padding: 24rpx 0;
+		.login-input{flex: 1;font-size: 32rpx;}
+		.user-icon,.tel-icon{width:40rpx;height:40rpx;@include ezy-no-repeat-cover;margin-right: 32rpx;}
+		.user-icon{background-image: url("@/static/images/login/login-tel-icon.png");}
+		.tel-icon{background-image: url("@/static/images/login/login-lock-icon.png");}
+		.close-btn,.login-eye{width:30rpx;height:30rpx;@include ezy-no-repeat-cover;border-radius: 50%;}
+		.close-btn{background-image: url("@/static/images/login/login-close-icon.png");}
+		.login-eye{background-image: url("@/static/images/login/login-eye-icon.png");}
+		.login-eye + .close-btn{margin-left: 24rpx;}
+	}
+	.login-btn{margin:48rpx 56rpx;}
+}
+
 /*** 考试页面***/
 .admin-kaoshi-page {
 	box-sizing: border-box;

pages/Login/components/loginBox.vue

@@ -0,0 +1,131 @@
+<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 = '';
+		lliPassword.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
+		}
+		
+		httpApi.login({
+			userName: userName.value,
+			password: lliPassword.value
+		}).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>

pages/Login/index.vue

@@ -1,75 +1,7 @@
 <template>
-	<view>
-		北京诚祥 登录页面
-		<view>
-			<!-- <button type="primary" @click="setLocalData">设置缓存</button>
-			<button type="primary" @click="setPinia">设置状态</button>
-			<button type="primary" @click="goAdminShouye">去管理首页</button>
-			<button type="warn" @click="goJiaZhengShouye">去家政首页</button> -->
-			<input type="text" v-model="userName" placeholder="请输入用户名">
-			<input type="text" v-model="password" @blur="handleUpdateLLiPassword" placeholder="请输入密码">
-			<button type="warn" @click="handleLogin">登录</button>
-		</view>
-		已加密的:{{lliPassword}}
-
-    <!--  隐藏的同步加密密码组件 非可见  -->
-		<passwordLli ref="passLLiRef" :password="password" @lli-password="onLliPassword" />
-	</view>
+	<login-box></login-box>
+	
 </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"
-	const userName = ref('18604088413') // 用户名
-	const password = ref('1') // 密码
-	const lliPassword = ref('') // 加密后的密码
-	const passLLiRef = ref(null)
-
-	function goAdminShouye() {
-		uni.navigateTo({
-			url: "/pages/ShouYe/shouyeOne"
-		})
-	}
-
-	function goJiaZhengShouye() {
-		uni.navigateTo({
-			url: "/pages/ShouYe/shouyeTwo"
-		})
-	}
-
-	function handleUpdateLLiPassword() {
-		passLLiRef.value.lliPassword();
-	}
-
-	function onLliPassword(password) {
-		lliPassword.value = password;
-	}
-
-	function handleLogin() {
-		httpApi.login({
-			userName: userName.value,
-			password: lliPassword.value
-		}).then(res => {
-			cacheManager.set('auth', res.data)
-			console.log('登录成功')
-
-			// 目前默认跳转管理端首页
-			// uni.navigateTo({
-			// 	url: `/pages/admin/ShouYe/shouye`
-			// })
-
-			// 目前默认管理端考试页面
-			uni.navigateTo({
-				url: `/pages/admin/Jiazheng/index`
-			})
-		})
-	}
+	import loginBox from './components/loginBox.vue'
 </script>
-
-<style lang="scss">
-
-</style>