Files
2025-12-14 14:41:26 +08:00

479 lines
26 KiB
Vue
Raw Blame History

This file contains ambiguous Unicode characters

This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

<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.store_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.order_status === TeaRoomPackageOrderStatus.ToUse">待使用</text>
<text class="text-[#606266]" v-if="order.order_status === TeaRoomPackageOrderStatus.Used">已使用</text>
<text class="text-[#C9C9C9]" v-if="order.order_status === TeaRoomPackageOrderStatus.Refunded">已退款</text>
</view>
</view>
<view class="mt-22rpx">
<view class="flex">
<view class="mr-28rpx">
<wd-img width="200rpx" height="200rpx" :src="`${OSS}images/home/home_image5.png`"></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.introduce }}</view>
<!-- <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.order_status === TeaRoomPackageOrderStatus.ToUse">
<view
@click="ComboCard.handleOrderRefund(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" @click="ComboCard.handleToStore">
<view class="font-bold text-30rpx leading-42rpx text-[#303133] mr-10rpx w-400rpx line-1">这是茶馆的名称这是茶馆的名称这是茶馆的名称</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="orderStatus === OrderStatus.ToUse">待使用</text>
<text class="text-[#606266]" v-if="orderStatus === OrderStatus.Used">已使用</text>
<text class="text-[#C9C9C9]" v-if="orderStatus === OrderStatus.Refunded">已退款</text>
</view>
</view>
<view class="mt-22rpx">
<view class="flex">
<view class="mr-28rpx">
<wd-img width="200rpx" height="200rpx" :src="`${OSS}images/home/home_image5.png`"></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">这是套餐的名字这是套餐的名字这是套餐的名字这是套餐的名字这是套餐的名字</view>
<view>
<wd-tag bg-color="#F3F3F3" color="#606266" custom-class="!px-16rpx">3小时</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="type === OrderSource.DouYin">立即预定</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>
</view>
</view>
<view class="mt-22rpx">
<view class="flex items-center">
<view class="mr-28rpx">
<wd-img width="200rpx" height="200rpx" :src="`${OSS}images/home/home_image5.png`"></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_time }} {{ 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`"></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>
<!-- 茶室管理端-套餐管理 -->
<view v-if="type === OrderSource.SetMeal" class="bg-white rounded-10rpx p-28rpx">
<view class="">
<view class="flex items-center">
<view class="mr-28rpx">
<wd-img width="200rpx" height="200rpx" :src="`${OSS}images/reserve_room/reserve_room_image2.png`"></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>
</view>
<view class="flex items-center mt-16rpx">
<view class="font-400 text-[#606266] text-26rpx leading-36rpx mr-8rpx">ID:1270304172</view>
<wd-icon name="file-copy" size="32rpx" color='#707070' @click="copy(123)"></wd-icon>
</view>
<view class="flex items-center">
<price-format color="#FF5951" :first-size="36" :second-size="36" :subscript-size="24" :price="23.02"></price-format>
<view class="rounded-4rpx w-60rpx text-center text-[#FF5951] border-2rpx border-solid border-[#FF5951] text-22rpx pb-4rpx mx-14rpx">5.1</view>
<price-format color="#BFC2CC" :first-size="22" :second-size="22" :subscript-size="22" :price="23.02" lineThrough></price-format>
</view>
</view>
</view>
<view class="font-400 text-[#606266] text-26rpx leading-36rpx mt-42rpx flex items-center justify-between">
<view class="">
<text class="font-400 text-26rpx text-[#606266] leading-36rpx mr-10rpx">年售</text>
<text class="font-bold text-26rpx text-[#606266] leading-36rpx ">96</text>
</view>
<view class="flex items-center">
<view class="font-500 text-28rpx text-[#303133] leading-40rpx mr-18rpx">更多</view>
<view class="font-500 text-28rpx text-[#303133] leading-40rpx border-2rpx border-solid border-[#ECECEC] rounded-8rpx text-center py-4rpx px-28rpx mr-12rpx">改价</view>
<view class="font-500 text-28rpx text-[#303133] leading-40rpx border-2rpx border-solid border-[#ECECEC] rounded-8rpx text-center py-4rpx px-28rpx mr-12rpx">下架</view>
<view class="font-500 text-28rpx text-[#303133] leading-40rpx border-2rpx border-solid border-[#ECECEC] rounded-8rpx text-center py-4rpx px-28rpx">编辑</view>
</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, TeaRoomPackageOrderStatus } from '@/utils/order'
import { useMessage } from 'wot-design-uni'
import { toast } from '@/utils/toast'
import { handleTRCancelOrderHooks, handleTRDeleteOrderHooks, handleTRToPayHooks, handleToTRStoreHooks, handleTGOrderRefundHooks } from '@/hooks/useOrder'
import { StoreType } from '@/utils/tea'
import { router } from '@/utils/tools'
import { toTimes, copy } from '@/utils/tools'
/**
* 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: (source: string) => {
switch (source) {
case OrderSource.Combo:
router.navigateTo(`/bundle/order/after-sales/after-sales?orderId=${props.order.id}&storeId=${props.order.store_id}&comboId=${props.order.group_id}&orderType=${OrderSource.Combo}&orderStatus=${OrderStatus.AfterSaleApply}`)
break;
default:
break;
}
},
/**
* 使用套餐
*/
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}&orderStatus=${props.orderStatus}`)
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>