增加找回密码、修改密码功能

src/core/apis.js

@@ -30,6 +30,9 @@ export default {
         login: {
             url: "/wxapp/public/login",
         },
+        resetPassword: {
+            url: "/wxapp/public/passwordReset",
+        },
         info: {
             url: "/wxapp/user/getuserinfo",
             auth: true,

src/core/models/user.js

@@ -157,5 +157,26 @@ export default {
                 }
             }).catch(e => { });
         });
+    },
+    /**
+     * 找回密码
+     */
+    resetPassword(data, verificationCode) {
+        return new Promise((resolve, reject) => {
+            prototype.$request({
+                api: "user.resetPassword",
+                data: {
+                    username: data.username,
+                    password: data.password,
+                    verification_code: verificationCode,
+                    types: 1,
+                },
+            }).then(response => {
+                if (response.code == 1) {
+                    return resolve(response.msg);
+                }
+                return reject(response.msg);
+            }).catch(e => { });
+        });
     }
 }

src/pages.json

@@ -12,6 +12,12 @@
 				"navigationBarTitleText": "登录"
 			}
 		},
+		{
+			"path": "pages/auth/find-password",
+			"style": {
+				"navigationBarTitleText": "找回密码"
+			}
+		},
 		{
 			"path": "pages/service/cate",
 			"style": {
@@ -97,6 +103,12 @@
 				"navigationBarTitleText": "设置"
 			}
 		},
+		{
+			"path": "pages/member/password",
+			"style": {
+				"navigationBarTitleText": "修改密码"
+			}
+		},
 		{
 			"path": "pages/address/address",
 			"style": {

src/pages/auth/auth.vue

@@ -135,9 +135,15 @@ export default {
     onReachBottom() {},
     onPullDownRefresh() {},
     methods: {
+        /**
+         * 忘记密码
+         */
         forgetPassword() {
-            this.$utils.toast("正在开发中");
+            this.$utils.toPage("/pages/auth/find-password");
         },
+        /**
+         * 获取验证码
+         */
         getVerifyCode() {
             if (this.canUse) {
                 this.$models.user
@@ -152,19 +158,25 @@ export default {
                 this.$utils.toast("请稍后再试");
             }
         },
+        /**
+         * 倒计时
+         */
         parseTime(sec) {
             const that = this;
             this.canUse = false;
             this.sec = sec;
-            that.timeTask = setInterval(() => {
+            clearInterval(this.timeTask);
+            this.timeTask = setInterval(() => {
                 that.sec -= 1;
                 if (that.sec <= 0) {
                     that.canUse = true;
                     that.sec = 0;
-                    clearInterval(that.timeTask);
                 }
             }, 1000);
         },
+        /**
+         * 登录
+         */
         login() {
             this.$models.user
                 .login({
@@ -179,6 +191,9 @@ export default {
                     this.$utils.toast(e);
                 });
         },
+        /**
+         * 注册
+         */
         register() {
             const that = this;
             if (!this.isAgree) {
@@ -195,13 +210,8 @@ export default {
                     this.verificationCode
                 )
                 .then((response) => {
-                    this.$utils.toast(response.msg, {
+                    this.$utils.toast(response.msg).then(() => {
-                        duration: 1500,
+                        this.$utils.toPage("/pages/auth/auth");
-                        complete() {
-                            setTimeout(() => {
-                                that.$utils.toPage("/pages/auth/auth");
-                            }, 1500);
-                        },
                     });
                 })
                 .catch((e) => {

src/pages/auth/find-password.vue

@@ -0,0 +1,148 @@
+<template>
+    <app-layout title="找回密码">
+        <view class="common-form-container">
+            <view class="input-item">
+                <view class="title-box">
+                    <text>手机号</text>
+                </view>
+                <view class="input-box">
+                    <input class="input" v-model="mobile" placeholder="请输入手机号码" placeholder-class="placeholder-style-3" />
+                </view>
+            </view>
+            <view class="input-item">
+                <view class="title-box">
+                    <text>验证码</text>
+                </view>
+                <view class="input-box">
+                    <input
+                        class="input"
+                        v-model="verificationCode"
+                        placeholder="请输入验证码"
+                        placeholder-class="placeholder-style-3"
+                    />
+                    <view class="get-code" @click="getVerifyCode">
+                        <text class="text active" v-if="canUse">获取验证码</text>
+                        <text class="text" v-else>{{ sec }}s后重新获取</text>
+                    </view>
+                </view>
+            </view>
+            <view class="input-item">
+                <view class="title-box">
+                    <text>新密码</text>
+                </view>
+                <view class="input-box">
+                    <input class="input" v-model="password" placeholder="请输入新密码" placeholder-class="placeholder-style-3" />
+                </view>
+            </view>
+        </view>
+        <view class="common-save-form-btn">
+            <view class="btn" @click="submit">立即找回</view>
+        </view>
+    </app-layout>
+</template>
+
+<script>
+import AppLayout from "@/components/layout/layout";
+export default {
+    name: "member-password",
+    data() {
+        return {
+            timeTask: null,
+            canUse: true,
+            sec: 0,
+            mobile: "",
+            password: "",
+            verificationCode: "",
+        };
+    },
+    components: {
+        AppLayout,
+    },
+    onLoad() {},
+    onShow() {},
+    onReady() {},
+    onReachBottom() {},
+    onPullDownRefresh() {},
+    methods: {
+        /**
+         * 获取验证码
+         */
+        getVerifyCode() {
+            if (this.canUse) {
+                this.$models.user
+                    .sendVerificationCode(this.mobile)
+                    .then((response) => {
+                        this.parseTime(60);
+                    })
+                    .catch((e) => {
+                        this.$utils.toast(e);
+                    });
+            } else {
+                this.$utils.toast("请稍后再试");
+            }
+        },
+        /**
+         * 倒计时
+         */
+        parseTime(sec) {
+            const that = this;
+            this.canUse = false;
+            this.sec = sec;
+            clearInterval(this.timeTask);
+            this.timeTask = setInterval(() => {
+                that.sec -= 1;
+                if (that.sec <= 0) {
+                    that.canUse = true;
+                    that.sec = 0;
+                }
+            }, 1000);
+        },
+        /**
+         * 找回密码
+         */
+        submit() {
+            this.$models.user
+                .resetPassword(
+                    {
+                        username: this.mobile,
+                        password: this.password,
+                    },
+                    this.verificationCode
+                )
+                .then((message) => {
+                    this.$utils.toast(message).then(() => {
+                        this.$utils.toPage("/pages/auth/auth");
+                    });
+                })
+                .catch((e) => {
+                    this.$utils.toast(e);
+                });
+        },
+    },
+};
+</script>
+
+<style lang="less" scoped>
+.common-form-container {
+    .input-item {
+        position: relative;
+    }
+    .get-code {
+        position: absolute;
+        top: 0;
+        right: 0;
+        display: inline-block;
+        padding: 24rpx 0;
+        .text {
+            font-size: 28rpx;
+            color: #999999;
+        }
+        .text.active {
+            color: #ffa800;
+        }
+    }
+    .title-box {
+        font-weight: normal;
+    }
+}
+</style>

src/pages/member/password.vue

@@ -0,0 +1,150 @@
+<template>
+    <app-layout title="修改密码">
+        <view class="common-form-container">
+            <view class="input-item">
+                <view class="title-box">
+                    <text>验证码</text>
+                </view>
+                <view class="input-box">
+                    <input
+                        class="input"
+                        v-model="verificationCode"
+                        placeholder="请输入验证码"
+                        placeholder-class="placeholder-style-3"
+                    />
+                    <view class="get-code" @click="getVerifyCode">
+                        <text class="text active" v-if="canUse">获取验证码</text>
+                        <text class="text" v-else>{{ sec }}s后重新获取</text>
+                    </view>
+                </view>
+            </view>
+            <view class="input-item">
+                <view class="title-box">
+                    <text>新密码</text>
+                </view>
+                <view class="input-box">
+                    <input class="input" v-model="password" placeholder="请输入新密码" placeholder-class="placeholder-style-3" />
+                </view>
+            </view>
+        </view>
+        <view class="common-save-form-btn">
+            <view class="btn" @click="submit">修改</view>
+        </view>
+    </app-layout>
+</template>
+
+<script>
+import AppLayout from "@/components/layout/layout";
+import { mapState } from "vuex";
+export default {
+    name: "member-password",
+    data() {
+        return {
+            timeTask: null,
+            canUse: true,
+            sec: 0,
+            password: "",
+            verificationCode: "",
+        };
+    },
+    components: {
+        AppLayout,
+    },
+    computed: {
+        ...mapState({
+            isLogin: (state) => state.user.token.length > 0,
+            userInfo: (state) => state.user.info,
+        }),
+    },
+    onLoad() {
+        if (!this.isLogin) {
+            return this.$store.commit("user/showLoginModal", true);
+        }
+    },
+    onShow() {},
+    onReady() {},
+    onReachBottom() {},
+    onPullDownRefresh() {},
+    methods: {
+        /**
+         * 获取验证码
+         */
+        getVerifyCode() {
+            if (this.canUse) {
+                this.$models.user
+                    .sendVerificationCode(this.userInfo.mobile)
+                    .then((response) => {
+                        this.parseTime(60);
+                    })
+                    .catch((e) => {
+                        this.$utils.toast(e);
+                    });
+            } else {
+                this.$utils.toast("请稍后再试");
+            }
+        },
+        /**
+         * 倒计时
+         */
+        parseTime(sec) {
+            const that = this;
+            this.canUse = false;
+            this.sec = sec;
+            clearInterval(this.timeTask);
+            this.timeTask = setInterval(() => {
+                that.sec -= 1;
+                if (that.sec <= 0) {
+                    that.canUse = true;
+                    that.sec = 0;
+                }
+            }, 1000);
+        },
+        /**
+         * 修改密码
+         */
+        submit() {
+            this.$models.user
+                .resetPassword(
+                    {
+                        username: this.userInfo.mobile,
+                        password: this.password,
+                    },
+                    this.verificationCode
+                )
+                .then((message) => {
+                    this.$utils.toast(message).then(() => {
+                        this.$utils.toPage("", {}, "back");
+                    });
+                })
+                .catch((e) => {
+                    this.$utils.toast(e);
+                });
+        },
+    },
+};
+</script>
+
+<style lang="less" scoped>
+.common-form-container {
+    .input-item {
+        position: relative;
+    }
+    .get-code {
+        position: absolute;
+        top: 0;
+        right: 0;
+        display: inline-block;
+        padding: 24rpx 0;
+        .text {
+            font-size: 28rpx;
+            color: #999999;
+        }
+        .text.active {
+            color: #ffa800;
+        }
+    }
+    .title-box {
+        font-weight: normal;
+    }
+}
+</style>