duck/pages/product/groupBooking/index.vue

<template>
	<!-- <view class="lyy-bg4">
		<view class="lyy-f-a">
			<view class="lyy-f-b lyy-flex">
				<view class="lyy-f-c item" @click="goProduct(items)" v-for="(items, ind) in goodsList" :key="ind">
					<view class="content">
						<view><image :src="items.image" class="lyy-f-image" /></view>
						<view class="lyy-f-word1 lyy-f-jl ellipsis">{{ items.title }}</view>
						<view class="lyy-flex2">
							<view class="lyy-flex3">
								<view class="lyy-f-word2 lyy-f-jl">￥{{ items.price * 1 }}</view>
							</view>
							<view class="lyy-a-tu2 lyy-flex2">
								<view class="lyy-a-tu3"><image src="../../../static/img/img11.png" class="lyy-a-tu5" /></view>
								<view class="lyy-a-tu4">{{ items.people }}人拼</view>
							</view>
						</view>
					</view>
				</view>
			</view>
		</view>
		<uni-load-more :status="loadingType"></uni-load-more>
	</view> -->
	<view class="czpt">
		<view class="good-wrapper">
			<view class="spgood">
				<view class="left-wrapper"><image src="../../../static/img/spimg1.jpg" mode="scaleToFill"></image></view>
				<view class="right-wrapper">
					<view class="right-title">湿热肝上火气肺痰煲汤材料</view>
					<view class="ex-addr">
						<image src="../../../static/img/shop.png" mode="" class="name-img"></image>
						子臣台州旗舰店
						<image src="../../../static/img/point.png" mode="" class="point-img"></image>
						200m
					</view>
					<view class="pepple-num"><image src="../../../static/icon/hot.png" mode="scaleToFill"></image>2人团</view>
					<view class="right-bottom">
						<view class="sp-price">
							<view class="now-price">￥77</view>
							<view class="old-price">￥99</view>
						</view>
						<view class="sp-btn">马上拼团</view>
					</view>
				</view>
			</view>
			<view class="spgood">
				<view class="left-wrapper"><image src="../../../static/img/spimg1.jpg" mode="scaleToFill"></image></view>
				<view class="right-wrapper">
					<view class="right-title">湿热肝上火气肺痰煲汤材料</view>
					<view class="ex-addr">
						<image src="../../../static/img/shop.png" mode="" class="name-img"></image>
						子臣台州旗舰店
						<image src="../../../static/img/point.png" mode="" class="point-img"></image>
						200m
					</view>
					<view class="pepple-num"><image src="../../../static/icon/hot.png" mode="scaleToFill"></image>2人团</view>
					<view class="right-bottom">
						<view class="sp-price">
							<view class="now-price">￥77</view>
							<view class="old-price">￥99</view>
						</view>
						<view class="sp-btn">马上拼团</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
import uniLoadMore from '@/components/uni-load-more/uni-load-more.vue';
import { getCombinationList } from '@/api/product.js';
export default {
	components: {
		uniLoadMore
	},
	data() {
		return {
			goodsList: [
				{ title: '鸭血粉丝鸭血粉丝鸭血粉丝', price: '99', people: 99 },
				{ title: '鸭血粉丝鸭血粉丝鸭血粉丝', price: '33', people: 66 },
				{ title: '鸭血粉丝鸭血粉丝鸭血粉丝', price: '44', people: 22 }
			],
			loadingType: 'more', //加载更多状态
			limit: 20, //每次加载数据条数
			page: 1 //当前页数
		};
	},
	onLoad(options) {
		// this.loadData();
	},
	//下拉刷新
	onPullDownRefresh() {
		this.loadData('refresh');
	},
	//监听页面是否滚动到底部加载更多
	onReachBottom() {
		this.loadData();
	},
	methods: {
		//加载商品 ，带下拉刷新和上滑加载
		async loadData(type = 'add', loading) {
			let obj = this;
			let data = {
				page: obj.page,
				limit: obj.limit
			};
			//没有更多直接返回
			if (type === 'add') {
				if (obj.loadingType === 'nomore') {
					return;
				}
				obj.loadingType = 'loading';
			} else {
				obj.loadingType = 'more';
			}

			// 加载商品信息
			getCombinationList(data)
				.then(e => {
					if (type === 'refresh') {
						// 清空数组
						obj.goodsList = [];
					}
					obj.goodsList = obj.goodsList.concat(e.data);
					//判断是否还有下一页，有是more  没有是nomore
					if (obj.limit == e.data.length) {
						obj.page++;
						obj.loadingType = 'more';
					} else {
						obj.loadingType = 'nomore';
					}
					if (type === 'refresh') {
						if (loading == 1) {
							uni.hideLoading();
						} else {
							uni.stopPullDownRefresh();
						}
					}
				})
				.catch();
		},
		goProduct(e) {
			uni.navigateTo({
				url: '/pages/product/groupBooking/productGroup?id=' + e.id
			});
		}
	}
};
</script>

<style lang="scss">
page {
	height: 100%;
}
// 拼团列表
.lyy-f-a {
	margin: 0px 15px;

	.lyy-flex {
		/* 内部模块1*/
		display: flex;
		justify-content: space-between;
	}
	.lyy-f-b {
		flex-wrap: wrap;
		.lyy-f-c {
			flex: 0 0 50%;
			/* width: 50%; */
			margin: 10px 0px 0px 0px;
		}

		.item:nth-child(2n + 1) .content {
			margin: 0px 7.5px 0px 0px;
			border-radius: 10px;
		}
	}

	.lyy-f-b .content {
		background-color: white;
		.lyy-f-image {
			width: 100%;
			height: 340rpx;
			border-radius: 10rpx 10rpx 0rpx 0rpx;
		}
		.ellipsis {
			width: 165px;
			white-space: nowrap;
			overflow: hidden;
			text-overflow: ellipsis;
		}
		.lyy-f-jl {
			padding: 5px 7px;
		}
		.lyy-f-word1 {
			font-size: 12px;
			color: rgba(50, 50, 50, 1);
			line-height: 20px;
			width: 300rpx;
			white-space: nowrap;
			overflow: hidden;
			text-overflow: ellipsis;
		}
	}

	.item:nth-child(2n) .content {
		margin: 0px 0 0px 7.5px;
		border-radius: 10px;
	}

	.lyy-f-word3 {
		font-size: 12px;
		text-decoration: line-through;
		color: rgba(139, 139, 139, 1);
	}

	.lyy-f-word5 {
		font-size: 20rpx;
		color: rgba(153, 153, 153, 1);
		margin: 20rpx 0px 0px 0px;
	}

	.lyy-f-word4 {
		height: 26px;
		background: #6fb22f;
		color: white;
		text-align: center;
	}

	.lyy-f-d {
		height: 24rpx;
		border: 1px solid rgba(252, 91, 98, 1);
		border-radius: 3px;
		font-size: 20rpx;
		text-align: center;
		width: 50rpx;
		color: rgba(252, 91, 98, 1);
		margin: 23rpx 0rpx 0rpx 0rpx;
		line-height: 24rpx;
	}

	.lyy-flex2 {
		display: flex;
		padding-right: 10rpx;
		align-items: center;
		.lyy-flex3 {
			flex: 1;
			.lyy-f-word2 {
				font-size: 14px;
				color: rgba(241, 13, 59, 1);
			}
		}
		&.lyy-a-tu2 {
			height: 34rpx;
			background: rgba(255, 255, 255, 1);
			border: 1px solid #fc5b62;
			border-radius: 2px;
			margin: 10rpx 0rpx;

			.lyy-a-tu3 {
				height: 30rpx;
				background-color: #fc5b62;
				padding: 0px 6px;
				text-align: center;
				.lyy-a-tu5 {
					width: 20rpx;
					height: 20rpx;
					margin-top: 6rpx;
					display: block;
				}
			}

			.lyy-a-tu4 {
				margin-left: 4rpx;
				font-size: 24rpx;
				line-height: 30rpx;
				color: #fc5b62;
				padding: 0px 10rpx;
				text-align: center;
			}
		}
	}
}
.good-wrapper {
	width: 710rpx;
	background-color: #f7f5f5;
	margin: 20rpx auto 0;
	.spgood {
		width: 710rpx;
		height: 280rpx;
		background: #FFFFFF;
		box-shadow: 0px 0px 20px 0px rgba(50, 50, 52, 0.06);
		border-radius: 8rpx;
		padding: 40rpx 20rpx;
		display: flex;
		margin-bottom: 21rpx;
		.left-wrapper {
			width: 190rpx;
			height: 200rpx;
			border-radius: 10rpx;
			image {
				width: 190rpx;
				height: 200rpx;
				border-radius: 10rpx;
			}
		}
		.right-wrapper {
			padding-left: 22rpx;
			width: 100%;
			height: 200rpx;
			// background-color: red;
			.right-title {
				padding-top: 8rpx;
				width: 100%;
				// height: 29rpx;
				font-size: 30rpx;
				font-weight: bold;
				color: #333333;
			}
			.right-addr {
				margin-top: 18rpx;
				display: flex;
				.shop-img {
					width: 26rpx;
					height: 23rpx;
					margin: 0 4rpx 0 0;
					image {
						width: 100%;
						height: 100%;
					}
				}
				.shop-name {
					// height: 22rpx;
					font-size: 22rpx;
					font-weight: 500;
					color: #dcb876;
				}
				.point-img {
					width: 16rpx;
					height: 23rpx;
					margin: 0 4rpx 0 14rpx;
					image {
						width: 100%;
						height: 21rpx;
					}
				}
				.point-disc {
					font-size: 24rpx;
					font-weight: 500;
					padding-top: 3rpx;
					color: #dcb876;
				}
			}
			.ex-addr {
				margin-top: 16rpx;
				// padding-left: 22rpx;
				height: 24rpx;
				font-size: 24rpx;
				font-weight: 500;
				color: #dcb876;
				image {
					height: 22rpx;
				}
				.name-img {
					// vertical-align: ;
					width: 26rpx;
					margin: 0 4rpx -3rpx 0;
				}
				.point-img {
					width: 16rpx;
					margin: 0 4rpx -3rpx 14rpx;
				}
			}
			.pepple-num {
				width: 99rpx;
				height: 36rpx;
				// color: #ff3366;
				// background: #FC7A0C;
				background-color: #fee4ce;
				// opacity: 0.2;
				border-radius: 18rpx;
				font-size: 20rpx;
				font-weight: 500;
				color: #ff3366;
				line-height: 36rpx;
				padding-left: 12rpx;
				margin-top: 33rpx;
				image {
					width: 17rpx;
					height: 20rpx;
				}
			}
			.right-bottom {
				margin-top: 2rpx;
				// justify-items: flex-end;
				display: flex;
				justify-content: space-between;
				.sp-price {
					height: 60rpx;
					display: flex;
					vertical-align: bottom;
					line-height: 60rpx;
					.now-price {
						font-size: 30rpx;
						font-weight: bold;
						color: #901b21;
						margin-right: 16rpx;
					}
					.old-price {
						font-size: 22rpx;
						font-weight: 500;
						text-decoration: line-through;
						color: #aaaaaa;
					}
				}
				.sp-btn {
					width: 160rpx;
					height: 60rpx;
					border-radius: 30rpx;
					font-size: 26rpx;
					text-align: center;
					line-height: 60rpx;
					font-weight: 400;
					color: #ffffff;
					background-color: #901b21;
				}
			}
		}
	}
}
</style>