761 lines
34 KiB
Vue
761 lines
34 KiB
Vue
<route lang="jsonc" type="page">
|
||
{
|
||
"needLogin": true,
|
||
"layout": "default",
|
||
"style": {
|
||
"navigationStyle": "custom"
|
||
}
|
||
}
|
||
</route>
|
||
|
||
<template>
|
||
<view class="pb-254rpx">
|
||
<!-- 一键续订 -->
|
||
<renew-time v-model="showRenewTimePopup" @selectedTime="OrderDetail.handleChooseRenewTime"></renew-time>
|
||
|
||
<!-- 续订成功 -->
|
||
<wd-popup v-model="showRenewSuccessPopup" lock-scroll custom-style="border-radius: 32rpx 32rpx 0rpx 0rpx;" position="bottom">
|
||
<view class="relative pt-64rpx pb-74rpx">
|
||
<view class="flex justify-center items-center">
|
||
<view class="bg-[#4C9F44] w-280rpx rounded-280rpx">
|
||
<wd-img width="280rpx" height="280rpx" :src="`${OSS}images/reserve_room/reserve_room_image7.png`"/>
|
||
</view>
|
||
</view>
|
||
<view class="text-[#303133] text-36rpx leading-46rpx text-center mt-48rpx">包间续订成功</view>
|
||
<view class="text-[#9CA3AF] text-28rpx leading-44rpx mt-16rpx text-center">可以刷新页面查看预约时间</view>
|
||
<view class="w-630rpx h-90rpx leading-90rpx text-center bg-[#4C9F44] rounded-8rpx text-[#fff] mt-174rpx mx-auto" @click="showRenewSuccessPopup = false">好的</view>
|
||
</view>
|
||
</wd-popup>
|
||
|
||
<!-- 取消订单 -->
|
||
<wd-message-box selector="wd-message-box-slot"></wd-message-box>
|
||
|
||
<!-- 费用详情 -->
|
||
<wd-popup v-model="showCostPopup" lock-scroll custom-style="border-radius: 32rpx 32rpx 0rpx 0rpx;" position="bottom">
|
||
<view class="relative pb-30rpx">
|
||
<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 pt-50rpx pb-40rpx">费用明细</view>
|
||
<view class="collapse">
|
||
<view class="px-30rpx">
|
||
<view class="flex justify-between items-center">
|
||
<view class="font-bold text-30rpx leading-42rpx text-[#303133]">茶室费</view>
|
||
<view class="font-bold text-30rpx leading-42rpx text-[#303133] flex items-center">
|
||
￥640.00
|
||
</view>
|
||
</view>
|
||
<view class="rounded-16rpx py-20rpx">
|
||
<view class="mb-26rpx">
|
||
<view class="font-400 text-28rpx leading-40rpx text-[#303133] flex items-center justify-between mb-16rpx">
|
||
<view>茶室费（￥160元/小时）</view>
|
||
<view>x4</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
|
||
<view class="px-30rpx">
|
||
<view class="flex justify-between items-center">
|
||
<view class="font-bold text-30rpx leading-42rpx text-[#303133]">优惠</view>
|
||
<view class="font-bold text-30rpx leading-42rpx text-[#303133] flex items-center text-[#4C9F44]">
|
||
-￥148.00
|
||
</view>
|
||
</view>
|
||
<view class="rounded-16rpx pt-20rpx">
|
||
<view class="font-400 text-28rpx leading-40rpx text-[#303133] flex items-center justify-between mb-16rpx">
|
||
<view>优惠券</view>
|
||
<view>-￥20</view>
|
||
</view>
|
||
|
||
<view class="font-400 text-28rpx leading-40rpx text-[#303133] flex items-center justify-between mb-16rpx">
|
||
<view>会员八折</view>
|
||
<view>-￥20</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
<view class="mx-60rpx mt-30rpx">
|
||
<wd-gap height="2rpx" bg-color="#F6F7F9"></wd-gap>
|
||
</view>
|
||
<view class="mx-60rpx text-30rpx text-[#303133] leading-42rpx flex items-center justify-between mt-30rpx">
|
||
<view>实际退款</view>
|
||
<view>￥698.90</view>
|
||
</view>
|
||
</view>
|
||
</wd-popup>
|
||
|
||
<view>
|
||
<navbar :title="title" custom-class='!bg-[#F6F7F8]' v-if="!shareSource"></navbar>
|
||
<wd-navbar v-if="shareSource == 'TransferOrder'" safeAreaInsetTop custom-class='!bg-[#F6F7F8]' :bordered="false" placeholder left-text="返回" left-arrow>
|
||
<template #capsule>
|
||
<view class="flex items-center">
|
||
<wd-navbar-capsule @back="router.navigateBack" @back-home="router.reLaunch('/pages/index/index')" />
|
||
<view class="ml-20rpx">{{title}}</view>
|
||
</view>
|
||
</template>
|
||
</wd-navbar>
|
||
</view>
|
||
|
||
<!-- 描述信息 -->
|
||
<view class="text-[#909399] text-26rpx leading-36rpx mb-40rpx mt-20rpx">
|
||
<view class="ml-80rpx" v-if="orderStatus === TeaRoomOrderStatus.Pay || orderStatus === TeaRoomOrderStatus.Consumption">使用过程中有任何问题，请联系客服</view>
|
||
<!-- <view class="flex items-center justify-center" v-if="orderStatus === TeaRoomOrderStatus.Pending">
|
||
<view class="flex items-center mr-6rpx">
|
||
<wd-img width="36rpx" height="36rpx" :src="`${OSS}icon/icon_time.png`"/>
|
||
</view>
|
||
<view class="flex items-center text-26rpx leading-36rpx text-[#909399]">
|
||
<view>还剩</view>
|
||
<view class="mx-6rpx">
|
||
<wd-count-down :time="order.time1" custom-class="!text-[#FF5951]" />
|
||
</view>
|
||
<view>订单自动取消</view>
|
||
</view>
|
||
</view> -->
|
||
<view class="ml-80rpx" v-if="orderStatus === TeaRoomOrderStatus.Finished">品一口香茗，让生活慢下来，从一杯好茶开始</view>
|
||
<view v-if="orderStatus === TeaRoomOrderStatus.Refunded" class="text-center mt-14rpx">
|
||
<view class="text-40rpx text-[#303133] leading-56rpx">
|
||
<view>退款成功￥{{ order.order_amount }}</view>
|
||
</view>
|
||
<view class="text-28rpx text-[#606266] leading-54rpx mt-20rpx">谢谢您的信任，我们一定会做的更好</view>
|
||
<view class="text-24rpx text-[#606266] leading-34rpx mt-12rpx">{{ order.update_dtime }}</view>
|
||
</view>
|
||
</view>
|
||
|
||
<view class="mx-30rpx coupon-bg" >
|
||
<view class="flex items-center px-30rpx pt-30rpx pb-40rpx">
|
||
<view class="mr-30rpx">
|
||
<wd-img width="190rpx" height="190rpx" :src="order.room_msg.img" mode="scaleToFill" radius="10rpx"></wd-img>
|
||
</view>
|
||
<view class="flex-1">
|
||
<view class="flex justify-between items-center" @click="OrderDetail.handleToStore">
|
||
<view class="flex items-center font-bold text-30rpx leading-42rpx text-[#303133] mr-10rpx line-1 w-300rpx">
|
||
<view class="line-1">
|
||
{{ order.room_msg.title }}
|
||
</view>
|
||
<wd-icon name="chevron-right" size="32rpx"></wd-icon>
|
||
</view>
|
||
<view class="text-26rpx leading-36rpx text-[#909399]">￥{{ order.room_all_price }}</view>
|
||
</view>
|
||
<view class="flex justify-between items-center text-26rpx leading-36rpx text-[#909399] mt-18rpx">
|
||
￥{{ order.room_price }}/小时
|
||
</view>
|
||
<!-- 等待付款不显示实付金额 -->
|
||
<view class="text-[#606266] text-right mt-26rpx" v-if="orderStatus !== TeaRoomOrderStatus.Pending">
|
||
<text class="text-24rpx leading-34rpx mr-12rpx">实付</text>
|
||
<text class="tetx-32rpx leading-36rpx">￥{{ order.order_amount }}</text>
|
||
<!-- <wd-icon name="chevron-right" size="32rpx"></wd-icon> -->
|
||
</view>
|
||
</view>
|
||
</view>
|
||
|
||
<view class="mt-28rpx pb-36rpx">
|
||
<view class="text-30rpx leading-42rpx text-[#303133] px-30rpx">预约信息</view>
|
||
<view class="font-500 text-26rpx leading-48rpx text-[#606266] mt-20rpx">
|
||
<view class="mb-20rpx px-30rpx">预约时间：{{ order.day_time }} {{ order?.start_time }}-{{ order?.end_time }}</view>
|
||
<view class="flex justify-between items-center pl-30rpx" >
|
||
<view>
|
||
预约时长：{{ Number(order.hours) + Number(order.renew_hour || 0) }}小时
|
||
</view>
|
||
<!-- 已预约和消费中显示一键续订 -->
|
||
<view v-if="orderStatus === TeaRoomOrderStatus.Pay || orderStatus === TeaRoomOrderStatus.Consumption"
|
||
class="bg-[#4C9F44] rounded-[100rpx_0rpx_0rpx_100rpx] font-bold text-28rpx leading-40rpx text-[#fff] w-170rpx h-56rpx flex justify-center items-center"
|
||
@click="showRenewTimePopup = true;">
|
||
一键续订
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
|
||
<!-- 已预约和消费中显示开门锁 -->
|
||
<view class="bg-white rounded-16rpx mx-30rpx mt-20rpx" v-if="orderStatus === TeaRoomOrderStatus.Pay || orderStatus === TeaRoomOrderStatus.Consumption">
|
||
<view class="pt-32rpx text-[#303133] text-32rpx leading-44rpx px-30rpx">开门锁</view>
|
||
<view class="mt-20rpx">
|
||
<wd-gap height="2rpx" bg-color="#F6F7F9"></wd-gap>
|
||
</view>
|
||
<view class="">
|
||
<view class="flex justify-between items-center mt-18rpx pb-18rpx px-62rpx">
|
||
<view class="w-224rpx">
|
||
<view class="relative h-64rpx" @click="OrderDetail.handleOpenDoorLock('door')">
|
||
<wd-img width="224rpx" height="64rpx" :src="`${OSS}images/reserve_room/reserve_room_image5.png`"/>
|
||
<view class="text-[#4C9F44] font-bold text-32rpx leading-44rpx absolute top-[50%] transform translate-y-[-50%] right-22rpx">点击开锁</view>
|
||
</view>
|
||
<view class="text-[#303133] text-30rpx leading-42rpx mt-16rpx text-center">大门锁</view>
|
||
<view class="text-[#606266] text-26rpx leading-48rpx mt-4rpx text-center font-500">
|
||
<template v-if="order.is_lockpwd == 1">
|
||
{{ order.gate_key == '免密' ? '免密' : `手动输入 ${order.gate_key}` }}
|
||
</template>
|
||
<template v-else>
|
||
正在生成密码
|
||
</template>
|
||
</view>
|
||
</view>
|
||
<view class="border-r-2rpx border-r-solid border-r-[#F6F7F9] h-224rpx"></view>
|
||
<view class="w-224rpx" @click="OrderDetail.handleOpenDoorLock('room')">
|
||
<view class="relative h-64rpx">
|
||
<wd-img width="224rpx" height="64rpx" :src="`${OSS}images/reserve_room/reserve_room_image6.png`"/>
|
||
<view class="text-[#4C9F44] font-bold text-32rpx leading-44rpx absolute top-[50%] transform translate-y-[-50%] right-22rpx">点击开锁</view>
|
||
</view>
|
||
<view class="text-[#303133] text-30rpx leading-42rpx mt-16rpx text-center">房间锁</view>
|
||
<view class="text-[#606266] text-26rpx leading-48rpx mt-4rpx text-center font-500">
|
||
<template v-if="order.is_lockpwd == 1">
|
||
{{ order.room_key == '免密' ? '免密' : `手动输入 ${order.room_key}` }}
|
||
</template>
|
||
<template v-else>
|
||
正在生成密码
|
||
</template>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
|
||
<!-- 适用门店 -->
|
||
<view class="bg-white rounded-16rpx px-30rpx pb-32rpx mx-30rpx mt-20rpx">
|
||
<view class="pt-32rpx text-[#303133] text-32rpx leading-44rpx">适用门店</view>
|
||
<view class="mt-26rpx flex items-center">
|
||
<view class="mr-24rpx">
|
||
<wd-img width="170rpx" height="170rpx" :src="order.store_msg.image" radius="10rpx"></wd-img>
|
||
</view>
|
||
<view class="flex-1 flex justify-between items-center relative">
|
||
<view class="">
|
||
<view class="text-[#303133] text-30rpx leading-40rpx line-2" @click="handleToTRStoreHooks(order.store_msg.id, order.store_msg.operation_type)">{{ order.store_msg.name }}</view>
|
||
<view class="mt-26rpx text-[#909399] text-24rpx leading-34rpx">距您{{ order.distance }}km</view>
|
||
<view class="flex items-center mt-14rpx">
|
||
<view class="mr-8rpx">
|
||
<wd-img width="28rpx" height="28rpx" :src="`${OSS}icon/icon_location.png`"/>
|
||
</view>
|
||
<view class="ml-2rpx text-26rpx text-[#606266] line-1 w-300rpx">{{ order.store_msg.address }}</view>
|
||
</view>
|
||
</view>
|
||
<view class="flex absolute top-1/2 right-0 -translate-y-1/2">
|
||
<view class="text-center mr-20rpx" @click="OrderDetail.handleLocation">
|
||
<wd-img width="64rpx" height="64rpx" :src="`${OSS}icon/icon_nav.png`"/>
|
||
</view>
|
||
<view class="text-center" @click="OrderDetail.handleCallPhone">
|
||
<wd-img width="64rpx" height="64rpx" :src="`${OSS}icon/icon_phone.png`"/>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
|
||
<!-- 订单信息 -->
|
||
<view class="bg-white rounded-16rpx px-30rpx py-34rpx mx-30rpx mt-20rpx">
|
||
<view class="text-[#303133] text-32rpx leading-44rpx">订单信息</view>
|
||
<view class="text-28rpx leading-40rpx text-[#606266] flex items-center justify-between mt-22rpx">
|
||
<view>订单编号</view>
|
||
<view>
|
||
<text>{{ order.order_sn }}</text>
|
||
<wd-divider vertical />
|
||
<text class="text-[#4C9F44]" @click="copy(order.order_sn)">复制</text>
|
||
</view>
|
||
</view>
|
||
<view class="text-28rpx leading-40rpx text-[#606266] flex items-center justify-between mt-22rpx" v-if="orderStatus != TeaRoomOrderStatus.Pending && order.pay_way">
|
||
<view>交易方式</view>
|
||
<view>{{ order.pay_way_title }}</view>
|
||
</view>
|
||
<view class="text-28rpx leading-40rpx text-[#606266] flex items-center justify-between mt-22rpx">
|
||
<view>创建时间</view>
|
||
<view>{{ order.dtime }}</view>
|
||
</view>
|
||
<view class="text-28rpx leading-40rpx text-[#606266] flex items-center justify-between mt-22rpx" v-if="orderStatus != TeaRoomOrderStatus.Pending && orderStatus != TeaRoomOrderStatus.Cancelled && order.pay_way_title">
|
||
<view>付款时间</view>
|
||
<view>{{ order.update_dtime }}</view>
|
||
</view>
|
||
</view>
|
||
|
||
<!-- 操作按钮 -->
|
||
<view class="w-full fixed bottom-0 left-0 right-0 bg-white h-152rpx" v-if="orderStatus !== TeaRoomOrderStatus.Refunded && orderStatus !== TeaRoomOrderStatus.Pending">
|
||
<!-- 已预约 -->
|
||
<view class="flex items-center justify-center text-32rpx leading-44rpx leading-90rpx text-center !mt-34rpx" v-if="orderStatus == TeaRoomOrderStatus.Pay">
|
||
<wd-button custom-class="!text-32rpx !w-630rpx !h-90rpx !bg-[#4C9F44] !rounded-8rpx !text-[#fff]" open-type="share">分享房间给朋友</wd-button>
|
||
</view>
|
||
|
||
<!-- 待付款 -->
|
||
<!-- <view class="flex items-center justify-between mx-58rpx mt-34rpx" v-if="orderStatus == TeaRoomOrderStatus.Pending">
|
||
<view class="flex items-center">
|
||
<view class="text-28rpx leading-40rpx text-[#606266] mr-16rpx" @click="OrderDetail.handleCancelOrder">取消订单</view>
|
||
</view>
|
||
<view class="w-360rpx h-90rpx leading-90rpx text-center bg-[#4C9F44] rounded-8rpx text-[#fff]" @click="OrderDetail.handleToPay">立即支付￥{{ order.order_amount }}</view>
|
||
</view> -->
|
||
|
||
<!-- 消费中 -->
|
||
<view class="flex items-center justify-between mx-58rpx mt-34rpx" v-if="orderStatus == TeaRoomOrderStatus.Consumption">
|
||
<view class="flex items-center">
|
||
<!-- 分享出去的订单不要显示申请退款 -->
|
||
<view class="text-28rpx leading-40rpx text-[#606266] mr-16rpx" @click="OrderDetail.handleRefundOrder" v-if="!shareSource">申请退款</view>
|
||
</view>
|
||
<wd-button :custom-class="`!text-32rpx ${shareSource ? '!w-630rpx' : '!w-360rpx'} !h-90rpx !bg-[#4C9F44] !rounded-8rpx !text-[#fff]`" open-type="share">分享房间给朋友</wd-button>
|
||
</view>
|
||
|
||
<!-- 交易完成 -->
|
||
<view @click="OrderDetail.handleAgainReserve" class="text-32rpx leading-44rpx flex items-center justify-center leading-90rpx text-center mt-34rpx"
|
||
v-if="orderStatus === TeaRoomOrderStatus.Finished || orderStatus === TeaRoomOrderStatus.Cancelled">
|
||
<view class="w-630rpx h-90rpx bg-[#4C9F44] rounded-8rpx text-[#fff]">再次预定</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</template>
|
||
|
||
<script lang="ts" setup>
|
||
import { TeaRoomOrderStatusTextValue, TeaRoomOrderStatus } from '@/utils/order'
|
||
import { useMessage } from 'wot-design-uni'
|
||
import {toast} from '@/utils/toast'
|
||
import { getTeaRoomOrderDetail } from '@/api/tea-room'
|
||
import { handleTRCancelOrderHooks, handleTRToPayHooks, handleToTRStoreHooks, handleRefundOrderHooks } from '@/hooks/useOrder'
|
||
import type { ITeaSpecialistOrderDetailsResult } from '@/api/types/tea'
|
||
import { router } from '@/utils/tools'
|
||
import { ReserveServiceCategory, OrderType } from '@/utils/order'
|
||
import type { ITeaSpecialistFuture7DaysResult } from '@/api/types/tea'
|
||
import { getNext7Days, renewTeaRoomOrder } from '@/api/tea-room'
|
||
import { transferOrder } from '@/api/user'
|
||
import { toTimes, copy } from '@/utils/tools'
|
||
import { useUserStore } from '@/store'
|
||
import { PayOrderType } from '@/utils/pay'
|
||
import { openLock } from '@/api/user'
|
||
|
||
|
||
const OSS = inject('OSS')
|
||
const title = ref<string>('')
|
||
const orderStatus = ref<number>(0) // 订单状态：待使用、退款等
|
||
|
||
// 消息弹窗
|
||
const message = useMessage('wd-message-box-slot')
|
||
|
||
|
||
// 续订包间
|
||
const showRenewPopup = ref<boolean>(false)
|
||
const timeList = [
|
||
{id: 1, time: '1小时'},
|
||
{id: 2, time: '2小时'},
|
||
{id: 3, time: '3小时'},
|
||
{id: 4, time: '4小时'},
|
||
{id: 5, time: '5小时'},
|
||
{id: 6, time: '6小时'},
|
||
]
|
||
const selectedRenewTime = ref<number>(0) // 选择的续订时间
|
||
const pay = ref<number>(1) // 支付方式
|
||
const payList = ref<Array<any>>([
|
||
{
|
||
id: 1,
|
||
name: '平台余额',
|
||
icon: `${OSS}icon/icon_platform_balance.png`,
|
||
balance: 0,
|
||
value: 1
|
||
},
|
||
{
|
||
id: 3,
|
||
name: '微信支付',
|
||
icon: `${OSS}icon/icon_weichat.png`,
|
||
balance: 0,
|
||
value: 3
|
||
}
|
||
])
|
||
const showRenewTimePopup = ref<boolean>(false) // 显示续订时间选择弹窗
|
||
const showRenewSuccessPopup = ref<boolean>(false)
|
||
|
||
// 选择预定时间
|
||
const showBookTimePopup = ref<boolean>(false)
|
||
const sevenDay = reactive<ITeaSpecialistFuture7DaysResult>({
|
||
minimum_time: 0,
|
||
time: []
|
||
})
|
||
const reserveTime = ref<Array<any>>([])
|
||
|
||
// 订单倒计时取消
|
||
const time = ref<number>(30 * 60 * 60 * 1000)
|
||
|
||
// 费用明细
|
||
const showCostPopup = ref<boolean>(false) // 是否显示退款详情弹出框
|
||
|
||
// 订单
|
||
const orderId = ref<number>(0)
|
||
const order = ref<ITeaSpecialistOrderDetailsResult>({
|
||
id: 0,
|
||
order_amount: '',
|
||
order_sn: '',
|
||
store_id: 0,
|
||
room_msg: {
|
||
id: 0,
|
||
price: 0,
|
||
img: '',
|
||
title: '',
|
||
},
|
||
store_msg: {
|
||
id: 0,
|
||
address: '',
|
||
name: '',
|
||
operation_type: 1,
|
||
image: '',
|
||
latitude: '',
|
||
longitude: '',
|
||
contact_phone: ''
|
||
},
|
||
time1: 0,
|
||
order_status: 0,
|
||
room_all_price: 0,
|
||
room_price: 0,
|
||
day_time: '',
|
||
start_time: '',
|
||
end_time: '',
|
||
hours: 0,
|
||
distance: 0,
|
||
pay_way: 0,
|
||
pay_way_title: '',
|
||
dtime: '',
|
||
update_dtime: '',
|
||
renew_price: 0,
|
||
renew_hour: 0,
|
||
renew_dtime: {
|
||
start_time: '',
|
||
end_time: '',
|
||
renew_price: 0
|
||
},
|
||
is_lockpwd: 0,
|
||
gate_key: '',
|
||
room_key: ''
|
||
|
||
})
|
||
|
||
// 一键续订的时间
|
||
const renewHour = ref<number>(0)
|
||
|
||
// 获取当前年月日，格式：YYYY-MM-DD
|
||
const now = new Date();
|
||
const year = now.getFullYear();
|
||
const month = String(now.getMonth() + 1).padStart(2, '0');
|
||
const day = String(now.getDate()).padStart(2, '0');
|
||
const currentDate = `${year}-${month}-${day}`;
|
||
|
||
// 页面分享来源
|
||
const shareSource = ref<string>('')
|
||
|
||
onLoad((args) => {
|
||
shareSource.value = args.shareSource || ''
|
||
orderId.value = args.orderId
|
||
|
||
// 这里写判断是因为要处理页面分享出去的时候有这个参数但是没有token会触发网络请求跳转到登录页，再加上页面登录权限路由
|
||
// 就会出现2次跳转登录页,这个是正常加载订单详情
|
||
if (args.orderId && shareSource.value != 'TransferOrder') {
|
||
// 获取订单详情
|
||
OrderDetail.handleInit()
|
||
}
|
||
|
||
// 这个是用户分享登录之后再次进入小程序加载事件
|
||
const token = uni.getStorageSync('token')
|
||
if (token && shareSource.value === 'TransferOrder') {
|
||
// 处理转让订单
|
||
OrderDetail.handleInit()
|
||
OrderDetail.handleTransferOrder()
|
||
}
|
||
|
||
// 如果是从分享进入的未登录的情况下（TransferOrder），需要转让订单
|
||
uni.$on('transferOrder', (params) => {
|
||
// 处理未登录的情况下
|
||
orderId.value = params?.orderId
|
||
shareSource.value = params?.shareSource
|
||
uni.$off('transferOrder')
|
||
|
||
OrderDetail.handleInit()
|
||
OrderDetail.handleTransferOrder()
|
||
})
|
||
})
|
||
|
||
onUnload(() => {
|
||
uni.$off('refreshOrderDetail')
|
||
})
|
||
|
||
onShareAppMessage(async (e) => {
|
||
if (e.from === 'button') {
|
||
return {
|
||
title: `我在${order.value.store_msg.name}预定了${order.value.room_msg.title}，一起来吧！`,
|
||
// path: `/pages/share/tea-room/share-order-detail?orderId=${orderId.value}&shareSource=TransferOrder`,
|
||
path: `/bundle/order/tea-room/order-detail?orderId=${orderId.value}&shareSource=TransferOrder`,
|
||
}
|
||
}
|
||
})
|
||
|
||
const OrderDetail = {
|
||
/**
|
||
* 获取订单详情
|
||
*/
|
||
handleInit: async () => {
|
||
// 这里单独处理下经纬度，因为分享的时候没有经纬度
|
||
const res = await getTeaRoomOrderDetail({
|
||
id: orderId.value,
|
||
latitude: uni.getStorageSync('latitude') || import.meta.env.VITE_DEFAULT_LATITUDE,
|
||
longitude: uni.getStorageSync('longitude') || import.meta.env.VITE_DEFAULT_LONGITUDE,
|
||
})
|
||
order.value = res.details
|
||
console.log("🚀 ~ order.value :", order.value )
|
||
title.value = TeaRoomOrderStatusTextValue[order.value.order_status].title || '订单详情'
|
||
orderStatus.value = order.value.order_status
|
||
|
||
|
||
// 预定时间
|
||
const next7 = await getNext7Days(order.value.room_msg.id, currentDate)
|
||
Object.assign(sevenDay, next7)
|
||
},
|
||
|
||
/**
|
||
* 支付订单
|
||
*/
|
||
handleToPay: () => {
|
||
uni.$on('refreshOrderDetail', () => {
|
||
OrderDetail.handleInit()
|
||
uni.$off('refreshOrderDetail')
|
||
})
|
||
|
||
handleTRToPayHooks(orderId.value, order.value.store_msg.name, order.value.store_msg.id)
|
||
},
|
||
|
||
/**
|
||
* 获取订单详情
|
||
*/
|
||
handleCancelOrder: () => {
|
||
message.confirm({
|
||
title: '确定取消订单？',
|
||
msg: '取消订单后无法恢复，优惠券可退回',
|
||
confirmButtonText: '确定',
|
||
cancelButtonText: '取消',
|
||
cancelButtonProps: {
|
||
customClass: '!bg-[#F6F7F8] !text-[#303133] !text-32rpx !leading-44rpx !rounded-8rpx',
|
||
},
|
||
confirmButtonProps: {
|
||
customClass: '!bg-[#4C9F44] !text-[#fff] !text-32rpx !leading-44rpx !rounded-8rpx',
|
||
}
|
||
}).then((res) => {
|
||
if (res.action == 'confirm') {
|
||
// 点击确认按钮回调事件
|
||
uni.$on('refreshOrderDetail', () => {
|
||
OrderDetail.handleInit()
|
||
uni.$off('refreshOrderDetail')
|
||
})
|
||
|
||
handleTRCancelOrderHooks(orderId.value)
|
||
}
|
||
toast.info('订单取消成功')
|
||
}).catch(() => {
|
||
// 点击取消按钮回调事件
|
||
})
|
||
},
|
||
|
||
/**
|
||
* 再次预定
|
||
*/
|
||
handleAgainReserve: () => {
|
||
console.log("🚀 ~ value.room_msg.id:", order.value.room_msg.id)
|
||
router.navigateTo(
|
||
`/bundle/tea-room/detail?storeId=${order.value.store_msg.id}&id=${order.value.room_msg.id}&type=${ReserveServiceCategory.ReserveRoom}&price=${order.value.room_msg.price}`
|
||
)
|
||
},
|
||
|
||
/**
|
||
* 确认一键续订
|
||
*/
|
||
handleRenewReserve: async () => {
|
||
// uni.showLoading({ title: '加载中...' })
|
||
|
||
// try {
|
||
// await renewTeaRoomOrder({
|
||
// id: orderId.value,
|
||
// renew_hour: renewHour,
|
||
// })
|
||
|
||
// uni.$on('payment', params => {
|
||
// uni.$off("payment")
|
||
// if (params.result) {
|
||
// OrderDetail.handleInit()
|
||
// showRenewSuccessPopup.value = true
|
||
// } else {
|
||
// message.alert({
|
||
// title: '提示',
|
||
// msg: '您已取消续订',
|
||
// confirmButtonText: '确定',
|
||
// confirmButtonProps: {
|
||
// customClass: '!bg-[#4C9F44] !text-[#fff] !text-32rpx !leading-44rpx !rounded-8rpx',
|
||
// }
|
||
// })
|
||
// }
|
||
// })
|
||
|
||
// uni.hideLoading()
|
||
// showRenewPopup.value = false
|
||
|
||
// router.navigateTo(
|
||
// `/pages/cashier/cashier?from=${OrderType.TeaRoomOrder}&renew=renewTeaRoomOrder&orderId=${orderId.value}&teaRoomName=${order.value.store_msg.name}&storeId=${order.value.store_msg.id}`
|
||
// )
|
||
// } catch (err) {
|
||
// uni.hideLoading()
|
||
// toast.info('续订失败')
|
||
// return false
|
||
// }
|
||
},
|
||
|
||
/**
|
||
* 跳转到对对应室的详情页
|
||
*/
|
||
handleToStore: () => {
|
||
handleToTRStoreHooks(order.value.store_id, order.value.store_msg.operation_type)
|
||
},
|
||
|
||
/**
|
||
* 处理导航逻辑
|
||
*/
|
||
handleLocation: () => {
|
||
uni.openLocation({
|
||
latitude: Number(order.value.store_msg.latitude),
|
||
longitude: Number(order.value.store_msg.longitude),
|
||
name: order.value.store_msg.name,
|
||
address: order.value.store_msg.address,
|
||
scale: 18
|
||
})
|
||
},
|
||
|
||
/**
|
||
* 处理拨打电话逻辑
|
||
*/
|
||
handleCallPhone: () => {
|
||
uni.makePhoneCall({
|
||
phoneNumber: order.value.store_msg.contact_phone
|
||
})
|
||
},
|
||
|
||
/**
|
||
* 修改一键续订时间
|
||
*/
|
||
handleChooseRenewTime: async (item) => {
|
||
uni.showLoading({ title: '加载中...', mask: true })
|
||
|
||
try {
|
||
const res = await renewTeaRoomOrder({
|
||
id: orderId.value,
|
||
renew_hour: item.value,
|
||
})
|
||
|
||
// 支付后的处理
|
||
uni.$on('payment', params => {
|
||
uni.$off("payment")
|
||
if (params.result) {
|
||
toast.info('续订成功')
|
||
} else {
|
||
toast.info('续订失败')
|
||
}
|
||
OrderDetail.handleInit()
|
||
})
|
||
|
||
uni.hideLoading()
|
||
router.navigateTo(
|
||
`/pages/cashier/cashier?from=${OrderType.TeaRoomOrder}&renew=renewOrder&renewPrice=${res.price}&orderId=${res.order_id}&name=${order.value.store_msg.name}&storeId=${order.value.store_msg.id}`
|
||
)
|
||
} catch(e) {
|
||
uni.hideLoading()
|
||
return false
|
||
}
|
||
},
|
||
|
||
/**
|
||
* 转让订单
|
||
*/
|
||
handleTransferOrder: async () => {
|
||
message.confirm({
|
||
title: '提示',
|
||
msg: '是否接收该笔订单？',
|
||
confirmButtonText: '确定',
|
||
cancelButtonText: '取消',
|
||
cancelButtonProps: {
|
||
customClass: '!bg-[#F6F7F8] !text-[#303133] !text-32rpx !leading-44rpx !rounded-8rpx',
|
||
},
|
||
confirmButtonProps: {
|
||
customClass: '!bg-[#4C9F44] !text-[#fff] !text-32rpx !leading-44rpx !rounded-8rpx',
|
||
}
|
||
}).then((res) => {
|
||
if (res.action == 'confirm') {
|
||
console.log('开始转让订单3')
|
||
|
||
transferOrder(orderId.value).then(res => {
|
||
console.log('开始转让订单4', res)
|
||
uni.removeStorageSync('transferOrder')
|
||
toast.success('订单接收成功')
|
||
router.redirectTo('/bundle/order/tea-room/order-list', 500)
|
||
})
|
||
}
|
||
}).catch(() => {})
|
||
},
|
||
|
||
/**
|
||
* 申请退款
|
||
*/
|
||
handleRefundOrder: () => {
|
||
message.confirm({
|
||
title: '提示',
|
||
msg: '是否申请退款？',
|
||
confirmButtonText: '确定',
|
||
cancelButtonText: '取消',
|
||
cancelButtonProps: {
|
||
customClass: '!bg-[#F6F7F8] !text-[#303133] !text-32rpx !leading-44rpx !rounded-8rpx',
|
||
},
|
||
confirmButtonProps: {
|
||
customClass: '!bg-[#4C9F44] !text-[#fff] !text-32rpx !leading-44rpx !rounded-8rpx',
|
||
}
|
||
}).then(async (res) => {
|
||
if (res.action == 'confirm') {
|
||
// 改为当前退款订单ID
|
||
let res = await handleRefundOrderHooks(order.value.id, PayOrderType.TeaRoom)
|
||
console.log("🚀 ~ res:", res)
|
||
if (res) {
|
||
OrderDetail.handleInit()
|
||
uni.$emit('refreshOrderList')
|
||
}
|
||
}
|
||
}).catch(() => {})
|
||
},
|
||
|
||
/**
|
||
* 开锁
|
||
* @param type 锁的类型 room-房间锁 door-大门锁
|
||
*/
|
||
handleOpenDoorLock: async (lockType: string) => {
|
||
uni.showLoading({ title: '开锁中...', mask: true })
|
||
try {
|
||
const type = lockType === 'door' ? 1 : 2
|
||
await openLock(orderId.value, type)
|
||
uni.hideLoading()
|
||
toast.info('开锁成功')
|
||
} catch(e) {
|
||
uni.hideLoading()
|
||
return false
|
||
}
|
||
}
|
||
}
|
||
</script>
|
||
|
||
|
||
<style lang="scss">
|
||
page {
|
||
background-color: $cz-page-background;
|
||
}
|
||
|
||
.coupon-bg {
|
||
background-image: url(#{$OSS}images/order/order_image2.png);
|
||
background-repeat: no-repeat;
|
||
background-size: 100% 100%;
|
||
}
|
||
|
||
.collapse {
|
||
:deep() {
|
||
.wd-collapse-item::after,
|
||
.wd-collapse-item__header.is-expanded::after {
|
||
background: none !important;
|
||
}
|
||
|
||
.wd-collapse-item__body {
|
||
padding-top: 0 !important;
|
||
padding-bottom: 0 !important;
|
||
}
|
||
}
|
||
}
|
||
</style>
|