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