yihuo/pages/spike/index.vue

<template>
    <page title="限时秒杀" class="title" ref="pageRef" nav-color="transparent">
        <view class="spike_timer flex">
            <image class="img" :src="resource.spike_timer" />
            <view v-if="timerFlag" class="text">
                {{ skipeType === 1 ? '秒杀开始' : '秒杀结束'}}
            </view>
            <view v-else class="text">
                {{ skipeType === 1 ? '距离开始' : '距离结束'}}
            </view>
            <timer :targetTime="targetTime" :timerFlag="timerFlag" @timeDone="SpikeTime(1)" />
        </view>
        <view class="marginT32 marginB18">
            <tabbar @change="onChange"/>
        </view>
        <empty v-if="isEmpty" :top="100" style="width: 100%" />
        <view class="visible-hiddle-caculate" style="width: 50%;">
            <view id="caculate-demo">
                <goods-cell v-if="demo" :data="demo"/>
            </view>
        </view>
        <view class="flex paddingY4 marginX18">
            <view class="flex1">
                <view id="left">
                    <goods-cell v-for="item in list" :key="item.id" :data="item" :skipeType="skipeType" :startTime="startTime" />
                </view>
            </view>
            <view class="flex1 marginL8">
                <view id="right">
                    <goods-cell v-for="item in list2" :key="item.id" :data="item" :skipeType="skipeType" :startTime="startTime" />
                </view>
            </view>
        </view>
        <view class="refresh" @click.stop="onRefresh">
            <image class="width100 height100" :src="resource.spike_refresh" />
        </view>
    </page>
</template>

<script>
import tabbar from "@/components/spike-tabbar";
import timer from "@/components/spike-timer";
import empty from '@/components/empty'
import goodsCell from './cell'
import resource from '@/utils/resource'

export default {
    components: { goodsCell, tabbar, empty, timer },
    data() {
        return{
            resource,
            isEmpty: false,
            list: [],
            list2: [],
            demo: null,
            subjectId: 0,
            targetTime: null,
            timerFlag: false,
            current: 1,
            size: 20,
            tab: 99,
            leftHeight: 0,
            rightHeight: 0,
            skipeType: '',
            startTime: ''
        }
    },
    onLoad(options) {
        this.subjectId = options.subjectId
        this.SpikeTime(options.subjectId)
    },
    mounted(){
        this.getSpikeList()
    },
    methods: {
        async SpikeTime(subjectId) {
            this.$service.mall.spikeTimer(subjectId).then(res => {
                this.targetTime = res.timeStatus === 1 ? res.startTime : res.endTime
                this.timerFlag = this.isTimeGreaterThanOneDay(this.targetTime),
                this.skipeType = res.timeStatus
                this.startTime = res.startTime
            })
        },
        getSpikeList(loading = false) {
            this.$service.mall.spikeList({
                current: this.current,
                size: this.size,
                subjectId: 1,
                sellOut: this.tab === 99 ? null : this.tab
            }, loading).then(async res => {
                const { records } = res
                if(this.current === 1) {
                    this.demo = null
                    this.list = []
                    this.list2 = []
                    this.leftHeight = 0
                    this.rightHeight = 0
                }

                let array1 = [...this.list]
                let array2 = [...this.list2]
                for (let i = 0; i < records.length; i++) {
                    let item = records[i]
                    let height = await this.getHeight(item)
                    if (this.leftHeight <= this.rightHeight) {
                        array1.push(item)
                        this.leftHeight += height
                    } else {
                        array2.push(item)
                        this.rightHeight += height
                    }
                }
                this.list = array1
                this.list2 = array2
                uni.stopPullDownRefresh()
                this.requesing = false
                this.isEmpty = this.list.length === 0
            })
        },
        getHeight(item) {
            this.demo = item
            const query = wx.createSelectorQuery()
            return new Promise((resolve, reject) => {
                this.$nextTick(() => {
                    setTimeout(() => {
                        query.select('#caculate-demo').boundingClientRect()
                        query.exec((res) => {
                            if (res[0]) {
                                resolve(res[0].height)
                            }
                            resolve(100)
                        })
                    }, 5)
                })
            })
        },
        isTimeGreaterThanOneDay(time) {
            const now = new Date();
            const target = new Date(time);
            const diffMs = target.getTime() - now.getTime();
            const diffDays = diffMs / (1000 * 60 * 60 * 24);
            return diffDays > 1;
        },
        onChange(tab) {
            this.current = 1
            this.tab = tab
            this.getSpikeList()
        },
        onRefresh() {
            this.current = 1
            this.getSpikeList()
        }
    },
    onReachBottom() {
        let allData = [...this.list, ...this.list2]
        if (allData.length > 0 && allData.length % this.size === 0) {
            this.current += 1
            this.getSpikeList(true)
        }
    }
}
</script>

<style>

.title {
    color: #fff;
}
</style>
<style lang="scss" scoped>
.title {
    text-shadow: -2px 0 black, 0 2px black,
      2px 0 black, 0 -2px black;
}
.spike_timer {
    position: relative;
    height: 144rpx;
    margin: 32rpx;
    padding-top: 22rpx;
    .img {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        z-index: -1;
    }
    .text {
        width: 80rpx;
        height: 100rpx;
        font-size: 36rpx;
        text-shadow: none;
        margin: 0 32rpx 22rpx 56rpx;
    }
}
.visible-hiddle-caculate {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: -1;
    visibility: hidden
}

.refresh {
    position: fixed;
    bottom: 200rpx;
    right: 20rpx;
    width: 80rpx;
    height: 80rpx;
    z-index: 99;
}
</style>