252 lines
7.0 KiB
Vue
252 lines
7.0 KiB
Vue
|
||
<template>
|
||
<view class="main">
|
||
<view class="contents">
|
||
<u-form ref="uForm"
|
||
:model="emailObj"
|
||
class="paddings"
|
||
labelWidth="auto">
|
||
<u-form-item :label="'会员编号'"
|
||
label-width="80px"
|
||
prop="memberCode">
|
||
<u-input v-model="emailObj.memberCode"
|
||
class="border-color"
|
||
:placeholder="'会员编号'"
|
||
placeholder-class="place-class" />
|
||
</u-form-item>
|
||
<u-form-item label="用户密码"
|
||
label-width="80px"
|
||
prop="newPassword">
|
||
<u-input v-model="emailObj.newPassword"
|
||
class="border-color"
|
||
:placeholder="'请输入密码'"
|
||
type="password"
|
||
placeholder-class="place-class" />
|
||
|
||
</u-form-item>
|
||
<u-form-item :label="'确认密码'"
|
||
label-width="80px"
|
||
prop="loginPassword">
|
||
<u-input v-model="emailObj.loginPassword"
|
||
class="border-color"
|
||
type="password"
|
||
:placeholder="'请输入密码'"
|
||
placeholder-class="place-class" />
|
||
|
||
</u-form-item>
|
||
|
||
<u-form-item :label="'联系方式'"
|
||
label-width="80px"
|
||
prop="phone"
|
||
style="display: flex;">
|
||
<u-input v-model="emailObj.phone"
|
||
class="border-color"
|
||
:placeholder="'请输入联系方式'"
|
||
maxlength="20"
|
||
type="number"
|
||
placeholder-class="place-class" />
|
||
|
||
</u-form-item>
|
||
<u-form-item :label="'验证码'"
|
||
label-width="80px"
|
||
prop="code">
|
||
<view style="display: flex; align-items: center; padding-right:10rpx;">
|
||
<u-input v-model="emailObj.code"
|
||
class="border-color"
|
||
:placeholder="'请输入验证码'"
|
||
style="width: auto;"
|
||
placeholder-class="place-class" />
|
||
|
||
<button :disabled="disabled"
|
||
class="yzm"
|
||
@click.stop="getCode()">
|
||
{{getCodeText}}
|
||
</button>
|
||
</view>
|
||
</u-form-item>
|
||
</u-form>
|
||
</view>
|
||
<u-button class="btn"
|
||
shape="circle"
|
||
type="success"
|
||
@click="submit">{{'确定'}}</u-button>
|
||
<view style="height: 20rpx;"></view>
|
||
</view>
|
||
</template>
|
||
|
||
<script>
|
||
import * as api from '@/config/login.js'
|
||
import { setToken } from '@/config/auth.js'
|
||
import address from '@/components/address.vue'
|
||
import store from '@/store'
|
||
import { forgetPassword } from '../../config/login'
|
||
export default {
|
||
data() {
|
||
let validatePwd = (rule, value, callback) => {
|
||
if (this.emailObj.newPassword != value) {
|
||
callback(new Error('与新密码不一致，请重新输入'))
|
||
} else {
|
||
callback()
|
||
}
|
||
}
|
||
return {
|
||
getCodeText: '获取验证码',
|
||
disabled: false,
|
||
time: 60,
|
||
yzmCheck: false,
|
||
userInfo: '',
|
||
emailObj: {
|
||
memberCode: '',
|
||
newPassword: '',
|
||
loginPassword: '',
|
||
phone: '',
|
||
code: '',
|
||
},
|
||
rules: {
|
||
memberCode: [
|
||
{ required: true, trigger: 'blur', message: '请输入会员编号' },
|
||
],
|
||
code: [
|
||
{ required: false, trigger: 'blur', message: '请输入验证码' },
|
||
],
|
||
newPassword: [
|
||
{ required: true, trigger: 'blur', message: '请输入密码' },
|
||
],
|
||
loginPassword: [{ validator: validatePwd, trigger: 'blur' }],
|
||
phone: [
|
||
{ required: false, trigger: 'blur', message: '请输入联系方式' },
|
||
],
|
||
},
|
||
}
|
||
},
|
||
onLoad(option) {
|
||
|
||
this.userInfo = uni.getStorageSync('User')
|
||
},
|
||
onReady() {
|
||
this.$refs.uForm.setRules(this.rules)
|
||
},
|
||
methods: {
|
||
submit() {
|
||
this.$refs.uForm.validate().then((res) => {
|
||
api.forgetPassword(this.emailObj).then((res) => {
|
||
if (res.code == '200') {
|
||
uni.showToast({
|
||
title: res.msg,
|
||
icon: 'none',
|
||
success() {
|
||
setTimeout(() => {
|
||
uni.navigateTo({
|
||
url: '/pages/login/index',
|
||
})
|
||
}, 2000)
|
||
},
|
||
})
|
||
} else {
|
||
uni.showToast({
|
||
icon: 'none',
|
||
title: res.msg,
|
||
})
|
||
}
|
||
})
|
||
})
|
||
},
|
||
getCode() {
|
||
// this.disabled = true
|
||
// this.getCodeText = "发送中..." //发送验证码
|
||
// this.getCodeisWaiting = true;
|
||
// this.getCodeBtnColor = "rgba(255,255,255,0.5)" //追加样式，修改颜色
|
||
this.getYzm()
|
||
},
|
||
getYzm() {
|
||
this.$refs.uForm.validate().then((res) => {
|
||
api.forgetVerification(this.emailObj).then((res) => {
|
||
if (res.code == '200') {
|
||
setTimeout(() => {
|
||
//this.$common.msg('验证码已发送')
|
||
uni.showToast({
|
||
title: '验证码已发送',
|
||
icon: 'none',
|
||
}) //弹出提示框
|
||
this.setTimer() //调用定时器方法
|
||
}, 1000)
|
||
}
|
||
})
|
||
})
|
||
},
|
||
setTimer() {
|
||
this.disabled = true
|
||
let holdTime = 60 //定义变量并赋值
|
||
this.getCodeText = '重新获取' + '(60)'
|
||
//setInterval（）是一个实现定时调用的函数，可按照指定的周期（以毫秒计）来调用函数或计算表达式。
|
||
//setInterval方法会不停地调用函数，直到 clearInterval被调用或窗口被关闭。
|
||
this.time = setInterval(() => {
|
||
if (holdTime <= 0) {
|
||
this.disabled = false
|
||
this.getCodeisWaiting = false
|
||
this.getCodeBtnColor = '#ffffff'
|
||
this.getCodeText = '获取验证码'
|
||
clearInterval(this.time) //清除该函数
|
||
return //返回前面
|
||
}
|
||
this.getCodeText = '重新获取' + '(' + holdTime + ')'
|
||
holdTime--
|
||
}, 1000)
|
||
},
|
||
},
|
||
}
|
||
</script>
|
||
|
||
<style lang="scss" scoped>
|
||
:v-deep uni-button:after {
|
||
border: none;
|
||
}
|
||
:v-deep .u-form-item__body__right__message {
|
||
margin-left: 170rpx !important;
|
||
}
|
||
.yzm {
|
||
// width: 161rpx;
|
||
height: 74rpx;
|
||
line-height: 74rpx;
|
||
text-align: center;
|
||
color: #fff;
|
||
background: #2fbc42;
|
||
border-radius: 40rpx;
|
||
margin-left: 30rpx;
|
||
font-size: 24rpx;
|
||
}
|
||
:v-deep .u-form-item:nth-child(2) {
|
||
width: 670rpx;
|
||
}
|
||
.contents {
|
||
background-color: #fff;
|
||
}
|
||
page {
|
||
background-color: #f2f2f2;
|
||
}
|
||
:v-deep .width-s {
|
||
width: 200rpx !important;
|
||
}
|
||
.paddings {
|
||
padding: 30rpx 0rpx;
|
||
margin: 0 40rpx;
|
||
}
|
||
.border-color {
|
||
border-radius: 50rpx;
|
||
padding-left: 50rpx !important;
|
||
font-size: 28rpx;
|
||
width: 400rpx;
|
||
height: 60rpx;
|
||
background: #f5f6f8;
|
||
border: none;
|
||
}
|
||
.btn {
|
||
background-color: #005BAC;
|
||
border: none;
|
||
height: 92rpx;
|
||
line-height: 92rpx;
|
||
font-size: 30rpx;
|
||
margin: 40rpx auto;
|
||
width: 690rpx;
|
||
}
|
||
</style> |