292 lines
7.4 KiB
Vue
292 lines
7.4 KiB
Vue
<template>
|
|
<view class="user-payPassword">
|
|
<!-- <view class="content acea-row row-column">-->
|
|
<!-- <input class="phone-input" type="text" :value="phone" disabled/>-->
|
|
<!-- <view class="acea-row row-middle" style="flex-wrap: nowrap;">-->
|
|
<!-- <input type="text" placeholder="填写验证码" placeholder-style="color:#DADCE0;font-size:28rpx;" class="codeIput" v-model="captcha" />-->
|
|
<!-- <button-->
|
|
<!-- class="code acea-row row-middle"-->
|
|
<!-- :disabled="disabled"-->
|
|
<!-- :class="disabled === true ? 'on' : ''"-->
|
|
<!-- @click="code"-->
|
|
<!-- >{{ text }}</button>-->
|
|
<!-- </view>-->
|
|
<!-- <input type="number" maxlength="6" password placeholder="请输新6位数字支付密码" placeholder-style="color:#DADCE0;font-size:28rpx" class="payPwdInput" v-model="payPwd" @input='inputPaypwdChange' />-->
|
|
<!-- </view>-->
|
|
<!-- <view class="confirmBnt bg-color-red" @click="confirm()">保存</view>-->
|
|
|
|
<view class="input-box flex ai-center" style="margin-bottom: 32rpx">
|
|
<image class="icon-phone flex-0" :src="webUrl+'/20220925102913233030.png'"/>
|
|
<input :value="phone" disabled/>
|
|
</view>
|
|
|
|
<view class="flex jc-between ai-center">
|
|
<view class="input-box flex ai-center">
|
|
<input v-model="captcha" type="text" placeholder="请填写验证码" placeholder-style="color:#E2E2E2"/>
|
|
</view>
|
|
|
|
<button class="btn-code" :class="disabled === true ? 'on' : ''"
|
|
:disabled="disabled" @click="code">{{ text }}
|
|
</button>
|
|
</view>
|
|
|
|
<view class="input-box flex ai-center" style="margin-top: 32rpx">
|
|
<input style="width: 100%" v-model="payPwd" type="number" maxlength="6" placeholder="请重新输入6位数字支付密码" placeholder-style="color:#E2E2E2" @input="inputPaypwdChange"/>
|
|
</view>
|
|
|
|
<button class="btn-save" @click="confirm">保存</button>
|
|
</view>
|
|
|
|
</template>
|
|
|
|
<script>
|
|
import { mapGetters } from "vuex";
|
|
import sendVerifyCode from "@/mixins/SendVerifyCode";
|
|
import { required, alpha_num, chs_phone } from "@/utils/validate";
|
|
import { validatorDefaultCatch } from "@/utils/dialog";
|
|
import { getUserInfo, registerVerify, bindingPhone,modifyUserPayPwd } from "@/api/user";
|
|
import { pageListenMixins } from '@/mixins/pageListenMixins'
|
|
|
|
export default {
|
|
mixins: [pageListenMixins],
|
|
data() {
|
|
return {
|
|
webUrl: this.$VUE_APP_RESOURCES_URL,
|
|
captcha: "",
|
|
phone:'',
|
|
payPwd:'',
|
|
pageKeyId: Object.freeze('userConfigPasswordPay')
|
|
}
|
|
},
|
|
mixins: [sendVerifyCode],
|
|
watch:{
|
|
userInfo(){
|
|
this.phone = this.userInfo.phone;
|
|
}
|
|
},
|
|
computed:{
|
|
...mapGetters(["userInfo"]),
|
|
},
|
|
onLoad:function(e){
|
|
if (e.isSetMode) {
|
|
uni.setNavigationBarTitle({
|
|
title: '设置支付密码'
|
|
});
|
|
} else{
|
|
uni.setNavigationBarTitle({
|
|
title: '修改支付密码'
|
|
});
|
|
}
|
|
|
|
//获取用户信息
|
|
if (this.$store.getters.token) {
|
|
this.$store.dispatch("getUser", true);
|
|
}
|
|
},
|
|
methods: {
|
|
inputPaypwdChange:function(event){
|
|
var value = event.target.value;
|
|
var filterValue = value.replace(/\D/g,"");
|
|
//console.log('value:'+filterValue);
|
|
this.payPwd = filterValue; // 不允许输入非数字字符
|
|
},
|
|
async code() {
|
|
let that = this;
|
|
const { phone } = that;
|
|
try {
|
|
await that
|
|
.$validator({
|
|
phone: [
|
|
required(required.message("手机号码")),
|
|
chs_phone(chs_phone.message())
|
|
]
|
|
})
|
|
.validate({ phone });
|
|
} catch (e) {
|
|
return validatorDefaultCatch(e);
|
|
}
|
|
|
|
registerVerify({ phone: phone })
|
|
.then(res => {
|
|
uni.showToast({
|
|
title: res.data,
|
|
icon: "none",
|
|
duration: 2000
|
|
});
|
|
that.sendCode();
|
|
})
|
|
.catch(res => {
|
|
uni.showToast({
|
|
title: res.msg,
|
|
icon: "none",
|
|
duration: 2000
|
|
});
|
|
});
|
|
},
|
|
async confirm() {
|
|
let that = this;
|
|
const { phone, captcha, payPwd } = that;
|
|
try {
|
|
await that
|
|
.$validator({
|
|
phone: [
|
|
chs_phone(chs_phone.message("手机号码")),
|
|
alpha_num(alpha_num.message())
|
|
],
|
|
captcha: [
|
|
required(required.message("验证码")),
|
|
alpha_num(alpha_num.message("验证码"))
|
|
],
|
|
payPwd: [
|
|
required(required.message("支付密码")),
|
|
alpha_num(alpha_num.message("支付密码"))
|
|
]
|
|
})
|
|
.validate({ phone, captcha,payPwd });
|
|
} catch (e) {
|
|
return validatorDefaultCatch(e);
|
|
}
|
|
|
|
if (payPwd.length < 6) {
|
|
that.$dialog.toast({ mes: "请输入6位支付密码" })
|
|
return
|
|
}
|
|
//网络请求
|
|
uni.showLoading();
|
|
modifyUserPayPwd({
|
|
passwordPay:that.payPwd,
|
|
code:that.captcha,
|
|
phone:that.phone
|
|
}).then((res)=>{
|
|
//提示成功并返回
|
|
uni.hideLoading();
|
|
that.$dialog.toast({ mes: "保存成功" });
|
|
setTimeout(function(){
|
|
that.$yrouter.back();
|
|
},1000);
|
|
}).catch((err)=>{
|
|
uni.hideLoading();
|
|
that.$dialog.error(err.msg || "修改失败");
|
|
})
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style scoped lang="less">
|
|
.user-payPassword{
|
|
min-height: 100vh;
|
|
padding: 60rpx 32rpx;
|
|
background: #F9F9F9;
|
|
font-size: 28rpx;
|
|
line-height: 40rpx;
|
|
|
|
button {
|
|
border-radius: 8rpx;
|
|
color: #FFFFFF;
|
|
font-size: 28rpx;
|
|
font-weight: bold;
|
|
}
|
|
|
|
button:after {
|
|
display: none;
|
|
}
|
|
|
|
.input-box {
|
|
height: 100rpx;
|
|
padding: 0 36rpx;
|
|
border-radius: 8rpx;
|
|
background: #FFFFFF;
|
|
color: #999999;
|
|
|
|
.icon-phone {
|
|
width: 48rpx;
|
|
height: 48rpx;
|
|
vertical-align: middle;
|
|
margin-right: 20rpx;
|
|
}
|
|
|
|
input {
|
|
font-size: 28rpx;
|
|
line-height: 40rpx;
|
|
}
|
|
}
|
|
|
|
.btn-code {
|
|
width: 200rpx;
|
|
height: 72rpx;
|
|
margin: 0 0 0 32rpx;
|
|
background: #28AAF4;
|
|
line-height: 72rpx;
|
|
}
|
|
|
|
.btn-save {
|
|
height: 80rpx;
|
|
margin-top: 80rpx;
|
|
background: #FD574B;
|
|
line-height: 80rpx;
|
|
}
|
|
}
|
|
/*page{*/
|
|
/* background: #fff;*/
|
|
/*}*/
|
|
/*.container{*/
|
|
/* background: #fff;*/
|
|
/*}*/
|
|
/*.confirmBnt {*/
|
|
/* font-size: 32rpx;*/
|
|
/* width: 580rpx;*/
|
|
/* height: 90rpx;*/
|
|
/* border-radius: 45rpx;*/
|
|
/* color: #fff;*/
|
|
/* margin: 92rpx auto 0 auto;*/
|
|
/* text-align: center;*/
|
|
/* line-height: 90rpx;*/
|
|
/*}*/
|
|
/*.content{*/
|
|
/* margin: 114rpx;*/
|
|
/*}*/
|
|
|
|
/*.phone-input{*/
|
|
/* color: #8B8F99;*/
|
|
/* font-size: 36rpx;*/
|
|
/* height:88rpx;*/
|
|
/* background:rgba(247,247,249,1);*/
|
|
/* opacity:1;*/
|
|
/* border-radius:12rpx;*/
|
|
/* margin-bottom: 32rpx;*/
|
|
/*}*/
|
|
|
|
/*.codeIput{*/
|
|
/* font-size: 28rpx;*/
|
|
/* height:88rpx;*/
|
|
/* border:1px solid rgba(218,220,224,1);*/
|
|
/* opacity:1;*/
|
|
/* border-radius:12rpx;*/
|
|
/* flex-grow: 1;*/
|
|
/*}*/
|
|
|
|
/*.code{*/
|
|
/* !* width:224rpx; *!*/
|
|
/* height:88rpx;*/
|
|
/* background:rgba(121,129,253,1);*/
|
|
/* opacity:1;*/
|
|
/* color: #fff;*/
|
|
/* font-size: 28rpx;*/
|
|
/* border-radius:12rpxpx;*/
|
|
/* flex-shrink: 0;*/
|
|
/* margin-left: 16rpx;*/
|
|
/* text-align: center;*/
|
|
/* padding-left: 24rpx;*/
|
|
/* padding-right: 24rpx;*/
|
|
/*}*/
|
|
|
|
/*.payPwdInput{*/
|
|
/* font-size: 28rpx;*/
|
|
/* height:88rpx;*/
|
|
/* border:1px solid rgba(218,220,224,1);*/
|
|
/* opacity:1;*/
|
|
/* border-radius:12rpx;*/
|
|
/* margin-top: 32rpx;*/
|
|
/*}*/
|
|
</style> |