zyejMAll-mobile/sheep/components/s-groupon-block/s-groupon-block.vue

<!-- 装修组件 - 拼团 -->
<template>
	<view class="new-class">
		<!-- 标题栏 -->
		<view class="menu-list-wrap">
			<uni-list :border="true">
				<uni-list-item showArrow clickable
					@tap="sheep.$router.go('/pages/activity/groupon/list')">
					<template v-slot:header>
						<view>
							<view class="wh">
								<img class="new-text1"
									src="https://zysc.fjptzykj.com:3000/shangcheng/2f2be070c60ceb9466af937ff9dd8917ad2ee02f774dbac48fbb9e73bfc688d0.png" />
								<span class="new-text">拼团活动</span>
								<view style="color: rgb(187, 187, 187);font-size:15px;" class="title-text ss-flex ss-row-center ss-col-center ss-m-l-20">
									92人拼团成功
								</view>
							</view>
							
						</view>
					</template>
					<template v-slot:footer>
						<view style="color: rgb(187, 187, 187);font-size:13px;" class="notice-text ss-flex ss-row-center ss-col-center">
							查看更多
						</view>
					</template>
				</uni-list-item>
			</uni-list>
		</view>
		<!-- <view v-if="layoutType === 'threeCol'" class="goods-sm-box ss-flex ss-flex-wrap"
			:style="[{ margin: '-' + data.space + 'rpx' }]">
			<view v-for="product in productList" :key="product.id" class="goods-card-box" :style="[
          {
            padding: data.space + 'rpx',
          },
        ]">
				<s-goods-column class="goods-card" size="sm" :goodsFields="data.fields" :tagStyle="tagStyle"
					:data="product" :titleColor="data.fields.name?.color" :topRadius="data.borderRadiusTop"
					:bottomRadius="data.borderRadiusBottom" @click="
            sheep.$router.go('/pages/goods/groupon', {
              id: props.data.activityId,
            })
          "></s-goods-column>
			</view>
		</view> -->
		<!-- 样式2 一行一个 图片左 文案右 -->
		<!-- <view class="goods-box" v-if="layoutType === 'oneCol'">
			<view class="goods-list" v-for="(product, index) in productList" :key="index"
				:style="[{ marginBottom: space + 'px' }]">
				<s-goods-column class="goods-card" size="lg" :goodsFields="data.fields" :tagStyle="tagStyle"
					:data="product" :titleColor="data.fields.name?.color"
					:subTitleColor="data.fields.introduction?.color" :topRadius="data.borderRadiusTop"
					:bottomRadius="data.borderRadiusBottom" @click="
            sheep.$router.go('/pages/goods/groupon', {
              id: props.data.activityId,
            })
          ">
					<template v-slot:cart>
						<button class="ss-reset-button cart-btn" :style="[buyStyle]">
							{{ btnBuy?.type === 'text' ? btnBuy.text : '' }}
						</button>
					</template>
				</s-goods-column>
			</view>
		</view> -->

		<view v-if="'threeCol' === 'threeCol'" class="goods-sm-box ss-flex ss-flex-wrap new-ll"
			:style="[{ margin: '-' + data.space + 'rpx' }]">
			<!-- productList -->
			<view v-for="product in productList" :key="product.id" class="goods-card-box" :style="[
		  {
		    padding: data.space + 'rpx',
		  },
		]">
				<s-goods-column btn='pt' class="goods-card" size="sm" :goodsFields="data.fields" :tagStyle="tagStyle"
					:data="product" :titleColor="data.fields.name?.color" :topRadius="data.borderRadiusTop"
					:bottomRadius="data.borderRadiusBottom" @click="
					sheep.$router.go('/pages/goods/groupon', {
					  id: product.activityId,
					})
				"></s-goods-column>
			</view>
		</view>

	</view>
</template>

<script setup>
	/**
	 * 拼团
	 */
	import {
		computed,
		onMounted,
		ref
	} from 'vue';
	import sheep from '@/sheep';
	import SpuApi from '@/sheep/api/product/spu';
	import CombinationApi from '@/sheep/api/promotion/combination';

	// 接收参数
	const props = defineProps({
		data: {
			type: Object,
			default () {},
		},
		styles: {
			type: Object,
			default () {},
		},
	});

	let {
		layoutType,
		tagStyle,
		btnBuy,
		space
	} = props.data;
	let {
		marginLeft,
		marginRight
	} = props.styles;

	// 购买按钮样式
	const buyStyle = computed(() => {
		let btnBuy = props.data.btnBuy;
		if (btnBuy?.type === 'text') {
			return {
				background: `linear-gradient(to right, ${btnBuy.bgBeginColor}, ${btnBuy.bgEndColor})`,
			};
		}

		if (btnBuy?.type === 'img') {
			return {
				width: '54rpx',
				height: '54rpx',
				background: `url(${sheep.$url.cdn(btnBuy.imgUrl)}) no-repeat`,
				backgroundSize: '100% 100%',
			};
		}
	});

	const productList = ref([]);
	onMounted(async () => {
		// todo：@owen 与Yudao结构不一致，待重构
		const {
			data: activity
		} = await CombinationApi.getCombinationActivity(props.data.activityId);
		const ss = await SpuApi.getSpulist();
		console.log(ss, "getSpuListByIds")
		productList.value = ss.data;
	});
</script>
<style lang="scss">
	:deep(.uni-list--border-bottom){
		height:0 !important;
	}
	 :deep(.container--right){
		padding-left: 5px !important;
	}
	.ss-col-center{
		.list-icon {
			position: relative;
			width: 93px;
			height: 40px;
			padding-right: 10px;
			&::after{
				position:absolute;
				content:'';
				top:50%;
				right:0;
				width:1px;
				height:57%;
				border-right:1px solid #ababab;
				transform: translateY(-50%);
			}
		}
	}
	

	.notice-text {}

	.menu-list-wrap {
		::v-deep .uni-list {
			background-color: transparent;
		}
	}
</style>
<style lang="scss" scoped>
	.goods-list {
		position: relative;

		.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;
		}
	}

	.goods-list {
		&:nth-last-of-type(1) {
			margin-bottom: 0 !important;
		}
	}

	.goods-sm-box {
		margin: 0 auto;
		box-sizing: border-box;
		padding: 0 10px;

		.goods-card-box {
			flex-shrink: 0;
			overflow: hidden;
			width: 33.3%;
			box-sizing: border-box;
		}
	}

	.new-class {
		background: white;
		border-radius: 13px;
	}

	:deep(.sm-goods-card) {
		background: transparent;
	}
	
	.wh {
		
		display: flex;
		align-items: center;
		.new-text1{
			width:30px;
			height:30px;
		}
		.new-text{
			position: relative;
			font-weight: 700;	
			padding-right: 10px;
			&::after {
				position: absolute;
				content: "";
				top: 50%;
				right: 0;
				width: 1px;
				height: 57%;
				border-right: 1px solid #ababab;
				transform: translateY(-50%);
			}
		}
	}
	
	
</style>