fix(pay): 更新支付页面文案及逻辑

石广澎

2025-11-30 18b45638fe3aac07e65aeb5b1da337d4e4bdc87c

 pages/pay/addCardCode.vue

New file
@@ -0,0 +1,141 @@
<template>
   <view>
      <view class="u-p-30 color-666">已发送至手机号{{form.mobile|mobile_asterisk}}</view>
      <u--form class="bg-fff u-p-h-30" labelWidth="80" :model="form" :rules="rules" ref="uForm">
         <u-form-item label="验证码" prop="code">
            <u--input v-model="form.code" border="none" placeholder="请输入手机验证码"></u--input>
            <u-button slot="right" @click="getCode" type="error" size="mini" plain :text="tips"></u-button>
         </u-form-item>
      </u--form>
      <view class="u-p-40">
         <u-button @click="doBind" :loading="loading" :disabled="loading" type="error" text="确认绑卡"></u-button>
      </view>
      <u-toast ref="uToast"></u-toast>
      <u-code :seconds="seconds" ref="uCode" @change="codeChange"></u-code>
   </view>
</template>

<script>
   import {
      signUpToApply,
      bindCard
   } from '@/common/api/index'
   const bankName = require("@/common/bankName.js");
   export default {
      data() {
         return {
            tips: '',
            seconds: 60,
            loading: false,
            form: {
               acctName: '',
               cardNo: '',
               bankName: '',
               cardType: 'DC',
               validdate: '',
               cvv2: '',
               idNo: '',
               mobile: '18737516907',
               thpinfo: '',
               code: ''
            },
            rules: {
               code: [{
                  required: true,
                  message: '验证码不能为空',
                  trigger: 'blur'
               }, {
                  // 自定义验证函数，见上说明
                  validator: (rule, value, callback) => {
                     // 上面有说，返回true表示校验通过，返回false表示不通过
                     // uni.$u.test.mobile()就是返回true或者false的
                     return uni.$u.test.code(value, 6);
                  },
                  message: '验证码格式不正确',
                  trigger: 'change'
               }]
            }
         };
      },
      filters: {
         mobile_asterisk(mobile) {
            if (uni.$u.test.isEmpty(mobile)) {
               return ''
            }
            return mobile.substr(0, 4) +
               "****" + mobile.substr(8, 3);
         }
      },
      onLoad(opt) {
         opt.acctName = decodeURIComponent(opt.acctName || '')
         opt.bankName = decodeURIComponent(opt.bankName || '')
         this.form = opt
      },
      onReady() {
         //如果需要兼容微信小程序，并且校验规则中含有方法等，只能通过setRules方法设置规则。
         this.$refs.uForm.setRules(this.rules)
         this.$refs.uCode.start();
      },
      methods: {
         codeChange(text) {
            this.tips = text;
         },
         getCode() {
            if (this.$refs.uCode.canGetCode) {
               // 模拟向后端请求验证码
               uni.showLoading({
                  title: '正在获取验证码'
               })
               const params = uni.$u.deepClone(this.form);
               delete params.thpinfo
               delete params.code
               delete params.bankName
               delete params.cardType
               signUpToApply(params).then(res => {
                  this.form.thpinfo = res
                  uni.hideLoading();
                  uni.$u.toast('验证码已发送');
                  // 通知验证码组件内部开始倒计时
                  this.$refs.uCode.start();
               }).catch(() => {
                  uni.$u.toast('验证码发送失败');
                  uni.hideLoading();
               })
            } else {
               uni.$u.toast('倒计时结束后再发送');
            }
         },
         doBind() {
            this.$refs.uForm.validate().then(res => {
               this.loading = true
               const params = uni.$u.deepClone(this.form);
               delete params.bankName
               delete params.cardType
               bindCard(params).then(res => {
                  this.loading = false
                  this.$refs.uToast.show({
                     type: 'success',
                     title: '成功',
                     message: "绑卡成功",
                     iconUrl: 'https://cdn.uviewui.com/uview/demo/toast/success.png',
                     complete: () => {
                        uni.navigateBack({
                           delta: 3
                        })
                     }
                  })

               }).catch(() => {
                  this.loading = false
               })
            }).catch(errors => {

            })
         }
      }
   }
</script>

<style lang="scss">

</style>