Refactor:分包
This commit is contained in:
lifizer
@@ -0,0 +1,217 @@
|
||||
<template>
|
||||
<view class="container">
|
||||
|
||||
<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>
|
||||
|
||||
</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";
|
||||
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
captcha: "",
|
||||
phone:'',
|
||||
payPwd:''
|
||||
|
||||
}
|
||||
},
|
||||
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);
|
||||
}
|
||||
|
||||
//网络请求
|
||||
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>
|
||||
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>
|
||||
Reference in New Issue
Block a user