web-base-pc/src/components/walletBindBank.vue

<template>
  <el-dialog
    :title="'绑定银行卡'"
    :visible.sync="addShow"
    center=""
    width="25%"
    :close-on-click-modal="false"
    :before-close="handleCloseBank"
  >
    <div class="add_pay">
      <el-form
        ref="form"
        :rules="rules"
        :model="form"
        label-position="right"
        label-width="100px"
      >
        <el-form-item :label="'银行卡号' + ':'" prop="cardNumber">
          <el-input
            v-model="form.cardNumber"
            :placeholder="'请输入银行卡号'"
          ></el-input>
        </el-form-item>
        <el-form-item :label="'银行选择' + ':'" prop="pkBank">
          <el-select v-model="form.pkBank" :placeholder="'请选择银行名称'">
            <el-option
              v-for="(item, index) in bankCardChioceList"
              :key="index"
              :label="item.bankName"
              :value="item.pkId"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item :label="'开户支行' + ':'" prop="subBankName">
          <el-input
            v-model="form.subBankName"
            :placeholder="'请输入开户支行'"
          ></el-input>
        </el-form-item>
        <el-form-item :label="'姓名' + ':'" prop="accountName">
          <el-input
            v-model="form.accountName"
            :placeholder="'请输入姓名'"
          ></el-input>
        </el-form-item>
        <el-form-item :label="'证件类型'" prop="idType">
          <el-select v-model="form.idType" :placeholder="'请选择证件类型'">
            <el-option
              v-for="(item, index) in cardTypeList"
              :key="index"
              :label="item.label"
              :value="item.value"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item :label="'证件号码' + ':'" prop="idCard">
          <el-input
            v-model="form.idCard"
            :placeholder="'请输入证件号码'"
          ></el-input>
        </el-form-item>
        <el-form-item
          v-if="pkCountry == 1"
          :label="'手机号' + ':'"
          prop="phone"
        >
          <el-input v-model="form.phone" :placeholder="'银行卡预留手机号'"></el-input>
        </el-form-item>
        <!-- <el-form-item :label="$t('w_0181')+':'">
          <el-input
            v-model="form.validdate"
            :placeholder="$t('w_0185')"
          ></el-input>
        </el-form-item> -->
        <!-- <el-form-item :label="$t('w_0182')+':'">
          <el-input v-model="form.cvv2" :placeholder="$t('w_0186')"></el-input>
        </el-form-item> -->
        <el-form-item
          v-if="pkCountry == 1 && cancode"
          :label="'验证码' + ':'"
          prop="verificationCode"
        >
          <el-input
            v-model="form.verificationCode"
            :placeholder="'请输入验证码'"
          ></el-input>
          <div class="hqyzm1" :class="isSend ? 'hui' : ''" @click="startTime">
            {{ getCode }}
          </div>
        </el-form-item>
      </el-form>
    </div>
    <div class="surebtn1">
      <div class="btn hh" @click="handleCloseBank">{{ '取消' }}</div>
      <div class="btn" @click="submitForm('form')">{{ '确定' }}</div>
    </div>
  </el-dialog>
</template>
  
  <script>
import * as wal from "@/api/wallet.js";
import { mapGetters } from "vuex";
export default {
  data() {
    return {
      cardTypeList: [], //证件类型
      addShow: false,
      form: {
        cardNumber: "",
        accountName: "",
        idCard: "",
        phone: "",
        pkBank: "",
        verificationCode: "",
        subBankName: "",
      },
      isSend: false,
      beginTime: 60,
      getCode: '获取验证码',
      timer: "",
      rules: {
        cardNumber: [
          { required: true, message: '请输入银行卡号', trigger: "blur" },
        ],
        verificationCode: [
          { required: true, message: '请输入验证码', trigger: "blur" },
          {
            validator: (rule, value, callback) => {
              if (this.pkCountry === 1 && !value) {
                callback(new Error('请输入验证码'));
              } else {
                callback();
              }
            },
          },
        ],
        idType: [
          { required: true, message: '请选择证件类型', trigger: "change" },
        ],
        accountName: [
          { required: true, message: '请输入姓名', trigger: "blur" },
        ],
        subBankName: [
          { required: true, message: '请输入开户支行', trigger: "blur" },
        ],
        bankNo: [
          { required: true, message: '请输入银行卡卡号', trigger: "blur" },
        ],
        name: [{ required: true, message: '请输入真实姓名', trigger: "blur" }],
        idCard: [
          { required: true, message: '请输入证件号码', trigger: "blur" },
        ],
        // smsCode: [{ required: true, message: '请输入验证码', trigger: 'blur' }],
        phone: [
          {
            required: true,
            message: '请输入银行卡预留手机号',
            trigger: "blur",
          },
          { min: 11, message: '请输入正确的手机号', trigger: "blur" },
          {
            validator: (rule, value, callback) => {
              if (this.pkCountry === 1 && !value) {
                callback(new Error('请输入正确的手机号'));
              } else {
                callback();
              }
            },
          },
        ],
        pkBank: [
          { required: true, message: '请选择银行卡', trigger: "change" },
        ],
      },
      ifpass: false,
      bankCardChioceList: [],
      pkCountry: "",
      cancode: true,
    };
  },
  props: {
    isAdd: {
      type: Boolean,
      default: false,
    },
  },
  computed: {
    ...mapGetters(["userInfo"]),
  },
  watch: {
    isAdd(val) {
      this.addShow = val;
    },
  },
  created() {
    this.getBankCardChoiceList();
    this.checkIfWhite();
    this.pkCountry = this.userInfo.pkCountry;
  },

  methods: {
    checkIfWhite() {
      wal.checkIfWhite().then((res) => {
        if (res.code == 200 && res.flag == "N") {
          this.cancode = true;
        } else if (res.code == 200 && res.flag == "Y") {
          this.cancode = false;
        }
      });
    },
    getBankCardChoiceList() {
      wal.getBankCardChoiceList().then((res) => {
        this.bankCardChioceList = res.data;
      });
      //证件类型
      wal.getCardType().then((res) => {
        this.cardTypeList = res.data;
      });
    },
    handleCloseBank() {
      this.$emit("closeBind", 0);
      this.$refs.form.resetFields();
    },
    // 绑卡
    bindBank() {
      if (!this.form.verificationCode &&this.cancode&& this.pkCountry == 1) {
        this.$message({
          message: '验证码错误',
          type: "warning",
        });
        return;
      }
      if (!this.ifpass && this.pkCountry == 1) {
        this.$message({
          message: '银行卡验证不一致',
          type: "warning",
        });
        return;
      }
      let that = this;

      wal.bindWalletBankAdd(this.form).then((res) => {
        this.$message({
          message: '银行卡绑定成功',
          type: "success",
        });
        this.$refs.form.resetFields();
        setTimeout(() => {
          that.$emit("closeBind", 1);
        }, 1500);
      });
    },
    // 绑卡获取验证码
    submitForm(form) {
      this.$refs[form].validate((valid) => {
        if (valid) {
          if (this.pkCountry == 1) {
            if (this.cancode) {
              wal
                .verifyBankCard(this.form)
                .then((res) => {
                  if (res.code == 200) {
                    this.ifpass = true;
                    this.bindBank();
                  } else {
                    this.ifpass = false;
                    this.$message({
                      message: res.msg,
                      type: "warning",
                    });
                  }
                })
                .catch((err) => {
                  this.beginTime = 0;
                  this.ifpass = false;
                });
            } else {
              this.ifpass = true;
              this.bindBank();
            }
          } else {
            this.bindBank();
          }
        } else {
          // console.log('error submit!!')
          return false;
        }
      });
    },
    startTime() {
      if (!this.form.phone) {
        this.$message({
          message: '请先输入手机号',
          type: "warning",
        });
        return;
      } else {
        if (this.isSend) return;
        this.isSend = true;
        this.getCode = this.beginTime + 's后重新发送';
        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);
        wal.getVerification({ phone: this.form.phone }).then((res) => {
          this.$message({
            message: '验证码已发送',
            type: "success",
          });
        });
      }
    },
  },
};
</script>
  
  <style lang="scss" scoped>
.add_pay {
  padding: 20px;
  ::v-deep .el-form-item {
    border-bottom: 1px solid rgba(0, 0, 0, 0.05); // padding-bottom: 4px;
    margin-bottom: 20px;
  }
}
.hqyzm1 {
  background: #d5251d;
  border-radius: 8px;
  padding: 0 7px;
  color: #fff;
  font-size: 10px;
  cursor: pointer;
}
.hui {
  opacity: 0.5;
}
.add_pay {
  ::v-deep .el-form-item {
    display: flex;
    align-items: center;
  }
  ::v-deep .el-form-item__content {
    flex: 1;
    display: flex;
    margin-left: 0 !important;
  }
  ::v-deep .el-input {
    flex: 1;
    width: auto;
  }
  ::v-deep .el-input__inner {
    border: 0;
  }
}
.surebtn1 {
  display: flex;
  align-items: center;
  justify-content: space-around;
  .btn {
    width: 180px;
    height: 50px;
    background: #d5251d;
    border-radius: 6px 6px 6px 6px;
    text-align: center;
    font-size: 14px;
    font-family: PingFang SC-Medium, PingFang SC;
    font-weight: 500;
    color: #ffffff;
    line-height: 50px;
    cursor: pointer;
  }

  .hh {
    background: #cccccc;
  }
}
::v-deep .el-dialog__title {
  font-weight: 500;
}
</style>