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

完善订单信息

Browse Source
This commit is contained in:
wangxiaowei
2025-09-02 17:30:36 +08:00
parent d05eeebdb1
commit ab9cf08c86
7 changed files with 379 additions and 109 deletions
Download Patch File Download Diff File Expand all files Collapse all files

88
src/components/order/Combo.vue
View File

@ -1,88 +0,0 @@
<template>
<view>
<view class="bg-white rounded-16rpx p-30rpx" v-if="orderType === OrderStatus.ToUse">
<view class="">
<view class="flex items-center" @click="combo.handleToStore">
<view class="w-190rpx h-190rpx mr-30rpx">
<wd-img width="100%" height="100%" :src="`${OSS}images/home/home_image5.png`"></wd-img>
</view>
<view class="flex-1">
<view class="flex justify-between items-center" @click="combo.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" v-if="type === 'GroupBuying'"></wd-icon>
<view class="text-26rpx leading-36rpx text-[#909399]" v-if="type === 'DouYin'">￥324</view>
</view>
<view class="flex justify-between items-center text-26rpx leading-36rpx text-[#909399] mt-18rpx">
<view class="">3小时</view>
<view v-if="type === 'GroupBuying'">x1</view>
</view>
<view class="text-[#606266] text-right mt-26rpx" v-if="type === 'GroupBuying'">
<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 class="font-400 text-26rpx text-[#606266] leading-40rpx mt-40rpx" v-if="type === 'DouYin'">
适用包间：青茶、红茶、绿茶
</view>
</view>
</view>
<view class="mt-30rpx font-500 leading-48rpx" v-if="type === 'GroupBuying'">
<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">券码 1052 4258 5654 125</text>
<text class="text-[#4C9F44]">复制</text>
</view>
</view>
</view>
</view>
</view>
</template>
<script lang="ts" setup name="Combo">
import { OrderStatus, OrderStatusText } from '@/utils/order'
/**
* Combo 套餐组件
* @description 订单详情页下的套餐卡片详情
*/
const OSS = inject('OSS')
defineProps({
/**
* 订单类型：团购、抖音等
*/
type: {
type: String,
default: ''
},
/**
* 订单类型：待使用、退款等
*/
orderType: {
type: String,
default: ''
}
})
const combo = {
// 跳转到对饮茶室的详情页
handleToStore: () => {
uni.navigateTo({
url: '/pages/store/store-detail/store-detail'
})
},
// 跳转到团购订单详情页
handleToGroupBuyingDetail: () => {
uni.navigateTo({
url: `/bundle/group-buying/platform/order-detail?type=${OrderStatus.ToUse}`
})
}
}
</script>
<script lang="ts">
export default {}
</script>

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

@ -1,7 +1,7 @@
<template>
<view class="">
<!-- 团购和抖音团购 -->
<view v-if="type === 'GroupBuying'" class="bg-white rounded-10rpx p-30rpx">
<view v-if="type === 'Direct' || type === 'Franchise' || type === 'DouYin'" class="bg-white rounded-10rpx p-30rpx">
<view class="flex justify-between items-center">
<view class="flex items-center">
<view class="w-40rpx h-40rpx mr-10rpx">
@ -13,9 +13,9 @@
</view>
</view>
<view class="font-400 text-28rpx leading-40rpx mt-12rpx">
<text class="text-[#4C9F44]">待使用</text>
<!-- <text class="text-[#606266]">已使用</text>
<text class="text-[#C9C9C9]">已退款</text> -->
<text class="text-[#4C9F44]" v-if="orderType === OrderStatus.ToUse">待使用</text>
<text class="text-[#606266]" v-if="orderType === OrderStatus.Used">已使用</text>
<text class="text-[#C9C9C9]" v-if="orderType === OrderStatus.AfterSaleFinished">已退款</text>
</view>
</view>
<view class="mt-22rpx">
@ -24,7 +24,7 @@
<wd-img width="100%" height="100%" :src="`${OSS}images/home/home_image5.png`"></wd-img>
</view>
<view class="flex-1">
<view @click="comboCard.handleToGroupBuyingDetail">
<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>
@ -37,9 +37,9 @@
</view>
<!-- TODO 直营店有申请退款和立即预定按钮，加盟店只有申请退款按钮，抖音只有立即预定按钮 -->
<view class="text-center flex items-center text-28rpx mt-28rpx" v-if="type === 'GroupBuying' ? 'justify-start' : 'justify-end'">
<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" v-if="type === 'Direct' ? 'justify-start' : 'justify-end'">
<view class="w-178rpx h-70rpx leading-70rpx rounded-8rpx border-[2rpx] border-[#9CA3AF] text-[#303133] mr-28rpx" v-if="type === 'Direct' || type === 'Franchise'">申请退款</view>
<view class="w-178rpx h-70rpx leading-70rpx rounded-8rpx border-[2rpx] border-[#4C9F44] text-[#4C9F44]" v-if="type === 'Direct' || type === 'DouYin'">立即预定</view>
</view>
</view>
</view>
@ -59,9 +59,20 @@
const OSS = inject('OSS')
const props = defineProps({
/**
* 类型: 直营(Direct)、抖音(DouYin)、加盟(Franchise) 等
*/
type: {
type: String,
default: 'GroupBuying'
default: 'Direct'
},
/**
* 订单类型: 待使用、退款等
* TODO 这里的orderType在接入接口的时候需要改为类似于data.orderType这种形式
*/
orderType: {
type: String,
default: 'toUse'
}
})
@ -74,7 +85,7 @@
},
// 跳转到团购订单详情页
handleToGroupBuyingDetail: () => {
handleToOrderDetail: () => {
uni.navigateTo({
url: `/bundle/group-buying/platform/order-detail?type=${props.type}&orderType=${OrderStatus.ToUse}`
})

186
src/components/order/ComboCoupon.vue Normal file
View File

@ -0,0 +1,186 @@
<template>
<view>
<!-- 平台团购直营店、抖音团购待使用 -->
<view class="bg-white rounded-16rpx p-30rpx" v-if="type === 'Direct' || type === 'Franchise' || type === 'DouYin'">
<view class="flex items-center" @click="comboCoupon.handleToStore">
<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="comboCoupon.handleToStore">
<view class="font-bold text-30rpx leading-42rpx text-[#303133] mr-10rpx w-362rpx line-1">团购套餐的可以点击跳转团购套餐的可以点击跳转团购套餐的可以点击跳转 </view>
<wd-icon name="chevron-right" size="32rpx" v-if="type === 'Direct'"></wd-icon>
<view class="text-26rpx leading-36rpx text-[#909399]" v-if="type === 'DouYin'">￥324</view>
</view>
<view class="flex justify-between items-center text-26rpx leading-36rpx text-[#909399] mt-18rpx">
<view>3小时</view>
<view v-if="type === 'Direct'">x1</view>
</view>
<view class="text-[#606266] text-right mt-26rpx" v-if="type === 'Direct'">
<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 class="font-400 text-26rpx text-[#606266] leading-40rpx mt-40rpx" v-if="type === 'DouYin'">
适用包间：青茶、红茶、绿茶
</view>
</view>
</view>
<!-- 平台团购直营店待使用 -->
<view class="mt-30rpx font-500 leading-48rpx" v-if="type === 'Direct' && orderType === OrderStatus.ToUse">
<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">券码 1052 4258 5654 125</text>
<text class="text-[#4C9F44]">复制</text>
</view>
</view>
</view>
<!-- 抖音团购已使用 -->
<view class="bg-white rounded-16rpx p-30rpx" v-if="orderType === OrderStatus.Used && type === 'DouYin'">
<view class="flex items-center" @click="comboCoupon.handleToStore">
<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="comboCoupon.handleToStore">
<view class="font-bold text-30rpx leading-42rpx text-[#303133] mr-10rpx w-300rpx line-1">这是团购套餐的名字</view>
<view class="text-26rpx leading-36rpx text-[#909399] mt-8rpx">￥324</view>
</view>
<view class="flex justify-between items-center text-26rpx leading-36rpx text-[#909399] mt-18rpx">
3小时
</view>
<view class="font-400 text-26rpx text-[#606266] leading-40rpx mt-40rpx">
适用包间：青茶、红茶、绿茶
</view>
</view>
</view>
</view>
<!-- 平台团购直营店已使用 -->
<view class="coupon-bg" v-if="type === 'Direct' && orderType === OrderStatus.Used">
<view class="flex items-center px-30rpx pt-30rpx pb-40rpx" @click="comboCoupon.handleToStore">
<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="comboCoupon.handleToStore">
<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 class="coupon-bg2 p-30rpx" v-if="type === 'Franchise' && orderType === OrderStatus.ToUse">
<view class="flex items-center">
<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="comboCoupon.handleToStore">
<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>
<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="mt-30rpx font-500 leading-48rpx text-[#606266] text-26rpx pb-44rpx">
有效期：2025.04.04-2025.12.31
</view>
<view class="px-30rpx mt-60rpx">
<view class="text-center">
<wd-img width="230rpx" height="230rpx" :src="`${OSS}images/reserve_room/reserve_room_image3.png`"></wd-img>
</view>
<view class="text-28rpx text-[#303133] mt-32rpx text-center">
<text class="mr-20rpx">券码 1052 4258 5654 125</text>
<text class="text-[#4C9F44]">复制</text>
</view>
</view>
</view>
</view>
</template>
<script lang="ts" setup name="ComboCoupon">
import { OrderStatus, OrderStatusText } from '@/utils/order'
/**
* Combo 套餐券组件
* @description 订单详情页下的套餐卡片详情，带有券码、二维码内容
*/
const OSS = inject('OSS')
defineProps({
/**
* 类型: 直营(Direct)、抖音(DouYin)、加盟(Franchise) 等
*/
type: {
type: String,
default: ''
},
/**
* 订单类型: 待使用、退款等
* TODO 这里的orderType在接入接口的时候需要改为类似于data.orderType这种形式
*/
orderType: {
type: String,
default: ''
}
})
const comboCoupon = {
handleToStore: () => {
uni.navigateTo({
url: '/src/bundle/group-buying/platform/store-detail'
})
}
}
</script>
<script lang="ts">
export default {}
</script>
<style lang="scss" scoped>
.coupon-bg {
background-image: url(#{$OSS}images/order/order_image2.png);
background-repeat: no-repeat;
background-size: 100% 100%;
}
.coupon-bg2 {
background-image: url(#{$OSS}images/order/order_image1.png);
background-repeat: no-repeat;
background-size: 100% 100%;
}
</style>