frontend-app/pages/active/super-subsidy/super-subsidy.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>
                        <qiaobao-assistant page-key="pages/active/super-subsidy/super-subsidy" title="超级补贴" />
</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-list" @click="onTab(index)" v-for="(item, index) in tabList" :key="index">
                <text class="text-28 text-space" :style="{
                    color: curTab == index ? '#7A35F6' : '#666',
                }">{{ item.name }}</text>
                <view class="line" v-if="curTab == index"></view>
            </view>
        </view>

        <mescroll-uni ref="mescrollRef" top="660rpx" @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="super" />
                    </view>
                </view>
            </view>
        </mescroll-uni>
        <up-toast ref="uToastRef"></up-toast>
    </view>
</template>

<script>
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 ParityProductItem from "@/components/shop/parity-product-item.vue";
import { searchList } 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, ParityProductItem, CustomTabBar, MescrollUni, productSeckillCard },
    data() {
        return {
            swiperList: [],
            currentNum: 0,
            dataList: [],
            tabList: [],
            // tabList: [{ name: "推荐" }],
            curTab: 0,
            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,
        };
    },
    onLoad() {
        // this.cascadeCategory();
        this.getCarouselImage()
        this.upCallback({ num: 1, size: 10 });
    },
    methods: {
        // 查询轮播图
        async getCarouselImage() {
            const params = {
                pageUi: APP_PAGE_TYPE.SUPER_SUBSIDY,
            };
            const resp = await getCarouselImage(params);
            if (resp && resp.bizcode === 100) {
                const data = resp.data || [];
                this.swiperList =
                    data.length !== 0 ? data.map((obj) => obj.carouselImage) : [];
            }
        },

        upCallback(page) {
            let params = {
                page: page.num,
                pageSize: page.size,
                type: -2
            };
            if (this.curTab != 0) {
                params["categoryId"] = this.tabList[this.curTab].id;
            } else {
                params["isRecomm"] = true;
            }
            searchList(params).then((res) => {
                let curPageLen = res.data ? res.data.length : 0;
                if (page.num === 1) this.dataList = [];
                if (res.data) {
                    this.dataList = this.dataList.concat(res.data);
                }
                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();
            }
        },

        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-view {
    border-top-left-radius: 20rpx !important;
    border-top-right-radius: 20rpx !important;
    width: 100%;
    height: 80rpx;
    min-height: 80rpx;
    display: flex;
    flex-direction: row;
    padding: 0 32rpx;
    box-sizing: border-box;
    background-color: #fff;
    overflow-x: auto;
    position: absolute;
    top: 600rpx;
    left: 0;
    z-index: 99;

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

    .line {
        width: 48rpx;
        height: 6rpx;
        background-color: #7a35f6;
    }
}

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

    .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;
                /* 与 ParityProductItem 宽度一致 */
                height: 100%;
            }
        }
    }
}
</style>