644 lines
29 KiB
Vue
644 lines
29 KiB
Vue
<!-- 使用 type="home" 属性设置首页，其他页面不需要设置，默认为page -->
|
||
<route lang="jsonc" type="page">{
|
||
"needLogin": true,
|
||
"layout": "tabbar",
|
||
"style": {
|
||
"navigationStyle": "custom"
|
||
}
|
||
}</route>
|
||
|
||
<template>
|
||
<view class="pb-180rpx">
|
||
<!-- 费用明细 -->
|
||
<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 || 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 || 0 }}</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="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">{{ 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">
|
||
<wd-tag
|
||
:color="randomLabelColor(Number(labelIndex))"
|
||
:bg-color="randomLabelColor(Number(labelIndex))"
|
||
plain
|
||
custom-class="!rounded-4rpx"
|
||
>{{ label.label_name }}</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">{{ teaRoomPackage.introduce }}</view>
|
||
<view class="text-[#6A6363] flex-1 text-22rpx leading-32rpx text-right">已售
|
||
<template v-if="isGroupBuying">
|
||
{{ teaRoomPackage.sold > 10 ? teaRoomPackage.sold + '+' : teaRoomPackage.sold }}
|
||
</template>
|
||
<template v-else>
|
||
{{ teaRoom.room?.sold > 10 ? teaRoom.room?.sold + '+' : teaRoom.room?.sold }}
|
||
</template>
|
||
</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">
|
||
<!-- <rich-text :nodes="teaRoomPackage.details"></rich-text> -->
|
||
<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.other_describe"></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">{{ teaRoom?.room?.hours }}小时起订</view>
|
||
<view class="flex items-center">
|
||
<view class="text-[28rpx] text-[#909399] leading-40rpx w-430rpx line-1 text-right">
|
||
<template v-if="dayHours">
|
||
{{ dayTime }} {{ dayHours }}
|
||
</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.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="selectedGroupCoupon?.id > 0">
|
||
{{ selectedGroupCoupon.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>
|
||
|
||
<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="mt-24rpx" v-if="teaRoomPackage.introduce">
|
||
<view class="flex items-center mb-20rpx">
|
||
<wd-img width="36rpx" height="36rpx" :src="`${OSS}icon/icon_tcsm.png`"></wd-img>
|
||
<view class="font-bold text-28rpx leading-48rpx text-[#303133] ml-6rpx">套餐介绍</view>
|
||
</view>
|
||
<rich-text :nodes="teaRoomPackage.introduce"></rich-text>
|
||
</view>
|
||
<view class="mt-30rpx" v-if="teaRoomPackage.rests_introduce">
|
||
<view class="flex items-center mb-20rpx">
|
||
<wd-img width="36rpx" height="36rpx" :src="`${OSS}icon/icon_qtsm.png`"></wd-img>
|
||
<view class="font-bold text-28rpx leading-48rpx text-[#303133] ml-6rpx"> 其他说明</view>
|
||
</view>
|
||
<rich-text :nodes="teaRoomPackage.rests_introduce"></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="mt-30rpx" v-if="teaRoomPackage.room_name">
|
||
<view class="flex items-center mb-20rpx">
|
||
<wd-img width="36rpx" height="36rpx" :src="`${OSS}icon/icon_sybj.png`"></wd-img>
|
||
<view class="font-bold text-28rpx leading-48rpx text-[#303133] ml-6rpx">适用包间</view>
|
||
</view>
|
||
<rich-text :nodes="teaRoomPackage.room_name"></rich-text>
|
||
</view>
|
||
|
||
<view class="mt-30rpx" v-if="teaRoomPackage.hour">
|
||
<view class="flex items-center mb-20rpx">
|
||
<wd-img width="36rpx" height="36rpx" :src="`${OSS}icon/icon_sysc.png`"></wd-img>
|
||
<view class="font-bold text-28rpx leading-48rpx text-[#303133] ml-6rpx">适用时长</view>
|
||
</view>
|
||
<view class="">{{ teaRoomPackage.hour }}小时</view>
|
||
</view>
|
||
|
||
<view class="mt-30rpx" v-if="teaRoomPackage.pl_number">
|
||
<view class="flex items-center mb-20rpx">
|
||
<wd-img width="36rpx" height="36rpx" :src="`${OSS}icon/icon_syrs.png`"></wd-img>
|
||
<view class="font-bold text-28rpx leading-48rpx text-[#303133] ml-6rpx">使用人数</view>
|
||
</view>
|
||
<view class="">{{ teaRoomPackage.pl_number }}</view>
|
||
</view>
|
||
|
||
<view class="mt-20rpx mb-24rpx">
|
||
<wd-gap height="2rpx" bgColor="#F6F7F9"></wd-gap>
|
||
</view>
|
||
|
||
<view class="mt-30rpx" v-if="teaRoomPackage.returd_details">
|
||
<view class="flex items-center mb-20rpx">
|
||
<wd-img width="36rpx" height="36rpx" :src="`${OSS}icon/icon_tgsm.png`"></wd-img>
|
||
<view class="font-bold text-28rpx leading-48rpx text-[#303133] ml-6rpx">退改说明</view>
|
||
</view>
|
||
<rich-text :nodes="teaRoomPackage.returd_details"></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="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="teaRoomPackage.price" 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' :disabled="isSubmitting" @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 { ITeaSpecialistFuture7DaysResult } from '@/api/types/tea'
|
||
import { getNext7Days, getTeaRoomBalance, createTeaRoomOrder } from '@/api/tea-room'
|
||
import { CouponType } from '@/utils/coupon'
|
||
import { router, toTimes, toPlus, toMinus, randomLabelColor } from '@/utils/tools'
|
||
import type { IUserInfoVo } from '@/api/types/login'
|
||
import { useUserStore } from '@/store'
|
||
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'
|
||
import { getTeaRoomGroupCouponList } from '@/api/tea-room'
|
||
|
||
const OSS = inject('OSS')
|
||
|
||
// 获取当前年月日，格式：YYYY-MM-DD
|
||
const now = new Date();
|
||
const year = now.getFullYear();
|
||
const month = String(now.getMonth() + 1).padStart(2, '0');
|
||
const day = String(now.getDate()).padStart(2, '0');
|
||
const currentDate = `${year}-${month}-${day}`;
|
||
|
||
// 用户信息
|
||
const userInfo = ref<IUserInfoVo>(null)
|
||
|
||
const swiperList = ref<string[]>([])
|
||
const current = ref<number>(0)
|
||
const html: string = '<p>这里是富文本内容，需要后台传递</p>'
|
||
const isGroupBuying = ref<boolean>(false)// 是否是团购套餐
|
||
|
||
// 选择预定时间
|
||
const showBookTimePopup = ref<boolean>(false)
|
||
const sevenDay = reactive<ITeaSpecialistFuture7DaysResult>({
|
||
minimum_time: 0,
|
||
time: []
|
||
})
|
||
const reserveTime = ref<Array<any>>([])
|
||
const timeSlots = ref<Array<string>>([]) // 连续选择的预约时间
|
||
const dayTitle = ref<string>('') // 周三03/18
|
||
const dayTime = ref<string>('') // 2024-03-18
|
||
const dayHours = ref<string>('') // 预定时长00:00,00:30
|
||
|
||
// 计算费用明细 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,
|
||
num: 0,
|
||
startTime: 0,
|
||
endTime: 0,
|
||
dayTime: '',
|
||
startHour: '',
|
||
endHour: ''
|
||
},
|
||
discount: 0,
|
||
totalDiscount: 0,
|
||
coupon: 0,
|
||
groupCoupon: 0,
|
||
total: 0
|
||
})
|
||
|
||
// 费用明细相关
|
||
const showCostPopup = ref<boolean>(false) // 费用明细popup
|
||
const showPayPopup = ref<boolean>(false) // 支付popup
|
||
|
||
// 包间内容
|
||
const storeId = ref<number>(0) // 门店ID
|
||
const id = ref<number>(0) // id
|
||
const teaRoom = ref<any>({
|
||
order: {
|
||
hours: 0
|
||
}
|
||
})
|
||
const teaRoomPrice = ref<number>(0)
|
||
|
||
// 门店余额
|
||
const storeMoney = ref<number>(0)
|
||
|
||
// 选择的优惠券
|
||
const selectedCoupon = ref<{id: number, name: string}>({id: 0, name: ''})
|
||
const selectedGroupCoupon = ref<{id: number, name: string}>({id: 0, name: ''})
|
||
const selectCouponId = ref<number>(0)
|
||
const selectGroupCouponId = ref<number>(0)
|
||
|
||
// 用户信息
|
||
const user = ref<any>(null)
|
||
|
||
// 套餐
|
||
const teaRoomPackage = ref<any>({})
|
||
|
||
// 页面类型
|
||
const pageType = ref<string>('')
|
||
|
||
// 防止重复提交
|
||
const isSubmitting = ref(false)
|
||
|
||
// 团购套餐列表
|
||
const groupCouponList = ref<Array<any>>([])
|
||
|
||
onLoad((args) => {
|
||
storeId.value = Number(args.storeId)
|
||
id.value = Number(args.id) // 在茶室下这个id是包间ID，在团购下是套餐ID
|
||
teaRoomPrice.value = Number(args.price) || 0
|
||
pageType.value = args.type || ''
|
||
|
||
if (args.type == ReserveServiceCategory.GroupBuying) {
|
||
isGroupBuying.value = true
|
||
Detail.handleInitGroupBuying()
|
||
}
|
||
Detail.handleInitReserveRoom()
|
||
|
||
// 获取用户需求详
|
||
getUserInfo().then(res => {
|
||
user.value = res
|
||
})
|
||
})
|
||
|
||
// 防止重复提交
|
||
|
||
const Detail = {
|
||
/**
|
||
* 初始包间详情
|
||
*/
|
||
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,
|
||
room_id: id.value
|
||
})
|
||
teaRoom.value = res.details
|
||
if (pageType.value == ReserveServiceCategory.ReserveRoom) {
|
||
swiperList.value = [teaRoom.value.image]
|
||
|
||
// 预定时间
|
||
const next7 = await getNext7Days(id.value, currentDate)
|
||
// disabled = 0 可预约 1不可逾越
|
||
Object.assign(sevenDay, next7.data)
|
||
Object.assign(sevenDay, {minimum_time: teaRoom.value.room.hours})
|
||
}
|
||
|
||
// 获取门店余额
|
||
const balance = await getTeaRoomBalance({ store_id: storeId.value })
|
||
storeMoney.value = balance.data.money || 0
|
||
|
||
// 获取团购券
|
||
const group = await getTeaRoomGroupCouponList({store_id: storeId.value, room_id: id.value})
|
||
groupCouponList.value = group.list
|
||
},
|
||
|
||
/*
|
||
* 初始化套餐详情
|
||
*/
|
||
handleInitGroupBuying: async () => {
|
||
const res = await getTeaRoomPackageDetail({ id: id.value })
|
||
teaRoomPackage.value = res.details
|
||
if (pageType.value == ReserveServiceCategory.GroupBuying) {
|
||
swiperList.value = teaRoomPackage.value.img
|
||
}
|
||
},
|
||
|
||
/**
|
||
* 选中预定时间
|
||
*/
|
||
handleChooseReserveTime: (params: any) => {
|
||
reserveTime.value = params
|
||
console.log("🚀 ~ params:", params)
|
||
|
||
timeSlots.value = params.selectedTimestamps
|
||
dayTitle.value = params.dayTitle
|
||
dayTime.value = params.dayTime
|
||
const times = params.selectedTime.map(item => {
|
||
return item.time
|
||
}).join(',')
|
||
dayHours.value = times
|
||
|
||
bill.value.service = {
|
||
total: 0,
|
||
unitPrice: 0,
|
||
num: params.countSelectedTime,
|
||
startHour: params.selectedTime[0].time,
|
||
endHour: params.selectedTime[params.selectedTime.length - 1].time
|
||
}
|
||
|
||
Detail.handleCalculateTeaRoomPrice()
|
||
},
|
||
|
||
/**
|
||
* 跳转优惠券页面
|
||
*/
|
||
handleToCoupon(type) {
|
||
if (reserveTime.value.length == 0) {
|
||
toast.info('请选择预定时间')
|
||
return
|
||
}
|
||
|
||
// 在选择优惠券之前需要先选择团购券
|
||
if (type === CouponType.Discount && groupCouponList.value.length > 0 && selectedGroupCoupon.value.id == 0) {
|
||
toast.info('请先选择团购券')
|
||
return
|
||
}
|
||
|
||
// 如果选择优惠券之前订单金额已经是0的话则不用再选择优惠券
|
||
if (type === CouponType.Discount && selectedGroupCoupon.value.id > 0 && bill.value.total <= 0) {
|
||
toast.info('当前订单金额已为0，无需选择优惠券')
|
||
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
|
||
selectCouponId.value = params.coupon.id // 这里的ID是在数据表自增的ID，保存下来是为了回显列表的,没有其他作用
|
||
} else {
|
||
selectedGroupCoupon.value = {id: params.coupon.group_id, name: `团购券-${params.coupon?.title}` }
|
||
bill.value.groupCoupon = params.coupon.coupon_price
|
||
selectGroupCouponId.value = params.coupon.id // 这里的ID是在数据表自增的ID，保存下来是为了回显列表的,没有其他作用
|
||
}
|
||
|
||
Detail.handleCalculateTeaRoomPrice()
|
||
})
|
||
|
||
// 获取预定了几个小时
|
||
const count = bill.value.service.num
|
||
console.log("🚀 ~ selectCouponId:", selectCouponId.value)
|
||
|
||
router.navigateTo(`/bundle/coupon/coupon?id=${id.value}&numbers=${count}&type=${type}&storeId=${storeId.value}&couponId=${selectCouponId.value}&groupCouponId=${selectGroupCouponId.value}`)
|
||
},
|
||
|
||
/**
|
||
* 提交订单
|
||
*/
|
||
handleSubmitOrder: async () => {
|
||
if (isSubmitting.value) return
|
||
// 只有预定茶室才会选择时间
|
||
if (!isGroupBuying.value && bill.value.service.num == 0) {
|
||
toast.info('请选择预定时间')
|
||
return
|
||
}
|
||
|
||
isSubmitting.value = true
|
||
uni.showLoading({
|
||
title: '提交中...'
|
||
})
|
||
|
||
try {
|
||
let res: any = null
|
||
if (isGroupBuying.value) {
|
||
// 团购套餐ID
|
||
res = await createTeaRoomPackageOrder({
|
||
group_id: id.value,
|
||
room_id: 0
|
||
})
|
||
} else {
|
||
const params = {
|
||
store_id: storeId.value,
|
||
room_id: id.value,
|
||
day_title: dayTitle.value,
|
||
day_time: dayTime.value,
|
||
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,
|
||
timeslot: timeSlots.value.join(',')
|
||
}
|
||
res = await createTeaRoomOrder(params)
|
||
}
|
||
uni.hideLoading()
|
||
|
||
// 支付后的处理
|
||
uni.$on('payment', params => {
|
||
setTimeout(() => {
|
||
uni.$off("payment")
|
||
isSubmitting.value = false
|
||
if (params.result) {
|
||
uni.redirectTo({
|
||
url: `/pages/notice/reserve?type=${OrderType.TeaRoomOrder}&orderId=${params.orderId}&isGroupBuying=${isGroupBuying.value ? 1 : 0}`
|
||
})
|
||
} else {
|
||
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(() => {
|
||
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}&cmoboId=${id.value || 0}`
|
||
)
|
||
}, 500)
|
||
} catch (error) {
|
||
uni.hideLoading()
|
||
isSubmitting.value = false
|
||
toast.info('订单提交失败，请稍后重试')
|
||
return
|
||
}
|
||
// 正常流程下，isSubmitting.value 会在支付回调中重置
|
||
},
|
||
|
||
/**
|
||
* 计算茶室价格
|
||
*/
|
||
handleCalculateTeaRoomPrice: async () => {
|
||
const res = await calculateTeaRoomPrice({
|
||
room_id: id.value,
|
||
coupon_id: selectedCoupon.value.id || 0,
|
||
group_coupon_id: selectedGroupCoupon.value.id || 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.groupCoupon = res.details.group_price // 团购优惠
|
||
bill.value.total = res.details.order_amount // 订单金额
|
||
},
|
||
}
|
||
</script>
|
||
|
||
<style lang="scss">
|
||
page {
|
||
background-color: $cz-page-background;
|
||
}
|
||
|
||
.swiper {
|
||
:deep() {
|
||
.wd-swiper-nav__item--dots-bar {
|
||
width: 56rpx !important;
|
||
height: 6rpx !important;
|
||
border-radius: 3rpx !important;
|
||
}
|
||
|
||
.is-active {
|
||
background-color: #2B9F93 !important;
|
||
}
|
||
}
|
||
}
|
||
|
||
.pay {
|
||
:deep() {
|
||
.wd-radio {
|
||
margin-top: 0 !important;
|
||
}
|
||
}
|
||
}
|
||
</style>
|