326 lines
13 KiB
Vue
326 lines
13 KiB
Vue
<!-- 使用 type="home" 属性设置首页，其他页面不需要设置，默认为page -->
|
||
<route lang="jsonc" type="page">{
|
||
"layout": "tabbar",
|
||
"style": {
|
||
"navigationStyle": "custom"
|
||
}
|
||
}</route>
|
||
<template>
|
||
<view>
|
||
<view>
|
||
<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>
|
||
<!-- <wd-img width="64rpx" height="64rpx" :src="`${OSS}icon/icon_sc_s.png`"></wd-img> -->
|
||
</view>
|
||
<view @click="room.handleService" class="flex items-center">
|
||
<wd-img width="64rpx" height="64rpx" :src="`${OSS}icon/icon_kefu.png`"></wd-img>
|
||
</view>
|
||
</view>
|
||
</template>
|
||
</navbar>
|
||
</view>
|
||
|
||
<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">
|
||
</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="relative mt-18rpx h-34rpx">
|
||
<view class="absolute top-0 flex items-center">
|
||
<wd-rate v-model="rate" readonly active-color="#FF5951" color="#FF5951" active-icon="star-filled" icon="star" space="4rpx"></wd-rate>
|
||
<view class="text-26rpx text-[#606266] leading-34rpx ml-8rpx">4.0 推荐</view>
|
||
</view>
|
||
</view>
|
||
<view class="text-26rpx mt-18rpx leading-48rpx text-[#606266]">营业时间：周一至周日 08:00-20:00</view>
|
||
</view>
|
||
<view class="flex flex-col items-end">
|
||
<view @click="room.handleToRecharge">
|
||
<recharge-btn name="充值"></recharge-btn>
|
||
</view>
|
||
<view class="text-24rpx text-[#818CA9] mt-18rpx">1分钟前有人充值</view>
|
||
</view>
|
||
</view>
|
||
<view class="mt-26rpx">
|
||
<wd-gap bg-color="#F6F7F9" height="2rpx"></wd-gap>
|
||
</view>
|
||
<view class="mt-22rpx flex items-center justify-between">
|
||
<view class="">
|
||
<view class="flex items-center">
|
||
<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>
|
||
<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">
|
||
<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">
|
||
<wd-img width="64rpx" height="64rpx" :src="`${OSS}icon/icon_phone.png`"/>
|
||
<view class="text-[#606266] text-24rpx leading-32rpx mt-8rpx">电话</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
<view class="mt-26rpx">
|
||
<wd-gap bg-color="#F6F7F9" height="20rpx"></wd-gap>
|
||
</view>
|
||
<view class="tabs">
|
||
<wd-tabs v-model="tab" swipeable slidable="always" @change="room.tabIndex" :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">
|
||
<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">
|
||
<room-list :is-group-buying="true" :is-reserve="false" :store-type="storeType"></room-list>
|
||
</mescroll-body>
|
||
</view>
|
||
</wd-tab>
|
||
</wd-tabs>
|
||
</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>
|
||
</view>
|
||
<view class="text-36rpx text-[#303133] leading-50rpx mt-54rpx">门店客服</view>
|
||
<view class="text-28rpx text-[#818CA9] leading-50rpx mt-22rpx">点击二维码添加客服</view>
|
||
</view>
|
||
</wd-popup>
|
||
<wd-action-sheet v-model="showAction" :actions="sheetMenu" cancel-text="取消" @close="showAction = false" @select="room.handleSelectMenu" />
|
||
</view>
|
||
</template>
|
||
|
||
<script lang="ts" setup>
|
||
import { onPageScroll, onReachBottom } from '@dcloudio/uni-app'
|
||
import useMescroll from "@/uni_modules/mescroll-uni/hooks/useMescroll.js";
|
||
import RechargeBtn from '@/components/RechargeBtn.vue'
|
||
import RoomList from '@/components/reserve/RoomList.vue'
|
||
import {toast} from '@/utils/toast'
|
||
|
||
const rightPadding = inject('capsuleOffset')
|
||
const OSS = inject('OSS')
|
||
|
||
const swiperList = ref<string[]>([
|
||
`${OSS}images/banner1.png`,
|
||
`${OSS}images/banner1.png`,
|
||
`${OSS}images/banner1.png`
|
||
])
|
||
const current = ref<number>(0)
|
||
const rate = ref<number>(4)
|
||
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：加盟
|
||
|
||
/* mescroll */
|
||
const { mescrollInit, downCallback } = useMescroll(onPageScroll, onReachBottom) // 调用mescroll的hook
|
||
|
||
onLoad(() => {
|
||
})
|
||
|
||
const room = {
|
||
sheetMenuType: '', // 记录菜单类型
|
||
|
||
// 上拉加载的回调: 其中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: () => {
|
||
// 处理收藏逻辑
|
||
toast.info('收藏成功')
|
||
},
|
||
|
||
// 打开客服弹窗
|
||
handleService: () => {
|
||
showServicePopup.value = true
|
||
},
|
||
|
||
// 打开客服二维码弹窗
|
||
handleOpenServiceSheet: () => {
|
||
room.sheetMenuType = 'service'
|
||
showAction.value = true
|
||
sheetMenu.value = [
|
||
{
|
||
name: '保存图片',
|
||
value: 'saveImage'
|
||
},
|
||
{
|
||
name: '添加门店微信',
|
||
value: 'addWeChat'
|
||
}
|
||
]
|
||
},
|
||
|
||
// 处理菜单选择
|
||
handleSelectMenu: (item: any) => {
|
||
console.log("🚀 ~ item:", item)
|
||
if (room.sheetMenuType == 'service') {
|
||
// 处理客服相关的菜单项
|
||
if (item.value === 'saveImage') {
|
||
// 处理保存图片逻辑
|
||
toast.success('图片已保存')
|
||
} else if (item.value === 'addWeChat') {
|
||
// 处理添加微信逻辑
|
||
toast.success('已添加门店微信')
|
||
}
|
||
} else if (room.sheetMenuType == 'call' && item.index == 1) {
|
||
uni.makePhoneCall({
|
||
phoneNumber: item.value // 替换为实际电话号码
|
||
})
|
||
}
|
||
|
||
showAction.value = false // 关闭菜单
|
||
},
|
||
|
||
// 处理导航逻辑
|
||
handleLocation: () => {
|
||
toast.info('正在导航...')
|
||
// 可以使用uni.navigateTo或其他方式打开地图应用
|
||
uni.navigateTo({
|
||
url: '/pages/map/map' // 假设有一个地图页面
|
||
})
|
||
},
|
||
|
||
// 处理拨打电话逻辑
|
||
handleCallPhone: () => {
|
||
room.sheetMenuType = 'call'
|
||
showAction.value = true
|
||
sheetMenu.value = [
|
||
{
|
||
name: 15005837859,
|
||
value: ''
|
||
},
|
||
{
|
||
name: '呼叫',
|
||
value: 15005837859
|
||
}
|
||
]
|
||
|
||
},
|
||
|
||
// tab切换获取index
|
||
tabIndex: (item: { index: number }) => {
|
||
// tabIndexs.value = item.index
|
||
// scrollToLastY()
|
||
},
|
||
|
||
handleClick: (item: any) => {
|
||
// 处理点击事件
|
||
console.log('Clicked item:', item)
|
||
},
|
||
|
||
handleToRecharge: () => {
|
||
uni.navigateTo({
|
||
url: '/bundle/store-recharge/store-recharge'
|
||
})
|
||
}
|
||
}
|
||
</script>
|
||
|
||
<style lang="scss">
|
||
page {
|
||
background-color: #fff;
|
||
}
|
||
|
||
.right-slot {
|
||
padding-right: v-bind(rightPadding);
|
||
}
|
||
|
||
.swiper {
|
||
:deep() {
|
||
.wd-swiper-nav__item--dots-bar {
|
||
width: 56rpx !important;
|
||
height: 6rpx !important;
|
||
border-radius: 3rpx !important;
|
||
}
|
||
|
||
.is-active {
|
||
background-color: #2B9F93 !important;
|
||
}
|
||
}
|
||
}
|
||
|
||
.tabs {
|
||
:deep() {
|
||
.wd-tabs__nav-item {
|
||
font-size: 32rpx !important;
|
||
color: #303133 !important;
|
||
line-height: 42rpx !important;
|
||
padding: 0 30rpx !important;
|
||
}
|
||
|
||
.wd-tabs__nav-item.is-active {
|
||
font-weight: 500 !important;
|
||
}
|
||
|
||
.wd-tabs__line {
|
||
bottom: 0 !important;
|
||
width: 60rpx !important;
|
||
height: 16rpx !important;
|
||
background-color: transparent !important;
|
||
background-image: url(#{$OSS}images/reserve_room/reserve_room_image1.png) !important;
|
||
background-size: cover !important;
|
||
}
|
||
}
|
||
}
|
||
</style>
|