添加收藏茶室接口和完善茶室详情

This commit is contained in:
wangxiaowei
2025-11-12 17:40:35 +08:00
parent 29bf4dae74
commit 0cad65c295
32 changed files with 1522 additions and 505 deletions

View File

@ -1,4 +1,5 @@
<route lang="jsonc" type="page">{
"needLogin": true,
"layout": "default",
"style": {
"navigationStyle": "custom"
@ -8,25 +9,25 @@
<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">
<wd-navbar safeAreaInsetTop custom-class='!bg-[#F6F7F8]' :bordered="false" placeholder>
<template #left>
<view class="h-48rpx flex items-center">
<view class="mt-4rpx">
<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="搜索茶室订单"></wd-search>
<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 v-model="tab" swipeable slidable="always" :lazy="false" @click="OrderList.handleChangeTabs">
<wd-tab title="全部" :name="TeaSpecialistOrderStatusText.All"></wd-tab>
<wd-tab title="待付款" :name="TeaSpecialistOrderStatusText.Pending"></wd-tab>
<wd-tab title="预约单" :name="TeaSpecialistOrderStatusText.Pay"></wd-tab>
<wd-tab title="待确认" :name="TeaSpecialistOrderStatusText.Confirm"></wd-tab>
<wd-tab title="已完结" :name="TeaSpecialistOrderStatusText.Finished"></wd-tab>
</wd-tabs>
</view>
</view>
@ -34,115 +35,117 @@
<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>
<mescroll-body ref="mescrollItem0" @init="mescrollInit" @down="downCallback" @up="OrderList.upCallback" :down="downOption" :up="upOption">
<view class="mb-20rpx" v-for="(item, index) in list" :key="index">
<combo-card :type="OrderSource.TeaSpecialist" :order="item"></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>
<!-- <mescroll-body ref="mescrollItem1" @init="mescrollInit" @down="downCallback" @up="OrderList.upCallback" :down="downOption" :up="upOption" v-if="tab === OrderStatus.Pending">
<view class="mb-20rpx" v-for="(item, index) in list" :key="index">
<combo-card :type="OrderSource.TeaSpecialist" :order="item"></combo-card>
</view>
</mescroll-body>
</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>
<!-- <mescroll-body ref="mescrollItem2" @init="mescrollInit" @down="downCallback" @up="OrderList.upCallback" :down="downOption" :up="upOption" v-if="tab === OrderStatus.Reserved">
<view class="mb-20rpx" v-for="(item, index) in list" :key="index">
<combo-card :type="OrderSource.TeaSpecialist" :order="item"></combo-card>
</view>
</mescroll-body>
</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>
<!-- <mescroll-body ref="mescrollItem2" @init="mescrollInit" @down="downCallback" @up="OrderList.upCallback" :down="downOption" :up="upOption" v-if="tab === OrderStatus.Confirm">
<view class="mb-20rpx" v-for="(item, index) in list" :key="index">
<combo-card :type="OrderSource.TeaSpecialist" :order="item"></combo-card>
</view>
</mescroll-body>
</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>
<!-- <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 list" :key="index">
<combo-card :type="OrderSource.TeaSpecialist" :order="item"></combo-card>
</view>
</mescroll-body>
</mescroll-body> -->
</view>
</view>
</template>
<script lang="ts" setup>
import { OrderSource, OrderStatus } from '@/utils/order'
import { getTeaSpecialistOrderList } from '@/api/teaSpecialist-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 { OrderSource, OrderStatus, TeaSpecialistOrderStatusText, TeaSpecialistOrderStatusValue } from '@/utils/order'
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 list = ref<Array<any>>([]) // 茶艺师列表
const keywords = ref<string>('')
const orderStatus = ref<string>('')
// tab
const tab = ref<string>('all')
onLoad((args) => {
uni.$on('refreshOrderList', () => {
list.value = []
getMescroll().resetUpScroll()
})
// 根据传过来的参数决定显示哪个tab
if (args.orderStatus) {
tab.value = args.orderStatus
}
})
const orderList = {
onUnload(() => {
uni.$off('refreshOrderList')
})
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); //追加新数据
const filter = {
page: mescroll.num,
size: mescroll.size,
order_status: orderStatus.value,
search: keywords.value
}
// 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(); // 请求失败, 结束加载
// })
getTeaSpecialistOrderList(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() // 请求失败, 结束加载
})
},
// 切换tab
handleChangeTabs: (e: {index: number, name: string}) => {
tab.value = e.name
if (e.name === TeaSpecialistOrderStatusText.Pending) {
orderStatus.value = '0'
} else {
orderStatus.value = TeaSpecialistOrderStatusValue[e.name] || ''
}
// 切换tab时,重置当前的mescroll
// getMescroll().resetUpScroll();
list.value = []
getMescroll().resetUpScroll();
},
// 返回上一页
@ -159,6 +162,14 @@
background-color: $cz-page-background;
}
.order-list {
:deep() {
.wd-navbar__left {
width: 100%;
}
}
}
.tabs {
:deep() {
.wd-tabs,