chazhi_store/src/bundle/setmeal/setmeal.vue

<route lang="jsonc" type="page">{
    "layout": "default",
    "style": {
		"navigationStyle": "custom"
    }
}</route>

<template>
    <view class="pb-170rpx">
        <view class="order-list sticky top-0 left-0 z-50 bg-[#F6F7F8] pb-10rpx">
            <wd-navbar safeAreaInsetTop custom-class='!bg-[#F6F7F8]' :bordered="false" placeholder>
                <template #left>
                    <view class="h-48rpx flex items-center">
                        <view class="mt-4rpx" @click="router.navigateBack()">
                            <wd-icon name="thin-arrow-left" size="30rpx"></wd-icon>
                        </view>
                        <view class="search-box">
                            <wd-search v-model="keywords" hide-cancel  placeholder-left light placeholder="搜索套餐名称" @search="OrderList.handleSearch()"></wd-search>
                        </view>
                    </view>
                </template>
            </wd-navbar>
            <view class="tabs">
                <wd-tabs v-model="tab" swipeable slidable="always" :lazy="false" @click="OrderList.handleChangeTabs">
                    <wd-tab :title="item.title + `(${item.num})`" :name="item.name" v-for="(item, index) in tabList" :key="index"></wd-tab>
                </wd-tabs>
            </view>
        </view>

        <view class="tabs mt-18rpx mx-30rpx">
            <!-- <mescroll-body ref="mescrollItem0" @init="mescrollInit" @down="downCallback" @up="OrderList.upCallback" :down="downOption" :up="upOption"> -->
                <view class="mb-20rpx" v-for="(item, index) in 10" :key="index">
                    <combo-card :type="OrderSource.SetMeal" :order="item"></combo-card>
                </view>
            <!-- </mescroll-body> -->
        </view>

        <view class="w-full fixed bottom-0 left-0 right-0 bg-white h-152rpx">
            <view class="flex items-center justify-center text-32rpx leading-44rpx leading-90rpx text-center !mt-34rpx">
                <wd-button custom-class="!text-32rpx !w-630rpx !h-90rpx !bg-[#4C9F44] !rounded-8rpx !text-[#fff]">新建套餐</wd-button>
            </view>
        </view>
    </view>
</template>


<script lang="ts" setup>
    import { OrderSource, OrderStatus, TeaRoomOrderStatusText, TeaRoomOrderStatusValue } from '@/utils/order'
    import ComboCard from '@/components/order/ComboCard.vue'
	import { onPageScroll, onReachBottom } from '@dcloudio/uni-app'
	import useMescroll from "@/uni_modules/mescroll-uni/hooks/useMescroll.js"
    import { getTeaRoomOrderList } from '@/api/tea-room'
	import { router } from '@/utils/tools'

    // mescroll
	const { mescrollInit, downCallback, getMescroll } = useMescroll(onPageScroll, onReachBottom) // 调用mescroll的hook
    const downOption = {
		auto: true
	}
	const upOption = {
		auto: true,
		textNoMore: '~ 已经到底啦 ~', //无更多数据的提示
	}
    const orderStatus = ref<string>('')
	const list = ref<Array<any>>([]) // 茶室列表
    const keywords = ref<string>('') // 搜索关键词

    // tab
    const tab = ref<string>('all')
    const tabList = ref<Array<{title: string, num: number, name: string}>>([
        { title: '已上架', num: 10, name: 'list'},
        { title: '已下架', num: 11, name: 'delist' },
        // { title: '草稿箱', num: 0, name: 'draft' }
    ])

    onLoad((args) => {
        uni.$on('refreshOrderList', () => {
            list.value = []
            getMescroll().resetUpScroll()
        })

        // 根据传过来的参数决定显示哪个tab
        if (args.orderStatus) {
            tab.value = args.orderStatus
        }
    })

    onUnload(() => {
        uni.$off('refreshOrderList')
    })

    const OrderList = {
        /**
         * 分页加载
         * @param mescroll 
         */
		upCallback: (mescroll) => {
			// 需要留一下数据为空的时候显示的空数据图标内容
            // const filter = {
			// 	page: mescroll.num, 
			// 	size: mescroll.size,
			// 	order_status: orderStatus.value,
			// 	search: keywords.value
			// }

            // getTeaRoomOrderList(filter).then((res) => {
			// 	const curPageData = res.list || [] // 当前页数据
			// 	if(mescroll.num == 1) list.value = [] // 第一页需手动制空列表
			// 	list.value = list.value.concat(curPageData) //追加新数据
			// 	mescroll.endSuccess(curPageData.length, Boolean(res.more))
			// }).catch(() => {
				mescroll.endErr() // 请求失败, 结束加载
			// })
		},

        /**
          * 切换订单状态
          * @param e 
          */
        handleChangeTabs: (e: {index: number, name: string}) => {
            // tab.value = e.name
            // if (e.name === TeaRoomOrderStatusText.Pending) {
            //     orderStatus.value =  '0'
            // } else {
            //     orderStatus.value = TeaRoomOrderStatusValue[e.name] || ''
            // }

            // // 切换tab时,重置当前的mescroll
            // list.value = []
            // getMescroll().resetUpScroll();
        },

        /**
         * 内容搜索
         */
        handleSearch: () => {
            // list.value = []
            // getMescroll().resetUpScroll();
        }
    }
</script>

<style lang="scss">
    page {
	    background-color: $cz-page-background;
    }

    .tabs {
        :deep() {
            .wd-tabs,
            .wd-tabs__nav  {
                background-color: transparent !important;
            }

            .wd-tabs__nav-item {
                font-weight: 400 !important;
                font-size: 28rpx !important;
                color: #606266 !important;
                line-height: 40rpx !important;
                padding: 0 30rpx !important;
            }

            .wd-tabs__nav-item.is-active {
                font-weight: 500 !important;
                color: #303133 !important;
                font-size: 32rpx !important;
                line-height: 44rpx !important;
            }
        }
    }
</style>