静态页面

src/pages/ResetPassword/index.vue

@@ -13,7 +13,36 @@
     <!-- 内容 -->
     <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>
 
@@ -27,6 +56,13 @@ export default {
   name: '',
   data () {
     return {
+      Phone: '',
+      Code: '',
+      Password: '',
+      PasswordAgain: '',
+      DataLock: false,
+      Timer: null,
+      Sec: 60
     }
   },
   computed: {
@@ -41,8 +77,81 @@ export default {
   },
   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
+        })
+      }
     }
   }
 }

src/pages/ResetPassword/page.scss

@@ -52,6 +52,63 @@
       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: #ff5100;
+            }
+          }
+        }
+        > .Btn {
+          padding: 0 0.15rem;
+          position: relative;
+          overflow: hidden;
+          margin-top: 0.15rem;
+          > a {
+            display: block;
+            font-size: 0.16rem;
+            color: #fff;
+            background: #ff5100;
+            text-align: center;
+            line-height: 0.4rem;
+            border-radius: 0.06rem;
+          }
+        }
+      }
     }
   }
 }

src/store/user/index.js

@@ -121,6 +121,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}/app/reset-password`
+  },
   EditPassword: { // 修改密码
     method: 'put',
-    url: `${prefix}/app/resetpassword`
+    url: `${prefix}/app/change-password`
   },
   GetCurrentUserInfo: { // 获取当前用户信息
     method: 'get',