商城装修

## 1. 功能介绍
项目支持商城装修，通过简单的拖拉拽，即可进行 uni-app 页面的制作，最终可以在 H5、小程序进行展示。
对应管理后台的 [商城系统 -> 营销中心 -> 商城装修] 菜单。目前它有两个子菜单：装修模版、装修页面。

### 1.1 装修模版
装修模版，实现对 uni-app 的首页、个人中心进行配置。
① 可以新建多个装修模版，点击「使用」后，设置为当前 uni-app 默认使用。如下图所示：

![](/media/202408/2024-08-28_142835_444621.png)
② 点击「装修」后，可以进行首页、个人中心设计。如下图所示：

![](/media/202408/2024-08-28_142854_661369.png)
### 1.2 装修页面
装修模版，可以简单理解它由两个装修页面组成：首页、个人中心。所以装修页面的「装修」功能，和装修模版是一致的。如下图所示：

![](/media/202408/2024-08-28_142918_174514.png)
② 那么装修页面为什么要独立一个菜单呢？在某些场景下，需要制作一个广告业、活动页等等，可以通过它来实现。
例如说，我们先「新建」一个装修页面，然后进行「装修」后，然后使用 uni-app 进行直接访问。访问的地址示例，/pages/index/page?id=${pageId} 。如下图所示：

![](/media/202408/2024-08-28_142935_675383.png)
## 2. 实现原理
店铺装修的实现原理并不复杂，我们将分成三部分来讲解：uni-app、管理后台、后端存储。

### 2.1 uni-app
本质上来说，uni-app 就是读取到装修配置，for 循环创建对应的组件，使用该组件对应的配置，进行渲染即可。

① uni-app 前台打开时，在 sheep/index.js 的 ShoproInit 方法中，会调用后端接口，获取到默认的装修模版。这样，它就获取到了装修配置。如下图所示：

![](/media/202408/2024-08-28_142956_524638.png)

② 有了装修配置后，首页（pages/index/index.vue）、个人中心（pages/index/user.vue）就可以进行渲染展示。以首页举例子，它会包含多个“装修组件”，每个“装修组件”由 s-block-item 进行渲染。如下图所示：

![](/media/202408/2024-08-28_143005_847134.png)

例如说，s-title-block.vue 它用于“标题栏”的展示。拿到它对应的 data 装修配置，就可以进行展示了。如下图所示：

![](/media/202408/2024-08-28_143014_172653.png)

### 2.2 管理后台
① 管理后台的 components/DiyEditor 组件，实现了商城装修功能，它被装修模版的「装修」（views/mall/promotion/diy/template/decorate.vue）和装修页面的「装修」（views/mall/promotion/diy/page/decorate.vue）所使用。如下图所示：

![](/media/202408/2024-08-28_143046_272220.png)

它可以分成如下三个部分所组成：

- 【左边】组件区域：可选中的“装修组件”列表，由 components/DiyEditor/components/ComponentLibrary.vue 实现
- 【中间】设计区域：由选中的多个 components/DiyEditor/components/ComponentContainer.vue “装修组件”所组成
- 【右边】属性面板：设置当前选中的“装修组件”属性，由 components/DiyEditor/components/ComponentContainerProperty.vue 实现
 ② 在 components/DiyEditor/components/mobile 目录下，可以看到每个“装修组件”的实现。如下图所示：

![](/media/202408/2024-08-28_143109_192416.png)
③ 点击右上角的「保存」按钮，每个“装修组件”的属性会存储成对应的 JSON 格式，那么一个页面其实就是多个 JSON 组成的数组。具体的存储格式，我们放在「2.3 后端存储」小节来看。

### 2.3 后端存储

① promotion_diy_template 装修模版表，关键字段如下所示：

> CREATE TABLE `promotion_diy_template` (
 `id` bigint NOT NULL AUTO_INCREMENT COMMENT '装修模板编号',
 `name` varchar(100) CHARACTER SET utf8mb4 COLLATE utf8mb4_general_ci NOT NULL COMMENT '模板名称',
 `used` bit(1) NOT NULL DEFAULT b'0' COMMENT '是否使用',
 `property` text CHARACTER SET utf8mb4 COLLATE utf8mb4_general_ci COMMENT '模板属性，JSON 格式',
 PRIMARY KEY (`id`) USING BTREE
) ENGINE=InnoDB AUTO_INCREMENT=6 DEFAULT CHARSET=utf8mb4 COLLATE=utf8mb4_general_ci ROW_FORMAT=DYNAMIC COMMENT='装修模板';

其中 property 是最关键字段，存储了整个 uni-app 全局的界面配置，如下所示：
> {
 "page": {
 "description": "", 
 "backgroundColor": "#f5f5f5", 
 "backgroundImage": ""
 }, 
 "navigationBar": {
 "title": "页面标题", 
 "description": "", 
 "navBarHeight": 35, 
 "backgroundColor": "#f5f5f5", 
 "backgroundImage": "", 
 "styleType": "default", 
 "alwaysShow": true, 
 "showGoBack": true
 }, 
 "tabBar": {
 "theme": "orange", 
 "style": {
 "backgroundType": "img", 
 "background": "", 
 "color": "#282828", 
 "activeColor": "#f37b1d"
 }, 
 "items": [
 {
 "name": "首页1", 
 "link": "/", 
 "iconUrl": "http://mall.yudao.iocoder.cn/static/images/1-001.png", 
 "activeIconUrl": "http://mall.yudao.iocoder.cn/static/images/1-002.png"
 }, 
 {
 "name": "分类", 
 "link": "/pages/goods_cate/goods_cate", 
 "iconUrl": "http://mall.yudao.iocoder.cn/static/images/2-001.png", 
 "activeIconUrl": "http://mall.yudao.iocoder.cn/static/images/2-002.png"
 }, 
 {
 "name": "购物车", 
 "link": "/pages/order_addcart/order_addcart", 
 "iconUrl": "http://mall.yudao.iocoder.cn/static/images/3-001.png", 
 "activeIconUrl": "http://mall.yudao.iocoder.cn/static/images/3-002.png"
 }, 
 {
 "name": "我的", 
 "link": "/pages/user/index", 
 "iconUrl": "http://mall.yudao.iocoder.cn/static/images/4-001.png", 
 "activeIconUrl": "http://mall.yudao.iocoder.cn/static/images/4-002.png"
 }
 ]
 }, 
 "components": [ ]
}

- template_id 字段，关联对应的装修模版。当然，如果直接创建的装修页面，不会进行关联，该字段的值为空
其中 property 也是最关键字段，存储了单个 uni-app 页面的界面配置，如下所示：
> {
 "page": {
 "description": "", 
 "backgroundColor": "#f5f5f5", 
 "backgroundImage": ""
 }, 
 "navigationBar": {
 "title": "双 11 购物节", 
 "description": "", 
 "navBarHeight": 35, 
 "backgroundColor": "#fff", 
 "backgroundImage": "", 
 "styleType": "default", 
 "alwaysShow": true, 
 "showGoBack": true
 }, 
 "components": [
 {
 "id": "TitleBar", 
 "property": {
 "title": "一个不错的活动！！！", 
 "description": "副标题", 
 "titleSize": 16, 
 "descriptionSize": 12, 
 "titleWeight": 400, 
 "textAlign": "left", 
 "descriptionWeight": 200, 
 "titleColor": "rgba(50, 50, 51, 10)", 
 "descriptionColor": "rgba(150, 151, 153, 10)", 
 "more": {
 "show": false, 
 "type": "icon", 
 "text": "查看更多", 
 "url": ""
 }, 
 "style": {
 "bgType": "color", 
 "bgColor": "#fff"
 }
 }
 },
 {
 "id": "CouponCard", 
 "property": {
 "columns": 1, 
 "bgImg": "", 
 "textColor": "#E9B461", 
 "button": {
 "color": "#434343", 
 "bgColor": ""
 }, 
 "space": 0, 
 "couponIds": [
 2
 ], 
 "style": {
 "bgType": "color", 
 "bgColor": "", 
 "marginBottom": 8
 }
 }
 }
 ]
}

- page 和 navigationBar 属性，和 promotion_diy_template 表的类似。但是，没有 tabBar 属性，因为该属性属于全局配置
- components 属性，存储每个“装修组件”的 JSON 配置，注意它是一个数组。对应到「附录」小节的话，就是『基础组件』、『图文组件』、『商品组件』、『用户组件』、『营销组件』

## 附录：组件对应关系
布局组件

![](/media/202408/2024-08-28_143300_712351.png)

基础组件

![](/media/202408/2024-08-28_143314_384789.png)

图文组件

![](/media/202408/2024-08-28_143326_461739.png)

商品组件

![](/media/202408/2024-08-28_143338_446277.png)
用户组件

![](/media/202408/2024-08-28_143355_777969.png)

营销组件

![](/media/202408/2024-08-28_143408_067411.png)