87 lines
4.0 KiB
Vue
87 lines
4.0 KiB
Vue
<template>
|
||
<view class="">
|
||
<!-- 团购和抖音团购 -->
|
||
<view v-if="type === 'GroupBuying'" 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]">待使用</text>
|
||
<!-- <text class="text-[#606266]">已使用</text>
|
||
<text class="text-[#C9C9C9]">已退款</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.handleToGroupBuyingDetail">
|
||
<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]">
|
||
<!-- TODO 除了直营店其它的都没有这个描述信息： 适用包间 青茶、红茶、绿茶 -->
|
||
<view class="mt-12rpx">适用包间 青茶、红茶、绿茶</view>
|
||
<view class="mt-10rpx">有效期至2025-03-23</view>
|
||
</view>
|
||
</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>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</template>
|
||
|
||
<script lang="ts" setup name="ComboCard">
|
||
import { OrderStatus, OrderStatusText } from '@/utils/order'
|
||
|
||
/**
|
||
* ComboCard 套餐卡片组件
|
||
* @description 展示订单列表套餐卡片信息
|
||
*/
|
||
|
||
const OSS = inject('OSS')
|
||
|
||
const props = defineProps({
|
||
type: {
|
||
type: String,
|
||
default: 'GroupBuying'
|
||
}
|
||
})
|
||
|
||
const comboCard = {
|
||
// 跳转到对饮茶室的详情页
|
||
handleToStore: () => {
|
||
uni.navigateTo({
|
||
url: '/pages/store/store-detail/store-detail'
|
||
})
|
||
},
|
||
|
||
// 跳转到团购订单详情页
|
||
handleToGroupBuyingDetail: () => {
|
||
uni.navigateTo({
|
||
url: `/bundle/group-buying/platform/order-detail?type=${props.type}&orderType=${OrderStatus.ToUse}`
|
||
})
|
||
}
|
||
}
|
||
</script>
|
||
|
||
<script lang="ts">
|
||
export default {}
|
||
</script> |