图片模块

beike/Admin/View/DesignBuilders/Image401.php

@@ -0,0 +1,44 @@
+<?php
+/**
+ * Render.php
+ *
+ * @copyright  2022 opencart.cn - All Rights Reserved
+ * @link       http://www.guangdawangluo.com
+ * @author     Edward Yang <yangjin@opencart.cn>
+ * @created    2022-07-08 17:09:15
+ * @modified   2022-07-08 17:09:15
+ */
+
+namespace Beike\Admin\View\DesignBuilders;
+
+use Illuminate\View\Component;
+use Illuminate\Contracts\View\View;
+
+class Image401 extends Component
+{
+    /**
+     * Create a new component instance.
+     *
+     * @return void
+     */
+    public function __construct()
+    {
+    }
+
+    /**
+     * Get the view / contents that represent the component.
+     *
+     * @return View
+     */
+    public function render(): View
+    {
+        $data['register'] = [
+            'code' => 'image_401',
+            'sort' => 0,
+            'name' => '一行四图-pro',
+            'icon' => '&#xe634;',
+        ];
+
+        return view('admin::pages.design.module.image_401', $data);
+    }
+}

resources/beike/admin/views/pages/design/module/image_401.blade.php

@@ -0,0 +1,64 @@
+<template id="module-editor-image-401-template">
+  <div class="image-edit-wrapper">
+    <div class="module-editor-title">{{ modules_content }}</div>
+    <div class="module-edit-group">
+      <div class="module-edit-title">{{ modules_select_image }}</div>
+      <div class="pb-images-selector" v-for="(item, index) in module.images" :key="index">
+        <div class="selector-head" @click="itemShow(index)">
+          <div class="left">
+
+            <img :src="thumbnail(item.image[{{ current_language_code() }}], 40, 40)" class="img-responsive">
+          </div>
+
+          <div class="right"><i :class="'el-icon-arrow-'+(item.show ? 'up' : 'down')"></i></div>
+        </div>
+        <div :class="'pb-images-list ' + (item.show ? 'active' : '')">
+          <div class="pb-images-top">
+            <pb-image-selector v-model="item.image"></pb-image-selector>
+            <div class="tag">{{ text_suggested_size }} 1060 x 380</div>
+          </div>
+          <link-selector v-model="item.link"></link-selector>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script type="text/javascript">
+setTimeout(() => {
+  app.source.modules.push(@json($register))
+}, 100)
+Vue.component('module-editor-image-401', {
+  delimiters: ['${', '}'],
+
+  template: '#module-editor-image-401-template',
+
+  props: ['module'],
+
+  data: function () {
+    return {
+      //
+    }
+  },
+
+  watch: {
+    module: {
+      handler: function (val) {
+        this.$emit('on-changed', val);
+      },
+      deep: true
+    }
+  },
+
+  created: function () {
+    //
+  },
+
+  methods: {
+    itemShow(index) {
+      this.module.images.find((e, key) => {if (index != key) return e.show = false});
+      this.module.images[index].show = !this.module.images[index].show;
+    },
+  }
+});
+</script>

themes/default/design/image_401.blade.php

@@ -0,0 +1,28 @@
+<div class="column-item" id="{{ $module_id }}">
+  <div  class="container">
+    <div class="module-transverse-2">
+      <div class="row">
+        <div class="col-md-6 hidden-sm col-xs-12">
+          <a href="">
+            <img src="" class="img-responsive">
+          </a>
+        </div>
+
+        <div class="col-md-3 hidden-xs col-sm-6 right">
+          <a href="">
+            <img src="" class="img-responsive">
+          </a>
+        </div>
+
+        <div class="col-md-3 hidden-xs col-sm-6 right">
+          <a href="">
+            <img src="" class="img-responsive">
+          </a>
+          <a href="">
+            <img src="" class="img-responsive">
+          </a>
+        </div>
+      </div>
+    </div>
+  </div>
+</div>