web/manager/src/views/lili-floor-renovation/modelList/seckill.vue

<template>
    <div class="seckill">
        <div class="aside">
            <div class="title">{{actName}}</div>
            <div class="hour"><span>{{currHour}}:00</span>点场 倒计时</div>
            <div class="count-down" v-if="actStatus === 1"><span>{{hours}}</span><span>{{minutes}}</span><span>{{seconds}}</span></div>
            <div class="act-status" v-else>{{ actStatus == 0 ?'未开始':'已结束' }}</div>
        </div>
        <div class="section">
            <swiper ref="mySwiper" :options="swiperOptions">
                <swiper-slide v-for="(item,index) in options.list[0].goodsList" :key="index" class="swiper-slide">
                    <div class="content">
                        <img :src="item.img" width="140" height="140" :alt="item.name">
                        <div class="ellipsis">{{item.name}}</div>
                        <div>
                            <span>{{ item.price | unitPrice('￥') }}</span>
                            <span>{{ item.originalPrice | unitPrice('￥') }}</span>
                        </div>
                    </div>
                    
                </swiper-slide>
            </swiper>
        </div>
    </div>
</template>
<script>
import { Swiper, SwiperSlide, directive } from 'vue-awesome-swiper'
import 'swiper/swiper-bundle.css'
export default {
    components: {
        Swiper,
        SwiperSlide
    },
    directives: {
        swiper: directive
    },
    props:{
        data:{
            type: Object,
            default: null
        }
    },
    data() {
        return {
            options:this.data.options, // 当前数据
            actStatus:0,  // 0 未开始  1 进行中   2 已结束
            actName:'限时秒杀',
            currHour:'00', // 当前秒杀场
            diffSeconds:0, // 倒地时
            hours: '00', // 小时
            minutes: '00', // 分钟
            seconds: '00', // 秒
            interval:undefined, // 定时器
            swiperOptions:{ // 轮播图参数 
                slidesPerView: 5,
                autoplay:true,
                loop:true
            }
        }
    },
    watch: {
        diffSeconds(val){
            const hours = Math.floor(val / 3600)
            // 当前秒数 / 60，向下取整
            // 获取到所有分钟数 3600 / 60 = 60分钟
            // 对60取模，超过小时数的分钟数
            const minutes = Math.floor(val / 60) % 60
            // 当前的秒数 % 60，获取到 超过小时数、分钟数的秒数（秒数）
            const seconds = val % 60
            this.hours = hours < 10 ? '0' + hours : hours
            this.minutes = minutes < 10 ? '0' + minutes : minutes
            this.seconds = seconds < 10 ? '0' + seconds : seconds

            if(val === 0){
                clearInterval(this.interval)
                this.hours = 0;
                this.minutes = 0;
                this.seconds = 0;
                this.countDown(this.options.list)
            }
        }
    },
    mounted(){
        this.countDown(this.options.list)
    },
    beforeDestroy(){
        clearInterval(this.interval)
    },
    methods: {
        // 倒计时
        countDown(list){
            /**
             * 默认倒计时两小时
             * 如果没有开始，则显示未开始
             * 进行中显示倒计时
             * 今天的秒杀结束则显示已结束
             */
            let nowHour = new Date().getHours();
            if(nowHour < Number(list[0].time)){ // 活动未开始
                this.currHour = list[0].time
                this.actStatus = 0;
            } else if(nowHour >= Number(list[list.length-1].time + 2)) { // 活动已结束
                this.actStatus = 2;
                this.currHour = list[list.length-1].time
            } else { // 活动进行中
                this.actStatus = 1;
                for(let i = 0; i < list.length; i++) {
                    if(nowHour == Number(list[i].time)) {
                        this.currHour = list[i].time;
                    }
                    if( nowHour > Number(list[i].time) && nowHour < Number(list[i].time + 2) ){
                        this.currHour = list[i].time;
                    }
                }       
                // 当前0点时间戳
                let zeroTime = new Date(new Date().toLocaleDateString()).getTime()
                // 活动倒计时
                this.diffSeconds = Math.floor( ( zeroTime + 3600 * 1000 * (this.currHour+2) - new Date().getTime() ) / 1000)
                const that = this;
                this.interval = setInterval(() => {
                    this.diffSeconds--
                }, 1000);
            }
        }
    }
}
</script>
<style lang="scss" scoped>
.seckill{
    width: 100%;
    height: 260px;
    display: flex;
    .aside{
        overflow: hidden;
        width: 190px;
        height: 100%;
        color: #fff;
        background-image: url('../../../assets/seckillBg.png');

        .title{
            width: 100%;
            text-align: center;
            font-size: 28px;
            margin-top: 31px;
        }

        .hour{
            margin-top: 90px;
            text-align: center;
            span{
                font-size: 18px;
            }
        }

        .count-down{
            margin: 10px 0 0 30px;
            >span{
                position: relative;
                float: left;
                width: 30px;
                height: 30px;
                text-align: center;
                background-color: #2f3430;
                margin-right: 20px;
                color: white;
                font-size: 20px;
                &::after{
                    content: ":";
                    display: block;
                    position: absolute;
                    right: -20px;
                    font-weight: bolder;
                    font-size: 18px;
                    width: 20px;
                    height: 100%;
                    top: 0;
                }
            }
            >span:last-child::after{
                content: '';
            }
        }

        .act-status{
            margin: 10px 0 0 65px;
            font-size: 20px;
        }
    }

    .section{
        width: 1000px;
        // background: #efefef;
        .swiper-slide{
            height: 260px;
            .content{
                width: 200px;
                display: flex;
                justify-content: center;
                align-items: center;
                flex-direction: column;
                position: relative;
                &::after{
                    content: "";
                    display: block;
                    position: absolute;
                    top: 50%;
                    right: 0;
                    width: 1px;
                    height: 200px;
                    transform: translateY(-50%);
                    background: linear-gradient(180deg,white,#eeeeee,white);
                }
                img{
                    margin-top: 30px;
                }
                >div{
                    width: 160px;
                    margin-top: 10px;
                    font-size: 12px;
                    position: relative;
                    
                }
                >div:nth-of-type(1):hover{
                    color: $theme_color;
                    cursor: pointer;
                }
                >div:nth-of-type(2){
                    border: 1px solid $theme_color;
                    line-height: 24px;
                    display: flex;
                    text-align: center;

                    span:nth-child(1){
                        color: #fff;
                        font-size: 16px;
                        width: 92px;
                        background-color: $theme_color;
                        position: relative;
                        &::before{
                            content: " ";
                            width: 0;
                            height: 0;
                            border-color: transparent white transparent transparent;
                            border-style: solid;
                            border-width: 24px 8px 0 0;
                            position: absolute;
                            top: 0;
                            left: 84px;
                        }
                    }

                    span:nth-child(2){
                        color: #999;
                        width: 66px;
                        text-decoration: line-through;
                    }
                }
            }
        }
    }
}
</style>