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-12 17:40:35 +08:00
parent 29bf4dae74
commit 0cad65c295
32 changed files with 1522 additions and 505 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@ -11,11 +11,16 @@
<navbar title="预约茶室" fixed>
<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.png`"></wd-img>
<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>
<template v-else>
<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="Room.handleService" class="flex items-center">
<wd-img width="64rpx" height="64rpx" :src="`${OSS}icon/icon_kefu.png`"></wd-img>
</view>
</view>
@ -27,22 +32,22 @@
<view>
<wd-swiper value-key="image" height="320rpx"
:indicator="{ type: 'dots-bar' }" :list="swiperList" v-model:current="current"
@click="room.handleClick" mode="aspectFit">
@click="Room.handleClick" mode="aspectFit">
</wd-swiper>
</view>
<view class="mt-38rpx flex justify-between">
<view class="line-1">
<view class="text-34rpx text-[#303133] leading-48rpx font-bold line-1">凝香茶业</view>
<view class="text-34rpx text-[#303133] leading-48rpx font-bold line-1">{{ teaRoom.name }}</view>
<view class="relative mt-18rpx h-34rpx">
<view class="absolute top-0 flex items-center">
<wd-rate v-model="rate" readonly active-color="#FF5951" allow-half active-icon="star-filled" icon="star" space="4rpx"/>
<view class="text-26rpx text-[#606266] leading-34rpx ml-8rpx">4.0 推荐</view>
<wd-rate v-model="teaRoom.star" readonly active-color="#FF5951" allow-half active-icon="star-filled" icon="star" space="4rpx"/>
<view class="text-26rpx text-[#606266] leading-34rpx ml-8rpx">{{ teaRoom.star }} 推荐</view>
</view>
</view>
<view class="text-26rpx mt-18rpx leading-48rpx text-[#606266]">营业时间：周一至周日 08:00-20:00</view>
<view class="text-26rpx mt-18rpx leading-48rpx text-[#606266]">营业时间：{{ teaRoom.day_time }} {{ teaRoom.start_time }}-{{ teaRoom.end_time }}</view>
</view>
<view class="flex flex-col items-end">
<view @click="room.handleToRecharge">
<view @click="Room.handleToRecharge">
<recharge-btn name="充值"></recharge-btn>
</view>
<view class="text-24rpx text-[#818CA9] mt-18rpx">1分钟前有人充值</view>
@ -57,16 +62,16 @@
<view class="w-36rpx h-36rpx">
<wd-img width="36rpx" height="36rpx" :src="`${OSS}icon/icon_location2.png`"/>
</view>
<view class="ml-2rpx text-26rpx text-[#606266] line-2">青浦区仓路478号</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>
<view class="flex items-center mr-32rpx">
<view class="text-center mr-20rpx" @click="room.handleLocation">
<view class="text-center mr-20rpx" @click="Room.handleLocation">
<wd-img width="64rpx" height="64rpx" :src="`${OSS}icon/icon_nav.png`"/>
<view class="text-[#606266] text-24rpx leading-32rpx mt-8rpx">导航</view>
</view>
<view class="text-center" @click="room.handleCallPhone">
<view class="text-center" @click="Room.handleCallPhone">
<wd-img width="64rpx" height="64rpx" :src="`${OSS}icon/icon_phone.png`"/>
<view class="text-[#606266] text-24rpx leading-32rpx mt-8rpx">电话</view>
</view>
@ -77,17 +82,17 @@
<wd-gap bg-color="#F6F7F9" height="20rpx"></wd-gap>
</view>
<view class="tabs">
<wd-tabs v-model="tab" swipeable slidable="always" @change="room.handleChangeTab" :lazy="false">
<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">
<mescroll-body @init="mescrollInit" @down="downCallback" @up="room.upCallback">
<mescroll-body @init="mescrollInit" @down="downCallback" @up="Room.upCallback">
<room-list :is-reserve="true" :store-type="storeType"></room-list>
</mescroll-body>
</view>
</wd-tab>
<wd-tab title="团购套餐">
<view class="content mx-30rpx mt-34rpx">
<mescroll-body @init="mescrollInit" @down="downCallback" @up="room.upCallback">
<mescroll-body @init="mescrollInit" @down="downCallback" @up="Room.upCallback">
<room-list :is-group-buying="true" :store-type="storeType"></room-list>
</mescroll-body>
</view>
@ -98,7 +103,7 @@
<!-- 客服弹窗 -->
<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">
<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>
</view>
<view class="text-36rpx text-[#303133] leading-50rpx mt-54rpx">门店客服</view>
@ -106,7 +111,7 @@
</view>
</wd-popup>
<wd-action-sheet v-model="showAction" :actions="sheetMenu" cancel-text="取消" @close="showAction = false" @select="room.handleSelectMenu" />
<wd-action-sheet v-model="showAction" :actions="sheetMenu" cancel-text="取消" @close="showAction = false" @select="Room.handleSelectMenu" />
</view>
</template>
@ -116,6 +121,10 @@
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 type { ITeaRoomDetailResult } from '@/api/types/tea-room'
import type {IUserInfoVo } from '@/api/types/login'
import { useUserStore } from '@/store'
const rightPadding = inject('capsuleOffset')
const OSS = inject('OSS')
@ -127,8 +136,15 @@
])
const current = ref<number>(0)
// 茶室ID
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)
@ -143,12 +159,32 @@
/* mescroll */
const { mescrollInit, downCallback } = useMescroll(onPageScroll, onReachBottom) // 调用mescroll的hook
onLoad(() => {
onLoad((args) => {
console.log("🚀 ~ args:", uni.getStorageSync('latitude'), uni.getStorageSync('longitude'))
if (args.id) {
teaRoomId.value = Number(args.id)
Room.handleInit()
}
})
const room = {
const Room = {
sheetMenuType: '', // 记录菜单类型
// 初始化
handleInit: async () => {
const userStore = useUserStore()
userInfo.value = userStore.userInfo
const res = await getTeaRoomDetail({
id: teaRoomId.value,
latitude: uni.getStorageSync('latitude'),
longitude: uni.getStorageSync('longitude'),
user_id: userInfo.value.id || 0
})
teaRoom.value = res.details
console.log("🚀 ~ teaRoom.value:", teaRoom.value)
},
// 上拉加载的回调: 其中num:当前页 从1开始, size:每页数据条数,默认10
upCallback: (mescroll) => {
// 需要留一下数据为空的时候显示的空数据图标内容
@ -190,10 +226,15 @@
// })
},
// 收藏和取消收藏
handleCollect: () => {
// 处理收藏逻辑
toast.info('收藏成功')
// 处理收藏
handleCollect: async () => {
let status = teaRoom.value.collect == 0 ? 1 : 0
await collectTeaRoom({
id: teaRoom.value.id,
status
})
teaRoom.value.collect = teaRoom.value.collect == 0 ? 1 : 0
},
// 打开客服弹窗
@ -203,7 +244,7 @@
// 打开客服二维码弹窗
handleOpenServiceSheet: () => {
room.sheetMenuType = 'service'
Room.sheetMenuType = 'service'
showAction.value = true
sheetMenu.value = [
{
@ -219,8 +260,7 @@
// 处理菜单选择
handleSelectMenu: (item: any) => {
console.log("🚀 ~ item:", item)
if (room.sheetMenuType == 'service') {
if (Room.sheetMenuType == 'service') {
// 处理客服相关的菜单项
if (item.value === 'saveImage') {
// 处理保存图片逻辑
@ -229,9 +269,9 @@
// 处理添加微信逻辑
toast.success('已添加门店微信')
}
} else if (room.sheetMenuType == 'call' && item.index == 1) {
} else if (Room.sheetMenuType == 'call') {
uni.makePhoneCall({
phoneNumber: item.value // 替换为实际电话号码
phoneNumber: teaRoom.value.contact_phone
})
}
@ -240,25 +280,26 @@
// 处理导航逻辑
handleLocation: () => {
toast.info('正在导航...')
// 可以使用uni.navigateTo或其他方式打开地图应用
uni.navigateTo({
url: '/pages/map/map' // 假设有一个地图页面
uni.openLocation({
latitude: Number(teaRoom.value.latitude),
longitude: Number(teaRoom.value.longitude),
name: teaRoom.value.name,
address: teaRoom.value.address
})
},
// 处理拨打电话逻辑
handleCallPhone: () => {
room.sheetMenuType = 'call'
Room.sheetMenuType = 'call'
showAction.value = true
sheetMenu.value = [
{
name: 15005837859,
name: teaRoom.value.contact_phone || '暂无联系人',
value: ''
},
{
name: '呼叫',
value: 15005837859
value: teaRoom.value.contact_phone || ''
}
]
},