feat: 忘记密码页面

src/components/product-intro.vue

@@ -529,7 +529,7 @@
                 </div>
                 <div class="row-item">
                   <div class="item-text">
-                    <span>一健导入</span>
+                    <span>一键导入</span>
                   </div>
                   <div class="item-des">
                     <span>一键导入店铺，同步供应</span>

src/views/login.vue

@@ -2,6 +2,7 @@
   <div>
     <div class="login_bg">
       <div class="logo">
+        <div>
           <a href="/">
             <span class="logo_text">
               <img src="../assets/logo.png" height="40px" />
@@ -9,12 +10,14 @@
           </a>
         </div>
         <div class="banner_text">
-        <h1>智能化订单处理</h1>
-        <h1 style="margin-left: 60px">数字化供采平台</h1>
-        <h1 style="margin-left: 120px">多维度数据分析</h1>
+          <div>智能化订单处理</div>
+          <div style="margin-left: 20px">数字化供采平台</div>
+          <div style="margin-left: 20px">多维度数据分析</div>
+        </div>
       </div>
+
       <div class="login_content">
-        <h2 style="text-align: center">登录</h2>
+        <h2 style="text-align: center; font-weight: 200">用户登录</h2>
         <el-form
           size="medium"
           :model="ruleForm"
@@ -28,7 +31,7 @@
               v-model="ruleForm.email"
               placeholder="Email"></el-input>
           </el-form-item>
-          <el-form-item prop="password">
+          <el-form-item prop="password" style="margin-bottom: 10px">
             <el-input
               :type="showPwd ? 'text' : 'password'"
               prefix-icon="el-icon-lock"
@@ -42,6 +45,11 @@
                 :class="{ eyes: true, open: !showPwd, close: showPwd }"></i>
             </el-input>
           </el-form-item>
+          <div class="forget-password">
+            <span style="cursor: pointer" @click="forgetPassword">
+              忘记密码
+            </span>
+          </div>
           <div style="text-align: center">
             <button class="login-btn" @click="submitForm">登录</button>
           </div>
@@ -52,22 +60,101 @@
         </el-form>
       </div>
     </div>
+    <div
+      class="modal"
+      :style="isShowModal ? 'display: block' : 'display: none'">
+      <div class="forget-form">
+        <div class="forget-title">忘记密码</div>
+        <el-form size="medium" :model="forgetForm" ref="forgetForm">
+          <el-form-item
+            prop="email"
+            label=""
+            :rules="[{ required: true, message: '请输入邮箱' }]">
+            <el-input
+              v-model="forgetForm.email"
+              prefix-icon="el-icon-postcard"
+              style="background: #fff"
+              placeholder="请输入邮箱"></el-input>
+          </el-form-item>
+          <el-form-item
+            prop="code"
+            label=""
+            :rules="[{ required: true, message: '请输入验证码' }]">
+            <div style="display: flex; gap: 20px">
+              <div style="flex: 1">
+                <el-input
+                  v-model="forgetForm.code"
+                  style="background: #fff"
+                  prefix-icon="el-icon-message"
+                  placeholder="请输入验证码"></el-input>
+              </div>
+              <div>
+                <el-button
+                  class="get-code-button"
+                  :disabled="getCodeDisabled"
+                  :class="getCodeDisabled ? 'disabled' : 'code-btn'"
+                  @click="verCode">
+                  {{
+                    codeCountDown === 0 ? '获取验证码' : `${codeCountDown}秒`
+                  }}
+                </el-button>
+              </div>
+            </div>
+          </el-form-item>
+          <el-form-item
+            prop="newPassword"
+            :rules="[{ required: true, message: '请输入新密码' }]">
+            <el-input
+              v-model="forgetForm.newPassword"
+              placeholder="请输入新密码"
+              clearable
+              prefix-icon="el-icon-lock"
+              style="background-color: #fff" />
+          </el-form-item>
+          <el-form-item
+            prop="confirmNewPassword"
+            :rules="[{ required: true, message: '请再次输入新密码' }]">
+            <el-input
+              v-model="forgetForm.confirmNewPassword"
+              placeholder="请再次输入新密码"
+              clearable
+              prefix-icon="el-icon-lock"
+              style="background-color: #fff" />
+          </el-form-item>
+          <el-form-item style="margin-bottom: 10px">
+            <el-button class="reset-password" round @click="resetPassword">重置密码</el-button>
+          </el-form-item>
+          <div style="font-size: 14px">
+            <span>无需重置</span>
+            <span
+              style="margin-left: 20px; color: #2f97f1; cursor: pointer"
+              @click="isShowModal = false">
+              登录
+            </span>
+          </div>
+        </el-form>
+        <i class="el-icon-circle-close" @click="isShowModal = false"></i>
+      </div>
+    </div>
   </div>
 </template>
 
 <script>
-import { post } from '../utils/axios'
+import { post, get } from '../utils/axios'
 import md5 from 'js-md5'
 export default {
   name: 'login',
   components: {},
   data() {
     return {
+      isShowModal: false,
       ruleForm: {
         password: '',
         email: '',
         checked: false,
       },
+      codeCountDown: 0,
+      forgetForm: {},
       rules: {
         email: [
           { required: true, message: '请输入邮箱', trigger: 'blur' },
@@ -82,7 +169,53 @@ export default {
       showPwd: false,
     }
   },
+  computed: {
+    getCodeDisabled() {
+      return this.codeCountDown > 0
+    },
+  },
   methods: {
+    async verCode() {
+      try {
+        await new Promise((resolve, reject) => {
+          this.$refs.forgetForm.validateField('email', (m) => {
+            m ? reject() : resolve()
+          })
+        })
+      } catch {
+        return
+      }
+      try {
+        const res = await get('business/user/emailcode', {
+          email: this.forgetForm.email,
+        })
+        this.codeCountDown = 60
+        this.timer = setInterval(() => {
+          this.codeCountDown--
+          if (this.codeCountDown <= 0) {
+            clearInterval(this.timer)
+          }
+        }, 1000)
+        this.$message.success(res.message)
+      } catch (e) {
+        console.error(e)
+      }
+    },
+    forgetPassword() {
+      this.isShowModal = true
+      this.forgetForm = {}
+      this.$nextTick(() => {
+        this.$refs.forgetForm.clearValidate()
+      })
+    },
+    // 重置密码
+    resetPassword() {
+      try {
+        this.$refs.forgetForm.validate()
+      } catch {
+        return
+      }
+    },
     submitForm(e) {
       e.preventDefault()
       this.$refs.ruleForm.validate((valid) => {
@@ -108,48 +241,121 @@ export default {
 }
 </script>
 <style scoped>
+.reset-password {
+  width: 100%;
+  background-image: linear-gradient(
+    to right,
+    #5192e1 0%,
+    #23ced5 51%,
+    #5192e1 100%
+  );
+  color: #fff;
+}
+.get-code-button:disabled:hover {
+  background-color: #d0d2d8;
+  color: #666;
+}
+
+.disabled {
+  background-color: #d0d2d8;
+  color: #666;
+  margin-left: 10px;
+}
+
+.code-btn {
+  background: linear-gradient(180deg, #319af2 0%, #2386ee 100%);
+  color: #fff;
+}
+
+.forget-title {
+  text-align: center;
+  margin-bottom: 26px;
+  font-size: 26px;
+  font-weight: 400;
+  letter-spacing: 2px;
+}
+.modal {
+  position: fixed;
+  top: 0;
+  left: 0;
+  bottom: 0;
+  right: 0;
+  background-color: #252d40;
+  z-index: 3;
+  transition: all 0.3s;
+}
+
+.forget-form {
+  position: fixed;
+  width: 36%;
+  padding: 50px 60px;
+  box-sizing: border-box;
+  border-radius: 6px;
+  top: 50%;
+  left: 50%;
+  background-color: #fff;
+  transform: translate(-50%, -50%);
+}
+
+.forget-form i {
+  position: fixed;
+  top: -30px;
+  right: -28px;
+  font-size: 30px;
+  color: #fff;
+  cursor: pointer;
+}
 .logo {
   position: absolute;
+  display: flex;
+  align-items: center;
+  left: 4%;
+  top: 7%;
 }
 .logo_text {
   display: inline-block;
-  line-height: 40px;
-  margin: 60px 0 0 80px;
 }
 .banner_text {
-  position: absolute;
-  top: 30%;
-  left: 10%;
-  line-height: 80px;
+  font-size: 28px;
   color: #fff;
+  letter-spacing: 4px;
+  display: flex;
+  margin-left: 40px;
 }
 .login_bg {
   width: 100%;
   height: 100vh;
   position: relative;
   image-rendering: -webkit-optimize-contrast;
-  background: url(../assets/banner.jpg) center / cover no-repeat;
+  background: url(../assets/banner.jpg) left / cover no-repeat;
+  background-color: #b3e2fe;
+  background-size: 50% auto;
 }
 .login_content {
-  padding: 18px;
-  background: rgba(255, 255, 255, 0.4);
+  padding: 50px;
+  background: rgba(255, 255, 255, 1);
   position: absolute;
   top: 50%;
-  left: 80%;
-  border-radius: 6px;
-  transform: translate(-50%, -50%);
+  left: 60%;
+  border-radius: 10px;
+  transform: translateY(-50%);
   box-sizing: border-box;
-  background-position: top right, center;
-  background-repeat: no-repeat;
-  background-size: 528px auto, contain;
+  box-shadow: 0 2px 4px rgb(0 0 0 / 12%), 0 0 6px rgb(0 0 0 / 4%);
 }
 
 .login_form {
-  padding: 40px;
-  width: 300px;
+  padding: 24px 0;
+  width: 330px;
   border-radius: 6px;
 }
 
+.forget-password {
+  margin-bottom: 16px;
+  text-align: right;
+  font-size: 14px;
+  color: #006eff;
+}
+
 .login-btn {
   width: 100%;
   height: 38px;