442 lines
22 KiB
Vue
442 lines
22 KiB
Vue
<template>
|
||
<view>
|
||
<!-- 平台团购直营店和加盟店团购套餐 -->
|
||
<view v-if="type === OrderSource.Combo" class="bg-white rounded-10rpx p-30rpx">
|
||
<view class="flex justify-between items-center">
|
||
<view class="flex items-center">
|
||
<view class="mr-10rpx flex items-center">
|
||
<wd-img width="40rpx" height="40rpx" :src="`${OSS}icon/icon_tea_room.png`"></wd-img>
|
||
</view>
|
||
<view class="flex items-center w-400rpx" @click="ComboCard.handleToStore">
|
||
<view class="font-bold text-30rpx leading-42rpx text-[#303133] mr-10rpx line-1">{{ order.name }}</view>
|
||
<wd-icon name="chevron-right" size="32rpx"></wd-icon>
|
||
</view>
|
||
</view>
|
||
<view class="font-400 text-28rpx leading-40rpx">
|
||
<text class="text-[#4C9F44]" v-if="order.status === GroupComboOrderStatus.ToUse">待使用</text>
|
||
<text class="text-[#606266]" v-if="order.status === GroupComboOrderStatus.Used">已使用</text>
|
||
<text class="text-[#C9C9C9]" v-if="order.status === GroupComboOrderStatus.Refunded">已退款</text>
|
||
</view>
|
||
</view>
|
||
<view class="mt-22rpx">
|
||
<view class="flex">
|
||
<view class="mr-28rpx">
|
||
<wd-img width="200rpx" height="200rpx" :src="order.image" radius="10rpx"></wd-img>
|
||
</view>
|
||
<view class="flex-1">
|
||
<view @click="ComboCard.handleToOrderDetail">
|
||
<view class="font-500 text-30rpx text-[#303133] leading-42rpx line-1 w-400rpx">{{ order.title }}</view>
|
||
<view>
|
||
<wd-tag bg-color="#F3F3F3" color="#606266" custom-class="!px-16rpx">{{ order.hour }}小时</wd-tag>
|
||
</view>
|
||
<view class="font-400 leading-36rpx text-26rpx text-[#606266]">
|
||
<view class="mt-12rpx" v-if="order.operation_type === StoreType.Direct">适用包间 {{ order.room_title }}</view>
|
||
<!-- TODO 字段先隐藏 -->
|
||
<!-- <view class="mt-10rpx">有效期至2025-03-23</view> -->
|
||
</view>
|
||
</view>
|
||
|
||
<view class="text-center flex items-center text-28rpx mt-28rpx justify-end" v-if="order.status === GroupComboOrderStatus.ToUse">
|
||
<view
|
||
@click="ComboCard.handleOrderRefund(order, OrderSource.Combo)"
|
||
class="w-178rpx h-70rpx leading-70rpx rounded-8rpx border-[2rpx] border-[#9CA3AF] text-[#303133]">
|
||
<!-- :class="order.operation_type === StoreType.Direct ? ' mr-28rpx' : ''"> -->
|
||
申请退款
|
||
</view>
|
||
<!-- <view
|
||
@click="ComboCard.handleUsePackage"
|
||
class="w-178rpx h-70rpx leading-70rpx rounded-8rpx border-[2rpx] border-[#4C9F44] text-[#4C9F44]"
|
||
v-if="order.operation_type === StoreType.Direct">
|
||
立即预定
|
||
</view> -->
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
|
||
<!-- 抖音团购 -->
|
||
<view v-if="type === OrderSource.DouYin" class="bg-white rounded-10rpx p-30rpx">
|
||
<view class="flex justify-between items-center">
|
||
<view class="flex items-center">
|
||
<view class="mr-10rpx flex items-center">
|
||
<wd-img width="40rpx" height="40rpx" :src="`${OSS}icon/icon_tea_room.png`"></wd-img>
|
||
</view>
|
||
<view class="flex items-center w-400rpx" @click="ComboCard.handleToStore">
|
||
<view class="font-bold text-30rpx leading-42rpx text-[#303133] mr-10rpx line-1">{{ order.name }}</view>
|
||
<wd-icon name="chevron-right" size="32rpx"></wd-icon>
|
||
</view>
|
||
</view>
|
||
<view class="font-400 text-28rpx leading-40rpx mt-12rpx">
|
||
<text class="text-[#4C9F44]" v-if="order.status === DouYinOrderStatus.ToUse">待使用</text>
|
||
<text class="text-[#606266]" v-if="order.status === DouYinOrderStatus.Used">已使用</text>
|
||
</view>
|
||
</view>
|
||
<view class="mt-22rpx">
|
||
<view class="flex">
|
||
<view class="mr-28rpx">
|
||
<wd-img width="200rpx" height="200rpx" :src="order.image" radius="10rpx"></wd-img>
|
||
</view>
|
||
<view class="flex-1">
|
||
<view @click="ComboCard.handleToOrderDetail">
|
||
<view class="font-500 text-30rpx text-[#303133] leading-42rpx line-1 w-400rpx">{{ order.title }}</view>
|
||
<view>
|
||
<wd-tag bg-color="#F3F3F3" color="#606266" custom-class="!px-16rpx">{{ order.hour }}小时</wd-tag>
|
||
</view>
|
||
</view>
|
||
|
||
<!-- <view class="text-center flex items-center text-28rpx mt-28rpx justify-end">
|
||
<view class="w-178rpx h-70rpx leading-70rpx rounded-8rpx border-[2rpx] border-[#4C9F44] text-[#4C9F44]" v-if="order.status === DouYinOrderStatus.ToUse">立即预定</view>
|
||
</view> -->
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
|
||
<!-- 茶室预约 -->
|
||
<view v-if="type === OrderSource.TeaRoom" class="bg-white rounded-10rpx p-30rpx">
|
||
<view class="flex justify-between items-center">
|
||
<view class="flex items-center">
|
||
<view class="mr-10rpx flex items-center">
|
||
<wd-img width="40rpx" height="40rpx" :src="`${OSS}icon/icon_tea_room.png`"></wd-img>
|
||
</view>
|
||
<view class="flex items-center w-400rpx" @click="ComboCard.handleToStore">
|
||
<view class="font-bold text-30rpx leading-42rpx text-[#303133] mr-10rpx line-1">{{ order.store_name }}</view>
|
||
<wd-icon name="chevron-right" size="32rpx"></wd-icon>
|
||
</view>
|
||
</view>
|
||
<view class="font-400 text-28rpx leading-40rpx mt-12rpx text-[#4C9F44]">
|
||
<text v-if="order.order_status === TeaRoomOrderStatus.Pending" class="text-[#FF5951]" >待付款</text>
|
||
<text v-if="order.order_status === TeaRoomOrderStatus.Consumption">消费中</text>
|
||
<text v-if="order.order_status === TeaRoomOrderStatus.Pay">已预约</text>
|
||
<text v-if="order.order_status === TeaRoomOrderStatus.Finished" class="text-[#606266]">完成</text>
|
||
<text v-if="order.order_status === TeaRoomOrderStatus.Cancelled" class="text-[#C9C9C9]">订单取消</text>
|
||
<text v-if="order.order_status === TeaRoomOrderStatus.Refunded" class="text-[#C9C9C9]">已退款</text>
|
||
</view>
|
||
</view>
|
||
<view class="mt-22rpx">
|
||
<view class="flex items-center">
|
||
<view class="mr-28rpx">
|
||
<wd-img width="200rpx" height="200rpx" :src="order.image" radius="10rpx"></wd-img>
|
||
</view>
|
||
<view class="flex-1">
|
||
<view @click="ComboCard.handleToOrderDetail">
|
||
<view class="font-500 text-30rpx text-[#303133] leading-42rpx line-1 w-400rpx">{{ order.room_name }}</view>
|
||
<view class="font-400 leading-36rpx text-26rpx text-[#606266] mt-34rpx">
|
||
<view>预约时间：{{ order.day_title }} {{ order.start_time }}-{{ order.end_time }}</view>
|
||
<view class="mt-18rpx">预约时长：{{ order.hours }}小时</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
|
||
<!-- 操作按钮 -->
|
||
<template v-if="order.order_status === OrderStatus.Finished || order.order_status === OrderStatus.Cancelled">
|
||
<view class="text-center flex items-center text-28rpx mt-28rpx justify-end"
|
||
@click="ComboCard.handleDeleteOrder(OrderSource.TeaRoom)">
|
||
<view class="w-178rpx h-70rpx rounded-8rpx border-[2rpx] border-[#9CA3AF] text-[#303133] mr-28rpx flex items-center justify-center">
|
||
删除订单
|
||
</view>
|
||
</view>
|
||
</template>
|
||
|
||
<template v-if="order.order_status === TeaRoomOrderStatus.Pending">
|
||
<view class="text-center flex items-center text-28rpx mt-28rpx justify-end">
|
||
<view class="w-178rpx h-70rpx rounded-8rpx border-[2rpx] border-[#9CA3AF] text-[#303133] mr-28rpx flex items-center justify-center"
|
||
@click="ComboCard.handleCancelOrder(OrderSource.TeaRoom)">取消订单</view>
|
||
<view class="w-178rpx h-70rpx rounded-8rpx border-[2rpx] border-[#4C9F44] text-[#4C9F44] flex items-center justify-center"
|
||
@click="ComboCard.handleToPayOrder(OrderSource.TeaRoom)">去支付</view>
|
||
</view>
|
||
</template>
|
||
</view>
|
||
</view>
|
||
|
||
<!-- 茶艺师预约 -->
|
||
<view v-if="type === OrderSource.TeaSpecialist" class="bg-white rounded-10rpx p-28rpx">
|
||
<view class="flex items-center">
|
||
<view class="mr-28rpx">
|
||
<wd-img width="200rpx" height="200rpx" :src="`${OSS}images/home/home_image5.png`" radius="10rpx"></wd-img>
|
||
</view>
|
||
<view class="flex-1" @click="ComboCard.handleToOrderDetail">
|
||
<view class="flex items-center relative">
|
||
<view class="w-400rpx flex items-center">
|
||
<view class="font-bold text-[#303133] text-30rpx leading-42rpx mr-14rpx">茶艺师</view>
|
||
<view class="w-160rpx h-40rpx relative mr-44rpx">
|
||
<view class="absolute left-0 top-0 h-36rpx flex items-start">
|
||
<wd-img :src="`${OSS}icon/icon_gold_medal.png`" width="36rpx" height="36rpx"></wd-img>
|
||
</view>
|
||
<view class="bg-[#F0F6EF] text-[#006C2D] font-400 text-22rpx leading-32rpx rounded-4rpx text-center w-150rpx ml-18rpx pb-4rpx">金牌茶艺师</view>
|
||
</view>
|
||
</view>
|
||
|
||
<view class="font-400 text-28rpx leading-20rpx text-[#4C9F44] flex items-center absolute top-6rpx right-0">
|
||
<text v-if="orderStatus === OrderStatus.Consuming">消费中</text>
|
||
<text v-if="orderStatus === OrderStatus.Reserved">已预约</text>
|
||
<text v-if="orderStatus === OrderStatus.Serving">服务中</text>
|
||
<text v-if="orderStatus === OrderStatus.Finished" class="text-[#606266]">完成</text>
|
||
<text v-if="orderStatus === OrderStatus.Pending" class="text-[#FF5951]" >待付款</text>
|
||
<text v-if="orderStatus === OrderStatus.Cancelled" class="text-[#C9C9C9]" >订单取消</text>
|
||
</view>
|
||
</view>
|
||
|
||
<view class="flex items-center">
|
||
<view class="mr-12rpx">
|
||
<wd-tag color="#40AE36" bg-color="#40AE36" plain custom-class="!rounded-4rpx">上门服务</wd-tag>
|
||
</view>
|
||
<view>
|
||
<wd-tag color="#F55726" bg-color="#F55726" plain>到点服务</wd-tag>
|
||
</view>
|
||
</view>
|
||
|
||
<view class="font-400 text-[#606266] text-26rpx leading-36rpx mt-42rpx">
|
||
预约时间：03/18 08:00-12:00
|
||
</view>
|
||
</view>
|
||
</view>
|
||
<!-- 操作按钮 -->
|
||
<view>
|
||
<view v-if="orderStatus === OrderStatus.Finished || orderStatus === OrderStatus.Cancelled"
|
||
class="flex items-center text-28rpx mt-28rpx justify-end"
|
||
@click="ComboCard.handleDeleteOrder(OrderSource.TeaSpecialist)">
|
||
<view class="w-178rpx h-70rpx rounded-8rpx border-[2rpx] border-[#9CA3AF] text-[#303133] flex items-center justify-center">
|
||
删除订单
|
||
</view>
|
||
</view>
|
||
<view v-if="orderStatus === OrderStatus.Pending"
|
||
class="flex items-center text-28rpx mt-28rpx justify-end">
|
||
<view class="w-178rpx h-70rpx rounded-8rpx border-[2rpx] border-[#9CA3AF] text-[#303133] mr-28rpx flex items-center justify-center"
|
||
@click="ComboCard.handleCancelOrder(OrderSource.TeaSpecialist)">
|
||
取消订单
|
||
</view>
|
||
<view class="w-178rpx h-70rpx rounded-8rpx border-[2rpx] border-[#4C9F44] text-[#4C9F44] flex items-center justify-center"
|
||
@click="ComboCard.handleToPayOrder(OrderSource.TeaSpecialist)">去支付</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
|
||
<!-- 取消订单, 删除订单 -->
|
||
<wd-message-box selector="wd-message-box-slot"></wd-message-box>
|
||
</view>
|
||
</template>
|
||
|
||
<script lang="ts" setup name="ComboCard">
|
||
import { OrderSource, OrderStatus, TeaRoomOrderStatus, GroupComboOrderStatus, DouYinOrderStatus } from '@/utils/order'
|
||
import { useMessage } from 'wot-design-uni'
|
||
import { toast } from '@/utils/toast'
|
||
import { handleTRCancelOrderHooks, handleTRDeleteOrderHooks, handleTRToPayHooks, handleToTRStoreHooks, handleRefundOrderHooks } from '@/hooks/useOrder'
|
||
import { StoreType } from '@/utils/tea'
|
||
import { router } from '@/utils/tools'
|
||
import { PayOrderType } from '@/utils/pay'
|
||
|
||
/**
|
||
* ComboCard 套餐卡片组件
|
||
* @description 展示订单列表套餐卡片信息
|
||
*/
|
||
|
||
const OSS = inject('OSS')
|
||
|
||
const props = defineProps({
|
||
/**
|
||
* 类型: 直营(direct)、加盟(franchise)、抖音(douyin) 等
|
||
*/
|
||
type: {
|
||
type: String,
|
||
default: OrderSource.Combo
|
||
},
|
||
/**
|
||
* 订单类型: 待使用、退款等
|
||
* TODO 这里的orderStatus在接入接口的时候需要改为类似于data.orderStatus这种形式
|
||
*/
|
||
orderStatus: {
|
||
type: String,
|
||
default: OrderStatus.ToUse
|
||
},
|
||
|
||
order: {
|
||
type: Object,
|
||
default: {}
|
||
}
|
||
})
|
||
|
||
// 取消订单弹窗
|
||
const message = useMessage('wd-message-box-slot')
|
||
|
||
const ComboCard = {
|
||
/**
|
||
* 跳转到对对应室的详情页
|
||
*/
|
||
handleToStore: () => {
|
||
handleToTRStoreHooks(props.order.store_id, props.order.operation_type)
|
||
},
|
||
|
||
/**
|
||
* 申请退款
|
||
*/
|
||
handleOrderRefund: (order: any, source: string) => {
|
||
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') {
|
||
let orderType: number = 0
|
||
switch (source) {
|
||
case OrderSource.Combo:
|
||
orderType = PayOrderType.ComboRefund
|
||
let res = await handleRefundOrderHooks(order.id, orderType)
|
||
if (res) {
|
||
uni.$emit('refreshComboOrderList')
|
||
}
|
||
// TODO 这里调用删除直营订单的接口
|
||
break;
|
||
default:
|
||
break;
|
||
}
|
||
}
|
||
}).catch(() => {
|
||
// 点击取消按钮回调事件
|
||
})
|
||
},
|
||
|
||
/**
|
||
* 使用套餐
|
||
*/
|
||
handleUsePackage: () => {
|
||
router.navigateTo(`/bundle/tea-room/choose-room?groupCouponId=${props.order.group_id}&groupCouponOrderId=${props.order.id}&teaRoomId=${props.order.store_id}`)
|
||
},
|
||
|
||
/**
|
||
* 删除订单
|
||
*/
|
||
handleDeleteOrder: (source: string) => {
|
||
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) => {
|
||
switch (source) {
|
||
case OrderSource.Combo:
|
||
// TODO 这里调用删除直营订单的接口
|
||
break;
|
||
case OrderSource.DouYin:
|
||
// TODO 这里调用删除抖音订单的接口
|
||
break;
|
||
case OrderSource.TeaRoom:
|
||
// 这里调用删除茶室订单的接口
|
||
handleTRDeleteOrderHooks(props.order.id)
|
||
break;
|
||
case OrderSource.TeaSpecialist:
|
||
// TODO 这里调用删除茶室订单的接口
|
||
break;
|
||
default:
|
||
break;
|
||
}
|
||
}).catch(() => {
|
||
// 点击取消按钮回调事件
|
||
})
|
||
},
|
||
|
||
/**
|
||
* 取消订单
|
||
*/
|
||
handleCancelOrder: (source: string) => {
|
||
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') {
|
||
switch (source) {
|
||
case OrderSource.Combo:
|
||
// TODO 这里调用删除直营订单的接口
|
||
break;
|
||
case OrderSource.DouYin:
|
||
// TODO 这里调用删除抖音订单的接口
|
||
break;
|
||
case OrderSource.TeaRoom:
|
||
// 这里调用删除茶室订单的接口
|
||
handleTRCancelOrderHooks(props.order.id)
|
||
break;
|
||
case OrderSource.TeaSpecialist:
|
||
// TODO 这里调用删除茶室订单的接口
|
||
break;
|
||
default:
|
||
break;
|
||
}
|
||
}
|
||
}).catch(() => {
|
||
// 点击取消按钮回调事件
|
||
})
|
||
},
|
||
|
||
/**
|
||
* 跳转到订单详情页
|
||
*/
|
||
handleToOrderDetail: () => {
|
||
switch (props.type) {
|
||
case OrderSource.Combo:
|
||
router.navigateTo(`/bundle/order/platform/order-detail?orderId=${props.order.id}`)
|
||
break;
|
||
case OrderSource.DouYin:
|
||
router.navigateTo(`/bundle/order/douyin/douyin-order-detail?orderId=${props.order.id}&orderStatus=${props.orderStatus}`)
|
||
break;
|
||
case OrderSource.TeaRoom:
|
||
router.navigateTo(`/bundle/order/tea-room/order-detail?orderId=${props.order.id}&orderStatus=${props.orderStatus}`)
|
||
break;
|
||
case OrderSource.TeaSpecialist:
|
||
router.navigateTo(`/bundle/order/tea-specialist/order-detail?orderId=${props.order.id}&orderStatus=${props.orderStatus}`)
|
||
break;
|
||
default:
|
||
break;
|
||
}
|
||
},
|
||
|
||
/**
|
||
* 支付
|
||
*/
|
||
handleToPayOrder: (source: string) => {
|
||
switch (source) {
|
||
case OrderSource.Combo:
|
||
router.navigateTo(`/bundle/order/platform/order-detail?orderStatus=${props.orderStatus}&toPay=true`)
|
||
break;
|
||
case OrderSource.DouYin:
|
||
router.navigateTo(`/bundle/order/douyin/douyin-order-detail?orderStatus=${props.orderStatus}&toPay=true`)
|
||
break;
|
||
case OrderSource.TeaRoom:
|
||
handleTRToPayHooks(props.order.id, props.order.room_name, props.order.store_id)
|
||
break;
|
||
case OrderSource.TeaSpecialist:
|
||
router.navigateTo( `/bundle/order/tea-specialist/order-detail?orderStatus=${props.orderStatus}&toPay=true`)
|
||
break;
|
||
default:
|
||
break;
|
||
}
|
||
}
|
||
}
|
||
</script>
|
||
|
||
<script lang="ts">
|
||
export default {}
|
||
</script>
|