web开发

微商城装修说明文档

作者：LT  发表于:


微商城装修逻辑稍显复杂，这里将部分逻辑整理成文档，以便以后查询修改。

相关文件

PC管理平台

模板列表页
decoration_main.vm
decoration_main.js
模板预览模块
mod_decorationMods.vm
mod_decorationMods.js

模板编辑页
decoration_edit.vm
decoration_edit.js
模板编辑模块
m_decoration.js
mod_decoration.vm

移动端

getStoreHomePage.vm
getStoreHomePage.js

模板类型

  • 默认模板 ：所有门店在没有设置模板的情况下使用默认模板
  • 自定义装修：门店自己的装修模板，编辑门店自定义的装修模板，不会影响到其它门店，属于门店唯一
  • 装修模板：商户可以新建模板，保存时都将保存为标准模板，标准模板可以供商户下所有门店或部分门店使用

每个商户有自己的模板仓库，可以添加/编辑/删除模板

业务逻辑

  1. 每个门店有一个商户提供的默认模板和一个自定义模板
  2. 门店只能编辑自定义模板或选择商户模板库中的装修模板
  3. 商户可批量设置门店的商城模板
  4. 商户可修改默认模板和装修模板

装修逻辑

所有模块

1
2
3
4
5
6
7
8
9
10
11
12
13
m1000：搜索
m1001：轮播广告
m1002：通栏广告
m1003：两栏广告
m1004：商品推荐
m1005：文本
m1006：活动导航
m1007：品牌导航
m1008：自定义区域
m1009：品类导航
m1010：自定义分类导航
m1011：店招
m1012：店铺信息

模板装修提交的数据内容

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
[
'm1001':{
	imgHeight:320,
	imgs:[],
	mid:'1001', //模块ID
	orderNumer:1, //模块排序值
},
'm1002':{
	imgUrl:'https://qncdn.qiakr.com/qk_v3/fullcolumn.png',
	linkType:'',
	linkInfo:{url:'', id:''}, //只有当linkType=0或10时，才存储url
	orderNumber:2,
	mid:'m1002'
},
version: 20 //当前模板的版本
]

orderNumber 会在提交时，根据模块的位置自动生成
version 在用户保存时，自增1，用于记录模板编辑次数，也可以视为模板版本

交互逻辑

创建新模块

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
0. 拖拽停止时设置拖拽标识为true
1. 刷新模块排序值，更新装修配置信息
2. 判断是否为拖动创建模块触发（可能是内部拖动排序触发）
	是：
		获取模块原始id
		找到拖动到手机区域的模块
		生成新的模块id 随机
		根据原始id找到渲染模板和模板默认数据 渲染到预览区，替换刚刚拖动过来的模块图片
		隐藏模块遮罩 显示整体遮罩 当前模块隐藏收起和编辑按钮
	不是：
		提示模块顺序发生了变化，请注意保存！
3. 如果是商品推荐模块
	是：
		将品牌信息 和 分类信息添加到商品推荐模块的配置数据中
4. 显示编辑模块，传递id，配置，编辑模板的名称
	获取编辑界面id
	获取编辑界面的DOM，检查是否存在
		是：
			使用新的DOM替换以前的DOM
		不是：
			根据 模板名称 和 数据 渲染至编辑窗口中
		初始化编辑界面的组件
			根据模块原始id初始化相应界面的组件
5. 将是否为拖拽标识设置为false

取消编辑

1
2
3
4
5
6
7
8
1. 获取编辑界面id
2. 判断是否保存过，如果没有则移除，如果有，则隐藏
	没有：
		隐藏整体遮罩 显示模块遮罩 当前模块显示收起和编辑按钮
		移除相关的编辑界面和预览中的模块
	有：
		隐藏整体遮罩 显示模块遮罩 当前模块显示收起和编辑按钮
3. 隐藏编辑界面

点击编辑

1
2
3
1. 获取模块ID、编辑模板、数据
2. 显示编辑界面
3. 隐藏模块遮罩 显示整体遮罩 当前模块隐藏收起和编辑按钮

删除

1
2
3
4
5
6
7
8
9
10
1.获取模块ID、编辑模板、数据
2.提示 是否确定删除
3.删了装修配置中的数据
4.异步更新到后端
	成功：
		删除预览中的模块
		隐藏整体遮罩 显示模块遮罩
		判断是否没有模块了，没有则显示 提示模块
	失败：
		显示报错信息

预览和发布

店铺预览和店铺实际的商城首页为同一个地址
预览时，地址中有template参数，界面所有链接不可点击

移动端界面渲染

文件位置

mall/getStoreHomePage.vm
js/mall/getStoreHomePage.js

模板数据加载

为了减少页面的加载时间，装修数据、门店信息、品牌、分类等初始数据由后端注入在模板页面中返回，由全局变量 PAGE_CONF 中获取

页面加载完成后，直接调用 renderConfig 方法渲染页面
renderConfg 中判断如果有自定义配置则使用自定义配置，如果没有则使用默认配置 (默认配置在当前页面中)

模板渲染

循环配置数据，由模块ID，到模块配置 MODULES 中，查找到页面中的编辑模板，由artTemplate 渲染到页面。

商品列表渲染

  • 已知数量的商品列表：直接根据选择的商品ID，异步加载渲染
  • 未知数量的商品列表：将商品加载信息放入一个队列 PRO_LIST

加载触发

第一次渲染完成后，检测页面是否有滚动条，如果没有，则触发一次加载，如果有数据返回则停止加载，监听滚动事件，如果没有，则继续加载一下个请求，直到加载到数据。当最后队列中请求信息为空时，隐藏 loading 显示 查看所有商品 链接，刷新滚动组件。

需求修改示例

需求1：为商品列表模块添加一个按自定义分类展示的功能

  1. 到 mod_decoration.vm 中修改模板内容，添加编辑项，搜索 m1004 找到商品模块编辑模板
  2. m_decoration.js中添加数据groupData 至模板
  3. m_decoration.js中添加保存模块时的取值操作 previewEv
  4. 查看保存数据，预览界面是否显示正常
  5. 查看编辑是否显示正常
  6. 修改移动端 getStoreHomePage.vm & getStoreHomePage.js
  7. js 的 _render 方法、loadProList 方法、_creatProList 方法中添加对 group 的判断
  8. 查看数据返回是否正常

需求2：为商品选择框添加搜索条件，按类目和自定义分类搜索

分享到