|
@@ -0,0 +1,215 @@
|
|
|
+<template>
|
|
|
+ <view class="forget-wrap">
|
|
|
+ <view class="logo">
|
|
|
+ <u-image src="/static/logo.png" width="120" height="120" ></u-image>
|
|
|
+ </view>
|
|
|
+ <form class="login-form" @submit="formSubmit">
|
|
|
+ <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>
|
|
|
+ </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'
|
|
|
+ export default{
|
|
|
+ components: {
|
|
|
+ uniPopup,
|
|
|
+ popupCon
|
|
|
+ },
|
|
|
+ data(){
|
|
|
+ return{
|
|
|
+ state: 0, // 忘记密码当前状态
|
|
|
+ form: {
|
|
|
+ phone: '',
|
|
|
+ verifyCode: '',
|
|
|
+ password: '',
|
|
|
+ passwords: ''
|
|
|
+ },
|
|
|
+ nowVal: '获取验证码', // 按钮显示内容
|
|
|
+ count: '', // 当前秒数
|
|
|
+ timer: null, // 倒计时
|
|
|
+ isDisable: false, // 是否禁止获取验证码
|
|
|
+ popBtn: [], // name为操作按钮名称,color为操作按钮颜色值
|
|
|
+ changeImg: false, // 是否重新更换图形验证码
|
|
|
+ randomCode: '', // 图片验证码随机码
|
|
|
+ }
|
|
|
+ },
|
|
|
+ onLoad(opts) {
|
|
|
+ if(opts.username){
|
|
|
+ this.form.phone = opts.username
|
|
|
+ }
|
|
|
+ },
|
|
|
+ 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';
|
|
|
+ .getcode-btn {
|
|
|
+ background-color: #298bf2 !important;
|
|
|
+ color: #fff !important;
|
|
|
+ border: none !important;
|
|
|
+ }
|
|
|
+</style>
|