From 5dfb843c29fdcc1693961b70a36ddee3fea85a4a Mon Sep 17 00:00:00 2001
From: jhzh <1628036192@qq.com>
Date: Fri, 27 Feb 2026 16:33:11 +0800
Subject: [PATCH] 1
---
src/page/bankCard/index.vue | 331 +++++++++++++++++++++++++++++++++++++++++++++++-------
1 files changed, 285 insertions(+), 46 deletions(-)
diff --git a/src/page/bankCard/index.vue b/src/page/bankCard/index.vue
index cee31e1..7d9c505 100644
--- a/src/page/bankCard/index.vue
+++ b/src/page/bankCard/index.vue
@@ -1,43 +1,180 @@
<template>
<div class="bank_card_page">
+ <van-nav-bar
+ :placeholder="true"
+ :safe-area-inset-top="true"
+ :title="addBank ? $t('hj211') : $t('hj212')"
+ left-arrow
+ @click-left="$router.go(-1)"
+ >
+ </van-nav-bar>
<div class="content">
- <div class="top_back">
- <div class="left_back_icon" @click="$router.go(-1)">
- <img src="../../assets/img/zuojiantou.png" alt />
- </div>
- </div>
- <div class="titles">
- <span>{{ addBank ? '绑定银行卡' : '银行卡信息' }}</span>
- </div>
- <div class="bank_name">
+ <!-- <div class="top_back">
+ <div class="left_back_icon" @click="$router.go(-1)">
+ <img src="../../assets/img/zuojiantou.png" alt />
+ </div>
+ </div> -->
+ <!-- <div class="titles">
+ <span>{{ }}</span>
+ </div> -->
+ <div class="bank_name" v-if="addBank == false && bankName">
<div class="lefts">
- <span>{{ '银行名称:' }}</span>
+ <span>{{ $t("hj213") }}</span>
</div>
<div class="rights">
- <input type="text" v-model="bankName" :disabled="!addBank" />
+ <input
+ type="text"
+ :placeholder="$t('hj306')"
+ v-model="bankName"
+ :disabled="!addBank"
+ />
</div>
</div>
- <div class="bank_name">
+ <div class="bank_name" v-if="addBank == false && bankNo">
<div class="lefts">
- <span>{{ '开户支行:' }}</span>
+ <span>{{ $t("hj215") }}</span>
</div>
<div class="rights">
- <input type="text" v-model="bankAddress" :disabled="!addBank" />
+ <input
+ type="text"
+ :placeholder="$t('hj307')"
+ v-model="bankNo"
+ :disabled="!addBank"
+ />
</div>
</div>
- <div class="bank_name">
+ <div class="bank_name" v-if="addBank == false && banif">
<div class="lefts">
- <span>{{ '银行卡号:' }}</span>
+ <span>{{ $t("hj303") }}</span>
</div>
<div class="rights">
- <input type="text" v-model="bankNo" :disabled="!addBank" />
+ <input
+ type="text"
+ :placeholder="$t('hj308')"
+ v-model="banif"
+ :disabled="!addBank"
+ />
</div>
</div>
+ <!-- <div class="bank_name" v-if="addBank==false&&bankun">
+ <div class="lefts">
+ <span>{{ $t('hj304') }}</span>
+ </div>
+ <div class="rights">
+ <input type="text" :placeholder="$t('hj309')" v-model="bankun" :disabled="!addBank" />
+ </div>
+ </div> -->
+
+ <!-- <div class="bank_name" @click.stop="gotodaka" v-if="addBank == true"> -->
+ <div class="bank_name" v-if="addBank == true">
+ <div class="lefts">
+ <span>{{ $t("hj213") }}</span>
+ </div>
+
+ <div class="rights" style="justify-content: none;">
+ <input type="text" :placeholder="$t('hj306')" v-model="bankName" :disabled="!addBank" />
+ <!-- <picker @change="bindPickerChange" :value="index" :range="array">
+ <view >{{array[index].name}}</view>
+ </picker> -->
+ </div>
+ </div>
+ <div class="bank_name" v-if="addBank == true">
+ <div class="lefts">
+ <span>{{ $t("hj214") }}</span>
+ </div>
+
+ <div class="rights" style="justify-content: none;">
+ <input type="text" :placeholder="$t('hj219')" v-model="bankAddress" :disabled="!addBank" />
+ </div>
+ </div>
+ <div class="bank_name" v-if="addBank == true">
+ <div class="lefts">
+ <span>{{ $t("支行番号") }}</span>
+ </div>
+
+ <div class="rights" style="justify-content: none;">
+ <input type="text" :placeholder="$t('请输入支行番号')" v-model="branchNo" :disabled="!addBank" />
+ </div>
+ </div>
+
+ <div class="bank_name" v-if="addBank == true">
+ <div class="lefts">
+ <span>{{ $t("hj215") }}</span>
+ </div>
+ <div class="rights">
+ <input
+ type="text"
+ :placeholder="$t('hj307')"
+ v-model="bankNo"
+ :disabled="!addBank"
+ />
+ </div>
+ </div>
+ <!-- <div class="bank_name" v-if="addBank == true">
+ <div class="lefts">
+ <span>{{ $t("hj303") }}</span>
+ </div>
+ <div class="rights">
+ <input
+ type="text"
+ :placeholder="$t('hj308')"
+ v-model="banif"
+ :disabled="!addBank"
+ />
+ </div>
+ </div> -->
+
+ <div class="bank_name" v-if="addBank == true ">
+ <div class="lefts">
+ <span>{{ $t("银行卡户主名称") }}</span>
+ </div>
+ <div class="rights">
+ <input
+ type="text"
+ :placeholder="$t('请输入银行卡户主名称')"
+ v-model="bankCardholderName"
+ :disabled="!addBank"
+ />
+ </div>
+ </div>
+
+ <!-- <div class="bank_name" v-if="addBank == true && !_id">
+ <div class="lefts">
+ <span>{{ $t("hj16") }}</span>
+ </div>
+ <div class="rights">
+ <input
+ type="text"
+ :placeholder="$t('请输入电子邮箱')"
+ v-model="bankEmail"
+ :disabled="!addBank"
+ />
+ </div>
+ </div> -->
+ <!-- <div class="bank_name" v-if="addBank==false">
+ <div class="lefts">
+ <span>{{ $t('hj304') }}123</span>
+ </div>
+ <div class="rights">
+ <input type="text" :placeholder="$t('hj309')" v-model="bankun" :disabled="!addBank" />
+ </div>
+ </div> -->
<div class="bank_name bind" @click="toSure" v-if="addBank">
- <span>{{ '确认绑定' }}</span>
+ <span>{{ $t("hj216") }}</span>
</div>
<div class="bank_hck"></div>
<div class="bank_code"></div>
+ <van-popup v-model="showPicker" round position="bottom">
+ <van-picker
+ :confirm-button-text="$t('hj161')"
+ :cancel-button-text="$t('hj106')"
+ value-key="name"
+ :columns="array"
+ @cancel="quxiao"
+ @confirm="onConfirm"
+ show-toolbar
+ />
+ </van-popup>
</div>
</div>
</template>
@@ -45,95 +182,176 @@
<script>
import * as api from "@/axios/api";
import { Toast } from "mint-ui";
-import { isNull, bankNoReg, isName } from '@/utils/utils'
+import { isNull, bankNoReg, isName } from "@/utils/utils";
export default {
name: "bankCard",
data() {
return {
+ showPicker: false,
bankName: "", //银行名称,
bankAddress: "", //需要精确到分行或者支行,
+ branchNo:"",//支行番號
bankNo: "", // 印象卡号
- addBank: false
+ banif: "",
+ bankun: "",
+ bankEmail: "",
+ bankCardholderName: "",
+ array: [],
+ index: 0,
+ addBank: false,
+ id: "",
+ code: "",
+ name: "",
+ _id: null
};
},
created() {
- this.getCardDetail();
+ // 判断是否有路由参数（如id），有则为编辑
+ const params = this.$route.query;
+ if (params && params.id) {
+ // 编辑模式
+ this.addBank = true;
+ this._id = params.id;
+ this.bankNo = params.bankNo || "";
+ this.bankAddress = params.branchName || "";
+ this.branchNo = params.branchNo || "";
+ this.bankName = params.bankName || "";
+ this.code = params.bankImg || "";
+ this.bankEmail = params.bankEmail || "";
+ this.bankCardholderName = params.bankCardholderName || "";
+ } else {
+ // 新增模式
+ // this.id = null;
+ 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) || !bankNoReg(this.bankNo)) {
- Toast("请输入银行卡号");
- } else if (isNull(this.bankName) || !isName(this.bankName)) {
- Toast("请输入银行名称");
- } else if (isNull(this.bankAddress) || !isName(this.bankAddress)) {
- Toast("请输入开户支行");
- } else {
+ if (isNull(this.bankNo)) {
+ Toast(this.$t("hj217"));
+ } else if (isNull(this.bankName)) {
+ Toast(this.$t("hj218"));
+ } else if (isNull(this.bankAddress)) {
+ Toast(this.$t("hj218a"));
+ }
+ // else if (isNull(this.bankAddress) ) {
+ // Toast(this.$t("hj219"));
+ // }
+ else {
let opts = {
bankName: this.bankName,
bankNo: this.bankNo,
- bankAddress: this.bankAddress
+ branchName: this.bankAddress,
+ branchNo: this.branchNo,
+ bankImg: this.code,
+ bankEmail: this.bankEmail,
+ bankCardholderName: this.bankCardholderName
};
- let data = await api.addBankCard(opts);
- if (data.status === 0) {
- Toast("添加成功!");
- this.$router.push("/newUser");
- } else {
- Toast(data.msg);
- }
+
+ let data;
+ if (this._id) {
+ // 编辑
+ opts.id = this._id;
+ data = await api.getUpdate(opts);
+ } else {
+ // 新增
+ data = await api.addBankCard(opts);
+ }
+ if (data.status === 0) {
+ Toast(this.$t("hj220"));
+ this.$router.push("/banklist");
+ } else {
+ Toast(data.msg);
+ }
}
},
- async getCardDetail () {
+ async getCardDetail() {
// 获取银行卡信息
- let data = await api.getBankCard()
- if (data.status === 0) {
- const {bankAddress, bankName, bankNo} = data.data;
- this.bankAddress = bankAddress;
+ let data = await api.getBankCard();
+ if (data.status == 0) {
+ const { bankAddress, bankName, bankNo, bankImg } = data.data;
+ this.banif = bankAddress;
this.bankName = bankName;
+ this.bankun = bankImg;
this.bankNo = bankNo;
- this.addBank = false;
+ // this.addBank = false;
+ this.addBank = true;
} else {
this.addBank = true;
}
- },
+ }
}
};
</script>
<style scoped lang="less">
+
.bank_card_page {
width: 100%;
height: 100%;
background: #fff;
+
.content {
width: 100%;
height: 100%;
padding: 0 0.6rem;
+
.top_back {
width: 100%;
height: 2rem;
+
> div {
width: 10%;
height: 100%;
display: flex;
align-items: center;
}
+
img {
width: 0.6rem;
height: 0.6rem;
}
}
+
.titles {
width: 100%;
height: 1.5rem;
font-size: 0.641rem;
margin-top: 1rem;
+
span {
font-weight: 600;
}
}
}
+
.bank_name {
width: 100%;
height: 1.5rem;
@@ -142,22 +360,26 @@
background: rgb(247, 247, 247);
border-radius: 0.2rem;
margin-top: 0.3rem;
+
.lefts {
- width: 25%;
+ 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%;
@@ -165,15 +387,32 @@
}
}
}
+
.bank_name.bind {
display: flex;
align-items: center;
justify-content: center;
- background: #2d6ae9;
+ background: #185546;
font-size: 0.4103rem;
color: #fff;
+
span {
font-weight: 600;
}
}
-</style>
\ No newline at end of file
+/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.35rem;
+ color: #14181f;
+}
+</style>
--
Gitblit v1.9.3