<template>
|
<div class="addBank">
|
<order-nav class="mb-56" :title="$t('添加 Al-Rafidain QiServices')"/>
|
<div class="content pr-32 pl-32">
|
<c2c-input
|
label="Name"
|
color="#7B7F87"
|
v-model="info.name"
|
placeholder="James"
|
/>
|
<c2c-input
|
label="Phone Number"
|
v-model="info.phone"
|
placeholder="Phone Number"
|
/>
|
<c2c-input
|
label="Bank Account Number"
|
v-model="bankNumber"
|
placeholder="Bank Account Number"
|
/>
|
<c2c-input :label="$t('Note（选填）')">
|
<textarea
|
class="w-full h-240"
|
:style="{'background': '#F5F5F5'}"
|
v-model="info.desc"
|
placeholder="Note"></textarea>
|
</c2c-input>
|
</div>
|
<div class="fixed bottom-0 left-0 w-full pl-32 pr-32 pb-72 box-border">
|
<div class="font-24 mb-24" :style="{'color': '#868D9A'}">
|
{{ $t('温馨提示：当您出售数字货币时，您选择的收款方式将向买方展示，请确认信息填写准确无误。') }}
|
</div>
|
<van-button
|
v-show="disabled"
|
class="w-full"
|
type="info"
|
@click="save"
|
>{{ $t('保存') }}
|
</van-button>
|
<van-button
|
v-show="!disabled"
|
disabled
|
color="#EAEBEE"
|
class="w-full"
|
>{{ $t('保存') }}
|
</van-button>
|
</div>
|
</div>
|
</template>
|
|
<script>
|
import {Button, Toast,} from 'vant';
|
|
import OrderNav from "@/components/order-nav/OrderNav";
|
import C2cInput from "@/page/placeAnOrder/components/c2cInput/C2cInput";
|
|
export default {
|
name: "CN",
|
props: ["data"], // query传参
|
data() {
|
return {
|
disabled: "",
|
info: {
|
name: "", // 姓名
|
number: "", // 银行卡号
|
phone: "",
|
desc: "", // 支行
|
}
|
}
|
},
|
created() {
|
console.log(this.data);
|
if (this.data) {
|
this.info.name = this.data.name;
|
this.info.phone = this.data.phone;
|
this.info.number = this.data.number;
|
this.info.desc = this.data.desc;
|
}
|
},
|
methods: {
|
save() {
|
Toast(this.$t("保存"))
|
}
|
},
|
computed: {
|
bankNumber: {
|
get() {
|
return this.info.number && this.info.number.replace(/(\d{4})/g, '$1 ').trim()
|
},
|
set(newVal) {
|
this.info.number = newVal;
|
}
|
},
|
},
|
components: {
|
[Button.name]: Button,
|
OrderNav,
|
C2cInput,
|
},
|
watch: {
|
// 是否存在空值
|
info: {
|
deep: true,
|
handler() {
|
const res = Object.keys(this.info).filter(key => this.info[key] === "" || this.info[key] === undefined)
|
|
this.disabled = res.length === 0;
|
console.log(this.disabled)
|
},
|
immediate: true
|
}
|
}
|
}
|
</script>
|
|
<style lang="scss" scoped>
|
.addBank{
|
width: 100%;
|
box-sizing: border-box;
|
}
|
::v-deep {
|
.payment-input-wrapper {
|
margin-bottom: 60px;
|
|
input {
|
height: 100px;
|
}
|
}
|
}
|
|
.desc {
|
width: 100%;
|
padding: 46px 24px;
|
border-radius: 8px;
|
background: #F0F1F4;
|
}
|
</style>
|
