钱包 新增账户验证

This commit is contained in:
asd 2020-11-03 11:51:51 +08:00
parent 3665d7613a
commit c02a32355b
3 changed files with 505 additions and 352 deletions

View File

@ -293,4 +293,6 @@ export default {
fengmianyaoqiu:"Cover requirements:",
fengmianyaoqiu1:"File extension: JPG, png",
fengmianyaoqiu2:"File size limit: 2m",
kahaoweikong:"Card number cannot be empty",
kaihuhangweikong:"Swiftcode cannot be empty"
}

View File

@ -292,5 +292,7 @@ export default {
chushihuashibai:"初始化本地流失败",
buzhichifenxiang:"您的浏览器不支持屏幕分享请下载新版chrome",
xuanzefenxiangneirong:"请选择分享的内容",
guanbishibai:"关闭失败"
guanbishibai:"关闭失败",
kahaoweikong:"卡号不能为空",
kaihuhangweikong:"开户行不能为空"
}

View File

@ -1,392 +1,541 @@
<template>
<div class="cashout">
<div class="mingxilist">
<div class="tabs">
<div class="beforetab">{{lan.$t('xinzengzhanghu')}}</div>
</div>
<div class="line"></div>
<div class="choose">
<div class="label"><span style="color:red">*</span>{{lan.$t('xuanzezhanghu')}}</div>
<!-- <a-radio></a-radio> -->
<div v-if="lan.$s()=='zh'">
<a-radio-group
name="radioGroup"
class="accountlist"
@change="onChange"
v-model:value="accountinfo.type"
>
<a-radio :value="4">
<img src="@/static/images/bank.png" alt="" class="icon icon1" />
<span>{{lan.$t('yinhangka')}}</span>
</a-radio>
<a-radio :value="2">
<img src="@/static/images/walletzfb.png" alt="" class="icon" />
<span>{{lan.$t('zhifubao')}}</span>
</a-radio>
<a-radio :value="1">
<img src="@/static/images/walletweixin.png" alt="" class="icon" />
<span>{{lan.$t('weixin')}}</span>
</a-radio>
</a-radio-group>
</div>
<div v-else>
<a-radio-group
name="radioGroup"
v-model="paytypeforign"
class="accountlist"
@change="onChange1"
:default-value="1"
>
<a-radio :value="1">
<img
src="@/static/images/foreignbank.png"
alt=""
class="icon icon1"
/>
<span>{{lan.$t('yinhangka')}}</span>
</a-radio>
<a-radio :value="2">
<img src="@/static/images/paypi.png" alt="" class="icon" />
<span>payple</span>
</a-radio>
</a-radio-group>
</div>
</div>
<div class="cashoutmoney" v-if="accountinfo.type == 4 && lan.$s()=='zh'">
<a-form >
<div>
<div class="infoitem">
<span class="label label1"><span style="color:red">*</span>{{lan.$t('xingming')}}</span>
<a-input v-model:value="accountinfo.mname" class="shuru" :placeholder="lan.$t('shuruxingming')" />
<div class="cashout">
<div class="mingxilist">
<div class="tabs">
<div class="beforetab">{{ lan.$t("xinzengzhanghu") }}</div>
</div>
<div class="infoitem">
<span class="label label1"><span style="color:red">*</span>{{lan.$t('kahao')}}</span>
<a-input
v-model:value="accountinfo.bankcode"
class="shuru"
:placeholder="lan.$t('shurukahao')"
/>
<div class="line"></div>
<div class="choose">
<div class="label">
<span style="color: red">*</span
>{{ lan.$t("xuanzezhanghu") }}
</div>
<!-- <a-radio></a-radio> -->
<div v-if="lan.$s() == 'zh'">
<a-radio-group
name="radioGroup"
class="accountlist"
@change="onChange"
v-model:value="accountinfo.type"
>
<a-radio :value="4">
<img
src="@/static/images/bank.png"
alt=""
class="icon icon1"
/>
<span>{{ lan.$t("yinhangka") }}</span>
</a-radio>
<a-radio :value="2">
<img
src="@/static/images/walletzfb.png"
alt=""
class="icon"
/>
<span>{{ lan.$t("zhifubao") }}</span>
</a-radio>
<a-radio :value="1">
<img
src="@/static/images/walletweixin.png"
alt=""
class="icon"
/>
<span>{{ lan.$t("weixin") }}</span>
</a-radio>
</a-radio-group>
</div>
<div v-else>
<a-radio-group
name="radioGroup"
v-model="paytypeforign"
class="accountlist"
@change="onChange1"
:default-value="1"
>
<a-radio :value="4">
<img
src="@/static/images/foreignbank.png"
alt=""
class="icon icon1"
/>
<span>{{ lan.$t("yinhangka") }}</span>
</a-radio>
<a-radio :value="3">
<img
src="@/static/images/paypi.png"
alt=""
class="icon"
/>
<span>payple</span>
</a-radio>
</a-radio-group>
</div>
</div>
<div class="infoitem">
<span class="label label1"><span style="color:red">*</span>{{lan.$t('kaihuhang')}}</span>
<a-input
v-model:value="accountinfo.bankname"
class="shuru shuru2"
:placeholder="lan.$t('shurukaihuhang')"
/>
<div
class="cashoutmoney"
v-if="accountinfo.type == 4 && lan.$s() == 'zh'"
>
<a-form>
<div>
<div class="infoitem">
<span class="label label1"
><span style="color: red">*</span
>{{ lan.$t("xingming") }}</span
>
<a-input
v-model:value="accountinfo.mname"
class="shuru"
:placeholder="lan.$t('shuruxingming')"
/>
</div>
<div class="infoitem">
<span class="label label1"
><span style="color: red">*</span
>{{ lan.$t("kahao") }}</span
>
<a-input
v-model:value="accountinfo.bankcode"
class="shuru"
:placeholder="lan.$t('shurukahao')"
/>
</div>
<div class="infoitem">
<span class="label label1"
><span style="color: red">*</span
>{{ lan.$t("kaihuhang") }}</span
>
<a-input
v-model:value="accountinfo.bankname"
class="shuru shuru2"
:placeholder="lan.$t('shurukaihuhang')"
/>
</div>
</div>
</a-form>
</div>
<div
class="cashoutmoney"
v-if="accountinfo.type == 2 && lan.$s() == 'zh'"
>
<div>
<div class="infoitem">
<span class="label label1"
><span style="color: red">*</span
>{{ lan.$t("zhanghao") }}</span
>
<a-input
v-model:value="accountinfo.account"
class="shuru"
:placeholder="lan.$t('shuruzhifubao')"
/>
</div>
</div>
</div>
<div
class="cashoutmoney"
v-if="accountinfo.type == 1 && lan.$s() == 'zh'"
>
<div class="label label1">
<span style="color: red">*</span
>{{ lan.$t("saomabangding") }}
</div>
<div class="ewmbox">
<img
src="@/static/images/erweima.png"
alt=""
class="ewmpic"
/>
<div class="desc">{{ lan.$t("zhu") }}</div>
<div class="desc desc1">
{{ lan.$t("weixinbangding") }}
</div>
</div>
</div>
</div>
</a-form>
</div>
<div class="cashoutmoney" v-if="accountinfo.type == 2 && lan.$s()=='zh'">
<div>
<div class="infoitem">
<span class="label label1"><span style="color:red">*</span>{{lan.$t('zhanghao')}}</span>
<a-input
v-model:value="accountinfo.account"
class="shuru"
:placeholder="lan.$t('shuruzhifubao')"
/>
</div>
</div>
</div>
<div class="cashoutmoney" v-if="accountinfo.type == 1 && lan.$s()=='zh'">
<div class="label label1"><span style="color:red">*</span>{{lan.$t('saomabangding')}}</div>
<div class="ewmbox">
<img src="@/static/images/erweima.png" alt="" class="ewmpic" />
<div class="desc">{{lan.$t('zhu')}}</div>
<div class="desc desc1">
{{lan.$t('weixinbangding')}}
</div>
</div>
</div>
<div class="cashoutmoney" v-if="paytypeforign == 1 && lan.$s()=='en'">
<div>
<div class="infoitem">
<span class="label label1"><span style="color:red">*</span>{{lan.$t('zhanghuming')}}</span>
<a-input v-model="accountinfo.mname" class="shuru" :placeholder="lan.$t('shuruxingming')" />
</div>
<div class="infoitem">
<span class="label label1"><span style="color:red">*</span>{{lan.$t('yinhangzhanghu')}}</span>
<a-input
v-model="accountinfo.bankcode"
class="shuru shuru2"
:placeholder="shurukahao"
/>
</div>
<div class="infoitem infoitem1">
<div class="label label1 label2"> <span style="color:red">*</span>{{lan.$t(yinhangbic)}} /swift code </div>
<a-input
v-model="accountinfo.bankname"
class="shuru shuru1"
:placeholder="lan.$t('shurukaihuhang')"
/>
</div>
</div>
</div>
<div
class="cashoutmoney"
v-if="paytypeforign == 4 && lan.$s() == 'en'"
>
<div>
<div class="infoitem">
<span class="label label1"
><span style="color: red">*</span
>{{ lan.$t("zhanghuming") }}</span
>
<a-input
v-model:value="accountinfo.mname"
class="shuru"
:placeholder="lan.$t('shuruxingming')"
/>
</div>
<div class="infoitem">
<span class="label label1"
><span style="color: red">*</span
>{{ lan.$t("yinhangzhanghu") }}</span
>
<a-input
v-model:value="accountinfo.bankcode"
class="shuru shuru2"
:placeholder="lan.$t('shurukahao')"
/>
</div>
<div class="infoitem infoitem1">
<div class="label label1 label2">
<span style="color: red">*</span
>{{ lan.$t(yinhangbic) }} /swift code
</div>
<a-input
v-model:value="accountinfo.bankname"
class="shuru shuru1"
:placeholder="lan.$t('shurukaihuhang')"
/>
</div>
</div>
</div>
<div class="cashoutmoney" v-if="paytypeforign == 2 && lan.$s()=='en'">
<div>
<div class="infoitem">
<span class="label label1"><span style="color:red">*</span>{{lan.$t('zhanghao')}}</span>
<a-input
v-model:value="accountinfo.account"
class="shuru"
:placeholder="lan.$t('shuruzhanghao')"
/>
</div>
<div
class="cashoutmoney"
v-if="paytypeforign == 3 && lan.$s() == 'en'"
>
<div>
<div class="infoitem">
<span class="label label1"
><span style="color: red">*</span
>{{ lan.$t("zhanghao") }}</span
>
<a-input
v-model:value="accountinfo.account"
class="shuru"
:placeholder="lan.$t('shuruzhanghao')"
/>
</div>
</div>
</div>
<div class="cashoutall submit" @click="sub">
{{ lan.$t("tijiao") }}
</div>
<NavBottom class="navbottom"></NavBottom>
</div>
</div>
<div class="cashoutall submit" @click="sub">{{lan.$t('tijiao')}}</div>
<NavBottom class="navbottom"></NavBottom>
</div>
</div>
</template>
<script lang="ts">
import { defineComponent, onMounted, ref, toRaw } from "vue";
import NavBottom from "@/components/NavBottom.vue";
import { accountadd, editaccount, getaccountinfo } from '@/api';
import { useRoute } from 'vue-router';
import { useI18n } from '@/utils/i18n';
import { accountadd, editaccount, getaccountinfo } from "@/api";
import { useRoute } from "vue-router";
import { useI18n } from "@/utils/i18n";
import { message } from "ant-design-vue";
export default defineComponent({
name: "Cashout",
components: {
NavBottom,
},
setup() {
const lan: any = useI18n();
const money = ref(0);
const paytype = ref(4);
const paytypeforign = ref(1);
const accountinfo = ref<any>({
type: 4,
account:"",
mname: "",
bankcode: "",
bankname: "",
});
interface Changes {
target: {
value: number;
name: "Cashout",
components: {
NavBottom,
},
setup() {
const lan: any = useI18n();
const money = ref(0);
const paytype = ref(4);
const paytypeforign = ref(4);
const accountinfo = ref<any>({
type: 4,
account: "",
mname: "",
bankcode: "",
bankname: "",
});
interface Changes {
target: {
value: number;
};
}
const onChange: (e: Changes) => void = (e: Changes) => {
console.log("radio checked", e.target.value);
paytype.value = e.target.value;
accountinfo.value.type = e.target.value;
};
}
const onChange1: (e: Changes) => void = (e: Changes) => {
console.log("radio checked", e.target.value);
paytypeforign.value = e.target.value;
};
function sub() {
console.log(toRaw(accountinfo.value), 11);
// cosnole.log(useRoute().query.id)
const accountinfofin = toRaw(accountinfo.value);
if (lan.$s() == "zh") {
if (accountinfofin.type == 4) {
console.log(paytype.value);
if (accountinfofin.mname == "") {
message.error(lan.$t("xingmingweikong"));
} else if (accountinfofin.bankcode == "") {
message.error(lan.$t("kahaoweikong"));
} else if (accountinfofin.bankname == "") {
message.error(lan.$t("kaihuhangweikong"));
} else {
if (toRaw(accountinfo.value).accountid) {
console.log(300);
editaccount(toRaw(accountinfo.value).accountid);
} else {
console.log(111);
accountadd(toRaw(accountinfo.value));
}
}
} else if (accountinfofin.type == 2) {
if (accountinfofin.account == "") {
message.error(lan.$t("zhanghaoweikong"));
} else {
if (toRaw(accountinfo.value).accountid) {
console.log(300);
editaccount(toRaw(accountinfo.value).accountid);
} else {
console.log(111);
accountadd(toRaw(accountinfo.value));
}
}
} else if (accountinfofin.type == 1) {
if (toRaw(accountinfo.value).accountid) {
console.log(300);
editaccount(toRaw(accountinfo.value).accountid);
} else {
console.log(111);
accountadd(toRaw(accountinfo.value));
}
}
} else if (lan.$s() == "en") {
if (paytypeforign.value == 4) {
console.log(paytype.value);
if (accountinfo.value.mname == "") {
message.error(lan.$t("xingmingweikong"));
} else if (accountinfo.value.bankcode == "") {
message.error(lan.$t("kahaoweikong"));
} else if (accountinfo.value.bankname == "") {
message.error(lan.$t("kaihuhangweikong"));
} else {
if (toRaw(accountinfo.value).accountid) {
editaccount(toRaw(accountinfo.value).accountid);
} else {
accountadd(toRaw(accountinfo.value));
}
}
} else if (paytypeforign.value == 3) {
console.log(3333)
if (accountinfo.value.account == "") {
message.error(lan.$t("zhanghaoweikong"));
} else {
if (toRaw(accountinfo.value).accountid) {
console.log(300);
editaccount(toRaw(accountinfo.value).accountid);
} else {
console.log(111);
accountadd(toRaw(accountinfo.value));
}
}
}
}
// if (accountinfofin.account == "") {
// message.error(lan.$t("zhanghaoweikong"));
// } else {
// if (toRaw(accountinfo.value).accountid) {
// console.log(300);
// editaccount(toRaw(accountinfo.value).accountid);
// } else {
// console.log(111);
// accountadd(toRaw(accountinfo.value));
// }
// }
}
const ifchina = ref(true);
const onChange: (e: Changes) => void = (e: Changes) => {
console.log("radio checked", e.target.value);
paytype.value = e.target.value;
accountinfo.value.type=e.target.value
};
const onChange1: (e: Changes) => void = (e: Changes) => {
console.log("radio checked", e.target.value);
paytypeforign.value = e.target.value;
};
function sub(){
console.log(toRaw(accountinfo.value),11)
// cosnole.log(useRoute().query.id)
if(toRaw(accountinfo.value).accountid){
console.log(300)
editaccount(toRaw(accountinfo.value).accountid)
}else{
console.log(111)
accountadd(toRaw(accountinfo.value))
}
}
const ifchina = ref(true);
onMounted(async () => {
if(useRoute().query.id){
accountinfo.value=await getaccountinfo(useRoute().query.id)
// console.log(await getaccountinfo(useRoute().query.id),233)
}
// useRoute().query.id
})
return {
money,
onChange,
paytype,
ifchina,
paytypeforign,
onChange1,
sub,
accountinfo,
lan
};
},
onMounted(async () => {
if (useRoute().query.id) {
accountinfo.value = await getaccountinfo(useRoute().query.id);
// console.log(await getaccountinfo(useRoute().query.id),233)
}
// useRoute().query.id
});
return {
money,
onChange,
paytype,
ifchina,
paytypeforign,
onChange1,
sub,
accountinfo,
lan,
};
},
});
</script>
<style lang="scss" scoped>
.cashout ::v-deep(.ant-breadcrumb) > span:last-child {
color: #08ae98;
color: #08ae98;
}
.cashout ::v-deep(.ant-radio-wrapper) {
display: flex;
display: flex;
}
.cashout ::v-deep(.ant-radio-checked) ::v-deep(.ant-radio-inner) {
border-color: #08ae98 !important;
border-color: #08ae98 !important;
}
.cashout ::v-deep(.ant-radio-inner::after) {
background: #08ae98 !important;
background: #08ae98 !important;
}
// .cashout ::v-deep(.ant-radio) {
// // top: 43px;
// }
.cashout {
.mingxilist {
width: 1150px;
// height: 533px;
background: white;
border-radius: 18px;
margin-top: 18px;
.tabs {
display: flex;
flex-wrap: nowrap;
padding-top: 35px;
padding-left: 40px;
.residue {
font-size: 11px;
margin: auto 0;
color: #08ae98;
position: relative;
left: -30px;
}
.topbtn {
// width: 89px;
height: 17px;
padding-left: 14px;
padding-right: 14px;
line-height: 17px;
border: 1px solid #08ae98;
border-radius: 3px;
font-size: 10px;
color: #08ae98;
font-weight: 500;
margin: auto 0;
}
.topbtn2 {
margin-left: 642px;
}
.topbtn1 {
padding-left: 9px;
padding-right: 9px;
color: #d12c2e;
border: 1px solid #d12c2e;
margin-left: 11px;
}
}
.line {
width: 1070px;
height: 1px;
background: #eeeeee;
margin: 0 auto;
margin-top: 11px;
}
.beforetab {
color: #121212;
font-size: 13px;
line-height: 35px;
font-weight: bold;
margin-right: 57px;
}
.choose {
margin-top: 28px;
margin-left: 40px;
display: flex;
.accountlist {
display: flex;
color: #404040;
font-size: 11px;
.mingxilist {
width: 1150px;
// height: 533px;
background: white;
border-radius: 18px;
margin-top: 18px;
.tabs {
display: flex;
flex-wrap: nowrap;
padding-top: 35px;
padding-left: 40px;
.residue {
font-size: 11px;
margin: auto 0;
color: #08ae98;
position: relative;
left: -30px;
}
.topbtn {
// width: 89px;
height: 17px;
padding-left: 14px;
padding-right: 14px;
line-height: 17px;
border: 1px solid #08ae98;
border-radius: 3px;
font-size: 10px;
color: #08ae98;
font-weight: 500;
margin: auto 0;
}
.topbtn2 {
margin-left: 642px;
}
.topbtn1 {
padding-left: 9px;
padding-right: 9px;
color: #d12c2e;
border: 1px solid #d12c2e;
margin-left: 11px;
}
}
.line {
width: 1070px;
height: 1px;
background: #eeeeee;
margin: 0 auto;
margin-top: 11px;
}
.beforetab {
color: #121212;
font-size: 13px;
line-height: 35px;
font-weight: bold;
margin-right: 57px;
}
.choose {
margin-top: 28px;
margin-left: 40px;
display: flex;
.accountlist {
display: flex;
color: #404040;
font-size: 11px;
.icon {
width: 17px;
height: 17px;
margin-right: 6px;
.icon {
width: 17px;
height: 17px;
margin-right: 6px;
}
.icon1 {
width: 28px;
height: 18px;
}
}
}
.icon1 {
width: 28px;
height: 18px;
.label {
color: #808080;
font-size: 11px;
margin-right: 28px;
}
}
}
.label {
color: #808080;
font-size: 11px;
margin-right: 28px;
}
.label1 {
margin-left: 40px;
}
.label2{
width: 90px;
word-wrap:break-word!important
}
.cashoutmoney {
display: flex;
margin-top: 31px;
.infoitem {
margin-bottom: 28px;
}
.infoitem1{
display: flex;
}
.shuru {
width: 171px;
height: 23px;
margin-left: 30px;
}
.shuru1 {
margin-left: -15px;
}
.shuru2{
margin-left:18px
}
.ewmbox {
display: flex;
.ewmpic {
width: 114px;
height: 114px;
margin-right: 23px;
.label1 {
margin-left: 40px;
}
.desc {
color: #666666;
font-size: 10px;
// line-height: 114px;
margin: auto 0;
.label2 {
width: 90px;
word-wrap: break-word !important;
}
.desc1 {
width: 149px;
position: relative;
top: 10px;
.cashoutmoney {
display: flex;
margin-top: 31px;
.infoitem {
margin-bottom: 28px;
}
.infoitem1 {
display: flex;
}
.shuru {
width: 171px;
height: 23px;
margin-left: 30px;
}
.shuru1 {
margin-left: -15px;
}
.shuru2 {
margin-left: 18px;
}
.ewmbox {
display: flex;
.ewmpic {
width: 114px;
height: 114px;
margin-right: 23px;
}
.desc {
color: #666666;
font-size: 10px;
// line-height: 114px;
margin: auto 0;
}
.desc1 {
width: 149px;
position: relative;
top: 10px;
}
}
}
.cashoutall {
width: 67px;
height: 23px;
line-height: 23px;
background: #08ae98;
border-radius: 3px;
color: white;
text-align: center;
margin-left: 23px;
font-weight: bold;
}
.submit {
font-size: 10px;
font-weight: 500;
position: relative;
top: 56px;
left: 20px;
}
}
}
.cashoutall {
width: 67px;
height: 23px;
line-height: 23px;
background: #08ae98;
border-radius: 3px;
color: white;
text-align: center;
margin-left: 23px;
font-weight: bold;
}
.submit {
font-size: 10px;
font-weight: 500;
position: relative;
top: 56px;
left: 20px;
}
}
.navbottom {
padding-top: 250px;
padding-bottom: 30px;
}
.navbottom {
padding-top: 250px;
padding-bottom: 30px;
}
}
</style>