From df43dbd4f80baedb88764ca9545e4b5ec7e1ac73 Mon Sep 17 00:00:00 2001
From: PC-20250623MANY\Administrator <344137771@qq.com>
Date: Sun, 27 Jul 2025 16:26:34 +0800
Subject: [PATCH] 1
---
src/page/bankCard/banklist.vue | 258 +++++++++++++++++++++++++++++++++++++++++++-------
1 files changed, 219 insertions(+), 39 deletions(-)
diff --git a/src/page/bankCard/banklist.vue b/src/page/bankCard/banklist.vue
index db92095..751ec87 100644
--- a/src/page/bankCard/banklist.vue
+++ b/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>
--
Gitblit v1.9.3