Aitter's Blog

微商城装修的设计实现

前言

微商城装修是一个纯前端的交互逻辑,具有一定的复杂度,需要合理的数据结构、逻辑设计与友好的交互体验,对于设计者一个很大的考验。


编辑
工作间




选择模板



门店装修效果




设计

数据结构设计

数据结构的设计必须考虑到业务需求的多样性,要易于扩展,方便修改,便于存储与解析。
这里我采用JSON对象的形式,每个模块为一个JSON对象,键名为模块的ID,键值为模块的配置,易于解析。
每个模块携带一个排序值方便调整模块的显示顺序。
整个配置携带一个version字段,以记录用户的编辑次数,和该配置的版本。

{
'm1000':{},
'm1011':{},
'm1012':{},
'm1004':{},
'version':10
}

交互设计

通过拖动生成预览的交互,可以让用户方便的添加模块,调整模块的位置。
始终保持一个唯一激活的界面展现给用户操作,以提升操作流程的专注性,潜移默化的引导用户进行下一步操作。

业务逻辑

模板类型

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

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

模板编辑

商户可以编辑模板库里的模板和默认模板,将影响所有使用该模板的店铺
门店只能编辑自已的自定义装修模板

模板预览

获取模板列表后,根据模板配置分页生预览界面。
对于指定门店,预览内容中的店铺信息由店铺ID取得,并获取该店铺下的商品列表
商户编辑模板(没有指定门店),预览时使用默认门店信息进行预览

模块

所有模块

m1000:搜索 | m1001:轮播广告 | m1002:通栏广告 | m1003:两栏广告 | m1004:商品推荐
m1005:文本 | m1006:活动导航 | m1007:品牌导航 | m1008:自定义区域 | m1009:品类导航
m1010:自定义分类导航 | m1011:店招 | m1012:店铺信息

默认配置

/**
* [DEF_CONF 默认配置]
* m1000 搜索
* m1011 店招
* m1012 店铺信息
* m1004 商品推荐 自动
*/
DEF_CONF={
'm1000':{},
'm1011':{},
'm1012':{},
'm1004':{}
}
/**
* [RES_CONF 最终保存的配置]
*/
RES_CONF={}

交互逻辑

拖拽模块至预览区,释放生成新的模块,并显示编辑项
保存编辑项,更新内容至预览区域

创建新模块

  1. 拖拽停止时设置拖拽标识为true

  2. 刷新模块排序值,更新装修配置信息

  3. 判断是否为拖动创建模块触发(可能是内部拖动排序触发)
    是:

    获取模块原始id
    找到拖动到手机区域的模块
    生成新的模块id 随机
    根据原始id找到渲染模板和模板默认数据 渲染到预览区,替换刚刚拖动过来的模块图片
    隐藏模块遮罩 显示整体遮罩 当前模块隐藏收起和编辑按钮
    

    不是:

    提示模块顺序发生了变化,请注意保存!
    
  4. 如果是商品推荐模块
    是:

    将品牌信息 和 分类信息添加到商品推荐模块的配置数据中
    
  5. 显示编辑模块,传递id,配置,编辑模板的名称
    获取编辑界面id
    获取编辑界面的DOM,检查是否存在

    是:
        使用新的DOM替换以前的DOM
    
    不是:
        根据 模板名称 和 数据 渲染至编辑窗口中
    
    初始化编辑界面的组件
        根据模块原始id初始化相应界面的组件
    
  6. 将是否为拖拽标识设置为false

取消编辑

获取编辑界面id
判断是否保存过,如果没有则移除,如果有,则隐藏
    没有:
        隐藏整体遮罩 显示模块遮罩 当前模块显示收起和编辑按钮
        移除相关的编辑界面和预览中的模块
    有:
        隐藏整体遮罩 显示模块遮罩 当前模块显示收起和编辑按钮
    隐藏编辑界面

点击编辑

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

删除

获取模块ID、编辑模板、数据
提示 是否确定删除
删了装修配置中的数据
异步更新到后端
    成功:
        删除预览中的模块
        隐藏整体遮罩 显示模块遮罩
        判断是否没有模块了,没有则显示 提示模块
    失败:
        显示报错信息

门店装修效果