完善页面
This commit is contained in:
275
src/bundle/reserve-room/choose-room-reserve.vue
Normal file
275
src/bundle/reserve-room/choose-room-reserve.vue
Normal file
@ -0,0 +1,275 @@
|
||||
<!-- 使用 type="home" 属性设置首页,其他页面不需要设置,默认为page -->
|
||||
<route lang="jsonc" type="page">{
|
||||
"layout": "tabbar",
|
||||
"style": {
|
||||
"navigationStyle": "custom"
|
||||
}
|
||||
}</route>
|
||||
<template>
|
||||
<view class="pb-200rpx">
|
||||
<view>
|
||||
<navbar layoutLeft>
|
||||
<template #left>
|
||||
<view class="flex items-center">
|
||||
<view class="text-[#4C9F44] text-32rpx leading-44rpx flex items-center">
|
||||
<view class="w-40rpx h-40rpx leading-36rpx rounded-40rpx bg-[#E1F3DE] mr-10rpx">1</view>
|
||||
<view>选择茶室</view>
|
||||
</view>
|
||||
<view class="flex items-center mx-10rpx">
|
||||
<wd-img width="50rpx" height="14rpx" :src="`${OSS}icon/icon_switch_left2.png`"></wd-img>
|
||||
</view>
|
||||
<view class="text-[#4C9F44] text-32rpx leading-44rpx flex items-center">
|
||||
<view class="w-40rpx h-40rpx leading-36rpx rounded-40rpx bg-[#E1F3DE] mr-10rpx">2</view>
|
||||
<view>预定</view>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
</navbar>
|
||||
</view>
|
||||
|
||||
<view class="">
|
||||
<!-- 轮播图 -->
|
||||
<view class="mt-32rpx mx-30rpx">
|
||||
<wd-swiper value-key="image" height="240rpx" indicatorPosition="bottom-left"
|
||||
:indicator="{ type: 'dots-bar' }" :list="swiperList" v-model:current="current"
|
||||
@click="chooseRoomReserve.handleClick" @change="chooseRoomReserve.onChange" mode="aspectFit"></wd-swiper>
|
||||
</view>
|
||||
|
||||
<!-- 使用说明 -->
|
||||
<view class="bg-white rounded-16rpx py-26rpx px-30rpx mt-24rpx mx-30rpx">
|
||||
<view class="text-[#303133] text-32rpx leading-44rpx font-bold mb-24rpx">使用说明</view>
|
||||
<view class="">
|
||||
<rich-text :nodes="html"></rich-text>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<!-- 预定时间 -->
|
||||
<view class="bg-white rounded-16rpx py-26rpx px-30rpx mt-24rpx mx-30rpx" @click="showBookTimePopup = true">
|
||||
<view class="text-[#303133] text-32rpx leading-44rpx font-bold mb-24rpx">预定时间</view>
|
||||
<view class="flex items-center justify-between">
|
||||
<view class="text-[26rpx] text-[#606266] leading-36rpx">3小时起订</view>
|
||||
<view class="flex items-center">
|
||||
<view class="text-[28rpx] text-[#909399] leading-40rpx">
|
||||
3小时起订
|
||||
</view>
|
||||
<view class="mt-4rpx">
|
||||
<wd-icon name="chevron-right" size="22px" color="#909399"></wd-icon>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<!-- 适用门店 -->
|
||||
<view class="bg-white rounded-16rpx px-30rpx pb-32rpx mx-30rpx mt-20rpx">
|
||||
<view class="pt-32rpx text-[#303133] text-32rpx leading-44rpx">适用门店</view>
|
||||
<view class="mt-26rpx flex items-center">
|
||||
<view class="mr-24rpx">
|
||||
<wd-img width="170rpx" height="170rpx" :src="`${OSS}images/home/home_image5.png`"></wd-img>
|
||||
</view>
|
||||
<view class="flex-1 flex justify-between items-center relative">
|
||||
<view class="">
|
||||
<view class="text-[#303133] text-30rpx leading-40rpx line-2">这是商家的名称这是</view>
|
||||
<view class="mt-26rpx text-[#909399] text-24rpx leading-34rpx">距您9km</view>
|
||||
<view class="flex items-center mt-14rpx">
|
||||
<view class="mr-8rpx">
|
||||
<wd-img width="28rpx" height="28rpx" :src="`${OSS}icon/icon_location.png`"/>
|
||||
</view>
|
||||
<view class="ml-2rpx text-26rpx text-[#606266] line-2 w-300rpx">青浦区仓路478号青浦区仓路478号青浦区仓路478号青浦区仓路478号青浦区仓路478号青浦区仓路478号</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="flex absolute top-1/2 right-0 -translate-y-1/2">
|
||||
<view class="text-center mr-20rpx" @click="chooseRoomReserve.handleLocation">
|
||||
<wd-img width="64rpx" height="64rpx" :src="`${OSS}icon/icon_nav.png`"/>
|
||||
</view>
|
||||
<view class="text-center" @click="chooseRoomReserve.handleCallPhone">
|
||||
<wd-img width="64rpx" height="64rpx" :src="`${OSS}icon/icon_phone.png`"/>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<!-- 选择茶室包间 -->
|
||||
<view class="bg-white mx-30rpx rounded-16rpx px-30rpx pb-32rpx mx-30rpx mt-20rpx">
|
||||
<view class="text-32rpx text-[#303133] leading-44rpx pt-32rpx">选择茶室包间</view>
|
||||
<view class="mt-26rpx">
|
||||
<mescroll-body @init="mescrollInit" @down="downCallback" @up="chooseRoomReserve.upCallback">
|
||||
<room-list :is-reserve="true" :store-type="storeType"></room-list>
|
||||
</mescroll-body>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<!-- 操作按钮 -->
|
||||
<view class="w-full fixed bottom-0 left-0 right-0 bg-white h-152rpx flex items-center justify-center">
|
||||
<view class="text-32rpx leading-44rpx flex items-center justify-center leading-90rpx text-center">
|
||||
<view class="w-630rpx h-90rpx bg-[#4C9F44] rounded-8rpx text-[#fff]">下一步</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<booking-time v-model="showBookTimePopup"></booking-time>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script lang="ts" setup>
|
||||
import useMescroll from "@/uni_modules/mescroll-uni/hooks/useMescroll.js"
|
||||
import RoomList from '@/components/reserve/RoomList.vue'
|
||||
import BookingTime from '@/components/BookingTime.vue'
|
||||
import {toast} from '@/utils/toast'
|
||||
|
||||
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 showBookTimePopup = ref<boolean>(false)
|
||||
/** 结束 **/
|
||||
|
||||
const html: string = '<p>这里是富文本内容,需要后台传递</p>'
|
||||
|
||||
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 chooseRoomReserve = {
|
||||
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
|
||||
},
|
||||
|
||||
// 处理菜单选择
|
||||
handleSelectMenu: (item: any) => {
|
||||
console.log("🚀 ~ item:", item)
|
||||
if (chooseRoomReserve.sheetMenuType == 'service') {
|
||||
// 处理客服相关的菜单项
|
||||
if (item.value === 'saveImage') {
|
||||
// 处理保存图片逻辑
|
||||
toast.success('图片已保存')
|
||||
} else if (item.value === 'addWeChat') {
|
||||
// 处理添加微信逻辑
|
||||
toast.success('已添加门店微信')
|
||||
}
|
||||
} else if (chooseRoom.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: () => {
|
||||
chooseRoom.sheetMenuType = 'call'
|
||||
showAction.value = true
|
||||
sheetMenu.value = [
|
||||
{
|
||||
name: 15005837859,
|
||||
value: ''
|
||||
},
|
||||
{
|
||||
name: '呼叫',
|
||||
value: 15005837859
|
||||
}
|
||||
]
|
||||
},
|
||||
|
||||
// tab切换获取index
|
||||
handleChangeTab: (item: { index: number }) => {
|
||||
// tabIndexs.value = item.index
|
||||
// scrollToLastY()
|
||||
},
|
||||
|
||||
handleClick: (item: any) => {
|
||||
// 处理点击事件
|
||||
console.log('Clicked item:', item)
|
||||
},
|
||||
|
||||
onChange: (e: any) => {
|
||||
// 设置 current.value 为当前轮播索引
|
||||
current.value = e.current
|
||||
},
|
||||
|
||||
handleToRecharge: () => {
|
||||
uni.navigateTo({
|
||||
url: '/bundle/store-recharge/store-recharge'
|
||||
})
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
page {
|
||||
background-color: $cz-page-background;
|
||||
}
|
||||
</style>
|
||||
227
src/bundle/reserve-room/choose-room.vue
Normal file
227
src/bundle/reserve-room/choose-room.vue
Normal file
@ -0,0 +1,227 @@
|
||||
<!-- 使用 type="home" 属性设置首页,其他页面不需要设置,默认为page -->
|
||||
<route lang="jsonc" type="page">{
|
||||
"layout": "tabbar",
|
||||
"style": {
|
||||
"navigationStyle": "custom"
|
||||
}
|
||||
}</route>
|
||||
<template>
|
||||
<view class="pb-200rpx">
|
||||
<view>
|
||||
<navbar layoutLeft>
|
||||
<template #left>
|
||||
<view class="flex items-center">
|
||||
<view class="text-[#4C9F44] text-32rpx leading-44rpx flex items-center">
|
||||
<view class="w-40rpx h-40rpx leading-36rpx rounded-40rpx bg-[#E1F3DE] mr-10rpx">1</view>
|
||||
<view>选择茶室</view>
|
||||
</view>
|
||||
<view class="flex items-center mx-10rpx">
|
||||
<wd-img width="50rpx" height="14rpx" :src="`${OSS}icon/icon_switch_left.png`"></wd-img>
|
||||
</view>
|
||||
<view class="text-32rpx leading-44rpx flex items-center">
|
||||
<view class="w-40rpx h-40rpx leading-36rpx rounded-40rpx bg-[#BFC2CC] text-[#fff] mr-10rpx">2</view>
|
||||
<view class="text-[#606266]">预定</view>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
</navbar>
|
||||
</view>
|
||||
|
||||
<!-- 适用门店 -->
|
||||
<view class="bg-white rounded-16rpx px-30rpx pb-32rpx mx-30rpx mt-20rpx">
|
||||
<view class="pt-32rpx text-[#303133] text-32rpx leading-44rpx">适用门店</view>
|
||||
<view class="mt-26rpx flex items-center">
|
||||
<view class="mr-24rpx">
|
||||
<wd-img width="170rpx" height="170rpx" :src="`${OSS}images/home/home_image5.png`"></wd-img>
|
||||
</view>
|
||||
<view class="flex-1 flex justify-between items-center relative">
|
||||
<view class="">
|
||||
<view class="text-[#303133] text-30rpx leading-40rpx line-2">这是商家的名称这是</view>
|
||||
<view class="mt-26rpx text-[#909399] text-24rpx leading-34rpx">距您9km</view>
|
||||
<view class="flex items-center mt-14rpx">
|
||||
<view class="mr-8rpx">
|
||||
<wd-img width="28rpx" height="28rpx" :src="`${OSS}icon/icon_location.png`"/>
|
||||
</view>
|
||||
<view class="ml-2rpx text-26rpx text-[#606266] line-2 w-300rpx">青浦区仓路478号青浦区仓路478号青浦区仓路478号青浦区仓路478号青浦区仓路478号青浦区仓路478号</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="flex absolute top-1/2 right-0 -translate-y-1/2">
|
||||
<view class="text-center mr-20rpx" @click="chooseRoom.handleLocation">
|
||||
<wd-img width="64rpx" height="64rpx" :src="`${OSS}icon/icon_nav.png`"/>
|
||||
</view>
|
||||
<view class="text-center" @click="chooseRoom.handleCallPhone">
|
||||
<wd-img width="64rpx" height="64rpx" :src="`${OSS}icon/icon_phone.png`"/>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<!-- 选择茶室包间 -->
|
||||
<view class="bg-white mx-30rpx rounded-16rpx px-30rpx pb-32rpx mx-30rpx mt-20rpx">
|
||||
<view class="text-32rpx text-[#303133] leading-44rpx pt-32rpx">选择茶室包间</view>
|
||||
<view class="mt-26rpx">
|
||||
<mescroll-body @init="mescrollInit" @down="downCallback" @up="chooseRoom.upCallback">
|
||||
<room-list :is-reserve="true" :store-type="storeType"></room-list>
|
||||
</mescroll-body>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<!-- 操作按钮 -->
|
||||
<view class="w-full fixed bottom-0 left-0 right-0 bg-white h-152rpx flex items-center justify-center">
|
||||
<view class="text-32rpx leading-44rpx flex items-center justify-center leading-90rpx text-center">
|
||||
<view class="w-630rpx h-90rpx bg-[#4C9F44] rounded-8rpx text-[#fff]">下一步</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script lang="ts" setup>
|
||||
import { onPageScroll, onReachBottom } from '@dcloudio/uni-app'
|
||||
import useMescroll from "@/uni_modules/mescroll-uni/hooks/useMescroll.js"
|
||||
import RoomList from '@/components/reserve/RoomList.vue'
|
||||
import {toast} from '@/utils/toast'
|
||||
|
||||
const OSS = inject('OSS')
|
||||
|
||||
// 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:加盟
|
||||
|
||||
/* mescroll */
|
||||
const { mescrollInit, downCallback } = useMescroll(onPageScroll, onReachBottom) // 调用mescroll的hook
|
||||
|
||||
onLoad(() => {
|
||||
})
|
||||
|
||||
const chooseRoom = {
|
||||
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
|
||||
},
|
||||
|
||||
// 处理菜单选择
|
||||
handleSelectMenu: (item: any) => {
|
||||
console.log("🚀 ~ item:", item)
|
||||
if (chooseRoom.sheetMenuType == 'service') {
|
||||
// 处理客服相关的菜单项
|
||||
if (item.value === 'saveImage') {
|
||||
// 处理保存图片逻辑
|
||||
toast.success('图片已保存')
|
||||
} else if (item.value === 'addWeChat') {
|
||||
// 处理添加微信逻辑
|
||||
toast.success('已添加门店微信')
|
||||
}
|
||||
} else if (chooseRoom.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: () => {
|
||||
chooseRoom.sheetMenuType = 'call'
|
||||
showAction.value = true
|
||||
sheetMenu.value = [
|
||||
{
|
||||
name: 15005837859,
|
||||
value: ''
|
||||
},
|
||||
{
|
||||
name: '呼叫',
|
||||
value: 15005837859
|
||||
}
|
||||
]
|
||||
},
|
||||
|
||||
// tab切换获取index
|
||||
handleChangeTab: (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: $cz-page-background;
|
||||
}
|
||||
</style>
|
||||
@ -13,12 +13,12 @@
|
||||
|
||||
<view>
|
||||
<view class="mt-20rpx mx-30rpx swiper">
|
||||
<wd-swiper value-key="image" height="320rpx"
|
||||
<wd-swiper value-key="image" height="320rpx"
|
||||
:indicator="{ type: 'dots-bar' }" :list="swiperList" v-model:current="current"
|
||||
@click="detail.handleClick" mode="aspectFit">
|
||||
</wd-swiper>
|
||||
</view>
|
||||
|
||||
|
||||
<view class="bg-white rounded-16rpx py-26rpx px-30rpx mt-24rpx mx-30rpx">
|
||||
<view class="font-bold text-36rpx text-[#303133] leading-50rpx">这里是茶室的名称茶室的名称</view>
|
||||
<view class="mt-14rpx flex" v-if="!isGroupBuying">
|
||||
@ -141,8 +141,8 @@
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view class="fixed left-0 right-0 bottom-0 z-2 bg-[#fff]"
|
||||
:style="{ height: '140rpx', bottom: 'env(safe-area-inset-bottom)' }">
|
||||
<view class="fixed left-0 right-0 bottom-0 z-2 bg-[#fff]"
|
||||
:style="{ height: '140rpx' }">
|
||||
<view class="mt-12rpx w-full" v-if="!isGroupBuying">
|
||||
<wd-gap height="2rpx" bgColor="#ECECEC"></wd-gap>
|
||||
</view>
|
||||
@ -166,7 +166,7 @@
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
|
||||
<!-- 预定时间 -->
|
||||
<wd-popup v-model="showReservePopup" lock-scroll custom-style="border-radius: 32rpx 32rpx 0rpx 0rpx;" position="bottom">
|
||||
<view class="relative">
|
||||
@ -175,16 +175,16 @@
|
||||
</view>
|
||||
<view class="text-36rpx text-[#121212] leading-50rpx text-center pt-50rpx pb-40rpx">选择时间</view>
|
||||
<view class="w-[100%] h-100rpx flex justify-between items-center">
|
||||
<view
|
||||
class="w-[50%] h-[100%] flex flex-col items-center justify-center rounded-l-[8rpx]"
|
||||
<view
|
||||
class="w-[50%] h-[100%] flex flex-col items-center justify-center rounded-l-[8rpx]"
|
||||
:class="`${currentTimePicker == 'start' ? 'bg-[#4C9F44] text-[#fff]' : 'bg-[#F6F7F8] text-[#303133]'}`"
|
||||
@click="currentTimePicker = 'start'">
|
||||
<view class="text-28rpx leading-40rpx">开始时间</view>
|
||||
<view class="text-26rpx leading-36rpx mt-2rpx">{{ startTimeLayout }}</view>
|
||||
</view>
|
||||
<view
|
||||
class="w-[50%] h-[100%] flex flex-col items-center justify-center rounded-r-[8rpx]"
|
||||
:class="`${currentTimePicker == 'end' ? 'bg-[#4C9F44] text-[#fff]' : 'bg-[#F6F7F8] text-[#303133]'}`"
|
||||
<view
|
||||
class="w-[50%] h-[100%] flex flex-col items-center justify-center rounded-r-[8rpx]"
|
||||
:class="`${currentTimePicker == 'end' ? 'bg-[#4C9F44] text-[#fff]' : 'bg-[#F6F7F8] text-[#303133]'}`"
|
||||
@click="currentTimePicker = 'end'">
|
||||
<view class="text-28rpx leading-40rpx">结束时间</view>
|
||||
<view class="text-26rpx leading-36rpx mt-2rpx">{{ endTimeLayout }}</view>
|
||||
@ -230,10 +230,10 @@
|
||||
<view class="text-36rpx text-[#121212] leading-50rpx text-center">费用明细</view>
|
||||
<view class="mx-30rpx bg-white rounded-16rpx px-30rpx pt-40rpx mt-40rpx pb-30rpx">
|
||||
<view class="flex justify-between items-center text-30rpx text-[#303133] leading-42rpx">
|
||||
<view>茶室费</view>
|
||||
<view>茶室费</view>
|
||||
<view>¥640.00</view>
|
||||
</view>
|
||||
|
||||
|
||||
<view class="flex justify-between items-center text-24rpx text-[#909399] leading-34rpx mt-16rpx">
|
||||
<view>茶室费(¥160元/小时)</view>
|
||||
<view>x4</view>
|
||||
@ -259,7 +259,7 @@
|
||||
</view>
|
||||
|
||||
<view class="flex justify-between items-center text-30rpx text-[#303133] leading-42rpx">
|
||||
<view>实付金额</view>
|
||||
<view>实付金额</view>
|
||||
<view>¥640.00</view>
|
||||
</view>
|
||||
</view>
|
||||
@ -300,6 +300,7 @@
|
||||
<script lang="ts" setup>
|
||||
import {toast} from '@/utils/toast'
|
||||
import PriceFormat from '@/components/PriceFormat.vue'
|
||||
import {ReserveServiceCategory} from '@/utils/platformService'
|
||||
|
||||
const OSS = inject('OSS')
|
||||
|
||||
@ -354,13 +355,12 @@
|
||||
const showCostPopup = ref<boolean>(false) // 费用明细popup
|
||||
const showPayPopup = ref<boolean>(false) // 支付popup
|
||||
|
||||
onLoad(() => {
|
||||
if (isGroupBuying) {
|
||||
onLoad((args) => {
|
||||
if (args.type == ReserveServiceCategory.GroupBuying) {
|
||||
// TODO 如果是团购套餐则直接微信支付?
|
||||
pay.value = 3
|
||||
console.log("🚀 ~ pay.value:", pay.value)
|
||||
}
|
||||
|
||||
})
|
||||
|
||||
const detail = {
|
||||
@ -397,13 +397,13 @@
|
||||
}
|
||||
return values
|
||||
},
|
||||
|
||||
|
||||
handleClick: (item: any) => {
|
||||
// 处理点击事件
|
||||
console.log('Clicked item:', item)
|
||||
},
|
||||
|
||||
|
||||
|
||||
// 重置预定时间
|
||||
handleResetTime: () => {
|
||||
startTimeValue.value = ''
|
||||
@ -414,8 +414,8 @@
|
||||
detail.endTimeTimestamp = 0
|
||||
totalHour.value = 0
|
||||
currentTimePicker.value = 'start'
|
||||
},
|
||||
|
||||
},
|
||||
|
||||
// 确定时间
|
||||
handleConfirmHour: () => {
|
||||
if (totalHour.value <= 0) {
|
||||
@ -433,7 +433,7 @@
|
||||
|
||||
handlePay: () => {
|
||||
// 这里需要判断下如果是预约的话,跳转结果通知是reserve的,团购是pay的
|
||||
|
||||
|
||||
// uni.navigateTo({ url: '/bundle/reserve-room/result' })
|
||||
},
|
||||
|
||||
@ -462,7 +462,7 @@
|
||||
return result
|
||||
}
|
||||
totalHour.value = 0
|
||||
return 0
|
||||
return 0
|
||||
},
|
||||
}
|
||||
</script>
|
||||
|
||||
@ -11,7 +11,7 @@
|
||||
<navbar title="预约茶室" fixed>
|
||||
<template #right>
|
||||
<view class="flex items-center ml-114rpx right-slot">
|
||||
<view class="mr-16rpx flex items-center" @click="room.handleCollect">
|
||||
<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>
|
||||
@ -25,7 +25,7 @@
|
||||
|
||||
<view class="mt-20rpx mx-30rpx swiper" >
|
||||
<view>
|
||||
<wd-swiper value-key="image" height="320rpx"
|
||||
<wd-swiper value-key="image" height="320rpx"
|
||||
:indicator="{ type: 'dots-bar' }" :list="swiperList" v-model:current="current"
|
||||
@click="room.handleClick" mode="aspectFit">
|
||||
</wd-swiper>
|
||||
@ -88,7 +88,7 @@
|
||||
<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>
|
||||
<room-list :is-group-buying="true" :store-type="storeType"></room-list>
|
||||
</mescroll-body>
|
||||
</view>
|
||||
</wd-tab>
|
||||
@ -158,7 +158,7 @@
|
||||
// console.log("🚀 ~ goods:", goods)
|
||||
|
||||
// mescroll.endByPage(curPageData.length, res.totalPages); //必传参数(当前页的数据个数, 总页数)
|
||||
|
||||
|
||||
// }).catch(() => {
|
||||
// mescroll.endErr(); // 请求失败, 结束加载
|
||||
// })
|
||||
@ -207,7 +207,7 @@
|
||||
},
|
||||
{
|
||||
name: '添加门店微信',
|
||||
value: 'addWeChat'
|
||||
value: 'addWeChat'
|
||||
}
|
||||
]
|
||||
},
|
||||
@ -253,7 +253,7 @@
|
||||
},
|
||||
{
|
||||
name: '呼叫',
|
||||
value: 15005837859
|
||||
value: 15005837859
|
||||
}
|
||||
]
|
||||
},
|
||||
@ -274,7 +274,7 @@
|
||||
url: '/bundle/store-recharge/store-recharge'
|
||||
})
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
|
||||
Reference in New Issue
Block a user