qn-ai-pc/src/views/login/index.vue

<script setup lang="ts">
import { reactive, ref } from 'vue'

import { Button, Form, FormItem, Input, message } from 'ant-design-vue'
import { useRouter } from 'vue-router'
import type { Rule } from 'ant-design-vue/es/form'

import type { LoginForm } from './index.d'
import { sendCode } from '@/api/base/login'
import { useUserStore } from '@/store/moules/userStore/index'
import { useMessage } from '@/hooks/useMessage'
import { GrantTypeEnum, TypeEnum, UserTypeEnum } from '@/enums/commonEnum'
import Logo from '@/assets/images/login/loginlogo.png'
import Loginleft from '@/assets/images/login/loginleft.png'
import Yh from '@/assets/images/login/yh.png'
import Yzm from '@/assets/images/login/yzm.png'

const router = useRouter()
const userStore = useUserStore()
const { createMessage } = useMessage()
const formRef = ref()
const btnTxt = ref('获取验证码')
const disabled = ref(false)
const time = ref(0)

const ruleForm = reactive<LoginForm>({
  phone: '',
  code: '',
})
const loading = ref(false)
async function validatePhone(_rule: Rule, value: string) {
  if (!value || !(/^1\d{10}$/.test(value)))
    // eslint-disable-next-line prefer-promise-reject-errors
    return Promise.reject('请输入正确的手机号码')
  else
    return Promise.resolve()
}
const rules: Record<string, Rule[]> = {
  phone: [
    { validator: validatePhone, trigger: 'blur' },
  ],
  code: [{ required: true, message: '请输入验证码', trigger: 'blur' }],
}
// 登录
function handleLogin() {
  formRef.value
    .validate()
    .then(() => {
      loading.value = true
      userStore.login({
        user_type: UserTypeEnum.C,
        grant_type: GrantTypeEnum.SMS,
        invite_code: '',
        phone: ruleForm.phone,
        phoneCode: ruleForm.code,
        type: TypeEnum.PHONE,
      }).then(() => {
        message.success('登录成功')
        loading.value = false
        router.push('/')
      }).catch(() => {
        loading.value = false
      })
    })
}
// 获取验证码
function handleSendCode() {
  if (!ruleForm.phone) {
    // 号码校验不通过

    message.error('请输入手机号')
    // 正则判断 从1开始，第二位是35789中的任意一位，以9数字结尾
  }
  else if (!/1[35789]\d{9}/.test(ruleForm.phone)) {
    // 失去焦点后自动触发校验手机号规则
  }
  else {
    sendCode(ruleForm.phone).then((res) => {
      if (res.code === 200)
        message.success('发送成功')
    })
    time.value = 60
    disabled.value = true
    // 调用倒计时方法
    timer()
  }
}

// 禁止页面缩放
function handleWheel(event: { preventDefault: () => void }) {
  event.preventDefault()
}
// 倒计时
function timer() {
  if (time.value > 0) {
    time.value--
    btnTxt.value = `${time.value}s后重新获取验证码`
    setTimeout(timer, 1000)
  }
  else {
    time.value = 0
    btnTxt.value = '获取验证码'
    disabled.value = false
  }
}
</script>

<template>
  <div class="login-container" @wheel="handleWheel">
    <div class="logo">
      <img
        :src="Logo"
        class="logoimg"
      />
    </div>
    <div class="logoncontent">
      <div class="left">
        <img
          :src="Loginleft"
          style="width: 100%; height: 100%"
        />
        <div class="info">
          <div class="welcome">
            欢迎使用
          </div>
          <div class="zh">
            青鸟AI助手-同聪
          </div>
          <div class="en">
            THE BIG LANGUAGE MODEL BLUEBIRO - Tong Cong
          </div>
        </div>
      </div>
      <div class="right">
        <Form
          ref="formRef"
          class="login-Form"
          :model="ruleForm"
          :rules="rules"
          :label-col="{ span: 20 }"
          :wrapper-col="{ span: 22 }"
          autocomplete="off"
        >
          <div class="login-title">
            登录/注册
          </div>
          <FormItem
            name="phone"
          >
            <Input v-model:value="ruleForm.phone" :bordered="false" class="custom-input" placeholder="请输入手机号码">
              <template #prefix>
                <img
                  class="icon"
                  :src="Yh"
                />
              </template>
            </Input>
          </FormItem>
          <FormItem
            name="code"
          >
            <Input v-model:value="ruleForm.code" :bordered="false" class="custom-input" placeholder="请输入验证码">
              <template #prefix>
                <img
                  class="icon"
                  :src="Yzm"
                />
              </template>
              <template #suffix>
                <Button
                  type="link"
                  :disabled="disabled"
                  @click="handleSendCode"
                >
                  <span class="time">{{ btnTxt }}</span>
                </Button>
              </template>
            </Input>
          </FormItem>
          <FormItem>
            <Button
              class="login-button"
              :loading="loading"
              @click="handleLogin"
              @key.enter="handleLogin"
            >
              登 录
            </Button>
            <div class="versions">
              v1.0.0
            </div>
          </FormItem>
        </Form>
      </div>
    </div>
  </div>
</template>

<style lang="scss" scoped>
.login-container {
  width: 100%;
  height: 100%;
  background-image: url('@/assets/images/login/loginbg.png');
  background-size: 100% 100%;
  background-position: center center;
  position: relative;

  .logo {
    position: absolute;
    top: 2%;
    left: 2%;
    .logoimg {
      width: 200px;
    }
  }
  .logoncontent {
    width: 60%;
    height: 50%;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    display: flex;
    align-items: center;
    position: relative;
    .left {
      width: 50%;
      height: 100%;
      margin-right: 20px;
      position: absolute;
      top: 0;
      left: 0;
      position: relative;
      .info {
        position: absolute;
        top: 20%;
        left: 10%;
        .welcome {
          font-size: 50px;
          font-family: PingFang-SC, PingFang-SC;
          font-weight: 300;
          color: #ffffff;

          letter-spacing: 4px;
        }
        .zh {
          font-size: 26px;
          padding-top: 20px;
          font-family: PingFang-SC, PingFang-SC;
          font-weight: 400;
          color: #ffffff;
          letter-spacing: 5px;
        }
        .en {
          font-size: 13px;
          font-family: PingFang-SC, PingFang-SC;
          font-weight: 400;
          color: #77a4ff;
          line-height: 22px;
          padding-top: 10px;
        }
      }
    }

    .right {
      width: 50%;
      height: 100%;
      border-radius: 4px;
      display: flex;
      justify-content: center;
      align-items: center;
      letter-spacing: 0.2em;
      backdrop-filter: blur(50px);
      position: absolute;
      top: 0;
      right: 2%;
      .login-Form {
        width: 70%;
        margin: 0 auto;
        .icon {
          width: 15px;
          height: 15px;
        }
        .time {
          font-size: 12px;
          color: #48a1fe;
        }
        :deep(.ant-form-item-explain-error) {
          font-size: 12px;
          padding-left: 27px;
        }

        .custom-input {
          border: none;
          border-radius: 0;
          background-color: transparent;
          color: #333;
          border-bottom: 1px solid #c8cbd6;
          .ant-form-item-explain-error {
            color: blue;
          }
        }
        .login-title {
          margin-top: 50px;
          margin-bottom: 30px;
          color: #505458;
          font-size: 19px;
          font-family:
            PingFangSC,
            PingFang SC;
          font-weight: 500;
          color: #141515;
        }
        .login-button {
          margin-top: 10px;
          width: 100%;
          height: 40px;

          background: #0075eb;
          border-radius: 4px;
          color: white;
        }
        .versions {
          width: 100%;
          text-align: center;
          font-size: 13px;
          font-family:
            PingFangSC,
            PingFang SC;
          font-weight: 400;
          color: #6e7382;
          padding-top: 20px;
          letter-spacing: 2px;
        }
      }
    }
  }
}
</style>