银行卡功能修改

lxf

2025-06-06 3a4c266b791c86b6701567e4b52de82fb528f77e

 src/page/bankCard/index.vue

@@ -1,43 +1,161 @@
<template>
  <div class="bank_card_page">
    <van-nav-bar
      :placeholder="true"
      :safe-area-inset-top="true"
      :title="addBank ? $t('hj211') : $t('hj212')"
      left-arrow
      @click-left="$router.go(-1)"
    >
    </van-nav-bar>
    <div class="content">
      <div class="top_back">
        <div class="left_back_icon" @click="$router.go(-1)">
          <img src="../../assets/img/zuojiantou.png" alt />
        </div>
      </div>
      <div class="titles">
        <span>{{ addBank ? '绑定银行卡' : '银行卡信息' }}</span>
      </div>
      <div class="bank_name">
      <!-- <div class="top_back">
            <div class="left_back_icon" @click="$router.go(-1)">
               <img src="../../assets/img/zuojiantou.png" alt />
            </div>
         </div> -->
      <!--          <div class="titles">
            <span>{{ }}</span>
         </div> -->
      <div class="bank_name" v-if="addBank == false && bankName">
        <div class="lefts">
          <span>{{ '银行名称:' }}</span>
          <span>{{ $t("hj213") }}</span>
        </div>
        <div class="rights">
          <input type="text" v-model="bankName" :disabled="!addBank" />
          <input
            type="text"
            :placeholder="$t('hj306')"
            v-model="bankName"
            :disabled="!addBank"
          />
        </div>
      </div>
      <div class="bank_name">
      <div class="bank_name" v-if="addBank == false && bankNo">
        <div class="lefts">
          <span>{{ '开户支行:' }}</span>
          <span>{{ $t("hj215") }}</span>
        </div>
        <div class="rights">
          <input type="text" v-model="bankAddress" :disabled="!addBank" />
          <input
            type="text"
            :placeholder="$t('hj307')"
            v-model="bankNo"
            :disabled="!addBank"
          />
        </div>
      </div>
      <div class="bank_name">
      <div class="bank_name" v-if="addBank == false && banif">
        <div class="lefts">
          <span>{{ '银行卡号:' }}</span>
          <span>{{ $t("hj303") }}</span>
        </div>
        <div class="rights">
          <input type="text" v-model="bankNo" :disabled="!addBank" />
          <input
            type="text"
            :placeholder="$t('hj308')"
            v-model="banif"
            :disabled="!addBank"
          />
        </div>
      </div>
      <!--    <div class="bank_name" v-if="addBank==false&&bankun">
            <div class="lefts">
               <span>{{ $t('hj304') }}</span>
            </div>
            <div class="rights">
               <input type="text" :placeholder="$t('hj309')" v-model="bankun" :disabled="!addBank" />
            </div>
         </div> -->

      <div class="bank_name" @click.stop="gotodaka" v-if="addBank == true">
        <div class="lefts">
          <span>{{ $t("hj213") }}</span>
        </div>

        <div class="rights" style="justify-content: none;">
          {{ name }}
          <!-- <input type="text" :placeholder="$t('hj306')" v-model="bankName" :disabled="!addBank" /> -->
          <!-- <picker @change="bindPickerChange" :value="index" :range="array">
           <view >{{array[index].name}}</view>
        </picker> -->
        </div>
      </div>
      <div class="bank_name" v-if="addBank == true">
        <div class="lefts">
          <span>{{ $t("hj215") }}</span>
        </div>
        <div class="rights">
          <input
            type="text"
            :placeholder="$t('hj307')"
            v-model="bankNo"
            :disabled="!addBank"
          />
        </div>
      </div>
      <div class="bank_name" v-if="addBank == true">
        <div class="lefts">
          <span>{{ $t("hj303") }}</span>
        </div>
        <div class="rights">
          <input
            type="text"
            :placeholder="$t('hj308')"
            v-model="banif"
            :disabled="!addBank"
          />
        </div>
      </div>

      <div class="bank_name" v-if="addBank == true && !_id">
        <div class="lefts">
          <span>{{ $t("银行卡户主名称") }}</span>
        </div>
        <div class="rights">
          <input
            type="text"
            :placeholder="$t('请输入银行卡户主名称')"
            v-model="bankCardholderName"
            :disabled="!addBank"
          />
        </div>
      </div>

      <div class="bank_name" v-if="addBank == true && !_id">
        <div class="lefts">
          <span>{{ $t("hj16") }}</span>
        </div>
        <div class="rights">
          <input
            type="text"
            :placeholder="$t('请输入电子邮箱')"
            v-model="bankEmail"
            :disabled="!addBank"
          />
        </div>
      </div>
      <!-- <div class="bank_name" v-if="addBank==false">
            <div class="lefts">
               <span>{{ $t('hj304') }}123</span>
            </div>
            <div class="rights">
               <input type="text" :placeholder="$t('hj309')" v-model="bankun" :disabled="!addBank" />
            </div>
         </div> -->
      <div class="bank_name bind" @click="toSure" v-if="addBank">
        <span>{{ '确认绑定' }}</span>
        <span>{{ $t("hj216") }}</span>
      </div>
      <div class="bank_hck"></div>
      <div class="bank_code"></div>
      <van-popup v-model="showPicker" round position="bottom">
        <van-picker
          :confirm-button-text="$t('hj161')"
          :cancel-button-text="$t('hj106')"
          value-key="name"
          :columns="array"
          @cancel="quxiao"
          @confirm="onConfirm"
          show-toolbar
        />
      </van-popup>
    </div>
  </div>
</template>
@@ -45,58 +163,128 @@
<script>
import * as api from "@/axios/api";
import { Toast } from "mint-ui";
import { isNull, bankNoReg, isName } from '@/utils/utils'
import { isNull, bankNoReg, isName } from "@/utils/utils";

export default {
  name: "bankCard",
  data() {
    return {
      showPicker: false,
      bankName: "", //银行名称,
      bankAddress: "", //需要精确到分行或者支行,
      bankNo: "", // 印象卡号
      addBank: false
      banif: "",
      bankun: "",
      bankEmail: "",
      bankCardholderName: "",
      array: [],
      index: 0,
      addBank: false,
      id: "",
      code: "",
      name: "",
      _id: null
    };
  },
  created() {
    this.getCardDetail();
    // 判断是否有路由参数（如id），有则为编辑
    const params = this.$route.query;
    if (params && params.id) {
      // 编辑模式
      this.addBank = true;
      this._id = params.id;
      this.bankNo = params.bankNo || "";
      this.banif = params.bankAddress || "";
      this.name = params.bankName || "";
      this.code = params.bankImg || "";
      this.bankEmail = params.bankEmail || "";
      this.bankCardholderName = params.bankCardholderName || "";
    } else {
      // 新增模式
      // this.id = null;
      this.getCardDetail();
    }
    this.getbanklist();
  },
  methods: {
    async toSure() {
      // 添加银行卡
      if (isNull(this.bankNo) || !bankNoReg(this.bankNo)) {
        Toast("请输入银行卡号");
      } else if (isNull(this.bankName) || !isName(this.bankName)) {
        Toast("请输入银行名称");
      } else if (isNull(this.bankAddress) || !isName(this.bankAddress)) {
        Toast("请输入开户支行");
    quxiao() {
      this.showPicker = false;
    },
    gotodaka() {
      this.showPicker = true;
    },
    onConfirm(item) {
      console.log(item);
      this.id = item.id;
      this.code = item.code;
      this.name = item.name;
      this.showPicker = !this.showPicker;
      // this.lever = item.value
    },
    async getbanklist() {
      // 获取银行名称
      let data = await api.getbank();
      if (data.status === 0) {
        console.log(data);
        this.array = data.data;
        console.log(this.array);
      } else {
        let opts = {
          bankName: this.bankName,
          bankNo: this.bankNo,
          bankAddress: this.bankAddress
        };
        let data = await api.addBankCard(opts);
          if (data.status === 0) {
            Toast("添加成功!");
            this.$router.push("/newUser");
          } else {
            Toast(data.msg);
          }
      }
    },
    async getCardDetail () {
    async toSure() {
      // 添加银行卡
      if (isNull(this.bankNo)) {
        Toast(this.$t("hj217"));
      } else if (isNull(this.name)) {
        Toast(this.$t("hj218"));
      } else if (isNull(this.banif)) {
        Toast(this.$t("hj218a"));
      }
      // else if (isNull(this.bankAddress) ) {
      //   Toast(this.$t("hj219"));
      // }
      else {
        let opts = {
          bankName: this.name,
          bankNo: this.bankNo,
          bankAddress: this.banif,
          bankImg: this.code,
          bankEmail: this.bankEmail,
          bankCardholderName: this.bankCardholderName
        };

        let data;
        if (this._id) {
          // 编辑
          opts.id = this._id;
          data = await api.getUpdate(opts);
        } else {
          // 新增
          data = await api.addBankCard(opts);
        }
        if (data.status === 0) {
          Toast(this.$t("hj220"));
          this.$router.push("/banklist");
        } else {
          Toast(data.msg);
        }
      }
    },
    async getCardDetail() {
      // 获取银行卡信息
      let data = await api.getBankCard()
      if (data.status === 0) {
        const {bankAddress, bankName, bankNo} = data.data;
        this.bankAddress = bankAddress;
      let data = await api.getBankCard();
      if (data.status == 0) {
        const { bankAddress, bankName, bankNo, bankImg } = data.data;
        this.banif = bankAddress;
        this.bankName = bankName;
        this.bankun = bankImg;
        this.bankNo = bankNo;
        this.addBank = false;
        // this.addBank = false;
        this.addBank = true;
      } else {
        this.addBank = true;
      }
    },
    }
  }
};
</script>
@@ -106,34 +294,41 @@
  width: 100%;
  height: 100%;
  background: #fff;

  .content {
    width: 100%;
    height: 100%;
    padding: 0 0.6rem;

    .top_back {
      width: 100%;
      height: 2rem;

      > div {
        width: 10%;
        height: 100%;
        display: flex;
        align-items: center;
      }

      img {
        width: 0.6rem;
        height: 0.6rem;
      }
    }

    .titles {
      width: 100%;
      height: 1.5rem;
      font-size: 0.641rem;
      margin-top: 1rem;

      span {
        font-weight: 600;
      }
    }
  }

  .bank_name {
    width: 100%;
    height: 1.5rem;
@@ -142,22 +337,26 @@
    background: rgb(247, 247, 247);
    border-radius: 0.2rem;
    margin-top: 0.3rem;

    .lefts {
      width: 25%;
      width: 38%;
      height: 100%;
      display: flex;
      align-items: center;
      font-size: 0.3846rem;

      span {
        font-weight: 600;
      }
    }

    .rights {
      width: 75%;
      height: 100%;
      display: flex;
      align-items: center;
      justify-content: center;

      input {
        width: 100%;
        height: 100%;
@@ -165,15 +364,32 @@
    }
  }
}

.bank_name.bind {
  display: flex;
  align-items: center;
  justify-content: center;
  background: #2d6ae9;
  background: #1b79f5;
  font-size: 0.4103rem;
  color: #fff;

  span {
    font-weight: 600;
  }
}
</style>
/deep/ .van-nav-bar__content {
  height: 65px;
}
/deep/ .van-nav-bar__title {
  font-family: "DINPro";
  width: 100%;
  height: 1.17333rem;
  display: flex;
  justify-content: center;
  align-items: center;
  font-style: normal;
  font-weight: 500;
  font-size: 0.48rem;
  color: #14181f;
}
</style>