完善茶室订单
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">
|
||||
|
||||
@ -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>
|
||||
|
||||
Reference in New Issue
Block a user