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

seller/src/api/common.js

@@ -1,4 +1,4 @@
-import { commonUrl, getRequest, uploadFileRequest ,uploadFile} from "@/libs/axios";
+import { commonUrl, getRequest, uploadFileRequest, uploadFile, request} from "@/libs/axios";
 
 // 通过id获取子地区
 export const getChildRegion = (id) => {
@@ -25,3 +25,10 @@ export const upLoadFileMethods = (bold) => {
   console.log(bold)
   return uploadFileRequest(uploadFile, bold);
 };
+
+/**
+ * 发送短信验证码
+ */
+export function sendSms (params) {
+  return getRequest(`${commonUrl}/common/common/sms/${params.verificationEnums}/${params.mobile}`,params);
+}

seller/src/api/index.js

@@ -37,6 +37,11 @@ export const login = params => {
   return postRequestWithNoTokenData("/passport/login/userLogin", params);
 };
 
+// 手机登陆
+export const storeSmsLogin = params => {
+  return postRequestWithNoToken("/passport/login/smsLogin", params);
+};
+
 // 登出
 export const logout = () => {
   return postRequest("/passport/login/logout");
@@ -50,7 +55,10 @@ export const userInfo = params => {
 export const userMsg = params => {
   return getRequest('/settings/storeSettings', params)
 }
-
+//验证短信验证码
+export const validateCode = params => {
+  return postRequestWithNoToken("/passport/login/resetByMobile", params);
+};
 // 初始化验证码
 export const initCaptcha = params => {
   return getRequestWithNoToken("/common/captcha/init", params);
@@ -107,6 +115,10 @@ export const sendCodeEmail = (email, params) => {
 export const editEmail = params => {
   return postRequest("/email/editEmail", params);
 };
+// 忘记密码并修改
+export const forgetAndModify = params => {
+  return postRequest("/passport/login/resetPassword", params);
+};
 // 个人中心修改密码
 export const changePass = params => {
   return postRequest("/passport/login/modifyPass", params);

seller/src/router/index.js

@@ -3,7 +3,7 @@ import ViewUI from 'view-design';
 import Util from '../libs/util';
 import VueRouter from 'vue-router';
 import Cookies from 'js-cookie';
-import {routers} from './router';
+import { routers } from './router';
 
 Vue.use(VueRouter);
 
@@ -16,10 +16,10 @@ const RouterConfig = {
 /**
  * 解决重复点击菜单会控制台报错bug
  */
- const routerPush = VueRouter.prototype.push
+const routerPush = VueRouter.prototype.push
- VueRouter.prototype.push = function push(location) {
+VueRouter.prototype.push = function push(location) {
-   return routerPush.call(this, location).catch(error=> error)
+  return routerPush.call(this, location).catch(error => error)
- }
+}
 
 export const router = new VueRouter(RouterConfig);
 
@@ -32,10 +32,15 @@ router.beforeEach((to, from, next) => {
   const name = to.name;
 
   if (!Cookies.get('userInfoSeller') && name !== 'login') {
+    if (name === 'forgetPassword') {
+      console.log(name)
+      Util.toDefaultPage([...routers], name, router, next);
+    } else {
       // 判断是否已经登录且前往的页面不是登录页
       next({
         name: 'login'
       });
+    }
   } else if (Cookies.get('userInfoSeller') && name === 'login') {
     // 判断是否已经登录且前往的是登录页
     Util.title();

seller/src/router/router.js

@@ -10,6 +10,11 @@ export const loginRouter = {
   },
   component: () => import("@/views/login.vue")
 };
+export const forgetPasswordRouter = {
+  path: "/forgetPassword",
+  name: "forgetPassword",
+  component: () => import("@/views/ForgetPassword.vue")
+};
 
 // 作为Main组件的子页面展示但是不在左侧菜单显示的路由写在otherRouter里
 export const otherRouter = {
@@ -193,4 +198,4 @@ export const page500 = {
   component: () => import("@/views/error-page/500.vue")
 };
 // 所有上面定义的路由都要写在下面的routers里
-export const routers = [loginRouter, otherRouter, page500, page403];
+export const routers = [loginRouter, forgetPasswordRouter, otherRouter, page500, page403];

seller/src/views/ForgetPassword.vue

@@ -0,0 +1,331 @@
+<template>
+  <div class="forget-password" @click='$refs.verify.show = false'>
+    <div style="height:50px;"></div>
+    <!-- 顶部logo -->
+    <div class="logo-box">
+      <img
+        :src="$store.state.logoImg" width='150'
+        @click="$router.push('/')"
+      />
+      <div>修改密码</div>
+    </div>
+    <div class="login-container">
+        <!-- 验证手机号 -->
+        <Form
+          ref="formFirst"
+          :model="formFirst"
+          :rules="ruleInline"
+          style="width:300px;"
+          v-show="step === 0"
+        >
+          <FormItem prop="mobile">
+            <i-input
+              type="text"
+              v-model="formFirst.mobile"
+              clearable
+              placeholder="手机号"
+            >
+              <Icon type="md-phone-portrait" slot="prepend"></Icon>
+            </i-input>
+          </FormItem>
+          <FormItem prop="code">
+            <i-input
+              type="text"
+              v-model="formFirst.code"
+              clearable
+              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="verifyBtnClick" long :type="verifyStatus?'success':'default'">{{verifyStatus?'验证通过':'点击完成安全验证'}}</Button>
+          </FormItem>
+          <FormItem>
+            <Button type="error" @click="next" :loading="loading" long>下一步</Button>
+          </FormItem>
+        </Form>
+        <Form
+          ref="form"
+          :model="form"
+          :rules="ruleInline"
+          style="width:300px;"
+          v-show="step === 1"
+        >
+          <FormItem prop="password">
+            <i-input
+              type="password"
+              v-model="form.password"
+              clearable
+              placeholder="请输入至少六位密码"
+            >
+              <Icon type="md-lock" slot="prepend"></Icon>
+            </i-input>
+          </FormItem>
+          <FormItem prop="password">
+            <i-input
+              type="password"
+              v-model="form.oncePasd"
+              clearable
+              placeholder="请再次输入密码"
+            >
+              <Icon type="md-lock" slot="prepend"></Icon>
+            </i-input>
+          </FormItem>
+          <FormItem>
+            <Button type="error" size="large" @click="handleSubmit" :loading="loading1" long>提交</Button>
+          </FormItem>
+        </Form>
+        <!-- 拼图验证码 -->
+        <verify
+          ref="verify"
+          class="verify-con"
+          :verifyType="verifyType"
+          @change="verifyChange"
+        ></verify>
+        <div class="login-btn"><a @click="$router.push('login')">前往登录</a></div>
+    </div>
+    <div class="foot">
+      <Row type="flex" justify="space-around" class="help">
+        <a class="item" href="https://pickmall.cn/" target="_blank">帮助</a>
+        <a class="item" href="https://pickmall.cn/" target="_blank">隐私</a>
+        <a class="item" href="https://pickmall.cn/" target="_blank">条款</a>
+      </Row>
+      <Row type="flex" justify="center" class="copyright">
+        Copyright © {{year}} - Present
+        <a href="https://pickmall.cn/" target="_blank" style="margin: 0 5px"
+          >{{config.title}}</a
+        >
+        版权所有
+      </Row>
+    </div>
+  </div>
+</template>
+
+<script>
+
+import * as RegExp from '@/utils/regular.js';
+import * as apiLogin from '@/api/index.js';
+import { sendSms } from '@/api/common.js';
+import verify from "@/views/my-components/verify";
+export default {
+  name: 'ForgetPassword',
+  components: { verify },
+  data () {
+    return {
+      config:require('@/config'),
+      loading: false, // 加载状态
+      loading1: false, // 第二步加载状态
+      formFirst: { // 手机验证码表单
+        // 注册表单
+        mobile: '',
+        code: ''
+      },
+      form: { // 密码
+        password: '',
+        oncePasd: ''
+      },
+      year: new Date().getFullYear(), // 当前年份
+      step: 0, // 步骤
+      ruleInline: {
+        // 验证规则
+        mobile: [
+          { required: true, message: '请输入手机号码' },
+          {
+            pattern: RegExp.mobile,
+            trigger: 'blur',
+            message: '请输入正确的手机号'
+          }
+        ],
+        code: [{ required: true, message: '请输入手机验证码' }],
+        password: [{required: true, message: '密码不能为空'}, {pattern: RegExp.password, message: '密码不能少于6位'}]
+      },
+      verifyStatus: false, // 图片验证状态
+      verifyType: 'FIND_USER', // 图片验证类型
+      codeMsg: '发送验证码', // 验证码文字
+      interval: '', // 定时器
+      time: 60 // 倒计时时间
+    };
+  },
+  methods: {
+    // 提交短信验证码，修改密码
+    next () {
+      this.$refs.formFirst.validate((valid) => {
+        if (valid) {
+          this.loading = true;
+          let data = JSON.parse(JSON.stringify(this.formFirst));
+          apiLogin.validateCode(data).then((res) => {
+            this.loading = false;
+            if (res.success) {
+            //   this.$Message.success('');
+              this.step = 1;
+            } else {
+              this.$Message.warning(res.message);
+            }
+          }).catch(() => { this.loading = false; });
+        } else {}
+      });
+    },
+    handleSubmit () { // 提交密码
+      this.$refs.form.validate(valid => {
+        if (valid) {
+          let params = JSON.parse(JSON.stringify(this.form));
+          if (params.password !== params.oncePasd) {
+            this.$Message.warning('两次输入密码不一致');
+            return;
+          };
+          params.mobile = this.formFirst.mobile;
+          params.password = this.md5(params.password);
+          delete params.oncePasd;
+          this.loading1 = true;
+
+          apiLogin.forgetAndModify(params).then(res => {
+            this.loading1 = false;
+            console.log(res);
+            if (res.success) {
+              this.$Message.success('修改密码成功');
+              this.$router.push('login');
+            }
+          }).catch(() => { this.loading = false; });
+        };
+      });
+    },
+    sendCode () { // 发送验证码
+      if (this.time === 60) {
+        if (this.formFirst.mobile === '') {
+          this.$Message.warning('请先填写手机号');
+          return;
+        }
+        if (!this.verifyStatus) {
+          this.$Message.warning('请先完成安全验证');
+          return;
+        }
+        let params = {
+          mobile: this.formFirst.mobile,
+          verificationEnums: 'FIND_USER'
+        };
+        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);
+          }
+        });
+      }
+    },
+    verifyChange (con) { // 验证通过
+      if (!con.status) return;
+      this.$refs.verify.show = false;
+      this.verifyStatus = true;
+    },
+    verifyBtnClick () {
+      if (!this.verifyStatus) {
+        this.$refs.verify.init();
+      }
+    }
+  },
+  mounted () {
+    document.querySelector('.forget-password').style.height = window.innerHeight + 'px'
+    this.$refs.formFirst.resetFields();
+  },
+  watch: {
+  }
+};
+</script>
+
+<style scoped lang="scss">
+.forget-password{
+  min-height: 700px;
+}
+.logo-box {
+  width: 600px;
+  height: 80px;
+  margin: 0 auto;
+  display: flex;
+  align-items: center;
+  img {
+    width: 150px;
+    cursor: pointer;
+  }
+  div {
+    font-size: 20px;
+    margin-top: 10px;
+  }
+}
+
+.login-container {
+  border-top: 2px solid $theme_color;
+  position: relative;
+  margin: 0 auto;
+  width: 600px;
+  background-color: #fff;
+  padding: 20px 150px;
+  .login-btn{
+    position: absolute;
+    right: 20px;
+    top: -45px;
+  }
+}
+
+.verify-con{
+  position: absolute;
+  left: 140px;
+  top: -30px;
+  z-index: 10;
+}
+
+.other-login {
+  margin: 0 auto;
+  .ivu-icon {
+    font-size: 24px;
+  }
+}
+.regist {
+  display: flex;
+  justify-content: flex-end;
+  margin-top: -10px;
+  span {
+    margin-left: 10px;
+    &:hover {
+      cursor: pointer;
+      color: $theme_color;
+    }
+  }
+}
+.foot {
+  position: fixed;
+  bottom: 4vh;
+  width: 368px;
+  left: calc(50% - 184px);
+  color: rgba(0, 0, 0, 0.45);
+  font-size: 14px;
+  .help {
+    margin: 0 auto;
+    margin-bottom: 1vh;
+    width: 60%;
+    .item {
+      color: rgba(0, 0, 0, 0.45);
+    }
+    :hover {
+      color: rgba(0, 0, 0, 0.65);
+    }
+  }
+}
+</style>

seller/src/views/login.vue

@@ -4,44 +4,48 @@
       <Col style="width: 368px">
       <Header />
       <Row style="flex-direction: column">
-          <Form
+        <Tabs v-model="loginType">
-            ref="usernameLoginForm"
+          <Tab-pane label="账号密码登录" name="passwordLogin">
-            :model="form"
+            <!--账号密码登录-->
-            :rules="rules"
+            <Form ref="usernameLoginForm" :model="form" :rules="rules" class="form">
-            class="form"
-          >
               <FormItem prop="username">
-              <Input
+                <Input v-model="form.username" prefix="ios-contact" size="large" clearable placeholder="请输入用户名"
-                v-model="form.username"
+                  autocomplete="off" />
-                prefix="ios-contact"
-                size="large"
-                clearable
-                placeholder="请输入用户名"
-                autocomplete="off"
-              />
               </FormItem>
               <FormItem prop="password">
-              <Input
+                <Input type="password" v-model="form.password" prefix="ios-lock" size="large" password placeholder="请输入密码"
-                type="password"
+                  autocomplete="off" />
-                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>
+          </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
+          <div class="login-btn" type="primary" size="large" :loading="loading" @click="submitLogin" long>
-              class="login-btn"
-              type="primary"
-              size="large"
-              :loading="loading"
-              @click="submitLogin"
-              long
-            >
             <span v-if="!loading">登录</span>
             <span v-else>登录中</span>
           </div>
@@ -49,12 +53,7 @@
       </Row>
       <Footer />
       <!-- 拼图验证码 -->
-        <verify
+      <verify ref="verify" class="verify-con" verifyType="LOGIN" @change="verifyChange"></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,20 +166,68 @@ 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() {
       // 登录提交
+      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;
 
+      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));
@@ -169,8 +241,17 @@ export default {
           .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>