前言
微商城装修是一个纯前端的交互逻辑，具有一定的复杂度，需要合理的数据结构、逻辑设计与友好的交互体验，对于设计者一个很大的考验。
设计
数据结构设计
数据结构的设计必须考虑到业务需求的多样性，要易于扩展，方便修改，便于存储与解析。
这里我采用JSON对象的形式，每个模块为一个JSON对象，键名为模块的ID，键值为模块的配置，易于解析。
每个模块携带一个排序值方便调整模块的显示顺序。
整个配置携带一个version字段，以记录用户的编辑次数，和该配置的版本。
{ |
交互设计
通过拖动生成预览的交互，可以让用户方便的添加模块，调整模块的位置。
始终保持一个唯一激活的界面展现给用户操作，以提升操作流程的专注性，潜移默化的引导用户进行下一步操作。
业务逻辑
模板类型
默认模板
所有门店在没有设置模板的情况下使用默认模板
自定义装修
门店自己的装修模板，编辑门店自定义的装修模板，不会影响到其它门店，属于门店唯一
标准模板
商户可以新建模板，保存时都将保存为标准模板，标准模板可以供商户下所有门店或部分门店使用
每个商户有自己的模板仓库，可以添加/编辑/删除模板
模板编辑
商户可以编辑模板库里的模板和默认模板，将影响所有使用该模板的店铺
门店只能编辑自已的自定义装修模板
模板预览
获取模板列表后，根据模板配置分页生预览界面。
对于指定门店，预览内容中的店铺信息由店铺ID取得，并获取该店铺下的商品列表
商户编辑模板(没有指定门店)，预览时使用默认门店信息进行预览
模块
所有模块
m1000：搜索 | m1001：轮播广告 | m1002：通栏广告 | m1003：两栏广告 | m1004：商品推荐 |
默认配置
/** |
交互逻辑
拖拽模块至预览区，释放生成新的模块，并显示编辑项
保存编辑项，更新内容至预览区域
创建新模块
拖拽停止时设置拖拽标识为true
刷新模块排序值，更新装修配置信息
判断是否为拖动创建模块触发（可能是内部拖动排序触发）
是：获取模块原始id 找到拖动到手机区域的模块 生成新的模块id 随机 根据原始id找到渲染模板和模板默认数据 渲染到预览区，替换刚刚拖动过来的模块图片 隐藏模块遮罩 显示整体遮罩 当前模块隐藏收起和编辑按钮不是：
提示模块顺序发生了变化，请注意保存！如果是商品推荐模块
是：将品牌信息 和 分类信息添加到商品推荐模块的配置数据中显示编辑模块，传递id，配置，编辑模板的名称
获取编辑界面id
获取编辑界面的DOM，检查是否存在是： 使用新的DOM替换以前的DOM 不是： 根据 模板名称 和 数据 渲染至编辑窗口中 初始化编辑界面的组件 根据模块原始id初始化相应界面的组件将是否为拖拽标识设置为false
取消编辑
获取编辑界面id
判断是否保存过，如果没有则移除，如果有，则隐藏
没有：
隐藏整体遮罩 显示模块遮罩 当前模块显示收起和编辑按钮
移除相关的编辑界面和预览中的模块
有：
隐藏整体遮罩 显示模块遮罩 当前模块显示收起和编辑按钮
隐藏编辑界面
点击编辑
获取模块ID、编辑模板、数据
显示编辑界面
隐藏模块遮罩 显示整体遮罩 当前模块隐藏收起和编辑按钮
删除
获取模块ID、编辑模板、数据
提示 是否确定删除
删了装修配置中的数据
异步更新到后端
成功：
删除预览中的模块
隐藏整体遮罩 显示模块遮罩
判断是否没有模块了，没有则显示 提示模块
失败：
显示报错信息
门店装修效果
