wangxiaowei/chazhi
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

完善页面整合TS

Browse Source
This commit is contained in:
wangxiaowei
2025-09-19 17:25:23 +08:00
parent 864c40aa3a
commit ff2f645101
13 changed files with 540 additions and 302 deletions
Download Patch File Download Diff File Expand all files Collapse all files

122
src/components/order/ComboCard.vue
View File

@ -1,7 +1,7 @@
<template>
<view class="">
<!-- 平台团购直营店 -->
<view v-if="type === GroupBuyingCategory.Direct" class="bg-white rounded-10rpx p-30rpx">
<view v-if="type === OrderSource.Direct" 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">
@ -13,9 +13,9 @@
</view>
</view>
<view class="font-400 text-28rpx leading-40rpx">
<text class="text-[#4C9F44]" v-if="orderStatus === GroupBuyingCategoryOrderStatus.ToUse">待使用</text>
<text class="text-[#606266]" v-if="orderStatus === GroupBuyingCategoryOrderStatus.Used">已使用</text>
<text class="text-[#C9C9C9]" v-if="orderStatus === GroupBuyingCategoryOrderStatus.Refunded">已退款</text>
<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">
@ -45,7 +45,7 @@
</view>
<!-- 平台团购加盟店和抖音团购 -->
<view v-if="type === GroupBuyingCategory.Franchise || type === GroupBuyingCategory.DouYin" class="bg-white rounded-10rpx p-30rpx">
<view v-if="type === OrderSource.Franchise || 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">
@ -57,9 +57,9 @@
</view>
</view>
<view class="font-400 text-28rpx leading-40rpx mt-12rpx">
<text class="text-[#4C9F44]" v-if="orderStatus === GroupBuyingCategoryOrderStatus.ToUse">待使用</text>
<text class="text-[#606266]" v-if="orderStatus === GroupBuyingCategoryOrderStatus.Used">已使用</text>
<text class="text-[#C9C9C9]" v-if="orderStatus === GroupBuyingCategoryOrderStatus.Refunded">已退款</text>
<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">
@ -76,8 +76,8 @@
</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 === GroupBuyingCategory.Franchise">申请退款</view>
<view class="w-178rpx h-70rpx leading-70rpx rounded-8rpx border-[2rpx] border-[#4C9F44] text-[#4C9F44]" v-if="type === GroupBuyingCategory.DouYin">立即预定</view>
<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>
</view>
@ -85,7 +85,7 @@
</view>
<!-- 茶室预约 -->
<view v-if="type === ReserveCategory.TeaRoom" class="bg-white rounded-10rpx p-30rpx">
<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">
@ -97,9 +97,12 @@
</view>
</view>
<view class="font-400 text-28rpx leading-40rpx mt-12rpx text-[#4C9F44]">
<text v-if="orderStatus === ReserveCategoryOrderStatus.Consuming">消费中</text>
<text v-if="orderStatus === ReserveCategoryOrderStatus.Reserved">已预约</text>
<text v-if="orderStatus === ReserveCategoryOrderStatus.Serving">服务中</text>
<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="mt-22rpx">
@ -117,11 +120,26 @@
</view>
</view>
</view>
<template v-if="orderStatus === OrderStatus.Finished || orderStatus === OrderStatus.Cancelled">
<view class="text-center flex items-center text-28rpx mt-28rpx justify-end" @click="comboCard.handleDeleteTeaRoomOrder">
<view class="w-178rpx h-70rpx leading-70rpx rounded-8rpx border-[2rpx] border-[#9CA3AF] text-[#303133] mr-28rpx">
删除订单
</view>
</view>
</template>
<template v-if="orderStatus === OrderStatus.Pending">
<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" @click="comboCard.handleCancelTeaRoomOrder">取消订单</view>
<view class="w-178rpx h-70rpx leading-70rpx rounded-8rpx border-[2rpx] border-[#4C9F44] text-[#4C9F44]">去支付</view>
</view>
</template>
</view>
</view>
<!-- 茶艺师预约 -->
<view v-if="type === ReserveCategory.TeaSpecialist" class="bg-white rounded-10rpx p-28rpx">
<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>
@ -136,9 +154,9 @@
<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 class="font-400 text-28rpx leading-20rpx text-[#4C9F44] flex items-center">
<text v-if="orderStatus === ReserveCategoryOrderStatus.Consuming">消费中</text>
<text v-if="orderStatus === ReserveCategoryOrderStatus.Reserved">已预约</text>
<text v-if="orderStatus === ReserveCategoryOrderStatus.Serving">服务中</text>
<text v-if="orderStatus === OrderStatus.Consuming">消费中</text>
<text v-if="orderStatus === OrderStatus.Reserved">已预约</text>
<text v-if="orderStatus === OrderStatus.Serving">服务中</text>
</view>
</view>
@ -157,11 +175,16 @@
</view>
</view>
</view>
<!-- 取消订单, 删除订单 -->
<wd-message-box selector="wd-message-box-slot"></wd-message-box>
</view>
</template>
<script lang="ts" setup name="ComboCard">
import { GroupBuyingCategory, GroupBuyingCategoryOrderStatus, ReserveCategory, ReserveCategoryOrderStatus } from '@/utils/order'
import { OrderSource, OrderStatus } from '@/utils/order'
import { useMessage } from 'wot-design-uni'
import { toast } from '@/utils/toast'
/**
* ComboCard 套餐卡片组件
@ -176,7 +199,7 @@
*/
type: {
type: String,
default: GroupBuyingCategory.Direct
default: OrderSource.Direct
},
/**
* 订单类型: 待使用、退款等
@ -184,10 +207,14 @@
*/
orderStatus: {
type: String,
default: GroupBuyingCategoryOrderStatus.ToUse
default: OrderStatus.ToUse
}
})
// 取消订单弹窗
const message = useMessage('wd-message-box-slot')
const comboCard = {
// 跳转到对饮茶室的详情页
handleToStore: () => {
@ -196,25 +223,72 @@
})
},
// 删除茶室订单
handleDeleteTeaRoomOrder: () => {
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) => {
// 点击确认按钮回调事件
toast.info('删除订单成功')
}).catch(() => {
// 点击取消按钮回调事件
})
},
// 取消茶室订单
handleCancelTeaRoomOrder: () => {
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) => {
// 点击确认按钮回调事件
toast.info('订单取消成功')
}).catch(() => {
// 点击取消按钮回调事件
})
},
// 跳转到团购订单详情页
handleToOrderDetail: () => {
// TODO 这里要对不同类型的订单进行区分跳转一个是直营的一个市加盟的
switch (props.type) {
case 'Direct':
case OrderSource.Direct:
uni.navigateTo({
url: `/bundle/order/platform/direct-order-detail?orderStatus=${props.orderStatus}`
})
break;
case 'Franchise':
case OrderSource.Franchise:
uni.navigateTo({
url: `/bundle/order/platform/franchise-order-detail?orderStatus=${props.orderStatus}`
})
break;
case 'DouYin':
case OrderSource.DouYin:
uni.navigateTo({
url: `/bundle/order/douyin/douyin-order-detail?orderStatus=${props.orderStatus}`
})
break;
case OrderSource.TeaRoom:
uni.navigateTo({
url: `/bundle/order/tea-room/order-detail?orderStatus=${props.orderStatus}`
})
break;
default:
break;
}