yihuo/pages/vip/index.vue

<template>
    <page :nav="false" ref="pageRef" custom-class="paddingB10">

        <view class="pagae-nav" :style="{ paddingTop: statusBarHeight + 'px' }">
            <view class="flex-align" style="height: 72rpx">
                <view class="bold font8 color-white marginL14">超级商城</view>
            </view>
        </view>
        <view style="margin: 20rpx 7px 0" v-if="list" class="flex-wrap">
            <view class="search">
                <image class="search_bg" :src="resource.bgInput" />
                <view class="search_title flex-align paddingX12"></view>
                <view class="search_content flex-align">
                    <image
                        class="img"
                        style="color: #fff; width: 32rpx"
                        :src="resource.wow_search"
                    />
                    <input
                        class="paddingL8 font1"
                        style="color: #fff; width: 100%"
                        confirm-type="search"
                        placeholder="搜索你感兴趣的～"
                        v-model.trim="inputValue"
                        @confirm="getData"
                    />
                    <text class="text" @click="getData">搜索</text>
                </view>
                <view class="search_icon flex-align-between">
                    <view
                        class="icon_item flex-align"
                        v-for="(item, index) in iconList"
                        :key="index"
                    >
                        <image class="img" :src="item.icon" />
                        <text
                            class="marginL4"
                            style="color: rgba(255, 255, 255, 0.6); font-size: 22rpx"
                        >
                            {{ item.title }}
                        </text>
                    </view>
                </view>
            </view>
            <view v-if="![0, 3].includes(skipeType)" class="spike paddingX10">
                <view class="spike_title paddingX10" @click.stop="toSpike">
                    <image class="spike_img" :src="resource.spike_into_top" />
                    <view class="title">限时秒杀</view>
                    <view class="title_right">更多</view>
                </view>
                <view class="spike_content flex scroll-x nowrap paddingX10">
                    <view class="nowrap flex">
                        <view
                            class="spike_item"
                            v-for="(data, index) in spikeList"
                            :key="index"
                            @click="showDetail(data)"
                        >
                            <view class="item_img width100">
                                <image mode="widthFix" :src="data.mallGoodsVO.cover" />
                            </view>
                            <view class="item_name paddingX10 width100">
                                <view class="name line-ellipsis marginY3">
                                    {{ data.mallGoodsVO.name }}
                                </view>
                                <view class="marginT5 font6">¥{{ data.subjectPrice }}</view>
                            </view>
                        </view>
                    </view>
                </view>
            </view>
            <view class="paddingX16" style="width: 100%">
                <tabbar @change="clickTab" custom-class="flex-align-between" />
            </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 paddingY15" style="width: 100%">
                <view class="flex1">
                    <view id="left ">
                        <goods-cell v-for="item in list" :key="item.id" :data="item" />
                    </view>
                </view>
                <view class="flex1">
                    <view id="right">
                        <goods-cell v-for="item in list2" :key="item.id" :data="item" />
                    </view>
                </view>
            </view>
        </view>
    </page>
</template>

<script>
    import goodsCell from './cell'
    import tabbar from '@/components/vip-tabbar'
    import resource from '@/utils/resource'
    import empty from '@/components/empty'

    export default {
        components: { goodsCell, tabbar, empty },

        data() {
            return {
                resource,
                requesing: false,
                list: [],
                list2: [],
                demo: null,
                isEmpty: false,
                tab: null,
                inputValue: '',
                sellType: '',
                iconList: [
                    {
                        icon: resource.wow_zheng,
                        title: '正品保证'
                    },
                    {
                        icon: resource.wow_zhi,
                        title: '平台直营'
                    },

                    {
                        icon: resource.wow_xin,
                        title: '全新未拆'
                    },
                    {
                        icon: resource.wow_shou,
                        title: '售后无忧'
                    }
                ],
                subjectId: 1,
                skipeType: 0, // 0: 不存在秒杀活动  1: 秒杀活动未开始  2:开始 3: 结束
                current: 1,
                size: 15,
                leftHeight: 0,
                rightHeight: 0,
                spikeList: [],
                startTime: ''
            }
        },
        computed: {
            statusBarHeight() {
                if (this.$store.state.systemInfo) {
                    return this.$store.state.systemInfo.statusBarHeight
                }
                return 20
            }
        },
        onLoad() {
            this.$event.on(this.$event.key.LOGIN, this.getData)
        },
        onUnload() {
            this.$event.off(this.$event.key.LOGIN)
        },
        mounted() {
            this.toSpike('init')
            this.getData()
        },
        onShareAppMessage(res) {
            return {
                title: '燚火漫域 次元聚集地，潮玩新势力',
                path: '/pages/vip/index'
            }
        },
        onShareTimeline() {
            return {
                title: '燚火漫域 次元聚集地，潮玩新势力'
            }
        },
        onPullDownRefresh() {
            this.toSpike('init')
            this.getData()
        },
        methods: {
            async getData(loading = false) {
                if (this.requesing) return
                this.requesing = true
                const res = await this.$service.mall.list(
                    {
                        current: this.current,
                        size: this.size,
                        keyword: this.inputValue,
                        categoryId: this.tab === 0 ? '' : this.tab,
                        sellType: this.sellType === 0 ? '' : this.sellType
                    },
                    loading
                )
                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 < res.length; i++) {
                    let item = res[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
            },
            clickTab(value, type) {
                this.current = 1
                this.tab = value
                this.sellType = type
                this.getData(true)
            },
            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)
                    })
                })
            },
            async toSpike(type) {
                this.$service.mall.spikeTimer(this.subjectId).then((res) => {
                    if (type === 'init') {
                        this.skipeType = res.timeStatus
                        this.startTime = res.startTime
                        if (![0, 3].includes(res.timeStatus)) {
                            this.getSpikeList()
                        }
                    } else {
                        this.$router.pushCheck('spike', { subjectId: this.subjectId })
                    }
                })
            },
            getSpikeList(loading = false) {
                this.$service.mall
                    .spikeList(
                        {
                            current: 1,
                            size: 6,
                            subjectId: 1
                        },
                        loading
                    )
                    .then(async (res) => {
                        this.spikeList = res.records
                    })
            },
            showDetail(row) {
                this.toSpike('init')
                this.$router.push('product', {
                    id: row.mallGoodsVO.id,
                    subjectId: row.subjectId,
                    skipeType: this.skipeType,
                    startTime: this.startTime
                })
            }
        },
        onReachBottom() {
            let allData = [...this.list, ...this.list2]
            if (allData.length > 0 && allData.length % this.size === 0) {
                this.current += 1
                this.getData(true)
            }
        }
    }
</script>
<style>
    page {
        background: #222335;
    }
</style>
<style lang="scss" scoped>
    .bg {
        position: fixed;
        z-index: -1;
        left: 0;
        right: 0;
        top: 0;
        width: 100%;
        height: 100%;
    }
    .pagae-nav {
        // position: fixed;
        // top: 0;
        // left: 0;
        // width: 100%;
        // z-index: 1800;
    }
    .item {
        padding: 16rpx 20rpx 20rpx;
    }
    .nav-title {
        width: 212rpx;
        height: 24rpx;
        margin-left: 28rpx;
    }
    .tag {
        height: 26rpx;
        line-height: 26rpx;
        padding: 0 10rpx;
        background: #e7d5ff;
        border-radius: 13rpx;
        font-size: 20rpx;
    }
    .search {
        position: relative;
        width: 100%;
        .search_bg {
            position: absolute;
            top: -30rpx;
            width: 741rpx;
            height: 137rpx;
            margin: 0 auto;
        }
        .search_title {
            width: 686rpx;
            height: 78rpx;
            background: #ffffff;
            border-radius: 16rpx;
            opacity: 0.08;
            margin: 0 auto;
        }
        .search_content {
            position: absolute;
            top: 18rpx;
            left: 6%;
            width: 90%;
            padding: 0 20rpx;
            .text {
                color: $color-theme;
                width: 100rpx;
                text-align: center;
            }
        }
        .img {
            width: 28rpx;
            height: 28rpx;
        }
        .search_icon {
            width: 640rpx;
            margin: 24rpx auto 36rpx;
        }
    }
    .spike {
        position: relative;
        height: 426rpx;
        width: 686rpx;
        .spike_title {
            width: 100%;
            height: 140rpx;
            .spike_img {
                position: absolute;
                left: 20rpx;
                top: 0;
                width: 100%;
                height: 144rpx;
                z-index: -1;
            }
            .title {
                color: #fff;
                font-size: 60rpx;
                position: absolute;
                top: 20rpx;
                left: 40rpx;
            }
            .title_right {
                width: 124rpx;
                height: 55rpx;
                color: #fff;
                font-size: 30rpx;
                line-height: 55rpx;
                text-align: center;
                position: absolute;
                top: 26rpx;
                right: 24rpx;
                border: 1rpx solid #fff;
                border-radius: 25rpx;
            }
        }
        .spike_content {
            height: 282rpx;
            width: 686rpx;
            background-color: #934ff8;
            border-radius: 0 0 25rpx 25rpx;
            .spike_item {
                position: relative;
                width: 220rpx;
                height: 260rpx;
                border-radius: 16rpx;
                overflow: hidden;
                margin-right: 20rpx;
                .item_img {
                    height: 168rpx;
                }
                .item_name {
                    position: absolute;
                    bottom: 0;
                    color: #fff;
                    font-size: 26rpx;
                    width: 100%;
                    height: 96rpx;
                    background-color: rgba(0, 0, 0, 0.3);
                }
            }
            .spike_item:last-child {
                margin-right: 0;
            }
        }
    }
    .visible-hiddle-caculate {
        position: fixed;
        left: 0;
        right: 0;
        bottom: 0;
        z-index: -1;
        visibility: hidden;
    }
</style>