web-store-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="$t('MY_WAL_24')"
                       required
                       prop="bankNo">
            <u-input v-model="form.bankNo"
                     :placeholder="$t('w_0188')" />
          </u-form-item>
          <u-form-item :label="$t('PER_DA_14')"
                       required
                       prop="name">
            <u-input v-model="form.name"
                     :placeholder="$t('w_0300')" />
          </u-form-item>
          <u-form-item :label="$t('ENU_I_T_1')"
                       required
                       prop="idCard">
            <u-input v-model="form.idCard"
                     :placeholder="$t('w_0190')" />
          </u-form-item>
          <u-form-item :label="$t('w_0180')"
                       required
                       prop="phone">
            <u-input v-model="form.phone"
                     maxlength="20"
                     type="number"
                     :placeholder="$t('w_0341')" />
          </u-form-item>
          <u-form-item label="有效期">
            <u-input v-model="form.validdate"
                     :placeholder="$t('S_C_70')" />
          </u-form-item>
          <u-form-item label="安全码">
            <u-input v-model="form.cvv2"
                     :placeholder="$t('S_C_70')" />
          </u-form-item>
          <u-form-item :label="$t('w_0043')"
                       required
                       prop="smsCode">
            <u-input v-model="form.smsCode"
                     :placeholder="$t('w_0057')">
              <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, #fb3024, #fb3024 )"
                  :loading="isLoading"
                  :loadingText="$t('w_0342')"
                  @click="toBind">{{ $t('w_0343') }}</u-button>
      </view>
    </view>
  </view>
</template>

<script>
import * as pay from '@/config/pay.js'
export default {
  data() {
    return {
      form: {
        bankNo: '',
      },
      isLoading: false,
      getCode: this.$t('w_0055'),
      isSend: false,
      beginTime: 60,
      bankCode: '',
      timer: '',
      bank: '',
      rules: {
        bankNo: [
          {
            required: true,
            message: this.$t('w_0188'),
            trigger: ['change', 'blur'],
          },
        ],
        idCard: [
          {
            required: true,
            message: this.$t('w_0190'),
            trigger: ['change', 'blur'],
          },
        ],
        phone: [
          {
            required: true,
            message: this.$t('w_0053'),
            trigger: ['change', 'blur'],
          },
        ],
        name: [
          {
            required: true,
            message: this.$t('w_0300'),
            trigger: ['change', 'blur'],
          },
        ],
      },
    }
  },
  onLoad(options) {
    this.bank = options.bank
    // this.getInfo()
  },
  onShow() {},
  methods: {
    toBind() {
      if (!this.bankCode) {
        uni.showToast({
          title: this.$t('w_0057'),
          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: this.$t('w_0344'),
            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.$t('w_0055')
          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>