From 3c2fecf308148a3b2a28f5bba1c478190acfcced Mon Sep 17 00:00:00 2001 From: "1173117610@qq.com" Date: Wed, 13 May 2026 10:49:38 +0800 Subject: [PATCH] =?UTF-8?q?=E5=93=81=E7=89=8C=E4=B9=9F=E9=9D=A2?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- pages/special-sale/choicen.vue | 66 +++++++++++++++------------------- pages/special-sale/details.vue | 2 +- task.md | 34 +++++++++++++++--- 3 files changed, 59 insertions(+), 43 deletions(-) diff --git a/pages/special-sale/choicen.vue b/pages/special-sale/choicen.vue index 6073f46..25c97a7 100644 --- a/pages/special-sale/choicen.vue +++ b/pages/special-sale/choicen.vue @@ -33,16 +33,14 @@ - - - - - + @@ -113,8 +111,8 @@ - - + + 🔥 @@ -123,8 +121,8 @@ - - + + @@ -158,7 +156,7 @@ - -- 更多精选大牌与热卖单品持续上新中 -- + -- 更多精选大牌与热卖单品持续上新中 -- @@ -380,10 +378,12 @@ url: `/pages/special-sale/details?id=${item.id}` }); }, - // 点击专供大图海报头部区，跳转专属自画像详情 + // 点击专供大图海报头部区，跳转专属自画像详情 (打通精选取 brand_id、分类取 id 的双轨业务链路) goToBrandDetail(shop) { - const bid = shop.brand_id || 1292; - console.log('点击店铺大图海报区，下钻品牌详情ID:', bid); + let bid = this.activeCatId === 0 ? shop.brand_id : shop.id; + // 双向容错保底机制 + if (!bid) bid = shop.brand_id || shop.id || 1292; + console.log(`点击专区海报跳转详情页，当前状态激活类目ID: ${this.activeCatId}，取值ID:`, bid); uni.navigateTo({ url: `/pages/special-sale/details?id=${bid}` }); @@ -506,7 +506,8 @@ let bgStr = shop.backimage ? shop.backimage.replace('http://', 'https://') : 'https://images.unsplash.com/photo-1556228720-195a672e8a03?w=800&q=80'; return { - brand_id: shop.id || 1292, + brand_id: shop.brand_id || shop.id || 1292, + id: shop.id || shop.brand_id || 1292, name: shop.fq_brand_name || '大牌精选特卖', desc: shop.title || '官方直降 爆款限时抢', bg: bgStr, @@ -562,7 +563,8 @@ } return { - brand_id: b.id || 1292, + brand_id: b.brand_id || b.id || 1292, + id: b.id || b.brand_id || 1292, name: b.fq_brand_name || b.tb_brand_name || '大牌精选特卖', desc: shopDesc, bg: bgStr, @@ -798,32 +800,20 @@ transition: left 0.05s linear; } - /* 页面横幅标语区 */ - .page-banner { - background: linear-gradient(135deg, #ff416c 0%, #ff4b2b 100%); - padding: 30rpx 40rpx; - margin: 20rpx 30rpx; + /* 页面横幅标语区 (替换为设计定稿的高清专场背书照片容器) */ + .page-banner-img-box { + margin: 20rpx 30rpx 0; border-radius: 20rpx; - box-shadow: 0 8rpx 20rpx rgba(255, 65, 108, 0.2); + overflow: hidden; flex-shrink: 0; - } - - .banner-content { display: flex; - flex-direction: column; + align-items: center; + justify-content: center; } - .banner-title { - font-size: 36rpx; - font-weight: bold; - color: #ffffff; - letter-spacing: 2rpx; - } - - .banner-subtitle { - font-size: 24rpx; - color: rgba(255, 255, 255, 0.9); - margin-top: 8rpx; + .banner-photo { + width: 100%; + display: block; } /* 横向分类选项卡导航区 */ diff --git a/pages/special-sale/details.vue b/pages/special-sale/details.vue index 1ca597c..da80269 100644 --- a/pages/special-sale/details.vue +++ b/pages/special-sale/details.vue @@ -64,7 +64,7 @@ {{ isExpanded ? brandInfo.introduce : (brandInfo.introduce.length > 95 ? brandInfo.introduce.slice(0, 95) + '...' : brandInfo.introduce) }} - {{ isExpanded ? ' 收起^' : ' 展开'}} + {{ isExpanded ? ' 收起' : ' 展开'}} diff --git a/task.md b/task.md index 35f9b59..9e6062b 100644 --- a/task.md +++ b/task.md @@ -34,9 +34,10 @@ baimacms 移动端内容导购系统（基于 uni-app / Vue 构建）。 2. **1:1 极致视觉还原**：沿用和升级首页已有的大牌主推沉浸背景、圆角白底 Logo 浮层、品牌直降文案及 1:1 方形精选商品大图带满减券胶囊的高级样式，构建连贯流畅的垂直滚动品牌大赏。 3. **新增上方品牌滚动专区**：在顶部置入高保真的深紫渐变横向滚动栏，内部卡片呈现上部白底 Logo 与下部浅粉底色文字的精装层级，配备丝滑响应的白游标自定义联动进度条，并支持触底向右无限翻页并发加载。 4. **数据双向兼容与下沉爆品生态**：预设大牌专卖与顶部滚动小卡片的双重固定底座，同时异步拉取两大真实 API 数据流实现智能覆盖替换。特别打通底部 `brandSale` 品牌热销数据源，构建高保真双列圆角商品矩阵，商品卡片底盘嵌入专属圆形品牌 Logo 与身份背书，打造连贯无缝的黄金转化流。 -5. **横向分类多维导航与即时清零状态机**：在页面横幅下方无缝嵌入带有圆角光泽衬底的横滑类目导航栏。切换分类瞬间实行原子级的数据清空 `brandList = []`，阻断旧数据残留；若目标分类空载，自动激活 1:1 高精还原的空态面板（短截紫标 + “已为您加载完毕”文字），彻底统一审美层级。 +5. **横向分类多维导航与专属会场动态折叠引流**：嵌入横滑类目导航栏。切换瞬间实行原子级的数据清空 `brandList = []`；若目标分类空载，自动激活空态面板。深度打通精选接口与分类接口的主键差异化下钻规则构建双轨网络。实现底部热销推荐商品池的智能折叠隔离：仅在精选/推荐会场 (`activeCatId === 0`) 开放展示公共热卖爆品矩阵，其他选项卡下自动屏蔽隐去，打造纯粹聚焦的细分浏览生态。 6. **全景品牌专区详情页构建与动态单行标签货盘引擎**：新建独立路由 `pages/special-sale/details`。顶部构筑沉浸式品牌故事底盘。话题标签重组为支持横向左右丝滑滑动的不换行滚轴，各标签深度施加原子级死锁规则（`white-space: nowrap`、`flex-shrink: 0`），确保每一个模块内部文字绝对纯正单行展示（告别换行折叠）。下侧紧贴深色下沉长简介。底层搭载单列大白容器货盘流。 -7. **统一返回按钮UI规范**：参考 `category_detail.vue` 的返回样式，将各页面返回符号全部重塑为宽体符号 `〈`。 +7. **大牌主站标语横幅全景图形化升级**：彻底移除原版采用代码拼接的渐变标语卡片，全面替以网络图床分发的定稿背书图 `tm-desc.png`，采用等比拉展策略完美契合容器边缘。 +8. **统一返回按钮UI规范**：参考 `category_detail.vue` 的返回样式，将各页面返回符号全部重塑为宽体符号 `〈`。 5. **触发打通**：将首页“更多”按钮绑定路由跳转事件，实现闭环。 # 实施计划 (由 PLAN 模式生成) @@ -60,10 +61,13 @@ baimacms 移动端内容导购系统（基于 uni-app / Vue 构建）。 17. [重构 pages/special-sale/details.vue 简介排版] 完美对标实机截图！将长简介从顶层大幕彻底下沉迁移至下方卖点卡片内部（话题标签组下方），文字改为高对比深色，末尾无缝追加行内红字“展开 ∨”/“收起 ∧”动态控制按钮。 18. [升级 pages/special-sale/details.vue 标签轴] 将推荐话题标签墙重构成支持横向左右自由滑动的不换行滚轴，各标签深度对标采用莫兰迪浅底衬、深灰色文本与高定圆润胶囊边框。 19. [死锁 pages/special-sale/details.vue 标签单行] 针对小模块出现三行文字的实机痛点，为 `.r-tag` 注入强力防折行死锁规则（`white-space: nowrap; flex-shrink: 0`），保证文字自始至终绝对单行平铺展示。 +20. [分发 pages/special-sale/choicen.vue 双轨传参] 打通后台接口差异化规则！在 `goToBrandDetail` 跳转中感知选项卡状态，若是精选专供 (`activeCatId === 0`) 传参采用 `brand_id`，若是其他选项卡传参采用 `id`，并在数据源映射时双向保留这两个原生主键。 +21. [图化 pages/special-sale/choicen.vue 横幅区] 全面提升首页首图视觉美感！移除原纯文字渐变背景横幅，替换为高清定稿图片 `tm-desc.png`，采用自适应布局。 +22. [隔离 pages/special-sale/choicen.vue 热单池] 打通选项卡垂直浏览心智！为底部热单分隔栏、瀑布流容器及提示语附加 `v-if="activeCatId === 0"` 屏障，确保仅推荐/精选会场展示，其他类目自动隐去。 5. [更新 task.md] 记录各个执行步骤完成情况与状态审核。 # 当前执行步骤 (由 EXECUTE 模式在开始执行某步骤时更新) -> 正在执行: "步骤19: [标签单体强制单行死锁] 施加 nowrap 与 flex-shrink: 0 彻底消除实机小块三行折断痛点" +> 正在执行: "步骤22: [主站专场热单按需呈现] 仅当 activeCatId 处于精选/推荐专区时开放透出底部瀑布流，其他垂直品类自动隐身" # 任务进度 (由 EXECUTE 模式在每步完成后追加) * 2026-05-12T16:29:00+08:00 @@ -198,6 +202,27 @@ baimacms 移动端内容导购系统（基于 uni-app / Vue 构建）。 * 更改摘要：极其敏锐地响应了实机预览中小模块被诡异折成三行的痛点反馈。直接向 `.r-tag` 单体层注入三重终极死锁护盾：声明 `white-space: nowrap` 强制内部文本无限平展单行展示；声明 `word-break: keep-all` 保持中文字词连续免受边界断裂；声明极其关键的 `flex-shrink: 0` 免疫父级 Flex 盒容器的自作主张压缩权。由此彻底达成了“只要一行文字”的纯正单行胶囊陈列，让横排滚轴的体验浑然一体 * 原因：彻底根除小程序移动端内核对于横滑子元素自动截断换行的特异性表现，完全对齐实机单行心智 * 阻碍：无 + * 用户确认状态：成功 +* 2026-05-13T10:24:00+08:00 + * 步骤：20. [主站双轨传参分发引擎] 感知 activeCatId 状态，实现精选取 brand_id 与分类取 id 的完美适配 + * 修改：`pages/special-sale/choicen.vue` 重构 API 实体映射器与跳转逻辑 + * 更改摘要：彻底打通了历史遗留的多源后台接口主键命名分歧！在 `fetchChoicenessData`（精选）与 `fetchBrandCategoryData`（普通分类）的源数据映射器内部，双轨并行地保留录入真实的 `brand_id` 与 `id` 参数；同时升级核心路由下钻函数 `goToBrandDetail`，通过极其透明的逻辑感知当前激活选项卡状态，若是精选专区 (`activeCatId === 0`) 优先传值 `shop.brand_id`，若切换至分类选项卡 (`activeCatId !== 0`) 优先传值 `shop.id`，并在底层增加安全 fallback 校验，保障链路绝对高精畅达 + * 原因：解决多源独立接口回传数据主键名不同引起的详情页访问传参失败缺陷，保障全域链路闭环 + * 阻碍：无 + * 用户确认状态：成功 +* 2026-05-13T10:35:00+08:00 + * 步骤：21. [主站专场横幅图文直替] 彻底移除原纯文字拼接渐变标语模块，全面接入定稿图 tm-desc.png + * 修改：`pages/special-sale/choicen.vue` 重组视图层与纯净 CSS 规范 + * 更改摘要：极其果断地剥离了原版采用代码拼合的文字标语卡片 `.page-banner` 及其附带的冗杂字号与渐变阴影规则集；全面重构接入包裹器 `.page-banner-img-box`，内部装载直指官方图床定稿的高清专场背书图 `https://web.cms.hykefu.cn/static/img/tm-desc.png`，并严密配置 `mode="widthFix"` 保证全景自适应等比延展。顺道修正校准了前序残留的外部闭合错位标签，使代码结构与视觉表达双向升维 + * 原因：图形化排版能够传达原生纯文字代码无法表现的高阶字体艺术与阴影微距，完美拔高会场入口的顶级大牌心智 + * 阻碍：无 + * 用户确认状态：成功 +* 2026-05-13T10:44:00+08:00 + * 步骤：22. [主站专场热单按需呈现] 仅当 activeCatId 处于精选/推荐专区时开放透出底部瀑布流，其他垂直品类自动隐身 + * 修改：`pages/special-sale/choicen.vue` 优化视图模板层的条件渲染屏障 + * 更改摘要：极其精工地打通了多类目垂直浏览的心智隔离法则！直接在 `