From cace8d9a1babd4a4214be1c5482603f4e3e0fd4f Mon Sep 17 00:00:00 2001 From: gongfuxiang Date: Tue, 29 Nov 2022 14:13:31 +0800 Subject: [PATCH] =?UTF-8?q?=E5=8F=AF=E8=A7=86=E5=8C=96=E6=8B=96=E6=8B=BD?= =?UTF-8?q?=E6=94=AF=E6=8C=81=E5=85=A8=E5=B1=8F?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- app/admin/view/default/design/save_info.html | 36 +-- app/index/controller/Index.php | 1 + app/index/view/default/design/index.html | 12 +- app/index/view/default/index/index.html | 22 +- app/layout/service/BaseLayout.php | 277 +++++++++--------- app/layout/view/base.html | 3 + app/layout/view/form_back.html | 6 + .../offcanvas/offcanvas_layout_config.html | 5 + .../offcanvas_layout_module_config.html | 87 ++++++ public/static/admin/default/css/common.css | 8 +- public/static/common/css/layout.admin.css | 8 +- public/static/common/js/layout.admin.js | 111 ++++++- 12 files changed, 389 insertions(+), 187 deletions(-) create mode 100644 app/layout/view/public/offcanvas/offcanvas_layout_module_config.html diff --git a/app/admin/view/default/design/save_info.html b/app/admin/view/default/design/save_info.html index 9972a7884..d519a3106 100644 --- a/app/admin/view/default/design/save_info.html +++ b/app/admin/view/default/design/save_info.html @@ -1,31 +1,31 @@ {{include file="public/header" /}} {{if !empty($data)}} -
- - - - {{$data.name}} - - - 查看 >> - -
-
- 关闭 - -
- {{include file="../../../layout/view/base" /}} + + + + {{$data.name}} + + + 查看 >> + +
+
+ 关闭 +
+ {{include file="../../../layout/view/base" /}}
{{include file="design/popup_saveinfo" /}} {{else /}}
- - 请先添加数据 - 去添加数据 >> + +
+ 请先添加数据 + 去添加数据 >> +
{{/if}} diff --git a/app/index/controller/Index.php b/app/index/controller/Index.php index 2a1d52f07..affb9f24e 100755 --- a/app/index/controller/Index.php +++ b/app/index/controller/Index.php @@ -111,6 +111,7 @@ class Index extends Common $assign['goods_view_list_show_style'] = BaseLayout::$goods_view_list_show_style; $assign['many_images_view_list_show_style'] = BaseLayout::$many_images_view_list_show_style; $assign['images_text_view_list_show_style'] = BaseLayout::$images_text_view_list_show_style; + $assign['images_magic_cube_view_list_show_style'] = BaseLayout::$images_magic_cube_view_list_show_style; // 首页商品排序规则 $assign['goods_order_by_type_list'] = MyConst('goods_order_by_type_list'); diff --git a/app/index/view/default/design/index.html b/app/index/view/default/design/index.html index 319e48a64..5250f3b9e 100644 --- a/app/index/view/default/design/index.html +++ b/app/index/view/default/design/index.html @@ -17,13 +17,13 @@ -
- {{if !empty($layout_data)}} - {{include file="../../../layout/view/view" /}} - {{else /}} +{{if !empty($layout_data)}} + {{include file="../../../layout/view/view" /}} +{{else /}} +
{{include file="public/not_data" /}} - {{/if}} -
+
+{{/if}} diff --git a/app/index/view/default/index/index.html b/app/index/view/default/index/index.html index c12060b06..d48d21fb3 100755 --- a/app/index/view/default/index/index.html +++ b/app/index/view/default/index/index.html @@ -123,19 +123,17 @@ {{if isset($floor_data_type) and $floor_data_type eq 2}} -
- {{if isset($is_design) and $is_design eq 1}} -
-
- 取消 - -
- {{include file="../../../layout/view/base" /}} + {{if isset($is_design) and $is_design eq 1}} +
+
+ 取消 +
- {{else /}} - {{include file="../../../layout/view/view" /}} - {{/if}} -
+ {{include file="../../../layout/view/base" /}} +
+ {{else /}} + {{include file="../../../layout/view/view" /}} + {{/if}} {{else /}}
diff --git a/app/layout/service/BaseLayout.php b/app/layout/service/BaseLayout.php index 0d9c6b6f7..271c2a199 100644 --- a/app/layout/service/BaseLayout.php +++ b/app/layout/service/BaseLayout.php @@ -337,166 +337,177 @@ class BaseLayout { if(!empty($config)) { - // 是否数组 - if(!is_array($config)) + // 缓存key + $cache_key = md5(is_array($config) ? json_encode($config, JSON_UNESCAPED_UNICODE) : $config); + $data = MyCache($cache_key); + if(empty($data) || MyEnv('app_debug')) { - $config = json_decode($config, true); - } - if(!empty($config)) - { - foreach($config as &$v) + // 是否数组 + if(!is_array($config)) { - // 配置信息处理 - if(!empty($v['config'])) + $config = json_decode($config, true); + } + if(!empty($config)) + { + foreach($config as &$v) { // 配置信息处理 - $v['config'] = self::ConfigViewFieldHandle($v['config']); - } - - // 布局类型 - $v['value_arr'] = explode(':', $v['value']); - - // 布局 - if(!empty($v['children']) && is_array($v['children'])) - { - foreach($v['children'] as &$vs) + if(!empty($v['config'])) { // 配置信息处理 - if(!empty($vs['config'])) + $v['config'] = self::ConfigViewFieldHandle($v['config']); + } + + // 布局类型 + $v['value_arr'] = explode(':', $v['value']); + + // 布局 + if(!empty($v['children']) && is_array($v['children'])) + { + foreach($v['children'] as &$vs) { // 配置信息处理 - $vs['config'] = self::ConfigViewFieldHandle($vs['config']); - } - - // 容器 - if(!empty($vs['children']) && is_array($vs['children'])) - { - // 模块 - foreach($vs['children'] as &$vss) + if(!empty($vs['config'])) { - if(!empty($vss['value']) && !empty($vss['config'])) + // 配置信息处理 + $vs['config'] = self::ConfigViewFieldHandle($vs['config']); + } + + // 容器 + if(!empty($vs['children']) && is_array($vs['children'])) + { + // 模块 + foreach($vs['children'] as &$vss) { - // 配置信息处理 - $vss['config'] = self::ConfigViewFieldHandle($vss['config']); - - // 根据模块类型处理 - switch($vss['value']) + if(!empty($vss['value']) && !empty($vss['config'])) { - // 视频 video - case 'video' : - $vss['config']['video'] = ResourcesService::AttachmentPathViewHandle($vss['config']['content_video']); - unset($vss['config']['content_video']); - break; + // 配置信息处理 + $vss['config'] = self::ConfigViewFieldHandle($vss['config']); - // 单图 images - case 'images' : - // 配置重新组合 - $vss['config'] = [ - 'frontend_config' => $vss['config']['frontend_config'], - 'images' => ResourcesService::AttachmentPathViewHandle($vss['config']['content_images']), - 'url' => self::LayoutUrlValueHandle($vss['config']['content_to_type'], $vss['config']['content_to_value']), - ]; - break; + // 根据模块类型处理 + switch($vss['value']) + { + // 视频 video + case 'video' : + $vss['config']['video'] = ResourcesService::AttachmentPathViewHandle($vss['config']['content_video']); + unset($vss['config']['content_video']); + break; - // 多图 many-images - case 'many-images' : - foreach($vss['config']['data_list'] as &$mil) - { - $mil = [ - 'images' => ResourcesService::AttachmentPathViewHandle($mil['images']), - 'url' => self::LayoutUrlValueHandle($mil['type'], $mil['value']), + // 单图 images + case 'images' : + // 配置重新组合 + $vss['config'] = [ + 'frontend_config' => $vss['config']['frontend_config'], + 'images' => ResourcesService::AttachmentPathViewHandle($vss['config']['content_images']), + 'url' => self::LayoutUrlValueHandle($vss['config']['content_to_type'], $vss['config']['content_to_value']), ]; - } - break; + break; - // 图文 images-text - case 'images-text' : - foreach($vss['config']['data_list'] as &$itl) - { - $itl['images'] = ResourcesService::AttachmentPathViewHandle($itl['images']); - $itl['url'] = self::LayoutUrlValueHandle($itl['type'], $itl['value']); - } - break; - - // 图片魔方 images-magic-cube - case 'images-magic-cube' : - foreach($vss['config']['data_list'] as &$imc) - { - $imc['images'] = ResourcesService::AttachmentPathViewHandle($imc['images']); - $imc['url'] = self::LayoutUrlValueHandle($imc['type'], $imc['value']); - } - break; - - // 商品 - case 'goods' : - $p = [ - 'data_type' => $vss['config']['goods_data_type'], - ]; - switch($vss['config']['goods_data_type']) - { - // 指定商品 - case 'goods' : - $p['goods_ids'] = $vss['config']['goods_ids']; - break; - - // 商品分类 - case 'category' : - $category = json_decode(urldecode($vss['config']['goods_category_value']), true); - $p['category_id'] = $category[count($category)-1]['id']; - $p['order_limit_number'] = empty($vss['config']['goods_order_limit_number']) ? 0 : $vss['config']['goods_order_limit_number']; - $p['order_by_type'] = isset($vss['config']['goods_order_by_type']) ? $vss['config']['goods_order_by_type'] : 0; - $p['order_by_rule'] = isset($vss['config']['goods_order_by_rule']) ? $vss['config']['goods_order_by_rule'] : 0; - break; - } - $res = self::GoodsDataList($p); - if(!empty($res['data']) && is_array($res['data'])) - { - foreach($res['data'] as &$g) + // 多图 many-images + case 'many-images' : + foreach($vss['config']['data_list'] as &$mil) { - $g['goods_url'] = self::LayoutUrlValueHandle('goods', $g); - } - } - $vss['config']['data_list'] = $res['data']; - break; - - // 标题 - case 'title' : - // 关键字 - $keywords_list = []; - if(!empty($vss['config']['keywords_list'])) - { - foreach($vss['config']['keywords_list'] as $wd) - { - $keywords_list[] = [ - 'keywords' => $wd['content_keywords'], - 'color' => empty($wd['style_keywords_color']) ? '' : $wd['style_keywords_color'], - 'url' => self::LayoutUrlValueHandle($wd['content_to_type'], $wd['content_to_value']), + $mil = [ + 'images' => ResourcesService::AttachmentPathViewHandle($mil['images']), + 'url' => self::LayoutUrlValueHandle($mil['type'], $mil['value']), ]; } - } + break; - // 配置重新组合 - $vss['config'] = [ - 'frontend_config' => $vss['config']['frontend_config'], - 'title' => $vss['config']['content_title'], - 'title_vice' => $vss['config']['content_title_vice'], - 'title_more' => $vss['config']['content_title_more'], - 'title_more_url' => self::LayoutUrlValueHandle($vss['config']['content_to_type'], $vss['config']['content_to_value']), - 'keywords_list' => $keywords_list, - ]; - break; + // 图文 images-text + case 'images-text' : + foreach($vss['config']['data_list'] as &$itl) + { + $itl['images'] = ResourcesService::AttachmentPathViewHandle($itl['images']); + $itl['url'] = self::LayoutUrlValueHandle($itl['type'], $itl['value']); + } + break; - // 自定义html - case 'custom' : - $vss['config']['custom'] = empty($vss['config']['custom']) ? '' : htmlspecialchars_decode($vss['config']['custom']); - break; + // 图片魔方 images-magic-cube + case 'images-magic-cube' : + foreach($vss['config']['data_list'] as &$imc) + { + $imc['images'] = ResourcesService::AttachmentPathViewHandle($imc['images']); + $imc['url'] = self::LayoutUrlValueHandle($imc['type'], $imc['value']); + } + break; + + // 商品 + case 'goods' : + $p = [ + 'data_type' => $vss['config']['goods_data_type'], + ]; + switch($vss['config']['goods_data_type']) + { + // 指定商品 + case 'goods' : + $p['goods_ids'] = $vss['config']['goods_ids']; + break; + + // 商品分类 + case 'category' : + $category = json_decode(urldecode($vss['config']['goods_category_value']), true); + $p['category_id'] = $category[count($category)-1]['id']; + $p['order_limit_number'] = empty($vss['config']['goods_order_limit_number']) ? 0 : $vss['config']['goods_order_limit_number']; + $p['order_by_type'] = isset($vss['config']['goods_order_by_type']) ? $vss['config']['goods_order_by_type'] : 0; + $p['order_by_rule'] = isset($vss['config']['goods_order_by_rule']) ? $vss['config']['goods_order_by_rule'] : 0; + break; + } + $res = self::GoodsDataList($p); + if(!empty($res['data']) && is_array($res['data'])) + { + foreach($res['data'] as &$g) + { + $g['goods_url'] = self::LayoutUrlValueHandle('goods', $g); + } + } + $vss['config']['data_list'] = $res['data']; + break; + + // 标题 + case 'title' : + // 关键字 + $keywords_list = []; + if(!empty($vss['config']['keywords_list'])) + { + foreach($vss['config']['keywords_list'] as $wd) + { + $keywords_list[] = [ + 'keywords' => $wd['content_keywords'], + 'color' => empty($wd['style_keywords_color']) ? '' : $wd['style_keywords_color'], + 'url' => self::LayoutUrlValueHandle($wd['content_to_type'], $wd['content_to_value']), + ]; + } + } + + // 配置重新组合 + $vss['config'] = [ + 'frontend_config' => $vss['config']['frontend_config'], + 'title' => $vss['config']['content_title'], + 'title_vice' => $vss['config']['content_title_vice'], + 'title_more' => $vss['config']['content_title_more'], + 'title_more_url' => self::LayoutUrlValueHandle($vss['config']['content_to_type'], $vss['config']['content_to_value']), + 'keywords_list' => $keywords_list, + ]; + break; + + // 自定义html + case 'custom' : + $vss['config']['custom'] = empty($vss['config']['custom']) ? '' : htmlspecialchars_decode($vss['config']['custom']); + break; + } } } } } } } + + // 存储缓存 + MyCache($cache_key, $config, 180); } + } else { + $config = $data; } } return $config; diff --git a/app/layout/view/base.html b/app/layout/view/base.html index 39ee00799..695fe751c 100644 --- a/app/layout/view/base.html +++ b/app/layout/view/base.html @@ -134,6 +134,9 @@ {{include file="../../../layout/view/public/offcanvas/offcanvas_layout_config" /}} + +{{include file="../../../layout/view/public/offcanvas/offcanvas_layout_module_config" /}} + {{include file="../../../layout/view/public/offcanvas/offcanvas_module_config_images" /}} diff --git a/app/layout/view/form_back.html b/app/layout/view/form_back.html index 36d038900..ff2a1e8c9 100644 --- a/app/layout/view/form_back.html +++ b/app/layout/view/form_back.html @@ -5,6 +5,12 @@ function FormBackLayoutConfig(e) FormBackLayoutConfigHandle(e); } +// 容器模块设置回调处理 +function FormBackLayoutModuleConfig(e) +{ + FormBackLayoutModuleConfigHandle(e); +} + // 单图选择回调处理 function FormBackModuleConfigImages(e) { diff --git a/app/layout/view/public/offcanvas/offcanvas_layout_config.html b/app/layout/view/public/offcanvas/offcanvas_layout_config.html index 2eedc47f5..6a108abbe 100644 --- a/app/layout/view/public/offcanvas/offcanvas_layout_config.html +++ b/app/layout/view/public/offcanvas/offcanvas_layout_config.html @@ -12,6 +12,11 @@ {{include file="../../../layout/view/public/style/color" key="_border" required="" name="边线颜色" /}} + + +
diff --git a/app/layout/view/public/offcanvas/offcanvas_layout_module_config.html b/app/layout/view/public/offcanvas/offcanvas_layout_module_config.html new file mode 100644 index 000000000..dbefe49b7 --- /dev/null +++ b/app/layout/view/public/offcanvas/offcanvas_layout_module_config.html @@ -0,0 +1,87 @@ + +
+
+
+
+ +
+
基础样式
+
+ + {{include file="../../../layout/view/public/style/background_color" key="" required="" /}} + + + {{include file="../../../layout/view/public/style/color" key="_border" required="" name="边线颜色" /}} +
+
+ + +
+
中屏样式
+
+ + {{include file="../../../layout/view/public/style/border_radius" max="30" key="_md" required="" /}} + + + {{include file="../../../layout/view/public/style/border_style_4" key="_md" /}} + + + {{include file="../../../layout/view/public/style/border_width_4" key="_md" /}} + + + {{include file="../../../layout/view/public/style/margin_4" key="_md" /}} + + + {{include file="../../../layout/view/public/style/padding_4" key="_md" /}} +
+
+ + +
+
小屏样式
+
+ + {{include file="../../../layout/view/public/style/border_radius" max="30" key="_sm" required="" /}} + + + {{include file="../../../layout/view/public/style/border_style_4" key="_sm" /}} + + + {{include file="../../../layout/view/public/style/border_width_4" key="_sm" /}} + + + {{include file="../../../layout/view/public/style/margin_4" key="_sm" /}} + + + {{include file="../../../layout/view/public/style/padding_4" key="_sm" /}} +
+
+ + +
+
大屏样式
+
+ + {{include file="../../../layout/view/public/style/border_radius" max="30" key="_lg" required="" /}} + + + {{include file="../../../layout/view/public/style/border_style_4" key="_lg" /}} + + + {{include file="../../../layout/view/public/style/border_width_4" key="_lg" /}} + + + {{include file="../../../layout/view/public/style/margin_4" key="_lg" /}} + + + {{include file="../../../layout/view/public/style/padding_4" key="_lg" /}} +
+
+ +
+ +
+
+
+
+
\ No newline at end of file diff --git a/public/static/admin/default/css/common.css b/public/static/admin/default/css/common.css index f28895c45..ade942a4e 100755 --- a/public/static/admin/default/css/common.css +++ b/public/static/admin/default/css/common.css @@ -23,13 +23,7 @@ time, mark, audio, video { } body {font-size: 12px;margin:0;color:#666;} html,body {position:relative;height:100%;width:100%;} -h1 {line-height:42px;} -h2 {line-height:32px;} -h3 small {color:#444444;} -h4 {line-height:22px;} -h4 small {color:#444444;} -h5 {font-size:15px;} -h5 small {color:#444444;} +h3 small,h4 small,h5 small {color:#4444;} b {font-weight:600;} i{ font-style: normal; } a:hover {outline:0;text-decoration:none;} diff --git a/public/static/common/css/layout.admin.css b/public/static/common/css/layout.admin.css index c545d848e..9e79a7638 100644 --- a/public/static/common/css/layout.admin.css +++ b/public/static/common/css/layout.admin.css @@ -623,11 +623,9 @@ height: 30px; vertical-align: middle; } +.layout-operate-container { + margin-right: 10px; +} .layout-operate-container .am-btn { padding: 4px 10px; -} -@media only screen and (max-width: 1025px) { - .layout-operate-container { - margin-right: 10px; - } } \ No newline at end of file diff --git a/public/static/common/js/layout.admin.js b/public/static/common/js/layout.admin.js index 67e2fb7ca..920141b44 100644 --- a/public/static/common/js/layout.admin.js +++ b/public/static/common/js/layout.admin.js @@ -1,5 +1,6 @@ // 公共列表 form 搜索条件 FromInit('form.form-validation-layout-config'); +FromInit('form.form-validation-layout-module-config'); FromInit('form.form-validation-module-offcanvas-images'); FromInit('form.form-validation-module-offcanvas-many-images'); FromInit('form.form-validation-module-offcanvas-images-text'); @@ -24,6 +25,7 @@ var $base_show_style_value_obj = null; var $base_title_keywords_obj = null; var $layout = $('.layout-container'); var $offcanvas_layout_config = $('#offcanvas-layout-config'); +var $offcanvas_layout_module_config = $('#offcanvas-layout-module-config'); var $offcanvas_config_images = $('#offcanvas-module-config-images'); var $offcanvas_config_many_images = $('#offcanvas-module-config-many-images'); var $offcanvas_config_images_text = $('#offcanvas-module-config-images-text'); @@ -447,7 +449,7 @@ function MediaFixedHandle(data) } /** - * 模块-容器设置处理 + * 布局-容器设置处理 * @author Devil * @blog http://gong.gg/ * @version 1.0.0 @@ -502,7 +504,104 @@ function FormBackLayoutConfigHandle(data) } } } + // 圆角 + for(var i in size_arr) + { + var key = 'style_'+size_arr[i]+'_border_radius'; + if((data[key] || 0) > 0) + { + ent += 'layout-'+size_arr[i]+'-border-radius-'+data[key]+' '; + } + } + // 系统标准限宽 + if((data['width_max_limit_value'] || null) != null) + { + ent += 'am-container '; + } + // 样式处理 + var style = ''; + + // 背景色 + if((data['style_background_color'] || null) != null) + { + style += 'background-color:'+data['style_background_color']+';'; + } + // 边线颜色 + if((data['style_border_color'] || null) != null) + { + style += 'border-color:'+data['style_border_color']+';'; + } + + // 类和样式处理 + $layout_content_obj.attr('class', $offcanvas_layout_config.attr('data-ent')+' '+ent); + $layout_content_obj.attr('style', style); + + // 数据加入配置 + data['frontend_config'] = { + "style": style, + "ent": ent + } + $layout_content_obj.attr('data-json', encodeURIComponent(CryptoJS.enc.Base64.stringify(CryptoJS.enc.Utf8.parse(JSON.stringify(data))))); + $offcanvas_layout_config.offCanvas('close'); +} + +/** + * 布局模块-容器设置处理 + * @author Devil + * @blog http://gong.gg/ + * @version 1.0.0 + * @date 2021-05-18 + * @desc description + * @param {[object]} data [表单数据] + */ +function FormBackLayoutModuleConfigHandle(data) +{ + // 基础信息 + if($layout_content_obj == null) + { + Prompt('操作标记有误'); + return false; + } + + // 标签类定义 + var ent = ''; + + // 边线大小、外边距、内边距 + var size_arr = ['sm', 'md', 'lg']; + var angle_arr = ['top', 'right', 'bottom', 'left']; + var type_arr = { + "style_{var}_border_width": "layout-{var}-border", + "style_{var}_margin": "layout-{var}-margin", + "style_{var}_padding": "layout-{var}-padding", + }; + for(var a in size_arr) + { + for(var b in type_arr) + { + for(var c in angle_arr) + { + var key = b.replace('{var}', size_arr[a])+'_'+angle_arr[c]; + if((data[key] || 0) > 0) + { + ent += type_arr[b].replace('{var}', size_arr[a])+'-'+angle_arr[c]+'-'+data[key]+' '; + } + } + } + } + + // 边线类型 + for(var a in size_arr) + { + for(var b in angle_arr) + { + var key = 'style_'+size_arr[a]+'_border_style_'+angle_arr[b]; + if((data[key] || null) != null) + { + ent += 'layout-'+size_arr[a]+'-border-'+angle_arr[b]+'-'+data[key]+' '; + } + } + } // 圆角 for(var i in size_arr) { @@ -537,7 +636,7 @@ function FormBackLayoutConfigHandle(data) "ent": ent } $layout_content_obj.attr('data-json', encodeURIComponent(CryptoJS.enc.Base64.stringify(CryptoJS.enc.Utf8.parse(JSON.stringify(data))))); - $offcanvas_layout_config.offCanvas('close'); + $offcanvas_layout_module_config.offCanvas('close'); } /** @@ -3058,14 +3157,14 @@ $(function() }); }); - // 容器设置 + // 布局容器设置 $(document).on('click', '.layout-content-submit-set', function() { // 容器内容对象 $layout_content_obj = $(this).parents('.layout-content-container'); // 配置数据 - var config_doc = '#offcanvas-layout-config'; + var config_doc = '#offcanvas-layout-module-config'; var json = $layout_content_obj.attr('data-json') || null; if(json != null) { @@ -3087,10 +3186,10 @@ $(function() ModuleColorpickerHandle($offcanvas_layout_config); // 指定操作类型 - $offcanvas_layout_config.attr('data-ent', 'layout-content-container'); + $offcanvas_layout_module_config.attr('data-ent', 'layout-content-container'); // 打开配置 - $offcanvas_layout_config.offCanvas('open'); + $offcanvas_layout_module_config.offCanvas('open'); }); // 模块拖放