feat: 基本实现拆单收货

supplied-h5/src/view/joyful-selection/product-detail/index.vue

@@ -1,5 +1,7 @@
 <template>
-  <main class="detail-page">
+  <div>
+    <joyful-selection-product-detail-skeleton v-if="loading" />
+    <main v-else class="detail-page">
     <header class="detail-top">
       <van-icon name="arrow-left" @click="$router.back()" />
       <h1>商品详情</h1>
@@ -77,7 +79,8 @@
         @checkout="goCheckout"
       />
     </van-popup>
-  </main>
+    </main>
+  </div>
 </template>
 
 <script>
@@ -86,6 +89,7 @@ import { getFunction } from '@/api/supplied-service'
 import { useCartStore } from '@/store/cart'
 import JoyfulSkuPopup from '../products/components/JoyfulSkuPopup.vue'
 import JoyfulCartPanel from '../cart/components/JoyfulCartPanel.vue'
+import JoyfulSelectionProductDetailSkeleton from '@/skeleton-view/joyful-selection/product-detail/index.vue'
 
 const emptyProduct = {
   id: '',
@@ -102,9 +106,11 @@ export default {
   name: 'JoyfulSelectionProductDetail',
   components: {
     JoyfulSkuPopup,
-    JoyfulCartPanel
+    JoyfulCartPanel,
+    JoyfulSelectionProductDetailSkeleton
   },
   data: () => ({
+    loading: true,
     product: emptyProduct,
     showCartPopup: false,
     count: 1,
@@ -131,12 +137,15 @@ export default {
   methods: {
     ...mapActions(useCartStore, ['loadCart']),
     async loadProduct() {
+      this.loading = true
       try {
         const data = await getFunction('product-detail', { id: this.$route.query.id })
         this.product = data || emptyProduct
       } catch (error) {
         console.warn('查询商品详情失败', error)
         this.$toast(error.message || '查询商品详情失败')
+      } finally {
+        this.loading = false
       }
     },
     openCartPopup() {