app/pages/search/tuangou.vue

<template>
	<view class="wrapper">
		<!-- 商品栏 -->
		<div class="swiper">
			<div v-if="groupBuy.length != 0">
				<view
					class="view-item"
					v-for="(groupItem, groupIndex) in groupBuy"
					:key="groupIndex"
				>
					<view class="view-left">
						<u-image
							border-radius="10"
							shape="square"
							:src="groupItem.thumbnail"
							width="186rpx"
							height="186rpx"
						>
							<view
								slot="error"
								style="font-size: 24rpx"
							>
								加载失败
							</view>
						</u-image>
					</view>
					<view class="view-content">
						<view class="view-content-name">
							{{ groupItem.goodsName }}
						</view>
						<view class="view-content-bottom">
							<view>
								<view class="view-content-price">
									<!-- ￥{{groupItem.sales_price | unitPrice }} <span v-if="groupItem.point">+{{groupItem.point}}积分</span> -->
									￥{{ groupItem.price | unitPrice }}
								</view>
								<view class="view-content-original_price">￥{{ groupItem.originalPrice | unitPrice }}</view>
							</view>

							<view>
								<view
									class="btn-group"
									@click="toHref(groupItem)"
								>
									去拼团
								</view>
								<view class="buy-content">已售{{ groupItem.num || 0 }}件</view>
							</view>
						</view>
					</view>
				</view>
				<u-loadmore
					style="padding: 10px 0"
					bg-color="#f8f8f8"
					:status="status"
				/>
			</div>
			<u-empty
				v-else
				style="margin-top: 20%"
				text="暂无数据"
				mode="data"
			></u-empty>
		</div>
	</view>
</template>

<script>
import * as API_Promotions from '@/api/promotions';
import * as API_Goods from '@/api/goods';
export default {
	props: {
		keywords: {
			default: ''
		}
	},
	data() {
		return {
			flag: 3, //tabs中的索引
			status: 'loadmore',
			is_empty: false,
			search: false,
			title: '拼团活动',
			background: {
				backgroundColor: '#fff'
			},
			empty: false,
			params: {
				pageNumber: 0,
				pageSize: 10,
				categoryPath: '',
				goodsName: ''
			},
			groupBuy: [],
			search: ''
		};
	},

	created() {
		this.initData();
	},

	methods: {
		initData() {
			this.search = this.keywords;
			this.status = 'loadmore';
			this.params = {
				pageNumber: 0,
				pageSize: 10,
				categoryPath: '',
				goodsName: this.search
			};
			this.groupBuy = [];
			console.log('初始化团购数据');
			this.getData();
		},

		toHref(goods) {
			uni.navigateTo({
				url: `/pages/product/goods?id=${goods.skuId}&goodsId=${goods.goodsId}`
			});
		},

		// 请求拼团数据
		getData() {
			if (this.status !== 'loadmore') return;
			this.params.pageNumber++;
			this.status = 'loading';
			this.params.goodsName = this.search;
			const params = JSON.parse(JSON.stringify(this.params));
			if (params.category_id === 0) delete params.category_id;

			API_Promotions.getAssembleList(params)
				.then((response) => {
					const data = response.data.result.records;

					if (!data || !data.length) {
						this.is_empty = true;
						this.status = 'nomore';
					} else {
						if (data.length < this.params.pageSize) {
							this.status = 'nomore';
						} else {
							this.status = 'loadmore';
						}
						this.is_empty = false;
						this.groupBuy.push(...(data || []));
					}
				})
				.catch(() => {});
		}
	}
};
</script>

<style lang="scss" scoped>
.view-item {
	background: #fff;
	border-radius: 0.4em;
	margin: 20rpx 30rpx;
	padding: 20rpx 0;
}

.nodata {
	text-align: center;
	margin: 40rpx 0 20rpx 0;
}

.container-wrap {
	width: 100%;
}
.white_class {
	color: #fff;
	font-size: 28rpx;
}

.popupTips {
	font-size: 22rpx;
	font-family: PingFang SC, PingFang SC-Regular;
	font-weight: 400;
	text-align: left;
	color: #999999;
	margin: 0 20rpx;

	/deep/ view {
		line-height: 1.75;
	}
}

.search {
	margin: 30rpx 20rpx !important;
}

.view-left,
.view-content,
.view-right,
.view-item {
	display: flex;
}

.wrapper {
	width: 100%;
	overflow: hidden;
}
.view-left {
	width: 226rpx;
	height: 100%;
	overflow: hidden;
	display: flex;
	justify-content: center;
}
.view-content {
	width: calc((100% - 240rpx));
	padding-left: 20rpx;
	flex-direction: column;
	justify-content: center;

	text-align: center;
}
.buy-content {
	font-size: 22rpx;
	font-family: PingFang SC, PingFang SC-Regular;
	font-weight: 400;
	margin-top: 15rpx;
	text-align: center;
	color: #999999;
}
.view-content-bottom {
	width: 100%;
	display: flex;
	justify-content: space-between;
	align-items: center;
}

.group-wrapper {
	padding: 16rpx 32rpx;
}
.view-content-name {
	font-family: PingFang SC, PingFang SC-Regular;
	font-weight: 400;
	text-align: left;
	color: #333333;
	font-size: 28rpx;
	display: -webkit-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 2;
	overflow: hidden;
}
.view-content-price {
	margin: 10rpx 0;
	letter-spacing: 0px;
	overflow: hidden;
	font-size: 28rpx;
	font-family: PingFang SC, PingFang SC-Regular;
	font-weight: 400;
	text-align: left;
	color: #ff5a10;
	text-overflow: ellipsis;
	white-space: nowrap;
}
.view-content-original_price {
	font-size: 22rpx;
	font-family: PingFang SC, PingFang SC-Regular;
	font-weight: 400;
	text-decoration: line-through;
	text-align: left;
	color: #999999;
}

.btn-group {
	background: $aider-light-color;
	border-radius: 10rpx;
	font-size: 24rpx;
	font-family: PingFang SC, PingFang SC-Regular;
	font-weight: 400;
	color: #fff;
	text-align: center;
	padding: 6rpx 16rpx;
}
/deep/ .empty {
	position: relative;
	padding-top: 20%;
	> .empty-content {
		position: relative;
		padding-top: 20%;
	}
}
</style>