356 lines
7.1 KiB
Vue
356 lines
7.1 KiB
Vue
|
<template>
|
||
|
|
<view class="container">
|
||
|
|
<view class="wrapper">
|
||
|
|
<view class="input-content">
|
||
|
|
<view class="input-item">
|
||
|
|
<input type="text" placeholder="请输入手机号" placeholder-class="input-empty" v-model="mobile" />
|
||
|
|
</view>
|
||
|
|
<view class="input-item2" style="flex-direction: row;">
|
||
|
|
<input style="margin-top:20upx;" type="number" placeholder="请输入验证码" v-model="vCode" maxlength="11"/>
|
||
|
|
<view :class="jsq ? 'bg-ccc' : ''" @click="getCodeInfo()" class="btnText">
|
||
|
|
{{btnText}}
|
||
|
|
</view>
|
||
|
|
</view>
|
||
|
|
<view class="input-item">
|
||
|
|
<input type="text" password placeholder="请输入新密码(8位或以上含有字母和数字)" placeholder-class="input-empty" v-model="newPwd" />
|
||
|
|
</view>
|
||
|
|
<view class="input-item">
|
||
|
|
<input type="text" password placeholder="请再次输入新密码" placeholder-class="input-empty" v-model="newPwdCopy" />
|
||
|
|
</view>
|
||
|
|
</view>
|
||
|
|
<button class="confirm-btn" @click="submit" >提 交</button>
|
||
|
|
</view>
|
||
|
|
</view>
|
||
|
|
</template>
|
||
|
|
|
||
|
|
<script>
|
||
|
|
import {
|
||
|
|
mapMutations
|
||
|
|
} from 'vuex';
|
||
|
|
import { callbackRequest, setStorage, getStorage, sureAlterTip, devEnv, alertTip } from '@/common/util.js';
|
||
|
|
import { updatePwd,getCodeInfo} from '@/common/api.js';
|
||
|
|
|
||
|
|
export default {
|
||
|
|
components: {},
|
||
|
|
data() {
|
||
|
|
return {
|
||
|
|
jsq:null,//计时器
|
||
|
|
btnText:'发送',
|
||
|
|
mobile:"",
|
||
|
|
newPwd:'',
|
||
|
|
newPwdCopy:"",
|
||
|
|
vCode:'',
|
||
|
|
codeKey:"",
|
||
|
|
};
|
||
|
|
},
|
||
|
|
onLoad() {
|
||
|
|
},
|
||
|
|
methods: {
|
||
|
|
...mapMutations(['logout']),
|
||
|
|
checkPhone (phone) {
|
||
|
|
if (!(/^1[3456789]\d{9}$/.test(phone))) {
|
||
|
|
return false;
|
||
|
|
}
|
||
|
|
return true;
|
||
|
|
},
|
||
|
|
getCodeInfo(){
|
||
|
|
if(this.jsq){return false;}
|
||
|
|
if (!this.checkPhone(this.mobile)) {
|
||
|
|
alertTip('请填写正确的手机号码','',1000);
|
||
|
|
return false;
|
||
|
|
}
|
||
|
|
let data = {
|
||
|
|
"method": getCodeInfo,
|
||
|
|
"data": {
|
||
|
|
phone:this.mobile
|
||
|
|
}
|
||
|
|
}
|
||
|
|
callbackRequest(data)
|
||
|
|
.then(res =>{
|
||
|
|
if(res.data.returnCode == 1){
|
||
|
|
this.codeKey = res.data.returnMsg;
|
||
|
|
alertTip('验证码已发送，请注意查收！','',3000);
|
||
|
|
this.timer();
|
||
|
|
}
|
||
|
|
})
|
||
|
|
},
|
||
|
|
timer(){
|
||
|
|
let i = 60;
|
||
|
|
let _this = this;
|
||
|
|
this.jsq = setInterval(function(){
|
||
|
|
if(i == 0){
|
||
|
|
_this.btnText = '发送';
|
||
|
|
clearInterval(_this.jsq);
|
||
|
|
_this.jsq = null;
|
||
|
|
return false;
|
||
|
|
}
|
||
|
|
_this.btnText = i+'s';
|
||
|
|
i--;
|
||
|
|
},1000);
|
||
|
|
|
||
|
|
},
|
||
|
|
|
||
|
|
submit(){
|
||
|
|
// if (!this.mobile) {
|
||
|
|
// this.$api.msg("请输入手机号")
|
||
|
|
// return
|
||
|
|
// }
|
||
|
|
if (!this.checkPhone(this.mobile)) {
|
||
|
|
this.$api.msg("请填写正确的手机号码")
|
||
|
|
this.mobile = '';
|
||
|
|
return
|
||
|
|
}
|
||
|
|
if (!this.vCode) {
|
||
|
|
this.$api.msg("请输入验证码")
|
||
|
|
return
|
||
|
|
}
|
||
|
|
var reg = /^(?=.*[A-Za-z])(?=.*\d)[A-Za-z\d]{8,18}$/;
|
||
|
|
if (!reg.test(this.newPwd)) {
|
||
|
|
this.$api.msg("请输入8位或以上含有字母和数字的密码");
|
||
|
|
return;
|
||
|
|
}
|
||
|
|
if (!this.newPwdCopy) {
|
||
|
|
this.$api.msg("请再次输入新登录密码")
|
||
|
|
this.newPwdCopy = '';
|
||
|
|
return
|
||
|
|
}
|
||
|
|
if (this.newPwd != this.newPwdCopy) {
|
||
|
|
this.$api.msg("两次输入的密码不一致")
|
||
|
|
this.newPwdCopy = '';
|
||
|
|
return
|
||
|
|
}
|
||
|
|
var CryptoJS = require('@/common/utils.js');
|
||
|
|
var aesutil = require('@/common/AESUtil.js');
|
||
|
|
let newPwdmd5 = CryptoJS.MD5(this.newPwd).toString();
|
||
|
|
let newAes = aesutil.encrypt("c32ad1415f6c89fee76d8457c31efb4b", newPwdmd5);
|
||
|
|
let params = {
|
||
|
|
method: updatePwd,
|
||
|
|
data: {
|
||
|
|
mobile:this.mobile,
|
||
|
|
newPwd:newAes,
|
||
|
|
vCode:this.vCode,
|
||
|
|
codeKey:this.codeKey,
|
||
|
|
}
|
||
|
|
};
|
||
|
|
callbackRequest(params).then(res => {
|
||
|
|
res = res.data;
|
||
|
|
if(res.returnCode == 1){
|
||
|
|
alertTip('密码已修改，请使用新密码重新登录','',2000);
|
||
|
|
this.logout();
|
||
|
|
uni.redirectTo({
|
||
|
|
url: '/pages/login/login'
|
||
|
|
});
|
||
|
|
}else {
|
||
|
|
this.$api.msg(res.returnMsg);
|
||
|
|
|
||
|
|
}
|
||
|
|
});
|
||
|
|
}
|
||
|
|
|
||
|
|
}
|
||
|
|
};
|
||
|
|
</script>
|
||
|
|
|
||
|
|
<style lang="scss">
|
||
|
|
.bg-ccc{
|
||
|
|
background: #ccc !important;
|
||
|
|
}
|
||
|
|
.btnText{
|
||
|
|
width: 30%;height: 100upx;line-height: 100upx;font-size: 30upx;color:#666;border-left: 1px solid #E5E5E5;text-align: center;
|
||
|
|
border-radius:0 100upx 100upx 0;
|
||
|
|
background: #4db4ea;
|
||
|
|
color: white;
|
||
|
|
}
|
||
|
|
page {
|
||
|
|
background: #fff;
|
||
|
|
}
|
||
|
|
.u_head {
|
||
|
|
padding: 4vw;
|
||
|
|
}
|
||
|
|
|
||
|
|
.head_img {
|
||
|
|
margin: 40upx auto;
|
||
|
|
margin-top: 50upx;
|
||
|
|
width: 25vw;
|
||
|
|
height: 25vw;
|
||
|
|
box-shadow: 0 0 10rpx 1rpx #f8f8f8;
|
||
|
|
border-radius:50%;
|
||
|
|
}
|
||
|
|
.head_img image{
|
||
|
|
width:100%;
|
||
|
|
height:100%;
|
||
|
|
border-radius: 50%;;
|
||
|
|
}
|
||
|
|
.head_edit {
|
||
|
|
position: absolute;
|
||
|
|
top: 41vw;
|
||
|
|
left: 56vw;
|
||
|
|
width: 10vw;
|
||
|
|
height: 10vw;
|
||
|
|
z-index: 9999;
|
||
|
|
}
|
||
|
|
|
||
|
|
.i_img {
|
||
|
|
width: 100%;
|
||
|
|
height: 100%;
|
||
|
|
border-radius: 50%;
|
||
|
|
|
||
|
|
}
|
||
|
|
.container {
|
||
|
|
// position: relative;
|
||
|
|
background: #fff;
|
||
|
|
}
|
||
|
|
|
||
|
|
.wrapper {
|
||
|
|
z-index: 90;
|
||
|
|
background: #fff;
|
||
|
|
margin-top: 8vh;
|
||
|
|
}
|
||
|
|
|
||
|
|
.back-btn {
|
||
|
|
// position: absolute;
|
||
|
|
// z-index: 9999;
|
||
|
|
margin: 1vh 0 0 5vw;
|
||
|
|
padding-top: var(--status-bar-height);
|
||
|
|
font-size: 40upx;
|
||
|
|
color: $font-color-dark;
|
||
|
|
}
|
||
|
|
|
||
|
|
.welcome {
|
||
|
|
position: relative;
|
||
|
|
text-align: center;
|
||
|
|
top: -50upx;
|
||
|
|
|
||
|
|
image {
|
||
|
|
width: 180upx;
|
||
|
|
height: 180upx;
|
||
|
|
border-radius: 20upx;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
.input-content {
|
||
|
|
padding: 60upx;
|
||
|
|
}
|
||
|
|
|
||
|
|
.input-item {
|
||
|
|
display: flex;
|
||
|
|
flex-direction: column;
|
||
|
|
align-items: flex-start;
|
||
|
|
justify-content: center;
|
||
|
|
padding: 0 30upx;
|
||
|
|
height: 100upx;
|
||
|
|
border-radius: 50px;
|
||
|
|
margin-bottom: 50upx;
|
||
|
|
box-shadow: 0upx 8upx 25upx rgba(0, 0, 0, 0.2);
|
||
|
|
|
||
|
|
&:last-child {
|
||
|
|
margin-bottom: 0;
|
||
|
|
}
|
||
|
|
|
||
|
|
.tit {
|
||
|
|
height: 50upx;
|
||
|
|
line-height: 56upx;
|
||
|
|
font-size: $font-sm + 2upx;
|
||
|
|
color: $font-color-base;
|
||
|
|
}
|
||
|
|
|
||
|
|
input {
|
||
|
|
height: 60upx;
|
||
|
|
font-size: $font-base + 2upx;
|
||
|
|
color: $font-color-dark;
|
||
|
|
width: 100%;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
/* 验证码 */
|
||
|
|
.input-item2 {
|
||
|
|
display: flex;
|
||
|
|
flex-direction: column;
|
||
|
|
align-items: flex-start;
|
||
|
|
justify-content: center;
|
||
|
|
padding: 0 0 0 30upx;
|
||
|
|
height: 100upx;
|
||
|
|
border-radius: 50px;
|
||
|
|
margin-bottom: 50upx;
|
||
|
|
box-shadow: 0upx 8upx 25upx rgba(0, 0, 0, 0.2);
|
||
|
|
|
||
|
|
&:last-child {
|
||
|
|
margin-bottom: 0;
|
||
|
|
}
|
||
|
|
|
||
|
|
.tit {
|
||
|
|
height: 50upx;
|
||
|
|
line-height: 56upx;
|
||
|
|
font-size: $font-sm + 2upx;
|
||
|
|
color: $font-color-base;
|
||
|
|
}
|
||
|
|
|
||
|
|
input {
|
||
|
|
height: 60upx;
|
||
|
|
font-size: $font-base + 2upx;
|
||
|
|
color: $font-color-dark;
|
||
|
|
width: 100%;
|
||
|
|
/* border: 1px solid #b4f3e2; */
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
.item2_inp {
|
||
|
|
display: flex;
|
||
|
|
}
|
||
|
|
|
||
|
|
.cod_desc {
|
||
|
|
font-size: $font-sm + 2upx;
|
||
|
|
color: $font-color-light;
|
||
|
|
width: 40vw;
|
||
|
|
text-align: center;
|
||
|
|
line-height: 60upx;
|
||
|
|
border-left: 1px solid #d5d5d5;
|
||
|
|
// text-decoration: underline;
|
||
|
|
}
|
||
|
|
|
||
|
|
.cod_act {
|
||
|
|
// color: $font-color-spec;
|
||
|
|
}
|
||
|
|
|
||
|
|
.confirm-btn {
|
||
|
|
width: 630upx;
|
||
|
|
height: 80upx;
|
||
|
|
line-height: 80upx;
|
||
|
|
border-radius: 50px;
|
||
|
|
margin-top: 70upx;
|
||
|
|
background: #4db4ea;
|
||
|
|
color: #fff;
|
||
|
|
font-size: $font-lg;
|
||
|
|
box-shadow: 0upx 8upx 25upx rgba(0, 0, 0, 0.2);
|
||
|
|
|
||
|
|
&:after {
|
||
|
|
border-radius: 100px;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
.forget-section {
|
||
|
|
font-size: $font-sm + 2upx;
|
||
|
|
color: $font-color-light;
|
||
|
|
text-align: center;
|
||
|
|
margin-top: 40upx;
|
||
|
|
}
|
||
|
|
|
||
|
|
.register-section {
|
||
|
|
padding: 3vh 0;
|
||
|
|
width: 100%;
|
||
|
|
font-size: $font-sm + 2upx;
|
||
|
|
color: $font-color-base;
|
||
|
|
text-align: center;
|
||
|
|
|
||
|
|
text {
|
||
|
|
color: $uni-color-primary;
|
||
|
|
margin-left: 10upx;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
.wxico {
|
||
|
|
width: 50upx;
|
||
|
|
height: 50upx;
|
||
|
|
}
|
||
|
|
</style>
|