<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>
|
<div class="content">
|
<div class="bank">
|
<!-- <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> -->
|
</van-swipe-cell>
|
</div>
|
<div class="bank_name">
|
<!-- <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 { 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: "",
|
// 编辑弹窗相关数据
|
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;
|
},
|
// 保存编辑
|
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) {
|
// 跳转修改银行卡
|
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">
|
@green: #c4d600;
|
|
.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%;
|
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;
|
display: flex;
|
padding: 0 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;
|
}
|
}
|
|
/* 编辑弹窗样式 */
|
/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>
|
