<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";
|
import {dateString,initDate} from '@/utils/utis'
|
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);
|
this.list.forEach((item) => {
|
item.createTime = dateString(item.createTime);
|
item.createTime = item.createTime.split(' ')[0] + ' ' + initDate(item.createTime.split(' ')[1])
|
});
|
// 如果没有数据，显示暂无数据
|
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>
|
