From 986d2ba15718bf73bf3164742fac9a6497da9fad Mon Sep 17 00:00:00 2001
From: pushuo <229102104@qq.com>
Date: Mon, 18 Jul 2022 21:16:42 +0800
Subject: [PATCH] wip

---
 public/build/beike/admin/css/design.css       | 46 ++++++++++
 resources/beike/admin/css/design/app.scss     | 66 ++++++++++++++
 .../builder/component/text_i18n.blade.php     | 91 +++++++++++++++++++
 .../pages/design/builder/index.blade.php      | 13 ++-
 .../pages/design/module/tab_product.blade.php | 37 ++------
 themes/default/design/tab_product.blade.php   |  4 +-
 6 files changed, 224 insertions(+), 33 deletions(-)
 create mode 100644 resources/beike/admin/views/pages/design/builder/component/text_i18n.blade.php

diff --git a/public/build/beike/admin/css/design.css b/public/build/beike/admin/css/design.css
index 1cad0fb4..781b2e06 100644
--- a/public/build/beike/admin/css/design.css
+++ b/public/build/beike/admin/css/design.css
@@ -499,3 +499,49 @@ body.page-design .pb-images-selector .pb-images-list .el-input-group__prepend {
   background-color: #f6f6f6;
   padding: 10px 20px;
 }
+.link-dialog-box .module-editor-tab-product-template .tab-info {
+  margin-top: 10px;
+  padding: 10px;
+  background: #f2f2f2;
+  border-radius: 6px;
+}
+.link-dialog-box .module-editor-tab-product-template .manufacturer-list > div {
+  margin-bottom: 10px;
+  border: 1px solid #f4f4f4;
+  padding: 5px;
+  border-radius: 6px;
+  background: #f4f4f4;
+  padding-bottom: 8px;
+  position: relative;
+}
+.link-dialog-box .module-editor-tab-product-template .manufacturer-list > div:hover .remove-btn {
+  display: block;
+}
+.link-dialog-box .module-editor-tab-product-template .manufacturer-list > div .remove-btn {
+  position: absolute;
+  display: none;
+  top: 0;
+  right: 0;
+  background: red;
+  color: #fff;
+  z-index: 9;
+  padding: 0 2px;
+  cursor: pointer;
+  border-radius: 0 0 0 4px;
+}
+.link-dialog-box .module-editor-tab-product-template .manufacturer-list > div .remove-btn:hover {
+  background: #c70000;
+}
+.link-dialog-box .module-editor-tab-product-template .add-category {
+  display: flex;
+  justify-content: flex-end;
+}
+.link-dialog-box .module-editor-tab-product-template .manufacturers .module-edit-group {
+  margin-top: 5px;
+}
+.link-dialog-box .module-editor-tab-product-template .tab-edit-category > .el-tabs__header > .el-tabs__nav-wrap .el-tabs__item {
+  padding: 0 10px !important;
+}
+.link-dialog-box .module-editor-tab-product-template .autocomplete-group-wrapper .item-group-wrapper {
+  background: #fff;
+}
diff --git a/resources/beike/admin/css/design/app.scss b/resources/beike/admin/css/design/app.scss
index 5257ef77..d5fe1f0a 100644
--- a/resources/beike/admin/css/design/app.scss
+++ b/resources/beike/admin/css/design/app.scss
@@ -600,4 +600,70 @@ body.page-design {
   .link-dialog-footer {
 
   }
+
+  .module-editor-tab-product-template {
+    .tab-info {
+      margin-top: 10px;
+      padding: 10px;
+      background: #f2f2f2;
+      border-radius: 6px;
+    }
+
+    .manufacturer-list {
+      > div {
+        margin-bottom: 10px;
+        border: 1px solid #f4f4f4;
+        padding: 5px;
+        border-radius: 6px;
+        background: #f4f4f4;
+        padding-bottom: 8px;
+        position: relative;
+        &:hover {
+          .remove-btn {
+            display: block;
+          }
+        }
+
+        .remove-btn {
+          position: absolute;
+          display: none;
+          top: 0;
+          right: 0;
+          background: red;
+          color: #fff;
+          z-index: 9;
+          padding: 0 2px;
+          cursor: pointer;
+          border-radius: 0 0 0 4px;
+          &:hover {
+            background: #c70000;
+          }
+        }
+      }
+    }
+
+    .add-category {
+      // margin-top: 10px;
+      display: flex;
+      justify-content: flex-end;
+    }
+
+    .manufacturers {
+      .module-edit-group {
+        margin-top: 5px;
+      }
+    }
+
+    .tab-edit-category > .el-tabs__header > .el-tabs__nav-wrap {
+      .el-tabs__item {
+        padding: 0 10px !important;
+      }
+    }
+
+    .autocomplete-group-wrapper {
+      .item-group-wrapper {
+        background: #fff;
+      }
+    }
+  }
 }
\ No newline at end of file
diff --git a/resources/beike/admin/views/pages/design/builder/component/text_i18n.blade.php b/resources/beike/admin/views/pages/design/builder/component/text_i18n.blade.php
new file mode 100644
index 00000000..67519ed0
--- /dev/null
+++ b/resources/beike/admin/views/pages/design/builder/component/text_i18n.blade.php
@@ -0,0 +1,91 @@
+<template id="text-i18n-template">
+  <div class="text-i18n-template">
+    <el-tabs v-if="languages.length > 1" value="language-{{ current_language_code() }}" :stretch="languages.length > 5 ? true : false" type="card">
+      <el-tab-pane v-for="(item, index) in languages" :key="index" :label="item.name" :name="'language-' + item.code">
+        <span slot="label" style="padding: 0 4px; font-size: 12px">@{{ item.name }}</span>
+
+        <div class="i18n-inner">
+          <el-input :type="type" :rows="4" :placeholder="item.name" :key="index" :size="size" v-model="value[item.code]" @input="valueChanged(item.code)"></el-input>
+        </div>
+      </el-tab-pane>
+    </el-tabs>
+
+    <div class="i18n-inner" v-else>
+      <el-input :type="type" :rows="4" :placeholder="languages[0].name" :size="size" v-model="value[languages[0].code]" @input="valueChanged(languages[0].code)"></el-input>
+    </div>
+  </div>
+</template>
+
+<script type="text/javascript">
+Vue.component('text-i18n', {
+  template: '#text-i18n-template',
+  props: {
+    value: {
+      default: null
+    },
+    size: {
+      default: 'small'
+    },
+    type: {
+      type: String,
+      default: 'text'
+    },
+  },
+  data: function () {
+    return {
+      languages: $languages,
+      internalValues: {}
+    }
+  },
+
+  mounted() {
+    // console.log(this.internalValues)
+  },
+
+  created: function () {
+    this.languages.forEach(e => {
+      Vue.set(this.internalValues, e.code, this.value[e.code] || '');
+    })
+    this.$emit('input', this.internalValues);
+  },
+
+  methods: {
+    valueChanged: function (code) {
+      this.internalValues[code] = this.value[code];
+      this.$emit('input', this.internalValues);
+    }
+  }
+});
+</script>
+
+<style>
+  .text-i18n-template .el-tabs__nav {
+    display: flex;
+    border-color: #ebecf5;
+  }
+
+  .text-i18n-template .el-tabs__nav > div {
+    background: #ebecf5;
+    border-left: 1px solid #d7dbf7 !important;
+    padding: 0 !important;
+    flex: 1;
+    height: 30px;
+    line-height: 30px;
+    {% if languages|length < 5 %}
+    min-width: 50px;
+    {% endif %}
+    text-align: center;
+  }
+
+  .text-i18n-template .el-tabs__nav > div:first-of-type {
+    border-left: none !important;
+  }
+
+  .text-i18n-template .el-tabs__nav > div.is-active {
+    background: #fff !important;
+  }
+
+  .text-i18n-template .i18n-inner {
+    margin-top: 5px;
+  }
+</style>
diff --git a/resources/beike/admin/views/pages/design/builder/index.blade.php b/resources/beike/admin/views/pages/design/builder/index.blade.php
index 864c210e..7147ef2b 100644
--- a/resources/beike/admin/views/pages/design/builder/index.blade.php
+++ b/resources/beike/admin/views/pages/design/builder/index.blade.php
@@ -105,6 +105,7 @@
 
   @include('admin::pages.design.builder.component.image_selector')
   @include('admin::pages.design.builder.component.link_selector')
+  @include('admin::pages.design.builder.component.text_i18n')
 
   <script>
     let app = new Vue({
@@ -160,16 +161,26 @@
 
         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: randomString(16),
+            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)
           })
         },
 
diff --git a/resources/beike/admin/views/pages/design/module/tab_product.blade.php b/resources/beike/admin/views/pages/design/module/tab_product.blade.php
index 94cf4fdd..9530b633 100644
--- a/resources/beike/admin/views/pages/design/module/tab_product.blade.php
+++ b/resources/beike/admin/views/pages/design/module/tab_product.blade.php
@@ -1,35 +1,12 @@
-<template id="module-editor-product-tab-template">
-  <div class="module-editor-product-tab-template">
-    <div class="module-editor-title">设置</div>
+<template id="module-editor-tab-product-template">
+  <div class="module-editor-tab-product-template">
+    <div class="module-editor-row">设置</div>
     <div class="module-edit-group">
       <div class="module-edit-title">模块标题</div>
       <text-i18n v-model="module.title"></text-i18n>
     </div>
 
-    <div class="module-editor-title">内容</div>
-    <div class="module-edit-group">
-      <div class="module-edit-title">选择图片</div>
-      <div class="pb-images-selector">
-        <div class="selector-head">
-          <div class="left">
-            <img :src="thumbnail(module.image.image[{{ current_language_code() }}], 40, 40)" class="img-responsive">
-          </div>
-
-          <div class="right"><i :class="'fa fa-angle-'+(module.image.show ? 'up' : 'down')"></i></div>
-        </div>
-        <div :class="'pb-images-list ' + (module.image.show ? 'active' : '')">
-          <div class="pb-images-top">
-            <div class="pb-image-selector-wrapper">
-              <pb-image-selector v-model="module.image.image"></pb-image-selector>
-              <div class="tag">建议尺寸: 440 x 1022</div>
-            </div>
-          </div>
-
-          <link-selector v-model="module.image.link"></link-selector>
-        </div>
-      </div>
-    </div>
-
+    <div class="module-editor-row">内容</div>
     <div class="module-edit-group">
       <div class="module-edit-title">配置商品</div>
       <el-tabs v-model="editableTabsValue" class="tab-edit-category" type="card" editable @edit="handleTabsEdit">
@@ -88,9 +65,9 @@
 </template>
 
 <script type="text/javascript">
-Vue.component('module-editor-product-tab', {
+Vue.component('module-editor-tab-product', {
   delimiters: ['${', '}'],
-  template: '#module-editor-product-tab-template',
+  template: '#module-editor-tab-product-template',
   props: ['module'],
   data: function () {
     return {
@@ -123,7 +100,7 @@ Vue.component('module-editor-product-tab', {
 
   methods: {
     tabTitleLanguage(titles) {
-      return titles[{{ current_language_code() }}];
+      return titles['{{ current_language_code() }}'];
     },
 
     tabsValueProductData() {
diff --git a/themes/default/design/tab_product.blade.php b/themes/default/design/tab_product.blade.php
index 47e43167..d7e60dee 100644
--- a/themes/default/design/tab_product.blade.php
+++ b/themes/default/design/tab_product.blade.php
@@ -14,8 +14,8 @@
     <div class="container">
       @if ($content['tabs'])
         <div class="nav justify-content-center mb-3">
-          @foreach ($content['tabs'] as $key => $title)
-          <a class="nav-link {{ $loop->first ? 'active' : '' }}" href="#tab-product-{{ $loop->index }}" data-bs-toggle="tab">{{ $key }}</a>
+          @foreach ($content['tabs'] as $key => $tabs)
+          <a class="nav-link {{ $loop->first ? 'active' : '' }}" href="#tab-product-{{ $loop->index }}" data-bs-toggle="tab">{{ $tabs['title'] }}</a>
           @endforeach
         </div>
         <div class="tab-content">