yicangzongtai_app_240321/pages/research/pay-password.vue

<template>
  <view>
    <navbar :config="config" backColor="#666666"></navbar>
    <view class="password-box">
      <text class="password-title">密码设置</text>
      <u-form :model="form" ref="uForm" label-width="156">
        <u-form-item label="支付密码">
          <u-input v-model.trim="form.payPass" type="number" maxlength="6" @input="changePass" placeholder="请输入6位支付密码" />
        </u-form-item>
        <u-form-item label="验证码">
          <u-input v-model="form.captcha" placeholder="本账户手机验证码" />
          <view class="get-code" @click.stop="getCode()">{{ captchaText }}</view>
        </u-form-item>
      </u-form>
      <view class="password-btn" @click.stop="setPayPassword()">
        确认提交
      </view>
    </view>
  </view>
</template>

<script>
  import {
    setUpPaymentPassword,
    getVerifyCodeByParam
  } from "@/api/personal-center.js"
  export default {
    data() {
      return {
        config: {
          back: true, //false是tolbar页面 是则不写
          title: '设置支付密码',
          color: '#1A1A1A',
          // autoBack:true,
          //背景颜色;参数一：透明度（0-1）;参数二：背景颜色（array则为线性渐变，string为单色背景）
          backgroundColor: [1, "#fff"],
          statusBarFontColor: '#1A1A1A'
        },
        mobile: '',
        captchaText: '获取验证码',
        captchaInterval: null,
        payPasswordLoading: false,
        form: {
          payPass: '',
          captcha: ''
        }
      };
    },
    onShow() {
      this.getUserInfo()
    },
    onUnload() {
      if (uni.getStorageSync('toUrl')) {
        uni.removeStorageSync('toUrl')
      }
    },
    methods: {
      changePass(e) {
        console.log(e, 111)
        if (e) {
          if (e.indexOf('.') != -1) {
            this.form.payPass = e.replace(/\./g, '')
          }
        }
      },
      //获取个人信息
      getUserInfo() {
        let personal = uni.getStorageSync('personal')
        this.mobile = personal ? personal.mobile : '';
      },
      setPayPassword() {
        if (this.payPasswordLoading) {
          return false
        };
        this.payPasswordLoading = true;
        try {
          if (!this.form.payPass) {
            uni.showToast({
              title: '请填写支付密码',
              icon: 'none'
            });
            throw new Error()
          }
          if (this.form.payPass.length < 6) {
            uni.showToast({
              title: '请填写6位支付密码',
              icon: 'none'
            });
            throw new Error()
          }
          if (!this.form.captcha) {
            uni.showToast({
              title: '请填写验证码',
              icon: 'none'
            });
            throw new Error()
          };
          this.$http.put(setUpPaymentPassword, this.form).then(res => {
            uni.showToast({
              title: '支付密码设置成功',
              icon: 'none'
            });
            this.payPasswordLoading = false;
            if (uni.getStorageSync('toUrl')) {
              this.$mUtil.removeCurrenPage()
            }
          }).catch(err => {
            this.payPasswordLoading = false;
          })
        } catch (err) {
          this.payPasswordLoading = false;
        }
      },
      getCode() {
        this.getUserInfo()
        if (!this.mobile) {
          uni.showToast({
            title: '当前账号暂未绑定手机号',
            icon: 'none'
          });
          return false
        }
        if (this.captchaText !== '获取验证码') {
          return false
        }
        this.captchaText = '获取中...'
        try {
          clearInterval(this.captchaInterval)
        } catch {}



        try {
          this.$http.post(getVerifyCodeByParam, {
            mobile: this.mobile,
            verifyCodeType: 2
          }).then(res => {
            let num = 60
            this.captchaInterval = setInterval(() => {
              this.captchaText = `${num}s`;
              num--;
              if (num < 0) {
                clearInterval(this.captchaInterval)
                this.captchaText = '获取验证码'
              }
            }, 1000)
          }).catch(err => {
            this.captchaText = '获取验证码'
          })
        } catch (err) {
          this.captchaText = '获取验证码'
        }
      },
    }
  }
</script>

<style lang="scss" scoped>
  .password-box {
    padding: 70rpx 50rpx 0;

    .password-title {
      font-size: 38rpx;
      font-family: PingFang SC, PingFang SC-Bold;
      font-weight: 700;
      color: #333333;
    }

    .u-form {
      /deep/.u-form-item--left__content__label {
        font-size: 28rpx;
        font-family: PingFang SC, PingFang SC-Regular;
        font-weight: 400;
        color: #333333;
      }
    }
  }

  .password-btn {
    width: 100%;
    height: 90rpx;
    background: #3d93fc;
    border-radius: 45rpx;
    text-align: center;
    line-height: 90rpx;
    font-size: 32rpx;
    font-family: PingFang SC, PingFang SC-Regular;
    font-weight: 400;
    color: #ffffff;
    margin-top: 98rpx;
  }

  .get-code {
    // flex-shrink: 0;
    height: 100%;
    padding: 0 30rpx;
    color: #FA6138;
    font-size: 28rpx;
    border: 1rpx solid #3775f6;
    background: #e7eefc;
    border-radius: 4rpx;
  }
</style>