qjm/pages/user/speardorder.vue

<template>
	<view class="content">
		<view class="main" v-for="(item, index) in list">
			<view class="main-title">{{ item.time }}</view>
			<view class="main-item" v-for="(itm, ind) in item.child">
				<view class="main-item-top flex">
					<view class="main-userinfo">
						<image class="avatar" :src="itm.avatar" mode=""></image>
						<view class="main-name">{{ itm.nickname }}</view>
					</view>
					<view class="main-time">{{ itm.time }}</view>
				</view>
				<view class="main-item-bottom flex">
					<view class="orderId">订单号：{{ itm.order_id }}</view>
					<view class="money">
						支付金额：
						<text>￥{{ itm.number }}</text>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
import { spreadOrder } from '@/api/user.js';
export default {
	data() {
		return {
			list: [],
			loadingType: 'more',
			orderList: [],
			page: 1, //当前页数
			limit: 10 //每次信息条数
		};
	},
	onLoad() {},
	onShow() {
		this.loadData();
	},
	onReachBottom() {
		this.loadData();
	},
	onReady() {},
	methods: {
		loadData() {
			if (this.loadingType === 'loading' || this.loadingType === 'noMore') {
				//防止重复加载
				return;
			}
			this.loadingType = 'loading';
			spreadOrder({ page: this.page, limit: this.limit }).then(({ data }) => {
				this.list = this.list.concat(data.list);
				this.page++;
				if (this.limit == data.list.length) {
					this.loadingType = 'more';
				} else {
					this.loadingType = 'noMore';
				}
			});
		}
	}
};
</script>

<style lang="scss">
page,
.content {
	min-height: 100%;
	height: auto;
}
.main {
	padding: 10rpx 20rpx 0;
	.main-title {
		font-size: 30rpx;
		font-family: PingFang SC;
		font-weight: 500;
		color: #333333;
	}
	.main-item {
		background: #ffffff;
		margin: 20rpx auto 0;
		padding: 20rpx;
		border-radius: 10rpx;
		.main-userinfo {
			display: flex;
			align-items: center;
			.avatar {
				height: 60rpx;
				width: 60rpx;
				border-radius: 50%;
			}
			.main-name {
				margin-left: 10rpx;
				font-size: 28rpx;
				font-family: PingFang SC;
				font-weight: bolder;
				color: #333333;
			}
		}
		.main-time {
			font-size: 24rpx;
			font-family: PingFang SC;
			font-weight: 500;
			color: #929296;
		}
		.main-item-bottom {
			margin-top: 10rpx;
			.orderId {
				font-size: 24rpx;
				font-family: PingFang SC;
				font-weight: 500;
				color: #929296;
			}
			.money {
				font-size: 24rpx;
				font-family: PingFang SC;
				font-weight: bolder;
				color: #333333;
				text {
					color: #fd4c4d;
				}
			}
		}
	}
}
</style>