frontend-app/pages/active/limited-time/limited-time.vue

<template>
    <view class="content-two">

        <view class="product_info_header_warp">
            <up-swiper :list="swiperList" height="660rpx" class="product_info_header_swiper" @click="onSwiper"
                @change="(e) => (currentNum = e.current)">
                <template #indicator>
                    <view class="indicator-num">
                        <text class="indicator-num__text">{{ currentNum + 1 }}/{{ swiperList.length }}</text>
                    </view>
                </template>
            </up-swiper>
            <view class="img_comm left_warp">
                <up-image src="/static/common/left_b_st.png" width="30" height="30" bgColor="#f1f6ff00"
                    @click="jumpLeft"></up-image>
            </view>
        </view>

        <view class="tab-view">
            <!-- 限时秒杀卡片 -->
            <view class="tab-card">
                <view class="tab-item" :class="{ active: activeTab === index }" @click="onActiveTabChange(index)"
                    v-for="(item, index) in activeTabList" :key="index">
                    <text class="tab-text">{{ item.name }}</text>
                </view>
            </view>
        </view>

        <mescroll-uni ref="mescrollRef" top="730rpx" @down="downCallback" @up="upCallback" :up="upOption"
            :down="downOption" @init="mescrollInit">
            <view class="setting-view">
                <view class="name-box">
                    <view class="mescrollUniView">
                        <productSeckillCard v-for="item in dataList" :key="item.id" :item="item"
                            :actived-type="activedScekillType" :attributes="attributes" />
                    </view>
                </view>
            </view>
        </mescroll-uni>
        <up-toast ref="uToastRef"></up-toast>
    </view>
</template>

<script>
import { toRaw } from 'vue';
import { getCascadeCategory, getCarouselImage } from '@/api/common.js';
import Header from '@/components/common/header.vue';
import TopSafe from '@/components/common/top-safe.nvue';
import MyBtn from '@/components/common/my-btn.vue';
import PingItem from '@/components/shop/ping-item.vue';
import { getSeckillGoodsList, getSeckillCurrent, getSeckillPreview } from '@/api/product.js';
import CustomTabBar from '@/components/custom-tab-bar.vue';
import MescrollMixin from '@/components/mescroll-uni/mescroll-mixins.js';
import MescrollUni from '@/components/mescroll-uni/mescroll-uni.vue';
import productSeckillCard from '@/components/common/product-seckill-card.vue';
import { APP_PAGE_TYPE } from '@/utils/enumUtils.js';

export default {
    mixins: [MescrollMixin],
    components: { Header, TopSafe, MyBtn, PingItem, CustomTabBar, MescrollUni, productSeckillCard },
    data() {
        return {
            swiperList: [],
            currentNum: 0,
            activityId: '',

            dataList: [],
            tabList: [{ name: '推荐' }],
            curTab: 0,
            activeTab: 0,
            activeTabList: [
                { name: '今日秒杀', type: 'current', activedType: 'seckill' },
                { name: '活动预告', type: 'preview', activedType: "actived" }
            ],
            upOption: {
                auto: false,
                page: {
                    size: 10 // 每页数据的数量,默认10
                },
                noMoreSize: 10, // 配置列表的总数量要大于等于5条才显示'-- END --'的提示
                empty: {
                    tip: `空空如也`
                },
                textColor: '#333',
                bgColor: 'rgba(0,0,0,0)'
            },
            downOption: {
                auto: false,
                textColor: '#333',
                bgColor: 'rgba(0,0,0,0)'
            },
            mescroll: null,
            attributes: {},// 限时秒杀卡片属性
            activedScekillType: 'seckill'
        };
    },
    onLoad() {
        this.init();
        this.getCarouselImage();
    },
    methods: {
        // 查询轮播图
        async getCarouselImage() {
            const params = {
                pageUi: APP_PAGE_TYPE.SECKILL
            };
            const resp = await getCarouselImage(params);
            if (resp && resp.bizcode === 100) {
                const data = resp.data || [];
                this.swiperList = data.length !== 0 ? data.map((obj) => obj.carouselImage) : [];
            }
        },
        // 获取秒杀
        onGetSeckillCurrent(type = 'current') {
            const url = type === 'current' ? getSeckillCurrent : getSeckillPreview;
            url()
                .then((res) => {
                    if (res.bizcode === 100) {
                        this.activityId = res.data.activityId;
                        console.log('获取秒杀当前时间', res.data);

                        this.attributes = {
                            leftTime: res.data.leftTime || null
                        };
                        this.$nextTick(() => {
                            this.mescroll && this.mescroll.resetUpScroll();
                        });
                    } else {
                        this.mescroll && this.mescroll.endErr();
                    }
                })
                .catch(() => {
                    this.mescroll && this.mescroll.endErr();
                });
        },

        upCallback(page) {
            if (!this.activityId) {
                this.mescroll && this.mescroll.endErr();
                return;
            }
            let params = {
                page: page.num,
                pageSize: page.size,
                activityId: this.activityId
            };
            if (this.curTab != 0) {
                params['categoryId'] = this.tabList[this.curTab].id;
            } else {
                params['isRecomm'] = true;
            }
            getSeckillGoodsList(params)
                .then((res) => {
                    let curPageLen = res.data?.entitys ? res.data.entitys.length : 0;
                    if (page.num === 1) this.dataList = [];
                    if (res.data?.entitys) {
                        this.dataList = this.dataList.concat(res.data.entitys);
                    }
                    console.log(this.dataList);

                    this.mescroll.endBySize(curPageLen, res.data ? res.data.totalCount : 0);
                })
                .catch(() => {
                    this.mescroll && this.mescroll.endErr();
                });
        },

        downCallback() {
            this.mescroll && this.mescroll.resetUpScroll();
        },

        mescrollInit(mescroll) {
            this.mescroll = mescroll;
        },
        async cascadeCategory() {
            getCascadeCategory({ parentId: 0 }).then((res) => {
                if (res && res.bizcode === 100) {
                    res.data.forEach((item) => {
                        this.tabList.push(item);
                    });
                }
            });
        },
        onTab(index) {
            if (index != this.curTab) {
                this.curTab = index;
                this.dataList = [];
                this.downCallback();
            }
        },
        onActiveTabChange(index) {
            if (index !== this.activeTab) {
                this.activeTab = index;
                this.dataList = [];
                if (this.mescroll) {
                    this.mescroll.isUpScrolling = true;
                }
                const item = this.activeTabList[index];
                this.onGetSeckillCurrent(item.type);
                this.activedScekillType = item.activedType;
            }
        },

        init() {
            this.onGetSeckillCurrent();
            this.cascadeCategory();
        },
        jumpLeft() {
            uni.navigateBack({
                delta: 1 // 返回的页面数，默认为1,返回到上一级
            });
        },
        onSwiper(index) {
            uni.previewImage({
                current: index,
                loop: true,
                urls: this.swiperList
            });
        }
    }
};
</script>

<style lang="scss" scoped>
.content-two {
    height: 100vh;
    background-color: #fff;
    position: relative;
    overflow: hidden;
}

.product_info_header_warp {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 660rpx;
    z-index: 10;
    background-color: #fff;

    .product_info_header_swiper {
        height: 660rpx !important;
        border-radius: 0 !important;

        ::v-deep(.u-swiper__wrapper) {
            height: 660rpx !important;

            .u-swiper__wrapper {
                height: 660rpx !important;

                .u-swiper__wrapper__item__wrapper__image {
                    height: 660rpx !important;
                    border-radius: 0 !important;
                }
            }
        }
    }

    .img_comm {
        position: absolute;
        top: 140rpx;
    }

    .left_warp {
        left: 40rpx;
    }

    .right_warp {
        right: 40rpx;
    }
}

.head-view {
    width: 100%;
    min-height: 88rpx;
    height: 88rpx;
    display: flex;
    align-items: center;
    padding: 0 32rpx;
    box-sizing: border-box;
    background-color: #fff;

    .head-search {
        width: 100%;
        height: 76rpx;
        padding: 0 24rpx;
        flex-direction: row;
        display: flex;
        background-color: #f7f7f7;
        align-items: center;
        border-radius: 16rpx;
    }
}

.tab-box {
    width: 100%;
    height: 160rpx;
    min-height: 80rpx;
    display: flex;
    flex-direction: row;
    align-items: center;
    padding: 0 32rpx;
    box-sizing: border-box;
    background-color: #fff;
    overflow-x: auto;

    .tab-item {
        display: flex;
        flex: 1;
        flex-direction: column;
        align-items: center;

        .tab-img {
            width: 56rpx;
            height: 56rpx;
        }

        .tab-name {
            font-size: 28rpx;
            margin-top: 24rpx;
        }
    }
}

.tab-card {
    width: calc(100% - 64rpx);
    height: 74rpx;
    display: flex;
    align-items: center;
    background-color: #f5f5f5;
    border-radius: 12rpx;
    padding: 0 4rpx;
    margin: 0 32rpx;
    margin-bottom: 16rpx;

    .tab-item {
        flex: 1;
        height: 60rpx;
        display: flex;
        align-items: center;
        justify-content: center;
        border-radius: 10rpx;
        background-color: transparent;
        transition: all 0.3s ease;

        &.active {
            background-color: #fff;

            .tab-text {
                color: #7a35f6;
                font-weight: 600;
            }
        }

        .tab-text {
            font-size: 28rpx;
            color: #666666;
            transition: color 0.3s ease;
        }
    }
}

.tab-view {
    border-top-left-radius: 20rpx !important;
    border-top-right-radius: 20rpx !important;
    width: 100%;
    display: flex;
    flex-direction: column;
    padding: 24rpx 0 0;
    box-sizing: border-box;
    background-color: #fff;
    overflow-x: auto;
    position: fixed;
    top: 600rpx;
    left: 0;
    z-index: 11;

    .tab-list-container {
        width: 100%;
        height: 60rpx;
        display: flex;
        flex-direction: row;
        align-items: center;
        overflow-x: auto;
        padding: 0 12rpx;
        box-sizing: border-box;
    }

    .tab-list {
        margin-right: 24rpx;
        display: flex;
        flex-direction: column;
        height: 60rpx;
        min-height: 60rpx;
        align-items: center;
        justify-content: space-between;
    }
}

.setting-view {
    width: 100%;
    padding: 0 32rpx 20rpx;
    box-sizing: border-box;
    position: relative;
    margin-top: 0;

    .name-box {
        width: 100%;
        display: flex;
        flex-direction: column;
        align-items: center;

        .mescrollUniView {
            width: calc(100vw - 48rpx);
            display: flex;
            flex-wrap: wrap;
            justify-content: space-between;

            .fall-col {
                width: 332rpx;
                /* 与 PingItem 宽度一致 */
                height: 100%;
            }
        }
    }
}
</style>