80 lines
1.9 KiB
Vue
80 lines
1.9 KiB
Vue
<template>
|
||
<view class="good-info">
|
||
<!-- 标题区域 -->
|
||
<view class="title-section">
|
||
<text class="title">
|
||
{{ goodsData.commodityName || "【成人票】云从朵花温泉门票" }}
|
||
</text>
|
||
<view class="tag-wrapper" v-if="goodsData.timeTag">
|
||
<view class="time-tag">{{ goodsData.timeTag || "随时可退" }}</view>
|
||
</view>
|
||
<!-- 日历ICON，酒店订单显示 -->
|
||
<uni-icons
|
||
class="calender-icon"
|
||
v-if="isShowCalendar"
|
||
type="calendar"
|
||
size="24"
|
||
color="#00A6FF"
|
||
@click="showCalendar"
|
||
/>
|
||
</view>
|
||
|
||
<!-- 地址区域 -->
|
||
<view class="address-section">
|
||
<LocationInfo :orderData="goodsData" />
|
||
</view>
|
||
|
||
<!-- 设施信息区域 -->
|
||
<view class="facilities-section">
|
||
<view class="facilities-grid">
|
||
<view
|
||
class="facility-item"
|
||
v-for="(facility, index) in facilitiesList"
|
||
:key="index"
|
||
>
|
||
<text class="facility-text">{{ facility }}</text>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</template>
|
||
|
||
<script setup>
|
||
import { computed, defineProps, defineEmits } from "vue";
|
||
import LocationInfo from "@/components/LocationInfo/index.vue";
|
||
|
||
// 事件定义
|
||
const emits = defineEmits(["showCalendar"]);
|
||
|
||
// Props定义
|
||
const props = defineProps({
|
||
goodsData: {
|
||
type: Object,
|
||
default: () => ({}),
|
||
},
|
||
});
|
||
|
||
// 设施列表 - 使用computed优化性能
|
||
const facilitiesList = computed(() => {
|
||
if (
|
||
props.goodsData.commodityFacilityList &&
|
||
props.goodsData.commodityFacilityList.length
|
||
) {
|
||
return props.goodsData.commodityFacilityList;
|
||
}
|
||
|
||
return [];
|
||
});
|
||
|
||
// 日历弹窗
|
||
const showCalendar = () => emits("showCalendar");
|
||
|
||
// 是否显示日历按钮
|
||
const isShowCalendar = computed(() => {
|
||
return props.goodsData.commodityTypeCode === "0";
|
||
});
|
||
</script>
|
||
|
||
<style scoped lang="scss">
|
||
@import "./styles/index.scss";
|
||
</style> |