feat: 实现了商品组件

src/pages/Discovery/components/DiscoveryGoodsCard/index.vue

@@ -0,0 +1,79 @@
+<template>
+  <view class="box-border w-full px-[16px]">
+    <scroll-view
+      class="w-full"
+      :scroll-x="hasMultipleGoods"
+      :show-scrollbar="false"
+      enhanced
+    >
+      <view class="flex w-full gap-[12px]">
+        <view
+          v-for="goods in goodsList"
+          :key="goods.commodityId"
+          class="box-border flex h-[118px] overflow-hidden rounded-[16px] bg-white p-[10px] shadow-[0_4px_18px_rgba(31,110,74,0.08)]"
+          :class="{
+            'w-full': !hasMultipleGoods,
+            'w-4/5 shrink-0': hasMultipleGoods,
+          }"
+        >
+          <image
+            class="h-[98px] w-[98px] shrink-0 rounded-[12px] bg-[#eef8f2]"
+            :src="goods.image"
+            mode="aspectFill"
+          />
+
+          <view class="ml-[12px] flex min-w-0 flex-1 flex-col py-[2px]">
+            <text class="block truncate text-[16px] font-semibold leading-[22px] text-[#1f2937]">
+              {{ goods.title }}
+            </text>
+            <text class="mt-[2px] block truncate text-[13px] leading-[18px] text-[#9ca3af]">
+              {{ goods.description }}
+            </text>
+
+            <view class="mt-auto flex items-end justify-between gap-[8px]">
+              <view class="min-w-0 flex-1 truncate font-bold text-[#111827]">
+                <text class="text-[18px]">¥</text>
+                <text class="text-[24px] leading-[28px]">{{ goods.price }}</text>
+              </view>
+              <button
+                class="m-0 flex h-[36px] shrink-0 items-center justify-center rounded-full bg-[#20cf6d] px-[18px] text-[14px] leading-none text-white after:border-0"
+                @click.stop="handleBuy(goods)"
+              >
+                购买
+              </button>
+            </view>
+          </view>
+        </view>
+      </view>
+    </scroll-view>
+  </view>
+</template>
+
+<script setup>
+import { computed, ref } from "vue";
+
+const goodsList = ref([
+  {
+    commodityId: "xiaoqikong-rafting",
+    image: "https://one-feel-config-images-bucket.oss-cn-chengdu.aliyuncs.com/xiaoqi/tickets/product-boat-rafting.jpg",
+    title: "卧龙潭漂游",
+    description: "含防水袋 · 全程约 30 分钟",
+    price: "69.0",
+  },
+  {
+    commodityId: "xiaoqikong-classic",
+    image: "https://one-feel-config-images-bucket.oss-cn-chengdu.aliyuncs.com/xiaoqi/tickets/product-classic-forest-path.jpg",
+    title: "小七孔经典畅游",
+    description: "含门票及观光车 · 随买随用",
+    price: "188.0",
+  },
+]);
+
+const hasMultipleGoods = computed(() => goodsList.value.length > 1);
+
+const handleBuy = (goods) => {
+  uni.navigateTo({
+    url: `/pages/goods/index?commodityId=${encodeURIComponent(goods.commodityId)}`,
+  });
+};
+</script>

src/pages/Discovery/components/DiscoveryGuideMapToolCard/styles/index.scss

@@ -1,6 +1,6 @@
 .discovery-guide-map-tool-card {
   width: 100%;
-  height: 96px;
+  height: 88px;
   display: flex;
   align-items: flex-start;
   box-sizing: border-box;

src/pages/Discovery/index.vue

@@ -29,6 +29,7 @@
         <DiscoveryPhotoToolCard @didSelectItem="handleToolCardClick" @didSelectOption="handleToolOptionClick" />
         <DiscoveryAudioToolCard @didSelectItem="handleToolCardClick" />
         <DiscoveryGuideMapToolCard @didSelectItem="handleToolCardClick" />
+        <DiscoveryGoodsCard />
       </view>
     </scroll-view>
   </view>
@@ -47,6 +48,7 @@ import QuickQuestions from "./components/QuickQuestions/index.vue";
 import DiscoveryPhotoToolCard from "./components/DiscoveryPhotoToolCard/index.vue";
 import DiscoveryAudioToolCard from "./components/DiscoveryAudioToolCard/index.vue";
 import DiscoveryGuideMapToolCard from "./components/DiscoveryGuideMapToolCard/index.vue";
+import DiscoveryGoodsCard from "./components/DiscoveryGoodsCard/index.vue";
 import PanoramicHome from "./components/PanoramicHome/index.vue";
 
 import { homeTabsData, getNearbyTags, homeTabContentData, homeQuickQuestionData } from "../../request/api/MainPageDataApi";