393 lines
11 KiB
Vue
393 lines
11 KiB
Vue
<template>
|
||
<div class="withdraw">
|
||
<Header title="立即提现" rightTitle="明细" @rightFuc="$router.push('withdrawRecord')" />
|
||
<div class="main">
|
||
<div class="walletInfoBox">
|
||
<h2>余额(元)</h2>
|
||
<p>
|
||
<img src="@/assets/images/png/mine/coin.png" alt="" />
|
||
{{ userStore.walletInfo.income / 10 }}
|
||
</p>
|
||
</div>
|
||
<div class="infobox">
|
||
<div class="lable">提现币类：</div>
|
||
<div class="input">人民币</div>
|
||
</div>
|
||
<div class="infobox">
|
||
<div class="lable">提现金额：</div>
|
||
<div class="input">
|
||
<van-field
|
||
v-model="state.amount"
|
||
:placeholder="state.placeholder"
|
||
@input="changeAmount"
|
||
type="digit"
|
||
input-align="left"
|
||
:clearable="false"
|
||
:border="false"
|
||
/>
|
||
</div>
|
||
</div>
|
||
<div class="infobox">
|
||
<div class="lable">提现方式：</div>
|
||
<div class="input radios">
|
||
<van-radio-group v-model="state.checked" direction="horizontal" @change="changeType">
|
||
<van-radio name="bank" checked-color="#F68804">
|
||
<img src="@/assets/images/png/caseBand.png" alt="" />
|
||
银行卡
|
||
</van-radio>
|
||
<van-radio name="usdt" checked-color="#F68804">
|
||
<img src="@/assets/images/png/caseUsdt.png" alt="" />
|
||
USDT
|
||
</van-radio>
|
||
</van-radio-group>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="infobox" v-if="state.checked == 'bank'">
|
||
<div class="lable">银行卡号：</div>
|
||
<div class="input">
|
||
<div class="accountBox" @click="$router.push('bindBankCard')">
|
||
<div class="withdrawAct" v-if="bankCard.act">
|
||
{{ getBankName(bankCard.bankCode) }}({{ bankCard.act.slice(-4) }}) {{ bankCard.actName }}
|
||
</div>
|
||
<div v-else>请选择提现账号</div>
|
||
<div class="rightArrow"></div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="infobox" v-if="state.checked == 'usdt'">
|
||
<div class="lable">钱包地址：</div>
|
||
<div class="input">
|
||
<van-field v-model="state.usdtAddress" placeholder="请输入USDT地址"></van-field>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="infobox">
|
||
<div class="lable">手续费率:</div>
|
||
<div class="input fee-box">
|
||
<span class="fee">{{ state.handlingFee }} %</span>
|
||
<!-- <span>
|
||
本次提现手续:
|
||
<span class="fee">{{ state.formalitiesAmount || 0 }}</span>
|
||
</span> -->
|
||
<span>
|
||
实际到账金额:
|
||
<span class="fee">{{ state.realAmount }}</span>
|
||
</span>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="withdrawTitle">提现规则：</div>
|
||
<!-- <p class="withdrawRule">1.收款账户卡号和姓名必须一致,为避免恶意刷单,到账时间为T+15天</p>
|
||
<p class="withdrawRule">2.银行卡每次提现最低200元起,USDT每次提现最低2000元起</p> -->
|
||
<p class="withdrawRule">
|
||
1、每次提现金额最低{{ state.minMoney }}元起，单笔提现最大{{ state.maxMoney }}元，且为整数。
|
||
</p>
|
||
<p class="withdrawRule">2、每次提现收取{{ state.handlingFee }}%手续费。</p>
|
||
<p class="withdrawRule">3、支持银行卡或USDT提现，收款账户卡号与姓名一致，到账时间未72小时内</p>
|
||
<p class="withdrawRule">4、申请提现后请随时关注收款账户进款通知，长时间未到账请耐心等待</p>
|
||
<div class="footer">
|
||
<div class="withdrawBtn" @click="confirm">立即提现</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</template>
|
||
<script lang="ts" setup>
|
||
import { reactive } from 'vue';
|
||
import { useUserStore } from '@/stores/user';
|
||
import MineApi from '@/service/mine';
|
||
import { useAppStore } from '@/stores/app';
|
||
import { getBank } from '@/utils/bankCardList';
|
||
import { showToast } from 'vant';
|
||
|
||
const userStore = useUserStore();
|
||
const userInfo = userStore.userInfo;
|
||
const bankCard = useAppStore().bankCard;
|
||
const state = reactive({
|
||
amount: '', // 提现金额
|
||
minMoney: 0, // 提现最小金额
|
||
maxMoney: 0, // 提现最大金额
|
||
handlingFee: 0, // 手续费
|
||
formalitiesAmount: 0, //手续费金额
|
||
realAmount: 0, // 实际到账金额
|
||
bankDatas: getBank(), // 银行列表
|
||
usdtAddress: '', // usdt地址
|
||
placeholder: '单笔提现金额范围0-0元',
|
||
loading: true,
|
||
checked: 'bank',
|
||
});
|
||
|
||
const init = () => {
|
||
state.placeholder = '单笔提现金额范围' + state.minMoney + '-' + state.maxMoney + '元';
|
||
};
|
||
|
||
const changeType = () => {
|
||
getWithdrawMethod();
|
||
state.amount = '';
|
||
};
|
||
|
||
// 查询提现方式
|
||
const getWithdrawMethod = async () => {
|
||
try {
|
||
let req = {
|
||
payType: state.checked == 'bank' ? 'bankcard' : 'usdt',
|
||
};
|
||
let res: any = await MineApi.queryWithdrawMethod(req);
|
||
state.loading = false;
|
||
state.minMoney = Number(res.minMoney) / 100;
|
||
state.maxMoney = Number(res.maxMoney) / 100;
|
||
state.handlingFee = res.coinTax;
|
||
init();
|
||
} catch (e) {
|
||
console.log(e);
|
||
}
|
||
};
|
||
getWithdrawMethod();
|
||
// 获取银行名称
|
||
const getBankName = (bankCode: string) => {
|
||
let str = '';
|
||
state.bankDatas.forEach((i: any) => {
|
||
if (i.value == bankCode) {
|
||
str = i.text;
|
||
}
|
||
});
|
||
return str;
|
||
};
|
||
// 计算金额
|
||
const changeAmount = () => {
|
||
let money = userStore.walletInfo.income / 10;
|
||
if (Number(state.amount) > money) return showToast('提现金额大于自身拥有金额');
|
||
state.formalitiesAmount = Number(((Number(state.amount) * state.handlingFee) / 100).toFixed(2));
|
||
state.realAmount = Number((Number(state.amount) - state.formalitiesAmount).toFixed(2));
|
||
};
|
||
// 确认提现
|
||
const confirm = async () => {
|
||
if (state.checked == 'bank' && !bankCard.act) return showToast('请添加银行卡');
|
||
if (state.checked == 'usdt' && !state.usdtAddress) return showToast('请添写钱包地址');
|
||
let money = userStore.walletInfo.income / 10;
|
||
let req = {
|
||
name: userInfo.name,
|
||
money: Number(state.amount) * 100,
|
||
payType: state.checked == 'bank' ? 'bankcard' : 'usdt', // alipay，bankcard，usdt
|
||
withdrawType: 1, // 0: 代理提现 1: 金币提现
|
||
actName: bankCard.actName,
|
||
act: state.checked == 'bank' ? bankCard.act : state.usdtAddress,
|
||
devID: userInfo.devID,
|
||
productType: 0, // 0: 站群 1: 棋牌
|
||
};
|
||
if (Number(state.amount) == 0) return showToast('请输入提现金额');
|
||
if (Number(state.amount) > money) return showToast('提现金额大于自身拥有金额');
|
||
if (Number(state.amount) > state.maxMoney) return showToast(`单笔提现最大于${state.maxMoney}`);
|
||
if (Number(state.amount) < state.minMoney) return showToast(`单笔提现小于${state.minMoney}`);
|
||
try {
|
||
await MineApi.withdraw(req);
|
||
showToast('已提交申请');
|
||
userStore.updateWallet();
|
||
state.amount = '';
|
||
} catch (e) {
|
||
console.log(e);
|
||
}
|
||
};
|
||
</script>
|
||
<style lang="scss" scoped>
|
||
.withdraw {
|
||
height: 100%;
|
||
overflow-y: auto;
|
||
-webkit-overflow-scrolling: touch;
|
||
:deep(.header) {
|
||
position: sticky;
|
||
top: 0;
|
||
z-index: 1;
|
||
// position: fixed;
|
||
// top: 0;
|
||
// left: 0;
|
||
// width: 100%;
|
||
// z-index: 1;
|
||
.right-btn {
|
||
color: rgba(255, 255, 255, 0.45);
|
||
}
|
||
}
|
||
.main {
|
||
padding: 20px 16px 207px 16px;
|
||
// overflow-y: auto;
|
||
// -webkit-overflow-scrolling: touch;
|
||
// height: calc(100vh - 57px);
|
||
// margin-top: 44px;
|
||
.walletInfoBox {
|
||
width: 100%;
|
||
padding: 20px 16px;
|
||
box-sizing: border-box;
|
||
// background: rgba(3, 15, 24, 1);
|
||
background: rgba(255, 255, 255, 0.05);
|
||
margin-bottom: 15px;
|
||
h2 {
|
||
font-size: 14px;
|
||
color: #f68804;
|
||
}
|
||
h2::before {
|
||
content: ' ';
|
||
width: 8px;
|
||
height: 22px;
|
||
display: inline-block;
|
||
background: #f68804;
|
||
border-radius: 0 5px 5px 0;
|
||
position: absolute;
|
||
left: -18px;
|
||
top: -5px;
|
||
}
|
||
p {
|
||
font-size: 32px;
|
||
margin: 25px 0 0 0;
|
||
background: linear-gradient(89.94deg, #ffe8be 1.65%, #e6b764 99.23%);
|
||
-webkit-background-clip: text;
|
||
-webkit-text-fill-color: transparent;
|
||
background-clip: text;
|
||
text-fill-color: transparent;
|
||
display: flex;
|
||
align-items: center;
|
||
font-weight: 500;
|
||
img {
|
||
width: 36px;
|
||
height: 36px;
|
||
margin-right: 5px;
|
||
}
|
||
}
|
||
}
|
||
.infobox {
|
||
width: 100%;
|
||
display: flex;
|
||
margin: 0 0 30px 0;
|
||
display: flex;
|
||
align-items: center;
|
||
// justify-content: center;
|
||
justify-content: space-between;
|
||
.lable {
|
||
min-width: 70px;
|
||
font-size: 14px;
|
||
}
|
||
.input {
|
||
font-size: 15px;
|
||
flex: 1;
|
||
color: rgba(152, 152, 152, 1);
|
||
span {
|
||
padding: 0 10px;
|
||
box-sizing: border-box;
|
||
font-size: 14px;
|
||
}
|
||
}
|
||
}
|
||
.accountBox {
|
||
position: relative;
|
||
height: 42px;
|
||
border-radius: 2px;
|
||
// background-color: rgba(32, 33, 51, 1);
|
||
background: rgba(255, 255, 255, 0.05);
|
||
line-height: 42px;
|
||
font-size: 14px;
|
||
color: rgba(153, 153, 153, 1);
|
||
padding-left: 15px;
|
||
.withdrawAct {
|
||
color: white;
|
||
}
|
||
.rightArrow {
|
||
height: 30px;
|
||
width: 30px;
|
||
background: url('@/assets/images/png/workRight.png') no-repeat;
|
||
background-size: 20px 20px;
|
||
background-position: center center;
|
||
position: absolute;
|
||
right: 6px;
|
||
top: 50%;
|
||
transform: translate(0, -50%);
|
||
}
|
||
}
|
||
|
||
.withdrawBtn {
|
||
color: #fff;
|
||
height: 44px;
|
||
width: 343px;
|
||
line-height: 44px;
|
||
background: #f68804;
|
||
border-radius: 3px;
|
||
text-align: center;
|
||
font-size: 16px;
|
||
position: fixed;
|
||
bottom: 70px;
|
||
left: 50%;
|
||
transform: translate(-50%, 0);
|
||
}
|
||
.radios {
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
font-size: 14px;
|
||
img {
|
||
width: 30px;
|
||
height: 30px;
|
||
margin: 0 8px 0 0;
|
||
}
|
||
:deep(.van-radio__label) {
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
color: rgba(153, 153, 153, 1);
|
||
margin-right: 10px;
|
||
box-sizing: border-box;
|
||
}
|
||
:deep(.van-radio) {
|
||
flex-direction: row-reverse;
|
||
.van-radio__icon--checked .van-icon {
|
||
color: #000;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
.withdrawTitle {
|
||
font-size: 14px;
|
||
margin-bottom: 13px;
|
||
}
|
||
.withdrawRule {
|
||
font-size: 12px;
|
||
color: rgb(153, 153, 153);
|
||
line-height: 24px;
|
||
}
|
||
}
|
||
:deep(.van-cell) {
|
||
padding: 10px 5px 0 10px;
|
||
height: 42px;
|
||
background-color: rgba(255, 255, 255, 0.05);
|
||
border-radius: 2px;
|
||
::placeholder {
|
||
font-size: 14px;
|
||
color: rgba(82, 82, 82, 1);
|
||
}
|
||
.van-field__control {
|
||
font-size: 14px;
|
||
color: white;
|
||
}
|
||
}
|
||
.fee-box {
|
||
display: flex;
|
||
align-items: center;
|
||
span {
|
||
// color: #fff;
|
||
padding: 0 !important;
|
||
font-size: 12px !important;
|
||
&:nth-child(2) {
|
||
margin: 0 10px;
|
||
}
|
||
}
|
||
.fee {
|
||
color: rgba(152, 152, 152, 1);
|
||
}
|
||
}
|
||
.footer {
|
||
height: 117px;
|
||
// background: #0e141e;
|
||
position: fixed;
|
||
bottom: 0;
|
||
left: 0;
|
||
width: 100%;
|
||
}
|
||
</style>
|