优化登录

src/views/login/index.vue

@@ -1,8 +1,8 @@
 <template>
     <div class="login-body">
-        <a class="left-logo" href="http://hczc.hcxxy.com/" target="_blank" v-if="appLogoIcon">
-            <img alt="" id="logo-icon" :src="appLogoIcon">
-            <img alt="" id="logo-name" :src="appLogoName">
+        <a v-if="appLogoIcon" class="left-logo" href="http://hczc.hcxxy.com/" target="_blank">
+            <img id="logo-icon" alt="" :src="appLogoIcon">
+            <img id="logo-name" alt="" :src="appLogoName">
         </a>
         <div class="left-pic-container">
             <Suspense>
@@ -15,39 +15,39 @@
         <div class="right-container">
             <div class="right-app-title">登录档案管理平台</div>
             <div class="sign-list">
-                <h1 class="font-lg">登录</h1>
                 <div class="title-tab">
-                    <div :class="account?'active':''" @click="accountClick">密码登录</div>
-                    <div :class="account?'':'active'" @click="accountClick">游客登录</div>
+                    <div :class="account ? 'active' : ''" @click="accountClick">密码登录</div>
+                    <div :class="account ? '' : 'active'" @click="accountClick">游客登录</div>
                 </div>
-                <div class="form-box mt-4" v-if="account">
+                <div v-if="account" class="form-box mt-4">
                     <el-form ref="formRef" :model="formValue" :rules="formRules" label-width="0px" label-position="left" size="large">
                         <el-form-item prop="username">
-                            <el-input v-model="formValue.username" placeholder="账号" clearable/>
+                            <el-input v-model="formValue.username" placeholder="账号" clearable />
                         </el-form-item>
                         <el-form-item prop="password" class="mt-8">
-                            <el-input type="password" v-model="formValue.password" placeholder="密码" clearable show-password @keyup="passwordKeyUp">
+                            <el-input v-model="formValue.password" type="password" placeholder="密码" clearable show-password @keyup="passwordKeyUp">
                                 <template #suffix>
                                     <span class="clickable-text" @click="clickableClick">忘记密码</span>
                                 </template>
                             </el-input>
                         </el-form-item>
-                        <el-form-item prop="tenantId" v-if="tenantMode">
-                            <el-input v-model="formValue.tenantId" clearable placeholder="租户ID"/>
+                        <el-form-item v-if="tenantMode" prop="tenantId">
+                            <el-input v-model="formValue.tenantId" clearable placeholder="租户ID" />
                         </el-form-item>
                         <el-form-item>
-                            <el-checkbox v-model="checkbox" label="记住密码"/>
+                            <el-checkbox v-model="checkbox" label="记住密码" />
                         </el-form-item>
                         <el-form-item class="mt-8">
                             <el-button type="primary" block :loading="loading" @click="formValidateClick">登 录</el-button>
                         </el-form-item>
+                        <div class="form-protocol" @click="protocolClick">《软件产品用户使用服务协议》</div>
                     </el-form>
                 </div>
 
-                <div class="form-box mt-4" v-else>
+                <div v-else class="form-box mt-4">
                     <el-form ref="touristsRef" :model="touristsForm" :rules="touristsRules" label-width="auto" label-position="left" size="large">
                         <el-form-item prop="phone">
-                            <el-input v-model="touristsForm.phone" placeholder="请输入手机号" clearable/>
+                            <el-input v-model="touristsForm.phone" placeholder="请输入手机号" clearable />
                         </el-form-item>
                         <el-form-item class="mt-8">
                             <el-button type="primary" block :loading="loading" @click="touristsValidateClick">登 录</el-button>
@@ -56,27 +56,27 @@
                 </div>
             </div>
         </div>
-        <!--预先加载首页背景图-->
+        <!-- 预先加载首页背景图 -->
         <Suspense>
-            <HcHomeBg/>
+            <HcHomeBg />
         </Suspense>
     </div>
 </template>
 
 <script setup>
-import {ref, onMounted, nextTick} from "vue";
+import { nextTick, onMounted, ref } from 'vue'
 import website from '~src/config/index'
-import router from '~src/router/index';
-import {useAppStore} from "~src/store";
-import {useAppLogin} from "~sto/user";
+import router from '~src/router/index'
+import { useAppStore } from '~src/store'
+import { useAppLogin } from '~sto/user'
 import HcPicVue from './components/pic.vue'
 import HcHomeBg from './components/home-bg.vue'
-import {getTenantID} from "~api/user";
-import {getTopUrl, setAppName} from "~uti/tools";
-import logoIcon from "~src/assets/logo/icon.png";
-import logoName from "~src/assets/logo/name.png";
-import {getStoreValue} from "~uti/storage";
-import {formValidate, getArrValue, getObjVal, setImageColorStyle} from "js-fast-way"
+import { getTenantID } from '~api/user'
+import { getTopUrl, setAppName } from '~uti/tools'
+import logoIcon from '~src/assets/logo/icon.png'
+import logoName from '~src/assets/logo/name.png'
+import { getStoreValue } from '~uti/storage'
+import { formValidate, getArrValue, getObjVal, setImageColorStyle } from 'js-fast-way'
 
 const userStore = useAppStore()
 userStore.clearStoreData() //先清理下缓存
@@ -90,7 +90,7 @@ const account = ref(true)
 const tenantMode = ref(true)
 
 const accountClick = () => {
-    account.value = !account.value;
+    account.value = !account.value
 }
 
 onMounted(() => {
@@ -104,38 +104,38 @@ const setAppImageColor = () => {
 }
 
 //表单
-const formRef = ref(null);
+const formRef = ref(null)
 const checkbox = ref(false)
-const formValue = ref({tenantId: "000000", username: '', password: '', type: "account"})
+const formValue = ref({ tenantId: '000000', username: '', password: '', type: 'account' })
 const formRules = {
     tenantId: {
         required: true,
-        message: "请输入租户ID",
-        trigger: "blur"
+        message: '请输入租户ID',
+        trigger: 'blur',
     },
     username: {
         required: true,
-        message: "请输入账号",
-        trigger: "blur"
+        message: '请输入账号',
+        trigger: 'blur',
     },
     password: {
         required: true,
-        message: "请输入密码",
-        trigger: "blur"
-    }
+        message: '请输入密码',
+        trigger: 'blur',
+    },
 }
 const passwordKeyUp = (e) => {
-    if (e.key === "Enter") {
+    if (e.key === 'Enter') {
         formValidateClick()
     }
 }
 
 //获取租户id
 const getTenantIdApi = async () => {
-    const {error, code, data} = await getTenantID(getTopUrl())
+    const { error, code, data } = await getTenantID(getTopUrl())
     const res = getObjVal(data)
     if (!error && code === 200 && res) {
-        const {tenantAvatar, tenantAvatarText, tenantTitle, tenantId} = res
+        const { tenantAvatar, tenantAvatarText, tenantTitle, tenantId } = res
         tenantMode.value = false
         //设置标题
         userStore.setTitle(tenantTitle)
@@ -169,8 +169,8 @@ const getTenantIdApi = async () => {
         userStore.setLogoName(logoName)
 
         //设置租户ID
-        formValue.value.tenantId = "000000"
-        userStore.setTenantId("000000")
+        formValue.value.tenantId = '000000'
+        userStore.setTenantId('000000')
     }
     nextTick(() => {
         setAppImageColor()
@@ -182,13 +182,13 @@ const loading = ref(false)
 const formValidateClick = async () => {
     const formRes = await formValidate(formRef.value)
     if (formRes) {
-        loading.value = true;
+        loading.value = true
         useAppLogin(formValue.value).then((res) => {
-            loading.value = false;
-            window?.$message?.success('登录成功');
-            setHomeRouter();
+            loading.value = false
+            window?.$message?.success('登录成功')
+            setHomeRouter()
         }).catch(() => {
-            loading.value = false;
+            loading.value = false
         })
     }
 }
@@ -202,19 +202,19 @@ const setHomeRouter = () => {
     }
     userStore.setHomeUrl(appHomeUrl)
     router.push({
-        name: appHomeUrl
-    });
+        name: appHomeUrl,
+    })
 }
 
 //游客登录
-const touristsRef = ref(null);
-const touristsForm = ref({phone: ''});
+const touristsRef = ref(null)
+const touristsForm = ref({ phone: '' })
 const touristsRules = {
     phone: {
         required: true,
-        message: "请输入手机号",
-        trigger: "blur"
-    }
+        message: '请输入手机号',
+        trigger: 'blur',
+    },
 }
 const touristsValidateClick = async () => {
     const formRes = await formValidate(touristsRef.value)
@@ -228,9 +228,14 @@ const clickableClick = () => {
     const val = '<div style="font-size: 16px;">忘记密码请不要紧张，联系您项目上的专属客服人员电话 <span style="color:#1ECC95;">18423665354</span> ，提供身份证明信息即可初始化密码，建议初始化之后由您单独去更改密码</div>'
     window?.$messageBox?.alert(val, '联系项目客服', {
         confirmButtonText: '确定',
-        dangerouslyUseHTMLString: true
+        dangerouslyUseHTMLString: true,
     })
 }
+
+//协议
+const protocolClick = () => {
+    window.open('https://bladex-chongqing-info.oss-cn-hangzhou.aliyuncs.com//upload/20231213/73025c8aba72e1165e0731942f6e66c9.pdf', '_blank')
+}
 </script>
 
 <style lang="scss" scoped>
@@ -247,4 +252,13 @@ const clickableClick = () => {
         box-shadow: 0 0 0 2px var(--el-color-danger) inset;
     }
 }
+.form-protocol {
+    color: #8C8889;
+    font-size: 13px;
+    cursor: pointer;
+    transition: color 0.3s;
+    &:hover {
+        color: var(--el-color-primary);
+    }
+}
 </style>