完善茶室订单
This commit is contained in:
wangxiaowei
@ -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">
|
||||
|
||||
Reference in New Issue
Block a user