<template>
|
<!-- 充值历史 -->
|
<div class="pl-30 pr-30">
|
<div class="text-center recharge-text font-30">{{ $t('数字货币') }}</div>
|
<van-pull-refresh v-model="refreshing" @refresh="onRefresh" :pulling-text="$t('下拉即可刷新')" :loosing-text="$t('释放即可刷新')" :loading-text="$t('加载中')">
|
<div>
|
<div v-if='noData' class="textColor">
|
{{ $t('暂无数据') }}
|
</div>
|
<template v-else>
|
<van-list
|
:immediate-check="false"
|
v-model="loading"
|
:finished="finished"
|
:finished-text="$t('已经全部加载完毕')"
|
:offset="130"
|
@load="onLoad">
|
<div class="flex justify-between mb82" v-for="(item,index) in list" :key="index" @click="onDetail(item)">
|
<div>
|
<div class="font-35 textColor">{{ item.coin }}</div>
|
<div class="text-grey font-30 mt20">{{ item.createTime }}</div>
|
</div>
|
<div>
|
<div class="font-35 text-right textColor">{{ item.amount }}</div>
|
<div class="mt20">
|
<div class="flex justify-end" v-if="item.status==0">
|
<div class="common-round yellow-round"></div>
|
<div class="text-grey font-30">{{ $t('确定中') }}</div>
|
</div>
|
<div class="flex justify-end" v-if="item.status==1">
|
<div class="common-round green-round"></div>
|
<div class="text-grey font-30">{{ $t('成功') }}</div>
|
</div>
|
<div class="flex" v-if="item.status==2">
|
<div class="common-round red-round"></div>
|
<div class="text-grey font-30">{{ $t('失败') }}</div>
|
</div>
|
</div>
|
</div>
|
</div>
|
</van-list>
|
</template>
|
</div>
|
</van-pull-refresh>
|
</div>
|
</template>
|
|
<script>
|
import Axios from "@/API/recharge"
|
import { List,PullRefresh } from 'vant';
|
export default {
|
name:"rechargeHistory",
|
components: {
|
[List.name]: List,
|
[PullRefresh.name]:PullRefresh
|
},
|
data() {
|
return {
|
list:[],
|
page:1,
|
loading: false, // 当loading为true时，转圈圈
|
finished: false, // 数据是否请求结束，结束会先显示'已经全部加载完毕'
|
noData:false ,// 如果没有数据，显示暂无数据
|
refreshing:false, // 下拉的加载图案
|
|
}
|
},
|
mounted() {
|
this.getList();
|
},
|
methods: {
|
onDetail(item) { // 充值详情
|
// this.$router.push('/recharge/rechargeDetail?id='+ item.order_no)
|
this.$router.push('/recharge/rechargeDetail?order_no='+ item.order_no)
|
},
|
getList() {
|
Axios.getRechargeList({
|
page_no:this.page
|
}).then((res)=>{
|
// 如果加载完毕，显示没有更多了
|
this.refreshing = false;
|
if (res.data.length < 8) {
|
this.finished = true
|
}
|
if (res.code == 0) {
|
this.loading = false;
|
this.list = this.list.concat(res.data);
|
// 如果没有数据，显示暂无数据
|
if (this.list.length === 0 && this.page === 1) {
|
this.noData = true
|
}
|
|
this.page++;
|
}
|
});
|
},
|
onLoad() {
|
console.log('onLoad')
|
setTimeout(() => {
|
this.getList();
|
}, 500)
|
},
|
onRefresh () {
|
this.list = []
|
this.page = 1
|
this.loading = true
|
this.finished = false
|
this.noData = false
|
this.onLoad()
|
}
|
}
|
}
|
</script>
|
|
<style lang="scss" scoped>
|
@import "./history.scss";
|
|
</style>
|
