zhiyu_uni_duanju/pages/client/consume/consume.vue

<template>
	<view class="body pd16_15">
		<view class="jilu-box" v-show="list.length > 0">
			<view class="pb10 jilu-item" v-for="(item,key) in list" :key="key">
				<view class="jilu-item-box">
					<view class="jilu-items">
						<view class="lines">
							<text class="ft14" style="font-weight: bold;">{{item.video_name}}</text>
							<text class="ft12 jilu-txt">{{item.series_name}}</text>
							<text class="ft12 jilu-txt">{{item.created_at}}</text>
						</view>
					</view>
					<view class="lines">
						<text class="ft14 jilu-txt"
							style="text-align: right;font-weight: bold;color:  #FF9800;">-{{item.charge_coin_cost}}K币</text>
					</view>
				</view>
			</view>
		</view>
		<view class="empty-box" v-if="list.length <  1 && show">
			<image src="/static/img/orders/emty.png" mode=""></image>
			<p class="ft14 line-1-txt">暂无消费记录</p>
			<!-- <p class="ft14 line-2-txt mt10">小充一笔，看更多好剧吧</p>
			<navigator url="/pages/client/pay/pay">
				<view class="ft16 btn-box mt10"><text class="ft12 btn-cz">去充值</text> </view>
			</navigator> -->
		</view>
	</view>
</template>

<script>
	import {
		getUserConsumeRecord
	} from "@/common/apis/my.js"
	export default {
		data() {
			return {
				page: 1,
				hasMore: true,
				list: [],
				show: false
			}
		},
		onLoad() {

		},
		onShow() {
			this.page = 1;
			this.hasMore = true;
			this.getList();
			uni.hideLoading();
		},
		onPullDownRefresh() {
			this.page = 1;
			this.list = [];
			this.getList();
			uni.stopPullDownRefresh();
		},
		onReachBottom() {
			if (!this.hasMore) {
				return false;
			}
			this.getList();
		},
		methods: {
			async getList() {

				if (this.page <= 1) {
					this.show = false;
				}
				let res = await getUserConsumeRecord(this.page);
				if (res) {
					if (this.page >= res.last_page) {
						this.hasMore = false;
					} else {
						this.page++;
					}
					res.data.forEach((item, index) => {
						this.list.push(item);
					})
				}
				this.show = true;
			},
		}
	}
</script>

<style scoped lang="scss">
	@import url("style/orders.css");
</style>