359 lines
16 KiB
Vue
359 lines
16 KiB
Vue
<route lang="jsonc" type="page">
|
||
{
|
||
"layout": "default",
|
||
"style": {
|
||
"navigationStyle": "custom"
|
||
}
|
||
}
|
||
</route>
|
||
|
||
<template>
|
||
<view class="pb-254rpx">
|
||
<!-- 申请退款 -->
|
||
<wd-message-box selector="wd-message-box-slot"></wd-message-box>
|
||
|
||
<view>
|
||
<navbar :title="title" custom-class='!bg-[#F6F7F8]'></navbar>
|
||
</view>
|
||
|
||
<view class="text-[#909399] text-26rpx leading-36rpx mx-102rpx mb-40rpx">
|
||
<!-- TODO 暂时隐藏 -->
|
||
<!-- <text v-if="orderStatus === GroupComboOrderStatus.ToUse">请在2025.12.31(含)前使用</text> -->
|
||
<text v-if="orderStatus === GroupComboOrderStatus.Used">感谢购买，期待再次光临！</text>
|
||
<view v-if="orderStatus === GroupComboOrderStatus.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="">
|
||
<!-- 待使用下显示 -->
|
||
<view class="mx-30rpx" v-if="orderStatus === GroupComboOrderStatus.ToUse">
|
||
<view class="bg-white rounded-16rpx p-30rpx">
|
||
<view class="flex items-center">
|
||
<view class="mr-30rpx">
|
||
<wd-img width="190rpx" height="190rpx" :src="order.group.img" mode="scaleToFill"></wd-img>
|
||
</view>
|
||
<view class="flex-1">
|
||
<view class="flex justify-between items-center" @click="handleToTGComboHooks(order.store.id, order.group.id)">
|
||
<view class="font-bold text-30rpx leading-42rpx text-[#303133] mr-10rpx w-362rpx line-1">{{ order.group.title }}</view>
|
||
<wd-icon name="chevron-right" size="32rpx"></wd-icon>
|
||
</view>
|
||
<view class="flex justify-between items-center text-26rpx leading-36rpx text-[#909399] mt-18rpx">
|
||
<view>{{ order.group.hour }}小时</view>
|
||
<view>x1</view>
|
||
</view>
|
||
<view class="text-[#606266] text-right mt-26rpx">
|
||
<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-30rpx font-500 leading-48rpx" v-if="order.store.operation_type === StoreType.Direct">
|
||
<!-- TODO 暂时隐藏 -->
|
||
<!-- <view class="text-26rpx text-[#606266]">有效期：2025.04.04-2025.12.31</view> -->
|
||
<view class="text-28rpx text-[#303133] mt-18rpx">
|
||
<text class="mr-20rpx">券码 {{ order.user_group.qr_sn }}</text>
|
||
<text class="text-[#4C9F44]" @click="copy(order.user_group.qr_sn)">复制</text>
|
||
</view>
|
||
</view>
|
||
|
||
<!-- 平台团购加盟店待使用 -->
|
||
<view class="mt-30rpx font-500 leading-48rpx" v-if="order.store.operation_type === StoreType.Franchise">
|
||
<view class="px-30rpx mt-60rpx">
|
||
<view class="text-center">
|
||
<!-- <wd-img width="230rpx" height="230rpx" :src="order.user_group.qr_url" enable-preview></wd-img> -->
|
||
<image :src="order.user_group.qr_url" style="width: 230rpx; height: 230rpx" show-menu-by-longpress></image>
|
||
</view>
|
||
<view class="text-28rpx text-[#303133] mt-32rpx text-center">
|
||
<text class="mr-20rpx">券码 {{ order.user_group.qr_sn }}</text>
|
||
<text class="text-[#4C9F44]" @click="copy(order.user_group.qr_sn)">复制</text>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
<!-- 已使用下显示 -->
|
||
<view class="mx-30rpx coupon-bg" v-if="orderStatus === GroupComboOrderStatus.Used">
|
||
<view class="flex items-center px-30rpx pt-30rpx pb-40rpx">
|
||
<view class="mr-30rpx">
|
||
<wd-img width="190rpx" height="190rpx" :src="`${OSS}images/home/home_image5.png`" mode="scaleToFill"></wd-img>
|
||
</view>
|
||
<view class="flex-1">
|
||
<view class="flex justify-between items-center" @click="OrderDetail.handleToRoom">
|
||
<view class="font-bold text-30rpx leading-42rpx text-[#303133] mr-10rpx line-1 w-300rpx">这个是包间的名称</view>
|
||
<wd-icon name="chevron-right" size="32rpx"></wd-icon>
|
||
<view class="text-26rpx leading-36rpx text-[#909399]">￥324</view>
|
||
</view>
|
||
<view class="flex justify-between items-center text-26rpx leading-36rpx text-[#909399] mt-18rpx">
|
||
<view>3小时</view>
|
||
<view>x1</view>
|
||
</view>
|
||
<view class="text-[#606266] text-right mt-26rpx">
|
||
<text class="text-24rpx leading-34rpx mr-12rpx">实付</text>
|
||
<text class="tetx-32rpx leading-36rpx">￥29.32</text>
|
||
<wd-icon name="chevron-right" size="32rpx"></wd-icon>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
|
||
<view class="px-30rpx mt-28rpx pb-48rpx">
|
||
<view class="text-30rpx leading-42rpx text-[#303133]">预约信息</view>
|
||
<view class="font-500 text-26rpx leading-48rpx text-[#606266] mt-20rpx">
|
||
<view class="mb-20rpx">预约时间：2025-03-18 09:00-12:00</view>
|
||
<view>预约时长：3小时</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
|
||
|
||
<!-- 适用门店 -->
|
||
<view class="">
|
||
<use-store :store="order.store"></use-store>
|
||
</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">
|
||
<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">
|
||
<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 !== GroupComboOrderStatus.Refunded && orderStatus !== GroupComboOrderStatus.Refunding">
|
||
<!-- 直营店 -->
|
||
<view class="mt-34rpx" v-if="order.store.operation_type == StoreType.Direct">
|
||
<!-- 待使用 -->
|
||
<view class="text-32rpx leading-44rpx flex items-center justify-center leading-90rpx text-center" v-if="orderStatus === GroupComboOrderStatus.ToUse">
|
||
<view class="w-330rpx h-90rpx bg-[#F6F7F8] rounded-8rpx text-[#303133] mr-30rpx" @click="OrderDetail.handleToRefund">申请退款</view>
|
||
<view class="w-330rpx h-90rpx bg-[#4C9F44] rounded-8rpx text-[#fff]" @click="OrderDetail.handleUsePackage">立即预定</view>
|
||
</view>
|
||
|
||
<!-- 已使用 -->
|
||
<view class="text-32rpx leading-44rpx flex items-center justify-center leading-90rpx text-center" v-if="orderStatus === GroupComboOrderStatus.Used">
|
||
<view class="w-630rpx h-90rpx bg-[#4C9F44] rounded-8rpx text-[#fff]" @click="OrderDetail.handleAgainResrve">再次预定</view>
|
||
</view>
|
||
|
||
<!-- 已退款 -->
|
||
<!-- <view class="text-32rpx leading-44rpx flex items-center justify-center leading-90rpx text-center" v-if="orderStatus === GroupComboOrderStatus.Refunded">
|
||
<view class="w-330rpx h-90rpx bg-[#F6F7F8] rounded-8rpx text-[#303133] mr-30rpx" @click="OrderDetail.handleCallPhone">联系商家</view>
|
||
<view class="w-330rpx h-90rpx bg-[#F6F7F8] rounded-8rpx text-[#303133]" @click="OrderDetail.handleCallPhone">联系平台</view>
|
||
</view> -->
|
||
</view>
|
||
|
||
<!-- 加盟店 -->
|
||
<view class="mt-34rpx" v-if="order.store.operation_type === StoreType.Franchise && orderStatus !== GroupComboOrderStatus.Used">
|
||
<!-- 待使用 -->
|
||
<view class="text-32rpx leading-44rpx flex items-center justify-center leading-90rpx text-center" v-if="orderStatus === GroupComboOrderStatus.ToUse">
|
||
<view class="w-660rpx h-90rpx bg-[#F6F7F8] rounded-8rpx text-[#303133]" @click="OrderDetail.handleToRefund">申请退款</view>
|
||
</view>
|
||
|
||
<!-- 已退款 -->
|
||
<!-- <view class="text-32rpx leading-44rpx flex items-center justify-center leading-90rpx text-center" v-if="orderStatus === GroupComboOrderStatus.Refunded">
|
||
<view class="w-330rpx h-90rpx bg-[#F6F7F8] rounded-8rpx text-[#303133] mr-30rpx" @click="OrderDetail.handleCallPhone">联系商家</view>
|
||
<view class="w-330rpx h-90rpx bg-[#F6F7F8] rounded-8rpx text-[#303133]" @click="OrderDetail.handleCallPhone">联系平台</view>
|
||
</view> -->
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</template>
|
||
|
||
<script lang="ts" setup>
|
||
import { OrderSource, OrderStatusTitle, TeaRoomPackageOrderStatus, GroupComboOrderStatus, GroupComboOrderStatusTextValue } from '@/utils/order'
|
||
import { getTeaRoomPackageOrderDetail } from '@/api/tea-room'
|
||
import type { ITeaRoomPackageOrderDetailsResult } from '@/api/types/tea-room'
|
||
import { toast } from '@/utils/toast'
|
||
import { handleToTRStoreHooks, handleToTGComboHooks, handleRefundOrderHooks } from '@/hooks/useOrder'
|
||
import { router, copy } from '@/utils/tools'
|
||
import UseStore from '@/components/UseStore.vue'
|
||
import { StoreType } from '@/utils/tea'
|
||
import { useMessage } from 'wot-design-uni'
|
||
import { PayOrderType } from '@/utils/pay'
|
||
|
||
const OSS = inject('OSS')
|
||
|
||
const title = ref<string>('')
|
||
const type = ref<string>('') // 订单类型：团购、抖音等
|
||
|
||
// 订单
|
||
const orderId = ref<number>(0)
|
||
const orderStatus = ref<number>(0) // 订单状态：待使用、退款等
|
||
const order = ref<ITeaRoomPackageOrderDetailsResult>({
|
||
id: 0,
|
||
pay: 0,
|
||
pay_way_title: '',
|
||
order_amount: '',
|
||
order_sn: '',
|
||
order_status: 0,
|
||
dtime: '',
|
||
pay_dtime: '',
|
||
coupon_code: '',
|
||
coupon_code_img: '',
|
||
group: {
|
||
id: 0,
|
||
title: '',
|
||
img: '',
|
||
hour: '',
|
||
},
|
||
store: {
|
||
id: 0,
|
||
address: '',
|
||
latitude: '',
|
||
longitude: '',
|
||
name: '',
|
||
image: '',
|
||
contact_phone: '',
|
||
store_id: 0,
|
||
distance: '',
|
||
operation_type: 1
|
||
},
|
||
user_group: {
|
||
qr_url: '',
|
||
qr_sn: '',
|
||
status: 0
|
||
}
|
||
})
|
||
|
||
const message = useMessage('wd-message-box-slot')
|
||
|
||
onLoad((args) => {
|
||
title.value = OrderStatusTitle[OrderSource.Combo][args.orderStatus] || '订单详情'
|
||
|
||
orderId.value = args.orderId
|
||
// 获取订单详情
|
||
OrderDetail.handleInit()
|
||
type.value = args.type
|
||
})
|
||
|
||
const OrderDetail = {
|
||
/**
|
||
* 获取订单详情
|
||
*/
|
||
handleInit: async () => {
|
||
const res = await getTeaRoomPackageOrderDetail({
|
||
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
|
||
title.value = GroupComboOrderStatusTextValue[order.value.user_group.status].title || '订单详情'
|
||
orderStatus.value = order.value.user_group.status
|
||
},
|
||
|
||
/**
|
||
* 跳转到包间详情
|
||
*/
|
||
handleToRoom: () => {
|
||
handleToTRStoreHooks(order.value.store.id, order.value.store.store_id)
|
||
},
|
||
|
||
/**
|
||
* 处理导航逻辑
|
||
*/
|
||
handleLocation: () => {
|
||
uni.openLocation({
|
||
latitude: Number(order.value.store.latitude),
|
||
longitude: Number(order.value.store.longitude),
|
||
name: order.value.store.name,
|
||
address: order.value.store.address,
|
||
scale: 18
|
||
})
|
||
},
|
||
|
||
/**
|
||
* 处理拨打电话逻辑
|
||
*/
|
||
handleCallPhone: () => {
|
||
uni.makePhoneCall({
|
||
phoneNumber: order.value.store.contact_phone
|
||
})
|
||
},
|
||
|
||
/**
|
||
* 申请退款
|
||
*/
|
||
handleToRefund: () => {
|
||
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') {
|
||
let res = handleRefundOrderHooks(order.value.user_group.id, PayOrderType.ComboRefund)
|
||
if (res) {
|
||
OrderDetail.handleInit()
|
||
}
|
||
}
|
||
}).catch(() => {
|
||
// 点击取消按钮回调事件
|
||
})
|
||
},
|
||
|
||
/**
|
||
* 跳转到立即预定页面(选择茶室)
|
||
*/
|
||
handleToChooseTeaRoom: () => {
|
||
router.navigateTo(`/bundle/tea-room/choose-room`)
|
||
},
|
||
|
||
/**
|
||
* 跳转到选择茶室页面
|
||
*/
|
||
handleUsePackage: () => {
|
||
router.navigateTo(`/bundle/tea-room/room?id=${order.value.store.id}&type=${order.value.store.operation_type}`)
|
||
// router.navigateTo(`/bundle/tea-room/choose-room?groupCouponId=${order.value.group.id}&teaRoomId=${order.value.store.id}`)
|
||
},
|
||
|
||
/**
|
||
* 再次预定
|
||
*/
|
||
handleAgainResrve: () => {
|
||
router.navigateTo( `/bundle/tea-room/room?id=${order.value.store.id}&type=${order.value.store.operation_type}`)
|
||
}
|
||
}
|
||
</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%;
|
||
}
|
||
</style>
|