修改，删除银行卡

lxf

2025-06-06 892831f8f14ea057e93ea575ea4398d1f1abe6e8

 src/page/bankCard/banklist.vue

@@ -10,16 +10,31 @@
    </van-nav-bar>
    <div class="content">
      <div class="bank">
        <!-- <div class="bank_list" v-for="(item,index) in banklist" :key="index" @click="$router.push('/updatabank')"> -->
        <div class="bank_list" v-for="(item,index) in banklist" :key="index">
          <div class="bank_name" >
        <van-swipe-cell
          v-for="(item, index) in banklist"
          :key="index"
          :right-width="65"
          @close="onClose"
        >
          <div class="bank_name" @click="goBankcard(item)">
            <div class="lefts" >{{item.bankName}}</div>
            <div class="rights">{{item.bankNo}}</div>
          </div>
        </div>
          <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')">{{$t('hj220').substring(0,2)}}{{$t('hj247')}}</div>
        <div class="bank_box" @click="$router.push('/bankcard')">
          {{ $t("hj220").substring(0, 2) }}{{ $t("hj247") }}
        </div>
      </div>
    </div>
  </div>
@@ -27,14 +42,8 @@

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

  export default {
    name: "bankCard",
@@ -50,38 +59,65 @@
        array: [],
        index: 0,
        addBank: false,
        id: '',
        code: '',
        name: '',
      id: "",
      code: "",
      name: ""
      };
    },
    created() {
      this.getCardDetail();
      this.getbanklist()
    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);
      } else {
        Toast(res.msg);
      }
    },
    goBankcard(item) {
      // 跳转修改银行卡
      this.$router.push({
        path: "/bankcard",
        query: {
          bankName: item.bankName,
          bankNo: item.bankNo,
          bankAddress: item.bankAddress,
          bankImg: item.bankImg,
          id: item.id
        }
      });
    },
      quxiao() {
        this.showPicker = false
      this.showPicker = false;
      },
      gotodaka() {
        this.showPicker = true
      this.showPicker = true;
      },
      onConfirm(item) {
        console.log(item)
        this.id = item.id
        this.code = item.code
        this.name = item.name
        this.showPicker = !this.showPicker
      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()
      let data = await api.getbank();
        if (data.status === 0) {
          console.log(data);
          this.array = data.data
        this.array = data.data;
          console.log(this.array);
        } else {}
      } else {
      }
      },
      async toSure() {
        // 添加银行卡
@@ -100,8 +136,7 @@
            bankName: this.name,
            bankNo: this.bankNo,
            bankAddress: this.banif,
            bankImg: this.code,

          bankImg: this.code
          };
          let data = await api.addBankCard(opts);
          if (data.status === 0) {
@@ -114,7 +149,7 @@
      },
      async getCardDetail() {
        // 获取银行卡信息
        let data = await api.getBankCard()
      let data = await api.getBankCard();
        if (data.status === 0) {
          // const {
          //   bankAddress,
@@ -122,11 +157,11 @@
          //   bankNo,
          //   bankImg
          // } = data.data;
          this.banklist = data.data
        this.banklist = data.data;
        } else {
          this.addBank = true;
        }
      },
    }
    }
  };
</script>
@@ -218,7 +253,7 @@
    display: flex;
    align-items: center;
    justify-content: center;
    background: #1B79F5;
  background: #1b79f5;
    font-size: 0.4103rem;
    color: #fff;

@@ -241,4 +276,20 @@
    font-size: 0.48rem;
    color: #14181f;
  }

.delete-btn {
  height: 100%;
  min-width: 65px;
  background: linear-gradient(90deg, #ff4d4f 0%, #ff7875 100%);
  border: none;
  border-radius: 0 8px 8px 0;
  color: #fff;
  font-weight: bold;
  font-size: 16px;
  letter-spacing: 2px;
  transition: background 0.2s;
  &:active {
    background: #d9363e;
  }
}
</style>