frontend-app/components/common/product-seckill-card.vue

<template>
	<view class="seckill_card_container" @click="onSelectProct(item)">
		<!-- Left side image with optional countdown overlay -->
		<view class="seckill_card_left">
			<up-image :src="item.url || item.image || item.accessUrl" width="220rpx" height="220rpx" bgColor="#f1f6ff00"
				shape="square" radius="16rpx"></up-image>
			<view class="countdown_bar" v-if="showCountdown && countdownText">
				<text class="countdown_text">{{ countdownText }}</text>
			</view>
		</view>

		<!-- Right side content -->
		<view class="seckill_card_right">
			<view>
				<view class="tags_row" v-if="Array.isArray(item.goodsTagList)">
					<image v-for="i in item.goodsTagList" :key="i.icon" :src="i.icon" class="tag_image"
						mode="heightFix"></image>
				</view>

				<!-- 商品名称 -->
				<view class="product_title">{{ item.title }}</view>
			</view>

			<!--  (秒杀券立减) -->
			<view class="coupon_row" v-if="hasCoupon">
				<view class="coupon_badge" v-if="activedType === 'seckill' || activedType === 'actived'">
					<text class="flash_icon">⚡</text>
					<text class="coupon_text" v-if="item.secDiscount || item.subsidy">加倍补{{ item.secDiscount ||
						item.subsidy }}元</text>
				</view>
				<view class="coupon_badge" v-if="activedType === 'super'">
					<text class="flash_icon">⚡</text>
					<text class="coupon_text">加倍补{{ item.subsidy }}积分</text>
				</view>
			</view>

			<!-- Price and action card row -->
			<view class="price_action_row">
				<view class="price_section">
					<text class="price_symbol">¥</text>
					<text class="price_integer">{{ item.price }}</text>
					<text class="original_price seckill">{{ `${attributes.leftTime ?
						`只剩${attributes.leftTime}` : ''}` }}</text>
					<!-- <text class="original_price" v-else>¥{{ formatOriginalPrice }}</text> -->
				</view>
				<!-- Alarm clock button -->
				<view class="alarm_btn_wrapper">
					<image class="uni-image" v-if="activedType === 'actived'"
						src="https://static.tbmall.xin/static/new-home/home_3.png"></image>
					<image class="uni-image seckill-icon" v-else src="https://static.tbmall.xin/static/home/qiang.png">
					</image>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
export default {
	name: "product-seckill-card",
	props: {
		// 单个商品
		item: {
			type: Object,
			default: () => ({})
		},
		// 倒计时
		showCountdown: {
			type: Boolean,
			default: true
		},
		// Time object containing startTime and endTime timestamps
		timeObj: {
			type: Object,
			default: () => ({})
		},
		activedType: {
			type: String,
		},
		attributes: {
			type: Object,
			default: () => ({})
		}
	},
	data() {
		return {
			countdownText: "",
			timer: null,
			now: Date.now()
		};
	},
	watch: {
		timeObj: {
			immediate: true,
			deep: true,
			handler() {
				this.startCountdown();
			}
		}
	},
	computed: {
		hasCoupon() {
			return this.item.secDiscount || this.item.subsidy;
		},
	},
	beforeDestroy() {
		this.clearTimer();
	},
	methods: {
		// 商品
		onSelectProct(item) {
			if (this.activedType === 'actived') {
				uni.showToast({
					title: '活动即将开始',
					icon: 'none',
					mask: true,
					duration: 1500,
				})
				return;
			}
			let url = "/pages/other_package/productInfo/productInfo?id=" + item.id;
			if (this.activedType === 'seckill') {
				url = "/pages/other_package/productInfo/productInfo?id=" + item.id + "&activedType=" + this.activedType + "&activityId=" + item.activityId;
			}
			uni.navigateTo({
				url: url,
			});
		},
		startCountdown() {
			this.clearTimer();
			this.updateCountdown();
			this.timer = setInterval(() => {
				this.now = Date.now();
				this.updateCountdown();
			}, 1000);
		},
		updateCountdown() {
			if (!this.timeObj || !this.timeObj.startTime || !this.timeObj.endTime) {
				this.countdownText = "";
				return;
			}
			const now = Date.now();
			const startTime = Number(this.timeObj.startTime);
			const endTime = Number(this.timeObj.endTime);

			if (now < startTime) {
				const diff = startTime - now;
				this.countdownText = `秒杀专享 ${this.formatDuration(diff)} 后开始`;
			} else if (now >= startTime && now <= endTime) {
				const diff = endTime - now;
				this.countdownText = `秒杀专享 ${this.formatDuration(diff)} 后结束`;
			} else {
				this.countdownText = "已结束";
			}
		},
		formatDuration(ms) {
			let totalSeconds = Math.floor(ms / 1000);
			if (totalSeconds < 0) totalSeconds = 0;

			const hours = Math.floor(totalSeconds / 3600);
			const minutes = Math.floor((totalSeconds % 3600) / 60);
			const seconds = totalSeconds % 60;

			const pad = (num) => String(num).padStart(2, '0');
			return `${pad(hours)}:${pad(minutes)}:${pad(seconds)}`;
		},
		clearTimer() {
			if (this.timer) {
				clearInterval(this.timer);
				this.timer = null;
			}
		}
	}
};
</script>

<style lang="scss" scoped>
.seckill_card_container {
	display: flex;
	background-color: #ffffff;
	border-radius: 24rpx;
	margin-bottom: 20rpx;
	width: 100%;
}

.seckill_card_left {
	position: relative;
	width: 220rpx;
	height: 220rpx;
	flex-shrink: 0;
	border-radius: 16rpx;
	overflow: hidden;
}

.countdown_bar {
	position: absolute;
	bottom: 0;
	left: 0;
	width: 100%;
	background: rgba(109, 63, 10, 0.9); // Dark bronze/brown background
	padding: 6rpx 0;
	text-align: center;
}

.countdown_text {
	color: #ffffff;
	font-size: 18rpx;
	font-weight: bold;
}

.seckill_card_right {
	flex: 1;
	margin-left: 24rpx;
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	min-width: 0;
}

.tags_row {
	display: flex;
	align-items: center;
	margin-bottom: 8rpx;
	gap: 8rpx;

	.tag_image {
		height: 28rpx;
		display: block;
		flex-shrink: 0;
	}
}

.vip_icon {
	color: #ffffff;
	background: #ffb100;
	border-radius: 50%;
	width: 18rpx;
	height: 18rpx;
	font-size: 14rpx;
	display: flex;
	align-items: center;
	justify-content: center;
	margin-right: 6rpx;
	font-weight: 900;
}

.product_title {
	font-size: 26rpx;
	color: #000;
	font-weight: bold;
	line-height: 30rpx;
	word-break: break-all;
	text-overflow: ellipsis;
	display: -webkit-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 2;
	overflow: hidden;
	// margin-bottom: 12rpx;
}

.coupon_row {
	display: flex;
	position: relative;

	.coupon_badge {
		position: absolute;
		top: -12rpx;
		background: linear-gradient(90deg, #b164fb 0%, #7632ff 100%);
		color: #ffffff;
		font-size: 20rpx;
		font-weight: bold;
		padding: 4rpx 10rpx;
		border-radius: 8rpx;
		display: flex;
		align-items: center;

		&::after {
			content: '';
			position: absolute;
			bottom: -8rpx;
			left: 24rpx;
			width: 0;
			height: 0;
			border-left: 8rpx solid transparent;
			border-right: 8rpx solid transparent;
			border-top: 8rpx solid #b164fb;
		}
	}
}

.flash_icon {
	margin-right: 6rpx;
	color: #ffdd00;
}

.price_action_row {
	display: flex;
	justify-content: space-between;
	align-items: center;
	background: linear-gradient(270deg, #F0E7FE 0%, rgba(240, 231, 254, 0) 100%);
	border-radius: 12rpx;
	padding: 10rpx 20rpx;
	height: 80rpx;
	border-radius: 16rpx;
	width: 100%;
	box-sizing: border-box;
	position: relative;

	.uni-image {
		display: block;
		width: 80rpx;
		height: inherit;
		position: absolute;
		top: 50%;
		transform: translateY(-50%);
		right: 0;
		border-radius: 12rpx;

		&.seckill-icon {
			height: 80rpx;
		}
	}
}

.price_section {
	display: flex;
	align-items: baseline;
}

.price_symbol {
	font-size: 24rpx;
	color: #7632ff;
	font-weight: bold;
	margin-right: 4rpx;
}

.price_integer {
	font-size: 40rpx;
	color: #7632ff;
	font-weight: bold;
}

.price_decimal {
	font-size: 28rpx;
	color: #7632ff;
	font-weight: bold;
}

.original_price {
	font-size: 24rpx;
	color: #999999;
	text-decoration: line-through;
	margin-left: 10rpx;

	&.seckill {
		color: #7934F6;
		font-size: 20rpx;
		text-decoration: none;
	}
}

.alarm_btn_wrapper {
	width: 56rpx;
	height: 56rpx;
	display: flex;
	align-items: center;
	justify-content: center;
	transition: background-color 0.2s;

	&:active {
		background-color: #f0e7ff;
	}
}
</style>