wangxiaowei/chazhi
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

添加页面

Browse Source
This commit is contained in:
wangxiaowei
2025-09-20 17:02:40 +08:00
parent ff2f645101
commit be39bd6da8
20 changed files with 1962 additions and 364 deletions
Download Patch File Download Diff File Expand all files Collapse all files

185
src/bundle/order/tea-specialist/order-list.vue Normal file
View File

@ -0,0 +1,185 @@
<route lang="jsonc" type="page">{
"layout": "default",
"style": {
"navigationStyle": "custom"
}
}</route>
<template>
<view class="">
<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 @click-left="orderList.handleBack">
<template #left>
<view class="h-48rpx flex items-center">
<view class="mt-4rpx">
<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="搜索茶室订单"></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="全部" name="all"></wd-tab>
<wd-tab title="待付款" :name="OrderStatus.Pending"></wd-tab>
<wd-tab title="预约单" :name="OrderStatus.Reserved"></wd-tab>
<wd-tab title="待确认" :name="OrderStatus.Confirm"></wd-tab>
<wd-tab title="已完结" :name="OrderStatus.Finished"></wd-tab>
</wd-tabs>
</view>
</view>
<view class="tabs mt-18rpx mx-30rpx">
<!-- 这里可以尝试下不重新刷新获取列表 -->
<!-- 全部 -->
<mescroll-body ref="mescrollItem0" @init="mescrollInit" @down="downCallback" @up="orderList.upCallback" v-if="tab === 'all'">
<view class="mb-20rpx" v-for="(item, index) in 10" :key="index">
<combo-card :type="OrderSource.TeaSpecialist" :order-status="OrderStatus.Pending"></combo-card>
</view>
</mescroll-body>
<!-- 待付款 -->
<mescroll-body ref="mescrollItem1" @init="mescrollInit" @down="downCallback" @up="orderList.upCallback" v-if="tab === OrderStatus.Pending">
<view class="mb-20rpx" v-for="(item, index) in 10" :key="index">
<combo-card :type="OrderSource.TeaSpecialist" :order-status="OrderStatus.Pending"></combo-card>
</view>
</mescroll-body>
<!-- 预约单 -->
<mescroll-body ref="mescrollItem2" @init="mescrollInit" @down="downCallback" @up="orderList.upCallback" v-if="tab === OrderStatus.Reserved">
<view class="mb-20rpx" v-for="(item, index) in 10" :key="index">
<combo-card :type="OrderSource.TeaSpecialist" :order-status="OrderStatus.Pending"></combo-card>
</view>
</mescroll-body>
<!-- 待确认 -->
<mescroll-body ref="mescrollItem2" @init="mescrollInit" @down="downCallback" @up="orderList.upCallback" v-if="tab === OrderStatus.Confirm">
<view class="mb-20rpx" v-for="(item, index) in 10" :key="index">
<combo-card :type="OrderSource.TeaSpecialist" :order-status="OrderStatus.Pending"></combo-card>
</view>
</mescroll-body>
<!-- 已完结 -->
<mescroll-body ref="mescrollItem3" @init="mescrollInit" @down="downCallback" @up="orderList.upCallback" v-if="tab === OrderStatus.Finished">
<view class="mb-20rpx" v-for="(item, index) in 10" :key="index">
<combo-card :type="OrderSource.TeaSpecialist" :order-status="OrderStatus.Pending"></combo-card>
</view>
</mescroll-body>
</view>
</view>
</template>
<script lang="ts" setup>
import { OrderSource, OrderStatus } 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"
/* mescroll */
const { mescrollInit, downCallback, getMescroll } = useMescroll(onPageScroll, onReachBottom) // 调用mescroll的hook
// 店铺类型
// 搜索
const keywords = ref<string>('')
// tab
const tab = ref<string>('all')
onLoad((args) => {
// 根据传过来的参数决定显示哪个tab
if (args.orderStatus) {
tab.value = args.orderStatus
}
})
const orderList = {
// 上拉加载的回调: 其中num:当前页 从1开始, size:每页数据条数,默认10
upCallback: (mescroll) => {
// 需要留一下数据为空的时候显示的空数据图标内容
// list({
// page: mescroll.num,
// size: mescroll.size
// }).then((res: { list: Array<any>, totalPages: Number }) => {
// const curPageData = res.list || [] // 当前页数据
// if(mescroll.num == 1) goods.value = []; // 第一页需手动制空列表
// goods.value = goods.value.concat(curPageData); //追加新数据
// console.log("🚀 ~ goods:", goods)
// mescroll.endByPage(curPageData.length, res.totalPages); //必传参数(当前页的数据个数, 总页数)
// }).catch(() => {
// mescroll.endErr(); // 请求失败, 结束加载
// })
// apiGoods(mescroll.num, mescroll.size).then(res=>{
// const curPageData = res.list || [] // 当前页数据
// if(mescroll.num == 1) goods.value = []; // 第一页需手动制空列表
// goods.value = goods.value.concat(curPageData); //追加新数据
// //联网成功的回调,隐藏下拉刷新和上拉加载的状态;
// //mescroll会根据传的参数,自动判断列表如果无任何数据,则提示空;列表无下一页数据,则提示无更多数据;
// //方法一(推荐): 后台接口有返回列表的总页数 totalPage
// //mescroll.endByPage(curPageData.length, totalPage); //必传参数(当前页的数据个数, 总页数)
// //方法二(推荐): 后台接口有返回列表的总数据量 totalSize
// //mescroll.endBySize(curPageData.length, totalSize); //必传参数(当前页的数据个数, 总数据量)
// //方法三(推荐): 您有其他方式知道是否有下一页 hasNext
// //mescroll.endSuccess(curPageData.length, hasNext); //必传参数(当前页的数据个数, 是否有下一页true/false)
// //方法四 (不推荐),会存在一个小问题:比如列表共有20条数据,每页加载10条,共2页.如果只根据当前页的数据个数判断,则需翻到第三页才会知道无更多数据.
// mescroll.endSuccess(curPageData.length); // 请求成功, 结束加载
// }).catch(()=>{
mescroll.endErr(); // 请求失败, 结束加载
// })
},
// 切换tab
handleChangeTabs: (e: {index: number, name: string}) => {
tab.value = e.name
// 切换tab时,重置当前的mescroll
// getMescroll().resetUpScroll();
},
// 返回上一页
handleBack: () => {
uni.navigateBack({
delta: 1
})
},
}
</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>