feat: 添加了商品详情页的骨架屏请求效果

docs/superpowers/specs/2026-08-11-ticket-home-api-design.md

@@ -1,68 +0,0 @@
-# TicketHome 首页接口接入设计
-
-## 目标
-
-在 `src/pages-service/tickets/index.vue` 中调用 `scenicProductHome`，使用固定参数：
-
-```js
-{ scenicId: 20260811 }
-```
-
-以接口返回的数据替换票务首页现有的 `SCENIC_SPOT`、`GROUPS` 和 `ticketStore.products` 静态数据。本次只接入首页接口，不修改商品详情、预订、订单等后续页面的数据来源。
-
-## 数据流与组件边界
-
-- `index.vue` 负责请求、保存首页数据以及加载和失败状态。
-- 请求成功且 `code === 0`、`data` 为对象时，将 `data` 原样保存，不创建字段映射或首页 DTO 适配器。
-- `TicketHome.vue` 直接使用接口字段，不再依赖静态数据字段名：
-  - 景区：`scenicId`、`scenicName`、`subtitle`、`levelText`、`address`、`phone`、`longitude`、`latitude`、`coverImage`、`mediaList`
-  - 分类：`categories` 中的 `categoryId`、`categoryName`、`title`、`subtitle`、`defaultFlag`
-  - 商品：`products.records` 中的 `commodityId`、`categoryId`、`saleTargetKey`、`title`、`image`、`tags`、`displayPrice`、`salesText`、`detailRouteType`、`bookingFeatureFlags`
-  - 默认分类：`selectedCategoryId`
-- `index.vue` 通过单个 `homeData` prop 将接口 `data` 传给 `TicketHome.vue`，避免将接口结果拆分或转换成旧的 `scenicSpot/groups/products` props。
-- `TicketHome.vue` 按商品的 `categoryId` 过滤每个分类下的首屏商品，并以 `commodityId` 作为商品点击事件参数。
-
-## 展示规则
-
-- 景区头图使用 `coverImage`，景区名称使用 `scenicName`。
-- 等级和副标题使用 `levelText` 与 `subtitle`；任一字段为空时不渲染多余分隔符。
-- 分类导航和分组标题使用 `categoryName`，分类说明使用分类 `subtitle`；分类 `title` 作为辅助标签，仅在非空时展示。
-- 商品卡展示 `image`、`title`、`tags`、`displayPrice` 和 `salesText`。
-- 接口中的字段为空时使用空态或隐藏对应可选内容，不回填旧静态文案或图片。
-- 电话和导航继续使用现有交互；经纬度为空或非法时沿用“暂无导航坐标”提示。
-- 左右分类滚动联动保持不变。初始高亮优先使用 `selectedCategoryId`，无有效匹配时使用第一个分类。
-
-## 加载、失败与空数据
-
-- 页面首次加载时请求一次 `scenicProductHome`。
-- 加载期间显示明确的加载状态，不渲染静态首页。
-- 请求失败、业务 `code !== 0` 或 `data` 无效时显示错误状态和重试入口，并使用接口 `msg` 或通用错误文案说明失败原因。
-- 请求成功但分类或商品为空时，仍渲染景区信息，由 `TicketHome.vue` 展示对应空状态。
-- 重试只重新请求首页接口，不重复导航或重置其他票务 store 状态。
-
-## 测试与验证
-
-- 先扩展 `view-contract.test.mjs`，验证：
-  - `index.vue` 调用 `scenicProductHome({ scenicId: 20260811 })`。
-  - 首页不再导入或传入 `SCENIC_SPOT`、`GROUPS`、`ticketStore.products`。
-  - `TicketHome.vue` 使用接口原始字段及 `products.records`。
-  - 分类商品通过 `categoryId` 关联，商品事件使用 `commodityId`。
-  - 页面包含加载、失败和重试状态。
-- 确认新增测试先因功能未实现而失败，再实施最小代码使其通过。
-- 实现后运行：
-
-  ```bash
-  node --test src/pages-service/tickets/view-contract.test.mjs
-  node --test src/pages-service/tickets/model.test.mjs
-  git diff --check
-  ```
-
-本次变更不涉及依赖、配置或微信小程序编译能力，因此不默认运行生产构建。
-
-## 非目标
-
-- 不调用 `scenicCategoryProductsList` 或 `scenicProductCardContext`。
-- 不把首页卡片数据写入现有 Pinia 票务 store。
-- 不把首页简略商品数据转换为详情页所需的旧商品模型。
-- 不调整商品详情、预订、订单、退款和凭证页的数据结构。
-- 不修改接口文件或当前客户配置。

docs/superpowers/specs/2026-08-11-ticket-home-video-cover-design.md

@@ -1,18 +0,0 @@
-# TicketHome 视频封面设计
-
-## 目标
-
-让 `TicketHome.vue` 的 `homeData.coverImage` 同时支持图片和 MP4 视频，保持景区头图现有尺寸、渐变遮罩、导航与文字信息不变。
-
-## 实现
-
-- 在 `TicketHome.vue` 内新增 `isMp4Video(url)`，与现有 `ExploreCards`、`PanoramicHome` 规则一致：字符串去除首尾空格及查询参数、hash 后，不区分大小写判断是否以 `.mp4` 结尾。
-- `coverImage` 是 MP4 时渲染铺满头图区的 `<video>`；视频启用 `autoplay`、`loop`、`muted`，关闭 controls、播放按钮、全屏按钮、静音按钮和进度手势，使用 `object-fit="cover"`。
-- `coverImage` 非 MP4 时继续渲染 `<image mode="aspectFill">`。
-- `coverImage` 为空时不渲染媒体元素，保留头图区背景色。
-- 不抽取公共媒体工具，不修改其他页面或接口字段。
-
-## 验证
-
-- 先在 `view-contract.test.mjs` 添加失败测试，覆盖视频分支、图片回退、播放器属性和带查询参数的 MP4 判断。
-- 测试转绿后运行完整票务视图契约、票务模型测试、`git diff --check` 和 `yarn dev:mp-weixin`。

docs/superpowers/specs/2026-08-12-ticket-category-product-groups-design.md

@@ -1,22 +0,0 @@
-# TicketHome 分类商品组数据结构调整设计
-
-## 目标
-
-适配 `scenicProductHome` 最新响应结构。`TicketHome.vue` 不再使用 `categories` 和旧的 `products.records`，分类导航、分组信息与首屏商品统一来自 `homeData.categoryProductGroups`。
-
-## 数据与交互
-
-- `groups` 只读取有效数组 `homeData.categoryProductGroups`，无效或缺失时使用空数组。
-- 每个分组直接使用 `categoryId`、`categoryName`、`title`、`subtitle`、`defaultFlag` 和 `products`。
-- `productsForGroup(group)` 只返回 `group.products`；分组没有有效商品数组时返回空数组，不再扁平化或按 `categoryId` 二次过滤。
-- `selectedCategoryId` 继续作为初始选中分类；若不存在于商品组中，则选择第一个商品组。
-- 左侧分类点击滚动到对应右侧分组；右侧滚动继续同步左侧高亮。
-- 空分组继续展示“暂无可售商品”，完全没有分组时展示“暂无商品分类”。
-- 商品卡字段和点击行为不变，详情与选购仍传递 `commodityId`。
-- 本次不使用 `total`、`hasMore`、`pageNo`、`pageSize`，也不调用分类分页接口。
-
-## 验证
-
-- 先更新契约测试，使其要求读取 `categoryProductGroups` 和 `group.products`，并禁止出现 `homeData.categories`、`homeData.products.records` 与按 `categoryId` 二次过滤。
-- 确认测试在旧实现上失败后修改组件。
-- 完成后运行完整票务视图契约、票务模型测试、`git diff --check` 和微信小程序开发编译。

project.config.json

@@ -1,5 +1,5 @@
 {
-  "appid": "wx5e79df5996572539",
+  "appid": "wx8531ca7339685eca",
   "compileType": "miniprogram",
   "libVersion": "3.8.10",
   "packOptions": {

src/constant/base.js

@@ -12,7 +12,7 @@ import rawConfigs from "../../client-configs.json" with { type: "json" };
 export const CLIENT_CONFIGS = rawConfigs;
 
 // 获取当前用户端配置
-export const getCurrentConfig = () => CLIENT_CONFIGS.zhinian;
+export const getCurrentConfig = () => CLIENT_CONFIGS.xiaoqi;
 export const clientId = getCurrentConfig().clientId;
 export const appId = getCurrentConfig().appId;
 

src/manifest.json

@@ -61,7 +61,7 @@
     },
     "quickapp" : {},
     "mp-weixin" : {
-        "appid" : "wx5e79df5996572539",
+        "appid" : "wx8531ca7339685eca",
         "setting" : {
             "urlCheck" : false,
             "minified" : true

src/pages-service/tickets/api/scenic.js

@@ -1,14 +0,0 @@
-import request from "@/request/base/request";
-
-/// 景区商品首页
-const scenicProductHome = (args) => {
-  return request.post("/hotelBiz/commodity/scenicProductHome", args);
-};
-
-/// 景区分类商品分页列表
-const scenicCategoryProductsList = (args) => {
-  return request.post("/hotelBiz/commodity/scenicCategoryProducts", args);
-};
-
-export { scenicProductHome, scenicCategoryProductsList };
-

src/pages-service/tickets/components/TicketHome.vue

@@ -1,27 +1,7 @@
 <template>
   <view class="h-screen overflow-hidden bg-[#06111f] flex flex-col">
     <view class="relative z-0 h-[43vh] shrink-0 overflow-hidden bg-[#173a34]">
-      <video
-        v-if="homeData.coverImage && isMp4Video(homeData.coverImage)"
-        class="absolute inset-0 h-full w-full"
-        :src="homeData.coverImage"
-        autoplay
-        loop
-        muted
-        :controls="false"
-        :show-center-play-btn="false"
-        :show-play-btn="false"
-        :show-fullscreen-btn="false"
-        :show-mute-btn="false"
-        :enable-progress-gesture="false"
-        object-fit="cover"
-      />
-      <image
-        v-else-if="homeData.coverImage"
-        class="absolute inset-0 h-full w-full"
-        :src="homeData.coverImage"
-        mode="aspectFill"
-      />
+      <image class="absolute inset-0 h-full w-full" :src="scenicSpot.heroImage" mode="aspectFill" />
       <view class="absolute inset-0 bg-[linear-gradient(180deg,rgba(6,17,31,0.15)_18%,rgba(6,17,31,0.1)_45%,rgba(6,17,31,0.92)_100%)]" />
 
       <view class="absolute inset-x-0 top-0 z-20">
@@ -43,16 +23,16 @@
       </view>
 
       <view class="absolute bottom-[42px] left-[20px] right-[20px]">
-        <text class="block text-[28px] font-bold leading-[1.2] text-white">{{ homeData.scenicName }}</text>
-        <text v-if="scenicMetaText" class="mt-[7px] block text-[13px] text-white/85">{{ scenicMetaText }}</text>
-        <view v-if="homeData.address" class="mt-[10px] flex items-center">
+        <text class="block text-[28px] font-bold leading-[1.2] text-white">{{ scenicSpot.name }}</text>
+        <text class="mt-[7px] block text-[13px] text-white/85">{{ scenicSpot.level }}｜{{ scenicSpot.heritage }}</text>
+        <view class="mt-[10px] flex items-center">
           <uni-icons type="location" size="15" color="#FFFFFF" />
-          <text class="ml-[4px] flex-1 text-[12px] leading-[17px] text-white/85">{{ homeData.address }}</text>
+          <text class="ml-[4px] flex-1 text-[12px] leading-[17px] text-white/85">{{ scenicSpot.address }}</text>
         </view>
         <view class="mt-[10px] flex items-center gap-[18px]">
-          <view v-if="homeData.phone" class="flex items-center" @click="makePhoneCall">
+          <view class="flex items-center" @click="makePhoneCall">
             <uni-icons type="phone" size="15" color="#FFFFFF" />
-            <text class="ml-[4px] text-[12px] text-white">{{ homeData.phone }}</text>
+            <text class="ml-[4px] text-[12px] text-white">{{ scenicSpot.phone }}</text>
           </view>
           <view class="flex items-center" @click="openLocation">
             <uni-icons type="navigate" size="15" color="#FFFFFF" />
@@ -72,14 +52,14 @@
         >
           <view
             v-for="group in groups"
-            :id="`ticket-nav-${group.categoryId}`"
-            :key="group.categoryId"
+            :id="`ticket-nav-${group.id}`"
+            :key="group.id"
             class="relative flex min-h-[68px] items-center justify-center px-[10px] py-[12px] text-center"
-            :class="isActiveGroup(group.categoryId) ? 'bg-[#ecf8f2] text-[#11795c]' : 'bg-white text-[#5f6875]'"
-            @click="selectGroup(group.categoryId)"
+            :class="group.id === activeGroupId ? 'bg-[#ecf8f2] text-[#11795c]' : 'bg-white text-[#5f6875]'"
+            @click="selectGroup(group.id)"
           >
-            <view v-if="isActiveGroup(group.categoryId)" class="absolute left-0 h-[28px] w-[3px] rounded-r-full bg-[#149474]" />
-            <text class="text-[13px] leading-[18px]" :class="isActiveGroup(group.categoryId) ? 'font-semibold' : 'font-normal'">{{ group.categoryName }}</text>
+            <view v-if="group.id === activeGroupId" class="absolute left-0 h-[28px] w-[3px] rounded-r-full bg-[#149474]" />
+            <text class="text-[13px] leading-[18px]" :class="group.id === activeGroupId ? 'font-semibold' : 'font-normal'">{{ group.name }}</text>
           </view>
         </scroll-view>
 
@@ -90,38 +70,35 @@
           :scroll-into-view="scrollIntoViewId"
           scroll-with-animation
           @scroll="handleProductScroll"
-          @touchstart="enableProductScrollSync"
         >
           <view class="px-[12px] pb-[24px]">
-            <view v-if="!groups.length" class="pt-[80px] text-center">
-              <text class="text-[13px] text-[#9aa2ad]">暂无商品分类</text>
-            </view>
-            <view v-for="group in groups" :id="`ticket-group-${group.categoryId}`" :key="group.categoryId" class="pt-[14px]">
+            <view v-for="group in groups" :id="`ticket-group-${group.id}`" :key="group.id" class="pt-[14px]">
               <view class="flex items-center">
-                <text class="text-[18px] font-bold text-[#202733]">{{ group.categoryName }}</text>
-                <text v-if="group.title" class="ml-[7px] rounded-full bg-[#e5f6ee] px-[7px] py-[2px] text-[10px] text-[#158061]">{{ group.title }}</text>
+                <text class="text-[18px] font-bold text-[#202733]">{{ group.name }}</text>
+                <text v-if="group.tag" class="ml-[7px] rounded-full bg-[#e5f6ee] px-[7px] py-[2px] text-[10px] text-[#158061]">{{ group.tag }}</text>
               </view>
-              <text v-if="group.subtitle" class="mt-[4px] block text-[12px] leading-[17px] text-[#808997]">{{ group.subtitle }}</text>
+              <text v-if="group.description" class="mt-[4px] block text-[12px] leading-[17px] text-[#808997]">{{ group.description }}</text>
 
               <view v-if="productsForGroup(group).length" class="mt-[10px] flex flex-col gap-[10px]">
-                <view v-for="product in productsForGroup(group)" :key="product.commodityId" class="flex rounded-[14px] bg-white p-[10px]">
-                  <image class="h-[100px] w-[100px] shrink-0 rounded-[10px] bg-[#e8edf0]" :src="product.image" mode="aspectFill" @click="emit('open-detail', product.commodityId)" />
+                <view v-for="product in productsForGroup(group)" :key="product.id" class="flex rounded-[14px] bg-white p-[10px]">
+                  <image class="h-[100px] w-[100px] shrink-0 rounded-[10px] bg-[#e8edf0]" :src="product.images && product.images[0]" mode="aspectFill" @click="emit('open-detail', product.id)" />
                   <view class="ml-[10px] flex min-w-0 flex-1 flex-col">
-                    <view class="flex min-w-0 items-start" @click="emit('open-detail', product.commodityId)">
-                      <text class="line-clamp-2 min-w-0 text-[14px] font-semibold leading-[20px] text-[#242b36]">{{ product.title }}</text>
+                    <view class="flex min-w-0 items-start" @click="emit('open-detail', product.id)">
+                      <text class="line-clamp-2 min-w-0 text-[14px] font-semibold leading-[20px] text-[#242b36]">{{ product.shortTitle || product.name }}</text>
                       <view class="flex h-[20px] shrink-0 items-center">
                         <uni-icons type="right" size="14" color="#242b36" />
                       </view>
                     </view>
-                    <view v-if="product.tags?.length" class="mt-[5px] flex flex-wrap gap-[4px]">
-                      <text v-for="tag in product.tags" :key="tag" class="rounded-[4px] bg-[#e8f2ff] px-[5px] py-[2px] text-[10px] text-[#3474c7]">{{ tag }}</text>
+                    <view class="mt-[5px] flex flex-wrap gap-[4px]">
+                      <text v-if="product.ageRule" class="rounded-[4px] bg-[#f2ebff] px-[5px] py-[2px] text-[10px] text-[#7a52b3]">{{ ageRuleText(product.ageRule) }}</text>
+                      <text v-for="highlight in product.highlights || []" :key="highlight" class="rounded-[4px] bg-[#e8f2ff] px-[5px] py-[2px] text-[10px] text-[#3474c7]">{{ highlight }}</text>
                     </view>
                     <view class="mt-auto flex items-end justify-between pt-[6px]">
                       <view>
-                        <text v-if="product.salesText" class="block text-[10px] text-[#9aa2ad]">{{ product.salesText }}</text>
-                        <text class="text-[12px] font-medium text-[#f26b32]">¥<text class="text-[20px] font-bold">{{ product.displayPrice }}</text></text>
+                        <text v-if="product.sold !== null && product.sold !== undefined" class="block text-[10px] text-[#9aa2ad]">已售 {{ product.sold }}</text>
+                        <text class="text-[12px] font-medium text-[#f26b32]">¥<text class="text-[20px] font-bold">{{ product.salePrice }}</text></text>
                       </view>
-                      <view class="flex h-[28px] items-center justify-center rounded-full bg-[#f26b32] px-[13px]" @click="emit('buy', product.commodityId)">
+                      <view class="flex h-[28px] items-center justify-center rounded-full bg-[#f26b32] px-[13px]" @click="emit('buy', product.id)">
                         <text class="text-[12px] font-medium leading-none text-white">选购</text>
                       </view>
                     </view>
@@ -129,7 +106,7 @@
                 </view>
               </view>
               <view v-else class="mt-[10px] rounded-[14px] bg-white px-[16px] py-[28px] text-center">
-                <text class="text-[13px] text-[#9aa2ad]">暂无可售商品</text>
+                <text class="text-[13px] text-[#9aa2ad]">{{ loading ? '加载中...' : '暂无可售商品' }}</text>
               </view>
             </view>
           </view>
@@ -143,67 +120,37 @@
 import { computed, getCurrentInstance, nextTick, onMounted, ref, watch } from 'vue'
 import TopNavBar from "@/components/TopNavBar/index.vue"
 
-const createCategoryScrollSelection = () => {
-  let shouldSyncFromScroll = true
-
-  return {
-    select(groupId) {
-      shouldSyncFromScroll = false
-      return groupId
-    },
-    resumeScrollSync() {
-      shouldSyncFromScroll = true
-    },
-    resolve(currentGroupId, scrollGroupId) {
-      return shouldSyncFromScroll ? scrollGroupId : currentGroupId
-    },
-  }
-}
-
 const props = defineProps({
-  homeData: { type: Object, required: true },
+  scenicSpot: { type: Object, required: true },
+  groups: { type: Array, default: () => [] },
+  products: { type: Array, default: () => [] },
+  loading: { type: Boolean, default: false },
 })
 
 const emit = defineEmits(['back', 'open-travelers', 'open-orders', 'open-detail', 'buy'])
-const groups = computed(() =>
-  Array.isArray(props.homeData.categoryProductGroups)
-    ? props.homeData.categoryProductGroups
-    : []
-)
-const preferredCategoryId = String(props.homeData.selectedCategoryId || '')
-const activeGroupId = ref(
-  groups.value.some(
-    (group) => String(group.categoryId) === preferredCategoryId
-  )
-    ? props.homeData.selectedCategoryId
-    : groups.value[0]?.categoryId || ''
-)
+const activeGroupId = ref(props.groups[0]?.id || '')
 const scrollIntoViewId = ref('')
 const leftScrollIntoViewId = computed(() => `ticket-nav-${activeGroupId.value}`)
 const groupOffsets = ref([])
 const rightScrollTop = ref(0)
-const categoryScrollSelection = createCategoryScrollSelection()
 const instance = getCurrentInstance()
-const scenicMetaText = computed(() =>
-  [props.homeData.levelText, props.homeData.subtitle].filter(Boolean).join('｜')
-)
-const isMp4Video = (url) => {
-  if (typeof url !== 'string') return false
-  const resourcePath = url.trim().split(/[?#]/)[0]
-  return resourcePath.toLowerCase().endsWith('.mp4')
-}
-const isActiveGroup = (groupId) =>
-  String(groupId) === String(activeGroupId.value)
-const productsForGroup = (group) =>
-  Array.isArray(group.products) ? group.products : []
+const productsById = computed(() => new Map(props.products.map((product) => [product.id, product])))
+const groupLayoutSignature = computed(() => props.groups
+  .map((group) => `${group.id}:${(group.productIds || []).join(',')}`)
+  .join('|'))
 
-const enableProductScrollSync = () => {
-  categoryScrollSelection.resumeScrollSync()
-  scrollIntoViewId.value = ''
+const productsForGroup = (group) => (group.productIds || [])
+  .map((productId) => productsById.value.get(productId))
+  .filter((product) => product?.status === 'on_sale' && product.clientVisible !== false)
+
+const ageRuleText = (rule) => {
+  if (rule.min > 0 && rule.max >= 999) return `${rule.min}周岁及以上`
+  if (rule.min <= 0 && rule.max < 999) return `${rule.max}周岁及以下`
+  return `${rule.min}—${rule.max}周岁`
 }
 
 const selectGroup = (groupId) => {
-  activeGroupId.value = categoryScrollSelection.select(groupId)
+  activeGroupId.value = groupId
   scrollIntoViewId.value = ''
   nextTick(() => {
     scrollIntoViewId.value = `ticket-group-${groupId}`
@@ -211,20 +158,20 @@ const selectGroup = (groupId) => {
 }
 
 const measureGroupOffsets = () => {
-  if (!groups.value.length) return
+  if (!props.groups.length) return
 
   nextTick(() => {
     const query = uni.createSelectorQuery().in(instance?.proxy)
     query.select('#ticket-product-scroll').boundingClientRect()
-    groups.value.forEach((group) => {
-      query.select(`#ticket-group-${group.categoryId}`).boundingClientRect()
+    props.groups.forEach((group) => {
+      query.select(`#ticket-group-${group.id}`).boundingClientRect()
     })
     query.exec((rects = []) => {
       const containerRect = rects[0]
       if (!containerRect) return
-      groupOffsets.value = groups.value
+      groupOffsets.value = props.groups
         .map((group, index) => ({
-          id: group.categoryId,
+          id: group.id,
           top: Math.max(
             0,
             Number(rects[index + 1]?.top || 0) -
@@ -249,52 +196,24 @@ const handleProductScroll = (event) => {
     (current, group) => (group.top <= activationLine ? group : current),
     groupOffsets.value[0]
   )
-  if (activeGroup?.id) {
-    activeGroupId.value = categoryScrollSelection.resolve(
-      activeGroupId.value,
-      activeGroup.id
-    )
-  }
+  if (activeGroup?.id) activeGroupId.value = activeGroup.id
 }
 
 onMounted(measureGroupOffsets)
-watch(
-  () => groups.value.map((group) => group.categoryId).join(','),
-  () => {
-    if (!groups.value.some((group) => isActiveGroup(group.categoryId))) {
-      const selectedCategoryId = String(props.homeData.selectedCategoryId || '')
-      activeGroupId.value = groups.value.some(
-        (group) => String(group.categoryId) === selectedCategoryId
-      )
-        ? props.homeData.selectedCategoryId
-        : groups.value[0]?.categoryId || ''
-    }
-    measureGroupOffsets()
-  }
-)
+watch(groupLayoutSignature, () => {
+  groupOffsets.value = []
+  measureGroupOffsets()
+}, { flush: 'post' })
 
 const makePhoneCall = () => {
-  if (!props.homeData.phone) return
-  uni.makePhoneCall({ phoneNumber: props.homeData.phone })
+  if (!props.scenicSpot.phone) return
+  uni.makePhoneCall({ phoneNumber: props.scenicSpot.phone })
 }
 
 const openLocation = () => {
-  const latitudeValue = props.homeData.latitude
-  const longitudeValue = props.homeData.longitude
-  const coordinatesMissing =
-    latitudeValue === '' ||
-    latitudeValue === null ||
-    latitudeValue === undefined ||
-    longitudeValue === '' ||
-    longitudeValue === null ||
-    longitudeValue === undefined
-  const latitude = Number(latitudeValue)
-  const longitude = Number(longitudeValue)
-  if (
-    coordinatesMissing ||
-    !Number.isFinite(latitude) ||
-    !Number.isFinite(longitude)
-  ) {
+  const latitude = Number(props.scenicSpot.latitude)
+  const longitude = Number(props.scenicSpot.longitude)
+  if (!Number.isFinite(latitude) || !Number.isFinite(longitude)) {
     uni.showToast({ title: '暂无导航坐标', icon: 'none' })
     return
   }
@@ -302,8 +221,8 @@ const openLocation = () => {
   uni.openLocation({
     latitude,
     longitude,
-    name: props.homeData.scenicName || '',
-    address: props.homeData.address || '',
+    name: props.scenicSpot.name || '',
+    address: props.scenicSpot.address || '',
     fail: () => uni.showToast({ title: '打开导航失败', icon: 'none' }),
   })
 }

src/pages-service/tickets/data.js

@@ -49,12 +49,9 @@ export const SCENIC_SPOT = {
 }
 
 export const GROUPS = [
-  { id: 'ticket', name: '景点门票', subtitle: '累计销量 5000+', description: '一票通玩，核销后门票7日内有效', tag: '官方', productIds: ['adult', 'elderly', 'minor', 'free'], sortOrder: 1, enabled: true },
-  { id: 'vip', name: 'VIP速通', subtitle: '专属服务', description: '减少排队等待时间，按预约场次使用', tag: '推荐', productIds: ['vip-fast'], sortOrder: 2, enabled: true },
-  { id: 'bus', name: '直通车', subtitle: '往返直达', description: '贵阳市区集合，直达小七孔景区', tag: '省心', productIds: ['direct-bus'], sortOrder: 3, enabled: true },
-  { id: 'package', name: '门票+观光车', subtitle: '累计销量 1.5万+', description: '门票与观光车由第三方出票，园内项目使用自营权益码', tag: '热卖', productIds: ['classic'], sortOrder: 4, enabled: true },
-  { id: 'tour', name: '一日游', subtitle: '精选线路', description: '轻松游览小七孔代表性景观', tag: '品质', productIds: ['day-tour'], sortOrder: 5, enabled: true },
-  { id: 'play', name: '玩乐体验', subtitle: '园内自营项目', description: '工作人员扫描园内权益码后选择项目核销', tag: '自营', productIds: ['boat', 'guide'], sortOrder: 6, enabled: true },
+  { id: 'ticket', name: '门票', commodityTypeCode: '1', productIds: [], sortOrder: 1, enabled: true },
+  { id: 'maolan', name: '茂兰景区', commodityTypeCode: '67d07734e0af4caa918309f5a346a86e', productIds: [], sortOrder: 2, enabled: true },
+  { id: 'heritage-tribe', name: '世遗部落', commodityTypeCode: 'd5766c63028e46f1bd9aaa25d1dc7482', productIds: [], sortOrder: 3, enabled: true },
 ]
 
 const TIME_SLOTS = ['08:00—09:30', '09:30—11:30', '11:30—13:30', '13:30—15:00', '15:00—16:00']

src/pages-service/tickets/index.vue

@@ -1,76 +1,99 @@
 <template>
   <view class="h-screen min-w-0 overflow-hidden bg-[#f5f7fa] text-[#172033]">
     <TicketHome
-      v-if="homeData"
-      :home-data="homeData"
+      :scenic-spot="SCENIC_SPOT"
+      :groups="visibleGroups"
+      :products="products"
+      :loading="loading"
       @back="goBack"
       @open-travelers="openTravelers"
       @open-orders="openOrders"
       @open-detail="openProductDetail"
       @buy="startBooking"
     />
-
-    <view v-else class="flex h-full flex-col">
-      <TopNavBar title="" @back="goBack" />
-      <view
-        v-if="loading"
-        class="flex min-h-0 flex-1 items-center justify-center"
-      >
-        <text class="text-[14px] text-[#808997]">正在加载景区商品...</text>
-      </view>
-      <view
-        v-else-if="errorMessage"
-        class="flex min-h-0 flex-1 flex-col items-center justify-center px-[32px] text-center"
-      >
-        <text class="text-[14px] leading-[21px] text-[#808997]">
-          {{ errorMessage }}
-        </text>
-        <view
-          class="mt-[18px] flex h-[38px] items-center justify-center rounded-full bg-[#149474] px-[22px]"
-          @click="loadTicketHome"
-        >
-          <text class="text-[13px] font-medium text-white">重新加载</text>
-        </view>
-      </view>
-    </view>
   </view>
 </template>
 
 <script setup>
-import { onMounted, ref } from "vue";
-import TopNavBar from "@/components/TopNavBar/index.vue";
+import { computed, onMounted, ref } from "vue";
+import { quickBookingList } from "@/request/api/GoodsApi";
 import TicketHome from "./components/TicketHome.vue";
-import { scenicProductHome } from "./api/scenic.js";
+import { GROUPS, PLACEHOLDER_IMAGE, SCENIC_SPOT } from "./data.js";
 
-const homeData = ref(null);
-const loading = ref(false);
-const errorMessage = ref("");
+const groups = ref(GROUPS.map((group) => ({ ...group, productIds: [] })));
+const products = ref([]);
+const loading = ref(true);
 
-const loadTicketHome = async () => {
+const visibleGroups = computed(() =>
+  [...groups.value]
+    .filter((group) => group.enabled)
+    .sort((left, right) => left.sortOrder - right.sortOrder)
+);
+
+const normalizeStringList = (value) =>
+  Array.isArray(value) ? value.filter(Boolean).map(String) : [];
+
+const mapQuickBookingProduct = (item) => ({
+  id: String(item.commodityId),
+  commodityId: String(item.commodityId),
+  name: item.commodityName || "未命名商品",
+  shortTitle: item.commodityName || "未命名商品",
+  salePrice: item.specificationPrice ?? item.commodityPrice ?? 0,
+  sold: item.salesVolume ?? item.soldQuantity ?? item.saleCount ?? null,
+  images: [item.commodityPhoto || PLACEHOLDER_IMAGE],
+  highlights: normalizeStringList(item.commodityTradeRuleList),
+  status: "on_sale",
+  clientVisible: true,
+});
+
+const loadQuickBookingProducts = async () => {
   loading.value = true;
-  errorMessage.value = "";
 
-  try {
-    const response = await scenicProductHome({ scenicId: 20260811 });
-    const validData =
-      response?.data &&
-      typeof response.data === "object" &&
-      !Array.isArray(response.data);
+  const results = await Promise.all(
+    GROUPS.map(async (group) => {
+      try {
+        const res = await quickBookingList({
+          commodityTypeCode: group.commodityTypeCode,
+          current: 1,
+          size: 10,
+        });
+        const records = Array.isArray(res?.data?.records)
+          ? res.data.records.filter((item) => item?.commodityId)
+          : [];
 
-    if (response?.code !== 0 || !validData) {
-      throw new Error(response?.msg || "景区商品加载失败，请稍后重试");
-    }
+        if (!Array.isArray(res?.data?.records)) {
+          console.error(`查询${group.name}商品失败:`, res);
+        }
 
-    homeData.value = response.data;
-  } catch (error) {
-    homeData.value = null;
-    errorMessage.value = error?.message || "景区商品加载失败，请稍后重试";
-  } finally {
-    loading.value = false;
-  }
+        return { groupId: group.id, records };
+      } catch (error) {
+        console.error(`查询${group.name}商品失败:`, error);
+        return { groupId: group.id, records: [] };
+      }
+    })
+  );
+
+  const recordsByGroupId = new Map(
+    results.map(({ groupId, records }) => [groupId, records])
+  );
+  const productMap = new Map();
+
+  groups.value = GROUPS.map((group) => {
+    const groupProducts = (recordsByGroupId.get(group.id) || []).map(
+      mapQuickBookingProduct
+    );
+    groupProducts.forEach((product) => productMap.set(product.id, product));
+
+    return {
+      ...group,
+      productIds: groupProducts.map((product) => product.id),
+    };
+  });
+  products.value = [...productMap.values()];
+  loading.value = false;
 };
 
-onMounted(loadTicketHome);
+onMounted(loadQuickBookingProducts);
 
 const goBack = () => uni.navigateBack();
 const openTravelers = () =>
@@ -79,10 +102,10 @@ const openOrders = () =>
   uni.navigateTo({ url: "/pages-service/tickets/orders" });
 const openProductDetail = (productId) =>
   uni.navigateTo({
-    url: `/pages-service/tickets/product-detail?productId=${productId}`,
+    url: `/pages/goods/index?commodityId=${encodeURIComponent(productId)}`,
   });
 const startBooking = (productId) =>
   uni.navigateTo({
-    url: `/pages-service/tickets/booking?productId=${productId}`,
+    url: `/pages/goods/index?commodityId=${encodeURIComponent(productId)}`,
   });
 </script>

src/pages-service/tickets/model.test.mjs

@@ -23,18 +23,13 @@ test('provides coherent default visitor ticket data', async () => {
   assert.deepEqual(SCENIC_SPOT, {
     id: 'libo-xiaoqikong', name: '荔波小七孔景区', level: '国家5A级景区', heritage: '世界自然遗产', address: '贵州省黔南布依族苗族自治州荔波县', phone: '0854-3619810', latitude: 25.2534, longitude: 107.7255, heroImage: SCENIC_HERO_IMAGE,
   })
-  assert.deepEqual(GROUPS.map(({ id, name, sortOrder, enabled, productIds }) => ({ id, name, sortOrder, enabled, productIds })), [
-    { id: 'ticket', name: '景点门票', sortOrder: 1, enabled: true, productIds: ['adult', 'elderly', 'minor', 'free'] },
-    { id: 'vip', name: 'VIP速通', sortOrder: 2, enabled: true, productIds: ['vip-fast'] },
-    { id: 'bus', name: '直通车', sortOrder: 3, enabled: true, productIds: ['direct-bus'] },
-    { id: 'package', name: '门票+观光车', sortOrder: 4, enabled: true, productIds: ['classic'] },
-    { id: 'tour', name: '一日游', sortOrder: 5, enabled: true, productIds: ['day-tour'] },
-    { id: 'play', name: '玩乐体验', sortOrder: 6, enabled: true, productIds: ['boat', 'guide'] },
+  assert.deepEqual(GROUPS.map(({ id, name, commodityTypeCode, sortOrder, enabled, productIds }) => ({ id, name, commodityTypeCode, sortOrder, enabled, productIds })), [
+    { id: 'ticket', name: '门票', commodityTypeCode: '1', sortOrder: 1, enabled: true, productIds: [] },
+    { id: 'maolan', name: '茂兰景区', commodityTypeCode: '67d07734e0af4caa918309f5a346a86e', sortOrder: 2, enabled: true, productIds: [] },
+    { id: 'heritage-tribe', name: '世遗部落', commodityTypeCode: 'd5766c63028e46f1bd9aaa25d1dc7482', sortOrder: 3, enabled: true, productIds: [] },
   ])
   assert.deepEqual(PRODUCTS.map(({ id }) => id), ['adult', 'elderly', 'minor', 'free', 'vip-fast', 'direct-bus', 'classic', 'day-tour', 'boat', 'guide'])
   const productsById = new Map(PRODUCTS.map((product) => [product.id, product]))
-  assert.ok(GROUPS.every((group) => group.productIds.every((productId) => productsById.has(productId))))
-  assert.deepEqual(GROUPS.flatMap((group) => group.productIds).sort(), PRODUCTS.map(({ id }) => id).sort())
   const productKeys = ['id', 'name', 'shortTitle', 'category', 'description', 'salePrice', 'marketPrice', 'stock', 'sold', 'status', 'clientVisible', 'highlights', 'ageRule', 'included', 'excluded', 'detail', 'purchaseNotice', 'images', 'reservation', 'entitlements']
   const reservationKeys = ['requiresDate', 'advanceDays', 'requiresTimeSlot', 'timeSlots', 'realNameRequired', 'idTypes', 'maxQuantity', 'contactPhoneRequired']
   const entitlementKeys = ['id', 'name', 'fulfillment', 'quantity', 'unit', 'refundAllocation']

src/pages-service/tickets/view-contract.test.mjs

@@ -60,129 +60,23 @@ test("storefront synchronizes the left category from right-column scrolling", as
   assert.match(source, /groupOffsets/);
   assert.match(source, /scrollTop/);
   assert.match(source, /leftScrollIntoViewId/);
+  assert.match(source, /groupLayoutSignature/);
+  assert.match(source, /group\.productIds/);
+  assert.match(source, /groupOffsets\.value = \[\]/);
   assert.match(source, /TopNavBar/);
 });
 
-test("left category selection wins over programmatic product scrolling", async () => {
-  const source = await readTicketFile("components/TicketHome.vue");
-  const factorySource = source.match(
-    /const createCategoryScrollSelection = \(\) => \{[\s\S]*?^\}\n/m
-  )?.[0];
-
-  assert.match(source, /@touchstart="enableProductScrollSync"/);
-  assert.doesNotMatch(source, /category-scroll-selection\.mjs/);
-  assert.ok(factorySource, "inline category scroll selection factory missing");
-  assert.match(source, /const categoryScrollSelection =\s*createCategoryScrollSelection\(\)/);
-  assert.match(
-    source,
-    /const selectGroup = \(groupId\) => \{\s*activeGroupId\.value = categoryScrollSelection\.select\(groupId\)/
-  );
-  assert.match(
-    source,
-    /const enableProductScrollSync = \(\) => \{\s*categoryScrollSelection\.resumeScrollSync\(\)\s*scrollIntoViewId\.value = ''\s*\}/
-  );
-  assert.match(
-    source,
-    /const handleProductScroll = \(event\) => \{[\s\S]*rightScrollTop\.value = Number[\s\S]*measureGroupOffsets\(\)[\s\S]*activeGroupId\.value = categoryScrollSelection\.resolve\(\s*activeGroupId\.value,\s*activeGroup\.id\s*\)/
-  );
-
-  const createCategoryScrollSelection = Function(
-    `${factorySource}\nreturn createCategoryScrollSelection`
-  )();
-  const selection = createCategoryScrollSelection();
-  const clickedGroupId = selection.select("second");
-
-  assert.equal(selection.resolve(clickedGroupId, "first"), "second");
-  selection.resumeScrollSync();
-  assert.equal(selection.resolve(clickedGroupId, "third"), "third");
-});
-
-test("ticket storefront loads API home data without a static adapter", async () => {
-  const source = await readTicketFile("index.vue");
-
-  assert.match(
-    source,
-    /import \{ scenicProductHome \} from "\.\/api\/scenic\.js"/
-  );
-  assert.match(source, /scenicProductHome\(\{ scenicId: 20260811 \}\)/);
-  assert.match(source, /const homeData = ref\(null\)/);
-  assert.match(source, /:home-data="homeData"/);
-  assert.match(source, /v-if="loading"/);
-  assert.match(source, /v-else-if="errorMessage"/);
-  assert.match(source, /@click="loadTicketHome"/);
-  assert.doesNotMatch(
-    source,
-    /SCENIC_SPOT|GROUPS|ticketStore\.products|visibleGroups/
-  );
-});
-
-test("TicketHome consumes scenic home response fields directly", async () => {
-  const source = await readTicketFile("components/TicketHome.vue");
-
-  for (const field of [
-    "homeData.coverImage",
-    "homeData.scenicName",
-    "homeData.levelText",
-    "homeData.subtitle",
-    "group.categoryId",
-    "group.categoryName",
-    "group.title",
-    "group.subtitle",
-    "product.commodityId",
-    "product.image",
-    "product.title",
-    "product.tags",
-    "product.displayPrice",
-    "product.salesText",
-  ]) {
-    assert.ok(source.includes(field), `${field} is not rendered`);
-  }
-
-  assert.match(source, /props\.homeData\.categoryProductGroups/);
-  assert.match(
-    source,
-    /Array\.isArray\(group\.products\) \? group\.products : \[\]/
-  );
-  assert.doesNotMatch(
-    source,
-    /homeData\.categories|homeData\.products|products\.value\.filter/
-  );
-  assert.match(source, /emit\('open-detail', product\.commodityId\)/);
-  assert.match(source, /emit\('buy', product\.commodityId\)/);
-  assert.doesNotMatch(
-    source,
-    /scenicSpot|productIds|ageRuleText|product\.shortTitle|product\.salePrice/
-  );
-});
-
-test("TicketHome renders MP4 cover images as background videos", async () => {
-  const source = await readTicketFile("components/TicketHome.vue");
-
-  assert.match(
-    source,
-    /<video\s+v-if="homeData\.coverImage && isMp4Video\(homeData\.coverImage\)"/
-  );
-  assert.match(source, /autoplay\s+loop\s+muted/);
-  assert.match(source, /:controls="false"/);
-  assert.match(source, /:show-center-play-btn="false"/);
-  assert.match(source, /:show-play-btn="false"/);
-  assert.match(source, /:show-fullscreen-btn="false"/);
-  assert.match(source, /:show-mute-btn="false"/);
-  assert.match(source, /:enable-progress-gesture="false"/);
-  assert.match(source, /object-fit="cover"/);
-  assert.match(source, /<image\s+v-else-if="homeData\.coverImage"/);
-  assert.match(source, /const isMp4Video = \(url\) =>/);
-  assert.match(source, /url\.trim\(\)\.split\(\/\[\?\#\]\/\)\[0\]/);
-  assert.match(source, /toLowerCase\(\)\.endsWith\('\.mp4'\)/);
-});
-
-test("product detail is an independent prototype-aligned page", async () => {
+test("storefront products open the API-backed goods detail page", async () => {
   const indexPage = await readTicketFile("index.vue");
   const detailPage = await readTicketFile("product-detail.vue");
   const component = await readTicketFile("components/ProductDetail.vue");
   const data = await readTicketFile("data.js");
 
-  assert.match(indexPage, /uni\.navigateTo\(\{\s*url: `\/pages-service\/tickets\/product-detail\?productId=\$\{productId\}`/);
+  assert.match(indexPage, /quickBookingList/);
+  assert.match(indexPage, /commodityTypeCode: group\.commodityTypeCode/);
+  assert.match(indexPage, /current: 1/);
+  assert.match(indexPage, /size: 10/);
+  assert.match(indexPage, /url: `\/pages\/goods\/index\?commodityId=\$\{encodeURIComponent\(productId\)\}`/);
   assert.doesNotMatch(indexPage, /detailProduct|<ProductDetail/);
   assert.match(detailPage, /onLoad\(\(options\)/);
   assert.match(detailPage, /options\?\.productId/);

src/pages/goods/components/GoodInfo/index.vue

@@ -3,7 +3,7 @@
     <!-- 标题区域 -->
     <view class="title-section">
       <text class="title">
-        {{ goodsData.commodityName || "【成人票】云从朵花温泉门票" }}
+        {{ goodsData.commodityName }}
       </text>
       <view class="tag-wrapper" v-if="goodsData.timeTag">
         <view class="time-tag">{{ goodsData.timeTag || "随时可退" }}</view>

src/pages/goods/components/GoodsDetailSkeleton/index.vue

@@ -0,0 +1,64 @@
+<template>
+  <view class="flex min-h-0 flex-1 flex-col overflow-hidden bg-[#f5f5f5]">
+    <view class="skeleton-block relative h-[300px] w-full shrink-0 overflow-hidden bg-[#e7ebef]" />
+
+    <view class="relative z-10 -mt-[30px] min-h-0 flex-1 rounded-t-[28px] bg-white px-[16px] pb-[24px] pt-[24px]">
+      <view class="skeleton-block relative h-[22px] w-[72%] overflow-hidden rounded-[6px] bg-[#e9edf1]" />
+      <view class="mt-[12px] flex gap-[8px]">
+        <view class="skeleton-block relative h-[20px] w-[64px] overflow-hidden rounded-[4px] bg-[#edf0f3]" />
+        <view class="skeleton-block relative h-[20px] w-[76px] overflow-hidden rounded-[4px] bg-[#edf0f3]" />
+        <view class="skeleton-block relative h-[20px] w-[56px] overflow-hidden rounded-[4px] bg-[#edf0f3]" />
+      </view>
+      <view class="mt-[18px] flex items-end">
+        <view class="skeleton-block relative h-[28px] w-[110px] overflow-hidden rounded-[6px] bg-[#e9edf1]" />
+        <view class="skeleton-block relative ml-[12px] h-[16px] w-[70px] overflow-hidden rounded-[4px] bg-[#f0f2f4]" />
+      </view>
+
+      <view class="mt-[24px] rounded-[12px] bg-[#f8f9fa] p-[14px]">
+        <view class="flex items-center">
+          <view class="skeleton-block relative h-[24px] w-[24px] overflow-hidden rounded-full bg-[#e5e9ed]" />
+          <view class="ml-[10px] min-w-0 flex-1">
+            <view class="skeleton-block relative h-[16px] w-[58%] overflow-hidden rounded-[4px] bg-[#e8ecef]" />
+            <view class="skeleton-block relative mt-[8px] h-[12px] w-[86%] overflow-hidden rounded-[4px] bg-[#eef1f3]" />
+          </view>
+        </view>
+      </view>
+
+      <view class="mt-[24px]">
+        <view class="skeleton-block relative h-[20px] w-[88px] overflow-hidden rounded-[5px] bg-[#e8ecef]" />
+        <view class="skeleton-block relative mt-[14px] h-[14px] w-full overflow-hidden rounded-[4px] bg-[#eef1f3]" />
+        <view class="skeleton-block relative mt-[10px] h-[14px] w-[92%] overflow-hidden rounded-[4px] bg-[#eef1f3]" />
+        <view class="skeleton-block relative mt-[10px] h-[14px] w-[76%] overflow-hidden rounded-[4px] bg-[#eef1f3]" />
+      </view>
+    </view>
+
+    <view class="flex shrink-0 items-center bg-white px-[12px] pb-[24px] pt-[12px]">
+      <view class="skeleton-block relative h-[28px] w-[92px] overflow-hidden rounded-[6px] bg-[#e9edf1]" />
+      <view class="skeleton-block relative ml-auto h-[48px] w-[120px] overflow-hidden rounded-[10px] bg-[#e4e8ec]" />
+    </view>
+  </view>
+</template>
+
+<style scoped lang="scss">
+.skeleton-block {
+  &::after {
+    position: absolute;
+    inset: 0;
+    content: "";
+    background: linear-gradient(
+      90deg,
+      transparent 0%,
+      rgba(255, 255, 255, 0.7) 50%,
+      transparent 100%
+    );
+    transform: translateX(-100%);
+    animation: skeleton-shimmer 1.4s ease-in-out infinite;
+  }
+}
+
+@keyframes skeleton-shimmer {
+  100% {
+    transform: translateX(100%);
+  }
+}
+</style>

src/pages/goods/index.vue

@@ -1,58 +1,73 @@
 <template>
   <view class="goods-container bg-[#f5f5f5]">
-    <TopNavBar :title="navOpacity < 0.5 ? '' : '商品详情'" :background="`rgba(217, 238, 255, ${navOpacity})`"
-      :titleColor="navOpacity < 0.5 ? '#ffffff' : '#000000'"
-      :backIconColor="navOpacity < 0.5 ? '#ffffff' : '#000000'" />
+    <TopNavBar :title="solidNavBar || navOpacity >= 0.5 ? '商品详情' : ''"
+      :background="solidNavBar ? '#ffffff' : `rgba(217, 238, 255, ${navOpacity})`"
+      :titleColor="solidNavBar || navOpacity >= 0.5 ? '#000000' : '#ffffff'"
+      :backIconColor="solidNavBar || navOpacity >= 0.5 ? '#000000' : '#ffffff'" />
 
-    <!-- 滚动区域 -->
-    <scroll-view class="content-wrapper" scroll-y @scroll="handleScroll">
-      <ImageSwiper :border-radius="0" :height="300" :images="goodsData.commodityPhotoList" thumbnailBottom="42px" />
+    <GoodsDetailSkeleton v-if="loadStatus === 'loading'" />
 
-      <view class="goods-content">
-        <!-- 商品信息组件 -->
-        <GoodInfo :goodsData="goodsData" />
-
-        <!-- 地址区域 -->
-        <LocationCard :orderData="goodsData" />
-
-        <!-- 日期选择区域 -->
-        <DateSelector v-if="goodsData.orderType == 0" @showCalendar="showCalendar" :checkInDate="selectedDate.startDate"
-          :checkOutDate="selectedDate.endDate" :checkInDay="''" :checkOutDay="''" :nights="selectedDate.totalDays" />
-
-        <!-- 商品套餐组件 -->
-        <GoodPackage
-          v-if="goodsData.orderType != 0 && goodsData.commodityPackageConfig && goodsData.commodityPackageConfig.length > 0"
-          :goodsData="goodsData" />
-
-        <!-- 商品设施组件 -->
-        <GoodFacility v-if="goodsData.commodityEquipment && goodsData.commodityEquipment.length > 0"
-          :goodsData="goodsData" />
-
-        <!-- 商品详情组件 -->
-        <GoodDetail :goodsData="goodsData" />
-      </view>
-    </scroll-view>
-
-    <!-- 立即抢购 -->
-    <view class="footer border-top">
-      <view class="amt text-[20px] font-bold text-[#ff3d60] line-height-28 flex items-center mr-[8px]">
-        {{ calculatedTotalPrice }}
-      </view>
-
-      <view class="btn rounded-[10px] flex items-center ml-auto pl-[8px]" @click="navigateToPay(goodsData)">
-        <image class="icon" src="https://oss.nianxx.cn/mp/static/version_101/common/btn.png" />
-        <text class="text-[16px] font-[500] text-white">立即预定</text>
+    <view v-else-if="loadStatus === 'error' || loadStatus === 'empty'"
+      class="box-border flex min-h-0 flex-1 flex-col items-center justify-center px-[24px] pb-[80px] pt-[96px]">
+      <CustomEmpty :statusText="loadStatus === 'error' ? '商品加载失败' : '暂无商品数据'" />
+      <view v-if="loadStatus === 'error'"
+        class="mt-[20px] flex h-[40px] items-center justify-center rounded-full bg-[#ff3d60] px-[28px]"
+        @click="reloadGoods">
+        <text class="text-[14px] font-[500] text-white">重新加载</text>
       </view>
     </view>
 
-    <!-- 日历组件 -->
-    <Calender :visible="calendarVisible" mode="range" :range-require-price="true" :price-data="priceData"
-      @close="handleCalendarClose" @range-select="handleDateSelect" />
+    <template v-else>
+      <!-- 滚动区域 -->
+      <scroll-view class="content-wrapper" scroll-y @scroll="handleScroll">
+        <ImageSwiper :border-radius="0" :height="300" :images="goodsData.commodityPhotoList" thumbnailBottom="42px" />
+
+        <view class="goods-content">
+          <!-- 商品信息组件 -->
+          <GoodInfo :goodsData="goodsData" />
+
+          <!-- 地址区域 -->
+          <LocationCard :orderData="goodsData" />
+
+          <!-- 日期选择区域 -->
+          <DateSelector v-if="goodsData.orderType == 0" @showCalendar="showCalendar" :checkInDate="selectedDate.startDate"
+            :checkOutDate="selectedDate.endDate" :checkInDay="''" :checkOutDay="''" :nights="selectedDate.totalDays" />
+
+          <!-- 商品套餐组件 -->
+          <GoodPackage
+            v-if="goodsData.orderType != 0 && goodsData.commodityPackageConfig && goodsData.commodityPackageConfig.length > 0"
+            :goodsData="goodsData" />
+
+          <!-- 商品设施组件 -->
+          <GoodFacility v-if="goodsData.commodityEquipment && goodsData.commodityEquipment.length > 0"
+            :goodsData="goodsData" />
+
+          <!-- 商品详情组件 -->
+          <GoodDetail :goodsData="goodsData" />
+        </view>
+      </scroll-view>
+
+      <!-- 立即抢购 -->
+      <view class="footer border-top">
+        <view class="amt text-[20px] font-bold text-[#ff3d60] line-height-28 flex items-center mr-[8px]">
+          {{ calculatedTotalPrice }}
+        </view>
+
+        <view class="btn rounded-[10px] flex items-center ml-auto pl-[8px]" @click="navigateToPay(goodsData)">
+          <image class="icon" src="https://oss.nianxx.cn/mp/static/version_101/common/btn.png" />
+          <text class="text-[16px] font-[500] text-white">立即预定</text>
+        </view>
+      </view>
+
+      <!-- 日历组件 -->
+      <Calender :visible="calendarVisible" mode="range" :range-require-price="true" :price-data="priceData"
+        @close="handleCalendarClose" @range-select="handleDateSelect" />
+    </template>
   </view>
 </template>
 
 <script setup>
-import { ref } from "vue";
+import { computed, ref } from "vue";
 import { onLoad } from "@dcloudio/uni-app";
 import { goodsDetail, commodityDailyPriceList } from "@/request/api/GoodsApi";
 import { DateUtils } from "@/utils";
@@ -65,12 +80,17 @@ import DateSelector from "./components/DateSelector/index.vue";
 import GoodDetail from "@/components/GoodDetail/index.vue";
 import GoodFacility from "./components/GoodFacility/index.vue";
 import GoodPackage from "./components/GoodPackage/index.vue";
+import GoodsDetailSkeleton from "./components/GoodsDetailSkeleton/index.vue";
+import CustomEmpty from "@/components/CustomEmpty/index.vue";
 import { useSelectedDateStore } from "@/store";
 
 // 导航栏透明度 - 默认透明，随滚动变为不透明
 const navOpacity = ref(0);
 const calendarVisible = ref(false);
 const goodsData = ref({});
+const loadStatus = ref("loading");
+const currentCommodityId = ref("");
+const solidNavBar = computed(() => loadStatus.value !== "success");
 
 // 处理滚动事件
 const handleScroll = (e) => {
@@ -87,39 +107,67 @@ const selectedDate = ref({
   totalDays: 1,
 });
 
-const priceData = ref([])
+const priceData = ref([]);
 
 // 计算的总价格
 const calculatedTotalPrice = ref(0);
 
 // 获取商品详情数据
 const goodsInfo = async (params) => {
-  const res = await goodsDetail(params);
+  loadStatus.value = "loading";
+  goodsData.value = {};
+  calculatedTotalPrice.value = 0;
+  priceData.value = [];
 
-  goodsData.value = res.data;
+  try {
+    const res = await goodsDetail(params);
 
-  // 初始化计算价格
-  calculatedTotalPrice.value = goodsData.value.specificationPrice || 0;
+    if (res?.code !== 0) {
+      console.error("查询商品详情失败:", res);
+      loadStatus.value = "error";
+      return;
+    }
 
-  // 判断是酒店类型订单再获取获取商品日价格及库存
-  if (goodsData.value.orderType == 0) {
-    configGoodsData();
-    getGoodsDailyPrice({
-      commodityId: goodsData.value.commodityId,
-    });
-  }
+    if (
+      !res.data ||
+      typeof res.data !== "object" ||
+      Array.isArray(res.data) ||
+      Object.keys(res.data).length === 0 ||
+      !res.data.commodityId
+    ) {
+      loadStatus.value = "empty";
+      return;
+    }
 
-  if (goodsData.value.commodityStatus !== "1") {
-    uni.showModal({
-      title: "温馨提示",
-      content: "您选的商品暂不可预订，请重新选择。",
-      success: (res) => {
-        if (res.confirm) {
-          uni.navigateBack({ delta: 1 });
-        }
-      },
-    });
-    return;
+    goodsData.value = res.data;
+
+    // 初始化计算价格
+    calculatedTotalPrice.value = goodsData.value.specificationPrice || 0;
+
+    // 判断是酒店类型订单再获取获取商品日价格及库存
+    if (goodsData.value.orderType == 0) {
+      configGoodsData();
+      getGoodsDailyPrice({
+        commodityId: goodsData.value.commodityId,
+      });
+    }
+
+    loadStatus.value = "success";
+
+    if (goodsData.value.commodityStatus !== "1") {
+      uni.showModal({
+        title: "温馨提示",
+        content: "您选的商品暂不可预订，请重新选择。",
+        success: (modalRes) => {
+          if (modalRes.confirm) {
+            uni.navigateBack({ delta: 1 });
+          }
+        },
+      });
+    }
+  } catch (error) {
+    console.error("查询商品详情失败:", error);
+    loadStatus.value = "error";
   }
 };
 
@@ -139,12 +187,19 @@ const getGoodsDailyPrice = async (params) => {
 
 const selectedDateStore = useSelectedDateStore();
 onLoad(({ commodityId = "1950766939442774018" }) => {
+  currentCommodityId.value = commodityId;
+
   // 从store中获取选中的日期
   selectedDate.value = selectedDateStore.selectedDate;
 
   goodsInfo({ commodityId });
 });
 
+const reloadGoods = () => {
+  if (!currentCommodityId.value) return;
+  goodsInfo({ commodityId: currentCommodityId.value });
+};
+
 // 显示日历弹窗
 const showCalendar = () => (calendarVisible.value = true);
 

src/uni.scss

@@ -13,16 +13,16 @@
  */
 
 /* 主题颜色（由 switch-client 命令自动更新） */
-$theme-color-900: #19428F;
-$theme-color-800: #174BB6;
-$theme-color-700: #145EE1;
-$theme-color-600: #1B74F5;
-$theme-color-500: #2D91FF;
-$theme-color-400: #59B4FF;
-$theme-color-300: #8ED0FF;
-$theme-color-200: #BCE1FF;
-$theme-color-100: #D9EEFF;
-$theme-color-50: #EEF8FF;
+$theme-color-900: #0B5C2D;
+$theme-color-800: #0B7034;
+$theme-color-700: #0B5C2D;
+$theme-color-600: #02C34E;
+$theme-color-500: #0CCD58;
+$theme-color-400: #35F37F;
+$theme-color-300: #77FEAB;
+$theme-color-200: #A0E5BA;
+$theme-color-100: #E8FFF1;
+$theme-color-50: #F0F8F3;
 
 // text 颜色
 $text-color-900: #181b25;