junzitang/components/setMealMore.vue

<template>
	<view>
		<u-popup :value="isShow" mode="bottom" :mask-close-able="false" :border-radius="12">
			<view class="set_more">
				<view class="more clearfix">
					<view class="float_left">
						<text class="title">组合套餐</text>
						<text class="tip">{{total}}组套餐,最多可省￥{{combinedPackage[0].originPrice - combinedPackage[0].price - 0}}</text>
					</view>
					<text class="ibonfont ibonguanbi close-icon float_right" @click="closeaddcartPop"></text>
				</view>
				<scroll-view scroll-y="true" style="height: 600rpx;">
					<view class="group-ul">
						<view class="group-li clearfix" v-for="item,index in combinedPackage" :key="index" @click="goPage('/pageT/goodsGroup/goodsGroupDetail?goodsid=' + goods_id +'&shopid=' + item.shopId+'&index='+index)">
							<view class="float_left">
								<scroll-view scroll-x="true" class="left-scroll">
									<view class="goods-ul">
										<view class="goods-li" v-for="item1,index1 in item.goodsData" :key="index1">
											<image :src="item1.images[0]" mode="aspectFill"></image>
											<view class="goods-name ellipsis">{{item1.title}}</view>
										</view>
									</view>
								</scroll-view>
							</view>
							<view class="float_left dy-icon">
								<text class="ibonfont ibonicon"></text>
							</view>
							<view class="float_left price-right">
								<view class="group-price">
									<text>套餐价</text>
									<text class="primary-color">¥{{item.price}}</text>
								</view>
								<view class="save-price primary-color">
									可省¥{{item.originPrice - item.price - 0}}
								</view>
								<view class="buy-btn primary-bg">
									立即购买
								</view>
							</view>
						</view>
					</view>
				</scroll-view>
			</view>
		</u-popup>
	</view>
</template>

<script>
	export default {
		props: {
			isShow: {
				type: Boolean,
				default: false
			},
			goods_id: {
				type: [Number, String],
				default: 0,
			},
			shopId: {
				type: [Number, String],
				default: 0
			},
		},
		data() {
			return {
				total: 0,
				combinedPackage: []
			}
		},
		watch:{
			isShow(val){
				if(val){
					this.listsApiComBinPackage()
				}
			}
		},
		created() {
			// this.listsApiComBinPackage()
		},
		methods: {
			// 关闭弹窗
			closeaddcartPop() {
				this.$emit('close', false);
				console.log(this.goodsId, this.shopId)
			},
			async listsApiComBinPackage() {
				const {
					data
				} = await this.$u.api.listsApiComBinPackage({
					page: 1,
					pageSize: 10,
					shopId: this.shopId,
					goodsId: this.goodsId
				})
				this.combinedPackage = data
				this.total = data.length
				console.log(data)
			}
		}
	}
</script>

<style lang="scss" scoped>
	.set_more {
		height: 700rpx;
		background-color: #f5f9fc;

		.more {
			height: 80rpx;
			line-height: 80rpx;
			padding: 0 30rpx;
			background-color: #fff;

			.title {
				font-weight: 560;
			}

			.tip {
				color: #999;
				font-size: 24rpx;
				margin-left: 10rpx;
			}

			.close-icon {
				color: #999;
				font-size: 40upx;
			}
		}

		.group-ul {
			padding: 20rpx;

			.group-li {
				background-color: #FFFFFF;
				border-radius: 12rpx;
				padding: 20rpx;
				margin-bottom: 20rpx;

				.float_left {
					.left-scroll {
						width: 430rpx;
						white-space: nowrap;

						.goods-li {
							display: inline-block;
							vertical-align: middle;

							image {
								display: block;
								width: 150rpx;
								height: 150rpx;
								border-radius: 10rpx;
								margin: 0 auto;
							}

							text-align: center;

							.goods-name {
								width: 150rpx;
								height: 36rpx;
								line-height: 36rpx;
								margin-top: 10rpx;
								font-size: 24rpx;
								-webkit-line-clamp: 1;
							}
						}

						.plus-icon {
							vertical-align: middle;
							display: inline-block;
							line-height: 150rpx;
							padding: 0 10rpx;
							height: 200rpx;
						}
					}
				}

				.dy-icon {
					padding: 0 10rpx;
					line-height: 150rpx;
					padding: 0 10rpx;
					height: 200rpx;
					color: #cecece;

					.ibonicon {
						font-size: 26rpx;
					}
				}

				.price-right {
					color: #666666;
					font-size: 24rpx;
					text-align: center;
					width: 190rpx;

					.group-price {
						.primary-color {
							font-weight: 700;
							font-size: 28rpx;
						}
					}

					.save-price {
						padding: 10rpx 0;
					}

					.buy-btn {
						line-height: 56rpx;
						height: 56rpx;
						border-radius: 8rpx;
						text-align: center;
						color: #FFFFFF;
						width: 150rpx;
						margin: 10rpx auto 0;
					}
				}
			}
		}
	}
</style>