7131/pages/index/lifeOrder.vue

<template>
	<view class="content">
		<view class="order-wrap" v-for="item in list">
			<view class="tit">
				订单号：{{item.order_id}}
			</view>
			<view class="tit">
				支付方式：{{item.pay_type == 'yue'?'余额': (item.pay_price == 'weixin'?'微信':'支付宝')}}
			</view>
			<view class="tit">
				充值号码：{{item.rechargeno}}
			</view>
			<view class="tit">
				实付： {{item.pay_price}}
			</view>
		</view>
		
		<uni-load-more v-if="!(list.length == 0 && loaded)" :status="loadingType" ></uni-load-more>
		<empty v-else></empty>
	</view>
</template>

<script>
	import empty from '@/components/empty.vue'
	
	import { getLifeOrder } from '@/api/three.js'
	
	export default {
		components: {
			empty
		},
		data() {
			return {
				list: [],
				page: 1,
				limit: 10,
				loaded: false,
				loadingType: 'more'
			}
		},
		onLoad() {
			
		},
		onShow() {
			this.getLifeOrder()
		},
		onReachBottom() {
			this.getLifeOrder()
		},
		onReady() {
			
		},
		methods: {
			getLifeOrder() {
				let that = this
				if(that.loadingType == 'loading' || that.loadingType == 'noMore') {
					return
				}
				that.loadingType = 'loading'
				getLifeOrder({
					page: that.page,
					limit: that.limit
				}).then(res => {
					let arr = res.data.data
					that.list = that.list.concat(arr)
					if(arr.length == that.limit) {
						that.loadingType = 'more'
						that.page++
					}else {
						that.loadingType = 'noMore'
					}
					that.loaded = true
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.content {
		padding-top: 20rpx;
	}
	.order-wrap {
		width: 690rpx;
		background-color: #fff;
		margin: 0 auto 20rpx;
		padding: 20rpx 34rpx;
		border-radius: 20rpx;
		.tit {
			font-size: 30rpx;
			font-weight: bold;
		}
		.price {
			text-align: right;
		}
	}
</style>