feat: 创建商品详情的交互

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

@@ -0,0 +1,68 @@
+# 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

@@ -0,0 +1,18 @@
+# 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

@@ -0,0 +1,22 @@
+# 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` 和微信小程序开发编译。

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

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

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

@@ -1,73 +1,84 @@
 <template>
-  <view class="flex h-full min-w-0 flex-col overflow-hidden bg-slate-100">
-    <scroll-view class="min-h-0 flex-1" scroll-y>
-      <view class="relative h-56 overflow-hidden bg-white">
-        <image class="h-full w-full bg-slate-200" :src="productImages[0]" mode="aspectFill" />
-        <view class="absolute bottom-3 right-3 rounded-full bg-slate-950/65 px-2 py-1 text-[10px] text-white">1 / {{ productImages.length }}</view>
-      </view>
+  <view class="relative flex h-full min-w-0 flex-col overflow-hidden bg-slate-100">
+    <view
+      v-if="isTabsPinned && detailSections.length"
+      class="absolute left-0 right-0 top-0 z-30 border-b border-slate-100 bg-white shadow-[0_4px_12px_rgba(15,23,42,0.08)]"
+    >
+      <TicketDetailTabs
+        :sections="detailSections"
+        :active-section-code="activeSectionCode"
+        instance-key="pinned"
+        @select="selectDetailSection"
+      />
+    </view>
 
-      <view v-if="productImages.length > 1" class="flex gap-2 overflow-hidden bg-white px-4 pb-3 pt-2">
-        <image
-          v-for="(image, index) in productImages.slice(0, 4)"
-          :key="`${image}-${index}`"
-          class="h-11 w-16 rounded-lg object-cover"
-          :class="index === 0 ? 'ring-2 ring-blue-500' : 'opacity-70'"
-          :src="image"
-          mode="aspectFill"
+    <scroll-view
+      id="ticket-detail-scroll"
+      class="min-h-0 flex-1"
+      scroll-y
+      :scroll-top="requestedScrollTop"
+      scroll-with-animation
+      @scroll="handleDetailScroll"
+      @touchstart="enableDetailScrollSync"
+    >
+      <view v-if="productImages.length" class="relative h-56 overflow-hidden bg-white">
+        <TicketMediaSwiper
+          :media-list="productImages"
+          class="h-full w-full bg-slate-200"
         />
       </view>
+      <view v-else class="flex h-56 items-center justify-center bg-slate-200">
+        <text class="text-[12px] text-slate-400">暂无商品图片</text>
+      </view>
 
       <view class="bg-white px-4 pb-4 pt-4">
         <view class="flex flex-wrap gap-1.5">
-          <text v-for="highlight in product.highlights || []" :key="highlight" class="rounded bg-blue-50 px-1.5 py-0.5 text-[10px] font-semibold text-blue-600">{{ highlight }}</text>
-          <text v-if="!(product.highlights || []).length" class="text-[10px] text-slate-400">尚未配置销售标签</text>
-        </view>
-        <text class="mt-2 block text-lg font-bold leading-7 text-slate-950">{{ product.name }}</text>
-        <text class="mt-1 block text-xs leading-5 text-slate-500">{{ product.description || product.shortTitle || '暂无商品简介' }}</text>
-        <view v-if="product.ageRule" class="mt-3 rounded-xl border border-violet-100 bg-violet-50 p-3 text-[11px] leading-5 text-violet-700">
-          <text class="font-bold">年龄限制：{{ ageRuleText }}</text>
-          <text class="block">下单时仅对门票游客按使用日和身份证校验。</text>
+          <text v-if="product.fulfillmentLabel" class="rounded bg-blue-50 px-1.5 py-0.5 text-[10px] font-semibold text-blue-600">{{ product.fulfillmentLabel }}</text>
+          <text v-for="tag in product.tags || []" :key="tag" class="rounded bg-blue-50 px-1.5 py-0.5 text-[10px] font-semibold text-blue-600">{{ tag }}</text>
         </view>
+        <text class="mt-2 block text-lg font-bold leading-7 text-slate-950">{{ product.commodityName }}</text>
+        <text v-if="product.subtitle" class="mt-1 block text-xs leading-5 text-slate-500">{{ product.subtitle }}</text>
         <view class="mt-3 flex items-end gap-1 text-orange-600">
-          <text v-if="Number(product.salePrice) === 0" class="text-2xl font-bold leading-none">免费预约</text>
+          <text v-if="Number(product.startingPrice) === 0" class="text-2xl font-bold leading-none">免费预约</text>
           <template v-else>
-            <text class="pb-0.5 text-xs">¥</text>
-            <text class="text-3xl font-bold leading-none">{{ product.salePrice }}</text>
+            <text class="pb-0.5 text-xs">{{ currencySymbol }}</text>
+            <text class="text-3xl font-bold leading-none">{{ product.startingPrice }}</text>
             <text class="pb-0.5 text-[10px] text-slate-400"></text>
           </template>
         </view>
       </view>
 
-      <view class="mx-[12px] mt-[12px] rounded-[16px] bg-white p-[16px]">
-        <text class="block text-[16px] font-semibold text-slate-800">费用包含</text>
-        <text v-for="item in product.included || []" :key="item" class="mt-[10px] block text-[14px] leading-[20px] text-slate-600">· {{ item }}</text>
-        <text v-if="!(product.included || []).length" class="mt-[10px] block text-[14px] text-slate-400">以商品说明为准</text>
+      <view
+        v-if="detailSections.length"
+        id="ticket-detail-tabs-anchor"
+        class="mt-[12px] border-y border-slate-100 bg-white"
+      >
+        <TicketDetailTabs
+          :sections="detailSections"
+          :active-section-code="activeSectionCode"
+          instance-key="inline"
+          @select="selectDetailSection"
+        />
       </view>
 
-      <view class="mx-[12px] mt-[12px] rounded-[16px] bg-white p-[16px]">
-        <text class="block text-[16px] font-semibold text-slate-800">费用不含</text>
-        <text v-for="item in product.excluded || []" :key="item" class="mt-[10px] block text-[14px] leading-[20px] text-slate-600">· {{ item }}</text>
-        <text v-if="!(product.excluded || []).length" class="mt-[10px] block text-[14px] text-slate-400">无</text>
-      </view>
-
-      <view class="mx-[12px] mt-[12px] rounded-[16px] bg-white p-[16px]">
-        <text class="block text-[16px] font-semibold text-slate-800">商品详情</text>
-        <text class="mt-[10px] block text-[14px] leading-[22px] text-slate-600">{{ product.detail || product.description || '暂无商品详情' }}</text>
-      </view>
-
-      <view class="mx-[12px] mt-[12px] rounded-[16px] bg-white p-[16px]">
-        <text class="block text-[16px] font-semibold text-slate-800">购买须知</text>
-        <text class="mt-[10px] block text-[14px] leading-[22px] text-slate-600">{{ product.purchaseNotice || '请以实际预约规则为准。' }}</text>
-      </view>
-
-      <view class="mx-[12px] mt-[12px] rounded-[16px] bg-white p-[16px]">
-        <text class="block text-[16px] font-semibold text-slate-800">使用说明</text>
-        <text class="mt-[10px] block text-[14px] leading-[22px] text-slate-600">{{ product.useRule || '请按预约日期和场次使用，具体以出票凭证及现场指引为准。' }}</text>
-      </view>
-
-      <view class="mx-[12px] mb-[20px] mt-[12px] rounded-[16px] bg-white p-[16px]">
-        <text class="block text-[16px] font-semibold text-slate-800">退款说明</text>
-        <text class="mt-[10px] block text-[14px] leading-[22px] text-slate-600">{{ product.refundRule || '未使用且符合商品退改规则时可申请退款，最终结果以订单审核为准。' }}</text>
+      <view
+        v-for="(section, index) in detailSections"
+        :id="`ticket-detail-section-${index}`"
+        :key="section.sectionCode"
+        class="mx-[12px] mt-[12px] rounded-[16px] bg-white p-[16px]"
+        :class="section === detailSections[detailSections.length - 1] ? 'mb-[20px]' : ''"
+      >
+        <text class="block text-[16px] font-semibold text-slate-800">{{ section.title }}</text>
+        <view class="mt-[10px] text-[14px] leading-[22px] text-slate-600">
+          <MpHtml
+            :content="section.content || ''"
+            :preview-img="false"
+            :show-img-menu="false"
+            :set-title="false"
+            :tag-style="detailContentTagStyle"
+            @ready="measureDetailSectionOffsets"
+          />
+        </view>
       </view>
     </scroll-view>
 
@@ -75,10 +86,10 @@
       <view class="flex items-center justify-between">
         <view>
           <text class="text-[12px] text-slate-500">优惠价</text>
-          <text class="ml-[4px] text-[14px] font-medium text-[#f26b32]">¥<text class="text-[25px] font-bold">{{ product.salePrice }}</text>起</text>
+          <text class="ml-[4px] text-[14px] font-medium text-[#f26b32]">{{ currencySymbol }}<text class="text-[25px] font-bold">{{ product.startingPrice }}</text></text>
         </view>
-        <view class="rounded-full bg-[#f26b32] px-[28px] py-[11px]" @click="emit('buy', product.id)">
-          <text class="text-[15px] font-semibold text-white">去预订</text>
+        <view class="rounded-full bg-[#f26b32] px-[28px] py-[11px]" @click="emit('buy', product.commodityId)">
+          <text class="text-[15px] font-semibold text-white">{{ product.bookingButtonText || '去预订' }}</text>
         </view>
       </view>
     </view>
@@ -86,19 +97,243 @@
 </template>
 
 <script setup>
-import { computed } from "vue";
+import {
+  computed,
+  getCurrentInstance,
+  nextTick,
+  onMounted,
+  ref,
+  watch,
+} from "vue";
+import MpHtml from "@/uni_modules/zero-markdown-view/components/mp-html/mp-html.vue";
+import TicketDetailTabs from "./TicketDetailTabs.vue";
+import TicketMediaSwiper from "./TicketMediaSwiper.vue";
+
+const createDetailSectionScrollSelection = () => {
+  let shouldSyncFromScroll = true;
+
+  return {
+    select(sectionCode) {
+      shouldSyncFromScroll = false;
+      return String(sectionCode ?? "");
+    },
+    resumeScrollSync() {
+      shouldSyncFromScroll = true;
+    },
+    resolve(currentSectionCode, scrollSectionCode) {
+      return shouldSyncFromScroll
+        ? String(scrollSectionCode ?? "")
+        : String(currentSectionCode ?? "");
+    },
+  };
+};
 
 const props = defineProps({
   product: { type: Object, required: true },
 });
 
 const emit = defineEmits(["buy"]);
-const productImages = computed(() =>
-  (props.product.images || []).filter(Boolean)
+const detailContentTagStyle = {
+  p: "margin: 8px 0; line-height: 1.7; color: #475569; word-break: break-word;",
+  img: "max-width: 100%; height: auto; display: block; margin: 10px auto;",
+  ul: "margin: 8px 0; padding-left: 20px; color: #475569;",
+  ol: "margin: 8px 0; padding-left: 20px; color: #475569;",
+  li: "margin: 4px 0; line-height: 1.7; color: #475569;",
+  blockquote:
+    "margin: 10px 0; padding: 8px 12px; border-left: 3px solid #cbd5e1; background-color: #f8fafc; color: #64748b;",
+  strong: "font-weight: 700; color: #334155;",
+};
+const productImages = computed(() => [
+  ...new Set(
+    [
+      props.product.coverImage,
+      ...(Array.isArray(props.product.imageList) ? props.product.imageList : []),
+    ]
+      .filter((image) => typeof image === "string" && image.trim())
+      .map((image) => image.trim())
+  ),
+]);
+const detailSections = computed(() =>
+  [...(props.product.detailSections || [])].sort(
+    (left, right) => Number(left.sortOrder || 0) - Number(right.sortOrder || 0)
+  )
+);
+const activeSectionCode = ref(
+  String(detailSections.value[0]?.sectionCode ?? "")
+);
+const requestedScrollTop = ref(0);
+const currentDetailScrollTop = ref(0);
+const detailScrollHeight = ref(0);
+const detailScrollViewportHeight = ref(0);
+const tabsOffsetTop = ref(Number.POSITIVE_INFINITY);
+const tabsHeight = ref(48);
+const detailSectionOffsets = ref([]);
+const isTabsPinned = ref(false);
+const pendingSectionCode = ref("");
+const detailSectionScrollSelection =
+  createDetailSectionScrollSelection();
+const instance = getCurrentInstance();
+
+const scrollToMeasuredDetailSection = (sectionCode) => {
+  const normalizedSectionCode = String(sectionCode ?? "");
+  const sectionOffset = detailSectionOffsets.value.find(
+    (section) => section.code === normalizedSectionCode
+  );
+  if (!sectionOffset) return false;
+
+  const targetScrollTop = Math.max(
+    0,
+    sectionOffset.top - tabsHeight.value
+  );
+  requestedScrollTop.value = currentDetailScrollTop.value;
+  nextTick(() => {
+    requestedScrollTop.value = targetScrollTop;
+  });
+  return true;
+};
+
+const selectDetailSection = (sectionCode) => {
+  activeSectionCode.value = detailSectionScrollSelection.select(sectionCode);
+  if (scrollToMeasuredDetailSection(activeSectionCode.value)) return;
+
+  pendingSectionCode.value = activeSectionCode.value;
+  measureDetailSectionOffsets();
+};
+
+const enableDetailScrollSync = () => {
+  detailSectionScrollSelection.resumeScrollSync();
+};
+
+const resolveScrollSectionCode = (scrollTop, scrollHeight) => {
+  if (!detailSectionOffsets.value.length) return "";
+
+  const isAtBottom =
+    scrollHeight > 0 &&
+    detailScrollViewportHeight.value > 0 &&
+    scrollTop + detailScrollViewportHeight.value >=
+      scrollHeight - 4;
+  if (isAtBottom) {
+    return detailSectionOffsets.value[detailSectionOffsets.value.length - 1]
+      .code;
+  }
+
+  const activationLine =
+    scrollTop + (isTabsPinned.value ? tabsHeight.value + 8 : 8);
+  return detailSectionOffsets.value.reduce(
+    (current, section) =>
+      section.top <= activationLine ? section : current,
+    detailSectionOffsets.value[0]
+  ).code;
+};
+
+const syncActiveDetailSection = (scrollTop, scrollHeight) => {
+  const scrollSectionCode = resolveScrollSectionCode(
+    scrollTop,
+    scrollHeight
+  );
+  if (!scrollSectionCode) return;
+
+  activeSectionCode.value = detailSectionScrollSelection.resolve(
+    activeSectionCode.value,
+    scrollSectionCode
+  );
+};
+
+const measureDetailSectionOffsets = () => {
+  if (!detailSections.value.length) {
+    tabsOffsetTop.value = Number.POSITIVE_INFINITY;
+    detailSectionOffsets.value = [];
+    isTabsPinned.value = false;
+    return;
+  }
+
+  nextTick(() => {
+    const query = uni.createSelectorQuery().in(instance?.proxy);
+    query.select("#ticket-detail-scroll").boundingClientRect();
+    query.select("#ticket-detail-tabs-anchor").boundingClientRect();
+    detailSections.value.forEach((section, index) => {
+      query
+        .select(`#ticket-detail-section-${index}`)
+        .boundingClientRect();
+    });
+    query.exec((rects = []) => {
+      const scrollRect = rects[0];
+      const tabsRect = rects[1];
+      if (!scrollRect || !tabsRect) return;
+
+      const scrollTop = currentDetailScrollTop.value;
+      detailScrollViewportHeight.value = Number(scrollRect.height || 0);
+      tabsOffsetTop.value = Math.max(
+        0,
+        Number(tabsRect.top || 0) - Number(scrollRect.top || 0) + scrollTop
+      );
+      tabsHeight.value = Number(tabsRect.height || 48);
+      detailSectionOffsets.value = detailSections.value
+        .map((section, index) => {
+          const sectionRect = rects[index + 2];
+          if (!sectionRect) return null;
+          return {
+            code: String(section.sectionCode ?? ""),
+            top: Math.max(
+              0,
+              Number(sectionRect.top || 0) -
+                Number(scrollRect.top || 0) +
+                scrollTop
+            ),
+          };
+        })
+        .filter(Boolean)
+        .sort((left, right) => left.top - right.top);
+      isTabsPinned.value = scrollTop >= tabsOffsetTop.value;
+      syncActiveDetailSection(scrollTop, detailScrollHeight.value);
+
+      if (pendingSectionCode.value) {
+        const sectionCode = pendingSectionCode.value;
+        pendingSectionCode.value = "";
+        scrollToMeasuredDetailSection(sectionCode);
+      }
+    });
+  });
+};
+
+const handleDetailScroll = (event) => {
+  const scrollTop = Number(event.detail?.scrollTop || 0);
+  const scrollHeight = Number(event.detail?.scrollHeight || 0);
+  currentDetailScrollTop.value = scrollTop;
+  detailScrollHeight.value = scrollHeight;
+  isTabsPinned.value = scrollTop >= tabsOffsetTop.value;
+
+  if (!detailSectionOffsets.value.length) {
+    measureDetailSectionOffsets();
+    return;
+  }
+  syncActiveDetailSection(scrollTop, scrollHeight);
+};
+
+onMounted(measureDetailSectionOffsets);
+watch(
+  () =>
+    detailSections.value
+      .map((section) => String(section.sectionCode ?? ""))
+      .join(","),
+  () => {
+    const activeExists = detailSections.value.some(
+      (section) =>
+        String(section.sectionCode ?? "") === activeSectionCode.value
+    );
+    if (!activeExists) {
+      activeSectionCode.value = String(
+        detailSections.value[0]?.sectionCode ?? ""
+      );
+    }
+    detailSectionScrollSelection.resumeScrollSync();
+    detailSectionOffsets.value = [];
+    tabsOffsetTop.value = Number.POSITIVE_INFINITY;
+    isTabsPinned.value = false;
+    measureDetailSectionOffsets();
+  }
+);
+const currencySymbol = computed(() =>
+  props.product.currency === "CNY" ? "¥" : props.product.currency || ""
 );
-const ageRuleText = computed(() => {
-  const { min, max } = props.product.ageRule || {};
-  if (Number(max) >= 999) return `${min}周岁及以上`;
-  return `${min}—${max}周岁`;
-});
 </script>

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

@@ -0,0 +1,54 @@
+<template>
+  <scroll-view
+    class="h-[48px] w-full whitespace-nowrap bg-white"
+    scroll-x
+    :scroll-into-view="activeTabId"
+    scroll-with-animation
+  >
+    <view class="inline-flex h-[48px] min-w-full items-center px-[8px]">
+      <view
+        v-for="(section, index) in sections"
+        :id="`ticket-detail-tab-${instanceKey}-${index}`"
+        :key="`${section.sectionCode}-${index}`"
+        class="relative inline-flex h-[48px] flex-none items-center justify-center px-[14px]"
+        @click="emit('select', section.sectionCode)"
+      >
+        <text
+          class="text-[14px] leading-[20px]"
+          :class="isActiveSection(section.sectionCode) ? 'font-semibold text-[#f26b32]' : 'font-normal text-slate-500'"
+        >
+          {{ section.title }}
+        </text>
+        <view
+          v-if="isActiveSection(section.sectionCode)"
+          class="absolute bottom-0 left-1/2 h-[3px] w-[20px] -translate-x-1/2 rounded-full bg-[#f26b32]"
+        />
+      </view>
+    </view>
+  </scroll-view>
+</template>
+
+<script setup>
+import { computed } from "vue";
+
+const props = defineProps({
+  sections: { type: Array, default: () => [] },
+  activeSectionCode: { type: [String, Number], default: "" },
+  instanceKey: { type: String, default: "default" },
+});
+
+const emit = defineEmits(["select"]);
+const activeIndex = computed(() =>
+  props.sections.findIndex(
+    (section) =>
+      String(section.sectionCode) === String(props.activeSectionCode)
+  )
+);
+const activeTabId = computed(() =>
+  activeIndex.value >= 0
+    ? `ticket-detail-tab-${props.instanceKey}-${activeIndex.value}`
+    : ""
+);
+const isActiveSection = (sectionCode) =>
+  String(sectionCode) === String(props.activeSectionCode);
+</script>

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

@@ -1,7 +1,10 @@
 <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]">
-      <image class="absolute inset-0 h-full w-full" :src="scenicSpot.heroImage" mode="aspectFill" />
+      <TicketMediaSwiper
+        :media-list="homeMediaList"
+        class="absolute inset-0 h-full w-full"
+      />
       <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">
@@ -23,16 +26,16 @@
       </view>
 
       <view class="absolute bottom-[42px] left-[20px] right-[20px]">
-        <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">
+        <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">
           <uni-icons type="location" size="15" color="#FFFFFF" />
-          <text class="ml-[4px] flex-1 text-[12px] leading-[17px] text-white/85">{{ scenicSpot.address }}</text>
+          <text class="ml-[4px] flex-1 text-[12px] leading-[17px] text-white/85">{{ homeData.address }}</text>
         </view>
         <view class="mt-[10px] flex items-center gap-[18px]">
-          <view class="flex items-center" @click="makePhoneCall">
+          <view v-if="homeData.phone" class="flex items-center" @click="makePhoneCall">
             <uni-icons type="phone" size="15" color="#FFFFFF" />
-            <text class="ml-[4px] text-[12px] text-white">{{ scenicSpot.phone }}</text>
+            <text class="ml-[4px] text-[12px] text-white">{{ homeData.phone }}</text>
           </view>
           <view class="flex items-center" @click="openLocation">
             <uni-icons type="navigate" size="15" color="#FFFFFF" />
@@ -52,14 +55,14 @@
         >
           <view
             v-for="group in groups"
-            :id="`ticket-nav-${group.id}`"
-            :key="group.id"
+            :id="`ticket-nav-${group.categoryId}`"
+            :key="group.categoryId"
             class="relative flex min-h-[68px] items-center justify-center px-[10px] py-[12px] text-center"
-            :class="group.id === activeGroupId ? 'bg-[#ecf8f2] text-[#11795c]' : 'bg-white text-[#5f6875]'"
-            @click="selectGroup(group.id)"
+            :class="isActiveGroup(group.categoryId) ? 'bg-[#ecf8f2] text-[#11795c]' : 'bg-white text-[#5f6875]'"
+            @click="selectGroup(group.categoryId)"
           >
-            <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 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>
         </scroll-view>
 
@@ -70,35 +73,38 @@
           :scroll-into-view="scrollIntoViewId"
           scroll-with-animation
           @scroll="handleProductScroll"
+          @touchstart="enableProductScrollSync"
         >
           <view class="px-[12px] pb-[24px]">
-            <view v-for="group in groups" :id="`ticket-group-${group.id}`" :key="group.id" class="pt-[14px]">
+            <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 class="flex items-center">
-                <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>
+                <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>
               </view>
-              <text v-if="group.description" class="mt-[4px] block text-[12px] leading-[17px] text-[#808997]">{{ group.description }}</text>
+              <text v-if="group.subtitle" class="mt-[4px] block text-[12px] leading-[17px] text-[#808997]">{{ group.subtitle }}</text>
 
               <view v-if="productsForGroup(group).length" class="mt-[10px] flex flex-col gap-[10px]">
-                <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 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 class="ml-[10px] flex min-w-0 flex-1 flex-col">
-                    <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 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 h-[20px] shrink-0 items-center">
                         <uni-icons type="right" size="14" color="#242b36" />
                       </view>
                     </view>
-                    <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 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>
                     <view class="mt-auto flex items-end justify-between pt-[6px]">
                       <view>
-                        <text class="block text-[10px] text-[#9aa2ad]">已售 {{ product.sold || 0 }}</text>
-                        <text class="text-[12px] font-medium text-[#f26b32]">¥<text class="text-[20px] font-bold">{{ product.salePrice }}</text></text>
+                        <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>
                       </view>
-                      <view class="flex h-[28px] items-center justify-center rounded-full bg-[#f26b32] px-[13px]" @click="emit('buy', product.id)">
+                      <view class="flex h-[28px] items-center justify-center rounded-full bg-[#f26b32] px-[13px]" @click="emit('buy', product.commodityId)">
                         <text class="text-[12px] font-medium leading-none text-white">选购</text>
                       </view>
                     </view>
@@ -119,34 +125,77 @@
 <script setup>
 import { computed, getCurrentInstance, nextTick, onMounted, ref, watch } from 'vue'
 import TopNavBar from "@/components/TopNavBar/index.vue"
+import TicketMediaSwiper from "./TicketMediaSwiper.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({
-  scenicSpot: { type: Object, required: true },
-  groups: { type: Array, default: () => [] },
-  products: { type: Array, default: () => [] },
+  homeData: { type: Object, required: true },
 })
 
 const emit = defineEmits(['back', 'open-travelers', 'open-orders', 'open-detail', 'buy'])
-const activeGroupId = ref(props.groups[0]?.id || '')
+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 scrollIntoViewId = ref('')
 const leftScrollIntoViewId = computed(() => `ticket-nav-${activeGroupId.value}`)
 const groupOffsets = ref([])
 const rightScrollTop = ref(0)
+const categoryScrollSelection = createCategoryScrollSelection()
 const instance = getCurrentInstance()
-const productsById = computed(() => new Map(props.products.map((product) => [product.id, product])))
+const scenicMetaText = computed(() =>
+  [props.homeData.levelText, props.homeData.subtitle].filter(Boolean).join('｜')
+)
+const homeMediaList = computed(() => {
+  const mediaList = Array.isArray(props.homeData.mediaList)
+    ? props.homeData.mediaList.filter(
+        (media) => typeof media === 'string' && media.trim()
+      )
+    : []
+  if (mediaList.length) return mediaList
 
-const productsForGroup = (group) => (group.productIds || [])
-  .map((productId) => productsById.value.get(productId))
-  .filter((product) => product?.status === 'on_sale' && product.clientVisible !== false)
+  return typeof props.homeData.coverImage === 'string' &&
+    props.homeData.coverImage.trim()
+    ? [props.homeData.coverImage]
+    : []
+})
+const isActiveGroup = (groupId) =>
+  String(groupId) === String(activeGroupId.value)
+const productsForGroup = (group) =>
+  Array.isArray(group.products) ? group.products : []
 
-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 enableProductScrollSync = () => {
+  categoryScrollSelection.resumeScrollSync()
+  scrollIntoViewId.value = ''
 }
 
 const selectGroup = (groupId) => {
-  activeGroupId.value = groupId
+  activeGroupId.value = categoryScrollSelection.select(groupId)
   scrollIntoViewId.value = ''
   nextTick(() => {
     scrollIntoViewId.value = `ticket-group-${groupId}`
@@ -154,20 +203,20 @@ const selectGroup = (groupId) => {
 }
 
 const measureGroupOffsets = () => {
-  if (!props.groups.length) return
+  if (!groups.value.length) return
 
   nextTick(() => {
     const query = uni.createSelectorQuery().in(instance?.proxy)
     query.select('#ticket-product-scroll').boundingClientRect()
-    props.groups.forEach((group) => {
-      query.select(`#ticket-group-${group.id}`).boundingClientRect()
+    groups.value.forEach((group) => {
+      query.select(`#ticket-group-${group.categoryId}`).boundingClientRect()
     })
     query.exec((rects = []) => {
       const containerRect = rects[0]
       if (!containerRect) return
-      groupOffsets.value = props.groups
+      groupOffsets.value = groups.value
         .map((group, index) => ({
-          id: group.id,
+          id: group.categoryId,
           top: Math.max(
             0,
             Number(rects[index + 1]?.top || 0) -
@@ -192,21 +241,52 @@ const handleProductScroll = (event) => {
     (current, group) => (group.top <= activationLine ? group : current),
     groupOffsets.value[0]
   )
-  if (activeGroup?.id) activeGroupId.value = activeGroup.id
+  if (activeGroup?.id) {
+    activeGroupId.value = categoryScrollSelection.resolve(
+      activeGroupId.value,
+      activeGroup.id
+    )
+  }
 }
 
 onMounted(measureGroupOffsets)
-watch(() => props.groups.map((group) => group.id).join(','), 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()
+  }
+)
 
 const makePhoneCall = () => {
-  if (!props.scenicSpot.phone) return
-  uni.makePhoneCall({ phoneNumber: props.scenicSpot.phone })
+  if (!props.homeData.phone) return
+  uni.makePhoneCall({ phoneNumber: props.homeData.phone })
 }
 
 const openLocation = () => {
-  const latitude = Number(props.scenicSpot.latitude)
-  const longitude = Number(props.scenicSpot.longitude)
-  if (!Number.isFinite(latitude) || !Number.isFinite(longitude)) {
+  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)
+  ) {
     uni.showToast({ title: '暂无导航坐标', icon: 'none' })
     return
   }
@@ -214,8 +294,8 @@ const openLocation = () => {
   uni.openLocation({
     latitude,
     longitude,
-    name: props.scenicSpot.name || '',
-    address: props.scenicSpot.address || '',
+    name: props.homeData.scenicName || '',
+    address: props.homeData.address || '',
     fail: () => uni.showToast({ title: '打开导航失败', icon: 'none' }),
   })
 }

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

@@ -0,0 +1,58 @@
+<template>
+  <swiper
+    class="h-full w-full"
+    :indicator-dots="false"
+    :autoplay="hasMultipleMedia"
+    :circular="hasMultipleMedia"
+    :interval="5000"
+    :duration="500"
+  >
+    <swiper-item
+      v-for="(media, index) in normalizedMediaList"
+      :key="`${media}-${index}`"
+      class="h-full w-full"
+    >
+      <video
+        v-if="isMp4Video(media)"
+        class="h-full w-full"
+        :src="media"
+        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
+        class="h-full w-full"
+        :src="media"
+        mode="aspectFill"
+      />
+    </swiper-item>
+  </swiper>
+</template>
+
+<script setup>
+import { computed } from "vue";
+
+const props = defineProps({
+  mediaList: { type: Array, default: () => [] },
+});
+
+const normalizedMediaList = computed(() =>
+  props.mediaList
+    .filter((media) => typeof media === "string" && media.trim())
+    .map((media) => media.trim())
+);
+const hasMultipleMedia = computed(() => normalizedMediaList.value.length > 1);
+const isMp4Video = (url) => {
+  if (typeof url !== "string") return false;
+  const resourcePath = url.trim().split(/[?#]/)[0];
+  return resourcePath.toLowerCase().endsWith(".mp4");
+};
+</script>

src/pages-service/tickets/index.vue

@@ -1,39 +1,85 @@
 <template>
   <view class="h-screen min-w-0 overflow-hidden bg-[#f5f7fa] text-[#172033]">
     <TicketHome
-      :scenic-spot="SCENIC_SPOT"
-      :groups="visibleGroups"
-      :products="ticketStore.products"
+      v-if="homeData"
+      :home-data="homeData"
       @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 { computed } from "vue";
+import { onMounted, ref } from "vue";
+import TopNavBar from "@/components/TopNavBar/index.vue";
 import TicketHome from "./components/TicketHome.vue";
-import { GROUPS, SCENIC_SPOT } from "./data.js";
-import { useTicketStore } from "./store.js";
+import { scenicProductHome } from "./api/scenic.js";
 
-const ticketStore = useTicketStore();
+const homeData = ref(null);
+const loading = ref(false);
+const errorMessage = ref("");
+
+const loadTicketHome = 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);
+
+    if (response?.code !== 0 || !validData) {
+      throw new Error(response?.msg || "景区商品加载失败，请稍后重试");
+    }
+
+    homeData.value = response.data;
+  } catch (error) {
+    homeData.value = null;
+    errorMessage.value = error?.message || "景区商品加载失败，请稍后重试";
+  } finally {
+    loading.value = false;
+  }
+};
+
+onMounted(loadTicketHome);
 
-const visibleGroups = computed(() =>
-  [...GROUPS]
-    .filter((group) => group.enabled)
-    .sort((left, right) => left.sortOrder - right.sortOrder)
-);
 const goBack = () => uni.navigateBack();
 const openTravelers = () =>
   uni.navigateTo({ url: "/pages-service/tickets/travelers" });
 const openOrders = () =>
   uni.navigateTo({ url: "/pages-service/tickets/orders" });
-const openProductDetail = (productId) =>
+const openProductDetail = (commodityId) =>
   uni.navigateTo({
-    url: `/pages-service/tickets/product-detail?productId=${productId}`,
+    url: `/pages-service/tickets/product-detail?commodityId=${commodityId}`,
   });
 const startBooking = (productId) =>
   uni.navigateTo({

src/pages-service/tickets/product-detail.vue

@@ -6,31 +6,83 @@
       title-align="left"
       background="#ffffff"
     />
+    <view
+      v-if="loading"
+      class="flex min-h-0 flex-1 items-center justify-center"
+    >
+      <text class="text-[14px] text-slate-400">正在加载商品详情...</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-slate-400">
+        {{ errorMessage }}
+      </text>
+      <view
+        class="mt-[18px] flex h-[38px] items-center justify-center rounded-full bg-[#f26b32] px-[22px]"
+        @click="loadProductDetail"
+      >
+        <text class="text-[13px] font-medium text-white">重新加载</text>
+      </view>
+    </view>
     <ProductDetail
-      v-if="product"
+      v-else-if="product"
       class="min-h-0 flex-1"
       :product="product"
       @buy="startBooking"
     />
-    <view v-else class="flex min-h-0 flex-1 items-center justify-center text-sm text-slate-400">商品不存在或已下架</view>
+    <view v-else class="flex min-h-0 flex-1 items-center justify-center">
+      <text class="text-[14px] text-slate-400">商品不存在或已下架</text>
+    </view>
   </view>
 </template>
 
 <script setup>
-import { computed, ref } from "vue";
+import { ref } from "vue";
 import { onLoad } from "@dcloudio/uni-app";
 import TopNavBar from "@/components/TopNavBar/index.vue";
 import ProductDetail from "./components/ProductDetail.vue";
-import { useTicketStore } from "./store.js";
+import { scenicProductDetail } from "./api/scenic.js";
 
-const ticketStore = useTicketStore();
-const productId = ref("");
-const product = computed(() =>
-  ticketStore.products.find((item) => item.id === productId.value)
-);
+const commodityId = ref("");
+const product = ref(null);
+const loading = ref(false);
+const errorMessage = ref("");
 
-onLoad((options) => {
-  productId.value = options?.productId || "";
+const loadProductDetail = async () => {
+  if (!commodityId.value) {
+    product.value = null;
+    errorMessage.value = "缺少商品参数";
+    return;
+  }
+
+  loading.value = true;
+  errorMessage.value = "";
+
+  try {
+    const response = await scenicProductDetail({ commodityId: commodityId.value });
+    const validData =
+      response?.data &&
+      typeof response.data === "object" &&
+      !Array.isArray(response.data);
+
+    if (response?.code !== 0 || !validData) {
+      throw new Error(response?.msg || "商品详情加载失败，请稍后重试");
+    }
+
+    product.value = response.data;
+  } catch (error) {
+    product.value = null;
+    errorMessage.value = error?.message || "商品详情加载失败，请稍后重试";
+  } finally {
+    loading.value = false;
+  }
+};
+
+onLoad(async (options) => {
+  commodityId.value = options?.commodityId || "";
+  await loadProductDetail();
 });
 
 const startBooking = (selectedProductId) =>

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

@@ -63,29 +63,280 @@ test("storefront synchronizes the left category from right-column scrolling", as
   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("tickets use a local indicator-free media swiper", async () => {
+  const source = await readTicketFile("components/TicketMediaSwiper.vue");
+
+  assert.match(source, /<swiper/);
+  assert.match(source, /:indicator-dots="false"/);
+  assert.match(source, /:autoplay="hasMultipleMedia"/);
+  assert.match(source, /:circular="hasMultipleMedia"/);
+  assert.match(source, /:interval="5000"/);
+  assert.match(source, /v-for="\(media, index\) in normalizedMediaList"/);
+  assert.match(source, /<video\s+v-if="isMp4Video\(media\)"/);
+  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/);
+  assert.match(source, /const isMp4Video = \(url\) =>/);
+  assert.match(source, /url\.trim\(\)\.split\(\/\[\?\#\]\/\)\[0\]/);
+  assert.match(source, /toLowerCase\(\)\.endsWith\("\.mp4"\)/);
+});
+
+test("TicketHome prefers mediaList and falls back to coverImage", async () => {
+  const source = await readTicketFile("components/TicketHome.vue");
+
+  assert.match(source, /import TicketMediaSwiper from "\.\/TicketMediaSwiper\.vue"/);
+  assert.match(source, /<TicketMediaSwiper\s+:media-list="homeMediaList"/);
+  assert.match(source, /props\.homeData\.mediaList/);
+  assert.match(source, /const homeMediaList = computed\(\(\) =>/);
+  assert.match(source, /if \(mediaList\.length\) return mediaList/);
+  assert.match(source, /props\.homeData\.coverImage/);
+  assert.doesNotMatch(source, /<video/);
+  assert.doesNotMatch(source, /<image\s+v-else-if="homeData\.coverImage"/);
+});
+
+test("ticket detail section tabs scroll horizontally and keep the active tab visible", async () => {
+  const tabs = await readTicketFile("components/TicketDetailTabs.vue");
+
+  assert.match(tabs, /<scroll-view/);
+  assert.match(tabs, /scroll-x/);
+  assert.match(tabs, /:scroll-into-view="activeTabId"/);
+  assert.match(tabs, /scroll-with-animation/);
+  assert.match(tabs, /v-for="\(section, index\) in sections"/);
+  assert.match(tabs, /section\.title/);
+  assert.match(tabs, /emit\('select', section\.sectionCode\)/);
+  assert.match(tabs, /isActiveSection\(section\.sectionCode\)/);
+});
+
 test("product detail is an independent prototype-aligned 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, /uni\.navigateTo\(\{\s*url: `\/pages-service\/tickets\/product-detail\?commodityId=\$\{commodityId\}`/);
   assert.doesNotMatch(indexPage, /detailProduct|<ProductDetail/);
-  assert.match(detailPage, /onLoad\(\(options\)/);
-  assert.match(detailPage, /options\?\.productId/);
-  assert.match(detailPage, /<ProductDetail/);
+  assert.match(detailPage, /onLoad\(async \(options\)/);
+  assert.match(detailPage, /options\?\.commodityId/);
+  assert.match(
+    detailPage,
+    /import \{ scenicProductDetail \} from "\.\/api\/scenic\.js"/
+  );
+  assert.match(detailPage, /scenicProductDetail\(\{ commodityId: commodityId\.value \}\)/);
+  assert.match(detailPage, /product\.value = response\.data/);
+  assert.match(detailPage, /v-if="loading"/);
+  assert.match(detailPage, /v-else-if="errorMessage"/);
+  assert.match(detailPage, /@click="loadProductDetail"/);
+  assert.doesNotMatch(detailPage, /useTicketStore|ticketStore\.products/);
+  assert.match(detailPage, /<ProductDetail\s+v-else-if="product"/);
   assert.match(detailPage, /\/pages-service\/tickets\/booking\?productId=/);
+  assert.match(component, /import TicketMediaSwiper from "\.\/TicketMediaSwiper\.vue"/);
+  assert.match(component, /import TicketDetailTabs from "\.\/TicketDetailTabs\.vue"/);
+  assert.match(component, /<TicketMediaSwiper\s+:media-list="productImages"/);
+  assert.equal((component.match(/<TicketDetailTabs/g) || []).length, 2);
+  assert.match(component, /instance-key="inline"/);
+  assert.match(component, /instance-key="pinned"/);
+  assert.match(component, /v-if="isTabsPinned && detailSections\.length"/);
+  assert.match(component, /id="ticket-detail-tabs-anchor"/);
+  assert.match(component, /id="ticket-detail-scroll"/);
+  assert.match(component, /:scroll-top="requestedScrollTop"/);
+  assert.match(component, /@scroll="handleDetailScroll"/);
+  assert.match(component, /@touchstart="enableDetailScrollSync"/);
+  assert.match(component, /:id="`ticket-detail-section-\$\{index\}`"/);
+  assert.match(component, /@ready="measureDetailSectionOffsets"/);
+  assert.match(
+    component,
+    /uni\.createSelectorQuery\(\)\.in\(instance\?\.proxy\)/
+  );
+  assert.match(
+    component,
+    /scrollTop \+ detailScrollViewportHeight\.value >=\s*scrollHeight - 4/
+  );
   assert.match(component, /relative h-56 overflow-hidden bg-white/);
-  assert.match(component, /1 \/ \{\{ productImages\.length \}\}/);
+  assert.doesNotMatch(component, /1 \/ \{\{ productImages\.length \}\}/);
+  assert.doesNotMatch(component, /productImages\.slice/);
+  assert.match(component, /new Set/);
   assert.match(component, /rounded bg-blue-50 px-1\.5 py-0\.5 text-\[10px\] font-semibold text-blue-600/);
-  assert.doesNotMatch(component, /bg-violet-50 px-\[7px\] py-\[3px\] text-\[11px\] text-violet-700/);
-  assert.match(component, /product\.description/);
-  assert.match(component, /使用说明/);
-  assert.match(component, /product\.useRule/);
-  assert.match(component, /退款说明/);
-  assert.match(component, /product\.refundRule/);
-  assert.match(data, /useRule/);
-  assert.match(data, /refundRule/);
+  for (const field of [
+    "product.coverImage",
+    "product.imageList",
+    "product.tags",
+    "product.fulfillmentLabel",
+    "product.commodityName",
+    "product.subtitle",
+    "product.startingPrice",
+    "product.currency",
+    "product.detailSections",
+    "product.bookingButtonText",
+    "product.commodityId",
+  ]) {
+    assert.ok(component.includes(field), `${field} is not rendered`);
+  }
+  assert.match(component, /v-for="\(section, index\) in detailSections"/);
+  assert.match(component, /section\.sectionCode/);
+  assert.match(component, /section\.title/);
+  assert.match(component, /section\.content/);
+  assert.match(
+    component,
+    /import MpHtml from "@\/uni_modules\/zero-markdown-view\/components\/mp-html\/mp-html\.vue"/
+  );
+  assert.match(component, /<MpHtml/);
+  assert.match(component, /:content="section\.content \|\| ''"/);
+  assert.match(component, /:preview-img="false"/);
+  assert.match(component, /:show-img-menu="false"/);
+  assert.match(component, /:set-title="false"/);
+  assert.match(component, /:tag-style="detailContentTagStyle"/);
+  assert.match(
+    component,
+    /img:\s*"[^"]*max-width:\s*100%[^"]*height:\s*auto/
+  );
+  assert.doesNotMatch(
+    component,
+    /<text[^>]*>\{\{\s*section\.content\s*\}\}<\/text>/
+  );
+  assert.match(
+    component,
+    /sort\(\s*\(left, right\) => Number\(left\.sortOrder/
+  );
+  assert.match(component, /emit\('buy', product\.commodityId\)/);
+  assert.doesNotMatch(
+    component,
+    /product\.name|product\.salePrice|product\.included|product\.excluded|product\.purchaseNotice|product\.useRule|product\.refundRule|product\.id/
+  );
+});
+
+test("product detail tab clicks win until the visitor resumes manual scrolling", async () => {
+  const component = await readTicketFile("components/ProductDetail.vue");
+  const factorySource = component.match(
+    /const createDetailSectionScrollSelection = \(\) => \{[\s\S]*?^\};?\n/m
+  )?.[0];
+
+  assert.ok(factorySource, "inline detail section scroll selection factory missing");
+  assert.match(component, /const detailSectionScrollSelection =\s*createDetailSectionScrollSelection\(\)/);
+  assert.match(
+    component,
+    /const selectDetailSection = \(sectionCode\) => \{\s*activeSectionCode\.value = detailSectionScrollSelection\.select/
+  );
+  assert.match(
+    component,
+    /const enableDetailScrollSync = \(\) => \{\s*detailSectionScrollSelection\.resumeScrollSync\(\)/
+  );
+  assert.match(
+    component,
+    /activeSectionCode\.value = detailSectionScrollSelection\.resolve\(/
+  );
+
+  const createDetailSectionScrollSelection = Function(
+    `${factorySource}\nreturn createDetailSectionScrollSelection`
+  )();
+  const selection = createDetailSectionScrollSelection();
+  const clickedSectionCode = selection.select("PURCHASE_NOTICE");
+
+  assert.equal(
+    selection.resolve(clickedSectionCode, "PRODUCT_DETAIL"),
+    "PURCHASE_NOTICE"
+  );
+  selection.resumeScrollSync();
+  assert.equal(
+    selection.resolve(clickedSectionCode, "FEE_INCLUDE"),
+    "FEE_INCLUDE"
+  );
 });
 
 test("booking flow matches the visitor prototype while preserving requested controls", async () => {