From 3a981b04abca9135fd4558d07c4acddb721cf0dd Mon Sep 17 00:00:00 2001 From: "1173117610@qq.com" Date: Tue, 12 May 2026 17:58:27 +0800 Subject: [PATCH] 111 --- pages/special-sale/choicen.vue | 128 ++++++++++++++++++++++++++++----- task.md | 22 +++++- 2 files changed, 130 insertions(+), 20 deletions(-) diff --git a/pages/special-sale/choicen.vue b/pages/special-sale/choicen.vue index 5b1269b..ece3caa 100644 --- a/pages/special-sale/choicen.vue +++ b/pages/special-sale/choicen.vue @@ -43,7 +43,7 @@ - + @@ -56,6 +56,12 @@ + + + + 已为您加载完毕 + + @@ -167,7 +173,7 @@ topPage: 1, topLoading: false, topFinished: false, - // 新增：当前激活选中的类目 ID + // 当前激活选中的类目 ID activeCatId: 0, // 默认分类导航高保真死数据底座 categoryList: [ @@ -375,15 +381,24 @@ icon: 'none' }); }, - // 点击分类维度同步过滤/拉取数据 + // 改造多路分发状态机：切换即刻原子级清空数据源，阻断旧列表遗留展示 onSelectCategory(catId) { if (this.activeCatId === catId) return; this.activeCatId = catId; - console.log('精选品牌切换导航类目，激活ID:', catId); + console.log('精选品牌切换导航类目分流，激活ID:', catId); + + // 核心修复：立刻原子级清空专场数据源，避免“上一个有下一个没有时残留展示上一个” + this.brandList = []; - // 联动触发加载动画及列表重构 uni.showLoading({ title: '加载中...', mask: true }); - this.fetchChoicenessData(); + + if (catId === 0) { + // 走精选通用专供数据源 + this.fetchChoicenessData(); + } else { + // 走类目专属接口引擎 + this.fetchBrandCategoryData(catId); + } setTimeout(() => { uni.hideLoading(); @@ -449,28 +464,22 @@ } }); }, - // 新增：改造专场接口，附加分类参数及头部字典提取 + // 全量通用专场初始化及导航字典挂载 fetchChoicenessData() { - let url = 'https://api.cmspro.haodanku.com/brandItem/choiceness?is_get_category=1&cid=YsWZ21tx'; - if (this.activeCatId > 0) { - url += `&cat_id=${this.activeCatId}`; - } - uni.request({ - url: url, + url: 'https://api.cmspro.haodanku.com/brandItem/choiceness?is_get_category=1&cid=YsWZ21tx', success: (res) => { if (res.data && res.data.code === 200 && res.data.data) { - // 1. 动态挂载/刷新头部类目导航字典 + // 1. 挂载/补充导航字典 if (res.data.data.category && Array.isArray(res.data.data.category)) { const mappedCats = res.data.data.category.map(c => ({ cat_id: Number(c.cat_id), cat_name: c.cat_name })); - // 自动注入全景首项去重 this.categoryList = [{ cat_id: 0, cat_name: "精选" }, ...mappedCats]; } - // 2. 映射品牌店铺大卡片专场 + // 2. 挂载全景精选海报流 if (res.data.data.brand_prefecture && Array.isArray(res.data.data.brand_prefecture)) { const list = res.data.data.brand_prefecture.map(shop => { let logoStr = shop.brand_logo ? shop.brand_logo.replace('http://', 'https://') : 'https://cdn-icons-png.flaticon.com/512/882/882730.png'; @@ -506,6 +515,65 @@ } }); }, + // 接驳 brandCategory 接口分流，内置光影轮盘自动修复缺失背景。取消突兀 Toast 完美适配内嵌底座 + fetchBrandCategoryData(categoryId) { + uni.request({ + url: `https://api.cmspro.haodanku.com/brandItem/brandCategory?category_id=${categoryId}&cid=YsWZ21tx`, + success: (res) => { + if (res.data && res.data.code === 200 && res.data.data && Array.isArray(res.data.data.brands)) { + // 预置唯美光影/极简质感图库底座，智能赋能无海报的品牌 + const defaultBanners = [ + 'https://images.unsplash.com/photo-1556228720-195a672e8a03?w=800&q=80', + 'https://images.unsplash.com/photo-1590080875515-8a3a8dc5735e?w=800&q=80', + 'https://images.unsplash.com/photo-1585771724684-38269d6639fd?w=800&q=80', + 'https://images.unsplash.com/photo-1607082348824-0a96f2a4b9da?w=800&q=80', + 'https://images.unsplash.com/photo-1621939514649-280e2fc8a00w?w=800&q=80' + ]; + + const list = res.data.data.brands.map((b, bIndex) => { + let logoStr = b.brand_logo ? b.brand_logo.replace('http://', 'https://') : 'https://cdn-icons-png.flaticon.com/512/882/882730.png'; + let bgStr = defaultBanners[bIndex % defaultBanners.length]; + + // 智能提取旗下主打爆款单品名作为海报副标语 + let shopDesc = '品牌官方授权直供 · 精品热销'; + if (b.items && b.items.length > 0) { + shopDesc = b.items[0].itemshorttitle || b.items[0].itemtitle || shopDesc; + } + + return { + name: b.fq_brand_name || b.tb_brand_name || '大牌精选特卖', + desc: shopDesc, + bg: bgStr, + logo: logoStr, + tags: ['正品保障', '类目好货'], + items: (b.items || []).slice(0, 3).map(goods => ({ + id: goods.id, + img: goods.itempic ? goods.itempic.replace('http://', 'https://') : '', + title: goods.itemshorttitle || goods.itemtitle, + price: goods.itemendprice, + oldPrice: goods.itemprice || (parseFloat(goods.itemendprice) + parseFloat(goods.couponmoney || 10)).toFixed(1), + coupon: parseFloat(goods.couponmoney || 0), + sold: goods.itemsale >= 10000 ? (goods.itemsale / 10000).toFixed(1) + '万' : goods.itemsale, + badge: goods.couponmoney ? '大额券' : '直降' + })) + }; + }).filter(shop => shop.items && shop.items.length > 0); + + if (list.length > 0) { + this.brandList = list; + } else { + // 此时 this.brandList 已经初始化为 []，天然浮现“已为您加载完毕”面板 + console.log('指定分类回传品牌为空，平滑展示占位提示面板'); + } + } else { + console.log('拉取分类数据异常或格式不对'); + } + }, + fail: (err) => { + console.log('调用 brandCategory 接口失败', err); + } + }); + }, // 底部品牌热销单品聚合数据流 fetchBrandSaleData() { uni.request({ @@ -736,7 +804,7 @@ margin-top: 8rpx; } - /* 新增：横向分类选项卡导航区 */ + /* 横向分类选项卡导航区 */ .category-tabs-container { background: #ffffff; border-top-left-radius: 24rpx; @@ -794,6 +862,32 @@ overflow-y: auto; } + /* 新增：高保真空载/无数据底板展示区 */ + .empty-loaded-tip { + background-color: #f8f8fb; + border-radius: 20rpx; + margin: 20rpx 30rpx 40rpx; + padding: 60rpx 0; + display: flex; + flex-direction: column; + align-items: center; + justify-content: center; + } + + .elt-top-line { + width: 32rpx; + height: 4rpx; + background-color: #8a2be2; + border-radius: 2rpx; + margin-bottom: 24rpx; + } + + .elt-text { + font-size: 26rpx; + color: #999999; + letter-spacing: 2rpx; + } + /* 调整首图圆角拼合：上面已被导航栏圆角包裹，下方列表无缝紧随 */ .brand-card-item { background: #ffffff; diff --git a/task.md b/task.md index d9b9ca1..73766bc 100644 --- a/task.md +++ b/task.md @@ -34,7 +34,7 @@ baimacms 移动端内容导购系统（基于 uni-app / Vue 构建）。 2. **1:1 极致视觉还原**：沿用和升级首页已有的大牌主推沉浸背景、圆角白底 Logo 浮层、品牌直降文案及 1:1 方形精选商品大图带满减券胶囊的高级样式，构建连贯流畅的垂直滚动品牌大赏。 3. **新增上方品牌滚动专区**：在顶部置入高保真的深紫渐变横向滚动栏，内部卡片呈现上部白底 Logo 与下部浅粉底色文字的精装层级，配备丝滑响应的白游标自定义联动进度条，并支持触底向右无限翻页并发加载。 4. **数据双向兼容与下沉爆品生态**：预设大牌专卖与顶部滚动小卡片的双重固定底座，同时异步拉取两大真实 API 数据流实现智能覆盖替换。特别打通底部 `brandSale` 品牌热销数据源，构建高保真双列圆角商品矩阵，商品卡片底盘嵌入专属圆形品牌 Logo 与身份背书，打造连贯无缝的黄金转化流。 -5. **横向分类多维导航与智能分流引擎**：在页面横幅下方无缝嵌入带有圆角光泽衬底的横滑类目导航栏，首项预置“精选”。独创双路智能分发状态机：点击“精选”保持全量优选专供流，点击特定类目则无缝接驳 `brandCategory` 接口拉取类目专属大牌矩阵，配合“光影壁纸库”智能赋能缺失海报背图，实现视觉无损衔接。 +5. **横向分类多维导航与即时清零状态机**：在页面横幅下方无缝嵌入带有圆角光泽衬底的横滑类目导航栏。切换分类瞬间实行原子级的数据清空 `brandList = []`，阻断旧数据残留；若目标分类空载，自动激活 1:1 高精还原的空态面板（短截紫标 + “已为您加载完毕”文字），彻底统一审美层级。 5. **触发打通**：将首页“更多”按钮绑定路由跳转事件，实现闭环。 # 实施计划 (由 PLAN 模式生成) @@ -45,10 +45,12 @@ baimacms 移动端内容导购系统（基于 uni-app / Vue 构建）。 4. [更新 pages/special-sale/choicen.vue] 追加页面上方深紫渐变背景的横向品牌小卡片滚动专区，注入写死底座 20 个品牌队列，绑定滚动指示器游标联动计算，并支持向右滑动边缘触发无限翻页并发加载。 5. [更新 pages/special-sale/choicen.vue] 在页面底部置入“品牌热销爆品榜”双列高保真卡片流，实现包含商品大图、折扣价及底端圆形品牌身份条的丰富布局，同步请求真实 `brandSale` 接口实现智能覆盖。 6. [更新 pages/special-sale/choicen.vue] 在横幅区下方新增高雅横滑圆角类目导航栏，首项置入“精选”并动态解析拉回的类目数组，打通 `@click` 触发机制实现维度切换与专场列表过滤重绘。 +7. [更新 pages/special-sale/choicen.vue] 改造分类切换中心接入智能分流状态机：精选走全量接口，指定类目接驳 `brandCategory` 并内置高级莫兰迪/光影图底座填补品牌背景海报缺口，保障页面视图结构高级无损呈现。 +8. [更新 pages/special-sale/choicen.vue] 植入切换类目原子级清零机制 `brandList = []`，并在视图顶部高保真还原无数据占位板（短截紫杠 + “已为您加载完毕”莫兰迪字样），阻断脏数据污染。 5. [更新 task.md] 记录各个执行步骤完成情况与状态审核。 # 当前执行步骤 (由 EXECUTE 模式在开始执行某步骤时更新) -> 正在执行: "步骤6: [更新 pages/special-sale/choicen.vue] 追加横滑圆角类目选项卡及多维请求过滤打通" +> 正在执行: "步骤8: [更新 pages/special-sale/choicen.vue] 切换分类即时清零与空载占位板注入" # 任务进度 (由 EXECUTE 模式在每步完成后追加) * 2026-05-12T16:29:00+08:00 @@ -107,12 +109,26 @@ baimacms 移动端内容导购系统（基于 uni-app / Vue 构建）。 * 原因：满足多维度分类浏览的用户诉求 * 阻碍：无 * 用户确认状态：成功 +* 2026-05-12T17:31:00+08:00 + * 步骤：9. [按类查询专属 brandCategory 分流引擎] 实现点击非精选类目映射及背景自愈重构 + * 修改：`pages/special-sale/choicen.vue` 重塑 `onSelectCategory` 接驳 `fetchBrandCategoryData` + * 更改摘要：多路路由分控，非精选调用 brandCategory 接口，结合高精唯美静物/光影壁纸库智能映射填补海报大图缺口 + * 原因：精准对接真实的类目维度专场下发层级 + * 阻碍：无 + * 用户确认状态：成功 +* 2026-05-12T17:52:00+08:00 + * 步骤：8. [更新 pages/special-sale/choicen.vue] 切换分类即时清零与空载占位板注入 + * 修改：`pages/special-sale/choicen.vue` 调整 `onSelectCategory` 与模板视图 + * 更改摘要：在分流起点加入 `this.brandList = [];` 阻断前序类目残留，并在首层置入 1:1 还原截图的亮紫杠及“已为您加载完毕”莫兰迪灰提示卡片 + * 原因：解决上一个有下一个无时数据不更新的混淆痛点，完美提供高保真空态反馈 + * 阻碍：无 + * 状态：待确认 # 最终审查 (由 REVIEW 模式填充) - 实施与最终制定的检查清单计划 100% 严密对齐。 - 全量高定还原了精选大牌与爆款单品的 1:1 视觉 UI，在保留底部沉浸式大卡片的同时，在页面最上方精美叠加了带有深紫背景的横向品牌小卡片流（上部白底 Logo + 下部粉桃底文字）及丝滑跟随的底部游标指示条。 - 彻底解决了划到最后一个无法加载下一页数据的缺陷，集成横向 `@scrolltolower` 翻页监听和展开语法合并，天然适配游标动态宽度伸缩算法。 - 完美整合下沉接口 `brandSale`，开辟高光隔断栏目，基于双列圆角瀑布流将海量实时热卖单品进行深度高亮呈现，且底部创新植入单品级身份识别条（微型大牌Logo + 官方名字），打通了商品直接导向详情页的高效交易漏斗。 -- 无缝嵌入横向光泽圆角类目导航栏，完美贴合截图设计语言，选中项自动变成紫标粗体配底部指示横线，且动态提取首回合并字典，支持按分类多维动态过滤刷新主数据区。 +- 无缝嵌入横向光泽圆角类目导航栏，完美贴合截图设计语言，独创双路智能分发引擎：选中“精选”维持优选流；选中其他项瞬间接驳 `brandCategory`，配合“唯美壁纸轮盘自愈库”赋能海报背图，使得所有类别浏览均呈现极致连贯的尊崇感。 - 实施与最终计划完全匹配。