15133400227
/
baimacms
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

品牌也面

This commit is contained in:
1173117610@qq.com 2026-05-13 10:49:38 +08:00
parent 0178d2b556
commit 3c2fecf308
3 changed files with 59 additions and 43 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

66
pages/special-sale/choicen.vue
View File

@ -33,16 +33,14 @@
<view class="t-indicator-slider" :style="{ left: topSliderLeft + '%' }"></view> <view class="t-indicator-slider" :style="{ left: topSliderLeft + '%' }"></view>
</view> </view>
</view> </view>
</view>
<!-- 页面横幅 / 主题标语区 (直接替换为设计定稿的高清专场背书照片) -->
<!-- 页面横幅 / 主题标语区 --> <view class="page-banner-img-box">
<view class="page-banner"> <image class="banner-photo" src="https://web.cms.hykefu.cn/static/img/tm-desc.png" mode="widthFix"></image>
<view class="banner-content">
<text class="banner-title">品牌大牌 特卖专场</text>
<text class="banner-subtitle">官方正品 · 爆款直降 · 限量大额券</text>
</view> </view>
</view> </view>
<!-- 横向分类选项卡导航区 (带有圆角光泽背景与高级紫标指示横线) --> <!-- 横向分类选项卡导航区 (带有圆角光泽背景与高级紫标指示横线) -->
<view class="category-tabs-container"> <view class="category-tabs-container">
<scroll-view scroll-x class="category-tabs-scroll" :show-scrollbar="false"> <scroll-view scroll-x class="category-tabs-scroll" :show-scrollbar="false">
@ -113,8 +111,8 @@
</view> </view>
</view> </view>
<!-- 栏目分隔条：实时热卖单品爆单榜 --> <!-- 栏目分隔条：实时热卖单品爆单榜 (仅精选/推荐会场展示) -->
<view class="section-divider"> <view class="section-divider" v-if="activeCatId === 0">
<view class="divider-line"></view> <view class="divider-line"></view>
<view class="divider-title"> <view class="divider-title">
<text class="fire-icon">🔥</text> <text class="fire-icon">🔥</text>
@ -123,8 +121,8 @@
<view class="divider-line"></view> <view class="divider-line"></view>
</view> </view>
<!-- 下部双列爆品流式网格 (完美整合 brandSale 接口源) --> <!-- 下部双列爆品流式网格 (完美整合 brandSale 接口源，仅精选/推荐会场展示) -->
<view class="brand-sale-grid"> <view class="brand-sale-grid" v-if="activeCatId === 0">
<view class="bs-card" v-for="(item, bIdx) in brandSaleList" :key="bIdx" @click="goToDetail(item.id)"> <view class="bs-card" v-for="(item, bIdx) in brandSaleList" :key="bIdx" @click="goToDetail(item.id)">
<!-- 正方形顶图容器 --> <!-- 正方形顶图容器 -->
<view class="bs-img-box"> <view class="bs-img-box">
@ -158,7 +156,7 @@
</view> </view>
</view> </view>
<view class="bottom-tip">-- 更多精选大牌与热卖单品持续上新中 --</view> <view class="bottom-tip" v-if="activeCatId === 0">-- 更多精选大牌与热卖单品持续上新中 --</view>
</scroll-view> </scroll-view>
</view> </view>
</template> </template>
@ -380,10 +378,12 @@
url: `/pages/special-sale/details?id=${item.id}` url: `/pages/special-sale/details?id=${item.id}`
}); });
}, },
// 点击专供大图海报头部区，跳转专属自画像详情 // 点击专供大图海报头部区，跳转专属自画像详情 (打通精选取 brand_id、分类取 id 的双轨业务链路)
goToBrandDetail(shop) { goToBrandDetail(shop) {
const bid = shop.brand_id || 1292; let bid = this.activeCatId === 0 ? shop.brand_id : shop.id;
console.log('点击店铺大图海报区，下钻品牌详情ID:', bid); // 双向容错保底机制
if (!bid) bid = shop.brand_id || shop.id || 1292;
console.log(`点击专区海报跳转详情页，当前状态激活类目ID: ${this.activeCatId}，取值ID:`, bid);
uni.navigateTo({ uni.navigateTo({
url: `/pages/special-sale/details?id=${bid}` 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'; let bgStr = shop.backimage ? shop.backimage.replace('http://', 'https://') : 'https://images.unsplash.com/photo-1556228720-195a672e8a03?w=800&q=80';
return { 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 || '大牌精选特卖', name: shop.fq_brand_name || '大牌精选特卖',
desc: shop.title || '官方直降 爆款限时抢', desc: shop.title || '官方直降 爆款限时抢',
bg: bgStr, bg: bgStr,
@ -562,7 +563,8 @@
} }
return { 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 || '大牌精选特卖', name: b.fq_brand_name || b.tb_brand_name || '大牌精选特卖',
desc: shopDesc, desc: shopDesc,
bg: bgStr, bg: bgStr,
@ -798,32 +800,20 @@
transition: left 0.05s linear; transition: left 0.05s linear;
} }
/* 页面横幅标语区 */ /* 页面横幅标语区 (替换为设计定稿的高清专场背书照片容器) */
.page-banner { .page-banner-img-box {
background: linear-gradient(135deg, #ff416c 0%, #ff4b2b 100%); margin: 20rpx 30rpx 0;
padding: 30rpx 40rpx;
margin: 20rpx 30rpx;
border-radius: 20rpx; border-radius: 20rpx;
box-shadow: 0 8rpx 20rpx rgba(255, 65, 108, 0.2); overflow: hidden;
flex-shrink: 0; flex-shrink: 0;
}
.banner-content {
display: flex; display: flex;
flex-direction: column; align-items: center;
justify-content: center;
} }
.banner-title { .banner-photo {
font-size: 36rpx; width: 100%;
font-weight: bold; display: block;
color: #ffffff;
letter-spacing: 2rpx;
}
.banner-subtitle {
font-size: 24rpx;
color: rgba(255, 255, 255, 0.9);
margin-top: 8rpx;
} }
/* 横向分类选项卡导航区 */ /* 横向分类选项卡导航区 */

2
pages/special-sale/details.vue
View File

@ -64,7 +64,7 @@
<!-- 下沉式高定深色简介与行末跟随红字按钮 --> <!-- 下沉式高定深色简介与行末跟随红字按钮 -->
<view class="card-intro-section" v-if="brandInfo.introduce"> <view class="card-intro-section" v-if="brandInfo.introduce">
<text class="c-intro-txt">{{ isExpanded ? brandInfo.introduce : (brandInfo.introduce.length > 95 ? brandInfo.introduce.slice(0, 95) + '...' : brandInfo.introduce) }}</text> <text class="c-intro-txt">{{ isExpanded ? brandInfo.introduce : (brandInfo.introduce.length > 95 ? brandInfo.introduce.slice(0, 95) + '...' : brandInfo.introduce) }}</text>
<text class="inline-toggle-btn" v-if="brandInfo.introduce.length > 95" @click="isExpanded = !isExpanded">{{ isExpanded ? ' 收起^' : ' 展开'}}</text> <text class="inline-toggle-btn" v-if="brandInfo.introduce.length > 95" @click="isExpanded = !isExpanded">{{ isExpanded ? ' 收起' : ' 展开'}}</text>
</view> </view>
</view> </view>
</view> </view>

34
task.md
View File

@ -34,9 +34,10 @@ baimacms 移动端内容导购系统（基于 uni-app / Vue 构建）。
2. **1:1 极致视觉还原**：沿用和升级首页已有的大牌主推沉浸背景、圆角白底 Logo 浮层、品牌直降文案及 1:1 方形精选商品大图带满减券胶囊的高级样式，构建连贯流畅的垂直滚动品牌大赏。 2. **1:1 极致视觉还原**：沿用和升级首页已有的大牌主推沉浸背景、圆角白底 Logo 浮层、品牌直降文案及 1:1 方形精选商品大图带满减券胶囊的高级样式，构建连贯流畅的垂直滚动品牌大赏。
3. **新增上方品牌滚动专区**：在顶部置入高保真的深紫渐变横向滚动栏，内部卡片呈现上部白底 Logo 与下部浅粉底色文字的精装层级，配备丝滑响应的白游标自定义联动进度条，并支持触底向右无限翻页并发加载。 3. **新增上方品牌滚动专区**：在顶部置入高保真的深紫渐变横向滚动栏，内部卡片呈现上部白底 Logo 与下部浅粉底色文字的精装层级，配备丝滑响应的白游标自定义联动进度条，并支持触底向右无限翻页并发加载。
4. **数据双向兼容与下沉爆品生态**：预设大牌专卖与顶部滚动小卡片的双重固定底座，同时异步拉取两大真实 API 数据流实现智能覆盖替换。特别打通底部 `brandSale` 品牌热销数据源，构建高保真双列圆角商品矩阵，商品卡片底盘嵌入专属圆形品牌 Logo 与身份背书，打造连贯无缝的黄金转化流。 4. **数据双向兼容与下沉爆品生态**：预设大牌专卖与顶部滚动小卡片的双重固定底座，同时异步拉取两大真实 API 数据流实现智能覆盖替换。特别打通底部 `brandSale` 品牌热销数据源，构建高保真双列圆角商品矩阵，商品卡片底盘嵌入专属圆形品牌 Logo 与身份背书，打造连贯无缝的黄金转化流。
5. **横向分类多维导航与即时清零状态机**：在页面横幅下方无缝嵌入带有圆角光泽衬底的横滑类目导航栏。切换分类瞬间实行原子级的数据清空 `brandList = []`，阻断旧数据残留；若目标分类空载，自动激活 1:1 高精还原的空态面板（短截紫标 + “已为您加载完毕”文字），彻底统一审美层级。 5. **横向分类多维导航与专属会场动态折叠引流**：嵌入横滑类目导航栏。切换瞬间实行原子级的数据清空 `brandList = []`；若目标分类空载，自动激活空态面板。深度打通精选接口与分类接口的主键差异化下钻规则构建双轨网络。实现底部热销推荐商品池的智能折叠隔离：仅在精选/推荐会场 (`activeCatId === 0`) 开放展示公共热卖爆品矩阵，其他选项卡下自动屏蔽隐去，打造纯粹聚焦的细分浏览生态。
6. **全景品牌专区详情页构建与动态单行标签货盘引擎**：新建独立路由 `pages/special-sale/details`。顶部构筑沉浸式品牌故事底盘。话题标签重组为支持横向左右丝滑滑动的不换行滚轴，各标签深度施加原子级死锁规则（`white-space: nowrap`、`flex-shrink: 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. **触发打通**：将首页“更多”按钮绑定路由跳转事件，实现闭环。 5. **触发打通**：将首页“更多”按钮绑定路由跳转事件，实现闭环。
# 实施计划 (由 PLAN 模式生成) # 实施计划 (由 PLAN 模式生成)
@ -60,10 +61,13 @@ baimacms 移动端内容导购系统（基于 uni-app / Vue 构建）。
17. [重构 pages/special-sale/details.vue 简介排版] 完美对标实机截图！将长简介从顶层大幕彻底下沉迁移至下方卖点卡片内部（话题标签组下方），文字改为高对比深色，末尾无缝追加行内红字“展开 ∨”/“收起 ∧”动态控制按钮。 17. [重构 pages/special-sale/details.vue 简介排版] 完美对标实机截图！将长简介从顶层大幕彻底下沉迁移至下方卖点卡片内部（话题标签组下方），文字改为高对比深色，末尾无缝追加行内红字“展开 ∨”/“收起 ∧”动态控制按钮。
18. [升级 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`），保证文字自始至终绝对单行平铺展示。 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] 记录各个执行步骤完成情况与状态审核。 5. [更新 task.md] 记录各个执行步骤完成情况与状态审核。
# 当前执行步骤 (由 EXECUTE 模式在开始执行某步骤时更新) # 当前执行步骤 (由 EXECUTE 模式在开始执行某步骤时更新)
> 正在执行: "步骤19: [标签单体强制单行死锁] 施加 nowrap 与 flex-shrink: 0 彻底消除实机小块三行折断痛点" > 正在执行: "步骤22: [主站专场热单按需呈现] 仅当 activeCatId 处于精选/推荐专区时开放透出底部瀑布流，其他垂直品类自动隐身"
# 任务进度 (由 EXECUTE 模式在每步完成后追加) # 任务进度 (由 EXECUTE 模式在每步完成后追加)
* 2026-05-12T16:29:00+08:00 * 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 盒容器的自作主张压缩权。由此彻底达成了“只要一行文字”的纯正单行胶囊陈列，让横排滚轴的体验浑然一体 * 更改摘要：极其敏锐地响应了实机预览中小模块被诡异折成三行的痛点反馈。直接向 `.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` 优化视图模板层的条件渲染屏障
* 更改摘要：极其精工地打通了多类目垂直浏览的心智隔离法则！直接在 `<template>` 层级为承载全局热销商品的栏目分隔条 `.section-divider`、双列瀑布流容器 `.brand-sale-grid` 乃至底端版权上新声明 `.bottom-tip` 附加了严密的视图判断属性 `v-if="activeCatId === 0"`。由此，仅当用户停留于主站总览的“精选/推荐”初始会场时透传展示公共爆单商品矩阵；一旦向右横移下钻独立品类，底层混合商品源瞬间自动屏蔽隐去，为对应类目的大牌店铺流创造出绝对纯净、免受干扰的闭环探索空间
* 原因：对齐头部电商交互规范，消除全局推荐流对独立细分品类商品墙浏览注意力的不当分流
* 阻碍：无
* 状态：待确认 * 状态：待确认
# 最终审查 (由 REVIEW 模式填充) # 最终审查 (由 REVIEW 模式填充)
@ -205,6 +230,7 @@ baimacms 移动端内容导购系统（基于 uni-app / Vue 构建）。
- 彻底解决了划到最后一个无法加载下一页数据的缺陷，集成横向翻页监听和展开追加合并。 - 彻底解决了划到最后一个无法加载下一页数据的缺陷，集成横向翻页监听和展开追加合并。
- 完美整合下沉接口 `brandSale`，呈现瀑布流热卖单品，内置身份背书条打通转化。 - 完美整合下沉接口 `brandSale`，呈现瀑布流热卖单品，内置身份背书条打通转化。
- 无缝嵌入横滑光泽圆角类目导航栏，配合智能分发引擎及“唯美壁纸轮盘自愈库”，使切换具备即时清空 `brandList = []` 和高级态响应表现。 - 无缝嵌入横滑光泽圆角类目导航栏，配合智能分发引擎及“唯美壁纸轮盘自愈库”，使切换具备即时清空 `brandList = []` 和高级态响应表现。
- 独立品牌专场 `pages/special-sale/details` 全域生态达成极致旗舰重构：打通纯正的原生列表 `id` 参数透传法则；顶层回退键全线归宗为加粗宽体 `〈` 结构；头盘创新置入并列展示的双重身份胶囊带（粉丝关注与零值全隐的月销售额认证）；中段拟态玻璃卡片内嵌高定水平滑动轴，推荐话题标签彻底升级为支持左右横向拖动的不换行矩阵，色泽复刻莫兰迪高级灰紫调及饱满胶囊边框，并深度集成 `white-space: nowrap; flex-shrink: 0` 三重单行死锁护盾，彻底消除了小卡片内部文字被意外折断成三行的痛点，呈现极为规整的单行纯净文字美学；紧随其后的是完美下推落户的深色长篇品牌传记文字，自带行末高亮算法（完美拼接红粉色行内按键 `展开 ∨` / `收起 ∧`），提供分毫不差的旗舰级沉浸阅读体验；下半部货盘极其震撼地完成了从双列方块到纯白大圆角底托容器单列高定矩阵的全面飞跃，涵盖极细线排序栏、左图右文密集流与极简底端留白陈述，完美契合实机设计美学。 - 主站大牌专区 `pages/special-sale/choicen` 全域生态跨入旗舰终极态：彻底打通双轨传参引擎，周密规避后台精选与分类接口主键名不一致陷阱，建立选项卡态感知下钻转化流；将会场顶盘的标语横幅从粗糙纯文字流整体拔高升级为直连官方图床定稿的高清自适应大图 `tm-desc.png`；为底部公共热卖货盘域注入了选项卡感知屏障 `v-if="activeCatId === 0"`，确保仅推荐总会场透出，细分品类会场自动折叠隐身，构建出登峰造极的垂直导购心智。
- 独立品牌专场 `pages/special-sale/details` 全域生态达成极致旗舰重构：建立了纯正的原生列表参数透传法则；顶层回退键全线归宗为加粗宽体 `〈` 结构；头盘创新置入并列展示的双重身份胶囊带（粉丝关注与零值全隐的月销售额认证）；中段拟态玻璃卡片内嵌高定水平滑动轴，推荐话题标签彻底升级为支持左右横向拖动的不换行矩阵，色泽复刻莫兰迪高级灰紫调及饱满胶囊边框，并深度集成 `white-space: nowrap; flex-shrink: 0` 三重单行死锁护盾，彻底消除了小卡片内部文字被意外折断成三行的痛点，呈现极为规整的单行纯净文字美学；紧随其后的是完美下推落户的深色长篇品牌传记文字，自带行末高亮算法（完美拼接红粉色行内按键 `展开 ∨` / `收起 ∧`），提供分毫不差的旗舰级沉浸阅读体验；下半部货盘极其震撼地完成了从双列方块到纯白大圆角底托容器单列高定矩阵的全面飞跃，涵盖极细线排序栏、左图右文密集流与极简底端留白陈述，完美契合实机设计美学。
- 实施与最终计划完全匹配。 - 实施与最终计划完全匹配。