|
|
@@ -0,0 +1,135 @@
|
|
|
+<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;
|
|
|
+ httpApi.login({
|
|
|
+ userName: trimmedUserName,
|
|
|
+ password: lliPassword.value,
|
|
|
+ }).then(res => {
|
|
|
+ if(res.data.type ===2){
|
|
|
+ cacheManager.set('auth', res.data)
|
|
|
+ store.setIsCanBack(false)
|
|
|
+ // 页面跳转
|
|
|
+ gotoPage();
|
|
|
+ }else{
|
|
|
+ toast('登录失败，您的身份有误，请联系管理员。')
|
|
|
+ }
|
|
|
+ }).catch(err => {
|
|
|
+ store.setIsCanBack(true)
|
|
|
+ })
|
|
|
+ }
|
|
|
+
|
|
|
+ // 跳转
|
|
|
+ function gotoPage(){
|
|
|
+ uni.navigateTo({
|
|
|
+ url: `/pages/admin/ShouYe/shouye`
|
|
|
+ })
|
|
|
+ }
|
|
|
+</script>
|
|
|
+
|
|
|
+<style>
|
|
|
+
|
|
|
+</style>
|
tanxue