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.
214 lines
6.9 KiB
214 lines
6.9 KiB
7 months ago
|
<template>
|
||
|
|
<view>
|
||
|
|
<div class="accounmt">
|
||
|
|
<p style="font-size:23px;color:#333333;margin-top:0">设置交易密码</p>
|
||
|
|
<div class="linex"></div>
|
||
|
|
<p style="color:#A6A6A6;font-size:12px">*请确保交易密码与登录密码不同!</p>
|
||
|
|
<p style="color:#A6A6A6;font-size:12px;margin:5px 0">*密码必须为 6-16 位，字母、数字或字符的组合。</p>
|
||
|
|
<p style="color:#A6A6A6;font-size:12px;margin-bottom: 30px;">
|
||
|
|
<span>*如果您收不到手机验证码，请先去</span>
|
||
|
|
<span style="color:#1989fa">个人信息</span>
|
||
|
|
<span>页面验证工作手机。</span>
|
||
|
|
</p>
|
||
|
|
<view style="padding: 0 10px;">
|
||
|
|
<u-form :model="transactionform" ref="transactionform" label-position='left' label-width='200' border-bottom='false' >
|
||
|
|
<u-form-item label="手机号码" prop="name" border-bottom='false' required='true'>
|
||
|
|
<view class="sinput">
|
||
|
|
<span v-if="wxUserInfo.phonenumber">+86 {{wxUserInfo.phonenumber}}</span>
|
||
|
|
</view>
|
||
|
|
</u-form-item>
|
||
|
|
<u-form-item label="交易密码" prop="password" border-bottom='false' required='true'>
|
||
|
|
<view class="sinput">
|
||
|
|
<u-input style="width:100%;" type="password" password-icon="true" v-model="transactionform.password" placeholder='输入交易密码' />
|
||
|
|
</view>
|
||
|
|
</u-form-item>
|
||
|
|
<u-form-item label="确认交易密码" prop="newpassword" border-bottom='false' required='true'>
|
||
|
|
<view class="sinput">
|
||
|
|
<u-input style="width:100%;" type="password" password-icon="true" v-model="transactionform.newpassword" placeholder='输入确认交易密码' />
|
||
|
|
</view>
|
||
|
|
</u-form-item>
|
||
|
|
<u-form-item label="短信验证码" border-bottom='false' required='true'>
|
||
|
|
<view class="sinput">
|
||
|
|
<u-field v-model="transactionform.code" :clearable='isclear' label-width='0' placeholder-style="font-size:14px'color:#c0c4cc" placeholder='请输入验证码'>
|
||
|
|
<p slot="right" @click="getCode">{{codeText}}</p>
|
||
|
|
</u-field>
|
||
|
|
<u-verification-code ref="uCode" @change="codeChange"></u-verification-code>
|
||
|
|
</view>
|
||
|
|
</u-form-item>
|
||
|
|
</u-form>
|
||
|
|
</view>
|
||
|
|
<button class="button-g" @click="submit">确认</button>
|
||
|
|
<u-toast ref="uToast" />
|
||
|
|
</div>
|
||
|
|
</view>
|
||
|
|
</template>
|
||
|
|
|
||
|
|
<script>
|
||
|
|
import { encrypt, decrypt } from '../../../utils/encrypt.js'
|
||
|
|
export default {
|
||
|
|
data() {
|
||
|
|
const validatePass = (rule, value, callback) => {
|
||
|
|
if (value === '') {
|
||
|
|
return callback(new Error('请输入密码'));
|
||
|
|
}
|
||
|
|
if(!/^[a-z0-9][a-z0-9A-Z@#%^.*!~?|]{5,11}$/i.test(value)){
|
||
|
|
return callback(new Error('密码格式错误'));
|
||
|
|
}
|
||
|
|
// if (this.getpasswordForm.repassword !== '') {
|
||
|
|
// this.$refs.getpasswordForm.validateField('repassword')
|
||
|
|
// }
|
||
|
|
return callback();
|
||
|
|
};
|
||
|
|
//注册的确认密码
|
||
|
|
const validatePass2 = (rule, value, callback) => {
|
||
|
|
if (value === '') {
|
||
|
|
callback(new Error('请再次输入密码'));
|
||
|
|
} else if (value !== this.transactionform.password) {
|
||
|
|
callback(new Error('两次输入密码不一致!'));
|
||
|
|
} else {
|
||
|
|
callback();
|
||
|
|
}
|
||
|
|
};
|
||
|
|
return {
|
||
|
|
wxUserInfo:null,
|
||
|
|
transactionform:{password:'',newpassword:'',code:'',uuid:'',},
|
||
|
|
cleart:false,
|
||
|
|
codeText: '获取验证码',
|
||
|
|
passRules: {
|
||
|
|
password: [{ required: true, validator:validatePass, trigger: 'blur' },
|
||
|
|
{ min: 6, message: '密码长度最少为6位', trigger: 'blur' },{ max: 20, message: '密码长度最长为20位', trigger: 'blur' }],
|
||
|
|
newpassword: [{ required: true, validator:validatePass2, trigger: 'blur' },
|
||
|
|
{ min: 6, message: '密码长度最少为6位', trigger: 'blur' },{ max: 20, message: '密码长度最长为20位', trigger: 'blur' }],
|
||
|
|
},
|
||
|
|
}
|
||
|
|
},
|
||
|
|
mounted() {
|
||
|
|
this.wxUserInfo = uni.getStorageSync('wxUserInfo');
|
||
|
|
|
||
|
|
},
|
||
|
|
onReady(){
|
||
|
|
this.$refs.transactionform.setRules(this.passRules);
|
||
|
|
},
|
||
|
|
methods: {
|
||
|
|
isMobile(s) {
|
||
|
|
return /^1[0-9]{10}$/.test(s)
|
||
|
|
},
|
||
|
|
codeChange(text) {
|
||
|
|
this.codeText = text;
|
||
|
|
},
|
||
|
|
// 获取验证码
|
||
|
|
getCode() {
|
||
|
|
if(!this.transactionform.newpassword){
|
||
|
|
uni.showToast({ title: '请输入密码', icon: 'none', duration: 1000 });
|
||
|
|
}else{
|
||
|
|
if(this.$refs.uCode.canGetCode) {
|
||
|
|
let phone = this.wxUserInfo.phonenumber;
|
||
|
|
if (!phone || !this.isMobile(phone)) {
|
||
|
|
uni.showToast({ title: '手机格式不对', icon: 'none', duration: 1000 });
|
||
|
|
return;
|
||
|
|
}
|
||
|
|
|
||
|
|
// 获取登录验证码的接口
|
||
|
|
this.http.quickGet('/captchaUserLogin?phoneNumber=' + phone).then((res)=> {
|
||
|
|
console.log('获取注册验证码',res);
|
||
|
|
if(res.data.code==200){
|
||
|
|
this.transactionform.uuid=res.data.uuid;
|
||
|
|
uni.showToast({title: '发送成功', icon: 'none', duration:1000 });
|
||
|
|
setTimeout(() => {
|
||
|
|
uni.hideLoading();
|
||
|
|
// 通知验证码组件内部开始倒计时
|
||
|
|
this.$refs.uCode.start();
|
||
|
|
}, 1000);
|
||
|
|
}else{
|
||
|
|
uni.showToast({title:res.data.msg, icon: 'none', duration:1000 });
|
||
|
|
}
|
||
|
|
}).catch((err) => {
|
||
|
|
console.log('err',err);
|
||
|
|
});
|
||
|
|
|
||
|
|
|
||
|
|
}else {
|
||
|
|
this.$u.toast('倒计时结束后再发送');
|
||
|
|
}
|
||
|
|
}
|
||
|
|
},
|
||
|
|
submit(){
|
||
|
|
this.$refs.transactionform.validate(valid => {
|
||
|
|
if (valid) {
|
||
|
|
if(!this.transactionform.code){
|
||
|
|
uni.showToast({ title: '请输入验证码', icon: 'none', duration:1000 });
|
||
|
|
}else{
|
||
|
|
let data={
|
||
|
|
// password:this.transactionform.password,
|
||
|
|
password: encrypt(this.transactionform.password),
|
||
|
|
code:this.transactionform.code,
|
||
|
|
uuid:this.transactionform.uuid,
|
||
|
|
}
|
||
|
|
console.log('交易密码',data)
|
||
|
|
// return;
|
||
|
|
this.http.quickPost(`/mpay/setpasswd/${this.wxUserInfo.userId}`,data,true).then(res=>{
|
||
|
|
console.log('设置密码成功',res.data)
|
||
|
|
if(res.data.code==200){
|
||
|
|
this.$refs.uToast.show({
|
||
|
|
title: '设置成功',
|
||
|
|
type: 'success',
|
||
|
|
isTab:true,
|
||
|
|
url:'pages/personal/personal'
|
||
|
|
})
|
||
|
|
}else{
|
||
|
|
uni.showToast({ title: '验证码无效', icon: 'none', duration:1000 });
|
||
|
|
}
|
||
|
|
})
|
||
|
|
}
|
||
|
|
}
|
||
|
|
})
|
||
|
|
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
</script>
|
||
|
|
|
||
|
|
<style>
|
||
|
|
.accounmt{
|
||
|
|
background-color: #ffffff;
|
||
|
|
/* height: 96vh; */
|
||
|
|
width: 96vw;
|
||
|
|
margin: 2vh auto;
|
||
|
|
padding: 10px 15px 30px 25px;
|
||
|
|
border-radius: 5px;
|
||
|
|
}
|
||
|
|
.linex{
|
||
|
|
height:1rpx;
|
||
|
|
width:100%;
|
||
|
|
background:#EBEBEB;
|
||
|
|
margin: 20px 0;
|
||
|
|
}
|
||
|
|
.sinput{
|
||
|
|
display: flex;
|
||
|
|
align-items: center;
|
||
|
|
/* height: 50px; */
|
||
|
|
}
|
||
|
|
.sinput .u-input{
|
||
|
|
/* height:35px; */
|
||
|
|
border-bottom: 1px solid #EBEBEB!important;
|
||
|
|
}
|
||
|
|
.sinput .u-field{
|
||
|
|
height:45px;
|
||
|
|
border-bottom: 1px solid #EBEBEB!important;
|
||
|
|
margin-bottom:10px;
|
||
|
|
padding: 20rpx 28rpx 20rpx 0rpx!important;
|
||
|
|
margin-left:-5px
|
||
|
|
}
|
||
|
|
.button-g{
|
||
|
|
/* width:90vw; */
|
||
|
|
height:80rpx;
|
||
|
|
background-color:#197BEF;
|
||
|
|
border-radius:25px;
|
||
|
|
text-align: center;
|
||
|
|
line-height:80rpx;
|
||
|
|
color: #FFFFFF;
|
||
|
|
font-size:36rpx;
|
||
|
|
margin-top:15px;
|
||
|
|
}
|
||
|
|
</style>
|