for_client/src/views/login/new.vue

<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] mb-8">登 录</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="请输入区域号" />
                                </el-form-item>
                                <el-form-item prop="username">
                                    <el-input v-model="formValue.username" clearable placeholder="请输入账号" />
                                </el-form-item>
                                <el-form-item class="mt-8" prop="password">
                                    <el-input v-model="formValue.password" clearable placeholder="请输入密码" show-password type="password" @keyup="passwordKeyUp">
                                        <template #suffix>
                                            <span class="clickable-text" @click="clickableClick">忘记密码</span>
                                        </template>
                                    </el-input>
                                </el-form-item>
                                <el-form-item>
                                    <el-checkbox v-model="protocolCheckbox" />
                                    <span class="form-protocol" @click="protocolClick">《软件产品用户使用服务协议》</span>
                                </el-form-item>
                                <el-form-item>
                                    <el-checkbox v-model="checkbox" label="记住密码" />
                                </el-form-item>
                                <el-form-item class="mt-8">
                                    <el-button :loading="loading" block type="primary" @click="formValidateClick">登 录</el-button>
                                </el-form-item>
                            </el-form>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="hc-new-login-copyright">
            <div class="text">版&nbsp;&nbsp;权&nbsp;&nbsp;所&nbsp;&nbsp;有：重庆市交通规划和技术发展中心</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
    //登录请求
    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({ path: '/home/index' })
    }, 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>