完善页面

This commit is contained in:
wangxiaowei
2025-11-28 19:19:54 +08:00
parent 58211f2430
commit 67c8e8e016
43 changed files with 2722 additions and 1018 deletions

View File

@ -1,21 +1,21 @@
<template>
<view class="">
<!-- 平台团购直营店 -->
<view v-if="type === OrderSource.Direct" class="bg-white rounded-10rpx p-30rpx">
<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="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>
<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="orderStatus === OrderStatus.ToUse">待使用</text>
<text class="text-[#606266]" v-if="orderStatus === OrderStatus.Used">已使用</text>
<text class="text-[#C9C9C9]" v-if="orderStatus === OrderStatus.Refunded">已退款</text>
<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">
@ -25,27 +25,37 @@
</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 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">3小时</wd-tag>
<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">适用包间 青茶红茶绿茶</view>
<view class="mt-10rpx">有效期至2025-03-23</view>
<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-start">
<view class="w-178rpx h-70rpx leading-70rpx rounded-8rpx border-[2rpx] border-[#9CA3AF] text-[#303133] mr-28rpx">申请退款</view>
<view class="w-178rpx h-70rpx leading-70rpx rounded-8rpx border-[2rpx] border-[#4C9F44] text-[#4C9F44]">立即预定</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.Franchise || type === OrderSource.DouYin" class="bg-white rounded-10rpx p-30rpx">
<!-- 抖音团购 -->
<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">
@ -76,7 +86,6 @@
</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-[#9CA3AF] text-[#303133] mr-28rpx" v-if="type === OrderSource.Franchise">申请退款</view>
<view class="w-178rpx h-70rpx leading-70rpx rounded-8rpx border-[2rpx] border-[#4C9F44] text-[#4C9F44]" v-if="type === OrderSource.DouYin">立即预定</view>
</view>
</view>
@ -210,10 +219,12 @@
</template>
<script lang="ts" setup name="ComboCard">
import { OrderSource, OrderStatus, TeaRoomOrderStatus } from '@/utils/order'
import { OrderSource, OrderStatus, TeaRoomOrderStatus, TeaRoomPackageOrderStatus } from '@/utils/order'
import { useMessage } from 'wot-design-uni'
import { toast } from '@/utils/toast'
import { handleTRCancelOrderHooks, handleTRDeleteOrderHooks, handleTRToPayHooks } from '@/hooks/useOrder'
import { handleTRCancelOrderHooks, handleTRDeleteOrderHooks, handleTRToPayHooks, handleToTeaRoomStoreHooks, handleTGOrderRefundHooks } from '@/hooks/useOrder'
import { StoreType } from '@/utils/tea'
import { router } from '@/utils/tools'
/**
* ComboCard 套餐卡片组件
@ -228,7 +239,7 @@
*/
type: {
type: String,
default: OrderSource.Direct
default: OrderSource.Combo
},
/**
* 订单类型: 待使用、退款等
@ -249,14 +260,36 @@
const message = useMessage('wd-message-box-slot')
const ComboCard = {
// 跳转到对饮茶室的详情页
/**
* 跳转到对对应室的详情页
*/
handleToStore: () => {
uni.navigateTo({
url: '/pages/store/store-detail/store-detail'
})
handleToTeaRoomStoreHooks(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}&type=${OrderSource.Combo}&orderStatus=${OrderStatus.AfterSaleApply}`)
break;
default:
break;
}
},
/**
* 使用套餐
*/
handleUsePackage: () => {
router.navigateTo(`/bundle/tea-room/choose-room?groupCouponId=${props.order.group_id}&teaRoomId=${props.order.store_id}`)
},
/**
* 删除订单
*/
handleDeleteOrder: (source: string) => {
message.confirm({
title: '确定删除订单?',
@ -271,12 +304,9 @@
}
}).then((res) => {
switch (source) {
case OrderSource.Direct:
case OrderSource.Combo:
// TODO 这里调用删除直营订单的接口
break;
case OrderSource.Franchise:
// TODO 这里调用删除加盟订单的接口
break;
case OrderSource.DouYin:
// TODO 这里调用删除抖音订单的接口
break;
@ -290,15 +320,14 @@
default:
break;
}
// 点击确认按钮回调事件
toast.info('删除订单成功')
}).catch(() => {
// 点击取消按钮回调事件
})
},
// 取消订单
/**
* 取消订单
*/
handleCancelOrder: (source: string) => {
message.confirm({
title: '确定取消订单?',
@ -314,12 +343,9 @@
}).then((res) => {
if (res.action == 'confirm') {
switch (source) {
case OrderSource.Direct:
case OrderSource.Combo:
// TODO 这里调用删除直营订单的接口
break;
case OrderSource.Franchise:
// TODO 这里调用删除加盟订单的接口
break;
case OrderSource.DouYin:
// TODO 这里调用删除抖音订单的接口
break;
@ -334,71 +360,49 @@
break;
}
}
}).catch(() => {
// 点击取消按钮回调事件
})
},
// 跳转到订单详情页
/**
* 跳转到订单详情页
*/
handleToOrderDetail: () => {
// TODO 这里要对不同类型的订单进行区分跳转一个是直营的一个市加盟的
switch (props.type) {
case OrderSource.Direct:
uni.navigateTo({
url: `/bundle/order/platform/direct-order-detail?orderStatus=${props.orderStatus}`
})
break;
case OrderSource.Franchise:
uni.navigateTo({
url: `/bundle/order/platform/franchise-order-detail?orderStatus=${props.orderStatus}`
})
case OrderSource.Combo:
router.navigateTo(`/bundle/order/platform/order-detail?orderId=${props.order.id}&orderStatus=${props.orderStatus}`)
break;
case OrderSource.DouYin:
uni.navigateTo({
url: `/bundle/order/douyin/douyin-order-detail?orderStatus=${props.orderStatus}`
})
router.navigateTo(`/bundle/order/douyin/douyin-order-detail?orderId=${props.order.id}&orderStatus=${props.orderStatus}`)
break;
case OrderSource.TeaRoom:
uni.navigateTo({
url: `/bundle/order/tea-room/order-detail?orderStatus=${props.orderStatus}`
})
router.navigateTo(`/bundle/order/tea-room/order-detail?orderId=${props.order.id}&orderStatus=${props.orderStatus}`)
break;
case OrderSource.TeaSpecialist:
uni.navigateTo({
url: `/bundle/order/tea-specialist/order-detail?orderStatus=${props.orderStatus}`
})
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.Direct:
uni.navigateTo({
url: `/bundle/order/platform/direct-order-detail?orderStatus=${props.orderStatus}&toPay=true`
})
break;
case OrderSource.Franchise:
uni.navigateTo({
url: `/bundle/order/platform/franchise-order-detail?orderStatus=${props.orderStatus}&toPay=true`
})
case OrderSource.Combo:
router.navigateTo(`/bundle/order/platform/order-detail?orderStatus=${props.orderStatus}&toPay=true`)
break;
case OrderSource.DouYin:
uni.navigateTo({
url: `/bundle/order/douyin/douyin-order-detail?orderStatus=${props.orderStatus}&toPay=true`
})
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:
uni.navigateTo({
url: `/bundle/order/tea-specialist/order-detail?orderStatus=${props.orderStatus}&toPay=true`
})
router.navigateTo( `/bundle/order/tea-specialist/order-detail?orderStatus=${props.orderStatus}&toPay=true`)
break;
default:
break;