jcyjdt_web/src/views/loginIndex.vue

<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 router from '@/router'
// 接口
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'

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>