zhiyu_uni_duanju/pages/client/orders/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;20.00</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">小充一笔，看更多好剧吧</p>
			<navigator url="/pages/client/pay/pay">
				<view class="ft16 btn-box"><text class="ft12 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 res = await getOrderList(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>
	@import url("style/orders.css");
</style>