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-11-28 19:19:54 +08:00
parent 58211f2430
commit 67c8e8e016
43 changed files with 2722 additions and 1018 deletions
Download Patch File Download Diff File Expand all files Collapse all files

177
src/pages/reserve/reserve.vue
View File

@ -13,8 +13,9 @@
<view class="home-bg w-[100%] fixed top-0 left-0 z-100">
<wd-navbar safeAreaInsetTop :bordered="false" custom-style="background-color: transparent !important;">
<template #left>
<view class="search-box flex items-center ml-26rpx" @click="reserve.toSearch">
<wd-search placeholder="搜索茶址名称" hide-cancel disabled :placeholder-left="true"
<view class="search-box flex items-center ml-26rpx">
<wd-search v-model="keywords" placeholder="请输入内容" hide-cancel disabled placeholder-left
@search="Reserve.handleSearch()"
placeholderStyle="text-align:left;padding-left: 24rpx;line-heigt: 44rpx;color: #C9C9C9; font-size: 32rpx;font-weight: normal;">
</wd-search>
</view>
@ -22,7 +23,7 @@
</wd-navbar>
<view class="tabs">
<wd-tabs v-model="tab" swipeable slidable="always" @change="reserve.handleChangeTab" :lazy="false">
<wd-tabs v-model="tab" swipeable slidable="always" @change="Reserve.handleChangeTab" :lazy="false">
<wd-tab title="茶室预约"></wd-tab>
<wd-tab title="茶艺师预约"></wd-tab>
</wd-tabs>
@ -30,28 +31,44 @@
</view>
<view class="mx-30rpx" :style="{ paddingTop: navbarHeight + 'px' }">
<mescroll-body ref="mescrollItem0" @init="mescrollInit" @down="downCallback" @up="Reserve.upCallback" :down="downOption" :up="upOption">
<template v-if="tab === 0">
<view class="mb-20rpx" v-for="(item, index) in list" :key="index">
<combo-card :type="OrderSource.TeaRoom" :order="item"></combo-card>
</view>
</template>
<template v-if="tab === 1">
<view class="mb-20rpx" v-for="(item, index) in list" :key="index">
<combo-card :type="OrderSource.TeaSpecialist" :order="item"></combo-card>
</view>
</template>
</mescroll-body>
</view>
<!-- <view class="mx-30rpx" :style="{ paddingTop: navbarHeight + 'px' }"> -->
<!-- 茶室预约 -->
<view v-if="tab === 0">
<mescroll-body @init="mescrollInit" @down="downCallback" @up="reserve.upCallback" :up="upOption">
<!-- <view v-if="tab === 0">
<mescroll-body @init="mescrollInit" @down="downCallback" @up="Reserve.upCallback" :up="upOption">
<view v-for="(item, index) in 5" :key="index" >
<view class="mb-20rpx" @click="reserve.handleToReserveRoomOrder">
<view class="mb-20rpx" @click="Reserve.handleToReserveRoomOrder">
<combo-card :type="OrderSource.TeaRoom" :order-status="OrderStatus.Consuming"></combo-card>
</view>
</view>
</mescroll-body>
</view>
</view> -->
<!-- 茶艺师预约 -->
<view v-if="tab === 1">
<mescroll-body @init="mescrollInit" @down="downCallback" @up="reserve.upCallback" :up="upOption">
<!-- <view v-if="tab === 1">
<mescroll-body @init="mescrollInit" @down="downCallback" @up="Reserve.upCallback" :up="upOption">
<view v-for="(item, index) in 5" :key="index" >
<view class="mb-20rpx" @click="reserve.handleToTeaSpecialistOrder">
<view class="mb-20rpx" @click="Reserve.handleToTeaSpecialistOrder">
<combo-card :type="OrderSource.TeaSpecialist" :order-status="OrderStatus.Consuming"></combo-card>
</view>
</view>
</mescroll-body>
</view>
</view>
</view> -->
<!-- </view> -->
</view>
</template>
@ -60,101 +77,89 @@
import { onPageScroll, onReachBottom } from '@dcloudio/uni-app'
import useMescroll from "@/uni_modules/mescroll-uni/hooks/useMescroll.js"
import { OrderSource, OrderStatus } from '@/utils/order'
import { router } from '@/utils/tools'
import { getTeaRoomOrderList } from '@/api/tea-room'
import { getTeaSpecialistOrderList } from '@/api/teaSpecialist-order'
const OSS = inject('OSS')
const navbarHeight = Number(inject('navbarHeight')) + 42 + 14 // 42为tabs的高度 14是边距值
/** tab **/
// tab切换
const tab = ref<number>(0)
const reserveType = ref<number>(0) // 0:茶室预约 1:茶艺师预约
/** 结束 **/
/** mescroll **/
const { mescrollInit, downCallback } = useMescroll(onPageScroll, onReachBottom) // 调用mescroll的hook
const upOption = reactive({
empty: {
// mescroll
const { mescrollInit, downCallback, getMescroll } = useMescroll(onPageScroll, onReachBottom) // 调用mescroll的hook
const downOption = {
auto: true
}
const upOption = {
empty: {
icon : OSS + 'icon/icon_reserver_empty.png',
}
})
/** 结束 **/
tip: '暂无预约信息',
},
auto: true,
textNoMore: '~ 已经到底啦 ~', //无更多数据的提示
}
const orderStatus = ref<string>('')
const list = ref<Array<any>>([]) // 茶室列表
const keywords = ref<string>('') // 搜索关键词
onLoad(() => {
})
const reserve = {
const Reserve = {
// 上拉加载的回调: 其中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(); // 请求失败, 结束加载
// })
if (tab.value === 0) {
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() // 请求失败, 结束加载
})
} else if (tab.value === 1) {
// 茶艺师预约接口调用
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() // 请求失败, 结束加载
})
}
},
// 搜索
toSearch: () => {
uni.navigateTo({
url: '/pages/search/search'
})
},
// 茶室预约-跳转到对应的订单页
handleToReserveRoomOrder: () => {
uni.navigateTo({
url: `/bundle/order/tea-room/order-detail?orderStatus=${OrderStatus.Consuming}`
})
},
// 茶艺师预约-跳转到对应的订单页
handleToTeaSpecialistOrder: () => {
uni.navigateTo({
url: `/bundle/order/tea-specialist/order-detail?orderStatus=${OrderStatus.Serving}`
})
},
// tab切换获取index
/**
* tab切换获取index
* @param item
*/
handleChangeTab: (item: { index: number }) => {
// tabIndexs.value = item.index
// scrollToLastY()
tab.value = item.index
// 切换tab时,重置当前的mescroll
list.value = []
getMescroll().resetUpScroll();
},
// 处理点击事件
handleClick: (item: any) => {
console.log('Clicked item:', item)
},
/**
* 搜索
*/
handleSearch: () => {
list.value = []
getMescroll().resetUpScroll();
}
}
</script>