feat: 商品详情页面交互

pages/goods/index.vue

@@ -0,0 +1,44 @@
+<template>
+  <view class="goods-container">
+    <TopNavBar title="商品详情" :fixed="true" />
+
+    <view class="content-wrapper">
+      <ImageSwiper :border-radius="0" :images="goodsData.commodityPhotoList" />
+
+      <view class="goods-content">
+        <!-- 商品信息组件 -->
+        <GoodInfo :goodsData="goodsData" />
+
+        <ModuleTitle title="购买须知" />
+
+        <zero-markdown-view :markdown="goodsData.commodityTip" :fontSize="14" />
+      </view>
+    </view>
+  </view>
+</template>
+
+<script setup>
+import { ref } from "vue";
+import { onLoad } from "@dcloudio/uni-app";
+import { goodsDetail } from "@/request/api/GoodsApi";
+import TopNavBar from "@/components/TopNavBar/index.vue";
+import ImageSwiper from "@/components/ImageSwiper/index.vue";
+import GoodInfo from "./components/GoodInfo/index.vue";
+import ModuleTitle from "@/components/ModuleTitle/index.vue";
+
+const goodsData = ref({});
+// 获取商品详情数据
+const goodsInfo = async (params) => {
+  const res = await goodsDetail(params);
+
+  goodsData.value = res.data;
+};
+
+onLoad(({ commodityId = "1950766939442774018" }) => {
+  goodsInfo({ commodityId });
+});
+</script>
+
+<style scoped lang="scss">
+@import "./styles/index.scss";
+</style>