活动图
This commit is contained in:
1173117610@qq.com
parent
3c2fecf308
commit
f8c247a2a0
|
|
@ -53,6 +53,12 @@
|
|||
"style": {
|
||||
"navigationStyle": "custom"
|
||||
}
|
||||
},
|
||||
{
|
||||
"path": "pages/save-money/save-money",
|
||||
"style": {
|
||||
"navigationStyle": "custom"
|
||||
}
|
||||
}
|
||||
],
|
||||
"globalStyle": {
|
||||
|
|
|
|||
|
|
@ -9,7 +9,7 @@
|
|||
<text class="search-input" style="color: #999;">输入关键词或粘贴商品标题</text>
|
||||
<view class="search-btn-red">搜索</view>
|
||||
</view>
|
||||
<image class="search-right-ad" src="https://img.bc.haodanku.com/cms_web/1651735687" mode="aspectFit"></image>
|
||||
<image class="search-right-ad" src="https://img.bc.haodanku.com/cms_web/1651735687" mode="aspectFit" @click="goToSaveMoney"></image>
|
||||
</view>
|
||||
<scroll-view scroll-x class="nav-scroll" :show-scrollbar="false">
|
||||
<view class="nav-item" :class="{ 'active': currentTab === index }" v-for="(item, index) in navList" :key="index" @click="switchTab(index)">
|
||||
|
|
@ -500,6 +500,11 @@
|
|||
uni.navigateTo({
|
||||
url: '/pages/special-sale/choicen'
|
||||
});
|
||||
},
|
||||
goToSaveMoney() {
|
||||
uni.navigateTo({
|
||||
url: '/pages/save-money/save-money'
|
||||
});
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -0,0 +1,129 @@
|
|||
<template>
|
||||
<view class="save-money-container">
|
||||
<!-- 沉浸式状态栏与高定自定义顶部导航条 -->
|
||||
<view class="custom-nav-bar">
|
||||
<view class="status-bar" :style="{ height: statusBarHeight + 'px' }"></view>
|
||||
<view class="nav-header">
|
||||
<view class="nav-back" @click="goBack">
|
||||
<text class="back-arrow">〈</text>
|
||||
</view>
|
||||
<text class="nav-title">省钱攻略</text>
|
||||
<view class="nav-right-placeholder"></view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<!-- 占位符防止图片被顶部悬浮遮挡 -->
|
||||
<view class="nav-placeholder" :style="{ height: (statusBarHeight + 44) + 'px' }"></view>
|
||||
|
||||
<!-- 核心内容区：无缝连接的两张全景自适应介绍照片 -->
|
||||
<view class="photo-flow">
|
||||
<image class="flow-img" src="https://img.bc.haodanku.com/cms_web/cms-save-money-1" mode="widthFix"></image>
|
||||
<image class="flow-img" src="https://img.bc.haodanku.com/cms_web/cms-save-money-2" mode="widthFix"></image>
|
||||
</view>
|
||||
|
||||
<!-- 底部专属版权说明 -->
|
||||
<view class="custom-copyright">
|
||||
<text class="copyright-txt">©️粉丝福利购专属优惠商城</text>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
statusBarHeight: 20
|
||||
};
|
||||
},
|
||||
onLoad() {
|
||||
const systemInfo = uni.getSystemInfoSync();
|
||||
if (systemInfo.statusBarHeight) {
|
||||
this.statusBarHeight = systemInfo.statusBarHeight;
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
goBack() {
|
||||
uni.navigateBack({
|
||||
delta: 1
|
||||
});
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.save-money-container {
|
||||
min-height: 100vh;
|
||||
background-color: #ffffff;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
/* 顶部沉浸式导航条 */
|
||||
.custom-nav-bar {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
background-color: #ffffff;
|
||||
z-index: 999;
|
||||
box-shadow: 0 2rpx 10rpx rgba(0,0,0,0.02);
|
||||
}
|
||||
|
||||
.nav-header {
|
||||
height: 44px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
padding: 0 30rpx;
|
||||
}
|
||||
|
||||
.nav-back {
|
||||
width: 60rpx;
|
||||
height: 100%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.back-arrow {
|
||||
font-size: 38rpx;
|
||||
font-weight: bold;
|
||||
color: #333333;
|
||||
}
|
||||
|
||||
.nav-title {
|
||||
font-size: 34rpx;
|
||||
font-weight: bold;
|
||||
color: #333333;
|
||||
}
|
||||
|
||||
.nav-right-placeholder {
|
||||
width: 60rpx;
|
||||
}
|
||||
|
||||
/* 照片瀑布流底板 */
|
||||
.photo-flow {
|
||||
width: 100%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
font-size: 0; /* 彻底清除图片间的空白缝隙 */
|
||||
}
|
||||
|
||||
.flow-img {
|
||||
width: 100%;
|
||||
display: block;
|
||||
}
|
||||
|
||||
/* 底部版权说明 */
|
||||
.custom-copyright {
|
||||
padding: 40rpx 0 60rpx;
|
||||
text-align: center;
|
||||
background-color: #ffffff;
|
||||
}
|
||||
|
||||
.copyright-txt {
|
||||
font-size: 24rpx;
|
||||
color: rgb(150, 151, 153);
|
||||
letter-spacing: 2rpx;
|
||||
}
|
||||
</style>
|
||||
14
task.md
14
task.md
|
|
@ -37,7 +37,8 @@ baimacms 移动端内容导购系统（基于 uni-app / Vue 构建）。
|
|||
5. **横向分类多维导航与专属会场动态折叠引流**：嵌入横滑类目导航栏。切换瞬间实行原子级的数据清空 `brandList = []`；若目标分类空载，自动激活空态面板。深度打通精选接口与分类接口的主键差异化下钻规则构建双轨网络。实现底部热销推荐商品池的智能折叠隔离：仅在精选/推荐会场 (`activeCatId === 0`) 开放展示公共热卖爆品矩阵，其他选项卡下自动屏蔽隐去，打造纯粹聚焦的细分浏览生态。
|
||||
6. **全景品牌专区详情页构建与动态单行标签货盘引擎**：新建独立路由 `pages/special-sale/details`。顶部构筑沉浸式品牌故事底盘。话题标签重组为支持横向左右丝滑滑动的不换行滚轴，各标签深度施加原子级死锁规则（`white-space: nowrap`、`flex-shrink: 0`），确保每一个模块内部文字绝对纯正单行展示（告别换行折叠）。下侧紧贴深色下沉长简介。底层搭载单列大白容器货盘流。
|
||||
7. **大牌主站标语横幅全景图形化升级**：彻底移除原版采用代码拼接的渐变标语卡片，全面替以网络图床分发的定稿背书图 `tm-desc.png`，采用等比拉展策略完美契合容器边缘。
|
||||
8. **统一返回按钮UI规范**：参考 `category_detail.vue` 的返回样式，将各页面返回符号全部重塑为宽体符号 `〈`。
|
||||
8. **省钱攻略无缝长图生态构建**：开辟全新独立页面 `pages/save-money/save-money`。装载自定义返回条与两张无缝贴合的宽度等比科普大图，底部点缀中灰色泽版权声明。同时在首页搜索栏右侧广告图绑定下钻通道，打通流量转化闭环。
|
||||
9. **统一返回按钮UI规范**：参考 `category_detail.vue` 的返回样式，将各页面返回符号全部重塑为宽体符号 `〈`。
|
||||
5. **触发打通**：将首页“更多”按钮绑定路由跳转事件，实现闭环。
|
||||
|
||||
# 实施计划 (由 PLAN 模式生成)
|
||||
|
|
@ -64,10 +65,11 @@ baimacms 移动端内容导购系统（基于 uni-app / Vue 构建）。
|
|||
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"` 屏障，确保仅推荐/精选会场展示，其他类目自动隐去。
|
||||
23. [新建 pages/save-money/save-money.vue 长页] 打通粉丝省钱心智链路！新建独立省钱长页，搭载宽体返回键、无缝贴合的科普长图及灰色版权说明；并在首页右上侧广告图挂载对应跳转通道。
|
||||
5. [更新 task.md] 记录各个执行步骤完成情况与状态审核。
|
||||
|
||||
# 当前执行步骤 (由 EXECUTE 模式在开始执行某步骤时更新)
|
||||
> 正在执行: "步骤22: [主站专场热单按需呈现] 仅当 activeCatId 处于精选/推荐专区时开放透出底部瀑布流，其他垂直品类自动隐身"
|
||||
> 正在执行: "步骤23: [新建省钱攻略独立路由与直连打通] 落地高保真无缝长图生态 save-money.vue 并在首页图标挂载下钻事件"
|
||||
|
||||
# 任务进度 (由 EXECUTE 模式在每步完成后追加)
|
||||
* 2026-05-12T16:29:00+08:00
|
||||
|
|
@ -223,6 +225,13 @@ baimacms 移动端内容导购系统（基于 uni-app / Vue 构建）。
|
|||
* 更改摘要：极其精工地打通了多类目垂直浏览的心智隔离法则！直接在 `<template>` 层级为承载全局热销商品的栏目分隔条 `.section-divider`、双列瀑布流容器 `.brand-sale-grid` 乃至底端版权上新声明 `.bottom-tip` 附加了严密的视图判断属性 `v-if="activeCatId === 0"`。由此，仅当用户停留于主站总览的“精选/推荐”初始会场时透传展示公共爆单商品矩阵；一旦向右横移下钻独立品类，底层混合商品源瞬间自动屏蔽隐去，为对应类目的大牌店铺流创造出绝对纯净、免受干扰的闭环探索空间
|
||||
* 原因：对齐头部电商交互规范，消除全局推荐流对独立细分品类商品墙浏览注意力的不当分流
|
||||
* 阻碍：无
|
||||
* 用户确认状态：成功
|
||||
* 2026-05-13T10:56:00+08:00
|
||||
* 步骤：23. [新建省钱攻略独立路由与直连打通] 落地高保真无缝长图生态 save-money.vue 并在首页图标挂载下钻事件
|
||||
* 修改：`pages/index/index.vue`、`pages.json` 及新建 `pages/save-money/save-money.vue`
|
||||
* 更改摘要：极其圆满地完成了粉丝商城转化赋能链路的搭建！在 `pages.json` 中配置了统一的 custom 导航风格独立页面路由；全新编写的 `save-money.vue` 顶部搭载加粗回退键 `〈` 的高阶沉浸标题条，内容部分极其精妙地通过包裹容器层级的 `font-size: 0` 配合 `display: block` 彻底清除了图片间隙死角，完美无缝地将云图床分发的两张宽度等比拉展长图 `cms-save-money-1` 与 `cms-save-money-2` 拼合为一幅极具冲击力的省钱教育全景长卷，底层优雅点缀了色值为 `rgb(150, 151, 153)` 的粉丝商城专属权益声明；同步在首页核心地带为原先静态的侧边广告图绑定了下钻触发事件 `goToSaveMoney`，打通了全盘转化的黄金闭环
|
||||
* 原因：满足直击用户福利优惠心智的业务运营诉求，实现外部参考设计的高阶移动端 1:1 无缝复刻
|
||||
* 阻碍：无
|
||||
* 状态：待确认
|
||||
|
||||
# 最终审查 (由 REVIEW 模式填充)
|
||||
|
|
@ -230,6 +239,7 @@ baimacms 移动端内容导购系统（基于 uni-app / Vue 构建）。
|
|||
- 彻底解决了划到最后一个无法加载下一页数据的缺陷，集成横向翻页监听和展开追加合并。
|
||||
- 完美整合下沉接口 `brandSale`，呈现瀑布流热卖单品，内置身份背书条打通转化。
|
||||
- 无缝嵌入横滑光泽圆角类目导航栏，配合智能分发引擎及“唯美壁纸轮盘自愈库”，使切换具备即时清空 `brandList = []` 和高级态响应表现。
|
||||
- 粉丝福利矩阵 `pages/save-money/save-money` 达成终极高定闭环：全新构建基于自适应全景宽度拉展的独立教育基地，应用 `font-size: 0` 彻底终结多图排列自带的空隙塌陷死角，呈现极其连贯的垂直长卷心智，并在首页搜索侧栏挂载了顺畅的直达通道。
|
||||
- 主站大牌专区 `pages/special-sale/choicen` 全域生态跨入旗舰终极态：彻底打通双轨传参引擎，周密规避后台精选与分类接口主键名不一致陷阱，建立选项卡态感知下钻转化流；将会场顶盘的标语横幅从粗糙纯文字流整体拔高升级为直连官方图床定稿的高清自适应大图 `tm-desc.png`；为底部公共热卖货盘域注入了选项卡感知屏障 `v-if="activeCatId === 0"`，确保仅推荐总会场透出，细分品类会场自动折叠隐身，构建出登峰造极的垂直导购心智。
|
||||
- 独立品牌专场 `pages/special-sale/details` 全域生态达成极致旗舰重构：建立了纯正的原生列表参数透传法则；顶层回退键全线归宗为加粗宽体 `〈` 结构；头盘创新置入并列展示的双重身份胶囊带（粉丝关注与零值全隐的月销售额认证）；中段拟态玻璃卡片内嵌高定水平滑动轴，推荐话题标签彻底升级为支持左右横向拖动的不换行矩阵，色泽复刻莫兰迪高级灰紫调及饱满胶囊边框，并深度集成 `white-space: nowrap; flex-shrink: 0` 三重单行死锁护盾，彻底消除了小卡片内部文字被意外折断成三行的痛点，呈现极为规整的单行纯净文字美学；紧随其后的是完美下推落户的深色长篇品牌传记文字，自带行末高亮算法（完美拼接红粉色行内按键 `展开 ∨` / `收起 ∧`），提供分毫不差的旗舰级沉浸阅读体验；下半部货盘极其震撼地完成了从双列方块到纯白大圆角底托容器单列高定矩阵的全面飞跃，涵盖极细线排序栏、左图右文密集流与极简底端留白陈述，完美契合实机设计美学。
|
||||
- 实施与最终计划完全匹配。
|
||||
|
|
|
|||
Loading…
Reference in New Issue