<template> <view class="forget-wrap"> <form class="login-form" @submit="formSubmit"> <view v-show="state == 0"> <view class="form-item"> <input v-model="form.phone" class="item-inp" name="phone" type="number" maxlength="11" placeholder="请输入登录手机号" /> </view> <view class="form-item"> <input v-model="form.verifyCode" class="item-inp" name="verifyCode" type="number" maxlength="6" placeholder="请输入短信验证码" /> <button class="getcode-btn" :disabled="isDisable" @click="getCodeValidate">{{nowVal}}</button> </view> <view class="form-btn-con"> <button class="form-btn" @click="goStep">下一步</button> </view> </view> <view v-show="state == 1"> <view class="form-item"> <input v-model="form.password" class="item-inp" name="password" password type="text" maxlength="12" placeholder="请输入新密码" /> </view> <view class="form-item"> <input v-model="form.passwords" class="item-inp" name="passwords" password type="text" maxlength="12" placeholder="请再次输入新密码" /> </view> <view class="form-btn-con"> <button class="form-btn" form-type="submit">提交</button> </view> </view> </form> <!-- 图文验证码 --> <uni-popup ref="imageTxtPopup" type="center"> <popup-con type="forgetImageTxt" title="图文验证码" :popBtn="popBtn" :changeImg="changeImg" @captchaImg="captchaImg"></popup-con> </uni-popup> </view> </template> <script> import { isvalidPhone } from '@/libs/validate.js' import uniPopup from '@/components/uni-popup/uni-popup.vue' import popupCon from '@/components/uni-popup/popup-con.vue' import { memberVerifyCode, memberChangePwd, memberValidateVerifyCode, memberGetByMobile } from '@/api/user.js' import { clzConfirm } from '@/libs/tools.js' export default{ components: { uniPopup, popupCon }, data(){ return{ state: 0, // 忘记密码当前状态 form: { phone: this.$store.state.vuex_user.account, verifyCode: '', password: '', passwords: '' }, nowVal: '获取验证码', // 按钮显示内容 count: '', // 当前秒数 timer: null, // 倒计时 isDisable: false, // 是否禁止获取验证码 popBtn: [], // name为操作按钮名称,color为操作按钮颜色值 changeImg: false, // 是否重新更换图形验证码 randomCode: '', // 图片验证码随机码 } }, methods: { // 下一步 goStep(){ const _this = this // 表单校验 if(this.form.phone == ''){ uni.showToast({icon: 'none',title: '请输入登录手机号'}) return } if(!isvalidPhone(this.form.phone)){ uni.showToast({icon: 'none',title: '请输入正确的手机号码'}) return } if(this.form.verifyCode == ''){ uni.showToast({icon: 'none',title: '请输入验证码'}) return } // 校验短信验证码是否正确 const obj = {} obj.phone = _this.form.phone, obj.random = _this.randomCode, // 当前随机码 obj.verifyCode = _this.form.verifyCode memberValidateVerifyCode(obj).then(res => { if(res.status == 200){ _this.state = 1 }else{ uni.showToast({icon: 'none',title: res.message}) } }) }, // 表单提交 formSubmit(){ const _this = this if(this.form.password == ''){ uni.showToast({icon: 'none',title: '请输入新密码'}) return } if(this.form.password.length < 6 || this.form.password.length > 12){ uni.showToast({icon: 'none',title: '请输入6-12位新密码'}) return } if(this.form.passwords == ''){ uni.showToast({icon: 'none',title: '请再次输入新密码'}) return } if(this.form.password != this.form.passwords){ uni.showToast({icon: 'none',title: '两次密码输入不一致'}) return } const obj = {} obj.phone = _this.form.phone, obj.random = _this.randomCode, // 当前随机码 obj.verifyCode = _this.form.verifyCode, obj.password = _this.form.password memberChangePwd(obj).then(res => { if(res.status == 200){ // 将修改后的账号密码 重新存储 _this.$u.vuex('vuex_user.account', _this.form.phone) _this.$u.vuex('vuex_user.password', '') clzConfirm({ title: '提示', content: '修改成功', confirmText: '去登录', showCancel: false, success: function (ret) { if (ret.confirm||ret.index==0) { uni.reLaunch({ url: '/pages/login/login' }) } } }) } }) }, // 获取验证码 getCodeValidate(){ if(this.form.phone){ if(!isvalidPhone(this.form.phone)){ uni.showToast({icon: 'none',title: '请输入正确的手机号码'}) return }else{ // 校验手机号是否注册过 memberGetByMobile({phone: this.form.phone}).then(res => { if(res.status == 200){ // 图文验证码 this.$refs.imageTxtPopup.open() }else{ uni.showToast({icon: 'none',title: res.message}) } }) } }else{ uni.showToast({icon: 'none',title: '请先输入手机号'}) } }, // 开始倒计时 getCodeFun(){ const TIME_COUNT = 60 if (!this.timer) { this.count = TIME_COUNT this.timer = setInterval(() => { if (this.count > 0 && this.count <= TIME_COUNT) { this.count-- this.nowVal = this.count + 's' this.isDisable = true } else { this.nowVal = '重新获取验证码' clearInterval(this.timer) this.timer = null this.isDisable = false } }, 1000) } }, // 图文验证码 captchaImg(code, nowRandomCode){ this.captchaVerify(code, nowRandomCode) }, // 验证图片验证码 captchaVerify(code, nowRandomCode){ const _this = this let obj = {} obj.phone = this.form.phone obj.random = nowRandomCode obj.captcha = code // 短信验证码 memberVerifyCode(obj).then(res => { console.log(JSON.stringify(res)) if(res.status == 200){ // 验证码输入正确 _this.randomCode = nowRandomCode // 图片验证码随机码 // 关闭 图形验证码 弹框 _this.$refs.imageTxtPopup.close() // 开启倒计时 this.getCodeFun() uni.showToast({icon: 'none',title: '验证码发送成功'}) }else { // 验证码输入错误 _this.randomCode = '' // 切换验证码重新校验 _this.changeImg = false _this.$nextTick(function(){ _this.changeImg = true }) uni.showToast({icon: 'none',title: res.message}) } }) }, } } </script> <style scoped lang="scss"> @import './login.scss'; .forget-wrap .login-form{ padding-top: 300upx; } .getcode-btn { background-color: #298bf2 !important; color: #fff !important; border: none !important; } </style>