386 lines
13 KiB
Vue
386 lines
13 KiB
Vue
<template>
|
||
<div class="cashout">
|
||
<div class="mingxilist">
|
||
<div class="tabs">
|
||
<div class="beforetab">提现到指定账户</div>
|
||
<span class="residue">余额：{{ yue }}</span>
|
||
<div class="topbtn topbtn2">提现到指定账户</div>
|
||
<div class="topbtn topbtn1">提现记录</div>
|
||
</div>
|
||
<div class="line"></div>
|
||
<div class="choose">
|
||
<div class="chooseitem">
|
||
<div class="label">选择账户</div>
|
||
<!-- <a-radio></a-radio> -->
|
||
<!-- {{payinfo.type}} -->
|
||
<a-radio-group
|
||
v-model:value="payinfo.type"
|
||
@change="onChange"
|
||
>
|
||
<div class="accountlist">
|
||
<a-radio
|
||
v-for="(i, j) in accountlist"
|
||
:key="j"
|
||
:value="j"
|
||
>
|
||
<div class="accountitem">
|
||
<div class="hostinfo" v-if="i.type == 4">
|
||
<div>
|
||
<img
|
||
src="@/static/images/bank.png"
|
||
alt=""
|
||
class="icon"
|
||
/>
|
||
<span class="accounttype"
|
||
>银行卡</span
|
||
>
|
||
</div>
|
||
</div>
|
||
<div class="hostinfo" v-if="i.type == 2">
|
||
<div>
|
||
<img
|
||
src="@/static/images/walletzfb.png"
|
||
alt=""
|
||
class="icon icon1"
|
||
/>
|
||
<span class="accounttype"
|
||
>支付宝</span
|
||
>
|
||
</div>
|
||
</div>
|
||
<div class="hostinfo" v-if="i.type == 1">
|
||
<div>
|
||
<img
|
||
src="@/static/images/walletweixin.png"
|
||
alt=""
|
||
class="icon icon1"
|
||
/>
|
||
<span class="accounttype"
|
||
>微信</span
|
||
>
|
||
</div>
|
||
</div>
|
||
<div class="zhanghao">
|
||
账号：6217 **** **** **** 175
|
||
</div>
|
||
</div>
|
||
</a-radio>
|
||
|
||
<!-- <a-radio :value="2">
|
||
<div class="accountitem">
|
||
<div class="hostinfo">
|
||
<div>
|
||
<img
|
||
src="@/static/images/walletzfb.png"
|
||
alt=""
|
||
class="icon icon1"
|
||
/>
|
||
<span class="accounttype">支付宝</span>
|
||
</div>
|
||
</div>
|
||
<div class="zhanghao">账号：6217 **** **** **** 175</div>
|
||
</div>
|
||
</a-radio>
|
||
<a-radio :value="1">
|
||
<div class="accountitem">
|
||
<div class="hostinfo">
|
||
<div>
|
||
<img
|
||
src="@/static/images/walletweixin.png"
|
||
alt=""
|
||
class="icon icon1"
|
||
/>
|
||
<span class="accounttype">微信</span>
|
||
</div>
|
||
</div>
|
||
<div class="zhanghao">账号：6217 **** **** **** 175</div>
|
||
</div>
|
||
</a-radio> -->
|
||
</div>
|
||
</a-radio-group>
|
||
</div>
|
||
<div class="cashoutmoney">
|
||
<div class="label">提现金额</div>
|
||
<div class="moneynum">
|
||
<a-input v-model:value="payinfo.money" class="shuru" />
|
||
<div>￥</div>
|
||
<div class="cashoutall" @click="all">全部金额</div>
|
||
<div class="desc">
|
||
注：每笔提现收取0.1%服务费，最低￥0.1
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div
|
||
class="ale"
|
||
v-if="
|
||
payinfo.money < 100 || payinfo.money > parseFloat(yue)
|
||
"
|
||
>
|
||
*您的余额只有{{ parseFloat(yue) }}，最低提现金额￥100
|
||
</div>
|
||
</div>
|
||
<div class="cashoutall submit" @click="sub">立即提现</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 { cashout, getwallect } from "@/api";
|
||
import store from "@/store";
|
||
import { message } from "ant-design-vue";
|
||
export default defineComponent({
|
||
name: "Cashout",
|
||
components: {
|
||
NavBottom,
|
||
},
|
||
setup() {
|
||
const money = ref(0);
|
||
const payinfo = ref<any>({
|
||
type: 0,
|
||
money: 0,
|
||
account: "",
|
||
mname: "",
|
||
bankcode: "",
|
||
bankname: "",
|
||
international: 0,
|
||
});
|
||
const moneychange: (e: number) => void = (e: number) => {
|
||
console.log(e);
|
||
};
|
||
// const yue=ref<string>(store.state.userinfo.money)
|
||
const yue = ref<number>(10000);
|
||
// yue.value=store.state.userinfo.money
|
||
const accountlist = ref<Array<any>>([]);
|
||
|
||
onMounted(async () => {
|
||
accountlist.value = await getwallect();
|
||
console.log(store.state.userinfo);
|
||
});
|
||
function onChange(e: any) {
|
||
console.log(e.target.value);
|
||
payinfo.value.type = e.target.value;
|
||
// payinfo.value.typeid=toRaw(accountlist.value)[e.target.value].wallectid
|
||
// payinfo.value.type=toRaw(accountlist.value)[e.target.value].wallectid
|
||
}
|
||
function all() {
|
||
payinfo.value.money = yue.value;
|
||
}
|
||
function sub() {
|
||
console.log(toRaw(payinfo.value));
|
||
|
||
payinfo.value.money = Number(payinfo.value.money);
|
||
console.log(toRaw(payinfo.value));
|
||
if (accountlist.value.length == 0) {
|
||
message.error("您的账户列表为空，请先添加");
|
||
return;
|
||
} else if (payinfo.value.money < 100) {
|
||
message.error("最低提现金额为100");
|
||
return;
|
||
} else if (payinfo.value.money > yue.value) {
|
||
message.error("余额不足");
|
||
} else {
|
||
cashout(
|
||
toRaw(payinfo.value),
|
||
toRaw(accountlist.value)[payinfo.value.type]
|
||
);
|
||
}
|
||
|
||
// cashout(
|
||
// toRaw(payinfo.value),
|
||
// toRaw(accountlist.value)[payinfo.value.type]
|
||
// );
|
||
}
|
||
return {
|
||
money,
|
||
moneychange,
|
||
payinfo,
|
||
onChange,
|
||
all,
|
||
yue,
|
||
sub,
|
||
accountlist,
|
||
store,
|
||
};
|
||
},
|
||
});
|
||
</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) {
|
||
top: 43px;
|
||
height: 13px;
|
||
}
|
||
.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;
|
||
|
||
.label {
|
||
color: #808080;
|
||
font-size: 11px;
|
||
margin-right: 28px;
|
||
}
|
||
.chooseitem {
|
||
display: flex;
|
||
margin-bottom: 34px;
|
||
// .label {
|
||
// width: 150px;
|
||
// }
|
||
.accountlist {
|
||
display: flex;
|
||
flex-wrap: wrap;
|
||
.accountitem {
|
||
// width: 200px;
|
||
padding-bottom: 16px;
|
||
padding-right: 20px;
|
||
border: 1px solid #dcdfe0;
|
||
background: white;
|
||
border-radius: 17px;
|
||
margin-left: 17px;
|
||
margin-right: 46px;
|
||
margin-bottom: 17px;
|
||
.hostinfo {
|
||
display: flex;
|
||
padding-top: 17px;
|
||
.icon {
|
||
width: 47px;
|
||
height: 29px;
|
||
margin-right: 11px;
|
||
margin-left: 17px;
|
||
}
|
||
.icon1 {
|
||
width: 29px !important;
|
||
height: 29px !important;
|
||
}
|
||
.accounttype {
|
||
font-size: 13px;
|
||
color: #111111;
|
||
font-weight: 500;
|
||
}
|
||
}
|
||
.zhanghao {
|
||
color: #111111;
|
||
font-size: 10px;
|
||
margin-top: 38px;
|
||
margin-left: 17px;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
.cashoutmoney {
|
||
display: flex;
|
||
.moneynum {
|
||
display: flex;
|
||
font-size: 11px;
|
||
line-height: 23px;
|
||
color: #808080;
|
||
.shuru {
|
||
width: 171px;
|
||
height: 23px;
|
||
margin-right: 8px;
|
||
}
|
||
|
||
.desc {
|
||
margin-left: 17px;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
.cashoutall {
|
||
width: 67px;
|
||
height: 23px;
|
||
line-height: 23px;
|
||
background: #08ae98;
|
||
border-radius: 3px;
|
||
color: white;
|
||
text-align: center;
|
||
margin-left: 23px;
|
||
font-weight: bold;
|
||
}
|
||
.ale {
|
||
color: #d12c2e;
|
||
font-size: 10px;
|
||
position: relative;
|
||
left: 80px;
|
||
top: 11px;
|
||
display: inline-block;
|
||
}
|
||
.submit {
|
||
font-size: 10px;
|
||
font-weight: 500;
|
||
position: relative;
|
||
top: 56px;
|
||
left: 20px;
|
||
}
|
||
}
|
||
|
||
.navbottom {
|
||
padding-top: 250px;
|
||
padding-bottom: 30px;
|
||
}
|
||
}
|
||
</style> |