shop-app/pages/index/components/Seckill.vue

<!--
 * @Author: ch
 * @Date: 2022-03-23 10:07:48
 * @LastEditors: ch
 * @LastEditTime: 2022-04-12 18:55:54
 * @Description: file content
-->
<template>
	<view class="seckill" @click="$Router.push('/seckill')">
		<view class="seckill-title">
			<view class="seckill-title--left">
				<text class="seckill-title--text">限时秒杀</text>
				<view class="seckill-title--time">
					<text class="seckill-title--time-name">{{activityTimeVO.timeName}}</text>
					<image class="seckill-title--time-icon" src="@/static/index/time.png"></image>
					<text class="seckill-title--time-time">{{timerStr}}</text>
				</view>
			</view>
			<view class="seckill-title--more">
				<text>查看更多</text>
				<image class="seckill-title--more-icon" src="@/static/common/arrow.png"></image>
			</view>
		</view>
		<view class="seckill--group">
			<view v-for="item in data.activityProductListVO" :key="item.activityProductId">
				<image class="seckill--item-img" :src="item.productMainPicture"></image>
				<view class="seckill--item-pirce-box">
					<text class="seckill--item-pirce-title">秒杀价</text>
					<text class="seckill--item-pirce">￥{{item.activityPrice}}</text>
				</view>
				<!-- <text class="seckill--item-original-pirce">￥50</text> -->
			</view>
		</view>
	</view>
</template>
<script>
export default {
	props : {
		data : {
			type : Object,
			default: () => ({
				activityTimeVO : {
					timeName : 'xx'
				}
			})
		}
	},
	data(){
		return {
			timerStr : '00:00:00',
			secondNum : 0
		}
	},
	computed:{
		activityTimeVO (){
			return this.data.activityTimeVO || {}
		}
	},
	watch:{
		/**
		 * 监听数据变化后，做倒计时
		 */
		data(nVal){
			const {isStartActivity, activityTimeVO:{startTime, endTime }} = nVal;
			if(endTime){
				let curTime = (new Date('2022-4-12 12:00:50')).getTime(),
					expireTime = 0;
				if(isStartActivity){
					// 已开始秒杀 显示距结束倒计时
					// expireTime = (new Date(endTime)).getTime()
					expireTime = (new Date('2022-4-12 15:00:00')).getTime();
				}else{
					// 即将开抢 显示距开始倒计时
					expireTime = (new Date('2022-4-12 17:00:00')).getTime()
					expireTime = (new Date(startTime)).getTime()
				}
				const second = Math.floor((expireTime - curTime) / 1000);
				this.secondNum = second > 0 ? second : 0;
				this.timer();
			}
		}
	},
	methods:{
		timer(){
			
			if(this.secondNum == 0){
				this.timerStr = this.data.isStartActivity ? '已结束' : '已开始';
				return;
			}
			this.secondNum--;
			let hours = parseInt(this.secondNum / 3600)
			let minute = parseInt((this.secondNum - hours * 3600) / 60);
			let second = parseInt(this.secondNum % 60);
				hours = hours > 9 ? hours : `0${hours}`;
				minute = minute > 9 ? minute : `0${minute}`;
				second = second > 9 ? second : `0${second}`;
			this.timerStr = `${hours}:${minute}:${second}`;
			setTimeout(()=>this.timer(),1000)
		}
	}

}
</script>
<style lang="scss" scoped>
.seckill{
	height: 424rpx;
	width: 690rpx;
	margin: 0 auto;
	padding: 30rpx;
	background: #fff;
	border-radius: 20rpx;
	&-title{
		height: 36rpx;
		display: flex;
		justify-content: space-between;
		align-items: center;
		&--text{
			font-size: 36rpx;
		}
		&--left{
			display: flex;
		}
		&--time{
			display: flex;
			height: 38rpx;
			line-height: 36rpx;
			border-radius: 18rpx;
			margin-left: 36rpx;
			background: #FFEDE9;
			overflow: hidden;
			align-items: center;
		}
		&--time-name{
			height: 100%;
			padding: 0 22rpx 0 15rpx;
			background: #FF512B;
			font-size: 22rpx;
			color: #fff;
			position: relative;
			&::after{
				display: block;
				content: '';
				width: 16rpx;
				height: 36rpx;
				background: #FF512B;
				transform: rotate(40deg);
				position: absolute;
				right: -10rpx;
				top: -12rpx;
			}
			
		}
		&--time-time{
			margin-right: 15rpx;
			font-size: 22rpx;
			color: #FF512B;
			position: relative;
			&::before{
				display: block;
				content: '';
				width: 14rpx;
				height: 36rpx;
				background: #FFEDE9;
				transform: rotate(40deg);
				position: absolute;
				left: -52rpx;
				top: 8rpx;
				z-index: 0;
			}
		}
		&--time-icon{
			width: 22rpx;
			height: 22rpx;
			padding-left: 20rpx;
			margin-right: 8rpx;
		}
		&--more{
			display: inline-block;
			text{
				font-size: $font-size-sm;
				color: $color-grey5;
			}
			
		}
		&--more-icon{
			width: 10rpx;
			height: 20rpx;
			margin-left: 10rpx;
		}
	}
	&--group{
		display: flex;
		justify-content: space-between;
		margin-top: 30rpx;
	}
	&--item{
		&-img{
			width: 200rpx;
			height: 200rpx;
			border-radius: 8rpx;
			background: #F8F8F8;
		}
		&-pirce-box{
			width: 180rpx;
			height: 44rpx;
			line-height: 44rpx;
			background: linear-gradient(90deg, #FFE7DE 0%, #FFFFFF 100%);
			border-radius: 20rpx;
			padding-left:20rpx;
			margin: 20rpx 0 10rpx 0;
		}
		&-pirce-title{
			font-size: 22rpx;
			color: $color-grey5;
		}
		&-pirce{
			color: #FF512B;
			font-size: 32rpx;
		}
		&-original-pirce{
			display: block;
			font-size: 22rpx;
			color: #999;
			text-decoration: line-through;
			text-align: center;
			
		}
	}


	
}

</style>