wip

beike/Admin/Http/Controllers/DesignFooterController.php

@@ -20,7 +20,7 @@ class DesignFooterController extends Controller
     {
         $data = [
             'languages' => LanguageRepo::all(),
-            'design_settings' => system_setting('base.design_setting'),
+            'design_settings' => system_setting('base.footer_setting'),
         ];
         return view('admin::pages.design.builder.footer', $data);
     }

resources/beike/admin/views/pages/design/builder/component/image_selector.blade.php

@@ -23,12 +23,12 @@
       </el-tabs>
 
       <div class="i18n-inner" v-else>
-        <img :src="type == 'image' ? thumbnail(value) : 'image/video.png'" :id="'thumb-' + code" @click="selectButtonClicked" style="max-width: 60px; cursor: pointer;border: 1px solid #eee;">
+        <img :src="type == 'image' ? thumbnail(value) : 'image/video.png'" @click="selectButtonClicked" style="max-width: 60px; cursor: pointer;border: 1px solid #eee;">
         <div class="btns">
           <el-button type="primary" size="mini" plain @click="selectButtonClicked">选择</el-button>
           <el-button size="mini" plain style="margin-left: 4px;" @click="removeImage">删除</el-button>
         </div>
-        <input type="hidden" value="" v-model="src" :id="'input-' + code">
+        <input type="hidden" value="" v-model="src">
       </div>
     </div>
   </template>

resources/beike/admin/views/pages/design/builder/footer.blade.php

@@ -26,29 +26,51 @@
   <div class="design-box">
     <div class="sidebar-edit-wrap" id="app" v-cloak>
       <div class="design-head">
-        <div v-if="design.editType != 'add'" @click="showAllModuleButtonClicked"><i class="el-icon-back"></i>返回</div>
         <div @click="viewHome"><i class="el-icon-view"></i>查看页面</div>
         <div @click="saveButtonClicked"><i class="el-icon-check"></i>保存</div>
       </div>
-      <div class="module-edit" v-if="form.modules.length > 0 && design.editType == 'module'">
+      <div class="module-edit">
-        <component
+        <el-collapse value="intro" @change="footerItemChange" accordion>
-          :is="editingModuleComponent"
+          <el-collapse-item title="服务图标" name="service_icon">
-          :key="design.editingModuleIndex"
+            <div class="module-edit-group">
-          :module="form.modules[design.editingModuleIndex].content"
+              <div class="module-edit-group">
-          @on-changed="moduleUpdated"
+                <div class="module-edit-title">启用</div>
-        ></component>
+                <el-switch v-model="form.services.enable"></el-switch>
-      </div>
+              </div>
+              <draggable
+                ghost-class="dragabble-ghost"
+                :list="form.services.items"
+                :options="{animation: 330, handle: '.icon-rank'}"
+              >
+                <div class="pb-images-selector" v-for="(item, index) in form.services.items" :key="index">
+                  <div class="selector-head" @click="selectorShow(index)">
+                    <div class="left">
+                      <el-tooltip class="icon-rank" effect="dark" content="拖动排序" placement="left">
+                        <i class="el-icon-rank"></i>
+                      </el-tooltip>
 
-      <el-row v-if="design.editType == 'add'" class="modules-list">
+                      <img :src="thumbnail(item.image, 40, 40)" class="img-responsive">
-        <el-col :span="12" v-for="(item, index) in source.modules" :key="index">
+                    </div>
-          <div @click="addModuleButtonClicked(item.code)" class="module-list">
+
-            <div class="module-info">
+                    {{-- <div class="right"><i :class="'fa fa-angle-'+(item.show ? 'up' : 'down')"></i></div> --}}
-              <div class="icon"><i :style="item.style" class="iconfont" v-html="item.icon"></i></div>
+                    <div class="right">
-              <div class="name">@{{ item.name }}</div>
+                      <i :class="'el-icon-arrow-'+(item.show ? 'up' : 'down')"></i>
+                    </div>
+                  </div>
+                  <div :class="'pb-images-list ' + (item.show ? 'active' : '')">
+                    <pb-image-selector v-model="item.image" :is-language="false"></pb-image-selector>
+                    <div class="tag">建议尺寸 100 x 100</div>
+                    <div class="module-edit-title">标题</div>
+                    <text-i18n v-model="item.title"></text-i18n>
+                    <div class="module-edit-title">副标题</div>
+                    <text-i18n v-model="item.sub_title"></text-i18n>
+                  </div>
+                </div>
+              </draggable>
             </div>
-          </div>
+          </el-collapse-item>
-        </el-col>
+        </el-collapse>
-      </el-row>
+      </div>
     </div>
     <div class="preview-iframe">
       <iframe src="{{ url('/') }}?design=1" frameborder="0" id="preview-iframe" width="100%" height="100%"></iframe>
@@ -60,16 +82,20 @@
     var $languages = @json($languages);
     var $language_id = '{{ locale() }}';
 
-    function languagesFill(text) {
+    // function languagesFill(text) {
-      var obj = {};
+    //   var obj = {};
-      $languages.map(e => {
+    //   $languages.map(e => {
-        obj[e.code] = text
+    //     obj[e.code] = text
-      })
+    //   })
 
-      return obj;
+    //   return obj;
-    }
+    // }
 
     Vue.prototype.thumbnail = function thumbnail(image, width, height) {
+      if (!image) {
+        return 'image/placeholder.png';
+      }
+
       return '{{ asset('') }}' + image;
     };
 
@@ -86,51 +112,7 @@
       app.design.ready = true;
       app.design.sidebar = true;
 
-      // 编辑模块
-      $(previewWindow.document).on('click', '.module-edit .edit', function(event) {
-        const module_id = $(this).parents('.module-item').prop('id').replace('module-', '');
-        const modules = app.form.modules;
-        const editingModuleIndex = modules.findIndex(e => e.module_id == module_id);
-        app.editModuleButtonClicked(editingModuleIndex);
-      });
 
-      // 删除模块
-      $(previewWindow.document).on('click', '.module-edit .delete', function(event) {
-        const module_id = $(this).parents('.module-item').prop('id').replace('module-', '');
-        const editingModuleIndex = app.form.modules.findIndex(e => e.module_id == module_id);
-        app.design.editType = 'add';
-        app.design.editingModuleIndex = 0;
-        $(this).parents('.module-item').remove();
-        app.form.modules.splice(editingModuleIndex, 1);
-      });
-
-      // 模块位置改变，点击.module-edit .up或者.down
-      $(previewWindow.document).on('click', '.module-edit .up, .module-edit .down', function(event) {
-        const module_id = $(this).parents('.module-item').prop('id').replace('module-', '');
-        const modules = app.form.modules;
-        const editingModuleIndex = modules.findIndex(e => e.module_id == module_id);
-        const up = $(this).hasClass('up');
-        app.design.editType = 'add';
-        app.design.editingModuleIndex = 0;
-        if (up) {
-          if (editingModuleIndex > 0) {
-            const module = modules[editingModuleIndex];
-            modules.splice(editingModuleIndex, 1);
-            modules.splice(editingModuleIndex - 1, 0, module);
-            // dom操作
-            $(this).parents('.module-item').insertBefore($(this).parents('.module-item').prev());
-          }
-        } else {
-          if (editingModuleIndex < modules.length - 1) {
-            const module = modules[editingModuleIndex];
-            modules.splice(editingModuleIndex, 1);
-            modules.splice(editingModuleIndex + 1, 0, module);
-            // dom操作
-            $(this).parents('.module-item').insertAfter($(this).parents('.module-item').next());
-          }
-        }
-        app.form.modules = modules;
-      });
     });
   </script>
 
@@ -143,40 +125,19 @@
       el: '#app',
       data: {
         form: {
-          modules: [
+
-            // {"content":{"style":{"background_color":""},"full":true,"floor":{"2":"","3":""},"images":[{"image":{"2":"catalog/demo/slideshow/2.jpg","3":"catalog/demo/slideshow/2.jpg"},"show":true,"link":{"type":"product","value":"","link":""}},{"image":{"2":"catalog/demo/slideshow/1.jpg","3":"catalog/demo/slideshow/1.jpg"},"show":false,"link":{"type":"product","value":"","link":""}}]},"code":"slideshow","name":"幻灯片","module_id":"b0448efb0989"}
-          ]
         },
 
         design: {
           type: 'pc',
-          editType: 'add',
-          sidebar: false,
-          editingModuleIndex: 0,
           ready: false,
-          moduleLoadCount: 0, // 第一次选择已配置模块时，不需要请求数据，
         },
 
         source: {
-          modules: [],
-          config: []
         },
       },
       // 计算属性
       computed: {
-        // 编辑中的模块编辑组件
-        editingModuleComponent() {
-          return 'module-editor-' + this.editingModuleCode.replace('_', '-');
-        },
-
-        // 编辑中的模块 code
-        editingModuleCode() {
-          return this.form.modules[this.design.editingModuleIndex].code;
-        },
-
-        // editingConfigCodeFormat() {
-        //   return 'config-' + this.config.editingConfigCode;
-        // },
       },
       // 侦听器
       watch: {},
@@ -190,31 +151,38 @@
           })
         },
 
-        addModuleButtonClicked(code) {
+        footerItemChange(val) {
-          const sourceModule = this.source.modules.find(e => e.code == code)
+          // $footer = $("#preview-iframe").contents().find('footer');
-          const module_id = randomString(16)
+          // $footer.find("div").removeClass('footer-active');
-          const _data = {
+          // if (!val) return;
-            code: code,
+          // $footer.find(`.${val}`).addClass('footer-active');
-            content: sourceModule.make,
-            module_id: module_id,
-            name: sourceModule.name,
-          }
-
-          $http.post('design/builder/preview?design=1', _data, {hload: true}).then((res) => {
-            $(previewWindow.document).find('.modules-box').append(res);
-            this.form.modules.push(_data);
-            this.design.editingModuleIndex = this.form.modules.length - 1;
-            this.design.editType = 'module';
-
-
-            setTimeout(() => {
-              $(previewWindow.document).find("html, body").animate({
-                scrollTop: $(previewWindow.document).find('#module-' + module_id).offset().top - 30
-              }, 50);
-            }, 200)
-          })
         },
 
+        // addModuleButtonClicked(code) {
+        //   const sourceModule = this.source.modules.find(e => e.code == code)
+        //   const module_id = randomString(16)
+        //   const _data = {
+        //     code: code,
+        //     content: sourceModule.make,
+        //     module_id: module_id,
+        //     name: sourceModule.name,
+        //   }
+
+        //   $http.post('design/builder/preview?design=1', _data, {hload: true}).then((res) => {
+        //     $(previewWindow.document).find('.modules-box').append(res);
+        //     this.form.modules.push(_data);
+        //     this.design.editingModuleIndex = this.form.modules.length - 1;
+        //     this.design.editType = 'module';
+
+
+        //     setTimeout(() => {
+        //       $(previewWindow.document).find("html, body").animate({
+        //         scrollTop: $(previewWindow.document).find('#module-' + module_id).offset().top - 30
+        //       }, 50);
+        //     }, 200)
+        //   })
+        // },
+
         // 编辑模块
         editModuleButtonClicked(index) {
           this.design.editingModuleIndex = index;
@@ -227,6 +195,12 @@
           })
         },
 
+        selectorShow(index) {
+          this.form.services.items.find((e, key) => {if (index != key) return e.show = false});
+          this.form.services.items[index].show = !this.form.services.items[index].show;
+          this.$forceUpdate();
+        },
+
         exitDesign() {
           history.back();
         },