jiqu-library-miniprogram/src/pageA/reset_password/reset_security.vue

<template>
  <view class="">
     <nav-shadow></nav-shadow>
    <view class="px-45rpx pt-20rpx">
      <cu-form :model="form" ref="uForm" :error-type="['toast']">
        <u-form-item prop="phone" class="mt-20rpx">
          <view class="flex items-center">
            <view class="w-60rpx flex items-center">
              <image class="w-48rpx h-48rpx" src="/static/images/user/phone-icon.png" mode="scaleToFill" />
            </view>
            <u-input type="number" disabled :clearable="false" v-model="user.phone" class="w-full" placeholder="手机号" />
          </view>
        </u-form-item>

        <u-form-item prop="verify_code" class="mt-20rpx">
          <view class="flex items-center w-full">
            <image class="w-48rpx h-48rpx" src="/static/images/user/code-icon.png" />
            <sms-input class="w-full" ref="smsRef" v-model="form.verify_code" :maxLength="6" @run="getCode"></sms-input>
          </view>
        </u-form-item>
        <u-form-item prop="password" class="mt-20rpx">
          <view class="flex items-center w-full">
            <view class="w-60rpx flex items-center">
              <image class="w-48rpx h-48rpx" src="/static/images/user/pwd-icon.png" mode="scaleToFill" />
            </view>
            <!--  -->
            <!-- 还未输入安全密码时 -->
            <view v-if="!form.password" @tap="popupShow=!popupShow" class="flex-1 text-md text-hex-c0c4cc" > 请输入安全密码</view>
            <!-- 输入安全密码时 -->
            <view v-else @tap="popupShow=!popupShow" class="flex-1 text-md">
               <text v-for="(item,index) in form.password" :key="index">{{!eyeShow?'●':item}}</text>
             </view>
            <!--  -->
          <!-- <u-input disabled :password-icon="false" @tap="popupShow=!popupShow" :type="!eyeShow?'password':'text'"
              :clearable="false" v-model="form.password" class="w-full" placeholder="请输入安全密码" /> -->
            <view @tap="eyeShow=!eyeShow">
              <u-icon size="32" color="#c0c4cc" :name="eyeShow?'eye':'eye-fill'"></u-icon>
            </view>
          </view>
        </u-form-item>
      </cu-form>
      <view class="mt-110rpx">
        <view @tap="onSubmit"
          class="login-btn">
          确认
        </view>
      </view>
    </view>
    <!-- 打开键盘 -->
    <u-keyboard @change="onChange" @backspace="backspace" :mask="false" :show-tips="false" :dot-enabled="false"
      ref="uKeyboard" mode="number" v-model="popupShow"></u-keyboard>
  </view>
</template>
<script>
  export default {
    data() {
      return {
        eyeShow: false,
        popupShow: false,
        form: {
          password: '',
          verify_code: ''
        },
        rules: {
          password: [{
            required: true,
            message: '请输入安全密码',
            trigger: 'change',
          },
           {
             validator: (rule, value, callback) => {
               return this.$u.test.rangeLength(value, [6, 6])
             },
             message: '安全密码长度为6位数',
             trigger: 'change',
           },
           ],
          verify_code: [{
            required: true,
            message: '请输入验证码',
            trigger: 'change',
          }, ],
        },
      };
    },
    onReady() {
      this.$refs.uForm.setRules(this.rules);
    },
    computed: {
      user() {
        return this.$store.getters.user ?? {};
      },
    },
    methods: {
      //发送短信验证码
      async getCode() {
        await this.$api.post(
          '/v1/sms-codes', {
            phone: this.user.phone,
            type: '3',
          }, {
            custom: {
              loading: true,
            },
          },
        );
        this.$refs.smsRef.start();
      },
      // 按键被点击(点击退格键不会触发此事件)
      onChange(e) {
        this.form.password += e
        if (this.$u.test.code(this.form.password, 6)) {
          this.popupShow = false
        }
      },
      // 退格键被点击
      backspace() {
        if (this.form.password.length) this.form.password = this.form.password.substr(0, this.form.password.length - 1);
      },
      onSubmit() {
        this.$refs.uForm.validate(async (valid) => {
          if (valid) {
            try {
              uni.showLoading({
                title: '保存中',
                mask: true
              });
              let obj={
                verify_code:this.form.verify_code,
                password:this.form.password
              }
             let resDate = await this.$api.put('/v1/wallet-password', obj) 
              setTimeout(() => {
                uni.hideLoading()
                this.$u.toast('修改成功');
                setTimeout(() => {
                  uni.navigateBack({})
                }, 300)
              }, 300)
               this.$store.dispatch('user/getUserInfo');
      
            } catch (err) {
              uni.hideLoading()
            }
          }
        });
      },
    }
  };
</script>
<style>
  page {
    background: #fff;
  }
</style>