zhiyu_uni_duanju/pages/member/orders.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">
					<text class="ft12 jilu-txt">订单号:{{ item.trade_no }}</text>
					<text class="ft12 jilu-txt">{{ item.status }}</text>
				</view>
				<view class="jilu-item-box">
					<view class="jilu-items">
						<image class="pay-icon" src="/static/img/orders/cj-icon.png" mode=""></image>
						<view class="lines">
							<text class="ft14" style="font-weight: bold;">{{ item.pay_name }}</text>
							<text class="ft12 jilu-txt">时间:{{ item.pay_end_at }}</text>
						</view>
					</view>
					<view class="lines">
						<text class="ft14 jilu-txt"
							style="text-align: right;font-weight: bold;color:  #FF9800;">{{ item.pay_result }}K币</text>
						<text class="ft12 jilu-txt">实付金额：&yen;{{ item.price }}</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="ft16 line-1-txt mb5">暂无充值记录</p>
			<p class="ft16 line-2-txt">小充一笔，看更多好剧吧</p>
			<navigator url="/pages/pay/pay">
				<view class="ft16 btn-box"><text class="ft14 btn-cz">去充值</text> </view>
			</navigator>
		</view>
	</view>
</template>

<script>
	import {
		getOrderList
	} from "@/common/apis/recharge.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 response = await getOrderList(this.page);
				let res = response.data;
				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 lang="scss" scoped>
	@import url("style/orders.css");
</style>