jszPhone/pages/goods/three/order.vue

<template>
	<view class="content">
		<view class="order-wrap" v-for="item in list">
			<view class="tit">
				名称：{{item.goods_name}}
			</view>
			<view class="tit">
				支付方式：{{item.pay_type == 'yue'?'余额': (item.pay_type == '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> -->
		<emptyPage title="暂无充值记录～" v-if="list.length == 0 && loaded"></emptyPage>
	</view>
</template>

<script>
	import emptyPage from '@/components/emptyPage.vue'
	import { getLifeOrder } from '@/api/three.js'
	export default {
		components: {
			emptyPage
		},
		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,
					status: 2
				}).then(res => {
					let arr = res.data.list
					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>