From 58b0f1e9bd03a472321acf1dfc4e89fc4ce9df7a Mon Sep 17 00:00:00 2001
From: PC-20250623MANY\Administrator <344137771@qq.com>
Date: Mon, 29 Sep 2025 01:14:10 +0800
Subject: [PATCH] 9.28更换api
---
src/page/bankCard/banklist.vue | 658 ++++++++++++++++++++++++++++++++++++++++++-----------------
1 files changed, 468 insertions(+), 190 deletions(-)
diff --git a/src/page/bankCard/banklist.vue b/src/page/bankCard/banklist.vue
index 194b8c1..e794398 100644
--- a/src/page/bankCard/banklist.vue
+++ b/src/page/bankCard/banklist.vue
@@ -10,235 +10,513 @@
</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"> -->
+ <van-swipe-cell
+ v-for="(item, index) in banklist"
+ :key="index"
+ :right-width="65"
+ >
+ <div
+ class="bank_name"
+ @click="openEditDialog(item)"
+ style="background-color: #777;"
+ >
+ <!-- <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>
- </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')"> -->
+ <div class="bank_box" @click="openEditDialog()">
+ {{ $t("abc") }}
+ </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 {
- isNull,
- bankNoReg,
- isName
- } from '@/utils/utils'
+import * as api from "@/axios/api";
+// import { Toast } from "mint-ui";
+import { Toast, Dialog } from "vant";
+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: "",
+ // 编辑弹窗相关数据
+ showEditDialog: false,
+ editForm: {
+ bankName: "",
+ bankNo: "",
+ bankCardholderName: "",
+ id: ""
+ }
+ };
+ },
+ created() {
+ this.getCardDetail();
+ this.getbanklist();
+ },
+ methods: {
+ // 打开编辑弹窗
+ openEditDialog(item) {
+ if (!item) {
+ this.editForm = {
+ bankName: "",
+ bankNo: "",
+ bankCardholderName: "" // 如果没有持卡人信息，设置为空字符串
+ };
+ } else {
+ this.editForm = {
+ bankName: item.bankName,
+ bankNo: item.bankNo,
+ bankCardholderName: item.bankCardholderName || "", // 如果没有持卡人信息，设置为空字符串
+ id: item.id
+ };
+ }
+ this.showEditDialog = true;
},
- created() {
- this.getCardDetail();
- this.getbanklist()
- },
- 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()
- 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"));
+ // 保存编辑
+ 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 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);
- }
+ data = await api.addBankCard(opts);
}
- },
- 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.go(-1);
+ this.showEditDialog = false;
+ this.getCardDetail();
} else {
- this.addBank = true;
+ 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) {
+ // 跳转修改银行卡
+ 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;
+ },
+ 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) {
+ 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;
+ } 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 {
+@green: #287dff;
+
+.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 0 0.2rem;
+ background: @green;
+ 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;
+ }
+}
+
+/* 编辑弹窗样式 */
+/deep/ .van-popup {
+ border-radius: 0.5rem !important;
+}
+
+.edit-popup {
+ width: 100%;
+ padding: 0.25rem 0;
+ box-sizing: border-box;
+
+ .division {
+ width: 100%;
+ height: 0.25rem;
+ background-color: #f5f5f5;
+ }
+}
+
+.edit-title {
+ text-align: center;
+ font-size: 0.45rem;
+ font-weight: 700;
+ padding: 0.25rem;
+ color: #333;
+}
+
+.edit-form {
+ padding: 0.25rem;
+}
+
+.form-item {
+ // margin-bottom: 15px;
+ border-bottom: 1px solid #f5f5f5;
+ padding: 0.35rem 0 0.25rem;
+}
+
+.form-label {
+ font-size: 0.4rem;
+ margin-bottom: 0.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: 0.3rem;
+ box-sizing: border-box;
+ color: #333;
+}
+
+.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