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-20 17:29:26 +08:00
parent 0cad65c295
commit 3a8488dc18
29 changed files with 1812 additions and 765 deletions
Download Patch File Download Diff File Expand all files Collapse all files

174
src/bundle/tea-room/room.vue
View File

@ -12,7 +12,6 @@
<template #right>
<view class="flex items-center ml-114rpx right-slot">
<view class="mr-16rpx flex items-center" @click="Room.handleCollect">
<!-- <wd-img width="64rpx" height="64rpx" :src="`${OSS}icon/icon_sc_s.png`"></wd-img> -->
<template v-if="teaRoom.collect > 0">
<wd-img width="64rpx" height="64rpx" :src="`${OSS}icon/icon_sc_s.png`"></wd-img>
</template>
@ -20,7 +19,7 @@
<wd-img width="64rpx" height="64rpx" :src="`${OSS}icon/icon_sc.png`"></wd-img>
</template>
</view>
<view @click="Room.handleService" class="flex items-center">
<view @click="showServicePopup = true" class="flex items-center">
<wd-img width="64rpx" height="64rpx" :src="`${OSS}icon/icon_kefu.png`"></wd-img>
</view>
</view>
@ -31,8 +30,7 @@
<view class="mt-20rpx mx-30rpx swiper">
<view>
<wd-swiper value-key="image" height="320rpx"
:indicator="{ type: 'dots-bar' }" :list="swiperList" v-model:current="current"
@click="Room.handleClick" mode="aspectFit">
:indicator="{ type: 'dots-bar' }" :list="swiperList" v-model:current="current" mode="aspectFit">
</wd-swiper>
</view>
<view class="mt-38rpx flex justify-between">
@ -50,7 +48,7 @@
<view @click="Room.handleToRecharge">
<recharge-btn name="充值"></recharge-btn>
</view>
<view class="text-24rpx text-[#818CA9] mt-18rpx">1分钟前有人充值</view>
<view class="text-24rpx text-[#818CA9] mt-18rpx">{{ teaRoom.rechange_times }} 分钟前有人充值</view>
</view>
</view>
<view class="mt-26rpx">
@ -64,7 +62,7 @@
</view>
<view class="ml-2rpx text-26rpx text-[#606266] line-2">{{ teaRoom.address }}</view>
</view>
<view class="text-[#92928C] text-24rpx ml-38rpx mt-14rpx">距您14km</view>
<view class="text-[#92928C] text-24rpx ml-38rpx mt-14rpx">距您{{ teaRoom.distance }}km</view>
</view>
<view class="flex items-center mr-32rpx">
<view class="text-center mr-20rpx" @click="Room.handleLocation">
@ -84,27 +82,33 @@
<view class="tabs">
<wd-tabs v-model="tab" swipeable slidable="always" @change="Room.handleChangeTab" :lazy="false">
<wd-tab title="茶室预定" v-if="storeType != 2">
<view class="content mx-30rpx mt-34rpx">
<!-- <view class="content mx-30rpx mt-34rpx">
<mescroll-body @init="mescrollInit" @down="downCallback" @up="Room.upCallback">
<room-list :is-reserve="true" :store-type="storeType"></room-list>
</mescroll-body>
</view>
</view> -->
</wd-tab>
<wd-tab title="团购套餐">
<view class="content mx-30rpx mt-34rpx">
<!-- <view class="content mx-30rpx mt-34rpx">
<mescroll-body @init="mescrollInit" @down="downCallback" @up="Room.upCallback">
<room-list :is-group-buying="true" :store-type="storeType"></room-list>
</mescroll-body>
</view>
</view> -->
</wd-tab>
</wd-tabs>
<view class="mx-30rpx mt-34rpx">
<mescroll-body @init="mescrollInit" @down="downCallback" :down="downOption" :up="upOption" @up="Room.upCallback">
<room-list :is-reserve="tabIndexs === 0" :is-group-buying="tabIndexs === 1" :store-type="storeType" :list="list"></room-list>
</mescroll-body>
</view>
</view>
<!-- 客服弹窗 -->
<wd-popup v-model="showServicePopup" lock-scroll custom-style="border-radius:30rpx;" @close="showServicePopup = false">
<view class="text-center w-440rpx h-560rpx flex flex-col justify-center items-center">
<view class="w-240rpx h-240rpx" @click="Room.handleOpenServiceSheet">
<wd-img width='100%' height='100%' :src="`${OSS}images/reserve_room/reserve_room_image3.png`"></wd-img>
<wd-img width='100%' height='100%' :src="teaRoom.customer_service"></wd-img>
</view>
<view class="text-36rpx text-[#303133] leading-50rpx mt-54rpx">门店客服</view>
<view class="text-28rpx text-[#818CA9] leading-50rpx mt-22rpx">点击二维码添加客服</view>
@ -121,10 +125,11 @@
import RechargeBtn from '@/components/RechargeBtn.vue'
import RoomList from '@/components/reserve/RoomList.vue'
import {toast} from '@/utils/toast'
import { getTeaRoomDetail, collectTeaRoom } from '@/api/tea-room'
import { getTeaRoomDetail, collectTeaRoom, getStoreTeaRoomList } from '@/api/tea-room'
import type { ITeaRoomDetailResult } from '@/api/types/tea-room'
import type {IUserInfoVo } from '@/api/types/login'
import { useUserStore } from '@/store'
import { router } from '@/utils/tools'
const rightPadding = inject('capsuleOffset')
const OSS = inject('OSS')
@ -140,24 +145,31 @@
const teaRoomId = ref<number>(0)
const teaRoom = ref<any>({})
// 评分
const rate = ref<number>(4)
// 用户信息
const userInfo = ref<IUserInfoVo>(null)
// tab
const tab = ref<number>(0)
const goods = ref<Array<any>[]>([])
// 弹窗
const showAction = ref<boolean>(false)
const sheetMenu = ref([])
const showServicePopup = ref<boolean>(false)
const storeType = ref<number>(1) // 1：直营 2：加盟
// 店铺类型 1：直营 2：加盟
const storeType = ref<number>(1)
/* mescroll */
const { mescrollInit, downCallback } = useMescroll(onPageScroll, onReachBottom) // 调用mescroll的hook
// 分页
const { mescrollInit, downCallback, getMescroll } = useMescroll(onPageScroll, onReachBottom) // 调用mescroll的hook
const downOption = {
auto: true
}
const upOption = {
auto: true,
textNoMore: '~ 已经到底啦 ~', //无更多数据的提示
}
const list = ref<Array<any>>([])
const tabIndexs = ref<number>(0)
onLoad((args) => {
console.log("🚀 ~ args:", uni.getStorageSync('latitude'), uni.getStorageSync('longitude'))
@ -170,7 +182,36 @@
const Room = {
sheetMenuType: '', // 记录菜单类型
// 初始化
/**
* 获取茶室预定和团购套餐列表
* @param mescroll
*/
upCallback: (mescroll) => {
const filter = {
page: mescroll.num,
size: mescroll.size,
id: teaRoomId.value
}
if (tabIndexs.value === 0) {
getStoreTeaRoomList(filter).then( res => {
console.log("🚀 ~ res:", 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 {
// 处理团购套餐列表
}
},
/**
* 初始化茶室详情
*/
handleInit: async () => {
const userStore = useUserStore()
userInfo.value = userStore.userInfo
@ -182,51 +223,14 @@
user_id: userInfo.value.id || 0
})
teaRoom.value = res.details
console.log("🚀 ~ teaRoom.value:", teaRoom.value)
storeType.value = teaRoom.value.operation_type
swiperList.value = teaRoom.value.img_arr
},
// 上拉加载的回调: 其中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(); // 请求失败, 结束加载
// })
},
// 处理收藏
/**
* 处理收藏
*/
handleCollect: async () => {
let status = teaRoom.value.collect == 0 ? 1 : 0
await collectTeaRoom({
@ -237,12 +241,9 @@
teaRoom.value.collect = teaRoom.value.collect == 0 ? 1 : 0
},
// 打开客服弹窗
handleService: () => {
showServicePopup.value = true
},
// 打开客服二维码弹窗
/**
* 打开客服二维码弹窗
*/
handleOpenServiceSheet: () => {
Room.sheetMenuType = 'service'
showAction.value = true
@ -258,7 +259,9 @@
]
},
// 处理菜单选择
/**
* 处理菜单选择
*/
handleSelectMenu: (item: any) => {
if (Room.sheetMenuType == 'service') {
// 处理客服相关的菜单项
@ -278,7 +281,9 @@
showAction.value = false // 关闭菜单
},
// 处理导航逻辑
/**
* 处理导航逻辑
*/
handleLocation: () => {
uni.openLocation({
latitude: Number(teaRoom.value.latitude),
@ -288,7 +293,9 @@
})
},
// 处理拨打电话逻辑
/**
* 处理拨打电话逻辑
*/
handleCallPhone: () => {
Room.sheetMenuType = 'call'
showAction.value = true
@ -304,21 +311,20 @@
]
},
// tab切换获取index
/**
* tab切换获取index
*/
handleChangeTab: (item: { index: number }) => {
// tabIndexs.value = item.index
// scrollToLastY()
tabIndexs.value = item.index
list.value = []
getMescroll().resetUpScroll()
},
handleClick: (item: any) => {
// 处理点击事件
console.log('Clicked item:', item)
},
/**
* 跳转到门店充值页面
*/
handleToRecharge: () => {
uni.navigateTo({
url: '/bundle/store-recharge/store-recharge'
})
router.navigateTo(`/bundle/store-recharge/store-recharge?id=${teaRoom.value.id}&storeName=${teaRoom.value.name}`)
}
}
</script>