静态页面

src/pages/ResetPassword/index.vue

@@ -0,0 +1,163 @@
+<template>
+  <div class="components MainPageContainer flex-v">
+
+    <!-- 头部 -->
+    <div class="MainHeaderPadding"></div>
+    <div class="MainHeader flex-h">
+      <a class="MainBack iconfont iconjiantouleft" @click="$router.back(-1)"></a>
+      <span class="MainTitle">
+        <span>找回密码</span>
+      </span>
+    </div>
+
+    <!-- 内容 -->
+    <div class="MainBody flex-item">
+      <div>
+        <div class="Form">
+          <div class="flex-h">
+            <span>手机号</span>
+            <div class="flex-item">
+              <input type="text" v-model="Phone" placeholder="请输入绑定手机号">
+            </div>
+          </div>
+          <div class="flex-h">
+            <span>验证码</span>
+            <div class="flex-item">
+              <input type="number" v-model="Code" placeholder="请输入手机验证码">
+            </div>
+            <a :class="{'active': Sec === 60}" @click="ToGetCode">{{Sec === 60 ? '获取验证码' : `${Sec > 9 ? Sec : `0${Sec}`}s后再次获取`}}</a>
+          </div>
+          <div class="flex-h">
+            <span>新密码</span>
+            <div class="flex-item">
+              <input type="password" v-model="Password" placeholder="请输入新密码">
+            </div>
+          </div>
+          <div class="flex-h">
+            <span>确认新密码</span>
+            <div class="flex-item">
+              <input type="password" v-model="PasswordAgain" placeholder="请再次输入新密码">
+            </div>
+          </div>
+          <div class="Btn">
+            <a @click="ToResetPassword">确认</a>
+          </div>
+        </div>
+      </div>
+    </div>
+
+  </div>
+</template>
+
+<script>
+import { createNamespacedHelpers } from 'vuex'
+const { mapActions: mapUserActions } = createNamespacedHelpers('user')
+export default {
+  name: '',
+  data () {
+    return {
+      Phone: '',
+      Code: '',
+      Password: '',
+      PasswordAgain: '',
+      DataLock: false,
+      Timer: null,
+      Sec: 60
+    }
+  },
+  computed: {
+  },
+  components: {
+  },
+  created () {
+  },
+  mounted () {
+    this.$nextTick(() => {
+    })
+  },
+  methods: {
+    ...mapUserActions([
+      'GetRegPhoneCode',
+      'CheckRegPhoneCode',
+      'ResetPassword'
+    ]),
+    Init () {
+    },
+    ToResetPassword () {
+      if (!this.IsPhone(this.Phone)) {
+        this.Toast('手机号格式错误')
+        return false
+      }
+      if (!this.IsPhone(this.Code === '')) {
+        this.Toast('请输入验证码')
+        return false
+      }
+      if (!this.IsPhone(this.Password === '')) {
+        this.Toast('请输入新密码')
+        return false
+      }
+      if (!this.IsPhone(this.PasswordAgain === '')) {
+        this.Toast('请确认新密码')
+        return false
+      }
+      if (!this.IsPhone(this.Password !== this.PasswordAgain)) {
+        this.Toast('两次密码输入不一致')
+        return false
+      }
+      if (this.DataLock) return
+      this.DataLock = true
+      this.ResetPassword({
+        data: {
+          captcha: this.Code,
+          password: this.Password,
+          phone: this.Phone
+        }
+      }).then(() => {
+        this.Toast('密码重置成功')
+        this.DataLock = false
+        window.setTimeout(() => {
+          this.$router.go(-1)
+        }, 1000)
+      }).catch((res) => {
+        this.Toast(res.data.message)
+        this.DataLock = false
+      })
+    },
+    IsPhone (str) { // 校验手机号
+      let myreg = /^[1][3,4,5,7,8][0-9]{9}$/
+      return !!myreg.test(str)
+    },
+    ToGetCode () {
+      if (!this.IsPhone(this.Phone)) {
+        this.Toast('手机号格式错误')
+        return false
+      }
+      if (this.Sec === 60 && !this.DataLock) {
+        this.DataLock = true
+        this.GetRegPhoneCode({ urlData: { phone: this.Phone } }).then(() => {
+          this.Toast('验证码已发送')
+          this.DataLock = false
+          window.clearInterval(this.Timer)
+          this.Sec -= 1
+          this.Timer = window.setInterval(() => {
+            if (this.Sec) {
+              this.Sec -= 1
+            } else {
+              this.Sec = 60
+              window.clearInterval(this.Timer)
+            }
+          }, 1000)
+        }).catch((res) => {
+          this.Toast(res.data.message)
+          this.DataLock = false
+        })
+      }
+    }
+  }
+}
+</script>
+
+<!-- Add "scoped" attribute to limit CSS to this component only -->
+<style lang="scss" scoped>
+@import "page.scss";
+</style>

src/pages/ResetPassword/page.scss

@@ -0,0 +1,114 @@
+.components.MainPageContainer {
+  width: 100%;
+  height: 100%;
+  position: relative;
+  overflow: hidden;
+  background: #f8f8f8;
+  > .MainHeaderPadding {
+    position: relative;
+    overflow: hidden;
+    background: #d91d36;
+  }
+  > .MainHeader {
+    position: relative;
+    overflow: hidden;
+    background: #d91d36;
+    > .MainTitle {
+      width: 100%;
+      display: block;
+      text-align: center;
+      height: 0.4rem;
+      white-space: nowrap;
+      position: relative;
+      z-index: 1;
+      > * {
+        display: inline-block;
+        vertical-align: middle;
+        line-height: 0.4rem;
+        font-size: 0.17rem;
+        color: #fff;
+      }
+    }
+    > a {
+      display: inline-block;
+      position: absolute;
+      z-index: 2;
+      color: #fff;
+      &.MainBack {
+        font-size: 0.18rem;
+        line-height: 0.4rem;
+        top: 0;
+        left: 0.15rem;
+      }
+    }
+  }
+  > .MainBody {
+    position: relative;
+    overflow: hidden;
+    > div {
+      position: absolute;
+      width: 100%;
+      position: absolute;
+      left: 0;
+      top: 0;
+      bottom: 0;
+      > .Form {
+        width: 100%;
+        height: 100%;
+        position: relative;
+        overflow-y: scroll;
+        -webkit-overflow-scrolling: touch;
+        > .flex-h {
+          align-items: center;
+          background: #fff;
+          padding: 0 0.15rem;
+          border-bottom: 0.01rem solid #f8f8f8;
+          > span {
+            min-width: 0.8rem;
+            font-size: 0.14rem;
+            color: #333;
+            line-height: 0.44rem;
+          }
+          > div {
+            position: relative;
+            overflow: hidden;
+            > input {
+              width: 100%;
+              display: block;
+              font-size: 0.14rem;
+              line-height: 0.4rem;
+              border: none;
+              color: #333;
+            }
+          }
+          > a {
+            font-size: 0.14rem;
+            color: #fff;
+            background: #ccc;
+            line-height: 0.3rem;
+            padding: 0 0.15rem;
+            border-radius: 0.04rem;
+            &.active {
+              background: #d91d36;
+            }
+          }
+        }
+        > .Btn {
+          padding: 0 0.15rem;
+          position: relative;
+          overflow: hidden;
+          margin-top: 0.15rem;
+          > a {
+            display: block;
+            font-size: 0.16rem;
+            color: #fff;
+            background: #d91d36;
+            text-align: center;
+            line-height: 0.4rem;
+            border-radius: 0.06rem;
+          }
+        }
+      }
+    }
+  }
+}

src/pages/SignIn/index.vue

@@ -26,6 +26,8 @@
       </li>
     </ul>
 
+    <span>忘记密码？ <router-link :to="{ name: 'ResetPassword' }">重置密码</router-link></span>
+
     <span>没有注册账号？ <router-link :to="{ name: 'SignUp' }">去注册</router-link></span>
 
     <div class="Btn">

src/router/index.js

@@ -133,6 +133,11 @@ let router = new Router({
         name: 'SignIn',
         component: resolve => (require(['@/pages/SignIn'], resolve))
       },
+      {
+        path: '/ResetPassword', // 重置密码
+        name: 'ResetPassword',
+        component: resolve => (require(['@/pages/ResetPassword'], resolve))
+      },
       {
         path: '/SignUp', // 注册页
         name: 'SignUp',

src/store/user/index.js

@@ -79,6 +79,11 @@ export default {
     }
   },
   actions: {
+    ResetPassword (context, payload) { // 重置密码
+      return new Promise((resolve, reject) => {
+        ToolClass.Axios(resolve, reject, Api.ResetPassword, context, payload, 1000)
+      })
+    },
     EditPassword (context, payload) { // 修改密码
       return new Promise((resolve, reject) => {
         ToolClass.Axios(resolve, reject, Api.EditPassword, context, payload, 1000)

src/util/Api.js

@@ -2,9 +2,13 @@
 const prefix = '/api'
 
 const $api = {
+  ResetPassword: { // 重置密码
+    method: 'put',
+    url: `${prefix}/shop/reset-password`
+  },
   EditPassword: { // 修改密码
     method: 'put',
-    url: `${prefix}/shop/resetpassword`
+    url: `${prefix}/shop/change-password`
   },
   AliShiMingRenZheng: { // 支付宝实名认证
     method: 'put',