html部分
<template>
<page-container
titleBg="#ffffff"
:title="
defaultPage === 'by-mobile'
? '忘记密码'
: step === 1
? '发送验证码'
: '修改密码'
"
v-on="$listeners"
>
<div class="container">
<wxc-cell-pro
v-if="step === 1 && defaultPage !== 'by-mobile'"
label="手机号码"
:title="mobile"
:hasArrow="false"
:labelStyle="{ color: '#999999' }"
></wxc-cell-pro>
<div
class="form-input-container"
v-if="step === 1 && defaultPage === 'by-mobile'"
>
<text ref="userName" class="form-input-placeholder">手机号码</text>
<input
v-model="mobile"
class="form-input"
type="text"
placeholder="请输入手机号码"
maxlength="42"
/>
</div>
<div class="qrcode-container" v-if="step === 1">
<text class="qrcode-text">图形校验码</text>
<div class="qr-container">
<input
v-model="captcha"
placeholder="图形校验码"
class="qrcode"
type="text"
@blur="blur"
maxlength="42"
/>
<image
class="captcha-image"
:src="captchaUrl"
@click="getCaptcha"
></image>
</div>
</div>
<!-- </div> -->
<div class="qrcode-container" v-if="step === 1">
<text class="qrcode-text">验证码</text>
<div class="qr-container">
<input
v-model="vrCode"
placeholder="验证码"
class="qrcode"
type="text"
@blur="blur"
maxlength="42"
/>
<wxc-button
:text="text"
@wxcButtonClicked="smsClicked"
type="white"
size="small"
:btnStyle="{ width: '188px', height: '64px', ...btnStyle }"
:textStyle="textStyle"
></wxc-button>
</div>
</div>
</div>
<div class="form-input-container" v-if="step === 2">
<text ref="userName" class="form-input-placeholder">设置新密码</text>
<input
v-model="newPassWord"
class="form-input"
type="password"
placeholder="包含数字、字母的8-16位字符"
maxlength="42"
/>
</div>
<div class="form-input-container" v-if="step === 2">
<text ref="userName" class="form-input-placeholder">确认新密码</text>
<input
v-model="newPassWordConfirm"
class="form-input"
type="password"
placeholder="再次输入新密码"
maxlength="42"
/>
</div>
<div class="btn-container">
<wxc-button
:text="step === 1 ? '下一步' : '确定'"
size="big"
:textStyle="{ color: '#ffffff', fontSize: '34px' }"
:btnStyle="{
backgroundColor: bgColor,
width: '686px',
height: '84px',
borderRadius: '4px'
}"
:disabled="submitBtnDisabled"
@wxcButtonClicked="submit"
></wxc-button>
</div>
<!-- <div
:class="['submit-btn', submitBtnDisabled && 'submit-btn-disabled']"
@click="submit"
>
<text class="submit-text">{{ step === 1 ? '下一步' : '确定' }}</text>
</div> -->
</page-container>
</template>
<style scoped lang="scss" src="./style.scss"></style>
<script lang="ts" src="./script.ts"></script>
js部分
import PageContainer from '@/components/common/page-container/index.vue';
import { WxcCellPro } from '@/weex-common/components';
import { WxcButton } from 'weex-ui';
import getUserInfo from '../../components/util/getUserInfo';
import { request, navigator, toast } from 'utils';
interface IBorderColor {
borderColor: String;
}
interface IColor {
color: String;
}
export default Vue.extend({
name: 'page-login_forget_password',
data() {
return {
vrCode: '',
disabled: true,
sended: false,
second: 60,
text: '获取验证码',
captchaUrl: '',
captchaToken: '',
captcha: '',
mobile: '',
newPassWord: '',
newPassWordConfirm: '',
step: 1
};
},
props: {
defaultPage: {
type: String,
default: ''
}
},
components: {
PageContainer,
WxcCellPro,
WxcButton
},
computed: {
// bgColor(): String {
// return this.disabled ? 'rgba(227,61,48,0.5)' : '#e23f2d';
// },
bgColor(): string {
return !this.submitBtnDisabled ? '#e23f2d' : 'rgba(227,61,48,0.5)';
},
btnStyle(): IBorderColor {
return this.sended
? { borderColor: '#F19E97' }
: { borderColor: '#E33D30' };
},
textStyle(): IColor {
return this.sended ? { color: '#F19E97' } : { color: '#E33D30' };
},
submitBtnDisabled() {
if (this.step === 1) {
return !this.vrCode;
}
return !this.newPassWord || !this.newPassWordConfirm;
}
},
mounted() {
this.getUserInfo();
this.getCaptcha();
},
methods: {
blur() {},
async getUserInfo() {
const [telephone] = await getUserInfo();
if (this.defaultPage !== 'by-mobile') {
this.mobile = telephone;
}
},
async getCaptcha() { //获取图形验证码 返回的图形验证码是base64
const {
result: { token, imageUrl }
} = await request.get('/api/user/admin/get-captcha', '', {
checkCookie: false
});
this.captchaToken = token;
this.captchaUrl = imageUrl;
},
submit() {
if (this.submitBtnDisabled) return;
if (this.step === 1) {
this.step += 1;
return;
}
this.changePassword();
},
reduceStep() {
if (this.step === 1) return navigator.pop();
this.step -= 1;
},
async smsClicked() {
if (!this.mobile) {
toast('请输入手机号码');
return;
}
// if (!this.captcha) {
// toast('请输入图形验证码');
// return;
// }
this.sended = true;
const { success, error } = await this.sendSms();
if (!success) {
toast(error);
// this.getCaptcha();
return;
}
this.text = `${this.second}s重新获取`;
this.btnText();
},
async sendSms() { //发送请求获取验证码
return request.post('/api/user/admin/password/send-sms', {
mobile: this.mobile,
captcha: this.captcha,
token: this.captchaToken
});
},
async changePassword() {
const newExp = /^(?![0-9]+$)(?![a-zA-Z]+$)[0-9A-Za-z]{8,16}$/;
if (
!newExp.test(this.newPassWord) ||
!newExp.test(this.newPassWordConfirm)
) {
toast('请输入8~16位任意英文加数字的密码!');
return;
}
if (!this.newPassWord) {
toast('请输入新密码');
return;
}
if (!this.newPassWordConfirm) {
toast('请确认新密码');
return;
}
if (this.newPassWord !== this.newPassWordConfirm) {
toast('两次输入的密码不一致');
return;
}
const { success, error } = await request.post(
'/api/user/admin/password/reset-by-sms',
{
mobile: this.mobile,
smsCode: this.vrCode,
password: this.newPassWord,
confirm: this.newPassWordConfirm
}
);
if (!success) {
toast(error);
return;
}
toast('密码修改成功');
navigator.pop();
},
btnText() { //获取验证码中的定时器
const time = setTimeout(() => {
if (this.second === 0) {
this.second = 60;
this.sended = false;
clearTimeout(time);
this.text = '获取验证码';
} else {
this.btnText();
this.second -= 1;
this.text = `${this.second}s重新获取`;
}
}, 1000);
}
}
});