feat: 登录页面开发

src/views/Login.vue

+<template>
+  <div class="login-page">
+    <div class="user-container">
+      <div class="logo-container">
+        <img src="../assets/images/logo.png" alt="logo" />
+        <div class="logo-title">厂商登录</div>
+      </div>
+      <div class="form-container">
+        <el-form
+          :model="loginForm"
+          ref="loginFormRef"
+          :rules="rules"
+          size="large"
+        >
+          <el-form-item prop="factoryNumber">
+            <el-input
+              placeholder="请输入共厂号"
+              v-model="loginForm.factoryNumber"
+            >
+              <template #prefix>
+                <el-icon class="el-input__icon"><User /></el-icon>
+              </template>
+            </el-input>
+          </el-form-item>
+          <el-form-item prop="iphone">
+            <el-input v-model="loginForm.iphone" placeholder="请输入手机号">
+              <template #prefix>
+                <el-icon class="el-input__icon"><Iphone /></el-icon>
+              </template>
+            </el-input>
+          </el-form-item>
+          <el-form-item prop="password">
+            <el-input v-model="loginForm.password" placeholder="请输入密码">
+              <template #prefix>
+                <el-icon class="el-input__icon"><Lock /></el-icon>
+              </template>
+            </el-input>
+          </el-form-item>
+          <el-form-item>
+            <el-button
+              style="width: 100%"
+              size="large"
+              type="primary"
+              @click="handleLogin"
+              >登录</el-button
+            >
+          </el-form-item>
+          <el-form-item>
+            <div style="width: 100%;text-align: right;">
+              <a
+                href="/user/reset"
+                style="text-decoration: none; color: #409eff;"
+                >忘记密码</a
+              >
+            </div>
+          </el-form-item>
+        </el-form>
+      </div>
+    </div>
+    <div class="footer-container">
+      <span>2024 @Copyright</span>
+    </div>
+  </div>
+</template>
+<script setup lang="ts">
+import { User, Iphone, Lock } from '@element-plus/icons-vue'
+import { reactive, ref } from 'vue'
+import { LoginReq } from '@/types/api/auth'
+import type { FormInstance, FormRules } from 'element-plus'
+const loginFormRef = ref<FormInstance>()
+
+const loginForm = reactive<LoginReq>({
+  factoryNumber: '',
+  iphone: '',
+  password: '',
+})
+
+const rules = reactive<FormRules<LoginReq>>({
+  factoryNumber: [{ required: true, message: '请输入共厂号', trigger: 'blur' }],
+  iphone: [{ required: true, message: '请输入手机号', trigger: 'blur' }],
+  password: [{ required: true, message: '请输入密码', trigger: 'blur' }],
+})
+
+const handleLogin = async () => {
+  try {
+    await loginFormRef.value?.validate()
+  } catch {
+    return
+  }
+  // 登录逻辑
+}
+</script>
+<style lang="scss" scoped>
+.login-page {
+  height: 100%;
+  background-color: #f6f6f6;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+}
+.user-container {
+  width: 860px;
+  height: 600px;
+  background-color: #fff;
+  padding: 20px;
+}
+
+.footer-container {
+  text-align: center;
+  margin-top: 60px;
+  color: #777;
+}
+
+.logo-container {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+}
+
+.logo-title {
+  font-size: 30px;
+  color: #777;
+}
+
+.form-container {
+  width: 400px;
+  margin: 30px auto 0;
+}
+</style>

src/views/Reset.vue

+<template>
+  <div class="reset-page">
+    <div class="user-container">
+      <div class="logo-container">
+        <img src="../assets/images/logo.png" alt="logo" />
+        <div class="logo-title">找回密码</div>
+      </div>
+      <div class="form-container">
+        <el-form
+          :model="resetForm"
+          ref="resetFormRef"
+          :rules="rules"
+          size="large"
+        >
+          <el-form-item prop="factoryNumber">
+            <el-input
+              placeholder="请输入共厂号"
+              v-model="resetForm.factoryNumber"
+            >
+              <template #prefix>
+                <el-icon class="el-input__icon"><User /></el-icon>
+              </template>
+            </el-input>
+          </el-form-item>
+          <el-form-item prop="iphone">
+            <el-input v-model="resetForm.iphone" placeholder="请输入手机号">
+              <template #prefix>
+                <el-icon class="el-input__icon"><Iphone /></el-icon>
+              </template>
+            </el-input>
+          </el-form-item>
+          <el-form-item prop="captcha">
+            <div style="width: 100%; display: flex">
+              <el-input v-model="resetForm.captcha" placeholder="请输入验证码">
+              </el-input>
+              <el-button text type="primary">发送验证码</el-button>
+            </div>
+          </el-form-item>
+          <el-form-item>
+            <el-button
+              style="width: 100%"
+              size="large"
+              type="primary"
+              @click="handleReset"
+              >下一步</el-button
+            >
+          </el-form-item>
+        </el-form>
+      </div>
+    </div>
+    <div class="footer-container">
+      <span>2024 @Copyright</span>
+    </div>
+  </div>
+</template>
+<script setup lang="ts">
+import { User, Iphone } from '@element-plus/icons-vue'
+import { reactive, ref } from 'vue'
+import type { FormInstance, FormRules } from 'element-plus'
+const resetFormRef = ref<FormInstance>()
+interface ResetForm {
+  factoryNumber: string
+  iphone: string
+  captcha: string
+}
+const resetForm = reactive<ResetForm>({
+  factoryNumber: '',
+  iphone: '',
+  captcha: '',
+})
+
+const rules = reactive<FormRules<ResetForm>>({
+  factoryNumber: [{ required: true, message: '请输入共厂号', trigger: 'blur' }],
+  iphone: [{ required: true, message: '请输入手机号', trigger: 'blur' }],
+  captcha: [{ required: true, message: '请输入验证码', trigger: 'blur' }],
+})
+
+const handleReset = async () => {
+  try {
+    await resetFormRef.value?.validate()
+  } catch {
+    return
+  }
+  // 登录逻辑
+}
+</script>
+<style lang="scss" scoped>
+.reset-page {
+  height: 100%;
+  background-color: #f6f6f6;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+}
+.user-container {
+  width: 860px;
+  height: 600px;
+  background-color: #fff;
+  padding: 20px;
+}
+
+.footer-container {
+  text-align: center;
+  margin-top: 60px;
+  color: #777;
+}
+
+.logo-container {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+}
+
+.logo-title {
+  font-size: 30px;
+  color: #777;
+}
+
+.form-container {
+  width: 400px;
+  margin: 30px auto 0;
+}
+</style>