feat:新增登录功能

src/views/login/index.d.ts

@@ -0,0 +1,5 @@
+export interface LoginForm {
+  phone: string
+  code: string
+
+}

src/views/login/index.vue

@@ -1,57 +1,336 @@
 <script setup lang="ts">
-import { ref } from 'vue'
+import { reactive, ref } from 'vue'
-import { Button, Input } from 'ant-design-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 phoneCode = ref('')
+const formRef = ref()
+const btnTxt = ref('获取验证码')
+const disabled = ref(false)
+const time = ref(0)
+
+const ruleForm = reactive<LoginForm>({
+  phone: '',
+  code: '',
+})
+
+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() {
-  userStore.login({
+  formRef.value
-    user_type: UserTypeEnum.C,
+    .validate()
-    grant_type: GrantTypeEnum.SMS,
+    .then(() => {
-    invite_code: '',
+      userStore.login({
-    phone: '13864541890',
+        user_type: UserTypeEnum.C,
-    phoneCode: phoneCode.value,
+        grant_type: GrantTypeEnum.SMS,
-    type: TypeEnum.PHONE,
+        invite_code: '',
-  }).then(() => {
+        phone: ruleForm.phone,
-    createMessage.success('登录成功')
+        phoneCode: ruleForm.code,
-    router.push('/')
+        type: TypeEnum.PHONE,
-  }).catch(() => {
+      }).then(() => {
-    createMessage.error('登录失败')
+        createMessage.success('登录成功')
-  })
+        router.push('/')
+      }).catch(() => {
+        createMessage.error('登录失败')
+      })
+    })
 }
-
+// 获取验证码
 function handleSendCode() {
-  sendCode('13864541890')
+  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 handleLogout() {
+// 禁止页面缩放
-  userStore.logout()
+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>
+  <div class="login-container" @wheel="handleWheel">
-    我是登录页
+    <div class="logo">
-    <Input v-model:value="phoneCode" placeholder="请输入验证码" />
+      <img
-    <Button type="primary" @click="handleSendCode">
+        :src="Logo"
-      发送验证码
+        class="logoimg"
-    </Button>
+      />
-
+    </div>
-    <Button type="primary" @click="handleLogin">
+    <div class="logoncontent">
-      登录
+      <div class="left">
-    </Button>
+        <img
-
+          :src="Loginleft"
-    <Button type="primary" @click="handleLogout">
+          style="width: 100%; height: 100%"
-      退出
+        />
-    </Button>
+        <div class="info">
+          <div class="welcome">
+            欢迎使用
+          </div>
+          <div class="zh">
+            青鸟AI助手-同聪
+          </div>
+          <div class="en">
+            Bluebird AI Assistant - 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"
+                  style="width: 20px;"
+                />
+              </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"
+                  style="width: 20px;"
+                />
+              </template>
+              <template #suffix>
+                <Button
+                  type="link"
+                  :disabled="disabled"
+                  @click="handleSendCode"
+                >
+                  <span class="time">{{ btnTxt }}</span>
+                </Button>
+              </template>
+            </Input>
+          </FormItem>
+          <FormItem>
+            <div
+              class="login-button"
+              @click="handleLogin"
+              @key.enter="handleLogin"
+            >
+              登 录
+            </div>
+            <div class="versions">
+              v1.0.0
+            </div>
+          </FormItem>
+        </Form>
+      </div>
+    </div>
   </div>
 </template>
 
-<style scoped></style>
+<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: 55px;
+          font-family: PingFang-SC, PingFang-SC;
+          font-weight: 300;
+          color: #ffffff;
+
+          letter-spacing: 4px;
+        }
+        .zh {
+          font-size: 30px;
+          padding-top: 20px;
+          font-family: PingFang-SC, PingFang-SC;
+          font-weight: 400;
+          color: #ffffff;
+          letter-spacing: 5px;
+        }
+        .en {
+          font-size: 16px;
+          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: 75%;
+        margin: 0 auto;
+        .time {
+          font-size: 12px;
+          color: #48a1fe;
+        }
+        .custom-input {
+          border: none;
+          border-radius: 0;
+          background-color: transparent;
+          color: #333;
+          border-bottom: 1px solid #c8cbd6;
+          &::placeholder {
+            font-size: 12px;
+            color: #6e7382;
+            letter-spacing: 3px;
+          }
+          &:focus {
+            box-shadow: none;
+          }
+        }
+
+        .login_title {
+          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;
+          cursor: pointer;
+          background: #0075eb;
+          border-radius: 4px;
+          color: white;
+          text-align: center;
+          line-height: 40px;
+        }
+        .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>