web-zk-h5/pages/mine/bindBank/bindBank.vue

<template>
  <view class="content">
    <view class="theform">
      <u--form
        labelPosition="left"
        :model="dataForm"
        :rules="rules"
        ref="uForm"
      >
        <u-form-item
          borderBottom
          required
          label-width="200rpx"
          :label="'银行名称'"
          prop="bankName"
          @click="showAmount = true"
          ref="item1"
        >
          <u--input
            v-model="dataForm.bankName"
            disabledColor="#ffffff"
            :placeholder="'请选择'"
            border="none"
          ></u--input>
          <u-icon slot="right" name="arrow-right"></u-icon>
        </u-form-item>

        <u-form-item
          label-width="200rpx"
          :label="'开户支行'"
          required
          prop="subBankName"
          borderBottom
          ref="item1"
        >
          <u--input
            v-model="dataForm.subBankName"
            disabledColor="#F5F5F5;"
            border="none"
          ></u--input>
        </u-form-item>
        <u-form-item
          label-width="200rpx"
          :label="'银行卡号'"
          required
          borderBottom
          prop="cardNumber"
          ref="item1"
        >
          <u--input
            v-model="dataForm.cardNumber"
            disabledColor="#F5F5F5;"
            border="none"
          ></u--input>
        </u-form-item>
        <u-form-item
          label-width="200rpx"
          label="开户姓名"
          required
          prop="accountName"
          borderBottom
          ref="item1"
        >
          <u--input
            :placeholder="'请输入'"
            v-model="dataForm.accountName"
            border="none"
          ></u--input>
        </u-form-item>
        <u-form-item
          label-width="200rpx"
          :label="'证件号码'"
          required
          prop="idCard"
          borderBottom
          ref="item1"
        >
          <u--input
            v-model="dataForm.idCard"
            :placeholder="'请输入'"
            disabledColor="#F5F5F5;"
            border="none"
          ></u--input>
        </u-form-item>
        <u-form-item
          label-width="200rpx"
          :label="'联系方式'"
          prop="phone"
          required
          borderBottom
          ref="item1"
        >
          <u--input
            v-model="dataForm.phone"
            :placeholder="'请输入'"
            maxlength="20"
            border="none"
          ></u--input>
        </u-form-item>
        <u-form-item
          v-if="userInfo.pkCountry == 1 && cancode"
          label-width="200rpx"
          :label="'验证码'"
          required
          prop="verificationCode"
          borderBottom
          ref="item1"
        >
          <u--input
            v-model="dataForm.verificationCode"
            :placeholder="'请输入'"
            border="none"
          ></u--input>
          <u-button
            @tap="getCode"
            class="getcodes"
            type="primary"
            shape="circle"
            :text="tips"
            color="#2FBC42"
          ></u-button>
        </u-form-item>

        <u-code
          :seconds="seconds"
          @end="end"
          @start="start"
          ref="uCode"
          @change="codeChange"
        ></u-code>
        <u-picker
          @cancel="showAmount = false"
          :show="showAmount"
          ref="uPicker"
          :columns="bankCardChioceList"
          @confirm="confirm"
          keyName="bankName"
        ></u-picker>
      </u--form>
    </view>
    <view class="tip-wrapper">
      <view class="tip-content">
        <view class="tip-text"
          >银行卡号、真实姓名、证件号码、联系方式，请与银行预留信息保持一致</view
        >
      </view>
    </view>
    <view class="btnbox">
      <u-button class="subbtn" @click="submit">{{ '确定' }}</u-button>
    </view>
    <u-toast ref="uToast"></u-toast>
  </view>
</template>

<script>
import * as ban from '@/config/balance.js'
export default {
  data() {
    return {
      showAmount: false,
      dataForm: {
        bankName: '',
        cardNumber: '',
        pkBank: '',
        subBankName: '',
        accountName: '',
        idCard: '',
      },
      bankCardChioceList: [],
      rules: {
        cardNumber: [
          {
            type: 'string',
            required: true,
            message: '请输入',
            trigger: ['blur', 'change'],
          },
        ],
        subBankName: [
          {
            type: 'string',
            required: true,
            message: '请输入',
            trigger: ['blur', 'change'],
          },
        ],
        accountName: [
          {
            type: 'string',
            required: true,
            message: '请输入',
            trigger: ['blur', 'change'],
          },
        ],
        idCard: [
          {
            type: 'string',
            required: true,
            message: '请输入',
            trigger: ['blur', 'change'],
          },
        ],
        phone: [
          {
            type: 'string',
            required: true,
            message: '请输入',
            trigger: ['blur', 'change'],
          },
        ],
        verificationCode: [
          {
            type: 'string',
            required: true,
            message: '请输入',
            trigger: ['blur', 'change'],
          },
        ],
        bankName: [
          {
            required: true,
            message: '请选择',
            trigger: ['change'],
          },
        ],
      },
      tips: '',
      // refCode: null,
      seconds: 60,
      ifpass: false,
      userInfo: {},
      cancode: true, //判断是否是白名单
    }
  },
  onLoad() {
    this.userInfo = uni.getStorageSync('User')
    this.getList()
  },
  methods: {
    codeChange(text) {
      this.tips = text
    },
    getCode() {
      if (this.dataForm.phone && this.$u.test.mobile(this.dataForm.phone)) {
        if (this.$refs.uCode.canGetCode) {
          // 模拟向后端请求验证码
          uni.showLoading({
            title: '正在获取验证码',
          })
          ban
            .getVerification({
              phone: this.dataForm.phone,
            })
            .then(res => {
              uni.hideLoading()
              // 这里此提示会被this.start()方法中的提示覆盖
              uni.$u.toast('验证码已发送')
              // 通知验证码组件内部开始倒计时
              this.$refs.uCode.start()
            })
        } else {
          uni.$u.toast('倒计时结束后再发送')
        }
      } else {
        uni.$u.toast(
          this.dataForm.phone ? '手机号格式不正确' : '请先输入手机号'
        )
        return
      }
    },
    end() {
      // uni.$u.toast('倒计时结束');
    },
    start() {
      // uni.$u.toast('倒计时开始');
    },
    getList() {
      ban.getBankCardChoiceList().then(res => {
        this.bankCardChioceList = [res.data]
      })
    },
    bindBank() {
      if (!this.ifpass && this.cancode && this.userInfo.pkCountry == 1) {
        uni.$u.toast('验证码错误')
        return
      }
      ban.bindWalletBankAdd(this.dataForm).then(res => {
        if (res.code == 200) {
          uni.$u.toast(res.msg)
          setTimeout(() => {
            uni.navigateBack()
          }, 1000)
        }
      })
    },
    submit() {
      this.$refs.uForm
        .validate()
        .then(res => {
          // 没有三方接口 临机写死
          this.ifpass = true

          if (this.userInfo.pkCountry == 1) {
            if (this.cancode) {
              ban
                .verifyBankCard(this.dataForm)
                .then(res => {
                  if (res.code == 200) {
                    this.ifpass = true
                    this.bindBank()
                  } else {
                    this.ifpass = false
                    uni.$u.toast(res.msg)
                  }
                })
                .catch(err => {
                  this.ifpass = false
                })
            } else {
              this.ifpass = true
              this.bindBank()
            }
          } else {
            this.bindBank()
          }
        })
        .catch(errors => {
          uni.$u.toast('校验失败')
          return false
        })
    },
    confirm(e) {
      this.dataForm.bankName = e.value[0].bankName
      this.dataForm.pkBank = e.value[0].pkId
      this.showAmount = false
    },
  },
}
</script>

<style lang="scss" scoped>
.content {
  background: #f2f2f2;

  .theform {
    margin-top: 6rpx;
    background: #ffffff;
    padding: 20rpx 23rpx 0rpx 23rpx;

    .contentye {
      font-size: 28rpx;
      margin-left: 200rpx;
      font-family: Source Han Sans CN;
      font-weight: 400;
    }
  }

  .btnbox {
    margin-top: 38rpx;
    padding: 0 20rpx;

    .subbtn {
      background: #005bac;
      border-radius: 46rpx;
      font-size: 30rpx;
      font-family: Source Han Sans CN;
      font-weight: 400;
      color: #ffffff;
    }
  }

  .getcodes {
    width: 197rpx;
    height: 76rpx;
    background: #2fbc42;
    border-radius: 38rpx;
    color: #fff;
  }

  .tip-wrapper {
    margin: 20rpx 20rpx 0 20rpx;

    .tip-content {
      display: flex;
      align-items: flex-start;
      background: linear-gradient(135deg, #fff3e0 0%, #fff8f0 100%);
      border: 2rpx solid #ffb74d;
      border-radius: 16rpx;
      padding: 20rpx 24rpx;
      box-shadow: 0 4rpx 12rpx rgba(255, 183, 77, 0.1);

      .tip-icon {
        color: #ff9800;
        font-size: 28rpx;
        font-weight: bold;
        margin-right: 16rpx;
        margin-top: 2rpx;
        flex-shrink: 0;
      }

      .tip-text {
        flex: 1;
        font-size: 24rpx;
        line-height: 36rpx;
        color: #e65100;
        font-weight: 500;
        letter-spacing: 0.5rpx;
      }
    }
  }
}
</style>