From 9eb42c4a0c3db2d21705f960613982d073e282f1 Mon Sep 17 00:00:00 2001
From: ZF sun <34314687@qq.com>
Date: Fri, 24 Jul 2026 18:10:31 +0800
Subject: [PATCH 1/4] =?UTF-8?q?feat(goods-detail):=20=E5=95=86=E5=93=81?=
 =?UTF-8?q?=E8=AF=A6=E6=83=85=E9=A1=B5=E6=8E=A5=E5=85=A5=E9=AA=A8=E6=9E=B6?=
 =?UTF-8?q?=E5=B1=8F?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- 新增 7 段占位（banner / 价格 / 标题 / 规格 / 商家 / 详情 / 推荐）
  配合底部 action 占位（fixed bottom，2 个 icon + 2 个 btn），
  避免首屏出现"空白 → 真实内容"的跳变
- detail.vue 透传 loading 状态；骨架屏在加载态、未拿到 goods_id 时
  持续显示（hasRealData computed），网络断开时不切到空详情
- loading-cover 改为 initShow=false；骨架屏接管首屏视觉
- 骨架屏最短展示 300ms，保证数据快时用户也能感知到占位

Co-Authored-By: Claude <noreply@anthropic.com>
---
 .../goods-detail-view/goods-detail-view.vue   | 230 +++++++++++++++++-
 pages_goods/detail.vue                        |   6 +-
 pages_goods/public/js/detail.js               |  30 +--
 3 files changed, 248 insertions(+), 18 deletions(-)

diff --git a/pages_goods/_components/goods-detail-view/goods-detail-view.vue b/pages_goods/_components/goods-detail-view/goods-detail-view.vue
index edfd882..be74771 100644
--- a/pages_goods/_components/goods-detail-view/goods-detail-view.vue
+++ b/pages_goods/_components/goods-detail-view/goods-detail-view.vue
@@ -1,8 +1,27 @@
 <template>
     <view>
+        <!-- 骨架屏：商品详情加载时按结构分段占位（banner / 价格 / 标题 / 规格 / 商家 / 详情 / 推荐）
+             关闭条件: loading=false 且已拿到真实商品数据(goods_id>0); 任一不满足都保留骨架屏 -->
+        <view v-if="loading || !hasRealData" class="goods-detail-skeleton">
+            <x-skeleton data-component-name="goods-detail-view-banner" :loading="true" :configs="skeletonBanner"></x-skeleton>
+            <x-skeleton data-component-name="goods-detail-view-price" :loading="true" :configs="skeletonPrice"></x-skeleton>
+            <x-skeleton data-component-name="goods-detail-view-title" :loading="true" :configs="skeletonTitle"></x-skeleton>
+            <x-skeleton data-component-name="goods-detail-view-sku" :loading="true" :configs="skeletonSku"></x-skeleton>
+            <x-skeleton data-component-name="goods-detail-view-merch" :loading="true" :configs="skeletonMerch"></x-skeleton>
+            <x-skeleton data-component-name="goods-detail-view-detail" :loading="true" :configs="skeletonDetail"></x-skeleton>
+            <x-skeleton data-component-name="goods-detail-view-recommend" :loading="true" :configs="skeletonRecommend"></x-skeleton>
+            <!-- 底部 action 骨架占位：与 ns-goods-action 同样 fixed bottom, 避免数据未到时底部跳变 -->
+            <view class="goods-detail-skeleton-action">
+                <view class="skeleton-action-icons">
+                    <view class="skeleton-action-icon" v-for="i in 2" :key="'sk-act-icon-' + i"></view>
+                </view>
+                <view class="skeleton-action-btn"></view>
+                <view class="skeleton-action-btn primary"></view>
+            </view>
+        </view>
         <!-- 修复鸿蒙元服务: 移除无效的 scroll-y="true" 属性 (scroll-y 是 <scroll-view> 的指令属性)
              鸿蒙 JSVM 早期版本遇到无效 attribute 会让 view 子树静默不渲染, 导致整个详情页空白 -->
-        <view class="goods-detail" :class="isIphoneX ? 'active' : ''">
+        <view v-else class="goods-detail" :class="isIphoneX ? 'active' : ''">
             <view class="goods-container">
                 <!-- AI客服悬浮按钮 -->
                 <view class="ai-chat-float-btn" @tap.stop="$emit('aiChatClick')" v-if="showAIChatBtn">
@@ -503,11 +522,142 @@ export default {
             default: () => {
                 return {};
             }
+        },
+        // 是否显示骨架屏（true：展示骨架；false：展示真实内容）
+        loading: {
+            type: Boolean,
+            default: true
         }
     },
     components: {
         pengpaiFadeinOut
     },
+    data() {
+        // 商品详情骨架屏：模拟「轮播图 + 价格行 + 标题简介 + 规格行 + 商家 + 详情 + 推荐」
+        return {
+            // 1. 轮播图：方形 banner 占位
+            skeletonBanner: {
+                padding: '0',
+                gridRows: 1,
+                gridColumns: 1,
+                gridRowsGap: '24rpx',
+                headShow: true,
+                headWidth: '100%',
+                headHeight: '750rpx',
+                headBorderRadius: '0',
+                textShow: false
+            },
+            // 2. 价格行：一行价 + 一行原价
+            skeletonPrice: {
+                padding: '24rpx 24rpx 16rpx',
+                gridRows: 2,
+                gridColumns: 1,
+                gridRowsGap: '16rpx',
+                itemDirection: 'column',
+                itemAlign: 'flex-start',
+                headShow: false,
+                textShow: true,
+                textRows: 1,
+                textRowsGap: '0',
+                textWidth: ['40%', '30%'],
+                textHeight: ['48rpx', '24rpx'],
+                textBorderRadius: '6rpx'
+            },
+            // 3. 标题/简介：标题两行 + 简介 + 标签
+            skeletonTitle: {
+                padding: '8rpx 24rpx 24rpx',
+                gridRows: 1,
+                gridColumns: 1,
+                gridRowsGap: '20rpx',
+                itemDirection: 'column',
+                itemAlign: 'flex-start',
+                headShow: false,
+                textShow: true,
+                textRows: 4,
+                textRowsGap: '16rpx',
+                textWidth: ['90%', '60%', '100%', '40%'],
+                textHeight: ['40rpx', '40rpx', '24rpx', '24rpx'],
+                textBorderRadius: '6rpx'
+            },
+            // 4. 规格行：单行高度的小条
+            skeletonSku: {
+                padding: '20rpx 24rpx',
+                gridRows: 1,
+                gridColumns: 1,
+                gridRowsGap: '0',
+                itemDirection: 'row',
+                itemAlign: 'center',
+                headShow: true,
+                headWidth: '120rpx',
+                headHeight: '32rpx',
+                headBorderRadius: '6rpx',
+                textShow: true,
+                textRows: 1,
+                textRowsGap: '0',
+                textWidth: '60%',
+                textHeight: '28rpx',
+                textBorderRadius: '6rpx',
+                itemGap: '20rpx'
+            },
+            // 5. 商家：头像 + 名称
+            skeletonMerch: {
+                padding: '24rpx',
+                gridRows: 1,
+                gridColumns: 1,
+                gridRowsGap: '0',
+                itemDirection: 'row',
+                itemAlign: 'center',
+                headShow: true,
+                headWidth: '80rpx',
+                headHeight: '80rpx',
+                headBorderRadius: '50%',
+                textShow: true,
+                textRows: 2,
+                textRowsGap: '12rpx',
+                textWidth: ['50%', '80%'],
+                textHeight: ['28rpx', '20rpx'],
+                textBorderRadius: '6rpx',
+                itemGap: '24rpx'
+            },
+            // 6. 商品详情：多行段落
+            skeletonDetail: {
+                padding: '24rpx',
+                gridRows: 1,
+                gridColumns: 1,
+                gridRowsGap: '0',
+                itemDirection: 'column',
+                itemAlign: 'flex-start',
+                headShow: false,
+                textShow: true,
+                textRows: 6,
+                textRowsGap: '16rpx',
+                textWidth: ['100%', '100%', '90%', '100%', '80%', '60%'],
+                textHeight: '24rpx',
+                textBorderRadius: '6rpx'
+            },
+            // 7. 推荐：两列卡片缩略图
+            skeletonRecommend: {
+                padding: '24rpx',
+                gridRows: 1,
+                gridColumns: 2,
+                gridRowsGap: '24rpx',
+                gridColumnsGap: '24rpx',
+                itemDirection: 'column',
+                itemAlign: 'flex-start',
+                headShow: true,
+                headWidth: '100%',
+                headHeight: '320rpx',
+                headBorderRadius: '12rpx',
+                textShow: true,
+                textRows: 2,
+                textRowsGap: '12rpx',
+                textWidth: ['100%', '70%'],
+                textHeight: ['24rpx', '24rpx'],
+                textBorderRadius: '6rpx',
+                itemGap: '12rpx'
+            }
+        };
+    },
     computed: {
         aiAvatarUrl() {
             return this.$util.img(IMAGE_CONFIG.aiAvatar);
@@ -526,6 +676,11 @@ export default {
         hasDetailContent() {
             const hasPdf = this.goodsSkuDetail && this.goodsSkuDetail.pdf_url;
             return hasPdf || this.hasHtmlTab;
+        },
+        // 是否有真实商品数据: goods_id > 0 才算拿到商品详情
+        // 用于「未拿到任何数据时不显示真实内容」, 避免加载失败/异常时切到空详情页
+        hasRealData() {
+            return this.goodsSkuDetail && Number(this.goodsSkuDetail.goods_id) > 0;
         }
     },
     mixins: [scroll, detail]
@@ -534,6 +689,79 @@ export default {
 
 <style lang="scss">
 @import '@/common/css/goods_detail.scss';
+
+/* 骨架屏外层：与商品详情整体上对齐，左右内边距由各 skeleton 自己控制 */
+.goods-detail-skeleton {
+	width: 100%;
+	background-color: #fff;
+}
+
+/* 底部 action 骨架占位：与 ns-goods-action 同样 fixed bottom, 高度接近真实按钮 */
+.goods-detail-skeleton-action {
+	position: fixed;
+	left: 0;
+	right: 0;
+	bottom: 0;
+	height: 100rpx;
+	display: flex;
+	align-items: center;
+	background-color: #fff;
+	z-index: 9;
+	padding: 0 16rpx;
+	box-sizing: border-box;
+	border-top: 1rpx solid #f2f2f2;
+	padding-bottom: env(safe-area-inset-bottom);
+}
+
+.goods-detail-skeleton-action .skeleton-action-icons {
+	display: flex;
+	align-items: center;
+	margin-right: 16rpx;
+}
+
+.goods-detail-skeleton-action .skeleton-action-icon {
+	width: 60rpx;
+	height: 60rpx;
+	border-radius: 50%;
+	background-color: #EAEDF5;
+	background: linear-gradient(90deg, #EAEDF5 25%, #F9FAFF 37%, #EAEDF5 50%);
+	background-size: 400% 100%;
+	animation: skActAnim 1.8s ease infinite;
+	margin-right: 16rpx;
+}
+
+.goods-detail-skeleton-action .skeleton-action-icon:last-child {
+	margin-right: 0;
+}
+
+.goods-detail-skeleton-action .skeleton-action-btn {
+	flex: 1;
+	height: 70rpx;
+	border-radius: 10rpx;
+	margin-right: 16rpx;
+	background-color: #EAEDF5;
+	background: linear-gradient(90deg, #EAEDF5 25%, #F9FAFF 37%, #EAEDF5 50%);
+	background-size: 400% 100%;
+	animation: skActAnim 1.8s ease infinite;
+}
+
+.goods-detail-skeleton-action .skeleton-action-btn:last-child {
+	margin-right: 0;
+}
+
+.goods-detail-skeleton-action .skeleton-action-btn.primary {
+	background: linear-gradient(90deg, #d8d8d8 25%, #ececec 37%, #d8d8d8 50%);
+	background-size: 400% 100%;
+}
+
+@keyframes skActAnim {
+	0% {
+		background-position: 100% 50%;
+	}
+	100% {
+		background-position: 0 50%;
+	}
+}
 </style>
 <style scoped>
 .ai-chat-float-btn {
diff --git a/pages_goods/detail.vue b/pages_goods/detail.vue
index 02c3a09..5f52a11 100644
--- a/pages_goods/detail.vue
+++ b/pages_goods/detail.vue
@@ -8,7 +8,7 @@
 		</view> -->
 		<!-- #endif -->
 
-		<goods-detail-view :goodsSkuDetail="goodsSkuDetail" ref="goodsDetailView" @aiChatClick="sendToAIChat(goodsSkuDetail)">
+		<goods-detail-view :goodsSkuDetail="goodsSkuDetail" :loading="loading" ref="goodsDetailView" @aiChatClick="sendToAIChat(goodsSkuDetail)">
 			<!-- 价格区域 -->
 			<template v-slot:price>
 				<!-- 限时折扣 -->
@@ -533,7 +533,9 @@
 		</goods-detail-view>
 		<to-top v-if="showTop" @toTop="scrollToTopNative()"></to-top>
 		<ns-login ref="login"></ns-login>
-		<loading-cover ref="loadingCover"></loading-cover>
+		<!-- 商品详情页已有骨架屏, 不再启用 loading-cover 全屏遮罩(initShow=false),
+		     否则骨架屏会被遮罩盖住、用户看不到任何占位过渡 -->
+		<loading-cover ref="loadingCover" :initShow="false"></loading-cover>
 
 		<!-- 隐私弹窗 -->
 		<privacy-popup ref="privacyPopup"></privacy-popup>
diff --git a/pages_goods/public/js/detail.js b/pages_goods/public/js/detail.js
index 2f7ad34..3ccc7dc 100644
--- a/pages_goods/public/js/detail.js
+++ b/pages_goods/public/js/detail.js
@@ -4,7 +4,10 @@ export default {
 			goodsRoute: '/pages_goods/detail',
 			couponList: [], //优惠券列表
 			couponBtnSwitch: false, //获取优惠券防止重复提交
-			
+			// 商品详情骨架屏：true 显示骨架，false 显示真实内容
+			// 首屏进入即为 true，商品详情数据首屏渲染完成后（与 loading-cover 同时机）置 false
+			loading: true,
+
 			posterApi: '/api/goods/poster',
 
 			//满减活动
@@ -103,13 +106,12 @@ export default {
 			await this.getGoodsSkuDetail();
 		} catch (e) {
 			console.error('getGoodsSkuDetail failed:', e);
-			// 即使失败也要保证 loading-cover 关闭, 避免空白屏
-			setTimeout(() => {
-				try {
-					const ref = this.$refs && this.$refs.loadingCover;
-					if (ref && typeof ref.hide === 'function') ref.hide();
-				} catch (e2) { /* swallow */ }
-			}, 0);
+			// 失败时不关闭骨架屏, 由视图层 hasRealData(goods_id>0) 自动保留占位,
+			// 避免错误地把页面切到"空详情"状态
+			uni.showToast({
+				title: this.$lang ? this.$lang('common.networkError') : '网络异常，请重试',
+				icon: 'none'
+			});
 		}
 	},
 	onHide() {
@@ -203,14 +205,12 @@ export default {
 				await this.$nextTick();
 				// #endif
 
-				// 关闭 loading-cover 提前到 nextTick 后, 让用户看到首屏内容
-				// 用 setTimeout 0 推迟到下一个 task, 避开当前 sync 阶段 vendor 报错导致 hide 失败
+				// 关闭商品详情骨架屏: 在真实数据首屏渲染完成后再隐藏骨架屏,
+				// 用户会看到骨架屏 → 真实详情 的清晰过渡
+				// 最短展示 300ms: 数据请求很快时也保留足够感知时间, 否则一闪而过用户根本看不到骨架屏
 				setTimeout(() => {
-					try {
-						const ref = this.$refs && this.$refs.loadingCover;
-						if (ref && typeof ref.hide === 'function') ref.hide();
-					} catch (e) { /* swallow */ }
-				}, 0);
+					this.loading = false;
+				}, 300);
 
 				// 处理商品数据 (同步字段变换 + 后台并发 getGoodsForm)
 				await this.handleGoodsSkuData();

From 6cf82612989501b95b4ce02a8c358d045a01b558 Mon Sep 17 00:00:00 2001
From: ZF sun <34314687@qq.com>
Date: Fri, 24 Jul 2026 18:14:18 +0800
Subject: [PATCH 2/4] build: add localhost:8050-h5 build configuration
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

新增本地开发的h5端打包配置，指定端口8050并设置对应平台环境变量
---
 package.json | 10 ++++++++++
 1 file changed, 10 insertions(+)

diff --git a/package.json b/package.json
index 693ba8e..e09e7a5 100644
--- a/package.json
+++ b/package.json
@@ -66,6 +66,16 @@
         "define": {
           "PRODUCTION": true
         }
+      },
+      "localhost:8050-h5": {
+        "title": "localhost:8050",
+        "env": {
+          "UNI_PLATFORM": "h5",
+          "UNI_APP_DOMAIN": "http://localhost:8050/"
+        },
+        "define": {
+          "PRODUCTION": true
+        }
       }
     }
   }

From 791d0bb6239915be21081582e4eda0b60c996f54 Mon Sep 17 00:00:00 2001
From: ZF sun <34314687@qq.com>
Date: Sat, 25 Jul 2026 09:06:39 +0800
Subject: [PATCH 3/4] =?UTF-8?q?fix(goods-detail):=20=E9=AA=A8=E6=9E=B6?=
 =?UTF-8?q?=E5=B1=8F=E6=9C=9F=E9=97=B4=E4=B8=8D=E5=86=8D=E6=B8=B2=E6=9F=93?=
 =?UTF-8?q?=E7=9C=9F=E5=AE=9E=E5=BA=95=E9=83=A8=20action?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- 把 <slot name="action"> 移入 v-else 分支, 与 .goods-detail 同一生命周期
- 修复: 加载初期 goodsSkuDetail.goods_state=0 (默认值), 父组件 detail.vue
  模板里 <ns-goods-action> 走 v-else 显示"该商品已下架"
- 数据到达 goods_state=1 后才切到正常按钮, 导致首屏出现"已下架→正常"闪烁
- 修复后: 骨架屏状态下完全不渲染 ns-goods-action, 仅显示 .goods-detail-skeleton-action 占位

Co-Authored-By: Claude <noreply@anthropic.com>
---
 .../goods-detail-view/goods-detail-view.vue            | 10 ++++++----
 1 file changed, 6 insertions(+), 4 deletions(-)

diff --git a/pages_goods/_components/goods-detail-view/goods-detail-view.vue b/pages_goods/_components/goods-detail-view/goods-detail-view.vue
index be74771..4851f24 100644
--- a/pages_goods/_components/goods-detail-view/goods-detail-view.vue
+++ b/pages_goods/_components/goods-detail-view/goods-detail-view.vue
@@ -21,8 +21,11 @@
         </view>
         <!-- 修复鸿蒙元服务: 移除无效的 scroll-y="true" 属性 (scroll-y 是 <scroll-view> 的指令属性)
              鸿蒙 JSVM 早期版本遇到无效 attribute 会让 view 子树静默不渲染, 导致整个详情页空白 -->
-        <view v-else class="goods-detail" :class="isIphoneX ? 'active' : ''">
-            <view class="goods-container">
+        <view v-else class="goods-detail-wrap">
+            <!-- 操作区域 slot: 与 .goods-detail 同一 v-else 分支, 避免骨架屏状态下被父组件渲染真实按钮(基于默认 goods_state=0 显示"该商品已下架") -->
+            <slot name="action"></slot>
+            <view class="goods-detail" :class="isIphoneX ? 'active' : ''">
+                <view class="goods-container">
                 <!-- AI客服悬浮按钮 -->
                 <view class="ai-chat-float-btn" @tap.stop="$emit('aiChatClick')" v-if="showAIChatBtn">
                     <image :src="aiAvatarUrl" mode="aspectFill" class="ai-avatar-icon" />
@@ -495,11 +498,10 @@
                 </view>
 
                 <slot name="fixedbtn"></slot>
+                </view>
             </view>
         </view>
 
-        <!-- 操作区域 -->
-        <slot name="action"></slot>
         <to-top v-if="showTop" @toTop="scrollToTopNative()"></to-top>
         <ns-login ref="login"></ns-login>
     </view>

From 8cef7b775bb86518f9967325d80666eadc6e51f0 Mon Sep 17 00:00:00 2001
From: ZF sun <34314687@qq.com>
Date: Sat, 25 Jul 2026 09:24:16 +0800
Subject: [PATCH 4/4] Revert "build: add localhost:8050-h5 build configuration"

This reverts commit 6cf82612989501b95b4ce02a8c358d045a01b558.
---
 package.json | 10 ----------
 1 file changed, 10 deletions(-)

diff --git a/package.json b/package.json
index e09e7a5..693ba8e 100644
--- a/package.json
+++ b/package.json
@@ -66,16 +66,6 @@
         "define": {
           "PRODUCTION": true
         }
-      },
-      "localhost:8050-h5": {
-        "title": "localhost:8050",
-        "env": {
-          "UNI_PLATFORM": "h5",
-          "UNI_APP_DOMAIN": "http://localhost:8050/"
-        },
-        "define": {
-          "PRODUCTION": true
-        }
       }
     }
   }