153 lines
7.6 KiB
Vue
153 lines
7.6 KiB
Vue
<template>
|
|
<view class="">
|
|
<!-- 平台团购直营店 -->
|
|
<view v-if="type === 'Direct'" 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">
|
|
<wd-img width="100%" height="100%" :src="`${OSS}icon/icon_tea.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="orderType === GroupBuyingCategoryOrderStatus.ToUse">待使用</text>
|
|
<text class="text-[#606266]" v-if="orderType === GroupBuyingCategoryOrderStatus.Used">已使用</text>
|
|
<text class="text-[#C9C9C9]" v-if="orderType === GroupBuyingCategoryOrderStatus.AfterSaleFinished">已退款</text>
|
|
</view>
|
|
</view>
|
|
<view class="mt-22rpx">
|
|
<view class="flex">
|
|
<view class="w-200rpx h-200rpx mr-28rpx">
|
|
<wd-img width="100%" height="100%" :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 class="font-400 leading-36rpx text-26rpx text-[#606266]">
|
|
<view class="mt-12rpx">适用包间 青茶、红茶、绿茶</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>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
|
|
<!-- 平台团购加盟店和抖音团购 -->
|
|
<view v-if="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">
|
|
<wd-img width="100%" height="100%" :src="`${OSS}icon/icon_tea.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="orderType === GroupBuyingCategoryOrderStatus.ToUse">待使用</text>
|
|
<text class="text-[#606266]" v-if="orderType === GroupBuyingCategoryOrderStatus.Used">已使用</text>
|
|
<text class="text-[#C9C9C9]" v-if="orderType === GroupBuyingCategoryOrderStatus.Refunded">已退款</text>
|
|
</view>
|
|
</view>
|
|
<view class="mt-22rpx">
|
|
<view class="flex">
|
|
<view class="w-200rpx h-200rpx mr-28rpx">
|
|
<wd-img width="100%" height="100%" :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-[#9CA3AF] text-[#303133] mr-28rpx" v-if="type === 'Franchise'">申请退款</view>
|
|
<view class="w-178rpx h-70rpx leading-70rpx rounded-8rpx border-[2rpx] border-[#4C9F44] text-[#4C9F44]" v-if="type === 'DouYin'">立即预定</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</template>
|
|
|
|
<script lang="ts" setup name="ComboCard">
|
|
import { GroupBuyingCategoryOrderStatus } from '@/utils/order'
|
|
|
|
/**
|
|
* ComboCard 套餐卡片组件
|
|
* @description 展示订单列表套餐卡片信息
|
|
*/
|
|
|
|
const OSS = inject('OSS')
|
|
|
|
const props = defineProps({
|
|
/**
|
|
* 类型: 直营(Direct)、加盟(Franchise)、抖音(DouYin) 等
|
|
*/
|
|
type: {
|
|
type: String,
|
|
default: 'Direct'
|
|
},
|
|
/**
|
|
* 订单类型: 待使用、退款等
|
|
* TODO 这里的orderType在接入接口的时候需要改为类似于data.orderType这种形式
|
|
*/
|
|
orderType: {
|
|
type: String,
|
|
default: 'toUse'
|
|
}
|
|
})
|
|
|
|
const comboCard = {
|
|
// 跳转到对饮茶室的详情页
|
|
handleToStore: () => {
|
|
uni.navigateTo({
|
|
url: '/pages/store/store-detail/store-detail'
|
|
})
|
|
},
|
|
|
|
// 跳转到团购订单详情页
|
|
handleToOrderDetail: () => {
|
|
// TODO 这里要对不同类型的订单进行区分跳转一个是直营的一个市加盟的
|
|
switch (props.type) {
|
|
case 'Direct':
|
|
uni.navigateTo({
|
|
url: `/bundle/group-buying/platform/direct-order-detail?orderType=${props.orderType}`
|
|
})
|
|
break;
|
|
case 'Franchise':
|
|
uni.navigateTo({
|
|
url: `/bundle/group-buying/platform/franchise-order-detail?orderType=${props.orderType}`
|
|
})
|
|
break;
|
|
case 'DouYin':
|
|
uni.navigateTo({
|
|
url: `/bundle/group-buying/douyin/douyin-order-detail?orderType=${props.orderType}`
|
|
})
|
|
break;
|
|
default:
|
|
break;
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<script lang="ts">
|
|
export default {}
|
|
</script> |