Applet/pages/goods/index.vue

<template>
	<view class="content">
		<view class="page-section page-section-spacing swiper">
			<swiper class="swiper" :indicator-dots="indicatorDots" :autoplay="autoplay" :interval="interval" :duration="duration">
				<swiper-item v-for="(item, index) in bannerList" :key="index">
					<image style="width: 100%; height: 100%;" :src="item"></image>
				</swiper-item>
			</swiper>
		</view>
		<!-- <uni-section class="mb-10" title="热门优惠" type="line"> -->
			<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.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.name }}</view>
								<view class="slot-box slot-text">金额：{{ item.money }}</view>
								<view class="slot-box slot-text">剩余：{{ item.remainCount }}</view>
							</view>
						</template>
						<!-- 自定义 footer-->
						<template v-slot:footer>
							<button type="default" class="receive" :class="{ remainCount: item.remainCount == 0 }" size="mini" @click="itemClick(item)">领取</button>
						</template>
					</uni-list-item>
				</uni-list>
			</view>
		<!-- </uni-section> -->
		<uni-load-more :status="more" />
		<popup ref="popup" :popupInfo="popupInfo" @confirm="popupBtnClick" @close="popupBtnClick"></popup>
	</view>
</template>
<script>
	import login from '../../api/login.js';
	import { BASE_URL } from '../../env.js';
	import voucher from '../../api/voucher.js';
	import popup from '../../components/popup.vue'
	const appid = uni.getAccountInfoSync().miniProgram.appId;
	export default {
		components: {
			popup
		},
		data() {
			return {
				bannerList: [],
				fileUrl: BASE_URL.fileUrl,
				list: [],
				page: 0,
				size: 10,
				more: 'more',
				popupInfo: {
					msgType: 'success',
					cancelText: '关闭',
					confirmText: '确认',
					title: '通知',
					content: '默认消息'
				},
			};
		},
		onLoad: async function() {
			const config = await login.getJson();
			const { bannerList } = config.data;
			this.bannerList = bannerList;
			this.query();
		},
		methods: {
			async query() {
				this.page += 1;
				this.more = 'loading';
				// 此处是查询函数
				const res = await voucher.getList({ pageNum: this.page, pageSize: this.size });
				this.list.push(...res.rows)
				// 根据总数 算页数  如果当前页 = 总页数就是没有数据  否则就是上拉加载
				this.more = this.page >= Math.ceil(res.total / this.size) ? 'noMore' : 'more';
			},
			// 领取
			async itemClick(item) {
				if (item.remainCount == 0) return;
				// 领取流程
				const res = await voucher.receivevoucher(item.discountId);
				if (res.code == 200) {
					this.popupInfo.content = '领取成功'
					this.$refs.popup.open();
					this.query();
				}
			},
			// 详情
			btn(item) {
				uni.navigateTo({ url: `/pages/goods/details?id=${item.discountId}` });
			},
			popupBtnClick() {
				this.list = [];
				this.page = 0;
				this.query();
			}
		},
		// 页面生命周期中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>