feat: 商品详情页面交互

pages/goods/components/GoodInfo/index.vue

@@ -0,0 +1,68 @@
+<template>
+  <view class="good-info">
+    <!-- 价格区域 -->
+    <view class="price-section">
+      <view class="price-main">
+        <text class="currency">¥</text>
+        <text class="price">{{ goodsData.price || 399 }}</text>
+      </view>
+      <view class="price-tag" v-if="goodsData.tag">
+        {{ goodsData.tag }}
+      </view>
+    </view>
+
+    <!-- 标题区域 -->
+    <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="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 } from "vue";
+import LocationInfo from "@/components/LocationInfo/index.vue";
+
+// Props定义
+const props = defineProps({
+  goodsData: {
+    type: Object,
+    default: () => ({}),
+  },
+});
+
+// 设施列表 - 使用computed优化性能
+const facilitiesList = computed(() => {
+  if (props.goodsData.commodityTag && props.goodsData.commodityTag.length) {
+    return props.goodsData.commodityTag;
+  }
+
+  return [];
+});
+</script>
+
+<style scoped lang="scss">
+@import "./styles/index.scss";
+</style>