1

PC-20250623MANY\Administrator

2025-07-27 df43dbd4f80baedb88764ca9545e4b5ec7e1ac73

 src/page/bankCard/banklist.vue

@@ -1,48 +1,65 @@
<template>
  <div class="bank_card_page">
    <van-nav-bar
      :placeholder="true"
      :safe-area-inset-top="true"
      :title="$t('hj247')"
      left-arrow
      @click-left="$router.go(-1)"
    >
    <van-nav-bar :placeholder="true" :safe-area-inset-top="true" :title="$t('hj247')" left-arrow
      @click-left="$router.go(-1)">
    </van-nav-bar>
    <div class="content">
      <div class="bank">
        <van-swipe-cell
          v-for="(item, index) in banklist"
          :key="index"
          :right-width="65"
          @close="onClose"
        >
          <div class="bank_name" @click="goBankcard(item)">
        <!-- <van-swipe-cell v-for="(item, index) in banklist" :key="index" :right-width="65" @close="onClose"> -->
        <van-swipe-cell v-for="(item, index) in banklist" :key="index" :right-width="65">
          <div class="bank_name" @click="openEditDialog(item)">
            <!-- <div class="bank_name" @click="goBankcard(item)"> -->
            <div class="lefts">{{ item.bankName }}</div>
            <div class="rights">{{ item.bankNo }}</div>
            <van-button square class="delete-btn" type="danger" :text="$t('删除')"
              @click.stop="deleteBank(item, index)" />
          </div>
          <template #right>
            <van-button
              square
              class="delete-btn"
              type="danger"
              :text="$t('删除')"
              @click="deleteBank(item, index)"
            />
          </template>
          <!-- <template #right>
            <van-button square class="delete-btn" type="danger" :text="$t('删除')" @click="deleteBank(item, index)" />
          </template> -->
        </van-swipe-cell>
      </div>
      <div class="bank_name">
        <div class="bank_box" @click="$router.push('/bankcard')">
        <!-- <div class="bank_box" @click="$router.push('/bankcard')"> -->
        <div class="bank_box" @click="openEditDialog()">
          {{ $t("hj220").substring(0, 2) }}{{ $t("hj247") }}
        </div>
      </div>
    </div>

    <!-- 编辑银行卡弹窗 -->
    <van-popup v-model="showEditDialog" position="center" round>
      <div class="edit-popup">
        <div class="edit-title">{{ !this.editForm.id ? $t('hj211') : $t('hj212') }}</div>
        <div class="division"></div>
        <div class="edit-form">
          <div class="form-item">
            <div class="form-label"><span class="required">*</span>{{ $t('hj213') }}</div>
            <input type="text" v-model="editForm.bankName" :placeholder="$t('hj213')" class="form-input" />
          </div>
          <div class="form-item">
            <div class="form-label"><span class="required">*</span>{{ $t('hj215') }}</div>
            <input type="text" v-model="editForm.bankNo" :placeholder="$t('hj215')" class="form-input" />
          </div>
          <div class="form-item" v-if="!editForm.id">
            <div class="form-label"><span class="required">*</span>{{ $t('银行卡户主名称') }}</div>
            <input type="text" v-model="editForm.bankCardholderName" :placeholder="$t('银行卡户主名称')" class="form-input" />
          </div>
        </div>
        <div class="division"></div>
        <div class="edit-buttons">
          <div class="cancel-btn" @click="showEditDialog = false">{{ $t('qx') }}</div>
          <div class="save-btn" @click="saveEdit">{{ $t('qr') }}</div>
        </div>
      </div>
    </van-popup>
  </div>
</template>

<script>
import * as api from "@/axios/api";
import { Toast } from "mint-ui";
// import { Toast } from "mint-ui";
import { Toast, Dialog } from 'vant';
import { isNull, bankNoReg, isName } from "@/utils/utils";

export default {
@@ -61,26 +78,96 @@
      addBank: false,
      id: "",
      code: "",
      name: ""
    };
      name: "",
      // 编辑弹窗相关数据
      showEditDialog: false,
      editForm: {
        bankName: "",
        bankNo: "",
        bankCardholderName: "",
        id: "",
      }
    }
  },
  created() {
    this.getCardDetail();
    this.getbanklist();
  },
  methods: {
    async deleteBank(item, index) {
      // this.$dialog
      //   ? await this.$dialog.confirm({ message: "确定删除该银行卡吗？" })
      //   : null;
      // 调用删除接口
      let res = await api.deleteBankCard({ id: item.id });
      if (res.status === 0) {
        this.banklist.splice(index, 1);
        Toast(res.msg);
    // 打开编辑弹窗
    openEditDialog(item) {
      if (!item) {
        this.editForm = {
          bankName: '',
          bankNo: '',
          bankCardholderName: "", // 如果没有持卡人信息，设置为空字符串
        }
      } else {
        Toast(res.msg);
        this.editForm = {
          bankName: item.bankName,
          bankNo: item.bankNo,
          bankCardholderName: item.bankCardholderName || "", // 如果没有持卡人信息，设置为空字符串
          id: item.id,
        };
      }
      this.showEditDialog = true;
    },
    // 保存编辑
    async saveEdit() {
      // 表单验证
      if (isNull(this.editForm.bankName)) {
        Toast(this.$t("hj218"));
      } else if (isNull(this.editForm.bankNo)) {
        Toast(this.$t("hj217"));
      } else if (isNull(this.editForm.bankCardholderName) && !this.editForm.id) {
        Toast(this.$t("hj316"));
      }
      else {
        let opts = {
          bankName: this.editForm.bankName,
          bankNo: this.editForm.bankNo,
          // bankAddress: this.editForm.banif,
          // bankImg: this.editForm.code,
          // bankEmail: this.editForm.bankEmail,
          bankCardholderName: this.editForm.bankCardholderName
        };

        let data;
        // 编辑
        if (!!this.editForm.id) {
          opts.id = this.editForm.id;
          data = await api.getUpdate(opts);
        }
        // 新增
        else {
          data = await api.addBankCard(opts);
        }
        if (data.status === 0) {
          // Toast(this.$t("hj220"));
          // this.$router.go(-1);
          this.showEditDialog = false;
          this.getCardDetail();
        } else {
          Toast(data.msg);
        }
      }
    },
    deleteBank(item, index) {
      Dialog.confirm({
        title: this.$t('删除') + '?',
        confirmButtonText: this.$t('qr'),
        cancelButtonText: this.$t('qx'),
      }).then(async () => {
        // 调用删除接口
        let res = await api.deleteBankCard({ id: item.id });
        if (res.status === 0) {
          this.banklist.splice(index, 1);
          // Toast(res.msg);
        } else {
          Toast(res.msg);
        }
      })

    },
    goBankcard(item) {
      // 跳转修改银行卡
@@ -167,6 +254,8 @@
</script>

<style scoped lang="less">
@green: #c4d600;

.bank_box {
  width: 100%;
  display: flex;
@@ -174,6 +263,7 @@
  align-items: center;
  font-size: 20px;
}

.bank_card_page {
  width: 100%;
  height: 100%;
@@ -188,7 +278,7 @@
      width: 100%;
      height: 2rem;

      > div {
      >div {
        width: 10%;
        height: 100%;
        display: flex;
@@ -217,7 +307,7 @@
    width: 100%;
    height: 1.5rem;
    display: flex;
    padding: 0 0.2rem;
    padding: 0 0 0 .2rem;
    background: rgb(247, 247, 247);
    border-radius: 0.2rem;
    margin-top: 0.3rem;
@@ -261,9 +351,11 @@
    font-weight: 600;
  }
}

/deep/ .van-nav-bar__content {
  height: 65px;
}

/deep/ .van-nav-bar__title {
  font-family: "DINPro";
  width: 100%;
@@ -288,8 +380,96 @@
  font-size: 16px;
  letter-spacing: 2px;
  transition: background 0.2s;

  &:active {
    background: #d9363e;
  }
}

/* 编辑弹窗样式 */
/deep/ .van-popup {
  border-radius: .5rem !important;
}

.edit-popup {
  width: 100%;
  padding: .25rem 0;
  box-sizing: border-box;

  .division {
    width: 100%;
    height: 0.25rem;
    background-color: #f5f5f5;
  }
}

.edit-title {
  text-align: center;
  font-size: .45rem;
  font-weight: 700;
  padding: .25rem;
  color: #333;
}

.edit-form {
  padding: .25rem;
}

.form-item {
  // margin-bottom: 15px;
  border-bottom: 1px solid #f5f5f5;
  padding: .35rem 0 .25rem;
}

.form-label {
  font-size: .4rem;
  margin-bottom: .2rem;
  color: #333;
}

.required {
  color: red;
  margin-right: 4px;
}

.form-input {
  width: 100%;
  height: 1.1rem;
  border: 1px solid #ccc;
  border-radius: 4px;
  padding: 0 10px;
  font-size: .3rem;
  box-sizing: border-box;
}

.edit-buttons {
  display: flex;
  justify-content: space-between;
  border-top: 1px solid #f5f5f5;
  padding-top: 15px;
}

.cancel-btn,
.save-btn {
  flex: 1;
  height: 40px;
  line-height: 40px;
  text-align: center;
  font-size: 16px;
  cursor: pointer;
}

.cancel-btn {
  color: #333;
}

.save-btn {
  color: @green;
  font-weight: 500;
}

/deep/ .van-popup {
  width: 80%;
  border-radius: 8px;
}
</style>