修改，删除银行卡

lxf

2025-06-06 892831f8f14ea057e93ea575ea4398d1f1abe6e8

 src/page/bankCard/banklist.vue

@@ -10,235 +10,286 @@
    </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" >
            <div class="lefts" >{{item.bankName}}</div>
            <div class="rights">{{item.bankNo}}</div>
        <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>
</template>

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

  export default {
    name: "bankCard",
    data() {
      return {
        showPicker: false,
        bankName: "", //银行名称,
        bankAddress: "", //需要精确到分行或者支行,
        bankNo: "", // 印象卡号
        banif: "",
        bankun: "",
        banklist:[],
        array: [],
        index: 0,
        addBank: false,
        id: '',
        code: '',
        name: '',
      };
export default {
  name: "bankCard",
  data() {
    return {
      showPicker: false,
      bankName: "", //银行名称,
      bankAddress: "", //需要精确到分行或者支行,
      bankNo: "", // 印象卡号
      banif: "",
      bankun: "",
      banklist: [],
      array: [],
      index: 0,
      addBank: false,
      id: "",
      code: "",
      name: ""
    };
  },
  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);
      } else {
        Toast(res.msg);
      }
    },
    created() {
      this.getCardDetail();
      this.getbanklist()
    goBankcard(item) {
      // 跳转修改银行卡
      this.$router.push({
        path: "/bankcard",
        query: {
          bankName: item.bankName,
          bankNo: item.bankNo,
          bankAddress: item.bankAddress,
          bankImg: item.bankImg,
          id: item.id
        }
      });
    },
    methods: {
      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()
    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 {
      }
    },
    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
        };
        let data = await api.addBankCard(opts);
        if (data.status === 0) {
          console.log(data);
          this.array = data.data
          console.log(this.array);
        } else {}
      },
      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,

          };
          let data = await api.addBankCard(opts);
          if (data.status === 0) {
            Toast(this.$t("hj220"));
            this.$router.push("/newUser");
          } else {
            Toast(data.msg);
          }
        }
      },
      async getCardDetail() {
        // 获取银行卡信息
        let data = await api.getBankCard()
        if (data.status === 0) {
          // const {
          //   bankAddress,
          //   bankName,
          //   bankNo,
          //   bankImg
          // } = data.data;
          this.banklist = data.data
          Toast(this.$t("hj220"));
          this.$router.push("/newUser");
        } else {
          this.addBank = true;
          Toast(data.msg);
        }
      },
      }
    },
    async getCardDetail() {
      // 获取银行卡信息
      let data = await api.getBankCard();
      if (data.status === 0) {
        // const {
        //   bankAddress,
        //   bankName,
        //   bankNo,
        //   bankImg
        // } = data.data;
        this.banklist = data.data;
      } else {
        this.addBank = true;
      }
    }
  };
  }
};
</script>

<style scoped lang="less">
  .bank_box{
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 20px;
  }
  .bank_card_page {
.bank_box {
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 20px;
}
.bank_card_page {
  width: 100%;
  height: 100%;
  background: #fff;

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

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

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

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

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

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

        span {
          font-weight: 600;
        }
      img {
        width: 0.6rem;
        height: 0.6rem;
      }
    }

    .bank_name {
    .titles {
      width: 100%;
      height: 1.5rem;
      display: flex;
      padding: 0 0.2rem;
      background: rgb(247, 247, 247);
      border-radius: 0.2rem;
      margin-top: 0.3rem;
      font-size: 0.641rem;
      margin-top: 1rem;

      .lefts {
        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%;
        }
      span {
        font-weight: 600;
      }
    }
  }

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

    span {
      font-weight: 600;
    }
  }
  /deep/ .van-nav-bar__content {
    height: 65px;
  }
  /deep/ .van-nav-bar__title {
    font-family: "DINPro";
  .bank_name {
    width: 100%;
    height: 1.17333rem;
    height: 1.5rem;
    display: flex;
    justify-content: center;
    align-items: center;
    font-style: normal;
    font-weight: 500;
    font-size: 0.48rem;
    color: #14181f;
    padding: 0 0.2rem;
    background: rgb(247, 247, 247);
    border-radius: 0.2rem;
    margin-top: 0.3rem;

    .lefts {
      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%;
      }
    }
  }
}

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

  span {
    font-weight: 600;
  }
}
/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;
}

.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>