You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
341 lines
8.1 KiB
341 lines
8.1 KiB
<template>
|
|
<view class="main">
|
|
<navigation>{{ i18n.ForgotPassword }}</navigation>
|
|
<!-- #ifdef H5 -->
|
|
<view class="body">
|
|
<!-- #endif -->
|
|
<!-- #ifdef APP-PLUS -->
|
|
<view class="bodyApp">
|
|
<!-- #endif -->
|
|
<u--form class="form" :model="userInfo" :rules="rules" ref="uForm" errorType="toast">
|
|
<!-- 邮箱 -->
|
|
<u-form-item class="input-item" prop="email" ref="item1">
|
|
<u-icon class="icon"
|
|
:name="userInfo.email ? '../../static/login/email_pr.png' : '../../static/login/email_de.png'"
|
|
size="48rpx" width="48rpx"></u-icon>
|
|
<u-input class="input" v-model="userInfo.email" color="#fff" fontSize="32rpx" border="none"
|
|
:placeholder="i18n.emailInputText">
|
|
</u-input>
|
|
</u-form-item>
|
|
<!-- 验证码 -->
|
|
<u-form-item class="input-item vCode" prop="code" ref="item1">
|
|
<u-icon class="icon"
|
|
:name="userInfo.code ? '../../static/login/code_pr.png' : '../../static/login/code_de.png'"
|
|
size="48rpx" width="48rpx"></u-icon>
|
|
<u-input class="input" v-model="userInfo.code" color="#fff" fontSize="32rpx" border="none"
|
|
:placeholder="i18n.registerWelcomeText" maxlength="6">
|
|
</u-input>
|
|
<u-code startText="Get code" :seconds="seconds" ref="uCode" keep-running unique-key="login"
|
|
@change="codeChange">
|
|
</u-code>
|
|
<u-button class="getVCodeBtn" color="#323045" @tap="getCode">{{tips}}</u-button>
|
|
</u-form-item>
|
|
<!-- 密码 -->
|
|
<u-form-item class="input-item" prop="password" ref="item1">
|
|
<u-icon class="icon"
|
|
:name="userInfo.password ? '../../static/login/Password_pr.png' : '../../static/login/Password_de.png'"
|
|
size="48rpx" width="48rpx"></u-icon>
|
|
<u-input class="input" type="password" v-model="userInfo.password" color="#fff" fontSize="32rpx"
|
|
border="none" :placeholder="i18n.passwordText">
|
|
</u-input>
|
|
</u-form-item>
|
|
<!-- 重复密码 -->
|
|
<u-form-item class="input-item" prop="confirmPassword" ref="item1">
|
|
<u-icon class="icon"
|
|
:name="userInfo.confirmPassword ? '../../static/login/Password_pr.png' : '../../static/login/Password_de.png'"
|
|
size="48rpx" width="48rpx"></u-icon>
|
|
<u-input class="input" type="password" v-model="userInfo.confirmPassword" color="#fff"
|
|
fontSize="32rpx" border="none" :placeholder="i18n.confirmPasswordText">
|
|
</u-input>
|
|
</u-form-item>
|
|
|
|
</u--form>
|
|
<u-button class="button" color="#00E8A2" throttleTime="500" :disabled="!agreeFlag" @click="forgotPassword" :throttleTime="500">{{ i18n.Save }}
|
|
</u-button>
|
|
</view>
|
|
|
|
|
|
</view>
|
|
</template>
|
|
|
|
<script>
|
|
import UButton from '../../uview-ui/components/u-button/u-button.vue'
|
|
import api from '@/utils/api'
|
|
import md5 from 'js-md5'
|
|
export default {
|
|
name: "ForgotPassword",
|
|
data() {
|
|
return {
|
|
// 验证码倒计时
|
|
tips: '',
|
|
seconds: 60,
|
|
// 邮箱号码是否正确
|
|
isCanGetCode: false,
|
|
// 密码格式对不对
|
|
isCanPassword: false,
|
|
userInfo: {
|
|
email: "",
|
|
password: "",
|
|
confirmPassword: "",
|
|
code:"",
|
|
},
|
|
rules: {
|
|
email: {
|
|
type: "string",
|
|
required: true,
|
|
message: this.$t("login").emailInputMessage,
|
|
trigger: ["blur", "change"],
|
|
},
|
|
code: {
|
|
type: "string",
|
|
required: true,
|
|
message: this.$t("login").verificationCodeMessage,
|
|
trigger: ["blur", "change"]
|
|
},
|
|
password: {
|
|
type: "string",
|
|
required: true,
|
|
message: this.$t("login").passwordInputMessage,
|
|
trigger: ["blur", "change"]
|
|
},
|
|
confirmPassword: {
|
|
type: "string",
|
|
required: true,
|
|
message: this.$t("login").passwordInputMessage,
|
|
trigger: ["blur", "change"]
|
|
},
|
|
},
|
|
};
|
|
},
|
|
computed: {
|
|
i18n() {
|
|
return this.$t("login");
|
|
},
|
|
agreeFlag() {
|
|
return this.userInfo.email && this.userInfo.password && this.userInfo.confirmPassword && this.userInfo.code
|
|
}
|
|
},
|
|
watch: {
|
|
'userInfo.email': {
|
|
handler(newValue) {
|
|
this.isCanGetCode = uni.$u.test.email(newValue);
|
|
}
|
|
},
|
|
'userInfo.password': {
|
|
handler(newValue) {
|
|
const numberReg = /^(?=.*[A-Z])(?=.*[a-z])(?=.*[0-9])[A-Za-z0-9 _]{6,20}$/
|
|
this.isCanPassword = numberReg.test(newValue)
|
|
}
|
|
},
|
|
},
|
|
onLoad() {
|
|
// console.log(this.$t('login.emailInputMessage'));
|
|
},
|
|
onShow() {},
|
|
methods: {
|
|
// 验证码相关
|
|
codeChange(text) {
|
|
this.tips = text;
|
|
if (text.length == 7) {
|
|
text = text.slice(0, 2); //截取第二个到第四个之间的字符 cd
|
|
this.tips = text + "s";
|
|
}
|
|
if (text.length == 6) {
|
|
text = text.substring(0, 1)
|
|
this.tips = text + "s";
|
|
}
|
|
if (text.length == 4) {
|
|
this.tips = this.$t("login").Getcode
|
|
}
|
|
|
|
},
|
|
// 验证码获取
|
|
getCode() {
|
|
if (!this.userInfo.email) {
|
|
uni.$u.toast(this.$t("login").Emailempty)
|
|
return
|
|
}
|
|
if (!this.isCanGetCode) {
|
|
uni.$u.toast(this.$t("login").Emailincorrect)
|
|
return
|
|
}
|
|
if (this.$refs.uCode.canGetCode) {
|
|
const data = {
|
|
email: this.userInfo.email,
|
|
type: 0,
|
|
}
|
|
// 模拟向后端请求验证码
|
|
uni.showLoading({
|
|
title: this.$t("login").GettingVerificationCode
|
|
})
|
|
api.sendEmailCode(data).then(res => {
|
|
uni.hideLoading(this.$t("login").CodeHasSent);
|
|
// 这里此提示会被this.start()方法中的提示覆盖
|
|
uni.$u.toast(this.$t("login").CodeHasSent);
|
|
// 通知验证码组件内部开始倒计时
|
|
this.$refs.uCode.start();
|
|
})
|
|
} else {
|
|
uni.$u.toast(this.$t("login").SendAfter);
|
|
}
|
|
},
|
|
|
|
// 输入密码
|
|
forgotPassword() {
|
|
if (!this.isCanPassword) {
|
|
uni.$u.toast(this.$t("login").passwordRule)
|
|
return
|
|
}
|
|
// 验证重复输入的密码
|
|
if (this.userInfo.password !== this.userInfo.confirmPassword) {
|
|
uni.$u.toast(this.$t("login").passwordConfirm)
|
|
return
|
|
}
|
|
this.$refs.uForm.validate().then(res => {
|
|
let userInfo = {
|
|
email: this.userInfo.email,
|
|
password: md5(this.userInfo.password),
|
|
confirmPassword: md5(this.userInfo.confirmPassword),
|
|
code: this.userInfo.code,
|
|
}
|
|
api.forgotPassword(userInfo).then(res => {
|
|
setTimeout(() => {
|
|
uni.showToast({
|
|
title: this.$t("login").resSuccess
|
|
})
|
|
}, 600)
|
|
uni.reLaunch({
|
|
url: '/pages/login/index'
|
|
})
|
|
})
|
|
}).catch(errors => {
|
|
console.log('err')
|
|
})
|
|
|
|
},
|
|
},
|
|
components: {
|
|
UButton
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style lang="scss" scoped>
|
|
.main {
|
|
|
|
.body {
|
|
margin-top: 204rpx;
|
|
padding: 0 64rpx;
|
|
overflow: hidden;
|
|
|
|
.form {
|
|
font-size: 32rpx;
|
|
margin-top: 48rpx;
|
|
|
|
.input-item {
|
|
height: 112rpx;
|
|
line-height: 112rpx;
|
|
background: #211F32;
|
|
margin-bottom: 48rpx;
|
|
border-radius: 32rpx;
|
|
|
|
.icon {
|
|
margin: 0 24rpx;
|
|
}
|
|
|
|
/deep/.u-form-item__body {
|
|
padding: 0;
|
|
}
|
|
|
|
.input {
|
|
height: 112rpx;
|
|
}
|
|
}
|
|
|
|
.vCode {
|
|
|
|
.getVCodeBtn {
|
|
// position: absolute;
|
|
width: 154rpx;
|
|
height: 56rpx;
|
|
right: 28rpx;
|
|
// top: 14px;
|
|
border-radius: 8px;
|
|
line-height: 56rpx;
|
|
font-size: 24rpx;
|
|
color: #00E8A2 !important;
|
|
padding: 0;
|
|
}
|
|
}
|
|
}
|
|
|
|
.button {
|
|
margin-top: 64rpx;
|
|
height: 112rpx;
|
|
line-height: 112rpx;
|
|
border-radius: 32rpx;
|
|
font-size: 32rpx;
|
|
color: #15141F !important;
|
|
}
|
|
|
|
|
|
}
|
|
.bodyApp{
|
|
margin-top: 204rpx !important;
|
|
padding: 0 64rpx;
|
|
overflow: hidden;
|
|
|
|
.form {
|
|
font-size: 32rpx;
|
|
margin-top: 48rpx;
|
|
|
|
.input-item {
|
|
height: 112rpx;
|
|
line-height: 112rpx;
|
|
background: #211F32;
|
|
margin-bottom: 48rpx;
|
|
border-radius: 32rpx;
|
|
|
|
.icon {
|
|
margin: 0 24rpx;
|
|
}
|
|
|
|
/deep/.u-form-item__body {
|
|
padding: 0;
|
|
}
|
|
|
|
.input {
|
|
height: 112rpx;
|
|
}
|
|
}
|
|
|
|
.vCode {
|
|
|
|
.getVCodeBtn {
|
|
// position: absolute;
|
|
width: 154rpx;
|
|
height: 56rpx;
|
|
right: 28rpx;
|
|
// top: 14px;
|
|
border-radius: 8px;
|
|
line-height: 56rpx;
|
|
font-size: 24rpx;
|
|
color: #00E8A2 !important;
|
|
padding: 0;
|
|
}
|
|
}
|
|
}
|
|
|
|
.button {
|
|
margin-top: 64rpx;
|
|
height: 112rpx;
|
|
line-height: 112rpx;
|
|
border-radius: 32rpx;
|
|
font-size: 32rpx;
|
|
color: #15141F !important;
|
|
}
|
|
|
|
}
|
|
|
|
}
|
|
</style>
|
|
|