feat: 越南充值页加 USDT (TRC20) 通道切换

- recharge2.vue: 银行卡/USDT 两个 tab
- submitEpay 方法调 /epay_online_order 传 pay_type='usdt'
- 防重复提交:submitting loading 状态
This commit is contained in:
li
2026-04-15 23:21:03 +08:00
parent cd64a1c073
commit d1f69e4bb9
+107 -4
View File
@@ -3,14 +3,36 @@
<div class="btn off-btn" @click="offPop"></div> <div class="btn off-btn" @click="offPop"></div>
<div class="btn pay2-btn" v-if="userInfo.area_id != 3" @click="isShowPop('recharge')">{{Language.recharge_offline2}} </div> <div class="btn pay2-btn" v-if="userInfo.area_id != 3" @click="isShowPop('recharge')">{{Language.recharge_offline2}} </div>
<div class="title">{{Language.recharge_online2}}</div> <div class="title">{{Language.recharge_online2}}</div>
<!-- 越南 AlinPay 在线充值 --> <!-- 越南地区银行卡 (AlinPay) / USDT (Epay) 双通道 -->
<div class="view" v-if="userInfo.area_id == 3"> <div class="view" v-if="userInfo.area_id == 3">
<div class="alin-form"> <div class="pay-tabs">
<div class="pay-tab" :class="{active: payChannel=='alin'}" @click="payChannel='alin'">
{{Language.recharge_bank || 'Thẻ ngân hàng'}}
</div>
<div class="pay-tab" :class="{active: payChannel=='epay'}" @click="payChannel='epay'">
USDT (TRC20)
</div>
</div>
<div class="alin-form" v-if="payChannel=='alin'">
<div class="alin-item"> <div class="alin-item">
<label>{{Language.withdraw_page_withdrawal_amount || '充值金额'}}</label> <label>{{Language.withdraw_page_withdrawal_amount || '充值金额'}}</label>
<input class="input" type="number" v-model="alinAmount" placeholder="Tối thiểu 1,000,000"> <input class="input" type="number" v-model="alinAmount" placeholder="Tối thiểu 1,000,000">
</div> </div>
<button class="btn alin-submit" @click="submitAlin">{{Language.withdraw_page_confirm || '确认充值'}}</button> <button class="btn alin-submit" @click="submitAlin" :disabled="submitting">
{{submitting ? '...' : (Language.withdraw_page_confirm || '确认充值')}}
</button>
</div>
<div class="alin-form" v-if="payChannel=='epay'">
<div class="alin-item">
<label>{{Language.withdraw_page_withdrawal_amount || '充值金额'}} (VND)</label>
<input class="input" type="number" v-model="epayAmount" placeholder="Số tiền nạp">
</div>
<div class="alin-tip">
{{Language.recharge_usdt_tip || 'Thanh toán USDT qua mạng TRC20 · Tỷ giá tính theo hệ thống'}}
</div>
<button class="btn alin-submit" @click="submitEpay" :disabled="submitting">
{{submitting ? '...' : (Language.withdraw_page_confirm || '确认充值')}}
</button>
</div> </div>
</div> </div>
<!-- 其他渠道 iframe --> <!-- 其他渠道 iframe -->
@@ -25,7 +47,10 @@ import { mapState } from 'vuex'
export default { export default {
data() { data() {
return { return {
payChannel: 'alin',
alinAmount: '', alinAmount: '',
epayAmount: '',
submitting: false,
ApiUrl: JSON.parse(localStorage.getItem('ApiUrl')) ApiUrl: JSON.parse(localStorage.getItem('ApiUrl'))
} }
}, },
@@ -49,6 +74,8 @@ export default {
this.$message({type:'warning', message:'Số tiền tối thiểu là 1,000,000'}); this.$message({type:'warning', message:'Số tiền tối thiểu là 1,000,000'});
return; return;
} }
if(this.submitting) return;
this.submitting = true;
var encryptstring = encrypt(JSON.stringify({ var encryptstring = encrypt(JSON.stringify({
user_id: this.userInfo.uid, user_id: this.userInfo.uid,
price: this.alinAmount, price: this.alinAmount,
@@ -58,6 +85,7 @@ export default {
})).toString(); })).toString();
this.$axios.post(this.ApiUrl+'/alin_online_order', {encryptData:encryptstring}).then( this.$axios.post(this.ApiUrl+'/alin_online_order', {encryptData:encryptstring}).then(
response=>{ response=>{
this.submitting = false;
if(response.data.Success==1){ if(response.data.Success==1){
const data = JSON.parse(decrypt(response.data.Data)); const data = JSON.parse(decrypt(response.data.Data));
if(data.status == 1 && data.url){ if(data.status == 1 && data.url){
@@ -69,10 +97,49 @@ export default {
this.$message({type:'error', message: response.data.Msg || '充值失败'}); this.$message({type:'error', message: response.data.Msg || '充值失败'});
} }
}).catch(error=>{ }).catch(error=>{
this.submitting = false;
console.log(error); console.log(error);
this.$message({type:'error', message:'充值请求失败'}); this.$message({type:'error', message:'充值请求失败'});
}); });
}, },
submitEpay(){
if(!this.epayAmount || this.epayAmount <= 0){
this.$message({type:'warning', message:'Vui lòng nhập số tiền!'});
return;
}
if(this.epayAmount < 1000000){
this.$message({type:'warning', message:'Số tiền tối thiểu là 1,000,000'});
return;
}
if(this.submitting) return;
this.submitting = true;
var encryptstring = encrypt(JSON.stringify({
user_id: this.userInfo.uid,
price: this.epayAmount,
client: 1,
username: this.userInfo.nickname,
pay_type: 'usdt',
api_token: this.userInfo.api_token,
})).toString();
this.$axios.post(this.ApiUrl+'/epay_online_order', {encryptData:encryptstring}).then(
response=>{
this.submitting = false;
if(response.data.Success==1){
const data = JSON.parse(decrypt(response.data.Data));
if(data.status == 1 && data.url){
window.open(data.url, '_blank');
} else {
this.$message({type:'error', message: data.message || 'Nạp thất bại'});
}
} else {
this.$message({type:'error', message: response.data.Msg || 'Nạp thất bại'});
}
}).catch(error=>{
this.submitting = false;
console.log(error);
this.$message({type:'error', message:'Yêu cầu thất bại'});
});
},
}, },
computed: { computed: {
...mapState(['userInfo','webconfig','Language']) ...mapState(['userInfo','webconfig','Language'])
@@ -122,8 +189,44 @@ export default {
width:100%; width:100%;
height: 250px; height: 250px;
} }
.recharge2 .pay-tabs{
display: flex;
padding: 10px 40px 0;
gap: 10px;
}
.recharge2 .pay-tab{
flex: 1;
text-align: center;
padding: 8px 0;
color: #aaa;
background: rgba(0,0,0,0.3);
border: 1px solid #907545;
border-radius: 5px;
cursor: pointer;
font-size: 13px;
user-select: none;
transition: all .2s;
}
.recharge2 .pay-tab:hover{ color: #e5b932; }
.recharge2 .pay-tab.active{
background: linear-gradient(to right, #e5b932, #c5971e);
color: #161107;
font-weight: bold;
border-color: #e5b932;
}
.recharge2 .alin-tip{
color: #e5b932;
font-size: 12px;
line-height: 1.5;
margin: -5px 0 15px;
opacity: 0.85;
}
.recharge2 .alin-submit:disabled{
opacity: 0.5;
cursor: not-allowed;
}
.recharge2 .alin-form{ .recharge2 .alin-form{
padding: 30px 40px; padding: 20px 40px;
} }
.recharge2 .alin-item{ .recharge2 .alin-item{
margin-bottom: 15px; margin-bottom: 15px;