Applet/pages/goods/my.vue

<template>
	<view class="content">
		<view class="mainList">
			<uni-list>
				<uni-list-item v-for="(item, index) in list" :key="index">
					<!-- 自定义 header -->
					<template v-slot:header>
						<image class="slot-image" :src="fileUrl + item['discountInfo.photo']" @click="btn(item)"></image>
					</template>
					<!-- 自定义 body -->
					<template v-slot:body>
						<view class="slot-body titleBox" @click="btn(item)">
							<view class="slot-box slot-title">{{ item['discountInfo.name'] }}</view>
							<view class="slot-box slot-text">状态：{{ item.statusText }}</view>
							<view class="slot-box slot-text">领取地点：{{ item['discountInfo.location'] }}</view>
							
						</view>
					</template>
					<!-- 自定义 footer-->
					<template v-slot:footer></template>
				</uni-list-item>
			</uni-list>
		</view>
		<uni-load-more :status="more" />
	</view>
</template>
<script>
	import login from '../../api/login.js';
	import { BASE_URL } from '../../env.js';
	import voucher from '../../api/voucher.js';
	export default {
		components: {},
		data() {
			return {
				fileUrl: BASE_URL.fileUrl,
				list: [],
				page: 0,
				size: 10,
				more: 'more',
				dicts: []
			};
		},
		onLoad: async function() {
			const dict = await voucher.getDict('voucher_status');
			this.dicts = dict.data;
			this.query();
		},
		methods: {
			async query() {
				this.page += 1;
				this.more = 'loading';
				// 此处是查询函数
				const res = await voucher.getMyList({ pageNum: this.page, pageSize: this.size });
				this.list.push(...res.rows.map(e => {
					const statusDict = this.dicts.find(j => j.dictValue == e.status)
					if (statusDict) e.statusText = statusDict?.dictLabel;
					for (const key in e.discountInfo) {
						const itemKey = `discountInfo.${key}`;
						e[itemKey] = e.discountInfo[key]
					}
					return e;
				}))
				// 根据总数 算页数  如果当前页 = 总页数就是没有数据  否则就是上拉加载
				this.more = this.page >= Math.ceil(res.total / this.size) ? 'noMore' : 'more';
			},
			// 详情
			btn(item) {
				uni.navigateTo({ url: `/pages/goods/details?id=${item.discountId}&type=my` });
			}
		},
		// 页面生命周期中onReachBottom（页面滚动到底部的事件）
		onReachBottom() {
			if(this.more != 'noMore') {
				this.more = 'more';
				this.query();
			}
		}
	};
</script>
<style scoped>
	.content {
		width: 100%;
		height: 100vh;
		padding-bottom: 15rpx;
		background: #F8F8F8;
	}
	.mainList {
		width: 90%;
		margin: 30rpx auto;
	}

	.mainText {
		width: 100%;
		color: #000000;
		font-size: 34rpx;
		text-align: left;
		font-weight: 550;
		opacity: 0.5;
		margin-bottom: 50rpx;
	}

	.receive {
		display: flex;
		justify-content: center;
		align-items: center;
		width: 120rpx;
		background-color: #f60;
		color: #FFFFFF;
		font-size: 24rpx;
		border-radius: 10rpx;
		height: 2.5em;
		margin-top: 30rpx;
	}

	button {
		margin: unset;
		padding: unset;
	}

	button:after {
		border: unset;
	}
</style>
<style>
.slot-box {
	position: relative;
}
.slot-image {
	width: 130rpx;
	height: 120rpx;
}
.status {
	position: absolute;
	left: 0;
	top: 0;
	font-size: 12px;
	color: #fff;
	background: #999;
}
.uni-list-item__container {
	flex: none !important;
	width: 90%;
	padding: 12px 5% !important;
}
.titleBox {
	width: 70%;
	margin-left: 10px;
	display: block;
}
.slot-title {
	width: 100%;
	font-weight: 600;
	color: #000;
	line-height: 2em;
	overflow: hidden;
	white-space: nowrap;
	text-overflow: ellipsis;
	display: block;
}
.slot-text {
	display: block;
	width: 100%;
	font-size: 22rpx;
	color: #999;
	overflow: hidden;
	white-space: nowrap;
	text-overflow: ellipsis;
}
.slot-footer {
	margin-left: 3%;
}
.footerIcon {
	line-height: 3em;
}
.remainCount {
	background-color: #999 !important;
}
.swiper {
	height: 45vw;
	overflow: hidden;
}

/**/
.uni-section .uni-section-header {
	padding: 12px 20px !important;
}
</style>