747 lines
32 KiB
Vue
747 lines
32 KiB
Vue
<!-- 使用 type="home" 属性设置首页，其他页面不需要设置，默认为page -->
|
||
<route lang="jsonc" type="page">{
|
||
"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>
|
||
<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>服务费（￥{{ bill.service.unitPrice }}元/小时）</view>
|
||
<view>x{{ bill.service.num }}</view>
|
||
</view>
|
||
</view>
|
||
|
||
<!-- 车马费 -->
|
||
<view>
|
||
<view class="flex justify-between items-center text-30rpx text-[#303133] leading-42rpx mt-52rpx">
|
||
<view>车马费</view>
|
||
<view>￥{{ bill.travel.total }}</view>
|
||
</view>
|
||
|
||
<view class="flex justify-between items-center text-24rpx text-[#909399] leading-34rpx mt-16rpx">
|
||
<view>车马费（￥{{ bill.travel.unitPrice }}元/小时）</view>
|
||
<view>{{ bill.travel.num }}公里</view>
|
||
</view>
|
||
</view>
|
||
|
||
<!-- 茶艺服务 -->
|
||
<view>
|
||
<view class="flex justify-between items-center text-30rpx text-[#303133] leading-42rpx mt-52rpx">
|
||
<view>茶艺服务</view>
|
||
<view>￥{{ bill.teaService.total }}</view>
|
||
</view>
|
||
|
||
<view class="flex justify-between items-center text-24rpx text-[#909399] leading-34rpx mt-16rpx">
|
||
<view class='w-400rpx'>{{ selectedTeaTxt.join('/') }}</view>
|
||
<view>￥{{ bill.teaService.total }}</view>
|
||
</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.coupon }}</view>
|
||
</view>
|
||
<view class="flex justify-between items-center text-24rpx text-[#909399] leading-34rpx mt-16rpx">
|
||
<view>优惠券</view>
|
||
<view>-￥{{ bill.coupon }}</view>
|
||
</view>
|
||
</view>
|
||
|
||
<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>
|
||
|
||
<!-- 茶艺服务 -->
|
||
<wd-popup v-model="showTeaServicePopup" lock-scroll custom-style="border-radius: 32rpx 32rpx 0rpx 0rpx;" position="bottom">
|
||
<view class="relative">
|
||
<view class="absolute top-18rpx right-30rpx" @click="showTeaServicePopup = 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>
|
||
<scroll-view scroll-y class="h-800rpx">
|
||
<view class="">
|
||
<!-- 服务人数 -->
|
||
<view class="mx-60rpx mb-56rpx">
|
||
<view class="text-32rpx leading-44rpx text-#303133">服务人数</view>
|
||
<view class="flex items-center justify-between mt-28rpx">
|
||
<view class="text-28rpx leading-40rpx text-#303133">服务人数</view>
|
||
<view class="">
|
||
<wd-input-number v-model="servicePeople"/>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
|
||
<!-- 预定茶叶 -->
|
||
<view class="mx-60rpx mb-50rpx">
|
||
<view class="text-32rpx leading-44rpx text-#303133">
|
||
<text class="mr-20rpx">预定茶叶</text>
|
||
<text class="text-26rpx leading-36rpx text-#909399">支持多选</text>
|
||
</view>
|
||
<view class="mt-28rpx">
|
||
<view class="grid grid-cols-3 gap-x-16rpx gap-y-16rpx">
|
||
<view
|
||
v-for="(item, index) in teaList" :key="index"
|
||
class="text-28rpx leading-40rpx rounded-8rpx text-center py-14rpx"
|
||
:class="selectedTea.includes(item.id) ? 'bg-#4C9F44 text-#fff' : 'bg-#F7F7F7 text-#606266'"
|
||
@click="TeaRoom.handleToggleTea(item.id, item.name, item.tea_price)">
|
||
<view>{{item.name}}</view>
|
||
<view>￥{{item.tea_price}}</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
|
||
<!-- 茶具使用 -->
|
||
<view class="mx-60rpx mb-70rpx">
|
||
<view class="text-32rpx leading-44rpx text-#303133">茶具使用</view>
|
||
<view class="mt-28rpx flex items-center justify-between w-full">
|
||
<view class="flex items-center justify-between w-full">
|
||
<view class="text-28rpx leading-40rpx text-#303133">茶具需求</view>
|
||
<view>
|
||
<wd-radio-group v-model="teaUsageValue" shape="dot" checked-color="#4C9F44" inline>
|
||
<block v-for="(item, index) in teaUsageList" :key="index">
|
||
<wd-radio :value="item.type">
|
||
<view class="text-[#303133] text-26rpx leading-36rpx mt-2rpx">{{item.name}}</view>
|
||
</wd-radio>
|
||
</block>
|
||
</wd-radio-group>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
|
||
<view class="h-2rpx bg-#EFF0F2"></view>
|
||
|
||
<!-- 按钮 -->
|
||
<view class="mx-60rpx flex items-center justify-between py-40rpx">
|
||
<view class="">
|
||
<view class="text-24rpx leading-34rpx text-#303133">已选 {{selectedTea.length}} 项</view>
|
||
<view class="">
|
||
<price-format color="#FF5951" :first-size="40" :second-size="40" :subscript-size="28" :price="totalSelectedTeaPrice"></price-format>
|
||
</view>
|
||
</view>
|
||
|
||
<view class="flex items-center">
|
||
<view class="w-178rpx h-70rpx leading-70rpx text-center bg-#F6F7F8 text-#303133 rounded-8rpx mr-20rpx" @click="TeaRoom.handleResetTeaService">重置</view>
|
||
<view class="w-178rpx h-70rpx leading-70rpx text-center bg-#4C9F44 text-#fff rounded-8rpx" @click="TeaRoom.handleConfirmTeaService">确定</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</scroll-view>
|
||
</view>
|
||
</wd-popup>
|
||
|
||
<!-- 选择预定时间 -->
|
||
<booking-time v-model="showBookTimePopup" :day="sevenDay" @selectedTime="TeaRoom.handleChooseReserveTime"></booking-time>
|
||
|
||
<view>
|
||
<navbar title="预约茶艺师" :leftArrow="false"></navbar>
|
||
</view>
|
||
|
||
<view>
|
||
<!-- 茶艺师信息 -->
|
||
<view class="flex items-center bg-white p-20rpx rounded-10rpx mb-20rpx mt-20rpx">
|
||
<view class="mr-28rpx relative">
|
||
<wd-img width="200rpx" height="200rpx" :src="`${OSS}images/home/home_image5.png`"></wd-img>
|
||
</view>
|
||
<view class="">
|
||
<view class="font-bold text-[#303133] text-30rpx leading-42rpx mr-14rpx">
|
||
{{ info.name }}
|
||
</view>
|
||
<view class="flex items-center mt-18rpx">
|
||
<view class="mr-12rpx">
|
||
<view class="bg-#FEF1F0 text-#FF5951 w-144rpx h-40rpx rounded-6rpx text-center text-22rpx leading-40rpx">90后茶艺师</view>
|
||
</view>
|
||
<tea-specialist-level :level="TeaSpecialistLevelValue[info.teamasterLevel?.[0]?.level_name] || 'junior'"></tea-specialist-level>
|
||
</view>
|
||
<view class="font-400 text-22rpx leading-32rpx text-#6A6363 mt-30rpx">已预约 {{ info.reservation_num > 10 ? info.reservation_num + '+' : info.reservation_num }}</view>
|
||
</view>
|
||
</view>
|
||
|
||
<!-- 服务方式 -->
|
||
<view class="mt-20rpx bg-white px-30rpx py-34rpx">
|
||
<view class="flex items-center justify-between">
|
||
<view class="font-bold text-32rpx leading-44rpx">服务方式</view>
|
||
<view class="bg-[#F0F6EF] h-60rpx rounded-20rpx flex items-center justify-between py-14rpx px-30rpx relative w-304rpx font-400 text-26rpx text-[#333]">
|
||
<view class="absolute left-30rpx top-1/2 -translate-y-1/2 z-2" :class="serviceTypeValue == 1 ? 'text-[#fff]' : ''" @click="TeaRoom.handleChooseService(1)">到店服务</view>
|
||
<view class="absolute right-30rpx top-1/2 -translate-y-1/2 z-2" :class="serviceTypeValue == 2 ? 'text-[#fff]' : ''" @click="TeaRoom.handleChooseService(2)">上门服务</view>
|
||
<view class="swiper-service"></view>
|
||
</view>
|
||
</view>
|
||
|
||
<!-- 预定门店 -->
|
||
<view class="flex items-center justify-between mt-48rpx" v-if="serviceTypeValue == 1" @click="TeaRoom.handleToSChooseStore">
|
||
<view class="text-28rpx leading-40rpx">预定店</view>
|
||
<view class="flex items-center">
|
||
<view class="text-28rpx leading-40rpx text-#303133">{{ teaHouse.name || '请选择茶馆' }}</view>
|
||
<view>
|
||
<wd-icon name="chevron-right" size="32rpx" color="#909399"></wd-icon>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
|
||
<!-- 上门服务地址 -->
|
||
<view class="flex items-center justify-between mt-48rpx" v-if="serviceTypeValue == 2" @click="TeaRoom.handleToAddress">
|
||
<view class="text-28rpx leading-40rpx">地址</view>
|
||
<view class="flex items-center">
|
||
<view class="text-28rpx leading-40rpx text-#303133 w-430rpx line-1 text-right">
|
||
<template v-if="address && address.id > 0">
|
||
{{address.contact}} {{ address.telephone }} {{ address.province }}{{ address.city }}{{ address.district }}{{ address.address }}
|
||
</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 py-26rpx px-30rpx mt-20rpx" @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 py-26rpx px-30rpx mt-20rpx" @click="showTeaServicePopup = 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">茶艺服务</view>
|
||
<view class="flex items-center">
|
||
<view class="text-[28rpx] text-[#909399] leading-40rpx w-430rpx line-1 text-right">
|
||
<template v-if="selectedTea.length > 0">
|
||
{{ servicePeople }}人/{{ selectedTeaTxt.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 py-26rpx px-30rpx mt-20rpx">
|
||
<view class="text-32rpx leading-44rpx text-#303133 mb-28rpx">
|
||
<text class="mr-20rpx">订单备注 </text>
|
||
<text class="text-26rpx leading-36rpx text-#909399">(选填)</text>
|
||
</view>
|
||
<wd-textarea placeholder="有想说的可以在这里写哦！" v-model="orderRemarks" custom-class='!rounded-18rpx !border-2rpx !border-[#EFF0EF] !bg-[#F8F9FA]' custom-textarea-class='!bg-[#F8F9FA]' />
|
||
</view>
|
||
|
||
<!-- 优惠券 -->
|
||
<view class="bg-white py-26rpx px-30rpx mt-20rpx" @click="TeaRoom.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 w-430rpx line-1 text-right">
|
||
<template v-if="selectedCoupon?.id > 0">
|
||
{{ selectedCoupon.name }}
|
||
</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 py-26rpx px-30rpx mt-20rpx">
|
||
<pay hide-store-balance @pay="TeaRoom.handleGetPayValue"></pay>
|
||
</view> -->
|
||
|
||
<view class="fixed left-0 right-0 bottom-0 z-2 bg-[#fff]"
|
||
:style="{ height: '140rpx' }">
|
||
<view class="mt-22rpx flex justify-between items-center">
|
||
<view class="flex items-center ml-60rpx" @click="showCostPopup = true">
|
||
<view class="text-24rpx text-[#303133] leading-34rpx w-72rpx">合计：</view>
|
||
<view class="flex items-center h-56rpx mr-16rpx">
|
||
<price-format color="#FF5951" :first-size="40" :second-size="40" :subscript-size="28" :price="bill.total"></price-format>
|
||
<view 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]">
|
||
<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="TeaRoom.handleSubmitOrder">立即预定</wd-button>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</template>
|
||
|
||
<script lang="ts" setup>
|
||
import { toast } from '@/utils/toast'
|
||
import { router, toTimes, toPlus } from '@/utils/tools'
|
||
import PriceFormat from '@/components/PriceFormat.vue'
|
||
import { ReserveServiceCategory, OrderType } from '@/utils/order'
|
||
import { PayList, PayCategory, PayValue } from '@/utils/pay'
|
||
import Pay from '@/components/Pay.vue'
|
||
import { getTeaSpecialistDetails, getNext7Days, getTeaTypeList, createTeaSpecialistOrder } from '@/api/tea'
|
||
import type { ITeaSpecialistDetailsFields, ITeaSpecialistFuture7DaysResult, ITeaTypeListResult } from '@/api/types/tea'
|
||
import { TeaSpecialistLevelValue } from '@/utils/teaSpecialist'
|
||
import type { IUserAddressListResult } from '@/api/types/user'
|
||
import BookingTime from '@/components/BookingTime.vue'
|
||
import { CouponType } from '@/utils/coupon'
|
||
|
||
const OSS = inject('OSS')
|
||
|
||
// 服务方式
|
||
const serviceType = ref<Array<any>>([
|
||
{type: 1, name: '到店服务'},
|
||
{type: 2, name: '上门服务'},
|
||
])
|
||
const serviceTypeValue = ref<number>(1)
|
||
|
||
// 选择茶馆
|
||
const teaHouse = ref<{id: number, name: string}>({id: 0, name: ''})
|
||
|
||
// 选择预定时间
|
||
const showBookTimePopup = ref<boolean>(false)
|
||
const sevenDay = reactive<ITeaSpecialistFuture7DaysResult>({
|
||
minimum_time: 0,
|
||
time: []
|
||
})
|
||
const reserveTime = ref<Array<any>>([])
|
||
|
||
// 上门服务选择的地址
|
||
const address = ref<IUserAddressListResult>({
|
||
id: 0,
|
||
contact: '',
|
||
telephone: '',
|
||
province: '',
|
||
province_id: 0,
|
||
city: '',
|
||
city_id: 0,
|
||
district: '',
|
||
district_id: 0,
|
||
address: '',
|
||
is_default: 0,
|
||
})
|
||
|
||
// 茶艺服务
|
||
const teaService = ref<{id: number, name: string}>({id: 0, name: ''})
|
||
const showTeaServicePopup = ref<boolean>(false) // 显示门店列表弹窗
|
||
const servicePeople = ref<number>(1) // 服务人数
|
||
const teaList = ref<ITeaTypeListResult[]>([]) // 茶叶列表
|
||
const selectedTea = ref<Array<any>>([]) // 选择的茶叶
|
||
const selectedTeaTxt = ref<Array<any>>([]) // 选择的茶叶文本
|
||
const selectedTeaPrice = ref<Array<any>>([]) // 选择的茶叶价格
|
||
const totalSelectedTeaPrice = ref<string>('') // 选择的茶叶总价
|
||
|
||
// 茶具使用
|
||
const teaUsageList = ref<Array<any>>([
|
||
{type: 1, name: '客户自备'},
|
||
{type: 2, name: '茶艺师提供'},
|
||
])
|
||
const teaUsageValue = ref<number>(1)
|
||
|
||
// 订单备注
|
||
const orderRemarks = ref<string>('')
|
||
|
||
// 支付方式
|
||
const pay = ref<number>(0)
|
||
|
||
const html: string = '<p>这里是富文本内容，需要后台传递</p>'
|
||
const isGroupBuying: boolean = false // 是否是团购套餐
|
||
|
||
// 费用明细相关
|
||
const showCostPopup = ref<boolean>(false) // 费用明细popup
|
||
|
||
// 茶艺师
|
||
const teaSpecialistId = ref<number>(0)
|
||
const info = reactive<ITeaSpecialistDetailsFields>({
|
||
id: 0,
|
||
name: '',
|
||
star: 0,
|
||
image: '',
|
||
reservation_num: 0,
|
||
distance: 0,
|
||
speed: 0,
|
||
real: { gender: 1, both: 18, height: 165, weight: 53, interests: '爱好茶艺，喜欢旅游，把爱好当工作' },
|
||
teamasterlabel: [],
|
||
teamasterLevel: [],
|
||
price: 0,
|
||
fare_price: 0,
|
||
collect: 0,
|
||
up_status: 0,
|
||
textarea: []
|
||
})
|
||
const is90 = ref<boolean>(false)
|
||
|
||
// 选择的优惠券
|
||
const selectedCoupon = ref<{id: number, name: string}>({id: 0, name: ''})
|
||
const selectCouponId = ref<number>(0)
|
||
|
||
// 计算费用明细 service(服务费) travel(车马费) teaServiceFee(茶艺服务) coupon(优惠券)
|
||
const bill = ref<{service: any, travel: any, teaService: any, coupon: number, total: number}>({
|
||
service: {
|
||
total: 0,
|
||
unitPrice: 0,
|
||
num: 0,
|
||
startTime: 0,
|
||
endTime: 0
|
||
},
|
||
travel: {
|
||
total: 0,
|
||
unitPrice: 0,
|
||
num: 0
|
||
},
|
||
teaService: {
|
||
total: 0,
|
||
tea: '',
|
||
teaTotal: 0,
|
||
cup: 0,
|
||
peopleNum: 0
|
||
},
|
||
coupon: 0,
|
||
total: 0
|
||
})
|
||
|
||
onLoad(async (args) => {
|
||
if (args.id) {
|
||
teaSpecialistId.value = Number(args.id)
|
||
|
||
const res = await getTeaSpecialistDetails({
|
||
id: args.id,
|
||
longitude: 0,
|
||
latitude: 0,
|
||
user_id: 0
|
||
})
|
||
// 将返回的数据合并到 reactive 对象中
|
||
Object.assign(info, res.teamaster || {})
|
||
if (info.teamasterlabel) {
|
||
info.teamasterlabel.map(item => {
|
||
if (item.label_name == '90后茶艺师') {
|
||
is90.value = true
|
||
}
|
||
})
|
||
|
||
bill.value.travel = {
|
||
total: toTimes(info.fare_price, info.distance),
|
||
unitPrice: info.fare_price,
|
||
num: info.distance
|
||
}
|
||
}
|
||
}
|
||
|
||
// 初始化数据
|
||
TeaRoom.handleInit()
|
||
})
|
||
|
||
const TeaRoom = {
|
||
handleInit: async () => {
|
||
// 获取未来7天时间段
|
||
const next7 = await getNext7Days()
|
||
Object.assign(sevenDay, next7)
|
||
|
||
const tea = await getTeaTypeList()
|
||
teaList.value = tea as ITeaTypeListResult[]
|
||
console.log("🚀 ~ teaList.value:", teaList.value)
|
||
},
|
||
|
||
/**
|
||
* 选择服务方式
|
||
*/
|
||
handleChooseService: (type: number) => {
|
||
serviceTypeValue.value = type
|
||
const swiperService = document.querySelector('.swiper-service') as HTMLElement
|
||
if (type == 1) {
|
||
swiperService.style.transform = 'translateY(-50%) translateX(0)'
|
||
} else if (type == 2) {
|
||
swiperService.style.transform = 'translateY(-50%) translateX(76px)'
|
||
}
|
||
},
|
||
|
||
/**
|
||
* 切换预定茶叶选择
|
||
*/
|
||
handleToggleTea: (id: number, name: string, price: number) => {
|
||
const index = selectedTea.value.indexOf(id)
|
||
if (index > -1) {
|
||
// 已选择，取消选择
|
||
selectedTea.value.splice(index, 1)
|
||
selectedTeaTxt.value.splice(index, 1)
|
||
selectedTeaPrice.value.splice(index, 1)
|
||
} else {
|
||
// 未选择，添加选择
|
||
selectedTea.value.push(id)
|
||
selectedTeaTxt.value.push(name)
|
||
selectedTeaPrice.value.push(price)
|
||
}
|
||
|
||
totalSelectedTeaPrice.value = toPlus(selectedTeaPrice.value)
|
||
bill.value.teaService.total = Number(totalSelectedTeaPrice.value) // 更新茶艺服务费用
|
||
},
|
||
|
||
/**
|
||
* 选择门店
|
||
*/
|
||
handleToSChooseStore: () => {
|
||
uni.$on('chooseTeaHouse', params => {
|
||
uni.$off('chooseTeaHouse')
|
||
teaHouse.value = params
|
||
})
|
||
router.navigateTo('/bundle_b/pages/tea-specialist/store?from=reserve')
|
||
},
|
||
|
||
/**
|
||
* 选择地址
|
||
*/
|
||
handleToAddress: () => {
|
||
uni.$on('chooseAddress', params => {
|
||
uni.$off('chooseAddress')
|
||
address.value = params
|
||
})
|
||
router.navigateTo('/bundle_b/pages/tea-specialist/address/list?from=reserve')
|
||
},
|
||
|
||
/**
|
||
* 选中预定时间
|
||
*/
|
||
handleChooseReserveTime: (params: any) => {
|
||
reserveTime.value = params
|
||
|
||
bill.value.service = {
|
||
total: toTimes(info.price, params[3]),
|
||
unitPrice: info.price,
|
||
num: params[3],
|
||
startTime: params[2][0],
|
||
endTime: params[2][params[2].length - 1],
|
||
},
|
||
|
||
console.log("🚀 ~ bill.value:", bill.value)
|
||
},
|
||
|
||
/**
|
||
* 跳转优惠券页面
|
||
*/
|
||
handleToCoupon(type) {
|
||
if (reserveTime.value.length == 0) {
|
||
toast.info('请选择预定时间')
|
||
return
|
||
}
|
||
|
||
uni.$off('chooseCoupon');
|
||
uni.$on('chooseCoupon', params => {
|
||
uni.$off('chooseCoupon')
|
||
// console.log("🚀 ~ params:", params)
|
||
// selectedCoupon.value = {id: params.coupon.user_coupon_id, name: `${params.coupon.name}减${params.coupon.coupon_price}` }
|
||
// bill.value.coupon = params.coupon.coupon_price
|
||
selectedCoupon.value = {id: params.coupon.id, name: `${params.coupon.name}减${params.coupon.coupon_price}` }
|
||
bill.value.coupon = params.coupon.coupon_price
|
||
selectCouponId.value = params.coupon.id // 这里的ID是在数据表自增的ID，保存下来是为了回显列表的,没有其他作用
|
||
})
|
||
|
||
// 获取预定了几个小时
|
||
const count = bill.value.service.num
|
||
uni.navigateTo({ url: `/bundle/coupon/coupon?id=${teaSpecialistId.value}&numbers=${count}&type=${type}` })
|
||
// router.navigateTo(`/bundle/coupon/coupon?id=${id.value}&numbers=${count}&type=${type}&storeId=${storeId.value}&couponId=${selectCouponId.value}&groupCouponId=${selectGroupCouponId.value}`)
|
||
},
|
||
|
||
/**
|
||
* 重置差茶艺服务
|
||
*/
|
||
handleResetTeaService: () => {
|
||
servicePeople.value = 1
|
||
selectedTea.value = []
|
||
teaUsageValue.value = 1
|
||
},
|
||
|
||
/**
|
||
* 确认茶艺服务
|
||
*/
|
||
handleConfirmTeaService: () => {
|
||
if (selectedTea.value.length == 0) {
|
||
toast.info('请选择预定茶叶')
|
||
return
|
||
}
|
||
teaService.value = { id: 1, name: '茶艺服务' }
|
||
showTeaServicePopup.value = false
|
||
},
|
||
|
||
/**
|
||
* 提交订单数据
|
||
*/
|
||
handleSubmitOrder: async () => {
|
||
if (serviceTypeValue.value == 1 && teaHouse.value.id == 0) {
|
||
toast.info('请选择门店地址')
|
||
return
|
||
}
|
||
|
||
if (serviceTypeValue.value == 2 && address.value.id == 0) {
|
||
toast.info('请选择上门服务地址')
|
||
return
|
||
}
|
||
|
||
if (bill.value.service.num == 0) {
|
||
toast.info('请选择预定时间')
|
||
return
|
||
}
|
||
|
||
if (selectedTea.value.length == 0) {
|
||
toast.info('请选择茶艺时服务')
|
||
return
|
||
}
|
||
|
||
const params = {
|
||
teamaster_id: info.id,
|
||
address_id: address.value.id,
|
||
start_time: bill.value.service.startTime,
|
||
end_time: bill.value.service.endTime,
|
||
nums: servicePeople.value,
|
||
tea_id: selectedTea.value.join(','),
|
||
service_type: serviceTypeValue.value,
|
||
store_id: teaHouse.value.id,
|
||
latitude: uni.getStorageSync('latitude') || 0,
|
||
longitude: uni.getStorageSync('longitude') || 0,
|
||
remark: orderRemarks.value,
|
||
coupon_id: selectedCoupon.value.id || 0,
|
||
hours: bill.value.service.num
|
||
}
|
||
|
||
try {
|
||
const res = await createTeaSpecialistOrder(params)
|
||
|
||
uni.$on('payment', params => {
|
||
console.log("🚀 ~ params:", params)
|
||
setTimeout(() => {
|
||
uni.$off("payment")
|
||
if (params.result) {
|
||
uni.redirectTo({
|
||
url: `/pages/notice/reserve?type=teaSpecialist&orderId=${params.orderId}`
|
||
})
|
||
} else {
|
||
uni.redirectTo({
|
||
url: '/bundle/order/tea-specialist/order-list'
|
||
})
|
||
}
|
||
}, 1000)
|
||
})
|
||
|
||
setTimeout(() => {
|
||
router.navigateTo(`/pages/cashier/cashier?from=${OrderType.TeaSpecialist}&orderId=${res.id}&teaSpecialistId=${info.id}&teaSpecialistName=${info.name}`)
|
||
}, 800)
|
||
} catch (error) {
|
||
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))
|
||
if (bill.value.coupon > 0 ) {
|
||
total + bill.value.coupon
|
||
return total - bill.value.coupon
|
||
}
|
||
return total
|
||
})
|
||
|
||
watch(billTotal, (val) => {
|
||
bill.value.total = val
|
||
})
|
||
</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;
|
||
}
|
||
}
|
||
}
|
||
|
||
.swiper-service {
|
||
content: " ";
|
||
display: block;
|
||
background-color: #4C9F44;
|
||
width: 152rpx;
|
||
height: 56rpx;
|
||
position: absolute;
|
||
left: 0;
|
||
top: 50%;
|
||
transform: translateY(-50%);
|
||
border-radius: 20rpx;
|
||
transition: all 0.3s ease;
|
||
z-index: 0;
|
||
}
|
||
</style> |