|
|
@@ -0,0 +1,168 @@
|
|
|
+<template>
|
|
|
+ <div class="hc-new-login hc-full">
|
|
|
+ <img class="hc-new-login-bg" :src="bgPng1" :data-src="bgPng" loading="lazy" alt="bg">
|
|
|
+ <div class="hc-new-login-main hc-full hc-flex-center">
|
|
|
+ <div class="hc-new-login-content relative mt-30 w-[985px]">
|
|
|
+ <div class="app-title mb-8 text-center text-[34px] text-white">重庆市交通规划和技术发展中心 (重庆市交通工程档案馆)</div>
|
|
|
+ <div class="hc-new-login-form-card bg-white p-6 flex">
|
|
|
+ <div class="form-left relative flex-1">
|
|
|
+ <img class="form-logo w-[117px]" :src="logoPng" alt="bg">
|
|
|
+ <img class="form-img" :src="imgPng" alt="bg">
|
|
|
+ </div>
|
|
|
+ <div class="form-right relative flex-1">
|
|
|
+ <div class="form-main">
|
|
|
+ <div class="title font-bold text-center text-[24px]">登 录</div>
|
|
|
+ <el-form ref="formRef" :model="formValue" :rules="formRules" label-position="left" label-width="0px" size="large">
|
|
|
+ <el-form-item prop="tenantId">
|
|
|
+ <el-input v-model="formValue.tenantId" clearable placeholder="请输入区域号">
|
|
|
+ <template #prepend>
|
|
|
+ <hc-icon name="megaphone" />
|
|
|
+ </template>
|
|
|
+ </el-input>
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item prop="username">
|
|
|
+ <el-input v-model="formValue.username" clearable placeholder="请输入账号">
|
|
|
+ <template #prepend>
|
|
|
+ <hc-icon name="user" />
|
|
|
+ </template>
|
|
|
+ </el-input>
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item prop="password">
|
|
|
+ <el-input v-model="formValue.password" clearable placeholder="请输入密码" show-password type="password" @keyup="passwordKeyUp">
|
|
|
+ <template #prepend>
|
|
|
+ <hc-icon name="lock" />
|
|
|
+ </template>
|
|
|
+ <template #suffix>
|
|
|
+ <span class="clickable-text" @click="clickableClick">忘记密码</span>
|
|
|
+ </template>
|
|
|
+ </el-input>
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item class="checkbox-1">
|
|
|
+ <el-checkbox v-model="protocolCheckbox">我已经同意</el-checkbox>
|
|
|
+ <el-link type="primary" @click="protocolClick">软件产品用户使用服务协议</el-link>
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item class="checkbox-2">
|
|
|
+ <el-checkbox v-model="checkbox" label="记住密码" />
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item class="login-btn">
|
|
|
+ <el-button class="text-[18px]" :loading="loading" block color="#186DA5" @click="formValidateClick">登 录</el-button>
|
|
|
+ </el-form-item>
|
|
|
+ </el-form>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="hc-new-login-copyright">
|
|
|
+ <div class="text">版 权 所 有：重庆市交通规划和技术发展中心</div>
|
|
|
+ <div class="text">技术支持单位：重庆泓创智诚信息技术有限公司</div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+</template>
|
|
|
+
|
|
|
+<script setup>
|
|
|
+import { onMounted, ref } from 'vue'
|
|
|
+import router from '~src/router/index'
|
|
|
+import { useAppStore } from '~src/store'
|
|
|
+import { setUserTenantInfo, useAppLogin } from '~sto/user'
|
|
|
+import { getTenantID } from '~api/user'
|
|
|
+import { getTopUrl } from '~uti/tools'
|
|
|
+import { formValidate, getObjVal } from 'js-fast-way'
|
|
|
+
|
|
|
+//图片文件
|
|
|
+import bgPng from '~src/assets/login/new-bg.png'
|
|
|
+import bgPng1 from '~src/assets/login/new-bg-1.png'
|
|
|
+import imgPng from '~src/assets/login/new-img.png'
|
|
|
+import logoPng from '~src/assets/login/new-logo.png'
|
|
|
+
|
|
|
+const userStore = useAppStore()
|
|
|
+userStore.clearStoreData() //先清理下缓存
|
|
|
+
|
|
|
+onMounted(() => {
|
|
|
+ //store.clearStoreData() //先清理下缓存
|
|
|
+ // 兼容性脚本，如果loading属性不被支持
|
|
|
+ document.querySelectorAll('img[loading="lazy"]').forEach((img) => {
|
|
|
+ img.src = img.dataset.src
|
|
|
+ })
|
|
|
+ getTenantIdApi()
|
|
|
+})
|
|
|
+
|
|
|
+//表单
|
|
|
+const formRef = ref(null)
|
|
|
+const formValue = ref({ tenantId: '000000', username: '', password: '', type: 'account' })
|
|
|
+const formRules = {
|
|
|
+ tenantId: {
|
|
|
+ required: true,
|
|
|
+ message: '请输入区域号',
|
|
|
+ trigger: 'blur',
|
|
|
+ },
|
|
|
+ username: {
|
|
|
+ required: true,
|
|
|
+ message: '请输入账号',
|
|
|
+ trigger: 'blur',
|
|
|
+ },
|
|
|
+ password: {
|
|
|
+ required: true,
|
|
|
+ message: '请输入密码',
|
|
|
+ trigger: 'blur',
|
|
|
+ },
|
|
|
+}
|
|
|
+const passwordKeyUp = (e) => {
|
|
|
+ if (e.key === 'Enter') {
|
|
|
+ formValidateClick()
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
+//获取租户id
|
|
|
+const getTenantIdApi = async () => {
|
|
|
+ const { data } = await getTenantID(getTopUrl())
|
|
|
+ const { id } = await setUserTenantInfo(getObjVal(data))
|
|
|
+ formValue.value.tenantId = id //设置租户ID
|
|
|
+}
|
|
|
+
|
|
|
+//登录
|
|
|
+const loading = ref(false)
|
|
|
+const formValidateClick = async () => {
|
|
|
+ const formRes = await formValidate(formRef.value)
|
|
|
+ if (!formRes) return false
|
|
|
+ if (protocolCheckbox.value) {
|
|
|
+ window?.$message?.warning('请先同意软件产品用户使用服务协议')
|
|
|
+ return false
|
|
|
+ }
|
|
|
+ //登录请求
|
|
|
+ loading.value = true
|
|
|
+ const { error, msg } = await useAppLogin(formValue.value)
|
|
|
+ if (error) {
|
|
|
+ loading.value = false
|
|
|
+ window?.$message?.error(msg)
|
|
|
+ return false
|
|
|
+ }
|
|
|
+ //登录成功
|
|
|
+ window?.$message?.success('登录成功')
|
|
|
+ setTimeout(() => {
|
|
|
+ loading.value = false
|
|
|
+ router.push({ name: 'datav' })
|
|
|
+ }, 1500)
|
|
|
+}
|
|
|
+
|
|
|
+const checkbox = ref(false)
|
|
|
+const protocolCheckbox = ref(false)
|
|
|
+
|
|
|
+//忘记密码
|
|
|
+const clickableClick = () => {
|
|
|
+ const val = '<div style="font-size: 16px;">忘记密码请不要紧张，联系您项目上的专属客服人员电话 <span style="color:#1ECC95;">18423665354</span> ，提供身份证明信息即可初始化密码，建议初始化之后由您单独去更改密码</div>'
|
|
|
+ window?.$messageBox?.alert(val, '联系项目客服', {
|
|
|
+ confirmButtonText: '确定',
|
|
|
+ dangerouslyUseHTMLString: true,
|
|
|
+ })
|
|
|
+}
|
|
|
+
|
|
|
+//协议
|
|
|
+const protocolClick = () => {
|
|
|
+ window.open('https://bladex-chongqing-info.oss-cn-hangzhou.aliyuncs.com//upload/20231213/73025c8aba72e1165e0731942f6e66c9.pdf', '_blank')
|
|
|
+}
|
|
|
+</script>
|
|
|
+
|
|
|
+<style lang="scss">
|
|
|
+@import "../../styles/view/new-login";
|
|
|
+</style>
|
