update: 对接金币相关

src/pages/coin/product-detail.vue

@@ -1,10 +1,60 @@
 <script setup>
+import { ref } from "vue";
+import { onLoad } from "@dcloudio/uni-app";
 import Container from "@/components/Container.vue";
 import CoinHeader from "./components/CoinHeader.vue";
 import ProductHeroSwiper from "./components/ProductHeroSwiper.vue";
 import OfflineExchangeNotice from "./components/OfflineExchangeNotice.vue";
-import { productDetail } from "./data";
+import { getGiftDetailAPI } from "@/apis";
 
+const productDetail = ref({
+  name: "",
+  coinPrice: 0,
+  stock: 0,
+  images: [],
+  descriptions: [],
+});
+
+const loadProductDetail = async (id) => {
+  try {
+    const result = await getGiftDetailAPI(id);
+    const images = Array.isArray(result?.images)
+      ? result.images
+          .slice()
+          .sort((first, second) =>
+            (Number(first?.sort_order) || 0) - (Number(second?.sort_order) || 0)
+          )
+          .map((item) => item?.image_url)
+          .filter(Boolean)
+      : [];
+
+    productDetail.value = {
+      ...productDetail.value,
+      name: result?.name || "",
+      coinPrice: Number(result?.coin_price) || 0,
+      stock: Number(result?.stock) || 0,
+      images,
+      descriptions: result?.description
+        ? String(result.description).split(/\r?\n/).filter(Boolean)
+        : [],
+    };
+  } catch (error) {
+    console.error("加载礼品详情失败", error);
+  }
+};
+
+onLoad((options = {}) => {
+  const id = Number(options.id);
+  if (!Number.isInteger(id) || id <= 0) {
+    uni.showToast({
+      title: "商品参数无效",
+      icon: "none",
+    });
+    return;
+  }
+
+  loadProductDetail(id);
+});
 </script>
 
 <template>
@@ -14,14 +64,13 @@ import { productDetail } from "./data";
     </template>
     <view class="product-detail">
       <ProductHeroSwiper
-        :backgrounds="productDetail.backgrounds"
-        :productImage="productDetail.image"
+        :images="productDetail.images"
       />
       <view class="product-detail__summary">
         <text class="product-detail__name">{{ productDetail.name }}</text>
         <view class="product-detail__balance">
-          <text>累计金币：</text>
-          <text class="product-detail__amount">{{ productDetail.cumulative }}</text>
+          <text>金币：</text>
+          <text class="product-detail__amount">{{ productDetail.coinPrice }}</text>
           <text>（剩余{{ productDetail.stock }}个）</text>
         </view>
       </view>