From ef718a98c3f3a3511df20bccd7115afca0a2c810 Mon Sep 17 00:00:00 2001
From: wangqing <smalljop@foxmail.com>
Date: Tue, 15 Dec 2020 18:42:30 +0800
Subject: [PATCH] =?UTF-8?q?=E5=BF=98=E8=AE=B0=E5=AF=86=E7=A0=81?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/views/account/ForgetPwd.vue | 296 +++++++++++++++++++++++++-------
 src/views/account/login.vue     | 117 ++++++++++---
 2 files changed, 326 insertions(+), 87 deletions(-)

diff --git a/src/views/account/ForgetPwd.vue b/src/views/account/ForgetPwd.vue
index 531d902..d04e61c 100644
--- a/src/views/account/ForgetPwd.vue
+++ b/src/views/account/ForgetPwd.vue
@@ -1,91 +1,237 @@
 <template>
     <div class="app-container">
-        <div class="pwd-container">
-            <label>找回密码</label>
-            <el-tabs
-                v-model="retrieveType" class="login-form" style="width: 300px;"
-            >
-                <el-tab-pane label="手机号找回" name="phone">
-                    <el-form ref="form" :model="retrieveAccountForm" label-width="0px">
-                        <el-form-item label="">
-                            <el-input v-model="retrieveAccountForm.username" placeholder="请输入手机号" autocomplete="off" />
-                        </el-form-item>
-                        <el-form-item label="">
-                            <el-input v-model="retrieveAccountForm.password" show-password placeholder="请输入密码"
-                                      autocomplete="off"
-                            />
-                        </el-form-item>
-                        <el-form-item label="">
-                            <el-input v-model="retrieveAccountForm.code" style="width: 150px;" placeholder="请输入验证码"
-                                      autocomplete="off"
-                            />
-                            <el-button style="margin-left: 20px;" type="primary">发送验证码</el-button>
-                        </el-form-item>
-                        <el-form-item>
-                            <el-button type="primary" style="width: 100%;">登录</el-button>
-                        </el-form-item>
-                    </el-form>
-                </el-tab-pane>
-                <el-tab-pane label="邮箱找回" name="email">
-                    <el-form ref="emailRegForm" status-icon :rules="emailRetrieveRules" :model="retrieveAccountForm"
-                             label-width="0px"
-                    >
-                        <el-form-item label="" prop="email">
-                            <el-input v-model="retrieveAccountForm.email" placeholder="请输入邮箱" autocomplete="off" />
-                        </el-form-item>
-                        <el-form-item label="" prop="password">
-                            <el-input v-model="retrieveAccountForm.password" show-password placeholder="请输入密码"
-                                      autocomplete="off"
-                            />
-                        </el-form-item>
-                        <el-form-item label="" prop="code">
-                            <el-input v-model="retrieveAccountForm.code" oninput="value=value.replace(/[^\d]/g,'')"
-                                      style="width: 150px;" maxlength="4" placeholder="请输入验证码"
-                                      autocomplete="off"
-                            />
-                            <el-button style="margin-left: 20px;" :disabled="validateCodeBtn" type="primary"
-                                       @click="sendEmailCodeHandle"
-                            >
-                                {{ validateCodeBtnText }}
-                            </el-button>
-                        </el-form-item>
-                        <el-form-item>
-                            <el-button type="primary" style="width: 100%;" @click="emailRegHandle">确定</el-button>
-                        </el-form-item>
-                    </el-form>
-                </el-tab-pane>
-            </el-tabs>
+        <div v-if="retrieveStep===1" class="pwd-container">
+            <div style="width: 350px;">
+                <h4 class="title">找回密码</h4>
+                <el-tabs
+                    v-model="retrieveType" class="login-form"
+                >
+                    <el-tab-pane label="手机找回" name="phone">
+                        <el-form ref="phoneForm" :model="retrieveAccountForm" label-width="0px" :rules="phoneRules">
+                            <el-form-item label="" prop="phoneNumber">
+                                <el-input v-model="retrieveAccountForm.phoneNumber" placeholder="请输入手机号"
+                                          autocomplete="off"
+                                />
+                            </el-form-item>
+                            <el-form-item label="" prop="code">
+                                <el-input v-model="retrieveAccountForm.code" style="width: 150px;" placeholder="请输入验证码"
+                                          autocomplete="off"
+                                />
+                                <el-button style="margin-left: 20px;" type="primary" :disabled="emailValidateCodeBtn"
+                                           @click="sendPhoneValidateCodeHandle"
+                                >
+                                    {{ emailValidateCodeBtnText }}
+                                </el-button>
+                            </el-form-item>
+                            <el-form-item>
+                                <el-button type="primary" style="width: 100%;" @click="phoneRetrievePassWordHandle">
+                                    找回密码
+                                </el-button>
+                            </el-form-item>
+                        </el-form>
+                    </el-tab-pane>
+                    <el-tab-pane label="邮箱找回" name="email">
+                        <el-form ref="emailForm" status-icon :model="retrieveAccountForm"
+                                 label-width="0px"
+                        >
+                            <el-form-item label="" prop="email">
+                                <el-input v-model="retrieveAccountForm.email" placeholder="请输入邮箱" autocomplete="off" />
+                            </el-form-item>
+                            <el-form-item>
+                                <el-button type="primary" style="width: 100%;" @click="sendEmailValidateHandle">
+                                    找回密码
+                                </el-button>
+                            </el-form-item>
+                        </el-form>
+                    </el-tab-pane>
+                </el-tabs>
+            </div>
         </div>
+        <div v-if="retrieveStep===2" class="reset-pwd-view">
+            <div style="width: 350px;">
+                <h4 class="title">重置密码</h4>
+                <div class="rest-pwd-user-view">
+                    <i class="el-icon-user" />
+                    <span>{{ resetAccount }}</span>
+                </div>
+                <el-form ref="resetPwdForm" :model="resetPwdForm" label-width="0px" :rules="pwdRules">
+                    <el-form-item label="" prop="password">
+                        <el-input v-model="resetPwdForm.password" show-password placeholder="请输入密码"
+                                  autocomplete="off"
+                        />
+                    </el-form-item>
+                    <el-form-item label="" prop="rePassword">
+                        <el-input v-model="resetPwdForm.rePassword" show-password placeholder="请再次输入密码"
+                                  autocomplete="off"
+                        />
+                    </el-form-item>
+                    <el-form-item>
+                        <el-button type="primary" style="width: 100%;" @click="resetPasswordHandle">
+                            提交
+                        </el-button>
+                    </el-form-item>
+                </el-form>
+            </div>
+        </div>
+        <Verify
+            ref="verify"
+            :mode="'pop'"
+            :captcha-type="'blockPuzzle'"
+            :img-size="{ width: '330px', height: '155px' }"
+            @success="verifySuccessHandle"
+        />
     </div>
 </template>
 
 <script>
+// 引入组件
+import Verify from '@/components/verifition/Verify'
+
 export default {
     name: 'RetrievePwd',
+    components: {
+        Verify
+    },
     data() {
+        let validatePassword = (rule, value, callback) => {
+            if (value.length < 6) {
+                callback(new Error('密码最少为6位数'))
+            } else {
+                if (this.resetPwdForm.rePassword !== '') {
+                    this.$refs.restPwdForm.validateField('rePassword')
+                }
+                callback()
+            }
+        }
+        let validateRePass = (rule, value, callback) => {
+            if (value === '') {
+                callback(new Error('请再次输入密码'))
+            } else if (value !== this.resetPwdForm.rePassword) {
+                callback(new Error('两次输入密码不一致!'))
+            } else {
+                callback()
+            }
+        }
         return {
+            retrieveStep: 1,
             retrieveType: 'phone',
+            emailValidateCodeBtn: false,
+            emailValidateCodeBtnText: '发送验证码',
             retrieveAccountForm: {
+                phoneNumber: '',
                 email: '',
                 password: ''
             },
-            emailRetrieveRules: {
-                email: [
-                    {required: true, trigger: 'blur', message: '请输入邮箱'},
+            resetAccount: '',
+            resetPwdForm: {
+                code: '',
+                password: '',
+                rePassword: ''
+            },
+            phoneRules: {
+                phoneNumber: [
+                    {required: true, trigger: 'blur', message: '请输入手机号'},
                     {
-                        pattern: /^[a-zA-Z0-9_.-]+@[a-zA-Z0-9-]+(\.[a-zA-Z0-9-]+)*\.[a-zA-Z0-9]{2,6}$/,
-                        message: '请输入正确的邮箱,多个使用;分隔'
+                        pattern: /^(?:0|86|\+86)?1[3456789]\d{9}$/,
+                        message: '请输入正确的手机号'
                     }
                 ],
-                // password: [{required: true, trigger: 'blur', validator: validatePassword}],
                 code: {required: true, trigger: 'blur', message: '请输入验证码'}
+            },
+            pwdRules: {
+                password: [{required: true, trigger: 'blur', validator: validatePassword}],
+                rePassword: [{required: true, trigger: 'blur', validator: validateRePass}]
+            }
+        }
+    },
+    created() {
+        let code = this.$route.query.code
+        if (code) {
+            this.retrieveStep = 2
+        }
+    },
+    methods: {
+        sendPhoneValidateCodeHandle() {
+            this.$refs['phoneForm'].validateField('phoneNumber', err => {
+                if (!err) {
+                    this.$refs.verify.show()
+                }
+            })
+        },
+        sendPhoneValidateCode() {
+            let slideCode = params.captchaVerification
+            this.$refs['phoneForm'].validateField('phoneNumber', err => {
+                if (!err) {
+                    this.emailValidateCodeBtn = true
+                    this.$api.get(`/retrieve/password/phone/code?phoneNumber=${this.retrieveAccountForm.phoneNumber}&slideCode=${slideCode}`).then(() => {
+                        this.msgSuccess('验证码发送成功，5分钟内有效')
+                        this.emailValidateCodeBtn = true
+                        let count = 60
+                        let timer = setInterval(() => {
+                            count--
+                            this.emailValidateCodeBtnText = count + 's后重新发送'
+                            if (count == 0) {
+                                this.emailValidateCodeBtnText = '发送验证码'
+                                this.emailValidateCodeBtn = false
+                                clearInterval(timer)
+                            }
+                        }, 1000)
+                    })
+                }
+            })
+        },
+        phoneRetrievePassWordHandle() {
+            this.$refs['phoneForm'].validate(valid => {
+                if (valid) {
+                    this.$api.post('/retrieve/password/check/phone-code', this.retrieveAccountForm).then(res => {
+                        if (res.data) {
+                            this.msgSuccess('验证成功')
+                            this.resetPwdForm.code = res.data
+                            this.resetAccount = this.retrieveAccountForm.phoneNumber
+                            this.retrieveStep = 2
+                        }
+                    })
+                }
+            })
+        },
+        resetPasswordHandle() {
+            this.$refs['resetPwdForm'].validate(valid => {
+                if (valid) {
+                    this.$api.post('/retrieve/password/reset', this.resetPwdForm).then(res => {
+                        if (res.data) {
+                            this.msgSuccess('密码重置成功，快去登录吧')
+                            this.$router.push({path: '/login'})
+                        }
+                    })
+                }
+            })
+        },
+        sendEmailValidateHandle() {
+            this.$refs['emailForm'].validateField('email', err => {
+                if (!err) {
+                    this.$refs.verify.show()
+                }
+            })
+        },
+        sendEmailValidate() {
+            this.$refs['emailForm'].validateField('email', err => {
+                if (!err) {
+                    this.$refs.verify.show()
+                }
+            })
+        },
+        verifySuccessHandle(params) {
+            if (this.retrieveType == 'phone') {
+                this.sendPhoneValidateCode(params)
+            } else {
+                this.sendEmailValidate(params)
             }
         }
     }
 }
 </script>
 
-<style scoped>
+<style lang="scss" scoped>
 .app-container {
     height: 100%;
     width: 100%;
@@ -93,9 +239,33 @@ export default {
     justify-content: center;
     align-content: center;
 }
+.title {
+    color: rgba(16, 16, 16, 100);
+    font-size: 28px;
+    text-align: center;
+}
 .pwd-container {
     width: 20%;
     height: 50%;
-    border: 1px red solid;
+    align-content: center;
+}
+.rest-pwd-user-view {
+    line-height: 80px;
+    height: 100px;
+    padding: 10px;
+    .el-icon-user {
+        display: inline-block;
+        width: 20%;
+        color: #717171;
+        text-align: left;
+        font-size: 50px;
+    }
+    span {
+        color: #4c4c4c;
+        display: inline-block;
+        text-align: center;
+        font-size: 19px;
+        width: 80%;
+    }
 }
 </style>
diff --git a/src/views/account/login.vue b/src/views/account/login.vue
index 886aec5..9687b6b 100644
--- a/src/views/account/login.vue
+++ b/src/views/account/login.vue
@@ -44,7 +44,7 @@
                                         <span @click="redirectUrl(qqLoginAuthorizeUrl)">
                                             <svg-icon name="loginQQ" class="other-login-icon" />
                                         </span>
-                                        <svg-icon name="loginWx" class="other-login-icon" />
+                                        <!--                                        <svg-icon name="loginWx" class="other-login-icon" />-->
                                     </div>
                                 </el-col>
                             </el-row>
@@ -114,7 +114,13 @@
                                             <span @click="redirectUrl(qqLoginAuthorizeUrl)">
                                                 <svg-icon name="loginQQ" class="other-login-icon" />
                                             </span>
-                                            <svg-icon name="loginWx" class="other-login-icon" />
+                                            <svg-icon name="loginWx"
+                                                      class="other-login-icon"
+                                                      @click="()=>{
+                                                          this.formType='login',
+                                                          this.loginType='wx'
+                                                      }"
+                                            />
                                         </div>
                                     </el-col>
                                 </el-row>
@@ -127,23 +133,27 @@
                     @tab-click="registerHandleClick"
                 >
                     <el-tab-pane label="手机号注册" name="regPhone">
-                        <el-form ref="form" :model="accountForm" label-width="0px">
-                            <el-form-item label="">
-                                <el-input v-model="accountForm.username" placeholder="请输入手机号" autocomplete="off" />
+                        <el-form ref="phoneRegForm" :model="accountForm" :rules="phoneRegRules" label-width="0px">
+                            <el-form-item label="" prop="phoneNumber">
+                                <el-input v-model="accountForm.phoneNumber" placeholder="请输入手机号" autocomplete="off" />
                             </el-form-item>
-                            <el-form-item label="">
+                            <el-form-item label="" prop="password">
                                 <el-input v-model="accountForm.password" show-password placeholder="请输入密码"
                                           autocomplete="off"
                                 />
                             </el-form-item>
-                            <el-form-item label="">
+                            <el-form-item label="" prop="code">
                                 <el-input v-model="accountForm.code" style="width: 150px;" placeholder="请输入验证码"
                                           autocomplete="off"
                                 />
-                                <el-button style="margin-left: 20px;" type="primary">发送验证码</el-button>
+                                <el-button style="margin-left: 20px;" :disabled="phoneValidateCodeBtn" type="primary"
+                                           @click="sendPhoneCodeHandle"
+                                >
+                                    {{ phoneValidateCodeBtnText }}
+                                </el-button>
                             </el-form-item>
                             <el-form-item>
-                                <el-button type="primary" style="width: 100%;">登录</el-button>
+                                <el-button type="primary" style="width: 100%;" @click="phoneRegHandle">确定</el-button>
                             </el-form-item>
                         </el-form>
                     </el-tab-pane>
@@ -164,10 +174,10 @@
                                           style="width: 150px;" maxlength="4" placeholder="请输入验证码"
                                           autocomplete="off"
                                 />
-                                <el-button style="margin-left: 20px;" :disabled="validateCodeBtn" type="primary"
+                                <el-button style="margin-left: 20px;" :disabled="emailValidateCodeBtn" type="primary"
                                            @click="sendEmailCodeHandle"
                                 >
-                                    {{ validateCodeBtnText }}
+                                    {{ emailValidateCodeBtnText }}
                                 </el-button>
                             </el-form-item>
                             <el-form-item>
@@ -182,7 +192,13 @@
                             <span @click="redirectUrl(qqLoginAuthorizeUrl)">
                                 <svg-icon name="loginQQ" class="other-login-icon" />
                             </span>
-                            <svg-icon name="loginWx" class="other-login-icon" />
+                            <svg-icon name="loginWx"
+                                      class="other-login-icon"
+                                      @click="()=>{
+                                          this.formType='login',
+                                          this.loginType='wx'
+                                      }"
+                            />
                         </div>
                     </div>
                 </el-tabs>
@@ -229,17 +245,30 @@ export default {
         }
         return {
             loginType: 'wx',
-            validateCodeBtn: false,
-            validateCodeBtnText: '发送验证码',
+            emailValidateCodeBtn: false,
+            emailValidateCodeBtnText: '发送验证码',
+            phoneValidateCodeBtn: false,
+            phoneValidateCodeBtnText: '发送验证码',
             formType: 'login',
             regType: 'regPhone',
             agreeProtocol: '',
+            phoneRegRules: {
+                phoneNumber: [
+                    {required: true, trigger: 'blur', message: '请输入手机号'},
+                    {
+                        pattern: /^(?:0|86|\+86)?1[3456789]\d{9}$/,
+                        message: '请输入正确的手机号'
+                    }
+                ],
+                password: [{required: true, trigger: 'blur', validator: validatePassword}],
+                code: {required: true, trigger: 'blur', message: '请输入验证码'}
+            },
             emailRegRules: {
                 email: [
                     {required: true, trigger: 'blur', message: '请输入邮箱'},
                     {
                         pattern: /^[a-zA-Z0-9_.-]+@[a-zA-Z0-9-]+(\.[a-zA-Z0-9-]+)*\.[a-zA-Z0-9]{2,6}$/,
-                        message: '请输入正确的邮箱,多个使用;分隔'
+                        message: '请输入正确的邮箱'
                     }
                 ],
                 password: [{required: true, trigger: 'blur', validator: validatePassword}],
@@ -252,6 +281,7 @@ export default {
             },
             accountForm: {
                 email: '',
+                phoneNumber: '',
                 password: ''
             },
             wxQrCodeLoading: true,
@@ -261,6 +291,9 @@ export default {
             wxQrcodeResultTimer: null,
             qqLoginAuthorizeUrl: ''
         }
+    },
+    watch: {
+
     },
     created() {
         this.getLoginWxQrCode()
@@ -325,16 +358,17 @@ export default {
         sendEmailCodeHandle() {
             this.$refs['emailRegForm'].validateField('email', err => {
                 if (!err) {
-                    this.validateCodeBtn = true
+                    this.emailValidateCodeBtn = true
                     this.$api.get(`/register/email/code?email=${this.accountForm.email}`).then(() => {
                         this.msgSuccess('验证码发送成功，5分钟内有效')
-                        this.validateCodeBtn = true
+                        this.emailValidateCodeBtn = true
                         let count = 60
                         let timer = setInterval(() => {
                             count--
-                            this.validateCodeBtnText = count + 's后重新发送'
+                            this.emailValidateCodeBtnText = count + 's后重新发送'
                             if (count == 0) {
-                                this.validateCodeBtnText = '发送验证码'
+                                this.emailValidateCodeBtnText = '发送验证码'
+                                this.emailValidateCodeBtn = false
                                 clearInterval(timer)
                             }
                         }, 1000)
@@ -342,21 +376,56 @@ export default {
                 }
             })
         },
+        sendPhoneCodeHandle() {
+            this.$refs['phoneRegForm'].validateField('phoneNumber', err => {
+                if (!err) {
+                    this.phoneValidateCodeBtn = true
+                    this.$api.get(`/register/phone/code?phoneNumber=${this.accountForm.phoneNumber}`).then(() => {
+                        this.msgSuccess('验证码发送成功，5分钟内有效')
+                        this.phoneValidateCodeBtn = true
+                        let count = 60
+                        let timer = setInterval(() => {
+                            count--
+                            this.phoneValidateCodeBtnText = count + 's后重新发送'
+                            if (count == 0) {
+                                this.phoneValidateCodeBtnText = '发送验证码'
+                                this.phoneValidateCodeBtn = false
+                                clearInterval(timer)
+                            }
+                        }, 1000)
+                    })
+                }
+            })
+        },
+        phoneRegHandle() {
+            this.$refs['phoneRegForm'].validate(valid => {
+                if (valid) {
+                    this.$api.post('/register/phone', this.accountForm).then(() => {
+                        this.registerSuccessHandle()
+                    })
+                } else {
+                    return false
+                }
+            })
+        },
         emailRegHandle() {
             this.$refs['emailRegForm'].validate(valid => {
                 if (valid) {
                     this.$api.post('/register/email', this.accountForm).then(() => {
-                        this.msgSuccess('注册成功，快去登录吧')
-                        setTimeout(() => {
-                            this.formType = 'login'
-                            this.loginType = 'account'
-                        }, 1000)
+                        this.registerSuccessHandle()
                     })
                 } else {
                     return false
                 }
             })
         },
+        registerSuccessHandle() {
+            this.msgSuccess('注册成功，快去登录吧')
+            setTimeout(() => {
+                this.formType = 'login'
+                this.loginType = 'account'
+            }, 1000)
+        },
         loginSuccessHandle(data) {
             this.msgSuccess('登录成功')
             this.$store.dispatch('user/login', data).then(() => {