|
@@ -0,0 +1,303 @@
|
|
|
+<template>
|
|
|
+ <el-row>
|
|
|
+ <el-col :span="24" class="main animate__animated animate__backInRight">
|
|
|
+ <el-col :span="24" class="one">
|
|
|
+ <el-col :span="24" class="w_1200">
|
|
|
+ <el-col :span="24" class="one_1">
|
|
|
+ <el-col :span="12" class="left">
|
|
|
+ <el-col :span="3" class="image">
|
|
|
+ <el-image :src="webInfos.logo_url"></el-image>
|
|
|
+ </el-col>
|
|
|
+ <el-col :span="21" class="other">
|
|
|
+ <el-col :span="24" class="zhTitle textOver">
|
|
|
+ {{ webInfos.zhTitle }}
|
|
|
+ </el-col>
|
|
|
+ <el-col :span="24" class="enTitle textOver">
|
|
|
+ {{ webInfos.enTitle }}
|
|
|
+ </el-col>
|
|
|
+ </el-col>
|
|
|
+ </el-col>
|
|
|
+ <el-col :span="12" class="right"></el-col>
|
|
|
+ </el-col>
|
|
|
+ </el-col>
|
|
|
+ </el-col>
|
|
|
+ <el-col :span="24" class="two">
|
|
|
+ <el-col :span="24" class="w_1200">
|
|
|
+ <el-col :span="14" class="left">
|
|
|
+ <el-col :span="24" class="txt">{{ webInfos.one_title }}</el-col>
|
|
|
+ <el-col :span="24" class="txt">{{ webInfos.two_title }}</el-col>
|
|
|
+ <el-col :span="24" class="txt">{{ webInfos.thr_title }}</el-col>
|
|
|
+ <el-col :span="24" class="txt">{{ webInfos.four_title }}</el-col>
|
|
|
+ </el-col>
|
|
|
+ <el-col :span="10" class="right">
|
|
|
+ <el-col :span="24" class="login">
|
|
|
+ <el-col :span="24" class="login_1">
|
|
|
+ <el-image :src="webInfos.user_url"></el-image>
|
|
|
+ <span>欢迎登录</span>
|
|
|
+ </el-col>
|
|
|
+ <el-col :span="24" class="login_2">
|
|
|
+ <el-form ref="ruleFormRef" size="default" :model="form" :rules="rules">
|
|
|
+ <el-form-item label="" prop="account">
|
|
|
+ <el-input v-model="form.account" placeholder="请输入账号">
|
|
|
+ <template #prefix>
|
|
|
+ <el-icon><User /></el-icon>
|
|
|
+ </template>
|
|
|
+ </el-input>
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item label="" prop="password">
|
|
|
+ <el-input v-model="form.password" type="password" show-password placeholder="请输入密码">
|
|
|
+ <template #prefix>
|
|
|
+ <el-icon><Unlock /></el-icon>
|
|
|
+ </template>
|
|
|
+ </el-input>
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item label="" prop="type">
|
|
|
+ <el-select v-model="form.type" clearable placeholder="请选择用户类型" style="width: 100%">
|
|
|
+ <el-option v-for="t in typeList" :key="t.value" :label="t.label" :value="t.value" />
|
|
|
+ </el-select>
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item label="" prop="code">
|
|
|
+ <el-input v-model="form.code" placeholder="请输入验证码">
|
|
|
+ <template #prefix>
|
|
|
+ <el-icon><Key /></el-icon>
|
|
|
+ </template>
|
|
|
+ <template #append>
|
|
|
+ <component :is="validcode" @toCode="toCode"></component>
|
|
|
+ </template>
|
|
|
+ </el-input>
|
|
|
+ </el-form-item>
|
|
|
+ <el-col :span="24" class="btn">
|
|
|
+ <el-button type="warning">
|
|
|
+ <el-icon><Burger /></el-icon>
|
|
|
+ <span>依托单位账号密码找回</span>
|
|
|
+ </el-button>
|
|
|
+ <el-button type="primary">
|
|
|
+ <el-icon><User /></el-icon>
|
|
|
+ <span>个人账号密码找回</span>
|
|
|
+ </el-button>
|
|
|
+ </el-col>
|
|
|
+ <el-col :span="24" class="save">
|
|
|
+ <el-button type="primary" size="large" @click="toSave(ruleFormRef)">登录</el-button>
|
|
|
+ </el-col>
|
|
|
+ </el-form>
|
|
|
+ </el-col>
|
|
|
+ <el-col :span="24" class="login_3">
|
|
|
+ <span>还没有账号?</span>
|
|
|
+ <el-button type="danger" size="small" plain @click="toRegister">去注册</el-button>
|
|
|
+ </el-col>
|
|
|
+ </el-col>
|
|
|
+ </el-col>
|
|
|
+ </el-col>
|
|
|
+ </el-col>
|
|
|
+ <el-col :span="24" class="thr">
|
|
|
+ <el-col :span="24" class="w_1200"><p v-html="webInfos.content"></p></el-col>
|
|
|
+ </el-col>
|
|
|
+ </el-col>
|
|
|
+ </el-row>
|
|
|
+</template>
|
|
|
+
|
|
|
+<script setup lang="ts">
|
|
|
+// 组件
|
|
|
+import validcode from '@common/src/components/ValidCode.vue'
|
|
|
+// 基础
|
|
|
+import { webInfo } from '@common/src/layout/site'
|
|
|
+import type { Ref } from 'vue'
|
|
|
+import { reactive, ref, onMounted } from 'vue'
|
|
|
+import type { FormInstance, FormRules } from 'element-plus'
|
|
|
+import { ElMessage } from 'element-plus'
|
|
|
+// 接口
|
|
|
+import { AdminStore } from '@common/src/stores/users/admin' //管理员
|
|
|
+import { UnitStore } from '@common/src/stores/users/unit' //依托单位
|
|
|
+import { UsersStore } from '@common/src/stores/users/users' //个人
|
|
|
+import type { IQueryResult } from '@/util/types.util'
|
|
|
+import router from '@/router'
|
|
|
+const adminAxios = AdminStore()
|
|
|
+const unitAxios = UnitStore()
|
|
|
+const usersAxios = UsersStore()
|
|
|
+// 平台信息
|
|
|
+const webInfos: Ref<any> = ref(webInfo)
|
|
|
+// 登录
|
|
|
+const ruleFormRef = ref<FormInstance>()
|
|
|
+const form = reactive({ account: '', password: '', type: '', code: '' })
|
|
|
+const rules = reactive<FormRules>({
|
|
|
+ account: [{ required: true, message: '请输入账号', trigger: 'blur' }],
|
|
|
+ password: [{ required: true, message: '请输入密码', trigger: 'blur' }],
|
|
|
+ type: [{ required: true, message: '请选择用户类型', trigger: 'change' }],
|
|
|
+ code: [{ required: true, message: '请输入验证码', trigger: 'blur' }]
|
|
|
+})
|
|
|
+// 验证码
|
|
|
+const code: Ref<any> = ref('')
|
|
|
+// 字典
|
|
|
+const typeList: Ref<any> = ref([
|
|
|
+ { label: '依托单位账号', value: '0' },
|
|
|
+ { label: '个人账号', value: '1' },
|
|
|
+ { label: '管理员', value: '2' }
|
|
|
+])
|
|
|
+onMounted(() => {})
|
|
|
+// 验证码
|
|
|
+const toCode = (e) => {
|
|
|
+ code.value = e
|
|
|
+}
|
|
|
+// 提交登录
|
|
|
+const toSave = async (formEl: FormInstance | undefined) => {
|
|
|
+ if (!formEl) return
|
|
|
+ await formEl.validate(async (valid, fields) => {
|
|
|
+ if (valid) {
|
|
|
+ if (form.code.toLowerCase() !== code.value.toLowerCase()) {
|
|
|
+ ElMessage({ message: '验证码错误', type: 'error' })
|
|
|
+ return
|
|
|
+ }
|
|
|
+ delete form.code
|
|
|
+ let res: IQueryResult
|
|
|
+ if (form.type == '0') {
|
|
|
+ delete form.type
|
|
|
+ res = await unitAxios.login(form)
|
|
|
+ } else if (form.type == '1') {
|
|
|
+ delete form.type
|
|
|
+ res = await usersAxios.login(form)
|
|
|
+ } else if (form.type == '2') {
|
|
|
+ delete form.type
|
|
|
+ res = await adminAxios.login(form)
|
|
|
+ }
|
|
|
+ if (res.errcode == '0') {
|
|
|
+ ElMessage({ message: '登录成功', type: 'success' })
|
|
|
+ localStorage.setItem('token', `${res.data}`)
|
|
|
+ // window.location.href = `http://basic.waityou24.cn/admin`
|
|
|
+ window.location.href = `/admin`
|
|
|
+ } else {
|
|
|
+ ElMessage({ message: `${res.errmsg}`, type: 'error' })
|
|
|
+ }
|
|
|
+ } else {
|
|
|
+ console.log('error submit!', fields)
|
|
|
+ }
|
|
|
+ })
|
|
|
+}
|
|
|
+// 去注册
|
|
|
+const toRegister = () => {
|
|
|
+ router.push({ path: '/register' })
|
|
|
+}
|
|
|
+</script>
|
|
|
+<style scoped lang="less">
|
|
|
+.main {
|
|
|
+ display: flex;
|
|
|
+ flex-direction: column;
|
|
|
+ height: 100%;
|
|
|
+ .one {
|
|
|
+ .one_1 {
|
|
|
+ display: flex;
|
|
|
+ padding: 10px 0;
|
|
|
+ .left {
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ .image {
|
|
|
+ text-align: center;
|
|
|
+ .el-image {
|
|
|
+ :deep(.el-image__inner) {
|
|
|
+ width: 50px;
|
|
|
+ height: 50px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .other {
|
|
|
+ .zhTitle {
|
|
|
+ font-size: 30px;
|
|
|
+ font-family: cursive;
|
|
|
+ font-weight: 700;
|
|
|
+ }
|
|
|
+ .enTitle {
|
|
|
+ font-size: 12px;
|
|
|
+ text-transform: capitalize;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .right {
|
|
|
+ text-align: right;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .two {
|
|
|
+ background: url('@/assets/bg.jpg');
|
|
|
+ background-size: 100% 100%;
|
|
|
+ background-repeat: no-repeat;
|
|
|
+ .w_1200 {
|
|
|
+ height: 86vh;
|
|
|
+ padding: 10px 0;
|
|
|
+ display: flex;
|
|
|
+ .left {
|
|
|
+ padding: 3% 0 0 2%;
|
|
|
+ .txt {
|
|
|
+ font-size: 30px;
|
|
|
+ color: #ffffff;
|
|
|
+ font-family: cursive;
|
|
|
+ font-weight: bold;
|
|
|
+ margin: 0 0 10px 0;
|
|
|
+ font-style: italic;
|
|
|
+ padding: 0 0 0 0;
|
|
|
+ }
|
|
|
+ .txt:nth-child(2n) {
|
|
|
+ padding: 0 0 0 18%;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .right {
|
|
|
+ display: flex;
|
|
|
+ align-items: flex-start;
|
|
|
+ .login {
|
|
|
+ width: 80%;
|
|
|
+ height: 52vh;
|
|
|
+ overflow: hidden;
|
|
|
+ padding: 10px;
|
|
|
+ background-color: #ffffff;
|
|
|
+ border-radius: 5px;
|
|
|
+ box-shadow: 0px 0px 10px 5px #0505054d;
|
|
|
+ .login_1 {
|
|
|
+ margin: 0 0 10px 0;
|
|
|
+ span {
|
|
|
+ position: relative;
|
|
|
+ left: 5px;
|
|
|
+ top: -10px;
|
|
|
+ font-size: 24px;
|
|
|
+ font-weight: bold;
|
|
|
+ color: #666;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .login_2 {
|
|
|
+ .btn {
|
|
|
+ margin: 0 0 18px 0;
|
|
|
+ display: flex;
|
|
|
+ justify-content: space-around;
|
|
|
+ button {
|
|
|
+ width: 50%;
|
|
|
+ padding: 20px 0;
|
|
|
+ font-size: 15px;
|
|
|
+ span {
|
|
|
+ padding: 0 0 0 5px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .save {
|
|
|
+ margin: 0 0 18px 0;
|
|
|
+ button {
|
|
|
+ width: 100%;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .login_3 {
|
|
|
+ text-align: center;
|
|
|
+ span {
|
|
|
+ padding: 0 10px 0 0;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .thr {
|
|
|
+ padding: 10px 0;
|
|
|
+ text-align: center;
|
|
|
+ color: #999999;
|
|
|
+ }
|
|
|
+}
|
|
|
+:deep(.el-input-group__append, .el-input-group__prepend) {
|
|
|
+ padding: 0;
|
|
|
+}
|
|
|
+</style>
|