xdd-uniapp-new/pkg_user/views/payPassword.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";

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>