392 lines
10 KiB
Vue
392 lines
10 KiB
Vue
<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">{{lan.$t('xuanzezhanghu')}}</div>
|
||
<!-- <a-radio></a-radio> -->
|
||
<div v-if="ifchina">
|
||
<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 && ifchina">
|
||
<a-form >
|
||
<div>
|
||
<div class="infoitem">
|
||
<span class="label label1">{{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">{{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">{{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 && ifchina">
|
||
<div>
|
||
<div class="infoitem">
|
||
<span class="label label1">{{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 && ifchina">
|
||
<div class="label label1">{{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 && !ifchina">
|
||
<div>
|
||
<div class="infoitem">
|
||
<span class="label label1">{{lan.$t('zhanghuming')}}</span>
|
||
<a-input v-model="accountinfo.mname" class="shuru" :placeholder="lan.$t('shuruxingming')" />
|
||
</div>
|
||
<div class="infoitem">
|
||
<span class="label label1">{{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"> {{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 == 2 && !ifchina">
|
||
<div>
|
||
<div class="infoitem">
|
||
<span class="label label1">{{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>
|
||
</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';
|
||
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;
|
||
};
|
||
}
|
||
|
||
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
|
||
};
|
||
},
|
||
});
|
||
</script>
|
||
<style lang="scss" scoped>
|
||
.cashout ::v-deep(.ant-breadcrumb) > span:last-child {
|
||
color: #08ae98;
|
||
}
|
||
.cashout ::v-deep(.ant-radio-wrapper) {
|
||
display: flex;
|
||
}
|
||
.cashout ::v-deep(.ant-radio-checked) ::v-deep(.ant-radio-inner) {
|
||
border-color: #08ae98 !important;
|
||
}
|
||
.cashout ::v-deep(.ant-radio-inner::after) {
|
||
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;
|
||
|
||
.icon {
|
||
width: 17px;
|
||
height: 17px;
|
||
margin-right: 6px;
|
||
}
|
||
.icon1 {
|
||
width: 28px;
|
||
height: 18px;
|
||
}
|
||
}
|
||
}
|
||
.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;
|
||
}
|
||
.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;
|
||
}
|
||
}
|
||
|
||
.navbottom {
|
||
padding-top: 250px;
|
||
padding-bottom: 30px;
|
||
}
|
||
}
|
||
</style> |