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

2
src/bundle/collect/collect.vue
View File

@ -1,6 +1,6 @@
<route lang="jsonc" type="page">
{
// "needLogin": true,
"needLogin": true,
"layout": "default",
"style": {
"navigationStyle": "custom"

78
src/bundle/coupon/coupon.vue
View File

@ -1,5 +1,6 @@
<route lang="jsonc" type="page">
{
"needLogin": true,
"layout": "default",
"style": {
"navigationStyle": "custom"
@ -15,24 +16,24 @@
<view>
<view class="mt-30rpx">
<view v-if="couponType == 1">
<view v-if="couponType == 1">
<!-- 优惠券 -->
<view class="mx-30rpx">
<view class="mx30rpx">
<text class="text-[#303133] font-bold text-30rpx leading-42rpx">可用优惠券</text>
<text class="text-[#606266] font-400 text-28rpx leading-40rpx ml-24rpx">2张</text>
<text class="text-[#606266] font-400 text-28rpx leading-40rpx ml-24rpx">{{ couponList.no_use.length }}张</text>
</view>
<view class="mt-28rpx radio">
<wd-radio-group v-model="checkedId" size="large" checked-color="#4C9F44">
<coupon
v-for="(item, index) in couponList"
v-for="(item, index) in couponList.use"
:key="item.id"
:coupon="item"
canUse
showChecked
:checked="item.id === checkedId"
:onCheck="coupons.handleCheck"
:class="index !== couponList.length - 1 ? 'mb-20rpx' : ''"
:onCheck="Coupons.handleCheck"
:class="index !== couponList.use.length - 1 ? 'mb-20rpx' : ''"
></coupon>
</wd-radio-group>
</view>
@ -40,19 +41,19 @@
<view class="mx-30rpx">
<view class="mx30rpx">
<text class="text-[#303133] font-bold text-30rpx leading-42rpx">不可用优惠券</text>
<text class="text-[#606266] font-400 text-28rpx leading-40rpx ml-24rpx">2张</text>
<text class="text-[#606266] font-400 text-28rpx leading-40rpx ml-24rpx">{{ couponList.no_use.length }}张</text>
</view>
<view class="mt-28rpx radio">
<wd-radio-group v-model="checkedId" size="large" checked-color="#4C9F44">
<coupon
v-for="(item, index) in unCouponList"
v-for="(item, index) in couponList.no_use"
:key="item.id"
:coupon="item"
:canUse="false"
showChecked
:checked="item.id === checkedId"
:onCheck="coupons.handleCheck"
:class="index !== couponList.length - 1 ? 'mb-20rpx' : ''"
:onCheck="Coupons.handleCheck"
:class="index !== couponList.no_use.length - 1 ? 'mb-20rpx' : ''"
></coupon>
</wd-radio-group>
</view>
@ -74,7 +75,7 @@
:coupon="item"
canUse
:checked="item.id === checkedId"
:onCheck="coupons.handleCheck"
:onCheck="Coupons.handleCheck"
:class="index !== couponList.length - 1 ? 'mb-20rpx' : ''"
></group-coupon>
</wd-radio-group>
@ -93,7 +94,7 @@
:coupon="item"
:canUse="false"
:checked="item.id === checkedId"
:onCheck="coupons.handleCheck"
:onCheck="Coupons.handleCheck"
:class="index !== couponList.length - 1 ? 'mb-20rpx' : ''"
></group-coupon>
</wd-radio-group>
@ -104,26 +105,27 @@
</view>
<view class="fixed left-0 right-0 bottom-0 z-2 bg-[#fff] flex justify-between items-center" :style="{ height: '140rpx'}">
<view class="ml-60rpx text-[#121212] text-24rpx leading-34rpx">已选择1张</view>
<view class="ml-60rpx text-[#121212] text-24rpx leading-34rpx">已选择{{ checkedId ? 1 : 0 }}张</view>
<view class="mr-30rpx">
<wd-button custom-class='!bg-[#4C9F44] !rounded-8rpx !h-70rpx'>确定</wd-button>
<wd-button custom-class='!bg-[#4C9F44] !rounded-8rpx !h-70rpx' @click="Coupons.handleConfirmCoupon">确定</wd-button>
</view>
</view>
</view>
</template>
<script lang="ts" setup>
import {ref} from 'vue'
import Coupon from '@/components/coupon/Coupon.vue'
import GroupCoupon from '@/components/coupon/GroupCoupon.vue'
import { getCoupons } from '@/api/user'
import type { IUserCouponListResult } from '@/api/types/user'
import { router } from '@/utils/tools'
const couponType = ref<number>(2) // couponType 1:优惠券 2:团购券
const OSS = inject('OSS')
const couponList = ref([
{ id: 1, amount: 20, limit: 100, expire: '2024.08.20' },
{ id: 2, amount: 10, limit: 50, expire: '2024.08.25' }
])
const couponList = ref<IUserCouponListResult>({
no_use: [],
use: []
})
const checkedId = ref<number>(0)
const unCouponList = ref([
@ -131,16 +133,46 @@
{ id: 2, amount: 10, limit: 50, expire: '2024.08.25' }
])
const teaRoomId = ref<number>(0) // 包间ID
onLoad((args) => {
if (args.type) {
couponType.value = args.type
teaRoomId.value = args.id
couponType.value = args.type // 1:优惠券 2:团购券
// 初始化优惠券数据
if (args.id && args.numbers && args.type == 1) {
// 获取到包间ID和预定了几个小时
Coupons.handleInitCoupon(args.id, args.numbers)
}
})
const coupons = {
const Coupons = {
/**
* 初始化优惠券列表
* @param id 包间ID
* @param numbers 预定时长
*/
handleInitCoupon: async (id: number, numbers: number) => {
const res = await getCoupons({id, numbers, type_id: 2})
couponList.value = res
},
/**
* 选择优惠券
* @param id 优惠券ID
*/
handleCheck: (id: number) => {
checkedId.value = id
console.log("🚀 ~ checkedId.value :", checkedId.value )
},
/**
* 确认选择优惠券
*/
handleConfirmCoupon: () => {
const coupon = couponList.value.use.find(item => item.user_coupon_id === checkedId.value)
uni.$emit('chooseCoupon', { coupon })
router.navigateBack()
}
}
</script>

90
src/bundle/coupon/my-coupon.vue
View File

@ -1,6 +1,6 @@
<route lang="jsonc" type="page">
{
// "needLogin": true,
"needLogin": true,
"layout": "default",
"style": {
"navigationStyle": "custom"
@ -10,21 +10,21 @@
<template>
<view class="pb-180rpx">
<view>
<view>
<navbar title="优惠券" custom-class='!bg-[#F6F7F8]'></navbar>
</view>
<view>
<view class="coupon-tab">
<wd-tabs v-model="tab" swipeable slidable="always" @click="myCoupon.handleChangeTab" :lazy="false">
<wd-tabs v-model="tab" swipeable slidable="always" @click="MyCoupon.handleChangeTab" :lazy="false">
<wd-tab title="茶室优惠券">
<view class="mx-30rpx">
<view class="flex">
<view v-for="(item, index) in tag" :key="index"
@click="myCoupon.handleChangeTag(item)"
@click="MyCoupon.handleChangeTag(item.value)"
class="font-400 text-28rpx leading-40rpx w-116rpx h-64rpx flex justify-center items-center border-2rpx border-solid rounded-12rpx mr-20rpx"
:class="item === currentTag ? ' border-[#4C9F44] bg-[#F0F6EF] text-[#4C9F44]' : 'border-[#fff] bg-[#fff]'">
{{ item }}
:class="item.value === currentTag ? ' border-[#4C9F44] bg-[#F0F6EF] text-[#4C9F44]' : 'border-[#fff] bg-[#fff]'">
{{ item.label }}
</view>
</view>
@ -36,7 +36,7 @@
canUse
:showChecked="false"
:checked="item.id === checkedId"
:onCheck="myCoupon.handleCouponCheck"
:onCheck="MyCoupon.handleCouponCheck"
:class="index !== couponList.length - 1 ? 'mb-20rpx' : ''"
></coupon>
</view>
@ -46,10 +46,10 @@
<view class="mx-30rpx">
<view class="flex">
<view v-for="(item, index) in tag" :key="index"
@click="myCoupon.handleChangeTag(item)"
@click="MyCoupon.handleChangeTag(item.value)"
class="font-400 text-28rpx leading-40rpx w-116rpx h-64rpx flex justify-center items-center border-2rpx border-solid rounded-12rpx mr-20rpx"
:class="item === currentTag ? ' border-[#4C9F44] bg-[#F0F6EF] text-[#4C9F44]' : 'border-[#fff] bg-[#fff]'">
{{ item }}
:class="item.value === currentTag ? ' border-[#4C9F44] bg-[#F0F6EF] text-[#4C9F44]' : 'border-[#fff] bg-[#fff]'">
{{ item.label }}
</view>
</view>
@ -61,7 +61,7 @@
canUse
:showChecked="false"
:checked="item.id === checkedId"
:onCheck="myCoupon.handleCouponCheck"
:onCheck="MyCoupon.handleCouponCheck"
:class="index !== couponList.length - 1 ? 'mb-20rpx' : ''"
></coupon>
</view>
@ -77,19 +77,22 @@
import {ref} from 'vue'
import Coupon from '@/components/coupon/Coupon.vue'
import GroupCoupon from '@/components/coupon/GroupCoupon.vue'
import { getMyCoupons } from '@/api/user'
//
const tab = ref<number>(0)
const tag = ref<Array<string>>(['全部', '快过期', '已使用'])
const currentTag = ref<string>('全部')
const tag = ref<Array<any>>([
{label: '全部', value: 0 },
{label: '已使用', value: 1 },
{label: '快过期', value: 3 },
])
const currentTab = ref<number>(0)
const currentTag = ref<number>(0)
const couponType = ref<number>(2) // couponType 1:优惠券 2:团购券
const OSS = inject('OSS')
const couponList = ref([
{ id: 1, amount: 20, limit: 100, expire: '2024.08.20' },
{ id: 2, amount: 10, limit: 50, expire: '2024.08.25' }
])
const couponList = ref<any[]>([])
const checkedId = ref<number>(0)
const unCouponList = ref([
@ -101,22 +104,57 @@
if (args.type) {
couponType.value = args.type
}
MyCoupon.handleInit()
})
const myCoupon = {
// 切换tab
handleChangeTab: (index: number) => {
tab.value = index
currentTag.value = '全部'
const MyCoupon = {
/**
* 初始化优惠券列表
*/
handleInit: async () => {
const res: any = await getMyCoupons({status: currentTag.value, type_id: currentTab.value == 0 ? 2 : 1})
if (Array.isArray(res)) {
res.map((res) => {
couponList.value.push({
id: res.coupon_id,
coupon_price: res.userCouponType[0].coupon_price,
use_price: res.userCouponType[0].use_price,
title: res.userCouponType[0].title,
effect_time: res.userCouponType[0].effect_time,
user_coupon_id: res.coupon_id,
expire: res.expire
})
})
}
},
// 切换tag
handleChangeTag: (item: string) => {
/**
* 切换tab
* @param item 切换项
*/
handleChangeTab: (item: {index: number}) => {
currentTab.value = item.index
currentTag.value = 0
couponList.value = []
MyCoupon.handleInit()
},
/**
* 切换tag
* @param item 切换项
*/
handleChangeTag: (item: number) => {
currentTag.value = item
console.log("🚀 ~ currentTag.value :", currentTag.value )
couponList.value = []
MyCoupon.handleInit()
},
// 选择优惠券-保留这个函数，暂时用不着
/**
* 选择优惠券-保留这个函数，暂时用不着
* @param id 切换项
*/
handleCouponCheck: (id: number) => {
checkedId.value = id
}

1
src/bundle/order/platform/order-list.vue
View File

@ -1,4 +1,5 @@
<route lang="jsonc" type="page">{
"needLogin": true,
"layout": "default",
"style": {
"navigationStyle": "custom"

145
src/bundle/order/tea-room/order-list.vue
View File

@ -9,7 +9,7 @@
<template>
<view class="">
<view class="order-list sticky top-0 left-0 z-50 bg-[#F6F7F8] pb-10rpx">
<wd-navbar safeAreaInsetTop custom-class='!bg-[#F6F7F8]' :bordered="false" placeholder @click-left="OrderList.handleBack">
<wd-navbar safeAreaInsetTop custom-class='!bg-[#F6F7F8]' :bordered="false" placeholder @click-left="router.navigateBack">
<template #left>
<view class="h-48rpx flex items-center">
<view class="mt-4rpx">
@ -23,41 +23,18 @@
</wd-navbar>
<view class="tabs">
<wd-tabs v-model="tab" swipeable slidable="always" :lazy="false" @click="OrderList.handleChangeTabs">
<wd-tab title="全部" name="all"></wd-tab>
<wd-tab title="待付款" :name="OrderStatus.Pending"></wd-tab>
<wd-tab title="预约单" :name="OrderStatus.Reserved"></wd-tab>
<wd-tab title="已完结" :name="OrderStatus.Finished"></wd-tab>
<wd-tab title="全部" :name="TeaRoomOrderStatusText.All"></wd-tab>
<wd-tab title="待付款" :name="TeaRoomOrderStatusText.Pending"></wd-tab>
<wd-tab title="预约单" :name="TeaRoomOrderStatusText.Pay"></wd-tab>
<wd-tab title="已完结" :name="TeaRoomOrderStatusText.Finished"></wd-tab>
</wd-tabs>
</view>
</view>
<view class="tabs mt-18rpx mx-30rpx">
<!-- 这里可以尝试下不重新刷新获取列表 -->
<!-- 全部 -->
<mescroll-body ref="mescrollItem0" @init="mescrollInit" @down="downCallback" @up="OrderList.upCallback" v-if="tab === 'all'">
<view class="mb-20rpx" v-for="(item, index) in 10" :key="index">
<combo-card :type="OrderSource.TeaRoom" :order-status="OrderStatus.Pending"></combo-card>
</view>
</mescroll-body>
<!-- 待付款 -->
<mescroll-body ref="mescrollItem1" @init="mescrollInit" @down="downCallback" @up="OrderList.upCallback" v-if="tab === OrderStatus.Pending">
<view class="mb-20rpx" v-for="(item, index) in 10" :key="index">
<combo-card :type="OrderSource.TeaRoom" :order-status="OrderStatus.Pending"></combo-card>
</view>
</mescroll-body>
<!-- 预约单 -->
<mescroll-body ref="mescrollItem2" @init="mescrollInit" @down="downCallback" @up="OrderList.upCallback" v-if="tab === OrderStatus.Reserved">
<view class="mb-20rpx" v-for="(item, index) in 10" :key="index">
<combo-card :type="OrderSource.TeaRoom" :order-status="OrderStatus.Pending"></combo-card>
</view>
</mescroll-body>
<!-- 已完结 -->
<mescroll-body ref="mescrollItem3" @init="mescrollInit" @down="downCallback" @up="OrderList.upCallback" v-if="tab === OrderStatus.Finished">
<view class="mb-20rpx" v-for="(item, index) in 10" :key="index">
<combo-card :type="OrderSource.TeaRoom" :order-status="OrderStatus.Pending"></combo-card>
<mescroll-body ref="mescrollItem0" @init="mescrollInit" @down="downCallback" @up="OrderList.upCallback" :down="downOption" :up="upOption">
<view class="mb-20rpx" v-for="(item, index) in list" :key="index">
<combo-card :type="OrderSource.TeaRoom" :order="item"></combo-card>
</view>
</mescroll-body>
</view>
@ -66,83 +43,85 @@
<script lang="ts" setup>
import { OrderSource, OrderStatus } from '@/utils/order'
import { OrderSource, OrderStatus, TeaRoomOrderStatusText, TeaRoomOrderStatusValue } from '@/utils/order'
import ComboCard from '@/components/order/ComboCard.vue'
import { onPageScroll, onReachBottom } from '@dcloudio/uni-app'
import useMescroll from "@/uni_modules/mescroll-uni/hooks/useMescroll.js"
import { getTeaRoomOrderList } from '@/api/tea-room'
import { router } from '@/utils/tools'
/* mescroll */
// mescroll
const { mescrollInit, downCallback, getMescroll } = useMescroll(onPageScroll, onReachBottom) // 调用mescroll的hook
// 店铺类型
// 搜索
const keywords = ref<string>('')
const downOption = {
auto: true
}
const upOption = {
auto: true,
textNoMore: '~ 已经到底啦 ~', //无更多数据的提示
}
const orderStatus = ref<string>('')
const list = ref<Array<any>>([]) // 茶室列表
const keywords = ref<string>('') // 搜索关键词
// tab
const tab = ref<string>('all')
onLoad((args) => {
uni.$on('refreshOrderList', () => {
list.value = []
getMescroll().resetUpScroll()
})
// 根据传过来的参数决定显示哪个tab
if (args.orderStatus) {
tab.value = args.orderStatus
}
})
onUnload(() => {
uni.$off('refreshOrderList')
})
const OrderList = {
// 上拉加载的回调: 其中num:当前页 从1开始, size:每页数据条数,默认10
/**
* 分页加载
* @param mescroll
*/
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,
order_status: orderStatus.value,
search: keywords.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(); // 请求失败, 结束加载
// })
getTeaRoomOrderList(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() // 请求失败, 结束加载
})
},
// 切换tab
/**
* 切换订单状态
* @param e
*/
handleChangeTabs: (e: {index: number, name: string}) => {
tab.value = e.name
},
if (e.name === TeaRoomOrderStatusText.Pending) {
orderStatus.value = '0'
} else {
orderStatus.value = TeaRoomOrderStatusValue[e.name] || ''
}
// 返回上一页
handleBack: () => {
uni.navigateBack({
delta: 1
})
},
// 切换tab时,重置当前的mescroll
list.value = []
getMescroll().resetUpScroll();
}
}
</script>

32
src/bundle/store-recharge/store-recharge.vue
View File

@ -10,7 +10,7 @@
<view>
<wd-navbar safeAreaInsetTop :bordered="false" custom-style="background-color: transparent;" :height="navbarHeight">
<template #left>
<view class="h-48rpx flex items-center" @click="storeRecharge.back">
<view class="h-48rpx flex items-center" @click="StoreRecharge.back">
<wd-img width="48rpx" height="48rpx" :src="`${OSS}icon/icon_arrow_left.png`" class="mt-6rpx"></wd-img>
<view class="text-[#303133] text-36rpx ml-24rpx leading-48rpx">充值</view>
</view>
@ -38,10 +38,10 @@
<view class="bg-white mt-28rpx rounded-16rpx px-38rpx mx-32rpx h-150rpx flex items-center">
<view class="text-[#303133] text-30rpx font-bold leading-42rpx">门店推广</view>
<view class="flex-1 bg-[#F8F9FA] text-[#9CA3AF] rounded-8rpx ml-28rpx h-80rpx leading-80rpx rounded-8rpx pl-28rpx">上海浦东新区茶室店铺</view>
<view class="flex-1 bg-[#F8F9FA] text-[#9CA3AF] rounded-8rpx ml-28rpx h-80rpx leading-80rpx rounded-8rpx pl-28rpx">{{ storeName }}</view>
</view>
<view @click="storeRecharge.handleRecharge" class="fixed left-0 right-0 bottom-0 z-50 mx-60rpx flex items-center justify-center bg-[#4C9F44] rounded-8rpx text-[#fff] text-30rpx font-bold" :style="{ height: '90rpx', bottom: 'calc(env(safe-area-inset-bottom) + 26rpx)', city: canRecharge ? 1 : 0.5 }">
<view @click="StoreRecharge.handleRecharge" class="fixed left-0 right-0 bottom-0 z-50 mx-60rpx flex items-center justify-center bg-[#4C9F44] rounded-8rpx text-[#fff] text-30rpx font-bold" :style="{ height: '90rpx', bottom: 'calc(env(safe-area-inset-bottom) + 26rpx)', city: canRecharge ? 1 : 0.5 }">
确定转入
</view>
</view>
@ -49,31 +49,29 @@
<script lang="ts" setup>
import { getNavBarHeight } from '@/utils/index'
import { toast } from '@/utils/toast'
import { router } from '@/utils/tools'
import { wxpay } from '@/hooks/usePay'
let navbarHeight = ref<number>(0)
let OSS = inject('OSS')
let rechargeMoney = ref<string>('')
let canRecharge = ref<boolean>(false)
onLoad(() => {
const storeId = ref<number>(0)
const storeName = ref<string>('')
onLoad((args) => {
navbarHeight.value = getNavBarHeight()
storeId.value = args.id
storeName.value = args.storeName
})
const storeRecharge = {
back: () => {
uni.navigateBack({
delta: 1,
})
},
const StoreRecharge = {
handleRecharge: () => {
if (rechargeMoney.value) {
// 这里可以添加充值逻辑
uni.showToast({
title: '充值成功',
icon: 'success'
})
storeRecharge.back()
} else {
uni.showToast({
title: '请输入充值金额',

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

@ -1,5 +1,6 @@
<!-- 使用 type="home" 属性设置首页，其他页面不需要设置，默认为page -->
<route lang="jsonc" type="page">{
"needLogin": true,
"layout": "tabbar",
"style": {
"navigationStyle": "custom"
@ -7,220 +8,6 @@
}</route>
<template>
<view class="pb-180rpx">
<view>
<navbar :title="isGroupBuying ? '团购套餐' : '预定'" custom-class='!bg-[#F6F7F8]'></navbar>
</view>
<view>
<view class="mt-20rpx mx-30rpx swiper">
<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">
<view class="mr-20rpx flex items-start">
<wd-tag color="#40AE36" bg-color="#40AE36" plain custom-class="!rounded-4rpx">文艺小清新</wd-tag>
</view>
<view class="flex items-start">
<wd-tag color="#F55726" bg-color="#F55726" plain>全息投影</wd-tag>
</view>
</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-[#6A6363] flex-1 text-22rpx leading-32rpx text-right">已售 10+</view>
</view>
<view v-if="isGroupBuying">
<view class="mt-20rpx mb-24rpx" >
<wd-gap height="2rpx" bgColor="#F6F7F9"></wd-gap>
</view>
<view class="text-[#303133] text-28rpx leading-48rpx">
<view>
<text class="font-bold mr-26rpx">须知</text>
<text class="font-500">需预约</text>
</view>
<view class="mt-22rpx">
<text class="font-bold mr-26rpx">保障</text>
<text class="font-500">随时退</text>
</view>
</view>
</view>
</view>
<view v-if="!isGroupBuying">
<!-- 使用说明 -->
<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="showReservePopup = 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">
{{ totalHour > 0 ? `${totalHour}小时` : '请选择' }}
</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 py-26rpx px-30rpx mt-24rpx mx-30rpx" @click="detail.handleToCoupon(1)">
<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">无可用</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 py-40rpx px-30rpx mt-24rpx mx-30rpx pay">
<view>
<wd-radio-group v-model="pay" shape="dot" checked-color="#4C9F44">
<view class="flex justify-between items-center mb-40rpx" v-for="(item, index) in payList" :key="index" @click="pay = item.id">
<view class="flex items-center">
<wd-img width="50rpx" height="50rpx" :src="item.icon"></wd-img>
<view class="ml-20rpx text-30rpx text-[#303133] leading-42rpx">{{ item.name }}</view>
</view>
<view class="flex items-center">
<wd-radio :value="item.value">
<view class="text-[#303133] text-26rpx leading-36rpx mr-20rpx">可用202.22</view>
</wd-radio>
</view>
</view>
</wd-radio-group>
</view>
<view class="mb-30rpx">
<wd-gap height="2rpx" bgColor='#F6F7F9'></wd-gap>
</view>
<view class="flex justify-between items-center" @click="detail.handleToCoupon(2)">
<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">
<!-- 套餐详情 -->
<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">
<view class="text-[#303133] text-32rpx leading-44rpx font-bold mb-24rpx">购买须知</view>
<view class="">
<rich-text :nodes="html"></rich-text>
</view>
</view>
</view>
<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>
<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" 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="23.02"></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>
</view>
</view>
<view class="flex items-center text-[#4C9F44]" v-if="!isGroupBuying" @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 class="mr-30rpx">
<wd-button custom-class='!bg-[#4C9F44] !rounded-8rpx !h-70rpx' @click='showPayPopup = true'>{{ isGroupBuying ? '立即购买' : '立即预定' }}</wd-button>
</view>
</view>
</view>
</view>
<!-- 预定时间 -->
<wd-popup v-model="showReservePopup" lock-scroll custom-style="border-radius: 32rpx 32rpx 0rpx 0rpx;" position="bottom">
<view class="relative">
<view class="absolute top-18rpx right-30rpx" @click="showReservePopup = 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 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]"
: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]'}`"
@click="currentTimePicker = 'end'">
<view class="text-28rpx leading-40rpx">结束时间</view>
<view class="text-26rpx leading-36rpx mt-2rpx">{{ endTimeLayout }}</view>
</view>
</view>
<view class="date-picker">
<view class="" v-if="currentTimePicker == 'start'">
<wd-datetime-picker-view
:minDate='minTimestamp'
:maxDate='maxTimestamp'
type="datetime"
v-model="startTimeValue"
:formatter="detail.handleFormatTime"
@change="detail.handleStartTimePicker"
/>
</view>
<view class="" v-if="currentTimePicker == 'end'">
<wd-datetime-picker-view
:minDate='minTimestamp'
:maxDate='maxTimestamp'
type="datetime"
v-model="endTimeValue"
:formatter="detail.handleFormatTime"
@change="detail.handleEndTimePicker"
/>
</view>
</view>
<view class="pb-22rpx mt-40rpx mx-30rpx flex justify-between items-center text-[32rpx] text-center">
<view class='bg-[#F6F7F8] text-[#303133] rounded-8rpx h-90rpx leading-90rpx w-[50%] mr-28rpx' @click="detail.handleResetTime">重置</view>
<view class='bg-[#4C9F44] text-[#fff] rounded-8rpx h-90rpx leading-90rpx w-[50%]' @click="detail.handleConfirmHour">确定（{{ totalHour }}小时）</view>
</view>
</view>
</wd-popup>
<!-- 费用明细 -->
<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'>
@ -231,26 +18,26 @@
<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>￥640.00</view>
<view>￥{{ bill.service.total }}</view>
</view>
<view class="flex justify-between items-center text-24rpx text-[#909399] leading-34rpx mt-16rpx">
<view>茶室费（￥160元/小时）</view>
<view>x4</view>
<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]">-￥640.00</view>
<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>-￥20</view>
<view>-￥{{ bill.coupon }}</view>
</view>
<view class="flex justify-between items-center text-24rpx text-[#909399] leading-34rpx mt-16rpx">
<view>优惠券</view>
<view>-￥20</view>
<view>会员八折</view>
<view>-￥{{ bill.discount }}</view>
</view>
</view>
@ -260,7 +47,7 @@
<view class="flex justify-between items-center text-30rpx text-[#303133] leading-42rpx">
<view>实付金额</view>
<view>￥640.00</view>
<view>￥{{ bill.total }}</view>
</view>
</view>
</view>
@ -291,24 +78,218 @@
</wd-radio-group>
</view>
<view class='bg-[#4C9F44] text-[#fff] rounded-8rpx h-90rpx leading-90rpx mx-60rpx box-border text-center mt-170rpx' @click="detail.handlePay">确定付款</view>
<view class='bg-[#4C9F44] text-[#fff] rounded-8rpx h-90rpx leading-90rpx mx-60rpx box-border text-center mt-170rpx' @click="Detail.handlePay">确定付款</view>
</view>
</wd-popup>
<!-- 选择预定时间 -->
<booking-time v-model="showBookTimePopup" :day="sevenDay" @selectedTime="Detail.handleChooseReserveTime"></booking-time>
<view>
<navbar :title="isGroupBuying ? '团购套餐' : '预定'" custom-class='!bg-[#F6F7F8]'></navbar>
</view>
<view>
<view class="mt-20rpx mx-30rpx swiper">
<wd-swiper value-key="image" height="320rpx"
: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="font-bold text-36rpx text-[#303133] leading-50rpx">{{ 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">
<wd-tag color="#40AE36" bg-color="#40AE36" plain custom-class="!rounded-4rpx">文艺小清新</wd-tag>
</view>
<view class="flex items-start" v-if="label.category_id == 2">
<wd-tag color="#F55726" bg-color="#F55726" plain>全息投影</wd-tag>
</view>
</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-[#6A6363] flex-1 text-22rpx leading-32rpx text-right">已售 10+</view> -->
</view>
<view v-if="isGroupBuying">
<view class="mt-20rpx mb-24rpx" >
<wd-gap height="2rpx" bgColor="#F6F7F9"></wd-gap>
</view>
<view class="text-[#303133] text-28rpx leading-48rpx">
<view>
<text class="font-bold mr-26rpx">须知</text>
<text class="font-500">需预约</text>
</view>
<view class="mt-22rpx">
<text class="font-bold mr-26rpx">保障</text>
<text class="font-500">随时退</text>
</view>
</view>
</view>
</view>
<view v-if="!isGroupBuying">
<!-- 使用说明 -->
<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="teaRoom.textarea1"></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">{{ 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="Detail.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">
<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>
</view>
</view>
</view>
</view>
<!-- 团购券 -->
<view class="bg-white rounded-16rpx py-26rpx px-30rpx mt-24rpx mx-30rpx" @click="Detail.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">
<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>
</view>
</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">
<!-- 套餐详情 -->
<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">
<view class="text-[#303133] text-32rpx leading-44rpx font-bold mb-24rpx">购买须知</view>
<view class="">
<rich-text :nodes="html"></rich-text>
</view>
</view>
</view>
<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>
<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" 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>
<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>
</view>
</view>
<view class="flex items-center text-[#4C9F44]" v-if="!isGroupBuying" @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 class="mr-30rpx">
<wd-button custom-class='!bg-[#4C9F44] !rounded-8rpx !h-70rpx' @click='Detail.handleSubmitOrder'>{{ isGroupBuying ? '立即购买' : '立即预定' }}</wd-button>
</view>
</view>
</view>
</view>
</view>
</template>
<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 { 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 { useUserStore } from '@/store'
import { getTeaRoomDetail, collectTeaRoom, getStoreTeaRoomList } from '@/api/tea-room'
import Pay from '@/components/Pay.vue'
import PriceFormat from '@/components/PriceFormat.vue'
import {ReserveServiceCategory} from '@/utils/order'
import BookingTime from '@/components/BookingTime.vue'
import { getUserInfo } from '@/api/user'
const OSS = inject('OSS')
const swiperList = ref<string[]>([
`${OSS}images/banner1.png`,
`${OSS}images/banner1.png`,
`${OSS}images/banner1.png`
])
// 用户信息
const userInfo = ref<IUserInfoVo>(null)
const swiperList = ref<string[]>([])
const current = ref<number>(0)
const html: string = '<p>这里是富文本内容，需要后台传递</p>'
const isGroupBuying: boolean = false // 是否是团购套餐
@ -337,98 +318,132 @@
}
])
// 选择预定时间
const showBookTimePopup = ref<boolean>(false)
const sevenDay = reactive<ITeaSpecialistFuture7DaysResult>({
minimum_time: 0,
time: []
})
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: {
total: 0,
unitPrice: 0,
num: 0,
startTime: 0,
endTime: 0,
dayTime: '',
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,
total: 0
})
// 预定时间相关
const showReservePopup = ref<boolean>(false) // 预定时间popup
const currentTimePicker = ref<string>('start') // 当前选择的时间类型
const startTimeValue = ref<string>('') // 开始时间
const endTimeValue = ref<string>('') // 结束时间
const now = new Date()
const minTimestamp = Date.now()
// 允许选择未来两个月的日期
const maxTimestamp = new Date(now.getFullYear(), now.getMonth() + 1, now.getDate()).getTime()
const startTimeLayout = ref<string>('')
const endTimeLayout = ref<string>('')
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 teaRoom = ref<any>({})
const teaRoomPrice = ref<number>(0)
// 门店余额
const storeMoney = ref<number>(0)
// 选择的优惠券
const selectedCoupon = ref<{id: number, name: string}>({id: 0, name: ''})
// 用户信息
const user = ref<any>(null)
onLoad((args) => {
storeId.value = Number(args.storeId)
teaRoomId.value = Number(args.roomId)
teaRoomPrice.value = Number(args.price) || 0
Detail.handleInit()
if (args.type == ReserveServiceCategory.GroupBuying) {
// TODO 如果是团购套餐则直接微信支付？
pay.value = 3
console.log("🚀 ~ pay.value:", pay.value)
// console.log("🚀 ~ pay.value:", pay.value)
}
// 获取用户需求详
getUserInfo().then(res => {
user.value = res
})
})
const detail = {
startTimeTimestamp: 0, // 记录开始时间戳
endTimeTimestamp: 0, // 记录结束时间戳
const Detail = {
/**
* 初始包间详情
*/
handleInit: 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
handleStartTimePicker: (e: {value: number}) => {
detail.startTimeTimestamp = e.value
startTimeLayout.value = detail.formatDate(e.value)
detail.totalTimestamp()
},
// 预定时间
const next7 = await getNext7Days()
Object.assign(sevenDay, next7)
handleEndTimePicker: (e: {value: number}) => {
detail.endTimeTimestamp = e.value
endTimeLayout.value = detail.formatDate(e.value)
detail.totalTimestamp()
},
handleFormatTime: (type: string, values: string) => {
if (type === 'year') {
return `${values}年`
}
if (type === 'month') {
return `${values}月`
}
if (type === 'date') {
return `${values}日`
}
if (type === 'hour') {
return `${values}时`
}
if (type === 'minute') {
return `${values}分`
}
return values
},
handleClick: (item: any) => {
// 处理点击事件
console.log('Clicked item:', item)
},
// 重置预定时间
handleResetTime: () => {
startTimeValue.value = ''
endTimeValue.value = ''
startTimeLayout.value = ''
endTimeLayout.value = ''
detail.startTimeTimestamp = 0
detail.endTimeTimestamp = 0
totalHour.value = 0
currentTimePicker.value = 'start'
},
// 确定时间
handleConfirmHour: () => {
if (totalHour.value <= 0) {
toast.info('至少起订N小时')
return
}
showReservePopup.value = false
// 获取门店余额
const balance = await getTeaRoomBalance({ store_id: storeId.value })
storeMoney.value = balance.data.money || 0
},
// 跳转优惠券页面
handleToCoupon(type) {
// 1：优惠券 2：团购券
uni.navigateTo({ url: `/bundle/coupon/coupon?type=${type}` })
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}`)
}
},
handlePay: () => {
@ -437,34 +452,104 @@
// uni.navigateTo({ url: '/bundle/reserve-room/result' })
},
// 格式化时间
formatDate: (timestamp: number) => {
const date = new Date(timestamp)
const year = date.getFullYear()
const month = String(date.getMonth() + 1).padStart(2, '0')
const day = String(date.getDate()).padStart(2, '0')
const hour = String(date.getHours()).padStart(2, '0')
const minute = String(date.getMinutes()).padStart(2, '0')
// 选中预定时间
handleChooseReserveTime: (params: any) => {
reserveTime.value = params
return `${year}-${month}-${day} ${hour}:${minute}`
},
// 计算起订时间时长
totalTimestamp: () => {
if (detail.startTimeTimestamp && detail.endTimeTimestamp) {
const diffMs = detail.endTimeTimestamp - detail.startTimeTimestamp
// 计算小时，保留一位小数
const hours = (diffMs / 1000 / 60 / 60)
const result = Math.round(hours * 10) / 10 // 保留一位小数
if (result >= 0) {
totalHour.value = result
}
return result
bill.value.service = {
total: toTimes(teaRoomPrice.value, params[1].length),
unitPrice: teaRoomPrice.value,
num: params[1].length,
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]
}
// TODO 这里需要判断是否开通VIP享受八折
if (user.value.member == 1) {
bill.value.discount = Number(toMinus(bill.value.service.total, (bill.value.service.total * 0.8).toFixed(2)))
}
totalHour.value = 0
return 0
},
// 选择支付方式
handleGetPayValue: (value: number) => {
pay.value = value
},
/**
* 提交订单
*/
handleSubmitOrder: async () => {
if (reserveTime.value.length == 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)
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}`
})
} else {
uni.redirectTo({
url: '/bundle/order/tea-room/order-list?orderStatus=all'
})
}
}, 1000)
})
setTimeout(() => {
router.navigateTo(`/pages/cashier/cashier?from=${OrderType.TeaRoomOrder}&orderId=${res.id}&teaRoomName=${teaRoom.value.name}&storeId=${storeId.value}`)
}, 800)
} catch (error) {
uni.hideLoading()
toast.info('订单提交失败，请稍后重试')
return
}
}
}
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">

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>

2
src/bundle/vip/buy.vue
View File

@ -1,6 +1,6 @@
<route lang="jsonc" type="page">
{
// "needLogin": true,
"needLogin": true,
"layout": "default",
"style": {
"navigationStyle": "custom"

2
src/bundle/wallet/wallet.vue
View File

@ -1,5 +1,5 @@
<route lang="jsonc" type="page">{
// "needLogin": true,
"needLogin": true,
"layout": "default",
"style": {
"navigationStyle": "custom"