feat(pay): 新增会员充值和次卡购买页面

石广澎

2025-11-30 55ee7bd313c7d8030ce8c547b18ad5f19507afd2

 pages/pay/addCardSecond.vue

New file
@@ -0,0 +1,151 @@
<template>
   <view>
      <u--form class="" labelWidth="80" :model="form" :rules="rules" ref="uForm">
         <view class="u-p-h-30">
            <u-form-item label="持卡人">
               <u--input v-model="form.acctName" readonly border="none"></u--input>
            </u-form-item>
            <u-form-item label="银行卡号">
               <u--input v-model="form.cardNo" readonly border="none"></u--input>
            </u-form-item>
            <u-form-item label="所属银行">
               <u--input v-model="form.bankName" readonly border="none"></u--input>
            </u-form-item>
         </view>

         <view class="bg-fff u-p-h-30 u-m-t-30">
            <block v-if="form.cardType=='CC'">
               <u-form-item label="有效期" borderBottom prop="validdate">
                  <u--input v-model="form.validdate" border="none" placeholder="请输入信用卡有效期">
                  </u--input>
               </u-form-item>
               <u-form-item label="安全码" borderBottom prop="cvv2">
                  <u--input v-model="form.cvv2" border="none" placeholder="请输入信用卡安全码"></u--input>
               </u-form-item>
            </block>
            <u-form-item label="身份证号" borderBottom prop="idNo">
               <u--input v-model="form.idNo" border="none" placeholder="请输入持卡人身份证号"></u--input>
            </u-form-item>
            <u-form-item label="手机号" prop="mobile">
               <u--input v-model="form.mobile" border="none" placeholder="请输入持卡人手机号"></u--input>
            </u-form-item>
         </view>

      </u--form>
      <label @click="checked=!checked" class="u-flex u-font-24 color-999 u-m-h-30 u-m-t-30">
         <radio style="transform: scale(0.7);" color="#e93b3d" @change="radioChange" :checked="checked" />我已阅读并同意
         <view @click.stop="showAgreement=true" class="" style="color: #e93b3d;">《用户协议》</view>
      </label>
      <view class="u-p-40">
         <u-button @click="doNext" :loading="loading" :disabled="loading" type="error" text="下一步"></u-button>
      </view>
      <u-popup :show="showAgreement" mode="center" :round="30">
         <card-agreement @confirm="checked=true;showAgreement=false;doNext()"></card-agreement>
      </u-popup>

   </view>
</template>

<script>
   import {
      signUpToApply,
   } from '@/common/api/index'
   export default {
      data() {
         return {
            showAgreement: false,
            checked: true,
            loading: false,
            form: {
               acctName: '',
               cardNo: '',
               bankName: '',
               cardType: 'DC',
               validdate: '',
               cvv2: '',
               idNo: '',
               mobile: ''
            },
            rules: {
               validdate: [{
                  required: true,
                  message: '有效期不能为空',
                  trigger: 'blur'
               }],
               cvv2: [{
                  required: true,
                  message: '安全码不能为空',
                  trigger: 'blur'
               }],
               idNo: [{
                  required: true,
                  message: '身份证号不能为空',
                  trigger: 'blur'
               }, {
                  // 自定义验证函数，见上说明
                  validator: (rule, value, callback) => {
                     // 上面有说，返回true表示校验通过，返回false表示不通过
                     // uni.$u.test.mobile()就是返回true或者false的
                     return uni.$u.test.idCard(value);
                  },
                  message: '身份证号不正确',
                  trigger: 'change'
               }],
               mobile: [{
                  required: true,
                  message: '手机号不能为空',
                  trigger: 'blur'
               }, {
                  // 自定义验证函数，见上说明
                  validator: (rule, value, callback) => {
                     // 上面有说，返回true表示校验通过，返回false表示不通过
                     // uni.$u.test.mobile()就是返回true或者false的
                     return uni.$u.test.mobile(value);
                  },
                  message: '手机号不正确',
                  trigger: 'change'
               }],
            }
         };
      },
      onLoad(opt) {
         opt.acctName = decodeURIComponent(opt.acctName || '')
         opt.bankName = decodeURIComponent(opt.bankName || '')
         this.form = opt
      },
      onReady() {
         //如果需要兼容微信小程序，并且校验规则中含有方法等，只能通过setRules方法设置规则。
         this.$refs.uForm.setRules(this.rules)
      },
      methods: {
         doNext() {
            this.$refs.uForm.validate().then(res => {
               if (!this.checked) {
                  this.showAgreement = true
                  return
               }
               this.loading = true
               const param = uni.$u.deepClone(this.form);
               delete param.bankName
               delete param.cardType
               signUpToApply(param).then(res => {
                  const params = uni.$u.deepClone(this.form);
                  params.thpinfo = res
                  uni.$u.route({
                     url: '/pages/pay/addCardCode',
                     params: params
                  })
               }).catch(() => {
                  this.loading = false
               })
            }).catch(errors => {

            })
         }
      }
   }
</script>

<style lang="scss" scoped>

</style>