zyejMAll-mobile/sheep/components/s-seckill-block/s-seckill-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/seckill/list')">
					<template v-slot:header>
						<view class="ss-flex ss-col-center">
							<div class="wh">
								<img class="new-text1"
									src="https://zysc.fjptzykj.com:3000/shangcheng/cb995c399d784c08e27d8f56b0a63ace2d13af3a1ee6aba5a2da71868dc4cf00.png" />
								<span class="new-text">限时秒杀</span>
							</div>
							<!-- <image class="list-icon" src="https://zysc.fjptzykj.com:3000/shangcheng/1bd7faadbb3c319c6ad303edc23ecbf12162b8ac22e2c8058b3914397d9dd226.png"
	  						mode="aspectFit"></image> -->
							<view style="color:  rgba(255, 51, 35, 1); font-size:15px;"
								class="title-text ss-flex ss-row-center ss-col-center ss-m-l-20">
								<span class="time">{{ hours < 10 ? '0' + hours : hours }}</span>:
								<span class="time">{{ minutes < 10 ? '0' + minutes : minutes }}</span>:
								<span class="time">{{ seconds < 10 ? '0' + seconds : seconds }}</span>

							</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/seckill', {
              id: props.data.activityId,
            })
          "
        ></s-goods-column>
      </view>
    </view> -->
		<!-- 样式二：一列 - 左图右文 -->
		<!-- <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/seckill', {
              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"
			: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 btn='ms' 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/seckill', {
	          id: product.activityId,
	        })
	      "></s-goods-column>
			</view>
		</view>
	</view>
</template>

<script setup>
	/**
	 * 秒杀商品列表
	 *
	 * @property {Array} list 商品列表
	 */
	import {
		computed,
		onMounted,
		ref
	} from 'vue';
	import sheep from '@/sheep';
	import SeckillApi from '@/sheep/api/promotion/seckill';
	import SpuApi from '@/sheep/api/product/spu';

	// 接收参数
	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 totalTime = ref(5 * 60 * 60); // 5小时转换为秒
	const hours = ref(5);
	const minutes = ref(0);
	const seconds = ref(0);
	let intervalId = null;

	const updateClock = () => {
		if (totalTime.value > 0) {
			const newHours = Math.floor(totalTime.value / 3600);
			const newMinutes = Math.floor((totalTime.value % 3600) / 60);
			const newSeconds = totalTime.value % 60;
			hours.value = newHours;
			minutes.value = newMinutes;
			seconds.value = newSeconds;
			totalTime.value--;
		} else {
			clearTimer();
			alert('倒计时结束');
		}
	};

	const startTimer = () => {
		intervalId = setInterval(updateClock, 1000);
	};

	const clearTimer = () => {
		clearInterval(intervalId);
	};

	const productList = ref([]);
	// 查询秒杀活动商品
	onMounted(async () => {
		startTimer();
		// todo：@owen 与Yudao结构不一致，待重构
		// const { data: activity } = await SeckillApi.getSeckillActivity(props.data.activityId);
		// const { data: spu } = await SpuApi.getSpuDetail(activity.spuId);
		const data = await SpuApi.getSpuSeckilllist();
		// console.log(data,"datadatadatadatadatadatadatadata")
		productList.value = data.data;
	});

	// onBeforeUnmount(() => {
	//   clearTimer();
	// });
</script>

<style lang="scss" scoped>
	.time {
		width: 20px;
		height: 20px;
		background: rgba(255, 237, 238, 1);
		color:  rgba(255, 51, 35, 1);
		text-align: center;
		padding: 0 3px;
	}

	:deep(.uni-border-bottom) {
		height: 0;
	}

	.header-box {
		height: 100rpx;
	}

	.goods-list {
		position: relative;

		&:nth-last-child(1) {
			margin-bottom: 0 !important;
		}

		.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-sm-box {
		margin: 0 auto;
		box-sizing: border-box;

		.goods-card-box {
			flex-shrink: 0;
			overflow: hidden;
			width: 33.3%;
			box-sizing: border-box;
		}
	}
</style>
<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: 8px;
	}

	:deep(.sm-goods-card) {
		background: transparent;
	}

	.wh {
		position: relative;
		padding-right: 10px;
		display: flex;
		align-items: center;

		.new-text1 {
			width: 30px;
			height:30px;
		}

		.new-text {
			font-weight: 700;
		}
	}

	.wh::after {
		position: absolute;
		content: "";
		top: 50%;
		right: 0;
		width: 1px;
		height: 57%;
		border-right: 1px solid #ababab;
		transform: translateY(-50%);
	}
</style>