You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
417 lines
17 KiB
417 lines
17 KiB
<template>
|
|
<div class="wallet-page">
|
|
<secondary-nav></secondary-nav>
|
|
<div class="container">
|
|
<div class="w-100 d-flex justify-content-between align-items-center mb-3 mt-4">
|
|
<div class="h3">{{$t('wallet.recharge')}}&{{$t('common.c16')}}</div>
|
|
</div>
|
|
|
|
<div class="row">
|
|
<div class="col-md-12 mt15">
|
|
<div class="markets-pair-list mb-3">
|
|
<ul class="nav nav-pills" id="pills-tab" role="tablist">
|
|
<li class="nav-item fn-16">
|
|
<a class="nav-link " :class="currentTab =='deposit'? 'active':''" data-toggle="pill" href="#deposit" role="tab" aria-selected="false" @click="currentTab = 'deposit'">{{$t('wallet.rechargeRecord')}}</a>
|
|
</li>
|
|
<li class="nav-item fn-16">
|
|
<!-- <a class="nav-link " :class="currentTab =='withdrawal'? 'active':''" data-toggle="pill" href="#withdrawal" role="tab" aria-selected="false" @click="currentTab = 'withdrawal'">{{$t('wallet.withdrawalRecord')}}</a> -->
|
|
<a class="nav-link " :class="currentTab =='withdrawal'? 'active':''" data-toggle="pill" href="#withdrawal" role="tab" aria-selected="false" @click="currentTab = 'withdrawal'">{{$t('common.c27')}}</a>
|
|
</li>
|
|
<!-- <li class="nav-item fn-16">
|
|
<a class="nav-link " data-toggle="pill" href="#paypal" role="tab" aria-selected="false" @click="currentTab = 'paypal'">Paypal{{$t('wallet.rechargeRecord')}}</a>
|
|
</li> -->
|
|
</ul>
|
|
<div class="row pt-3">
|
|
<div class="form-group col-sm-3">
|
|
<input type="text" v-model="search_coin" class="form-control" :placeholder="$t('wallet.assetsName')" />
|
|
</div>
|
|
<div class="form-group col-sm-3">
|
|
<el-select v-model="submitStatus" :placeholder="$t('wallet.selectStatus')">
|
|
<el-option v-for="item in states" :key="item.value" :value="item.value" :label="item.label">
|
|
<span>{{item.label}}</span>
|
|
</el-option>
|
|
</el-select>
|
|
</div>
|
|
<!-- <div class="form-group col-sm-5">
|
|
<el-date-picker :value="timeRange" type="daterange" :range-separator="$t('wallet.to')" :start-placeholder="$t('wallet.startTime')" :end-placeholder="$t('wallet.entTIme')" @change="setTimeRange"></el-date-picker>
|
|
</div> -->
|
|
<!-- <div class="form-group col-sm-1 px-0">
|
|
<button class="btn btn-outline-primary mb-2" @click="addCondition">{{$t('wallet.search')}}</button>
|
|
</div> -->
|
|
</div>
|
|
<div class="tab-content">
|
|
<!-- 充值 -->
|
|
<div v-infinite-scroll="load1" class="tab-pane funding-table fade show" :class="currentTab =='deposit'? 'active':''" id="deposit" role="tabpanel">
|
|
<table class="table stripe" style="color: #FFFFFF;">
|
|
<thead>
|
|
<tr>
|
|
<th>{{$t('wallet.assets')}}</th>
|
|
<th>{{$t('wallet.date')}}</th>
|
|
<!-- <th>{{$t('wallet.address')}}/{{$t('wallet.hash')}}</th> -->
|
|
<th>{{$t('wallet.num')}}</th>
|
|
<!-- <th>{{$t('wallet.progress')}}</th> -->
|
|
<th class="text-right">{{$t('wallet.status')}}</th>
|
|
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
<tr v-for="item in depositHistories" :key="item.id" v-if="seek(item)">
|
|
<td>
|
|
<img src="../../assets/img/icon/1.png" alt="eth" /> {{item.coin_name}}
|
|
</td>
|
|
<td>{{item.datetime|parseTime}}</td>
|
|
<!-- <td>{{item.address}}</td> -->
|
|
<td>{{item.amount}}</td>
|
|
<!-- <td>-/-</td> -->
|
|
<td class="text-right">
|
|
<span class="decreace" v-if="item.status == Globals.Status.Funding.FAIL">{{$t('wallet.error')}}</span>
|
|
<span class="increace" v-if="item.status == Globals.Status.Funding.SUCCESS">{{$t('wallet.success')}}</span>
|
|
<span class="color-cls-gray" v-if="item.status == Globals.Status.Funding.PENDING">{{$t('wallet.underReview')}}</span>
|
|
</td>
|
|
|
|
</tr>
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
|
|
<!-- 提币 -->
|
|
<div v-infinite-scroll="load2" class="tab-pane funding-table fade show" :class="currentTab =='withdrawal'? 'active':''" id="withdrawal" role="tabpanel">
|
|
<table class="table stripe">
|
|
<thead>
|
|
<tr>
|
|
<th>{{$t('wallet.assets')}}</th>
|
|
<th>{{$t('wallet.date')}}</th>
|
|
<th>{{$t('wallet.address')}}/{{$t('wallet.hash')}}</th>
|
|
<th>{{$t('wallet.num')}}</th>
|
|
<th>{{$t('wallet.handlingFee1')}}</th>
|
|
<th class="text-right">{{$t('wallet.status')}}</th>
|
|
<th class="text-right">{{$t('contract.c0')}}</th>
|
|
<th>{{$t('nav.rejection')}}</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
<tr v-for="item in withdrawRecords" :key="item.id" v-if="seek(item)">
|
|
<td>
|
|
<img src="../../assets/img/icon/1.png" alt="eth" />
|
|
{{ item.coin_name }}
|
|
</td>
|
|
<td>{{ item.datetime|parseTime }}</td>
|
|
<td>{{ item.address }}</td>
|
|
<td>{{ item.amount }}</td>
|
|
<td>{{item.withdrawal_fee}}</td>
|
|
<td class="text-right">
|
|
<div :class="item.status==0?'status_text':item.status==2?'status_text1':''">{{item.status_text}}</div>
|
|
<div v-if="item.status==0">{{updateTimer(item)}}</div>
|
|
</td>
|
|
<!-- <td v-if="item.status==0" class="text-right">{{$t('wallet.processing')}}</td>
|
|
<td v-if="item.status==1" class="text-right">{{$t('wallet.success')}}</td>
|
|
<td v-if="item.status==2" class="text-right">{{$t('wallet.error')}}</td> -->
|
|
<td class="text-right">
|
|
<button v-if="item.status==0" class="btn btn-danger btn-sm" @click="cancelWithdraw(item)">{{$t('contract.c2')}}</button>
|
|
</td>
|
|
<td style="word-wrap: break-word;width: 200px;">
|
|
<div v-if="item.remark">
|
|
<div style="width: 200px;">{{item.remark}}</div>
|
|
<div style="display: flex;">
|
|
<div v-if="!remarktext(item.updated_at)" class="updated" @click="scbox">{{$t('common.c20')}}</div>
|
|
</div>
|
|
</div>
|
|
</td>
|
|
</tr>
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
|
|
<!-- paypal充值记录 -->
|
|
<div v-infinite-scroll="load3" class="tab-pane funding-table fade show" id="paypal" role="tabpanel">
|
|
<table class="table stripe">
|
|
<thead>
|
|
<tr>
|
|
<th>{{$t('wallet.assets')}}</th>
|
|
<th>{{$t('wallet.date')}}</th>
|
|
<th>{{$t('wallet.num')}}</th>
|
|
<th class="text-right">{{$t('wallet.status')}}</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
<tr v-for="(item,index) in rechargeManualLogs" :key="index">
|
|
<td>
|
|
<img src="../../assets/img/Group12@2x.png" alt="eth" />
|
|
<!-- {{ item.coin_name }} -->
|
|
</td>
|
|
<td>{{ item.created_at|parseTime }}</td>
|
|
<td>{{ item.num }}</td>
|
|
<td v-if="item.status==0" class="text-right">{{$t('wallet.processing')}}</td>
|
|
<td v-if="item.status==1" class="text-right">{{$t('wallet.success')}}</td>
|
|
<td v-if="item.status==2" class="text-right">{{$t('wallet.error')}}</td>
|
|
</tr>
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="cspopup" :class='{"hidden":ispopup?"":"none"}'>
|
|
<a href="javascript:void(0);" class="close_btn" @click="closebox();">x</a>
|
|
<iframe width="100%" height="100%" class="my-modal-body" :src="ifurl" frameborder="0" style="border-radius: 10px;"></iframe>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
import Wallet from "@/api/wallet";
|
|
import Member from "@/api/member";
|
|
export default {
|
|
data() {
|
|
return {
|
|
currentTab: null,
|
|
withdrawRecords: [], // 提币记录
|
|
depositHistories: [], // 充值记录
|
|
rechargeManualLogs: [],// paypal充值记录
|
|
search_coin: '', // 搜索币种
|
|
submitStatus: '', // 提交状态
|
|
timeRange: [],
|
|
timer: null,
|
|
ispopup:false,
|
|
ifurl:"",
|
|
}
|
|
},
|
|
|
|
computed: {
|
|
states() {
|
|
return [{
|
|
label: this.$t('wallet.success'),
|
|
value: this.Globals.Status.Funding.SUCCESS,
|
|
},
|
|
{
|
|
label: this.$t('wallet.error'),
|
|
value: this.Globals.Status.Funding.FAIL,
|
|
},
|
|
{
|
|
label: this.$t('wallet.processing'),
|
|
value: this.Globals.Status.Funding.PENDING,
|
|
}
|
|
];
|
|
},
|
|
isLogin() {
|
|
return Boolean(localStorage.token);
|
|
},
|
|
},
|
|
|
|
methods: {
|
|
|
|
getWithdrawRecords() {
|
|
Wallet.withdrawalRecord().then(data => {
|
|
this.withdrawRecords = data.data;
|
|
}).catch(err => { });
|
|
},
|
|
|
|
getDepositHistories() {
|
|
Wallet.depositHistory().then(data => this.depositHistories = data.data).catch(err => { });
|
|
},
|
|
|
|
getRechargeManualLog() {
|
|
Wallet.rechargeManualLog().then(data => this.rechargeManualLogs = data.data).catch(err => { });
|
|
},
|
|
|
|
update() {
|
|
if (this.currentTab == "deposit") {
|
|
// 获取充值记录
|
|
this.getDepositHistories();
|
|
} else if (this.currentTab == "withdrawal") {
|
|
// 获取提币记录
|
|
this.getWithdrawRecords();
|
|
}else if(this.currentTab == "paypal"){
|
|
// 获取paypal充值记录
|
|
this.getRechargeManualLog();
|
|
}
|
|
},
|
|
|
|
setTimeRange(...args) {
|
|
// console.log(args);
|
|
},
|
|
|
|
addCondition() {
|
|
|
|
},
|
|
|
|
seek(item) {
|
|
let res1,
|
|
res2,
|
|
res3;
|
|
const reg = new RegExp(this.search_coin, "gi");
|
|
if(this.currentTab!='paypal'){
|
|
res1 = !this.search_coin || item.coin_name.search(reg) >= 0;
|
|
}
|
|
|
|
res2 = !this.submitStatus || item.status === this.submitStatus;
|
|
|
|
return res1 && res2;
|
|
|
|
},
|
|
cancelWithdraw(item) {
|
|
Wallet.cancelWithdraw({ withdraw_id: item.id }).then(res => {
|
|
this.$message.success(this.$t('contract.d4'));
|
|
this.getWithdrawRecords()
|
|
})
|
|
},
|
|
load1() {
|
|
console.log('load1')
|
|
},
|
|
|
|
load2() {
|
|
console.log('load2')
|
|
},
|
|
|
|
load3() {
|
|
console.log('load3')
|
|
},
|
|
scbox(){
|
|
// under login
|
|
if (this.isLogin) {
|
|
// get user infomation
|
|
let user_str = localStorage.getItem("auth");
|
|
if(user_str!=""){
|
|
let user = JSON.parse(user_str);
|
|
// 查询对应的推荐人帐号
|
|
Member.getUnameByUid({user_id:user.pid}).then(rfres=>{
|
|
// query referr uname
|
|
this.ifurl ="https://cs.btcaholic.com/chat/?toid="+rfres.username+"&room_id="+user.account+"&usid="+user.user_id;
|
|
// show popup
|
|
this.ispopup = ! this.ispopup
|
|
})
|
|
}
|
|
}else{
|
|
this.$router.push({ path: '/sign-in' });
|
|
}
|
|
},
|
|
closebox(){
|
|
if(this.ispopup){
|
|
this.ispopup = false
|
|
}
|
|
this.ispopup =false
|
|
},
|
|
updateTimer(val){
|
|
const nowInMilliseconds = Date.now(); // 当前时间的毫秒级时间戳
|
|
const twelveHoursInSeconds = 43200; // 12小时的秒数
|
|
const nowInSeconds = Math.floor(nowInMilliseconds / 1000); // 当前时间的秒级时间戳
|
|
const adjustedNowInSeconds = nowInSeconds - twelveHoursInSeconds; // 调整后的当前时间的秒级时间戳
|
|
|
|
// 如果你需要一个毫秒级的时间戳，可以再将秒级时间戳转换回毫秒级
|
|
const adjustedNowInMilliseconds = adjustedNowInSeconds * 1000;
|
|
const timer = val.newdatetime * 1000
|
|
const diff = timer - adjustedNowInMilliseconds;
|
|
|
|
if (diff <= 0) {
|
|
return '00:00:00';
|
|
}
|
|
|
|
const hours = Math.floor(diff / 3600000)
|
|
const minutes = Math.floor((diff % 3600000) / 60000)
|
|
const seconds = Math.floor((diff % 60000) / 1000)
|
|
|
|
return `${hours < 10 ? '0'+hours: hours}:${minutes < 10 ? '0'+minutes: minutes}:${seconds < 10 ? '0'+seconds: seconds}`;
|
|
},
|
|
remarktext(val){
|
|
const now = new Date()
|
|
const target = new Date(Date.parseTime(Date.parse(val)))
|
|
const diff = now.getTime() - target.getTime()
|
|
return diff > 12 * 60 * 60 * 1000
|
|
}
|
|
},
|
|
|
|
watch: {
|
|
currentTab() {
|
|
|
|
this.update();
|
|
}
|
|
},
|
|
|
|
created() {
|
|
// console.log(this.Funding);
|
|
// console.info(this.$route.query.currentTab)
|
|
if(this.$route.query.currentTab){
|
|
this.currentTab=this.$route.query.currentTab
|
|
}else{
|
|
this.currentTab = "deposit";
|
|
}
|
|
|
|
this.timer = setInterval(() => {
|
|
this.withdrawRecords.forEach((item) => {
|
|
if (item.status === 0) {
|
|
// 手动触发 Vue 的响应式更新
|
|
this.$forceUpdate();
|
|
}
|
|
});
|
|
}, 1000);
|
|
}
|
|
};
|
|
</script>
|
|
|
|
<style scoped>
|
|
.markets-pair-list .nav-link.active::after {
|
|
background-color: #fff;
|
|
}
|
|
.increace{
|
|
color: #77B992;
|
|
}
|
|
.form-control{
|
|
color: #101010 !important;
|
|
background-color: #fff !important;
|
|
}
|
|
/deep/ .el-input__inner{
|
|
color: #101010 !important;
|
|
background-color: #fff !important;
|
|
}
|
|
.status_text{
|
|
font-size: 14px;
|
|
color: #53b987;
|
|
text-shadow: 1px 1px rgba(83, 185, 135, 0.8);
|
|
}
|
|
.status_text1{
|
|
font-size: 14px;
|
|
color: #D31027;
|
|
}
|
|
|
|
.cspopup{
|
|
position:fixed;
|
|
top:50%;
|
|
left:50%;
|
|
transform: translate(-50%, -50%);
|
|
width:560px;
|
|
height:560px;
|
|
z-index:999;
|
|
|
|
.close_btn{
|
|
width:35px;
|
|
height:35px;
|
|
font-size:20px;
|
|
font-weight:500;
|
|
line-height:30px;
|
|
text-align:center;
|
|
display:block;
|
|
color:#fff;
|
|
background:#553646;
|
|
border-radius:50%;
|
|
position:absolute;
|
|
right:-10px;
|
|
top:-10px;
|
|
z-index:1000;
|
|
}
|
|
}
|
|
.hidden{
|
|
display:none;
|
|
}
|
|
.updated{
|
|
color: #fff;
|
|
padding: 5px;
|
|
display: flex;
|
|
cursor: pointer;
|
|
border-radius: 5px;
|
|
background-color: #0089ff;
|
|
text-align: center;
|
|
}
|
|
</style>
|
|
|