店铺装修流程

店铺模块化

数据库表:

后台表

-- 店铺与模板信息表
CREATE TABLE decorator_template (
    id int(11) NOT NULL AUTO_INCREMENT,
    name varchar(255) NOT NULL DEFAULT '' COMMENT '店铺模板名称',
    creator varchar(255) NOT NULL DEFAULT '' COMMENT '店铺模板创建人信息',
    scope tinyint(4) NOT NULL DEFAULT '0' COMMENT '店铺模板作用域，0：系统模板，1：店铺模板',
    create_time int(11) NOT NULL DEFAULT '0' COMMENT '模板创建时间，为0不展示',
    shop_id int(11) NOT NULL DEFAULT '0' COMMENT '模板归属店铺ID，系统模板为0',
    platform tinyint(4) NOT NULL DEFAULT '0' COMMENT '模板所属平台，0：有货PC，1：有货APP，2：BLK-PC，3：BLK-APP',
    status tinyint(4) NOT NULL DEFAULT '0' COMMENT '模板状态，0: 暂存，1：发布，系统模板为0',
    type tinyint(4) NOT NULL DEFAULT '0' COMMENT '模板类型，0：基础模板，1：经典模板，2：红人店铺',
    PRIMARY KEY(id)
);
-- 装修模板与模块关联关系表
CREATE TABLE decorator_template_module (
    id int(11) NOT NULL AUTO_INCREMENT,
    template_id int(11) NOT NULL DEFAULT '0' COMMENT '装修模板标识',
    module_id int(11) NOT NULL DEFAULT '0' COMMENT '装修模块标识',
    module_style tinyint(4) NOT NULL DEFAULT '0' COMMENT '模块展示区域，0: 1150, 1: 975, 2: 160。APP端均为0',
    module_type varchar(64) NOT NULL DEFAULT '' COMMENT '模块类型，店招、导航...',
    module_data varchar(255) NOT NULL DEFAULT '[]' COMMENT '店铺装修数据',
    module_order int(11) NOT NULL DEFAULT '0' COMMENT '模块间展示顺序，按照从小到大依次展示',
    PRIMARY KEY(id)
);
-- 装修模块表
CREATE TABLE decorator_module (
    id int(11) NOT NULL AUTO_INCREMENT,
    name varchar(64) NOT NULL DEFAULT '' COMMENT '模块名称';
    platform tinyint(4) NOT NULL DEFAULT '0' COMMENT '模块所属平台，0: 有货PC，1：有货APP，2：BLK-PC，3：BLK-APP',
    style tinyint(4) NOT NULL DEFAULT '0' COMMENT '模块所属区域，0:1150， 1:975， 2:160。APP端的均为0',
    description varchar(255) NOT NULL DEFAULT '' COMMENT '模块描述信息',
    type varchar(64) NOT NULL DEFAULT '' COMMENT '模块类型，店招、导航...',
    pic varchar(64) NOT NULL DEFAULT '' COMMENT '模块的默认展示图片',
    PRIMARY KEY(id)
);

前台表

-- 店铺与装修模板关系表
CREATE TABLE decorator_template (
    shop_id int(11) NOT NULL DEFAULT '0' COMMENT '店铺标识',
    template_id int(11) NOT NULL DEFAULT '0' COMMENT '装修模板标识',
    publish_time int(11) NOT NULL DEFAULT '0' COMMENT '装修模板发布时间',
    platform tinyint(4) NOT NULL DEFAULT '0' COMMENT '模板所属平台，0：有货PC，1：有货APP，2：BLK-PC，3：BLK-APP',
    type tinyint(4) NOT NULL DEFAULT '0' COMMENT '模板类型，0：基础模板，1：经典模板，2：红人店铺',
    PRIMARY KEY(shop_id, template_id)
);
-- 店铺模板装修数据表
CREATE TABLE decorator_template_module (
    id int(11) NOT NULL AUTO_INCREMENT,
    template_id int(11) NOT NULL DEFAULT '0' COMMENT '装修模板标识',
    module_id int(11) NOT NULL DEFAULT '0' COMMENT '装修模块标识',
    module_style tinyint(4) NOT NULL DEFAULT '0' COMMENT '模块展示区域，0: 1150, 1: 975, 2: 160。APP端均为0',
    module_type varchar(64) NOT NULL DEFAULT '' COMMENT '模块类型，店招、导航...',
    module_data varchar(255) NOT NULL DEFAULT '[]' COMMENT '店铺装修数据',
    module_order int(11) NOT NULL DEFAULT '0' COMMENT '模块间展示顺序，按照从小到大依次展示',
    PRIMARY KEY(id)
);

操作流程梳理

数据预置

模块信息录入

首先，向数据库表decorator_module中录入所有支持的模块信息:

• 店招，图片上传尺寸为750*234，展示效果尺寸为375*117；
• 单图模块，限制上传一张图片，图片上传尺寸为750*x，展示效果尺寸为375*x；
• 双图模块，限制上传两张图片，图片并列展示，图片上传尺寸为375*375，展示效果为187*375；
• 轮播图，最多上传五张图片，图片上传尺寸为660*358；
• 三张图模块，限制上传三张图
• 标题模块
• 商品列表，只展示商品列表默认图片，数据由前端实时获取。

比如店招模块，数据如下:

系统模板录入

其次，向数据库表中录入默认的系统模板:

• 基础模板
• 经典模板
• 红人店铺

暂时只支持红人店铺。

• 向表decorator_template中录入店铺装修模板基本信息，例如:

• 向表decorator_template_module中录入店铺装修模板与模块之间的关联关系，包括了系统模板中默认包含了哪些模块，例如:

• 向表decorator_module_data表中录入店铺模块装修内容信息，系统模板中是只包含了基本的模块信息，例如APP端只包含了店招模块，而且是没有任何装修信息的。这里的模块的装修内容是模块的默认展示图片。例如:

装修流程

页面初始化

默认情况下，店铺下是不包含任何自备份的模板的，所有刚开始加载的时候，只会有系统模板。

在进行APP端装修时，默认展示系统模板中的红人店铺的默认内容，只包含店招模块，如下：

页面加载

• 首先，根据平台信息(有货、BLK)，及客户端类型(APP、PC)，从decorator_template表中筛选出系统模板列表(通过platform、scope字段)；再结合店铺信息，筛选出自备份模板列表(通过platform、scope、shop_id字段)。
• 默认模板的选择：首先，如果有自备份模板，根据其create_time进行排序，选择最新的；如果没有自备份模板，选择系统模板中的红人店铺。
• 根据选择的店铺模板标识，查询店铺装修内容，渲染页面。
• 同时，根据platform字段，查询模块信息列表，异步Ajax。
• 在渲染页面时，需要注意根据module_type来确认模块支持的动作。PC端，默认包含店招、导航栏、商品分类列表、商品列表；其中店招、导航栏可编辑，但不可删除、移动；商品分类列表不支持任何行为；商品列表可删除。APP端，默认包含店招(其中囊括导航栏)，可编辑。
• 增加模块逻辑确认。是每个模块下都可以有"添加模块"，还是只有最下方的模块才有？"店招"和"导航栏"是不是没有？
• 系统模块中封装了默认的图片数据，默认情况下，就是根据模块的展示样式，展示默认的数据。比如三张图，就直接展示三张默认图片。在编辑保存后，直接替换成编辑后的数据即可。
• 模板中所有模块维护在数组中，在上下移动模块时，只需要调整数组中元素顺序，重新渲染页面即可。在暂存时，再根据数组中的顺序，生成order字段的值。
• 暂存操作，会根据现有模块中的数据，重新生成一个新的模板，数据保存在后头表中。
• 发布操作，先执行暂存逻辑，再将新生成的模板状态置为发布。同时，将数据更新至前台表(异步)，前台表中最多只有一条装修数据。
• 在暂存动作完成后，检查自备份模板个数是否超过上限，如果是，根据其中的中的create_time进行排序，将最早创建的模板及装修数据移除(只处理暂存状态的模板)，异步操作。

模块数据结构

• APP端

  1. 店招：一张图片 {"pic": ""}
  2. 轮播图: 多张图片 [{"pic": "", "linkType": "", "resource": ""}]
  3. 单图模块: 一张图 {"pic", "", "linkType": "", "resource": ""}
  4. 双图模块: 两张图+控制样式 {"properties": {"style": ""}, "data": [{"pic": "", "linkType": "", "resource": ""}]}
  5. 三图模块：三张图+控制样式 {"properties": {"style": ""}, "data": [{"pic": "", "linkType": "", "resource": ""}]}
  6. 视频模块：视频类型+视频源 {"properties": {"style": ""}, "data": [{"resource": ""}]}
  7. 标题模块：标题内容+跳转 {"text": "", "linkType": "", "resource": ""}
  8. 商品列表: 通过模块类型指定，不包含装修内容

• PC端

  1. 店招模块: 两张图 [{"pic": "", "type": ""}]
  2. 导航模块: 标题+跳转 [{"text": "", "linkType": "", "resource": ""}]
  3. 自动商品分类：通过模块类型指定，不包含装修内容
  4. 手工图文展示: {"properties": {"style": ""}, "data": [{"pic": "", "text": "", "linkType": "", "resource": ""}]}
  5. 自动图文展示： {"properties": {"style": ""}, "data": ["", ""]}
  6. 手工图片展示：分成 轮播图、四张图、大图
     6.1 轮播图: 轮播图列表 + 两张小图 [{"pic": "", "linkType": "", "resource": "", "type": ""}]
     6.2 四张图: [{"pic": "", "linkType": "", "resource": ""}]
     6.3 大图：多张的话，展示轮播 [{"pic": "", "linkType": "", "resource": ""}]
  7. 商品展示模块： 分成 商品列表模块 + 人气商品模块
     7.1 商品列表： 通过模块类型指定，不包含装修内容
     7.2 人气商品： 通过模块类型指定，不包含装修内容
  8. 标题模块： 标题内容+跳转 {"text": "", "linkType": "", "resource": ""}

原店铺装修数据

platform: 平台类型， string,
templateType: 启用的模板类型, string, 1--基础模板，2--经典模板
appType: 0--有货装修，1--BLK装修

• shops_decorator表：

• shops_decorator_template表：

• shops_decorator_template_resource表：

resource_data内容如下:

[
    {
        "data": [
            {
                "src": "http://img02.static.yohobuy.com/cms/2016/05/06/11/024b64d9671b7831b454074731a16e28a7.jpg",
                "startTime": "",
                "end Time": "2016-10-20 14:16:43",
                "url": ""
            }
        ],
        "position": 5
    }
]