mrr.sj.front/pages/groupBuy/list.vue

<template>
	<view class="pintuan">
		<custom-navbar title="拼团" :show-back="true" :showUser="false" titleColor="#000">
		</custom-navbar>
		<view class="pintuan-footer">
			<image class="pintuan-footer-img" src="@/static/images/shop/pintuan/bj.png"></image>
			<view class="pintuan-footer-search">
				<text class="pintuan-footer-search__text">多人团</text>
				<uv-search placeholder="搜索服务" v-model="title" :color="'rgba(204, 204, 204, 1)'" :showAction="false"
					:bgColor="`#ffffff`" :height="'70rpx'" :boxStyle="{ width: `534rpx` }" @clickIcon="search"
					@clear="search" @search="search" searchIcon="/static/home/search.png"></uv-search>
			</view>
		</view>
		<CommonList ref="groupRef" :apiUrl="'/user/teamBuy/list'"
			:listScrollHeight="`calc(100vh - ${statusBarHeight * 2 + 399}rpx)`">
			<template #listData="{ list }">
				<view class="list-item">
					<listCard :info="item" @goDetail="goDetail" v-for="(item, index) in list" :key="index"></listCard>
				</view>
			</template>

			<!-- 空数据状态 -->
			<template #empty>
				<noData></noData>
			</template>
		</CommonList>
	</view>
</template>

<script>
	import listCard from "./components/listCard.vue";
	import CommonList from "@/components/common/CommonList.vue";
	export default {
		data() {
			return {
				title: "",
				statusBarHeight: 0,
				listQuery: {
					userLngz: "",
					userLat: "",
				},
			};
		},
		onLoad() {
			const systemInfo = uni.getSystemInfoSync();
			this.statusBarHeight = systemInfo.statusBarHeight;
			let userAdrees = uni.getStorageSync("userAdrees");
			if (userAdrees) {
				this.listQuery.userLngz = userAdrees.longitude;
				this.listQuery.userLat = userAdrees.latitude;
			} else {
				this.listQuery.userLngz = "117.330043";
				this.listQuery.userLat = "38.372266";
			}
			this.$nextTick(() => {
				this.search();
			});
		},
		
		components: {
			CommonList,
			listCard
		},
		methods: {
			search() {
				this.listQuery.title = this.title;
				// 触发列表刷新
				this.$refs.groupRef.manualRefresh(this.listQuery);
			},
			goDetail(e) {
				console.log()
				uni.navigateTo({
					url: `/pages/groupBuy/detail?id=${e.server_id}`,
				});
			},
		},
	};
</script>

<style scoped lang="scss">
	::v-deep .uv-icon__img {
		width: 34rpx !important;
		height: 34rpx !important;
	}

	::v-deep .uni-input-placeholder {
		font-weight: 400;
		font-size: 28rpx;
		color: #CCCCCC !important;
		line-height: 34rpx;
		text-align: left;
		font-style: normal;
	}

	.pintuan {
		width: 750rpx;
		background: #f5f5f5;

		.pintuan-footer {
			width: 750rpx;
			height: 330rpx;
			position: relative;

			.pintuan-footer-img {
				width: 750rpx;
				height: 330rpx;
			}

			.pintuan-footer-search {
				height: 70rpx;
				position: absolute;
				top: 30rpx;
				left: 30rpx;
				display: flex;
				align-items: center;

				.pintuan-footer-search__text {
					font-weight: 500;
					font-size: 32rpx;
					color: #ffffff;
					line-height: 45rpx;
					text-align: left;
					font-style: normal;
					margin-right: 32rpx;
				}
			}
		}
	}

	.common-list {
		padding-bottom: 0rpx;

		position: fixed;
		left: 0;
		right: 0;
		bottom: 0rpx;
		border-radius: 20rpx 20rpx 0rpx 0rpx;
		background: linear-gradient(180deg, #ffebf0 0%, #f8f8f8 100%);

		::v-deep .list-scroll {
			.uni-scroll-view-content {
				margin-top: 30rpx;
			}
			.list-container {
				padding: 0 30rpx;
			}
		}
	}

	.list-item {
		padding: 0;
		background-color: transparent;
		display: flex;
		flex-wrap: wrap;
		gap: 20rpx;
	}
</style>