102 lines
2.6 KiB
Vue
102 lines
2.6 KiB
Vue
<template>
|
|
<view
|
|
v-if="orderType === '0'"
|
|
class="border-box bg-white p-12 rounded-12 mb-12"
|
|
>
|
|
<!-- 酒店类型入住离店日期部分 -->
|
|
<DateRangeSection
|
|
v-if="orderData.orderType === 0"
|
|
:selectedDate="selectedDate"
|
|
/>
|
|
|
|
<view class="font-size-16 font-500 color-000 line-height-24 ellipsis-1">
|
|
{{ orderData.commodityName }}
|
|
</view>
|
|
|
|
<view
|
|
class="border-box border-bottom font-size-12 color-99A0AE line-height-16 pb-12"
|
|
>
|
|
{{ orderData.commodityDescription }}
|
|
</view>
|
|
|
|
<!-- 权益部分 -->
|
|
<view class="border-box flex flex-items-center pt-12">
|
|
<text
|
|
class="bg-F7F7F7 border-box rounded-4 font-size-11 color-525866 mr-4 pt-4 pb-4 pl-6 pr-6"
|
|
v-for="(item, index) in commodityFacilityList"
|
|
:key="index"
|
|
>
|
|
{{ item }}
|
|
</text>
|
|
</view>
|
|
</view>
|
|
|
|
<view
|
|
v-if="orderType !== '0'"
|
|
class="border-box bg-white p-12 rounded-12 mb-12"
|
|
>
|
|
<view
|
|
class="font-size-16 font-500 color-000 line-height-24 ellipsis-1 mb-8"
|
|
>
|
|
{{ orderData.commodityName }}
|
|
</view>
|
|
|
|
<view class="flex font-size-12">
|
|
<text class="w-60 color-99A0AE">购买数量</text>
|
|
<text class="color-525866">{{ commodityAmount }}</text>
|
|
</view>
|
|
|
|
<view
|
|
v-if="orderData.orderStatus === '0'"
|
|
class="border-box border-top pt-12 font-size-14 font-500 color-171717 mt-12"
|
|
>凭[电子凭证]直接验证使用</view
|
|
>
|
|
</view>
|
|
</template>
|
|
|
|
<script setup>
|
|
import { defineProps, computed } from "vue";
|
|
import DateRangeSection from "@/components/DateRangeSection/index.vue";
|
|
|
|
const props = defineProps({
|
|
orderData: {
|
|
type: Object,
|
|
required: true,
|
|
default: () => ({}),
|
|
},
|
|
});
|
|
|
|
const selectedDate = computed(() => {
|
|
// 计算总天数
|
|
const startDate = props.orderData.checkInData || "";
|
|
const endDate = props.orderData.checkOutData || "";
|
|
const timeStamp = 1000 * 60 * 60 * 24;
|
|
const totalDays = (new Date(endDate) - new Date(startDate)) / timeStamp;
|
|
|
|
return {
|
|
startDate,
|
|
endDate,
|
|
totalDays,
|
|
};
|
|
});
|
|
|
|
const orderType = computed(() => props.orderData.orderType);
|
|
|
|
const commodityAmount = computed(() => {
|
|
// 门票单位：张、餐饮单位：份
|
|
const { commodityAmount } = props.orderData;
|
|
return orderType.value === "2"
|
|
? `${parseInt(commodityAmount)}张`
|
|
: `${parseInt(commodityAmount)}份`;
|
|
});
|
|
|
|
// 取3个权益
|
|
const commodityFacilityList = computed(() => {
|
|
return props.orderData.commodityFacilityList.slice(0, 3) || [];
|
|
});
|
|
</script>
|
|
|
|
<style scoped lang="scss">
|
|
@import "./styles/index.scss";
|
|
</style>
|