188 lines
9.1 KiB
Vue
188 lines
9.1 KiB
Vue
<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' || type === 'Franchise'">￥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' || type === 'Franchise'">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' && orderStatus === 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="coupon-bg" v-if="type === 'Direct' && orderStatus === 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' && orderStatus === 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 class="bg-white rounded-16rpx p-30rpx" v-if="orderStatus === 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>
|
||
</template>
|
||
|
||
<script lang="ts" setup name="ComboCoupon">
|
||
import { OrderStatus } from '@/utils/order'
|
||
|
||
/**
|
||
* Combo 套餐券组件
|
||
* @description 订单详情页下的套餐卡片详情，带有券码、二维码内容
|
||
*/
|
||
|
||
const OSS = inject('OSS')
|
||
|
||
defineProps({
|
||
/**
|
||
* 类型: 直营(Direct)、抖音(DouYin)、加盟(Franchise) 等
|
||
*/
|
||
type: {
|
||
type: String,
|
||
default: ''
|
||
},
|
||
/**
|
||
* 订单类型: 待使用、退款等
|
||
* TODO 这里的orderStatus在接入接口的时候需要改为类似于data.orderStatus这种形式
|
||
*/
|
||
orderStatus: {
|
||
type: String,
|
||
default: ''
|
||
}
|
||
})
|
||
|
||
const comboCoupon = {
|
||
handleToStore: () => {
|
||
uni.navigateTo({
|
||
url: '/src/bundle/order/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>
|