shop4.3.57/components/page-component/app-diy-timer/app-diy-timer.vue

<template>
    <view class="app-timer">
        <app-jump-button form :url="link.url" :open_type="link.openType" arrangement="column">
            <view v-if="picUrl">
                <app-image :img-src="picUrl" mode="widthFix" width="750rpx" height="auto"></app-image>
            </view>
            <view :style="{'background-image':  `url(${bgPicUrl ? bgPicUrl : '../../../static/image/icon/icon-timer-bg.png'})`}"
                  class="timer dir-top-nowrap main-center"
                  v-if="timerStr">
                <view class="timer-txt" v-if="startTime">距离开始</view>
                <view class="timer-txt" v-if="startTime === null && endTime">距离结束</view>
                <view class="timer-txt" v-if="startTime === null && endTime === null">活动已结束</view>
                <view class="timer-item">
                    <block  v-for="(item,index) in timerStr" :key="index">
                        {{index?':':''}}
                        <view class="item" v-if="item">{{item}}</view>
                    </block>
                </view>
                <view class="timer-more" v-if="link.url.length">
                    查看更多
                    <image src="../../../static/image/icon/arrow-right-white.png"></image>
                </view>
            </view>
        </app-jump-button>
    </view>
</template>

<script>
    export default {
        name: "app-timer",
        props: {
            picUrl: String,
            link: Object,
            startDateTime: {
                type: String,
                default() {
                    return '2019-8-30 10:00:00';
                }
            },
            endDateTime: {
                type: String,
                default() {
                    return '2019-8-30 10:00:00';
                }
            },
            pageHide: Boolean,
            bgPicUrl: String,
        },
        data() {
            return {
                timeInterval: null,
                startTime: null,
                endTime: null,
                timerStr: []
            };
        },
        computed: {
            time() {
                return {
                    startDateTime: this.startDateTime,
                    endDateTime: this.endDateTime,
                    pageHide: this.pageHide,
                };
            }
        },
        methods:{
            setStyle(val){
                return `<view class="item">${val}</view>`
            }
        },
        beforeDestroy() {
            clearInterval(this.timeInterval);
        },
        watch: {
            time: {
                handler() {
                    if (this.pageHide) {
                        clearInterval(this.timeInterval);
                        return ;
                    }
                    let startDateTime = this.startDateTime;
                    let endDateTime = this.endDateTime;
                    this.timeInterval = setInterval(() => {
                        let startTime = null, endTime = null, timerStr = [];
                        if (startDateTime) {
                            startDateTime = startDateTime.replace(/-/g, '/');
                            startTime = this.$utils.timeDifference(new Date().getTime(), new Date(startDateTime).getTime());
                            if (startTime) {
                                let day = startTime['d'] > 0 ? startTime['d'] + '天' : '';
                                if(day) timerStr.push(day)
                                timerStr.push(startTime['h'])
                                timerStr.push(startTime['m'])
                                timerStr.push(startTime['s'])
                            }
                        }
                        if (endDateTime && !timerStr.length) {
                            endDateTime = endDateTime.replace(/-/g, '/');
                            endTime = this.$utils.timeDifference(new Date().getTime(), new Date(endDateTime).getTime());
                            if (endTime) {
                                let day = endTime['d'] > 0 ? endTime['d'] + '天' : '';
                                if(day) timerStr.push(day)

                                timerStr.push(endTime['h'])
                                timerStr.push(endTime['m'])
                                timerStr.push(endTime['s'])
                            }
                        }
                        this.startTime = startTime;
                        this.endTime = endTime;
                        this.timerStr = timerStr;
                    }, 1000);
                },
                immediate: true
            }
        }
    }
</script>

<style scoped lang="scss">
    .timer {
        width: 745rpx;
        height: #{80rpx};
        padding: #{24rpx};
        font-size: $uni-font-size-general-one;
        color: #ffffff;
        background-repeat: no-repeat;
        background-size: 100% 100%;
        background-position: center;
        border-top-left-radius: 30rpx;
        border-top-right-radius: 30rpx;
        display: flex;
        justify-content: start;
        align-items: center;
        flex-direction: row;
        margin: 0 auto;
        &.new-timer-bg{
            background-image:none !important;
        }
        .timer-txt{
            margin-right: 10rpx;
        }
        .timer-item{
            display: flex;
            align-items: center;
            flex: 1;
            .item{
                background: #000;
                color: #ffffff;
                padding: 0 6rpx;
                border-radius: 10rpx;
                text-align: center;
                margin: 0 8rpx;
            }
        }
        .timer-more{
            width: 130rpx;
            image{
                width: 14rpx;
                height: 20rpx;
                margin-left: 5rpx;
            }
        }
    }
</style>