for_client/src/views/login/index.vue

<template>
    <div class="login-body">
        <a href="http://hczc.hcxxy.com/" target="_blank" class="left-logo">
            <img src="../../assets/logo/logo-2.png" alt="">
        </a>
        <div class="left-pic-container">
            <div class="left-pic-content">
                <div class="dt small-logo">
                    <div class="cons">
                        <img src="../../assets/login/bim.png" alt="" class="logos">
                        <img src="../../assets/login/s1.png" alt="" class="shadow1">
                    </div>
                </div>
                <div class="ds small-logo">
                    <div class="cons">
                        <img src="../../assets/login/gis.png" alt="" class="logos">
                        <img src="../../assets/login/s1.png" alt="" class="shadow1">
                    </div>
                </div>
                <div class="cc small-logo">
                    <div class="cons">
                        <img src="../../assets/login/bd.png" alt="" class="logos">
                        <img src="../../assets/login/s1.png" alt="" class="shadow1">
                    </div>
                </div>
                <div class="rp small-logo">
                    <div class="cons">
                        <img src="../../assets/login/ca.png" alt="" class="logos">
                        <img src="../../assets/login/s1.png" alt="" class="shadow1">
                    </div>
                </div>
                <div class="cube1">
                    <div class="cons">
                        <img src="../../assets/login/cube1.png" alt="" class="cubes">
                        <img src="../../assets/login/s2.png" alt="" class="shadow2">
                    </div>
                </div>
                <div class="cube2">
                    <div class="cons">
                        <img src="../../assets/login/cube2.png" alt="" class="cubes">
                        <img src="../../assets/login/s3.png" alt="" class="shadow3">
                    </div>
                </div>
                <div class="logo">
                    <a href="http://hczc.hcxxy.com/" target="_blank">
                        <div class="a-cons"/>
                    </a>
                </div>
            </div>
        </div>
        <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>
                <div class="form-box mt-4" v-if="account">
                    <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-form-item>
                        <el-form-item prop="password" class="mt-8">
                            <el-input type="password" v-model="formValue.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>
                            <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>
                    </el-form>
                </div>

                <div class="form-box mt-4" v-else>
                    <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-form-item>
                        <el-form-item class="mt-8">
                            <el-button type="primary" block :loading="loading" @click="touristsValidateClick">登 录</el-button>
                        </el-form-item>
                    </el-form>
                </div>
            </div>
        </div>
        <!--预先加载首页背景图-->
        <div class="hc-login-theme-home">
            <template v-for="item in theme.home">
                <img :src="item.bg" :alt="item.name">
            </template>
        </div>
    </div>
</template>

<script setup>
import {ref} from "vue";
import router from '~src/router/index';
import {useAppStore} from "~src/store";
import {useAppLogin} from "~sto/user";
import {formValidate} from "vue-utils-plus"
import theme from '~src/config/theme'

const userStore = useAppStore()
userStore.clearStoreData() //先清理下缓存

//切换登录类型
const account = ref(true)
const accountClick = () => {
    account.value = !account.value;
}

//表单
const formRef = ref(null);
const checkbox = ref(false)
const formValue = ref({tenantId: "000000", username: '', password: '', type: "account"})
const formRules = {
    username: {
        required: true,
        message: "请输入账号",
        trigger: "blur"
    },
    password: {
        required: true,
        message: "请输入密码",
        trigger: "blur"
    }
}
const passwordKeyUp = (e) => {
    if (e.key === "Enter") {
        formValidateClick()
    }
}

//登录
const loading = ref(false)
const formValidateClick = async () => {
    const formRes = await formValidate(formRef.value)
    if (formRes) {
        loading.value = true;
        useAppLogin(formValue.value).then(() => {
            loading.value = false;
            window?.$message?.success('登录成功');
            router.push({path: '/home/index'});
        }).catch(() => {
            loading.value = false;
        })
    }
}

//游客登录
const touristsRef = ref(null);
const touristsForm = ref({phone: ''});
const touristsRules = {
    phone: {
        required: true,
        message: "请输入手机号",
        trigger: "blur"
    }
}
const touristsValidateClick = async () => {
    const formRes = await formValidate(touristsRef.value)
    if (formRes) {
        console.log(touristsForm.value)
    }
}

//忘记密码
const clickableClick = () => {
    const val = '<div style="font-size: 16px;">忘记密码请不要紧张，联系您项目上的专属客服人员电话 <span style="color:#1ECC95;">18423665354</span> ，提供身份证明信息即可初始化密码，建议初始化之后由您单独去更改密码</div>'
    window?.$messageBox?.alert(val, '联系项目客服', {
        confirmButtonText: '确定',
        dangerouslyUseHTMLString: true
    })
}
</script>

<style lang="scss" scoped>
@import "../../styles/view/login.scss";
</style>

<style lang="scss">
.form-box {
    .el-input__wrapper.is-focus{
        box-shadow: 0 0 0 2px var(--el-input-focus-border-color) inset;
    }
    .el-form-item.is-error .el-input__wrapper {
        box-shadow: 0 0 0 2px var(--el-color-danger) inset;
    }
}
</style>