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

石广澎

2025-11-30 55ee7bd313c7d8030ce8c547b18ad5f19507afd2

 pages/pay/addCardFirst.vue

New file
@@ -0,0 +1,113 @@
<template>
   <view>
      <view class="u-p-30 color-666">请绑定持卡人本人的银行卡</view>
      <u--form class="bg-fff u-p-h-30" labelWidth="80" :model="form" :rules="rules" ref="uForm">
         <u-form-item label="持卡人" prop="acctName" borderBottom>
            <u--input v-model="form.acctName" border="none" placeholder="请输入持卡人姓名"></u--input>
         </u-form-item>
         <u-form-item label="卡号" prop="cardNo">
            <u--input v-model="form.cardNo" border="none" placeholder="请输入卡号"></u--input>
         </u-form-item>
      </u--form>
      <view class="u-p-40">
         <u-button @click="doNext" :loading="loading" :disabled="loading" type="error" text="下一步"></u-button>
      </view>

   </view>
</template>

<script>
   import {
      isContain,
   } from '@/common/api/index'
   const bankName = require("@/common/bankName.js");
   export default {
      data() {
         return {
            loading: false,
            form: {
               acctName: '',
               cardNo: ''
            },
            rules: {
               acctName: [{
                  required: true,
                  message: '持卡人姓名不能为空',
                  trigger: 'blur'
               }, {
                  // 自定义验证函数，见上说明
                  validator: (rule, value, callback) => {
                     // 上面有说，返回true表示校验通过，返回false表示不通过
                     // uni.$u.test.mobile()就是返回true或者false的
                     return uni.$u.test.rangeLength(value, [2, 6]) && uni.$u.test.chinese(value);
                  },
                  message: '持卡人姓名不正确',
                  trigger: 'change'
               }],
               cardNo: [{
                  required: true,
                  message: '卡号不能为空',
                  trigger: 'blur'
               }, {
                  // 自定义验证函数，见上说明
                  validator: (rule, value, callback) => {
                     // 上面有说，返回true表示校验通过，返回false表示不通过
                     // uni.$u.test.mobile()就是返回true或者false的
                     return this.$utils.verifyBankCard(value);
                  },
                  message: '卡号不正确',
                  trigger: 'change'
               }]
            }
         };
      },
      onReady() {
         //如果需要兼容微信小程序，并且校验规则中含有方法等，只能通过setRules方法设置规则。
         this.$refs.uForm.setRules(this.rules)
      },
      methods: {
         doNext() {
            this.$refs.uForm.validate().then(res => {
               this.loading = true
               isContain({
                  cardNum: this.form.cardNo
               }).then(res => {
                  uni.request({
                     url: 'https://ccdcapi.alipay.com/validateAndCacheCardInfo.json?_input_charset=utf-8&cardBinCheck=true&cardNo=' +
                        this.form.cardNo,
                     method: "GET",
                     complete: (res) => {
                        this.loading = false
                        if (res.statusCode == 200) {
                           if (res.data.validated) {
                              const bank = bankName.bankName[res.data.bank]
                              const params = uni.$u.deepClone(this.form);
                              params.cardType = res.data.cardType
                              params.bankName = bank
                              uni.$u.route({
                                 url: '/pages/pay/addCardSecond',
                                 params: params
                              })
                           } else {
                              uni.$u.toast("卡号不正确！");
                           }
                        } else {
                           uni.$u.toast("卡类型获取失败！");
                        }
                     }
                  })
               }).catch(() => {
                  this.loading = false
               })

            }).catch(errors => {

            })
         }
      }
   }
</script>

<style lang="scss">

</style>