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

463
src/bundle/tea-room/choose-room-reserve.vue
View File

@ -7,6 +7,55 @@
}</route>
<template>
<view class="pb-200rpx">
<!-- 费用明细 -->
<wd-popup v-model="showCostPopup" lock-scroll custom-style="border-radius: 32rpx 32rpx 0rpx 0rpx;" @close="showCostPopup = false" position="bottom">
<view class='bg-[#FBFBFB] py-40rpx realtive'>
<view class="absolute top-18rpx right-30rpx" @click="showCostPopup = false">
<wd-img width="60rpx" height='60rpx' :src="`${OSS}icon/icon_close.png`"></wd-img>
</view>
<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>￥{{ bill.service.total }}</view>
</view>
<view class="flex justify-between items-center text-24rpx text-[#909399] leading-34rpx mt-16rpx">
<view>茶室费（￥{{ teaRoomPrice }}元/小时）</view>
<view>x{{ bill.service.num }}</view>
</view>
<view class="mt-52rpx">
<view class="flex justify-between items-center text-30rpx text-[#303133] leading-42rpx">
<view>优惠</view>
<view class="text-[#4C9F44]">-￥{{ bill.totalDiscount }}</view>
</view>
<view class="flex justify-between items-center text-24rpx text-[#909399] leading-34rpx mt-16rpx">
<view>优惠券</view>
<view>-￥{{ bill.coupon }}</view>
</view>
<view class="flex justify-between items-center text-24rpx text-[#909399] leading-34rpx mt-16rpx">
<view>会员八折</view>
<view>-￥{{ bill.discount }}</view>
</view>
</view>
<view class="my-30rpx">
<wd-gap height="2rpx" bgColor='#F6F7F9'></wd-gap>
</view>
<view class="flex justify-between items-center text-30rpx text-[#303133] leading-42rpx">
<view>实付金额</view>
<view>￥{{ bill.total }}</view>
</view>
</view>
</view>
</wd-popup>
<!-- 选择预定时间 -->
<booking-time v-model="showBookTimePopup" :day="sevenDay" @selectedTime="ChooseRoomReserve.handleChooseReserveTime" :hour="Number(groupCoupon.hour)"></booking-time>
<view>
<navbar layoutLeft>
<template #left>
@ -31,15 +80,14 @@
<!-- 轮播图 -->
<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>
:indicator="{ type: 'dots-bar' }" :list="swiperList" v-model:current="current" 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>
<rich-text :nodes="teaRoom.textarea1"></rich-text>
</view>
</view>
@ -47,10 +95,36 @@
<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="text-[26rpx] text-[#606266] leading-36rpx">{{ sevenDay.minimum_time }}小时起订</view>
<view class="flex items-center">
<view class="text-[28rpx] text-[#909399] leading-40rpx w-430rpx line-1 text-right">
<template v-if="reserveTime.length > 0">
{{ reserveTime[0] }} {{ reserveTime[1].join(',') }}
</template>
<template v-else>
请选择
</template>
</view>
<view>
<wd-icon name="chevron-right" size="32rpx" color="#909399"></wd-icon>
</view>
</view>
</view>
</view>
<!-- 优惠券 -->
<view class="bg-white rounded-16rpx py-26rpx px-30rpx mt-24rpx mx-30rpx" @click="ChooseRoomReserve.handleToCoupon(CouponType.Discount)">
<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">优惠券</view>
<view class="flex items-center">
<view class="text-[28rpx] text-[#909399] leading-40rpx">
3小时起订
<template v-if="selectedCoupon?.id > 0">
{{ selectedCoupon.name }}
</template>
<template v-else>
请选择
</template>
</view>
<view class="mt-4rpx">
<wd-icon name="chevron-right" size="22px" color="#909399"></wd-icon>
@ -58,74 +132,50 @@
</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 class="fixed left-0 right-0 bottom-0 z-2 bg-[#fff]" :style="{ height: '140rpx' }">
<view class="mt-12rpx w-full" >
<wd-gap height="2rpx" bgColor="#ECECEC"></wd-gap>
</view>
<view class="mt-22rpx flex justify-between items-center">
<view class="flex items-center ml-60rpx">
<view class="text-24rpx text-[#303133] leading-34rpx w-72rpx">合计：</view>
<view class="flex items-center h-56rpx mr-16rpx">
<price-format color="#FF5951" :first-size="40" :second-size="40" :subscript-size="28" :price="bill.total"></price-format>
</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 class="flex items-center text-[#4C9F44]" @click="showCostPopup = true">
<view class="text-24rpx mr-10rpx">费用明细</view>
<wd-icon :name="showCostPopup ? 'arrow-up' : 'arrow-down'" size="24rpx" color="#4C9F44"></wd-icon>
</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 class="mr-30rpx">
<wd-button custom-class='!bg-[#4C9F44] !rounded-8rpx !h-70rpx' @click="ChooseRoomReserve.handleReserve">立即预定</wd-button>
</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'
import { useUserStore } from '@/store'
import type { IUserInfoVo } from '@/api/types/login'
import { getTeaRoomDetail } from '@/api/tea-room'
import { getNext7Days, getTeaRoomBalance, createTeaRoomOrder, getTeaRoomPackageDetail, calculateTeaRoomPrice } from '@/api/tea-room'
import type { ITeaSpecialistFuture7DaysResult } from '@/api/types/tea'
import { router, toTimes, toPlus, toMinus } from '@/utils/tools'
import { getUserInfo } from '@/api/user'
import { CouponType } from '@/utils/coupon'
import { ReserveServiceCategory, OrderType } from '@/utils/order'
const OSS = inject('OSS')
// 轮播图
const swiperList = ref<string[]>([
`${OSS}images/banner1.png`,
`${OSS}images/banner1.png`,
`${OSS}images/banner1.png`
])
const swiperList = ref<string[]>([])
const current = ref<number>(0)
const showBookTimePopup = ref<boolean>(false)
const html: string = '<p>这里是富文本内容，需要后台传递</p>'
@ -135,131 +185,220 @@
const storeType = ref<number>(1) // 1：直营 2：加盟
/* mescroll */
const { mescrollInit, downCallback } = useMescroll(onPageScroll, onReachBottom) // 调用mescroll的hook
// 费用明细相关
const showCostPopup = ref<boolean>(false) // 费用明细popup
const showPayPopup = ref<boolean>(false) // 支付popup
onLoad(() => {
// 用户信息
const userInfo = ref<IUserInfoVo>(null)
// 包间内容
const storeId = ref<number>(0) // 门店ID
const id = ref<number>(0) // id
const teaRoom = ref<any>({})
const teaRoomPrice = ref<number>(0)
// 团购优惠券ID
const groupCouponId = ref<number>(0)
const groupCoupon = ref<any>({})
const groupCouponHour = ref<number>(0) // 团购券可以抵消几个小时的时间
// 选择预定时间
const showBookTimePopup = ref<boolean>(false)
const sevenDay = reactive<ITeaSpecialistFuture7DaysResult>({
minimum_time: 0,
time: []
})
const reserveTime = ref<Array<any>>([])
// 选择的优惠券
const selectedCoupon = ref<{id: number, name: string}>({id: 0, name: ''})
// 计算费用明细 service(服务费) groupCoupon(团购优惠券)
const bill = ref<{service: any, groupCoupon: any, discount: number, totalDiscount: number, coupon: number, total: number}>({
service: {
total: 0,
unitPrice: 0,
num: 0,
startTime: 0,
endTime: 0,
dayTime: '',
startHour: '',
endHour: ''
},
groupCoupon: {
hour: 0,
total: 0
},
discount: 0,
totalDiscount: 0,
coupon: 0,
total: 0
})
// 门店余额
const storeMoney = ref<number>(0)
// 用户信息
const user = ref<any>(null)
onLoad((args) => {
storeId.value = Number(args.storeId)
id.value = Number(args.id)
teaRoomPrice.value = Number(args.price) || 0
groupCouponId.value = Number(args.groupCouponId) || 0
ChooseRoomReserve.handleInitReserveRoom()
// 获取用户需求详
getUserInfo().then(res => {
user.value = res
})
})
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); //追加新数据
const ChooseRoomReserve = {
/**
* 初始包间详情
*/
handleInitReserveRoom: async () => {
// 包间详情
const userStore = useUserStore()
userInfo.value = userStore.userInfo
const res = await getTeaRoomDetail({
id: storeId.value,
latitude: uni.getStorageSync('latitude'),
longitude: uni.getStorageSync('longitude'),
user_id: userInfo.value.id || 0
})
teaRoom.value = res.details
swiperList.value = teaRoom.value.img_arr
// console.log("🚀 ~ goods:", goods)
// 预定时间
const next7 = await getNext7Days()
Object.assign(sevenDay, next7)
// mescroll.endByPage(curPageData.length, res.totalPages); //必传参数(当前页的数据个数, 总页数)
// 获取门店余额
const balance = await getTeaRoomBalance({ store_id: storeId.value })
storeMoney.value = balance.data.money || 0
// }).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('收藏成功')
// 获取团购优惠券
const coupon = await getTeaRoomPackageDetail({ id: groupCouponId.value })
groupCoupon.value = coupon.details
},
// 打开客服弹窗
handleService: () => {
showServicePopup.value = true
},
/**
* 选中预定时间
*/
handleChooseReserveTime: (params: any) => {
reserveTime.value = params
// 处理菜单选择
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 // 替换为实际电话号码
})
const roomPrice = toTimes(teaRoomPrice.value, params[3])
const useGroupCouponPrice = toTimes(teaRoomPrice.value, groupCoupon.value.hour)
bill.value.service = {
total: roomPrice,
unitPrice: teaRoomPrice.value,
num: params[3],
startTime: params[2][0],
endTime: params[2][params[2].length - 1],
dayTime: params[0],
startHour: params[1][0],
endHour: params[1][params[1].length - 1]
}
showAction.value = false // 关闭菜单
ChooseRoomReserve.handleCalculateTeaRoomPrice()
},
// 处理导航逻辑
handleLocation: () => {
toast.info('正在导航...')
// 可以使用uni.navigateTo或其他方式打开地图应用
uni.navigateTo({
url: '/pages/map/map' // 假设有一个地图页面
/**
* 跳转优惠券页面
*/
handleToCoupon(type) {
if (reserveTime.value.length == 0) {
toast.info('请选择预定时间')
return
}
uni.$on('chooseCoupon', params => {
console.log("🚀 ~ params:", params)
uni.$off('chooseCoupon')
selectedCoupon.value = {id: params.coupon.user_coupon_id, name: `${params.coupon.name}减${params.coupon.coupon_price}` }
bill.value.coupon = params.coupon.coupon_price
ChooseRoomReserve.handleCalculateTeaRoomPrice()
})
// 获取预定了几个小时
const count = bill.value.service.num
router.navigateTo(`/bundle/coupon/coupon?id=${id.value}&numbers=${count}&type=${type}&storeId=${storeId.value}`)
},
// 处理拨打电话逻辑
handleCallPhone: () => {
chooseRoom.sheetMenuType = 'call'
showAction.value = true
sheetMenu.value = [
{
name: 15005837859,
value: ''
},
{
name: '呼叫',
value: 15005837859
}
]
},
/**
* 提交订单
*/
handleSubmitOrder: async () => {
// 只有预定茶室才会选择时间
if (bill.value.service.num == 0) {
toast.info('请选择预定时间')
return
}
// 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'
uni.showLoading({
title: '提交中...'
})
try {
let res = await createTeaRoomOrder({
store_id: storeId.value,
room_id: id.value,
day_time: bill.value.service.dayTime,
start_time: bill.value.service.startHour,
end_time: bill.value.service.endHour,
user_coupon_id: selectedCoupon.value.id || 0,
hours: bill.value.service.num,
group_coupon_id: groupCouponId.value
})
uni.hideLoading()
// 支付后的处理
uni.$on('payment', params => {
setTimeout(() => {
uni.$off("payment")
if (params.result) {
router.redirectTo(`/pages/notice/reserve?type=${OrderType.TeaRoomOrder}&orderId=${params.orderId}&isGroupBuying=0`)
} else {
router.redirectTo( `/bundle/order/tea-room/order-list?isGroupBuying=0`)
}
}, 1000)
})
setTimeout(() => {
router.navigateTo(
`/pages/cashier/cashier?from=${OrderType.TeaRoomOrder}&orderId=${res.id}&name=${teaRoom.value.name}&storeId=${storeId.value}&isGroupBuying=0`
)
}, 800)
} catch (error) {
uni.hideLoading()
toast.info('订单提交失败，请稍后重试')
return
}
},
/**
* 计算茶室价格
*/
handleCalculateTeaRoomPrice: async () => {
const res = await calculateTeaRoomPrice({
room_id: id.value,
coupon_id: selectedCoupon.value.id || 0,
group_id: bill.value.service.num > 0 ? groupCouponId.value : 0,
nums: bill.value.service.num,
})
bill.value.service.total = res.details.room_price // 茶室价格
bill.value.discount = res.details.discount_room_price // 茶室总价
bill.value.totalDiscount = res.details.discount_all_price // 总优惠
bill.value.total = res.details.order_amount // 订单金额
}
}
</script>

194
src/bundle/tea-room/choose-room.vue
View File

@ -28,48 +28,23 @@
</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>
<use-store :store="order.store"></use-store>
</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 @init="mescrollInit" @down="downCallback" :down="downOption" :up="upOption" @up="ChooseRoom.upCallback">
<room-list :is-reserve="true" :list="list" is-use-coupon @chooseCouponRoom="ChooseRoom.handleChooseCouponRoom"></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="text-32rpx leading-44rpx flex items-center justify-center leading-90rpx text-center" @click="ChooseRoom.handleToReserveCouponRoom">
<view class="w-630rpx h-90rpx bg-[#4C9F44] rounded-8rpx text-[#fff]">下一步</view>
</view>
</view>
@ -81,6 +56,12 @@
import useMescroll from "@/uni_modules/mescroll-uni/hooks/useMescroll.js"
import RoomList from '@/components/reserve/RoomList.vue'
import {toast} from '@/utils/toast'
import type { ITeaRoomPackageOrderDetailsResult } from '@/api/types/tea-room'
import { getTeaRoomPackageOrderDetail, getStoreTeaRoomList } from '@/api/tea-room'
import { TeaRoomPackageOrderStatusTextValue } from '@/utils/order'
import UseStore from '@/components/UseStore.vue'
import { router } from '@/utils/tools'
import { ReserveServiceCategory } from '@/utils/order'
const OSS = inject('OSS')
@ -94,54 +75,96 @@
const storeType = ref<number>(1) // 1：直营 2：加盟
/* 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>>([])
onLoad(() => {
// 订单
const teaRoomId = ref<number>(0)
const groupCouponId = ref<number>(0)
const orderStatus = ref<number>(0) // 订单状态：待使用、退款等
const order = ref<ITeaRoomPackageOrderDetailsResult>({
pay: 0,
pay_way_title: '',
order_amount: '',
order_sn: '',
order_status: 0,
dtime: '',
pay_dtime: '',
group: {
id: 0,
title: '',
img: '',
hour: '',
},
store: {
id: 0,
address: '',
latitude: '',
longitude: '',
name: '',
image: '',
contact_phone: '',
store_id: 0,
distance: '',
operation_type: 1
}
})
// 选择的包间
const couponRoomId = ref<number>(0)
const couponRoomPrice = ref<number>(0)
onLoad((args) => {
groupCouponId.value = args.groupCouponId
teaRoomId.value = Number(args.teaRoomId)
// 获取订单详情
ChooseRoom.handleInit()
})
const chooseRoom = {
const ChooseRoom = {
sheetMenuType: '', // 记录菜单类型
/**
* 获取订单详情
*/
handleInit: async () => {
const res = await getTeaRoomPackageOrderDetail({
id: groupCouponId.value,
latitude: uni.getStorageSync('latitude'),
longitude: uni.getStorageSync('longitude')
})
order.value = res.details
console.log("🚀 ~ order.value:", order.value)
orderStatus.value = order.value.order_status
},
// 上拉加载的回调: 其中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,
id: teaRoomId.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(); // 请求失败, 结束加载
// })
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() // 请求失败, 结束加载
})
},
// 收藏和取消收藏
@ -158,7 +181,7 @@
// 处理菜单选择
handleSelectMenu: (item: any) => {
console.log("🚀 ~ item:", item)
if (chooseRoom.sheetMenuType == 'service') {
if (ChooseRoom.sheetMenuType == 'service') {
// 处理客服相关的菜单项
if (item.value === 'saveImage') {
// 处理保存图片逻辑
@ -167,7 +190,7 @@
// 处理添加微信逻辑
toast.success('已添加门店微信')
}
} else if (chooseRoom.sheetMenuType == 'call' && item.index == 1) {
} else if (ChooseRoom.sheetMenuType == 'call' && item.index == 1) {
uni.makePhoneCall({
phoneNumber: item.value // 替换为实际电话号码
})
@ -187,7 +210,7 @@
// 处理拨打电话逻辑
handleCallPhone: () => {
chooseRoom.sheetMenuType = 'call'
ChooseRoom.sheetMenuType = 'call'
showAction.value = true
sheetMenu.value = [
{
@ -213,9 +236,28 @@
},
handleToRecharge: () => {
uni.navigateTo({
url: '/bundle/store-recharge/store-recharge'
})
router.navigateTo('/bundle/store-recharge/store-recharge')
},
/**
* 选择包间
* @param e 包间ID
*/
handleChooseCouponRoom: (itme: any) => {
couponRoomId.value = itme.id
couponRoomPrice.value = itme.price
},
/**
* 跳转预定使用优惠券包间页面
*/
handleToReserveCouponRoom: () => {
if (couponRoomId.value === 0) {
toast.info('请选择包间')
return
}
router.navigateTo(`/bundle/tea-room/choose-room-reserve?groupCouponId=${groupCouponId.value}&storeId=${teaRoomId.value}&id=${couponRoomId.value}&type=${ReserveServiceCategory.ReserveRoom}&price=${couponRoomPrice.value}`)
}
}
</script>

285
src/bundle/tea-room/detail.vue
View File

@ -33,11 +33,15 @@
</view>
<view class="flex justify-between items-center text-24rpx text-[#909399] leading-34rpx mt-16rpx">
<view>优惠券</view>
<view>-￥{{ bill.coupon }}</view>
<view>-￥{{ bill.coupon || 0 }}</view>
</view>
<view class="flex justify-between items-center text-24rpx text-[#909399] leading-34rpx mt-16rpx">
<view>团购券</view>
<view>-￥{{ bill.groupCoupon || 0 }}</view>
</view>
<view class="flex justify-between items-center text-24rpx text-[#909399] leading-34rpx mt-16rpx">
<view>会员八折</view>
<view>-￥{{ bill.discount }}</view>
<view>-￥{{ bill.discount || 0 }}</view>
</view>
</view>
@ -97,7 +101,7 @@
</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">{{ teaRoom.name }}</view>
<view class="font-bold text-36rpx text-[#303133] leading-50rpx">{{ isGroupBuying ? teaRoomPackage.title : teaRoom.name }}</view>
<view class="mt-14rpx flex" v-if="!isGroupBuying">
<template v-for="(label, labelIndex) in teaRoom.label" :key="labelIndex">
<view class="mr-20rpx flex items-start" v-if="label.category_id == 1">
@ -109,7 +113,7 @@
</template>
</view>
<view class="flex justify-between items-center" :class="`${ isGroupBuying ? 'mt-24rpx' : ''}`">
<view class="text-[#303133] text-26rpx leading-48rpx font-500" v-if="isGroupBuying">“环境幽静，谈商务放松好场所”</view>
<view class="text-[#303133] text-26rpx leading-48rpx font-500" v-if="isGroupBuying">{{ teaRoomPackage.introduce }}</view>
<!-- <view class="text-[#6A6363] flex-1 text-22rpx leading-32rpx text-right">已售 10+</view> -->
</view>
<view v-if="isGroupBuying">
@ -117,14 +121,15 @@
<wd-gap height="2rpx" bgColor="#F6F7F9"></wd-gap>
</view>
<view class="text-[#303133] text-28rpx leading-48rpx">
<view>
<rich-text :nodes="teaRoomPackage.details"></rich-text>
<!-- <view>
<text class="font-bold mr-26rpx">须知</text>
<text class="font-500">需预约</text>
<text class="font-500">{{ teaRoomPackage.details }}</text>
</view>
<view class="mt-22rpx">
<text class="font-bold mr-26rpx">保障</text>
<text class="font-500">随时退</text>
</view>
</view> -->
</view>
</view>
</view>
@ -142,22 +147,22 @@
<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">{{ sevenDay.minimum_time }}小时起订</view>
<view class="flex items-center">
<view class="text-[28rpx] text-[#909399] leading-40rpx w-430rpx line-1 text-right">
<template v-if="reserveTime.length > 0">
{{ reserveTime[0] }} {{ reserveTime[1].join(',') }}
</template>
<template v-else>
请选择
</template>
</view>
<view>
<wd-icon name="chevron-right" size="32rpx" color="#909399"></wd-icon>
<view class="text-[26rpx] text-[#606266] leading-36rpx">{{ sevenDay.minimum_time }}小时起订</view>
<view class="flex items-center">
<view class="text-[28rpx] text-[#909399] leading-40rpx w-430rpx line-1 text-right">
<template v-if="reserveTime.length > 0">
{{ reserveTime[0] }} {{ reserveTime[1].join(',') }}
</template>
<template v-else>
请选择
</template>
</view>
<view>
<wd-icon name="chevron-right" size="32rpx" color="#909399"></wd-icon>
</view>
</view>
</view>
</view>
</view>
<!-- 优惠券 -->
<view class="bg-white rounded-16rpx py-26rpx px-30rpx mt-24rpx mx-30rpx" @click="Detail.handleToCoupon(CouponType.Discount)">
@ -181,14 +186,14 @@
</view>
<!-- 团购券 -->
<view class="bg-white rounded-16rpx py-26rpx px-30rpx mt-24rpx mx-30rpx" @click="Detail.handleToCoupon(CouponType.Discount)">
<view class="bg-white rounded-16rpx py-26rpx px-30rpx mt-24rpx mx-30rpx" @click="Detail.handleToCoupon(CouponType.GroupBuy)">
<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">团购券</view>
<view class="flex items-center">
<view class="text-[28rpx] text-[#909399] leading-40rpx">
<template v-if="selectedCoupon?.id > 0">
{{ selectedCoupon.name }}
<template v-if="selectedGroupCoupon?.id > 0">
{{ selectedGroupCoupon.name }}
</template>
<template v-else>
请选择
@ -200,27 +205,6 @@
</view>
</view>
</view>
<!-- 支付方式 -->
<!-- <view class="bg-white rounded-16rpx py-40rpx px-30rpx mt-24rpx mx-30rpx pay">
<view>
<pay @pay="Detail.handleGetPayValue" :storeMoney="storeMoney"></pay>
</view>
<view class="mt-40rpx mb-30rpx">
<wd-gap height="2rpx" bgColor='#F6F7F9'></wd-gap>
</view>
<view class="flex justify-between items-center" @click="Detail.handleToCoupon(CouponType.GroupBuy)">
<view class="text-30rpx text-[#303133] leading-42rpx">更多支付（团购券）</view>
<view class="flex items-center">
<view class="text-[#4C9F44] text-28rpx leading-40rpx mr-32rpx">1张可用</view>
<view class="mt-4rpx">
<wd-icon name="chevron-right" size="22px" color="#909399"></wd-icon>
</view>
</view>
</view>
</view> -->
</view>
<view v-if="isGroupBuying">
@ -228,7 +212,7 @@
<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>
<rich-text :nodes="teaRoomPackage.introduce_details"></rich-text>
</view>
</view>
@ -236,7 +220,7 @@
<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>
<rich-text :nodes="teaRoomPackage.buy_details"></rich-text>
</view>
</view>
</view>
@ -250,9 +234,9 @@
<view class="flex items-center ml-60rpx">
<view class="text-24rpx text-[#303133] leading-34rpx w-72rpx" v-if="!isGroupBuying">合计：</view>
<view class="flex items-center h-56rpx mr-16rpx">
<price-format color="#FF5951" :first-size="40" :second-size="40" :subscript-size="28" :price="bill.total"></price-format>
<price-format color="#FF5951" :first-size="40" :second-size="40" :subscript-size="28" :price="isGroupBuying ? teaRoomPackage.discount_price : bill.total"></price-format>
<view class="ml-20rpx" v-if="isGroupBuying">
<price-format color="#909399" :first-size="26" :second-size="26" :subscript-size="26" :price="23.02" lineThrough></price-format>
<price-format color="#909399" :first-size="26" :second-size="26" :subscript-size="26" :price="teaRoomPackage.price" lineThrough></price-format>
</view>
</view>
<view class="flex items-center text-[#4C9F44]" v-if="!isGroupBuying" @click="showCostPopup = true">
@ -272,14 +256,13 @@
<script lang="ts" setup>
import {toast} from '@/utils/toast'
import { ReserveServiceCategory, OrderType } from '@/utils/order'
import type { ITeaSpecialistDetailsFields, ITeaSpecialistFuture7DaysResult, ITeaTypeListResult } from '@/api/types/tea'
import type { ITeaSpecialistFuture7DaysResult } from '@/api/types/tea'
import { getNext7Days, getTeaRoomBalance, createTeaRoomOrder } from '@/api/tea-room'
import { CouponType } from '@/utils/coupon'
import { router, toTimes, toPlus, toMinus } from '@/utils/tools'
import type {IUserInfoVo } from '@/api/types/login'
import type { IUserInfoVo } from '@/api/types/login'
import { useUserStore } from '@/store'
import { getTeaRoomDetail, collectTeaRoom, getStoreTeaRoomList } from '@/api/tea-room'
import Pay from '@/components/Pay.vue'
import { getTeaRoomDetail, createTeaRoomPackageOrder, getTeaRoomPackageDetail, calculateTeaRoomPrice } from '@/api/tea-room'
import PriceFormat from '@/components/PriceFormat.vue'
import BookingTime from '@/components/BookingTime.vue'
import { getUserInfo } from '@/api/user'
@ -292,7 +275,7 @@
const swiperList = ref<string[]>([])
const current = ref<number>(0)
const html: string = '<p>这里是富文本内容，需要后台传递</p>'
const isGroupBuying: boolean = false // 是否是团购套餐
const isGroupBuying = ref<boolean>(false)// 是否是团购套餐
const pay = ref<number>(1) // 支付方式
const payList = ref<Array<any>>([
{
@ -326,8 +309,8 @@
})
const reserveTime = ref<Array<any>>([])
// 计算费用明细 service(服务费) travel(车马费) teaServiceFee(茶艺服务) coupon(优惠券) discount(会员优惠) totalDiscount(总优惠) total(总费用)
const bill = ref<{service: any, travel: any, teaService: any, discount:number, totalDiscount: number, coupon: number, total: number}>({
// 计算费用明细 service(服务费) coupon(优惠券) discount(会员优惠) totalDiscount(总优惠) total(总费用) groupCoupon(团购券)
const bill = ref<{service: any, discount:number, totalDiscount: number, coupon: number, groupCoupon: number, total: number}>({
service: {
total: 0,
unitPrice: 0,
@ -338,35 +321,20 @@
startHour: '',
endHour: ''
},
travel: {
total: 0,
unitPrice: 0,
num: 0
},
teaService: {
total: 0,
tea: '',
teaTotal: 0,
cup: 0,
peopleNum: 0
},
discount: 0,
totalDiscount: 0,
coupon: 0,
groupCoupon: 0,
total: 0
})
// 预定时间相关
const showReservePopup = ref<boolean>(false) // 预定时间popup
const totalHour = ref<number>(0)
// 费用明细相关
const showCostPopup = ref<boolean>(false) // 费用明细popup
const showPayPopup = ref<boolean>(false) // 支付popup
// 包间内容
const storeId = ref<number>(0) // 门店ID
const teaRoomId = ref<number>(0) // 包间ID
const id = ref<number>(0) // id
const teaRoom = ref<any>({})
const teaRoomPrice = ref<number>(0)
@ -375,21 +343,25 @@
// 选择的优惠券
const selectedCoupon = ref<{id: number, name: string}>({id: 0, name: ''})
const selectedGroupCoupon = ref<{id: number, name: string}>({id: 0, name: ''})
// 用户信息
const user = ref<any>(null)
// 套餐
const teaRoomPackage = ref<any>({})
onLoad((args) => {
storeId.value = Number(args.storeId)
teaRoomId.value = Number(args.roomId)
id.value = Number(args.id)
teaRoomPrice.value = Number(args.price) || 0
Detail.handleInit()
if (args.type == ReserveServiceCategory.GroupBuying) {
// TODO 如果是团购套餐则直接微信支付？
isGroupBuying.value = true
pay.value = 3
// console.log("🚀 ~ pay.value:", pay.value)
Detail.handleInitGroupBuying()
}
Detail.handleInitReserveRoom()
// 获取用户需求详
getUserInfo().then(res => {
@ -401,7 +373,7 @@
/**
* 初始包间详情
*/
handleInit: async () => {
handleInitReserveRoom: async () => {
// 包间详情
const userStore = useUserStore()
userInfo.value = userStore.userInfo
@ -424,42 +396,24 @@
storeMoney.value = balance.data.money || 0
},
// 跳转优惠券页面
handleToCoupon(type) {
// 1：优惠券 2：团购券
if (type === CouponType.Discount) {
if (reserveTime.value.length == 0) {
toast.info('请选择预定时间')
return
}
uni.$on('chooseCoupon', params => {
uni.$off('chooseCoupon')
selectedCoupon.value = {id: params.coupon.user_coupon_id, name: `${params.coupon.name}减${params.coupon.coupon_price}` }
bill.value.coupon = params.coupon.coupon_price
bill.value.totalDiscount = Number(toPlus(bill.value.discount, params.coupon.coupon_price))
})
// 获取预定了几个小时
const count = reserveTime.value[1].length
router.navigateTo(`/bundle/coupon/coupon?id=${teaRoomId.value}&numbers=${count}&type=${type}`)
}
/*
* 初始化套餐详情
*/
handleInitGroupBuying: async () => {
const res = await getTeaRoomPackageDetail({ id: id.value })
teaRoomPackage.value = res.details
},
handlePay: () => {
// 这里需要判断下如果是预约的话，跳转结果通知是reserve的，团购是pay的
// uni.navigateTo({ url: '/bundle/reserve-room/result' })
},
// 选中预定时间
/**
* 选中预定时间
*/
handleChooseReserveTime: (params: any) => {
reserveTime.value = params
bill.value.service = {
total: toTimes(teaRoomPrice.value, params[1].length),
unitPrice: teaRoomPrice.value,
num: params[1].length,
total: 0,
unitPrice: 0,
num: params[3],
startTime: params[2][0],
endTime: params[2][params[2].length - 1],
dayTime: params[0],
@ -467,10 +421,36 @@
endHour: params[1][params[1].length - 1]
}
// TODO 这里需要判断是否开通VIP享受八折
if (user.value.member == 1) {
bill.value.discount = Number(toMinus(bill.value.service.total, (bill.value.service.total * 0.8).toFixed(2)))
Detail.handleCalculateTeaRoomPrice()
},
/**
* 跳转优惠券页面
*/
handleToCoupon(type) {
if (reserveTime.value.length == 0) {
toast.info('请选择预定时间')
return
}
uni.$on('chooseCoupon', params => {
console.log("🚀 ~ params:", params)
uni.$off('chooseCoupon')
if (type === CouponType.Discount) {
selectedCoupon.value = {id: params.coupon.user_coupon_id, name: `${params.coupon.name}减${params.coupon.coupon_price}` }
bill.value.coupon = params.coupon.coupon_price
} else {
selectedGroupCoupon.value = {id: params.coupon.group_id, name: `团购券-${params.coupon.tea_store_group.title}` }
console.log("🚀 ~ selectedGroupCoupon.value:", selectedGroupCoupon.value.name)
bill.value.groupCoupon = params.coupon.coupon_price
}
Detail.handleCalculateTeaRoomPrice()
})
// 获取预定了几个小时
const count = bill.value.service.num
router.navigateTo(`/bundle/coupon/coupon?id=${id.value}&numbers=${count}&type=${type}&storeId=${storeId.value}`)
},
// 选择支付方式
@ -482,74 +462,87 @@
* 提交订单
*/
handleSubmitOrder: async () => {
if (reserveTime.value.length == 0) {
// 只有预定茶室才会选择时间
if (!isGroupBuying.value && bill.value.service.num == 0) {
toast.info('请选择预定时间')
return
}
const params = {
store_id: storeId.value,
room_id: teaRoomId.value,
day_time: bill.value.service.dayTime,
start_time: bill.value.service.startHour,
end_time: bill.value.service.endHour,
user_coupon_id: selectedCoupon.value.id || 0,
hours: bill.value.service.num
}
uni.showLoading({
title: '提交中...'
})
try {
const res = await createTeaRoomOrder(params)
let res: any = null
if (isGroupBuying.value) {
res = await createTeaRoomPackageOrder({
group_id: id.value
})
} else {
res = await createTeaRoomOrder({
store_id: storeId.value,
room_id: id.value,
day_time: bill.value.service.dayTime,
start_time: bill.value.service.startHour,
end_time: bill.value.service.endHour,
user_coupon_id: selectedCoupon.value.id || 0,
hours: bill.value.service.num,
group_coupon_id: selectedGroupCoupon.value.id || 0
})
}
uni.hideLoading()
// 支付后的处理
uni.$on('payment', params => {
console.log("🚀 ~ params:", params)
setTimeout(() => {
uni.$off("payment")
if (params.result) {
uni.redirectTo({
url: `/pages/notice/reserve?type=room&orderId=${params.orderId}`
url: `/pages/notice/reserve?type=${OrderType.TeaRoomOrder}&orderId=${params.orderId}&isGroupBuying=${isGroupBuying.value ? 1 : 0}`
})
} else {
uni.redirectTo({
url: '/bundle/order/tea-room/order-list?orderStatus=all'
})
if (isGroupBuying.value) {
router.redirectTo(`/bundle/order/platform/order-list`)
} else {
router.redirectTo(`/bundle/order/tea-room/order-list?isGroupBuying=${isGroupBuying.value ? 1 : 0}`)
}
}
}, 1000)
})
setTimeout(() => {
router.navigateTo(`/pages/cashier/cashier?from=${OrderType.TeaRoomOrder}&orderId=${res.id}&teaRoomName=${teaRoom.value.name}&storeId=${storeId.value}`)
const name = isGroupBuying.value ? teaRoomPackage.value.title : teaRoom.value.name
router.navigateTo(
`/pages/cashier/cashier?from=${OrderType.TeaRoomOrder}&orderId=${res.id}&name=${name}&storeId=${storeId.value}&isGroupBuying=${isGroupBuying.value ? 1 : 0}`
)
}, 800)
} catch (error) {
uni.hideLoading()
toast.info('订单提交失败，请稍后重试')
return
}
},
/**
* 计算茶室价格
*/
handleCalculateTeaRoomPrice: async () => {
const res = await calculateTeaRoomPrice({
room_id: id.value,
coupon_id: selectedCoupon.value.id || 0,
group_id: selectedGroupCoupon.value.id,
nums: bill.value.service.num,
})
bill.value.service.total = res.details.room_price // 茶室价格
bill.value.discount = res.details.discount_room_price // 茶室总价
bill.value.totalDiscount = res.details.discount_all_price // 总优惠
bill.value.groupCoupon = res.details.group_price // 总优惠
bill.value.total = res.details.order_amount // 订单金额
}
}
const billTotal = computed(() => {
const s = Number(bill.value.service.total) || 0
const t = Number(bill.value.travel.total) || 0
const ts = Number(bill.value.teaService.total) || 0
let total = Number(toPlus(s, t, ts))
total = Number(toMinus(total, bill.value.discount))
if (bill.value.coupon > 0 ) {
total + bill.value.coupon
return Number(toMinus(total, bill.value.coupon))
}
return total
})
watch(billTotal, (val) => {
bill.value.total = val
})
</script>
<style lang="scss">

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

@ -81,25 +81,13 @@
</view>
<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">
<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" :store-type="storeType"></room-list>
</mescroll-body>
</view> -->
</wd-tab>
<wd-tab title="茶室预定" v-if="storeType != 2"></wd-tab>
<wd-tab title="团购套餐"></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>
<room-list :is-reserve="tabIndexs === 0" :is-group-buying="tabIndexs === 1" :list="list"></room-list>
</mescroll-body>
</view>
</view>
@ -125,11 +113,12 @@
import RechargeBtn from '@/components/RechargeBtn.vue'
import RoomList from '@/components/reserve/RoomList.vue'
import {toast} from '@/utils/toast'
import { getTeaRoomDetail, collectTeaRoom, getStoreTeaRoomList } from '@/api/tea-room'
import { getTeaRoomDetail, collectTeaRoom, getStoreTeaRoomList, getTeaRoomPackage } 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'
import { StoreType } from '@/utils/tea'
const rightPadding = inject('capsuleOffset')
const OSS = inject('OSS')
@ -156,8 +145,7 @@
const sheetMenu = ref([])
const showServicePopup = ref<boolean>(false)
// 店铺类型 1：直营 2：加盟
const storeType = ref<number>(1)
const storeType = ref<number>(StoreType.Direct)
// 分页
const { mescrollInit, downCallback, getMescroll } = useMescroll(onPageScroll, onReachBottom) // 调用mescroll的hook
@ -175,6 +163,12 @@
console.log("🚀 ~ args:", uni.getStorageSync('latitude'), uni.getStorageSync('longitude'))
if (args.id) {
teaRoomId.value = Number(args.id)
storeType.value = Number(args.type) || StoreType.Direct
// 如果是加盟店铺则显示团购套餐TAB
if (storeType.value === StoreType.Franchise) {
tabIndexs.value = 1
}
Room.handleInit()
}
})
@ -188,12 +182,13 @@
*/
upCallback: (mescroll) => {
const filter = {
page: mescroll.num,
size: mescroll.size,
page: mescroll.num,
size: mescroll.size,
id: teaRoomId.value
}
if (tabIndexs.value === 0) {
// 如果是直营店铺且是茶室预定
if (tabIndexs.value === 0 && storeType.value === StoreType.Direct) {
getStoreTeaRoomList(filter).then( res => {
console.log("🚀 ~ res:", res)
const curPageData = res.list || [] // 当前页数据
@ -205,8 +200,15 @@
})
} else {
// 处理团购套餐列表
getTeaRoomPackage(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() // 请求失败, 结束加载
})
}
},
/**