<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>{{ }}</span>
|
</div> -->
|
<div class="bank_name" v-if="addBank == false && bankName">
|
<div class="lefts">
|
<span>{{ $t("hj213") }}</span>
|
</div>
|
<div class="rights">
|
<input
|
type="text"
|
:placeholder="$t('hj306')"
|
v-model="bankName"
|
:disabled="!addBank"
|
/>
|
</div>
|
</div>
|
<div class="bank_name" v-if="addBank == false && bankNo">
|
<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 == false && banif">
|
<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==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;">
|
<!-- {{ name }} -->
|
<input
|
type="text"
|
:placeholder="$t('hj306')"
|
v-model="name"
|
: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("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">
|
<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>{{ $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>
|
|
<script>
|
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: "",
|
bankEmail: "",
|
bankCardholderName: "",
|
array: [],
|
index: 0,
|
addBank: false,
|
id: "",
|
code: "",
|
name: ""
|
};
|
},
|
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"));
|
}
|
// else if (isNull(this.bankAddress) ) {
|
// Toast(this.$t("hj219"));
|
// }
|
else {
|
let opts = {
|
bankName: this.name,
|
bankNo: this.bankNo,
|
bankAddress: this.banif,
|
bankImg: this.code,
|
bankEmail: this.bankEmail,
|
bankCardholderName: this.bankCardholderName
|
};
|
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.banif = bankAddress;
|
this.bankName = bankName;
|
this.bankun = bankImg;
|
this.bankNo = bankNo;
|
// 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;
|
display: flex;
|
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;
|
}
|
</style>
|
