li
91fa85f4ef
- recharge.vue: 银行卡 / USDT 两个 tab，共用 amount 输入 - api.js: 新增 epayDeposit 调 /epay_online_order USDT 请求体多传 pay_type='usdt'，下单响应同 AlinPay 走 Data.url 跳转
567 lines
14 KiB
Vue
567 lines
14 KiB
Vue
<template>
|
||
<view class="recharge">
|
||
<u-navbar
|
||
title=""
|
||
bgColor="#000"
|
||
:placeholder="true"
|
||
:fixed="true"
|
||
leftIcon=""
|
||
height="60"
|
||
>
|
||
<view slot="left">
|
||
<text class="navbar-lab">{{ $lang.recharge }}</text>
|
||
</view>
|
||
</u-navbar>
|
||
<view class="content">
|
||
<template v-if="userInfo.pay_channel == 'BC'">
|
||
<view class="picker-view" @click="show = true">
|
||
<u-input
|
||
readonly
|
||
:placeholder="$lang.pleaseChoose"
|
||
color="#93979b"
|
||
v-model="type"
|
||
border="none"
|
||
>
|
||
<u--text
|
||
:text="$lang.chooseRecharge"
|
||
slot="prefix"
|
||
margin="0 3px 0 0"
|
||
type="tips"
|
||
></u--text>
|
||
<u-icon
|
||
slot="suffix"
|
||
name="arrow-down-fill"
|
||
color="#757272"
|
||
size="16"
|
||
></u-icon>
|
||
</u-input>
|
||
</view>
|
||
<u-picker
|
||
:title="$lang.chooseRecharge"
|
||
closeOnClickOverlay
|
||
:show="show"
|
||
:columns="columns"
|
||
:cancelText="$lang.cancel"
|
||
:confirmText="$lang.confirm"
|
||
@cancel="close"
|
||
@close="close"
|
||
@confirm="confirm"
|
||
></u-picker>
|
||
<view class="list">
|
||
<view class="lab">{{ $lang.rechargeWithdrawNetwork }}</view>
|
||
<view class="type">TRC20</view>
|
||
</view>
|
||
|
||
<view class="list">
|
||
<view class="lab">{{ $lang.walletAddress }}：</view>
|
||
<view class="box">
|
||
<u-input
|
||
readonly
|
||
:placeholder="$lang.walletAddress"
|
||
fontSize="12px"
|
||
color="#93979b"
|
||
:value="address"
|
||
>
|
||
<template slot="suffix">
|
||
<u-button
|
||
class="btn"
|
||
:text="$lang.copy"
|
||
type="success"
|
||
@click="copyCode"
|
||
color="#e5b932"
|
||
></u-button>
|
||
</template>
|
||
</u-input>
|
||
</view>
|
||
</view>
|
||
<view class="list qrcode">
|
||
<u--image
|
||
radius="5px"
|
||
:showLoading="true"
|
||
:src="qrcode"
|
||
width="200px"
|
||
height="200px"
|
||
mode="scaleToFill"
|
||
></u--image>
|
||
</view>
|
||
<view class="list">
|
||
<view class="tip">
|
||
{{ $lang.rechargeTip }}
|
||
</view>
|
||
</view>
|
||
</template>
|
||
<template v-if="userInfo.pay_channel == 'YBF'">
|
||
<view
|
||
class="picker-view"
|
||
@click="fnPicker('currency')"
|
||
v-if="currency_list.length"
|
||
>
|
||
<u-input
|
||
readonly
|
||
:placeholder="$lang.chooseCoin"
|
||
color="#93979b"
|
||
v-model="currency.name"
|
||
border="none"
|
||
>
|
||
<u--text
|
||
:text="$lang.chooseCoin"
|
||
slot="prefix"
|
||
margin="0 3px 0 0"
|
||
type="tips"
|
||
></u--text>
|
||
<u-icon
|
||
slot="suffix"
|
||
name="arrow-down-fill"
|
||
color="#757272"
|
||
size="16"
|
||
></u-icon>
|
||
</u-input>
|
||
</view>
|
||
<view
|
||
class="picker-view"
|
||
@click="fnPicker('coin_type')"
|
||
v-if="coin_type_list.length"
|
||
>
|
||
<u-input
|
||
readonly
|
||
:placeholder="$lang.chooseLine"
|
||
color="#93979b"
|
||
v-model="coin_type.name"
|
||
border="none"
|
||
>
|
||
<u--text
|
||
:text="$lang.chooseLine"
|
||
slot="prefix"
|
||
margin="0 3px 0 0"
|
||
type="tips"
|
||
></u--text>
|
||
<u-icon
|
||
slot="suffix"
|
||
name="arrow-down-fill"
|
||
color="#757272"
|
||
size="16"
|
||
></u-icon>
|
||
</u-input>
|
||
</view>
|
||
<view class="picker-view">
|
||
<u-input
|
||
:placeholder="$lang.enterMoney"
|
||
color="#93979b"
|
||
v-model="amount"
|
||
border="none"
|
||
>
|
||
<u--text
|
||
:text="$lang.rechargeAmount"
|
||
slot="prefix"
|
||
margin="0 3px 0 0"
|
||
type="tips"
|
||
></u--text>
|
||
</u-input>
|
||
</view>
|
||
<view class="list mb60">
|
||
<u-button
|
||
class="button"
|
||
color="#e5b932"
|
||
:text="$lang.submit"
|
||
@click="submit"
|
||
></u-button>
|
||
</view>
|
||
<view class="list">
|
||
<view class="tip">
|
||
{{ $lang.rechargeTip }}
|
||
</view>
|
||
</view>
|
||
<u-picker
|
||
:title="$lang.chooseRecharge"
|
||
closeOnClickOverlay
|
||
:show="showPicker"
|
||
:columns="columnsPicker"
|
||
keyName="name"
|
||
:cancelText="$lang.cancel"
|
||
:confirmText="$lang.confirm"
|
||
@cancel="closePicker"
|
||
@close="closePicker"
|
||
@confirm="confirmPicker"
|
||
></u-picker>
|
||
</template>
|
||
<!-- 越南在线充值：银行卡 (AlinPay) / USDT (Epay) 双通道 -->
|
||
<template v-if="userInfo.pay_channel == 'ALIN_VN'">
|
||
<view class="pay-tabs">
|
||
<view
|
||
class="pay-tab"
|
||
:class="{ active: payChannel === 'alin' }"
|
||
@click="payChannel = 'alin'"
|
||
>Thẻ ngân hàng</view>
|
||
<view
|
||
class="pay-tab"
|
||
:class="{ active: payChannel === 'epay' }"
|
||
@click="payChannel = 'epay'"
|
||
>USDT (TRC20)</view>
|
||
</view>
|
||
<view class="picker-view">
|
||
<u-input
|
||
:placeholder="payChannel === 'epay' ? 'Số tiền nạp' : 'Tối thiểu 1,000,000'"
|
||
color="#93979b"
|
||
v-model="amount"
|
||
type="number"
|
||
border="none"
|
||
>
|
||
<u--text
|
||
:text="$lang.rechargeAmount || '充值金额'"
|
||
slot="prefix"
|
||
margin="0 3px 0 0"
|
||
type="tips"
|
||
></u--text>
|
||
</u-input>
|
||
</view>
|
||
<view class="list mb60">
|
||
<u-button
|
||
class="button"
|
||
color="#e5b932"
|
||
:text="$lang.submit"
|
||
@click="payChannel === 'epay' ? submitEpay() : submitAlin()"
|
||
></u-button>
|
||
</view>
|
||
<view class="list">
|
||
<view class="tip">
|
||
{{ payChannel === 'epay' ? 'Thanh toán USDT qua mạng TRC20' : $lang.rechargeTip }}
|
||
</view>
|
||
</view>
|
||
</template>
|
||
</view>
|
||
<view class="mb60"></view>
|
||
</view>
|
||
</template>
|
||
|
||
<script>
|
||
import { mapState } from "vuex";
|
||
import qr from "qr-image";
|
||
export default {
|
||
data() {
|
||
return {
|
||
address: "",
|
||
qrcode: "",
|
||
// 币种选择
|
||
type: "USDT",
|
||
show: false,
|
||
columns: [["USDT"]],
|
||
// 支付方式
|
||
showPicker: false,
|
||
columnsPicker: [],
|
||
pickerType: "",
|
||
amount: "",
|
||
currency: { name: "", key: "" },
|
||
coin_type: { name: "", key: "" },
|
||
// 越南地区在线支付通道：'alin'(银行卡) | 'epay'(USDT)
|
||
payChannel: "alin",
|
||
};
|
||
},
|
||
computed: {
|
||
...mapState({
|
||
userInfo: (state) => state.app.userInfo,
|
||
$lang: (state) => state.app.lang[state.app.language],
|
||
coin_type_list: (state) => {
|
||
return state.app?.userInfo?.pay_channel_coin_chain || [];
|
||
},
|
||
currency_list: (state) => {
|
||
return state.app?.userInfo?.pay_channel_currency || [];
|
||
},
|
||
}),
|
||
},
|
||
onLoad() {
|
||
if (this.userInfo && this.userInfo.wallet) {
|
||
this.address = this.userInfo.wallet.address;
|
||
this.setQrCode();
|
||
}
|
||
if (
|
||
this.userInfo &&
|
||
this.userInfo.pay_channel_coin_chain &&
|
||
this.userInfo.pay_channel_coin_chain.length
|
||
) {
|
||
this.coin_type = this.userInfo.pay_channel_coin_chain[0];
|
||
}
|
||
if (
|
||
this.userInfo &&
|
||
this.userInfo.pay_channel_currency &&
|
||
this.userInfo.pay_channel_currency.length
|
||
) {
|
||
this.currency = this.userInfo.pay_channel_currency[0];
|
||
}
|
||
},
|
||
methods: {
|
||
confirm(chose) {
|
||
this.type = chose.value[0];
|
||
this.close();
|
||
},
|
||
close() {
|
||
this.show = false;
|
||
},
|
||
setQrCode() {
|
||
const qrcode =
|
||
"data:image/png;base64," +
|
||
uni.arrayBufferToBase64(
|
||
qr.imageSync(this.address, {
|
||
margin: 2,
|
||
})
|
||
);
|
||
this.qrcode = qrcode;
|
||
},
|
||
// 复制链接
|
||
copyCode() {
|
||
uni.setClipboardData({
|
||
data: this.address,
|
||
success: () => {
|
||
this.$toast({
|
||
message: this.$lang.copySuccessfully,
|
||
duration: 2000,
|
||
});
|
||
},
|
||
});
|
||
},
|
||
fnPicker(type) {
|
||
this.pickerType = type;
|
||
this.columnsPicker = [this[`${type}_list`]];
|
||
this.showPicker = true;
|
||
},
|
||
confirmPicker(chose) {
|
||
this[this.pickerType] = chose.value[0];
|
||
this.closePicker();
|
||
},
|
||
closePicker() {
|
||
this.showPicker = false;
|
||
},
|
||
submit() {
|
||
if (!this.amount) {
|
||
this.$toast({
|
||
message: this.$lang.enterWithdrawalamount,
|
||
duration: 2000,
|
||
});
|
||
} else {
|
||
const params = {
|
||
user_id: this.userInfo.id,
|
||
pay_channel: this.userInfo.pay_channel,
|
||
amount: this.amount,
|
||
currency: this.currency.key,
|
||
coin_type: this.coin_type.key,
|
||
};
|
||
this.$toast({
|
||
type: "loading",
|
||
message: `${this.$lang.submit}...`,
|
||
duration: 200000,
|
||
});
|
||
this.$api
|
||
.ybfDeposit(params)
|
||
.then((res) => {
|
||
if (res.Success == 1) {
|
||
const o = navigator.userAgent;
|
||
const isiOS = !!o.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/); //ios终端
|
||
if (isiOS) {
|
||
window.location.href = res.data.payUrl;
|
||
} else {
|
||
window.open(res.data.payUrl, "_blank");
|
||
}
|
||
}
|
||
})
|
||
.catch((err) => {
|
||
console.log(err);
|
||
})
|
||
.finally(() => {
|
||
this.$toastHide();
|
||
});
|
||
}
|
||
},
|
||
// 越南 AlinPay 充值
|
||
submitAlin() {
|
||
if (!this.amount || this.amount <= 0) {
|
||
this.$toast({
|
||
message: 'Vui lòng nhập số tiền',
|
||
duration: 2000,
|
||
});
|
||
return;
|
||
}
|
||
if (this.amount < 1000000) {
|
||
this.$toast({
|
||
message: 'Số tiền tối thiểu là 1,000,000',
|
||
duration: 2000,
|
||
});
|
||
return;
|
||
}
|
||
const params = {
|
||
user_id: this.userInfo.id,
|
||
price: this.amount,
|
||
client: 3,
|
||
username: this.userInfo.username,
|
||
};
|
||
this.$toast({
|
||
type: "loading",
|
||
message: `${this.$lang.submit}...`,
|
||
duration: 200000,
|
||
});
|
||
this.$api
|
||
.alinDeposit(params)
|
||
.then((res) => {
|
||
const d = res.Data || {};
|
||
if (d.status == 1 && d.url) {
|
||
const o = navigator.userAgent;
|
||
const isiOS = !!o.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/);
|
||
if (isiOS) {
|
||
window.location.href = d.url;
|
||
} else {
|
||
window.open(d.url, "_blank");
|
||
}
|
||
} else {
|
||
this.$toast({
|
||
message: d.message || '充值失败',
|
||
duration: 2000,
|
||
});
|
||
}
|
||
})
|
||
.catch((err) => {
|
||
console.log(err);
|
||
})
|
||
.finally(() => {
|
||
this.$toastHide();
|
||
});
|
||
},
|
||
submitEpay() {
|
||
if (!this.amount || this.amount <= 0) {
|
||
this.$toast({ message: 'Vui lòng nhập số tiền', duration: 2000 });
|
||
return;
|
||
}
|
||
if (this.amount < 1000000) {
|
||
this.$toast({ message: 'Số tiền tối thiểu là 1,000,000', duration: 2000 });
|
||
return;
|
||
}
|
||
const params = {
|
||
user_id: this.userInfo.id,
|
||
price: this.amount,
|
||
client: 3,
|
||
username: this.userInfo.username,
|
||
pay_type: 'usdt',
|
||
};
|
||
this.$toast({
|
||
type: "loading",
|
||
message: `${this.$lang.submit}...`,
|
||
duration: 200000,
|
||
});
|
||
this.$api
|
||
.epayDeposit(params)
|
||
.then((res) => {
|
||
const d = res.Data || {};
|
||
if (d.status == 1 && d.url) {
|
||
const o = navigator.userAgent;
|
||
const isiOS = !!o.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/);
|
||
if (isiOS) {
|
||
window.location.href = d.url;
|
||
} else {
|
||
window.open(d.url, "_blank");
|
||
}
|
||
} else {
|
||
this.$toast({ message: d.message || 'Nạp thất bại', duration: 2000 });
|
||
}
|
||
})
|
||
.catch((err) => {
|
||
console.log(err);
|
||
})
|
||
.finally(() => {
|
||
this.$toastHide();
|
||
});
|
||
},
|
||
},
|
||
};
|
||
</script>
|
||
|
||
<style lang="scss" scoped>
|
||
.pay-tabs {
|
||
display: flex;
|
||
padding: 20rpx 30rpx 0;
|
||
gap: 15rpx;
|
||
}
|
||
.pay-tab {
|
||
flex: 1;
|
||
text-align: center;
|
||
padding: 18rpx 0;
|
||
color: #93979b;
|
||
background: rgba(255, 255, 255, 0.04);
|
||
border: 1rpx solid #2a3448;
|
||
border-radius: 8rpx;
|
||
font-size: 26rpx;
|
||
transition: all 0.2s;
|
||
&.active {
|
||
background: linear-gradient(to right, #e5b932, #c5971e);
|
||
color: #0b1520;
|
||
font-weight: bold;
|
||
border-color: #e5b932;
|
||
}
|
||
}
|
||
.recharge {
|
||
background: #0b1520;
|
||
width: 100%;
|
||
min-height: 100vh;
|
||
.navbar-lab {
|
||
color: #fff;
|
||
font-weight: 500;
|
||
font-size: 18px;
|
||
}
|
||
.content {
|
||
margin: 5px 5px;
|
||
border: 2px solid #947b2b;
|
||
background: #222222;
|
||
box-sizing: border-box;
|
||
padding: 15px;
|
||
.picker-view {
|
||
border: 2px solid #947b2b;
|
||
padding: 8px;
|
||
border-radius: 5px;
|
||
margin-bottom: 20px;
|
||
&.input {
|
||
border: 1px solid #dadbde;
|
||
}
|
||
}
|
||
.list {
|
||
font-size: 14px;
|
||
text-align: center;
|
||
&.qrcode {
|
||
display: flex;
|
||
width: 100%;
|
||
align-items: center;
|
||
justify-content: center;
|
||
margin: 25px 0;
|
||
}
|
||
.lab {
|
||
color: #757272;
|
||
margin: 10px 0;
|
||
}
|
||
.btn {
|
||
height: 30px;
|
||
font-weight: 600;
|
||
color: #0b1520 !important;
|
||
}
|
||
.type {
|
||
width: 70px;
|
||
height: 35px;
|
||
background: #e5b932;
|
||
border-radius: 40px;
|
||
text-align: center;
|
||
line-height: 35px;
|
||
font-weight: 600;
|
||
margin: 10px auto;
|
||
}
|
||
.button {
|
||
line-height: 45px;
|
||
height: 45px;
|
||
color: #0b1520 !important;
|
||
font-weight: bold;
|
||
margin-top: 30px;
|
||
margin-bottom: 10px;
|
||
}
|
||
.tip {
|
||
color: #cc4c0e;
|
||
font-size: 13px;
|
||
text-align: justify;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
</style>
|