feat: ✨ 商家端增加修改密码,手机号登录

seller/src/views/login.vue

@@ -2,59 +2,58 @@
   <div class="login" @click="$refs.verify.show = false">
     <Row type="flex" @keydown.enter.native="submitLogin">
       <Col style="width: 368px">
-        <Header />
-        <Row style="flex-direction: column">
-          <Form
-            ref="usernameLoginForm"
-            :model="form"
-            :rules="rules"
-            class="form"
-          >
-            <FormItem prop="username">
-              <Input
-                v-model="form.username"
-                prefix="ios-contact"
-                size="large"
-                clearable
-                placeholder="请输入用户名"
-                autocomplete="off"
-              />
-            </FormItem>
-            <FormItem prop="password">
-              <Input
-                type="password"
-                v-model="form.password"
-                prefix="ios-lock"
-                size="large"
-                password
-                placeholder="请输入密码"
-                autocomplete="off"
-              />
-            </FormItem>
-          </Form>
-
-          <Row>
-            <div
-              class="login-btn"
-              type="primary"
-              size="large"
-              :loading="loading"
-              @click="submitLogin"
-              long
-            >
-              <span v-if="!loading">登录</span>
-              <span v-else>登录中</span>
+      <Header />
+      <Row style="flex-direction: column">
+        <Tabs v-model="loginType">
+          <Tab-pane label="账号密码登录" name="passwordLogin">
+            <!--账号密码登录-->
+            <Form ref="usernameLoginForm" :model="form" :rules="rules" class="form">
+              <FormItem prop="username">
+                <Input v-model="form.username" prefix="ios-contact" size="large" clearable placeholder="请输入用户名"
+                  autocomplete="off" />
+              </FormItem>
+              <FormItem prop="password">
+                <Input type="password" v-model="form.password" prefix="ios-lock" size="large" password placeholder="请输入密码"
+                  autocomplete="off" />
+              </FormItem>
+            </Form>
+            <div class="register">
+              <a @click="$router.push('forgetPassword')">忘记密码</a>
             </div>
-          </Row>
+          </Tab-pane>
+          <Tab-pane label="验证码登录" name="mobileLogin">
+            <!-- 验证码登录 -->
+            <Form ref="formSms" :model="formSms" :rules="ruleInline" @click.self='$refs.verify.show = false'>
+              <FormItem prop="mobile">
+                <i-input type="text" v-model="formSms.mobile" clearable placeholder="手机号">
+                  <Icon type="md-lock" slot="prepend"></Icon>
+                </i-input>
+              </FormItem>
+              <FormItem prop="code">
+                <i-input type="text" v-model="formSms.code" placeholder="手机验证码">
+                  <Icon type="ios-text-outline" style="font-weight: bold" slot="prepend" />
+                  <Button slot="append" @click="sendCode">{{ codeMsg }}</Button>
+                </i-input>
+              </FormItem>
+              <FormItem>
+                <Button @click.stop="verifyBtnClick" long :type="verifyStatus ? 'success' : 'default'">{{ verifyStatus ?
+                  '验证通过' :
+                  '点击完成安全验证' }}
+                </Button>
+              </FormItem>
+            </Form>
+          </Tab-pane>
+        </Tabs>
+        <Row>
+          <div class="login-btn" type="primary" size="large" :loading="loading" @click="submitLogin" long>
+            <span v-if="!loading">登录</span>
+            <span v-else>登录中</span>
+          </div>
         </Row>
-        <Footer />
-        <!-- 拼图验证码 -->
-        <verify
-          ref="verify"
-          class="verify-con"
-          verifyType="LOGIN"
-          @change="verifyChange"
-        ></verify>
+      </Row>
+      <Footer />
+      <!-- 拼图验证码 -->
+      <verify ref="verify" class="verify-con" verifyType="LOGIN" @change="verifyChange"></verify>
       </Col>
     </Row>
   </div>
@@ -62,7 +61,8 @@
 
 <script>
 import { getCurrentPermissionList } from "@/api/index";
-import { login, userMsg } from "@/api/index";
+import { login, userMsg, storeSmsLogin } from "@/api/index";
+import { sendSms } from "@/api/common.js";
 import Cookies from "js-cookie";
 import Header from "@/views/main-components/header";
 import Footer from "@/views/main-components/footer";
@@ -78,6 +78,9 @@ export default {
     return {
       saveLogin: true, // 保存登录状态
       loading: false, // 加载状态
+      verifyStatus: false, // 是否图片验证通过
+      time: 60, // 倒计时
+      loginType: 'passwordLogin', //登陆类型
       form: {
         // 表单数据
         username: "",
@@ -85,6 +88,10 @@ export default {
         mobile: "",
         code: "",
       },
+      formSms: {
+        mobile: '',
+        code: '',
+      },
       rules: {
         // 验证规则
         username: [
@@ -102,6 +109,23 @@ export default {
           },
         ],
       },
+      ruleInline: {
+        // 验证规则
+        username: [{ required: true, message: "请输入用户名" }],
+        password: [
+          { required: true, message: "请输入密码" },
+          { type: "string", min: 6, message: "密码不能少于6位" },
+        ],
+        mobile: [
+          { required: true, message: "请输入手机号码" },
+          {
+            pattern: RegExp.mobile,
+            message: "请输入正确的手机号",
+          },
+        ],
+        code: [{ required: true, message: "请输入手机验证码" }],
+      },
+      codeMsg: "发送验证码", // 验证码文字
     };
   },
   created() {
@@ -142,35 +166,92 @@ export default {
         }
       });
     },
+    // 发送手机验证码
+    sendCode() {
+      if (this.time === 60) {
+        if (this.formSms.mobile === "") {
+          this.$Message.warning("请先填写手机号");
+          return;
+        }
+        if (!this.verifyStatus) {
+          this.$Message.warning("请先完成安全验证");
+          return;
+        }
+        let params = {
+          mobile: this.formSms.mobile,
+          verificationEnums: "LOGIN",
+        };
+        sendSms(params).then((res) => {
+          if (res.success) {
+            this.$Message.success("验证码发送成功");
+            let that = this;
+            this.interval = setInterval(() => {
+              that.time--;
+              if (that.time === 0) {
+                that.time = 60;
+                that.codeMsg = "重新发送";
+                that.verifyStatus = false;
+                clearInterval(that.interval);
+              } else {
+                that.codeMsg = that.time;
+              }
+            }, 1000);
+          } else {
+            this.$Message.warning(res.message);
+          }
+        });
+      }
+    },
     submitLogin() {
       // 登录提交
-      this.$refs.usernameLoginForm.validate((valid) => {
-        if (valid) {
-          this.$refs.verify.init();
-        }
-      });
+      if (this.loginType == 'passwordLogin') {
+        this.$refs.usernameLoginForm.validate((valid) => {
+          if (valid) {
+            this.$refs.verify.init();
+          }
+        });
+      } else if (this.loginType == 'mobileLogin') {
+        this.$refs['formSms'].validate((valid) => {
+          if (valid) {
+            storeSmsLogin(this.formSms).then(res => {
+              if (res.success) {
+                this.afterLogin(res)
+              }
+            })
+          }
+        })
+      }
     },
     verifyChange(con) {
       // 拼图验证码回显
       if (!con.status) return;
 
-      this.loading = true;
-
-      let fd = new FormData();
-      fd.append("username", this.form.username);
-      fd.append("password", this.md5(this.form.password));
-      login(fd)
-        .then((res) => {
-          this.loading = false;
-          if (res && res.success) {
-            this.afterLogin(res);
-          }
-        })
-        .catch(() => {
-          this.loading = false;
-        });
+      if (this.loginType == 'passwordLogin') {
+        this.loading = true;
+        let fd = new FormData();
+        fd.append("username", this.form.username);
+        fd.append("password", this.md5(this.form.password));
+        login(fd)
+          .then((res) => {
+            this.loading = false;
+            if (res && res.success) {
+              this.afterLogin(res);
+            }
+          })
+          .catch(() => {
+            this.loading = false;
+          });
+      }
+      this.verifyStatus = true;
       this.$refs.verify.show = false;
     },
+
+    // 开启滑块验证
+    verifyBtnClick() {
+      if (!this.verifyStatus) {
+        this.$refs.verify.init();
+      }
+    },
   },
 };
 </script>
@@ -184,12 +265,14 @@ export default {
   display: flex;
   align-items: center;
   justify-content: center;
+
   .verify-con {
     position: absolute;
     top: 126px;
     z-index: 10;
     left: 20px;
   }
+
   .form {
     padding-top: 1vh;
   }
@@ -208,9 +291,11 @@ export default {
     text-align: center;
     transition: 0.35s;
   }
+
   .login-btn:hover {
     opacity: 0.9;
     border-radius: 10px;
   }
+  
 }
 </style>