Init project
This commit is contained in:
lifizer
@@ -0,0 +1,285 @@
|
||||
<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";
|
||||
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
webUrl: this.$VUE_APP_RESOURCES_URL,
|
||||
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 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>
|
||||
Reference in New Issue
Block a user