zyejMAll-mobile/pages/activity/groupon/list.vue

<!-- 拼团活动列表 -->
<template>
	<s-layout title="拼团列表" navbar="normal" :bgStyle="{ color: '#FE832A',backgroundColor: 'rgba(233,51,35)' }">
		<!-- <view class="page-bg" :style="[{ marginTop: '-' + Number(statusBarHeight + 88) + 'rpx' }]" /> -->
		<view class="list-content">
			<!-- 参团会员统计 -->
			<view class="content-header ss-flex-col ss-col-center ss-row-center">
				<view class="content-header-title ss-flex ss-row-center">
					<view v-for="(item, index) in state.summaryData.avatars" :key="index" class="picture"
						:style="index === 6 ? 'position: relative' : 'position: static'">
						<span class="avatar" :style="`background-image: url(${item})`" />
						<span v-if="index === 6 && state.summaryData.avatars.length > 3" class="mengceng">
							<i>···</i>
						</span>
					</view>
					<text class="pic_count">{{ state.summaryData.userCount || 0 }}人参与</text>
				</view>
			</view>
			<scroll-view class="scroll-box" :style="{ height: pageHeight + 'rpx' }" scroll-y="true"
				:scroll-with-animation="false" :enable-back-to-top="true">
				<view class="goods-box ss-m-b-20" v-for="item in state.pagination.list" :key="item.id">
					<s-goods-column class="" size="lg" :data="item" :grouponTag="true"
						@click="sheep.$router.go('/pages/goods/groupon', { id: item.id })">
						<template v-slot:cart>
							<button class="ss-reset-button cart-btn">去拼团</button>
						</template>
					</s-goods-column>
				</view>
				<uni-load-more color="white" v-if="state.pagination.total > 0" :status="state.loadStatus" :content-text="{
            contentdown: '上拉加载更多',
          }" @tap="loadMore" />
			</scroll-view>
		</view>
	</s-layout>
</template>
<script setup>
	import {
		reactive
	} from 'vue';
	import {
		onLoad,
		onReachBottom
	} from '@dcloudio/uni-app';
	import sheep from '@/sheep';
	import CombinationApi from '@/sheep/api/promotion/combination';

	const {
		safeAreaInsets,
		safeArea
	} = sheep.$platform.device;
	const sysNavBar = sheep.$platform.navbar;
	const statusBarHeight = sheep.$platform.device.statusBarHeight * 2;
	const pageHeight =
		(safeArea.height + safeAreaInsets.bottom) * 2 + statusBarHeight - sysNavBar - 350;
	const headerBg = sheep.$url.css('/static/img/shop/goods/groupon-header.png');

	const state = reactive({
		pagination: {
			list: [],
			total: 0,
			pageNo: 1,
			pageSize: 10,
		},
		loadStatus: '',
		summaryData: {},
	});

	// 加载统计数据
	const getSummary = async () => {
		const {
			data
		} = await CombinationApi.getCombinationRecordSummary();
		state.summaryData = data;
	};

	// 加载活动列表
	async function getList() {
		state.loadStatus = 'loading';
		const {
			data
		} = await CombinationApi.getCombinationActivityPage({
			pageNo: state.pagination.pageNo,
			pageSize: state.pagination.pageSize,
		});
		data.list.forEach((activity) => {
			state.pagination.list.push({
				...activity,
				price: activity.combinationPrice
			});
		});
		state.pagination.total = data.total;
		state.loadStatus = state.pagination.list.length < state.pagination.total ? 'more' : 'noMore';
	}

	// 加载更多
	function loadMore() {
		if (state.loadStatus === 'noMore') {
			return;
		}
		state.pagination.pageNo++;
		getList();
	}

	// 上拉加载更多
	onReachBottom(() => loadMore());

	// 页面初始化
	onLoad(() => {
		getSummary();
		getList();
	});
</script>
<style lang="scss" scoped>
	.page-bg {
		width: 100%;
		height: 458rpx;
		margin-top: -88rpx;
		background: url('https://zysc.fjptzykj.com:3000/shangcheng/fea9ad54f32d4705a633874efd534e70e507030ea5a7604b0110fdf7292f1f4d.png');
		background-size: 100% 100%;
	}

	.list-content {
		position: relative;
		z-index: 3;
		margin: 0 20rpx 0 20rpx;
		// background: #fff;
		border-radius: 20rpx 20rpx 0 0;

		.content-header {
			width: 100%;
			border-radius: 20rpx 20rpx 0 0;
			height: 50rpx;
			margin: 10px 0;
			position: relative;

			// background: linear-gradient(180deg, #fff4f7, #ffe4d1);
			&::after {
				content: '';
				position: absolute;
				right: 15%;
				height: 1px;
				width: 50px;
				background: white;
				top: 50%;
				transform: translateY(-50%);
			}

			&::before {
				content: '';
				position: absolute;
				left: 15%;
				height: 1px;
				width: 50px;
				background: white;
				top: 50%;
				transform: translateY(-50%);
			}

			.content-header-title {
				width: 100%;
				font-size: 30rpx;
				font-weight: 500;
				color: #ff2923;
				line-height: 30rpx;
				position: relative;

				.more {
					position: absolute;
					right: 30rpx;
					top: 0;
					font-size: 24rpx;
					font-weight: 400;
					color: #999999;
					line-height: 30rpx;
				}

				.picture {
					display: inline-table;
				}

				.avatar {
					width: 38rpx;
					height: 38rpx;
					display: inline-table;
					vertical-align: middle;
					-webkit-user-select: none;
					-moz-user-select: none;
					-ms-user-select: none;
					user-select: none;
					border-radius: 50%;
					background-repeat: no-repeat;
					background-size: cover;
					background-position: 0 0;
					margin-right: -10rpx;
					box-shadow: 0 0 0 1px #fe832a;
				}

				.pic_count {
					margin-left: 30rpx;
					font-size: 22rpx;
					font-weight: 500;
					width: auto;
					height: auto;
					background: linear-gradient(90deg, #ff6600 0%, #fe832a 100%);
					color: #ffffff;
					border-radius: 19rpx;
					padding: 4rpx 14rpx;
				}

				.mengceng {
					width: 40rpx;
					height: 40rpx;
					line-height: 36rpx;
					background: rgba(51, 51, 51, 0.6);
					text-align: center;
					border-radius: 50%;
					opacity: 1;
					position: absolute;
					left: -2rpx;
					color: #fff;
					top: 2rpx;

					i {
						font-style: normal;
						font-size: 20rpx;
					}
				}
			}
		}

		.scroll-box {
			// margin-top: 13px;
			height: 900rpx;

			.goods-box {
				position: relative;
				padding: 0 10px;

				.cart-btn {
					position: absolute;
					bottom: 10rpx;
					right: 20rpx;
					z-index: 11;
					height: 50rpx;
					line-height: 50rpx;
					padding: 0 20rpx;
					border-radius: 25rpx;
					font-size: 24rpx;
					color: #fff;
					background: linear-gradient(90deg, #ff6600 0%, #fe832a 100%);
				}
			}
		}
	}
</style>