xdd-uniapp-new/pages/user/ModifyPayPassword/ModifyPayPassword.vue

<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>