web-retail-h5/pages/pay/bindBank.vue

<!--
 * @Descripttion:
 * @version:
 * @Author: kBank
 * @Date: 2022-11-21 15:11:22
-->
<template>
  <view class="content">
    <view class="index_header"> </view>
    <view class="contxt">
      <view class="kuang">
        <u-form :model="form" labelWidth="auto" :rules="rules" ref="uForm">
          <u-form-item :label="'银行卡号'" required prop="bankNo">
            <u-input v-model="form.bankNo" :placeholder="'请输入银行卡卡号'" />
          </u-form-item>
          <u-form-item :label="'姓名'" required prop="name">
            <u-input v-model="form.name" :placeholder="'请输入姓名'" />
          </u-form-item>
          <u-form-item :label="'身份证'" required prop="idCard">
            <u-input v-model="form.idCard" :placeholder="'请输入身份证号码'" />
          </u-form-item>
          <u-form-item :label="'手机号'" required prop="phone">
            <u-input
              v-model="form.phone"
              maxlength="20"
              type="number"
              :placeholder="'请输入银行预留手机号'"
            />
          </u-form-item>
          <u-form-item label="有效期">
            <u-input v-model="form.validdate" :placeholder="'请输入'" />
          </u-form-item>
          <u-form-item label="安全码">
            <u-input v-model="form.cvv2" :placeholder="'请输入'" />
          </u-form-item>
          <u-form-item :label="'验证码'" required prop="smsCode">
            <u-input v-model="form.smsCode" :placeholder="'请输入验证码'">
              <template slot="suffix">
                <view class="getCode" @tap="submitForm">{{ getCode }}</view>
              </template>
            </u-input>
          </u-form-item>
        </u-form>
        <div class="tips" v-if="bank == 'hf'">
          <p>1、目前汇付支付支持绑定信用卡、储蓄卡</p>
          <p>2、当绑定信用卡时，“安全码”、“有效期”两栏为必填项</p>
          <p>3、安全码为信用卡背面签名栏后3位数字；</p>
          <p>4、信用卡有效期格式不加/，例信用卡有效期10/24，请输入：1024</p>
        </div>
        <u-button
          type="success"
          class="uBtn"
          shape="circle"
          color="linear-gradient(to right, #005BAC, #005BAC )"
          :loading="isLoading"
          :loadingText="'绑定中'"
          @click="toBind"
          >{{ '立即绑定' }}</u-button
        >
      </view>
    </view>
  </view>
</template>

<script>
import * as pay from '@/config/pay.js'
export default {
  data() {
    return {
      form: {
        bankNo: '',
      },
      isLoading: false,
      getCode: '获取验证码',
      isSend: false,
      beginTime: 60,
      bankCode: '',
      timer: '',
      bank: '',
      rules: {
        bankNo: [
          {
            required: true,
            message: '请输入银行卡卡号',
            trigger: ['change', 'blur'],
          },
        ],
        idCard: [
          {
            required: true,
            message: '请输入身份证号码',
            trigger: ['change', 'blur'],
          },
        ],
        phone: [
          {
            required: true,
            message: '请输入手机号',
            trigger: ['blur'],
          },
          {
            validator: (rule, value, callback) => {
              return this.$u.test.mobile(value)
            },
            message: '手机号格式不正确',
            trigger: ['blur'],
          },
        ],
        name: [
          {
            required: true,
            message: '请输入姓名',
            trigger: ['change', 'blur'],
          },
        ],
      },
    }
  },
  onLoad(options) {
    this.bank = options.bank
    // this.getInfo()
  },
  onShow() {},
  methods: {
    toBind() {
      if (!this.bankCode) {
        uni.showToast({
          title: '请输入验证码',
          icon: 'none',
          duration: 1500,
        })
        return
      }
      let url = ''
      if (this.bank == 'tl') {
        url = pay.bindTlConfirm
      } else if (this.bank == 'jd') {
        url = pay.bindJdConfirm
      } else if (this.bank == 'hf') {
        url = pay.bindHfConfirm
      }
      url({
        bindCode: this.bankCode,
        smsCode: this.form.smsCode,
      }).then(res => {
        if (res.code == 200) {
          uni.showToast({
            title: '绑卡成功',
            icon: 'none',
            duration: 1500,
          })
          setTimeout(() => {
            uni.navigateBack()
          }, 1500)
        }
      })
    },
    areBothValuesSet(val1, val2) {
      return (
        ((val1 === null || val1 === undefined || val1 === '') &&
          (val2 === null || val2 === undefined || val2 === '')) ||
        (val1 !== null &&
          val1 !== undefined &&
          val1 !== '' &&
          val2 !== null &&
          val2 !== undefined &&
          val2 !== '')
      )
    },
    // 绑卡获取验证码
    submitForm() {
      this.$refs.uForm.validate().then(res => {
        if (!this.areBothValuesSet(this.form.validdate, this.form.cvv2)) {
          uni.showToast({
            title: '请输入安全码及有效期',
            icon: 'none',
            duration: 1500,
          })
          return
        }
        for (let key in this.form) {
          if (this.form[key] == '') {
            delete this.form[key]
          }
        }
        this.startTime()
        let url = ''
        if (this.bank == 'tl') {
          url = pay.bindTl
        } else if (this.bank == 'jd') {
          url = pay.bindJd
        } else if (this.bank == 'hf') {
          url = pay.bindHf
        }
        url(this.form).then(res => {
          if (res.code == 200) {
            this.bankCode = res.data
          } else {
            this.beginTime = 0
          }
        })
      })
    },
    // 倒计时
    startTime() {
      if (this.isSend) return
      this.isSend = true
      this.getCode = this.beginTime + ' s'
      let that = this
      this.timer = setInterval(() => {
        this.beginTime--
        this.getCode = this.beginTime + ' s'
        if (this.beginTime < 0) {
          clearInterval(this.timer)
          this.getCode = '获取验证码'
          this.beginTime = 60
          this.isSend = false
        }
      }, 1000)
    },
  },
}
</script>

<style lang="scss" scoped>
.content {
  background: #f9f9f9;
}
.index_header {
  background: #f9f9f9;
  height: 330rpx;
}
.contxt {
  margin-top: -320rpx;
  padding: 0 26rpx;
}
.kuang {
  // margin-top: 20rpx;
  padding: 20rpx;
  height: 90vh;
  background: #fff;
  box-shadow: 0px 2px 10px 0px rgba(204, 204, 204, 0.5);
  border-radius: 10px 10px 10px 10px;
}
.getCode {
  font-size: 10px;
  font-family:
    PingFang SC-Regular,
    PingFang SC;
  font-weight: 400;
  color: #18acff;
}
::v-deep .u-form-item__body__left {
  margin-left: 20rpx;
}
::v-deep .u-form-item__body__right__message {
  margin-left: 80px !important;
}
.uBtn {
  margin-top: 120rpx;
}
.tips {
  font-size: 12px;
  p {
    // line-height: 10px;
  }
  color: #d5251d;
}
</style>