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

<template>
  <el-dialog
    title="绑定银行卡"
    :visible.sync="dialogVisible"
    width="40%"
    :close-on-click-modal="false"
    :before-close="handleCloseDialog"
  >
    <div class="bind-bank-form-container">
      <el-form
        ref="bankForm"
        :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="bankId">
          <el-select v-model="form.bankId" 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="isMainlandChinaUser" label="手机号:" prop="phone">
          <el-input
            v-model="form.phone"
            placeholder="银行卡预留手机号"
          ></el-input>
        </el-form-item>
        <el-form-item
          v-if="isMainlandChinaUser && needsVerificationCode"
          label="验证码:"
          prop="verificationCode"
        >
          <el-input
            v-model="form.verificationCode"
            placeholder="请输入验证码"
          ></el-input>
          <el-button
            style="margin-left: 10px"
            :class="{ 'is-disabled': isSendingCode }"
            :disabled="isSendingCode"
            type="primary"
            @click="sendVerificationCode"
          >
            {{ verificationCodeButtonText }}
          </el-button>
        </el-form-item>
      </el-form>
    </div>
    <div class="dialog-footer">
      <!-- <div class="btn cancel-btn" @click="handleCloseDialog">取消</div> -->
      <el-button @click="handleCloseDialog">取消</el-button>
      <el-button type="primary" @click="submitBankForm('bankForm')"
        >确定
      </el-button>
    </div>
  </el-dialog>
</template>

<script>
import * as walletApi from "@/api/wallet.js";
import { mapGetters } from "vuex";
export default {
  data() {
    // 自定义验证码校验逻辑
    const validateVerificationCode = (rule, value, callback) => {
      if (this.isMainlandChinaUser && this.needsVerificationCode && !value) {
        callback(new Error("请输入验证码"));
      } else {
        callback();
      }
    };
    // 自定义手机号校验逻辑
    const validatePhoneNumber = (rule, value, callback) => {
      if (this.isMainlandChinaUser && !value) {
        callback(new Error("请输入正确的手机号"));
      } else if (this.isMainlandChinaUser && value && value.length < 11) {
        callback(new Error("请输入正确的手机号"));
      } else {
        callback();
      }
    };

    return {
      cardTypeList: [], // 证件类型列表
      dialogVisible: false, // 控制对话框显示
      form: {
        cardNumber: "", // 银行卡号
        accountName: "", // 姓名
        idCard: "", // 证件号码
        phone: "", // 手机号
        bankId: "", // 银行ID (原 pkBank)
        verificationCode: "", // 验证码
        subBankName: "", // 开户支行
        idType: "", // 证件类型
      },
      isSendingCode: false, // 是否正在发送验证码
      countdownSeconds: 60, // 倒计时秒数
      verificationCodeButtonText: "获取验证码", // 验证码按钮文字
      countdownTimer: null, // 倒计时定时器
      rules: {
        cardNumber: [
          { required: true, message: "请输入银行卡号", trigger: "blur" },
        ],
        verificationCode: [
          { required: true, message: "请输入验证码", trigger: "blur" },
          { validator: validateVerificationCode, trigger: "blur" },
        ],
        idType: [
          { required: true, message: "请选择证件类型", trigger: "change" },
        ],
        accountName: [
          { required: true, message: "请输入姓名", trigger: "blur" },
        ],
        subBankName: [
          { required: true, message: "请输入开户支行", trigger: "blur" },
        ],
        // bankNo 验证似乎是重复的，已移除
        // name 验证似乎是重复的，已移除
        idCard: [
          { required: true, message: "请输入证件号码", trigger: "blur" },
        ],
        // smsCode 似乎未使用，已移除
        phone: [
          {
            required: true,
            message: "请输入银行卡预留手机号",
            trigger: "blur",
          },
          // { min: 11, message: '请输入正确的手机号', trigger: "blur" }, // 合并到 validator
          { validator: validatePhoneNumber, trigger: "blur" },
        ],
        bankId: [
          // 原 pkBank
          { required: true, message: "请选择银行卡", trigger: "change" },
        ],
      },
      isBankCardVerified: false, // 银行卡是否已验证通过 (原 ifpass)
      bankCardChioceList: [], // 可选银行列表
      // pkCountry: "", // 由 isMainlandChinaUser 计算属性替代
      needsVerificationCode: true, // 是否需要验证码 (原 cancode)
    };
  },
  props: {
    // isAdd 更名为 visible，更符合对话框的常用属性名
    visible: {
      type: Boolean,
      default: false,
    },
  },
  computed: {
    ...mapGetters(["userInfo"]),
    // 计算用户是否为中国大陆用户
    isMainlandChinaUser() {
      return this.userInfo?.pkCountry === 1;
    },
  },
  watch: {
    // 监听 prop 变化来控制对话框显示
    visible(newVal) {
      this.dialogVisible = newVal;
      if (newVal) {
        // 对话框打开时重置状态（如果需要）
        this.resetFormState();
      }
    },
    // 监听对话框内部状态变化，并通知父组件
    dialogVisible(newVal) {
      if (!newVal) {
        this.$emit("update:visible", false); // 使用 .sync 修饰符更新父组件状态
        this.$emit("closeBind", this.isBankCardVerified ? 1 : 0); // 保留原有逻辑，根据验证状态发送不同值
        this.resetFormAndValidation(); // 关闭时重置表单和状态
      }
    },
  },
  created() {
    this.fetchBankCardChoices();
    this.checkVerificationRequirement();
    // this.pkCountry = this.userInfo.pkCountry; // 不再需要单独存储，使用计算属性
  },
  beforeDestroy() {
    // 组件销毁前清除定时器
    if (this.countdownTimer) {
      clearInterval(this.countdownTimer);
    }
  },
  methods: {
    // 检查是否需要验证码
    checkVerificationRequirement() {
      walletApi
        .checkIfWhite()
        .then((res) => {
          // 后端接口 flag 为 'Y' 表示在白名单，不需要验证码
          this.needsVerificationCode = !(res.code == 200 && res.flag === "Y");
        })
        .catch((_err) => {
          // 处理获取白名单状态失败的情况，可以设置默认值或提示用户
          console.error("获取白名单状态失败:", _err);
          this.needsVerificationCode = true; // 默认为需要验证码
        });
    },
    // 获取银行卡选项和证件类型
    fetchBankCardChoices() {
      walletApi
        .getBankCardChoiceList()
        .then((res) => {
          this.bankCardChioceList = res.data || [];
        })
        .catch((_err) => {
          console.error("获取银行列表失败:", _err);
        });

      walletApi
        .getCardType()
        .then((res) => {
          this.cardTypeList = res.data || [];
        })
        .catch((_err) => {
          console.error("获取证件类型失败:", _err);
        });
    },
    // 关闭对话框处理
    handleCloseDialog() {
      this.dialogVisible = false;
      // 关闭时已在 watch 中处理了 resetFields 和 emit 事件
    },
    // 重置表单和相关状态
    resetFormAndValidation() {
      this.$refs.bankForm?.resetFields();
      this.isBankCardVerified = false;
      this.clearCountdown(); // 清除倒计时状态
    },
    // 清除倒计时状态
    clearCountdown() {
      if (this.countdownTimer) {
        clearInterval(this.countdownTimer);
        this.countdownTimer = null;
      }
      this.isSendingCode = false;
      this.verificationCodeButtonText = "获取验证码";
      this.countdownSeconds = 60;
    },
    // 重置表单外的状态（如果需要）
    resetFormState() {
      this.isBankCardVerified = false;
      this.clearCountdown();
    },
    // 实际执行绑卡操作
    performBindBank() {
      // 对于非中国大陆用户，或不需要验证码的情况，直接标记为已验证
      if (!this.isMainlandChinaUser || !this.needsVerificationCode) {
        this.isBankCardVerified = true;
      }

      if (!this.isBankCardVerified) {
        this.$message({
          message: "请先完成银行卡验证", // 或 '银行卡验证不一致'
          type: "warning",
        });
        return;
      }

      // let that = this; // 不再需要

      walletApi
        .bindWalletBankAdd(this.form)
        .then(() => {
          this.$message({
            message: "银行卡绑定成功",
            type: "success",
          });
          // 成功后关闭对话框，并触发成功回调
          setTimeout(() => {
            // this.resetFormAndValidation(); // 已移至 watch 中处理关闭
            // this.$emit("closeBind", 1); // 已移至 watch 中处理关闭
            this.dialogVisible = false; // 关闭对话框
          }, 1500);
        })
        .catch((_err) => {
          // 添加错误处理
          console.error("绑定银行卡失败:", _err);
          this.$message({
            message: "银行卡绑定失败，请稍后重试",
            type: "error",
          });
        });
    },
    // 提交表单（验证 + 绑卡）
    submitBankForm(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          // 如果是中国大陆用户且需要验证码
          if (this.isMainlandChinaUser && this.needsVerificationCode) {
            walletApi
              .verifyBankCard(this.form)
              .then(() => {
                // 验证成功，标记状态并执行绑卡
                this.isBankCardVerified = true;
                this.performBindBank();
              })
              .catch((_err) => {
                // 使用 _err 表示未使用
                // 验证失败
                this.isBankCardVerified = false;
                // 提示后端返回的错误信息，或通用错误信息
                this.$message({
                  message: _err?.msg || "银行卡验证失败", // 优先使用后端消息
                  type: "warning",
                });
                // this.countdownSeconds = 0; // 不应在此重置倒计时，应在 clearCountdown 中处理
                this.clearCountdown(); // 验证失败时也应该能重新获取验证码
              });
          } else {
            // 非中国大陆用户或不需要验证码，直接尝试绑卡
            // isBankCardVerified 在 performBindBank 开始时会设置为 true
            this.performBindBank();
          }
        } else {
          console.log("表单验证失败!");
          return false;
        }
      });
    },
    // 发送验证码并启动倒计时
    sendVerificationCode() {
      if (!this.form.phone) {
        this.$message({
          message: "请先输入手机号",
          type: "warning",
        });
        return;
      }
      if (this.isSendingCode) return; // 防止重复点击

      this.isSendingCode = true;
      this.verificationCodeButtonText = `${this.countdownSeconds}s后重新发送`;

      this.countdownTimer = setInterval(() => {
        this.countdownSeconds--;
        if (this.countdownSeconds <= 0) {
          this.clearCountdown(); // 使用统一的清理函数
        } else {
          this.verificationCodeButtonText = `${this.countdownSeconds}s后重新发送`;
        }
      }, 1000);

      // 调用发送验证码接口
      walletApi
        .getVerification({ phone: this.form.phone })
        .then(() => {
          this.$message({
            message: "验证码已发送",
            type: "success",
          });
        })
        .catch((_err) => {
          // 添加错误处理
          console.error("发送验证码失败:", _err);
          // this.$message({
          //   message: "验证码发送失败，请稍后重试",
          //   type: "error",
          // });
          this.clearCountdown(); // 发送失败时重置按钮状态
        });
    },
  },
};
</script>

<style lang="scss" scoped>
// 统一管理表单容器样式
.bind-bank-form-container {
  padding: 20px 30px; // 调整内边距

  // 使用深度选择器影响 Element UI 内部元素
  ::v-deep .el-form-item {
    margin-bottom: 22px; // 统一表单项间距
    padding-bottom: 8px; // 增加底部内边距
    display: flex; // 确保 label 和 content 在一行
    align-items: center; // 垂直居中对齐

    .el-form-item__label {
      padding-right: 12px; // 标签右侧留空
      color: #333; // 标签颜色
    }

    .el-form-item__content {
      flex: 1; // 内容区域占据剩余空间
      margin-left: 0 !important; // 覆盖 Element UI 默认的 margin
      display: flex; // 使 input 和按钮等可以在一行显示
      align-items: center; // 垂直居中对齐内部元素
    }

    .el-input,
    .el-select {
      flex: 1; // 输入框/选择框占据主要空间
      width: auto; // 覆盖固定宽度
    }

    // .el-input__inner, .el-select .el-input__inner {
    //   border: none; // 移除内部输入框边框
    //   padding-left: 0; // 移除左侧内边距
    //   &:focus {
    //     box-shadow: none; // 移除聚焦时的阴影
    //   }
    // }
    //  // 移除选择框外层边框（如果需要完全无边框）
    // .el-select .el-input.is-focus .el-input__inner {
    //    border: none !important;
    // }
    //  .el-select .el-input__inner:focus {
    //    border-color: transparent !important; // Element UI 可能有特定样式，尝试覆盖
    // }
  }
  // 最后一个表单项移除下边框
  ::v-deep .el-form-item:last-child {
    border-bottom: none;
    margin-bottom: 0;
    padding-bottom: 0;
  }
}

// 验证码按钮样式
.verification-code-button {
  background-color: #d5251d; // 主题色
  color: #ffffff;
  border-radius: 4px; // 圆角调整
  padding: 6px 12px; // 内边距调整
  font-size: 12px; // 字体大小调整
  cursor: pointer;
  white-space: nowrap; // 防止文字换行
  margin-left: 10px; // 与输入框的间距
  transition: background-color 0.3s, opacity 0.3s; // 过渡效果

  &:hover {
    background-color: #c02018; // Hover 颜色加深
  }

  // 禁用状态样式
  &.is-disabled {
    opacity: 0.6;
    cursor: not-allowed;
    background-color: #fab6b6; // 禁用时颜色变浅
    &:hover {
      background-color: #fab6b6; // 禁用时 Hover 颜色不变
    }
  }
}

// 对话框底部按钮区域样式
.dialog-footer {
  display: flex;
  justify-content: space-around; // 按钮均匀分布
  padding: 20px 30px 30px; // 底部区域内边距
  border-top: 1px solid #f0f0f0; // 添加顶部边框分隔

  .btn {
    width: 160px; // 按钮宽度调整
    height: 45px; // 按钮高度调整
    border-radius: 6px;
    display: flex; // 使用 flex 居中文字
    align-items: center;
    justify-content: center;
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    transition: background-color 0.3s; // 添加过渡效果
  }

  .confirm-btn {
    background-color: #d5251d; // 主题色
    color: #ffffff;
    &:hover {
      background-color: #c02018;
    }
  }

  .cancel-btn {
    background-color: #f5f5f5; // 取消按钮背景色
    color: #666; // 取消按钮文字颜色
    border: 1px solid #e0e0e0; // 添加边框
    &:hover {
      background-color: #eeeeee;
    }
  }
}

// 对话框标题加粗（Element UI 默认可能已处理）
::v-deep .el-dialog__title {
  font-weight: 500;
}
</style>