立项背景和目标: 为卡洛林软木建材品牌打造全渠道数字化营销平台,实现地面软木、墙面
软木、淋浴软木等多系列产品的沉浸式展示,通过案例分享提升品牌影响力和客户转化率。
采用前后端分离架构,支持管理端统一维护、移动端多平台发布(微信小程序、H5、App),
实现内容一次编辑、多端同步。
核心功能模块:
移动端:①首页全屏品牌视频 ②产品中心(5大系列轮播+颜色分类筛选+全局搜索)
③案例中心(两级分类+瀑布流展示) ④展厅管理(视频介绍+图片详情) ⑤品牌页面
管理后台:产品/案例/展厅CRUD、系列颜色管理、应用配置(视频/轮播图/分享标题)、基
于Casbin的权限管理
业务流程: 用户首页观看视频→进入产品中心滑动轮播选择系列→点击子系列进入列表页→通
过颜色Tab筛选产品→查看产品详情;管理员后台新建产品→配置系列颜色信息→上传图片→设置
上架状态→实时同步移动端展示。
整体架构: 三层架构,后端GoFrame v2.9.4(DDD分层+Casbin
RBAC+JWT+MySQL+Redis),管理端Vue3+Naive
UI+Vite,移动端UniApp+Vue3+UnoCSS+alova,支持H5/小程序/App多端编译。
负责模块与成果: 独立完成移动端全栈开发,包括5个核心页面+10个子页面+3个公共组件+2
0+API集成。通过并发请求优化将产品列表加载时间从3.2秒降至1.1秒(提升65%);实现空
分类自动过滤,将Tab加载从5秒优化至1.2秒(提升76%);解决iOS滚动冲突,页面帧率稳定
60fps;配置差异化分享标题,转化率提升25%。
核心难点解决:
①双列布局异常:UnoCSS工具类在scroll-view中不生效,改用内联样式width:50%+box-sizin
g:border-box+负margin方案解决
②分类预过滤白屏:串行请求改为Promise.all并发,加载提速76%
③滚动穿透问题:采用禁用原生滚动+单一scroll-view接管+bounces=false方案,彻底解决iOS橡皮筋回弹和嵌套滚动冲突