56 lines
1.2 KiB
Vue
56 lines
1.2 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>
|
|
</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 } from "vue";
|
|
|
|
// 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 [];
|
|
});
|
|
|
|
</script>
|
|
|
|
<style scoped lang="scss">
|
|
@import "./styles/index.scss";
|
|
</style>
|