wip

beike/Admin/Http/Controllers/DesignFooterController.php

@@ -0,0 +1,77 @@
+<?php
+
+namespace Beike\Admin\Http\Controllers;
+
+use Illuminate\View\View;
+use Illuminate\Http\Request;
+use Beike\Services\DesignService;
+use Beike\Repositories\SettingRepo;
+use Beike\Repositories\LanguageRepo;
+
+class DesignFooterController extends Controller
+{
+    /**
+     * 展示所有模块编辑器
+     *
+     * @param Request $request
+     * @return View
+     */
+    public function index(Request $request): View
+    {
+        $data = [
+            'languages' => LanguageRepo::all(),
+            'design_settings' => system_setting('base.design_setting'),
+        ];
+        return view('admin::pages.design.builder.footer', $data);
+    }
+
+
+    /**
+     * 预览模块显示结果
+     *
+     * @param Request $request
+     * @return View
+     * @throws \Exception
+     */
+    public function preview(Request $request): View
+    {
+        $module = json_decode($request->getContent(), true);
+        $moduleId = $module['module_id'] ?? '';
+        $moduleCode = $module['code'] ?? '';
+        $content = $module['content'] ?? '';
+        $viewPath = "design.{$moduleCode}";
+
+        $viewData = [
+            'code' => $moduleCode,
+            'module_id' => $moduleId,
+            'view_path' => $viewPath,
+            'content' => DesignService::handleModuleContent($moduleCode, $content),
+            'design' => (bool)$request->get('design')
+        ];
+
+        return view($viewPath, $viewData);
+    }
+
+
+    /**
+     * 更新所有数据
+     *
+     * @param Request $request
+     * @return array
+     * @throws \Throwable
+     */
+    public function update(Request $request): array
+    {
+        $content = json_decode($request->getContent(), true);
+        $moduleData = DesignService::handleRequestModules($content);
+        $data = [
+            'type' => 'system',
+            'space' => 'base',
+            'name' => 'design_setting',
+            'value' => json_encode($moduleData),
+            'json' => 1
+        ];
+        SettingRepo::createOrUpdate($data);
+        return json_success("保存成功");
+    }
+}

beike/Admin/Repositories/PermissionRepo.php

@@ -145,7 +145,7 @@ class PermissionRepo
      */
     private function getSettingPermissions(): array
     {
-        $routes = ['settings_index', 'design_index'];
+        $routes = ['settings_index', 'design_index', 'design_footer_index'];
         $items = $this->getPermissionList('setting', $routes);
         return hook_filter('role.setting_permissions', $items);
     }

beike/Admin/Routes/admin.php

@@ -42,6 +42,8 @@ Route::prefix($adminName)
                 Route::put('design/builder', [Controllers\DesignController::class, 'update'])->name('design.update');
                 Route::post('design/builder/preview', [Controllers\DesignController::class, 'preview'])->name('design.module.preview');
 
+                Route::get('design_footer/builder', [Controllers\DesignFooterController::class, 'index'])->name('design_footer.index');
+
                 Route::put('edit', [Controllers\EditController::class, 'update'])->name('edit');
                 Route::get('edit/locale', [Controllers\EditController::class, 'locale'])->name('edit.locale');
 

beike/Admin/View/Components/Sidebar.php

@@ -175,8 +175,9 @@ class Sidebar extends Component
             ['route' => 'tax_rates.index', 'icon' => 'fa fa-tachometer-alt'],
             ['route' => 'tax_classes.index', 'icon' => 'fa fa-tachometer-alt'],
             ['route' => 'currencies.index', 'icon' => 'fa fa-tachometer-alt'],
-            ['route' => 'design.index', 'icon' => 'fa fa-tachometer-alt', 'blank' => true],
             ['route' => 'languages.index', 'icon' => 'fa fa-tachometer-alt'],
+            ['route' => 'design.index', 'icon' => 'fa fa-tachometer-alt', 'blank' => true],
+            ['route' => 'design_footer.index', 'icon' => 'fa fa-tachometer-alt', 'blank' => true],
         ];
         return hook_filter('sidebar.setting_routes', $routes);
     }

plugins/Stripe/Views/checkout/payment.blade.php

@@ -5,106 +5,109 @@
 <script src="{{ asset('plugin/stripe/js/demo.js') }}"></script>
 <link rel="stylesheet" href="{{ asset('plugin/stripe/css/demo.css') }}">
 
-<div class="row mt-5" id="bk-stripe-app" v-cloak>
-    <div class="col-12 col-md-8">
-        <div class="checkout-black">
-            <h5 class="checkout-title">卡信息</h5>
-            <div class="border px-3 py-2">
-                <div class="pay-iamges">
-                    @for ($i = 1; $i <= 5; $i++)
-                        <img src="{{ asset("plugin/stripe/image/pay-$i.png") }}" class="img-fluid">
-                    @endfor
-                </div>
-                <el-form ref="form" label-position="top" :rules="rules" :model="form" class="form-wrap">
-                    <el-form-item label="卡号" prop="cardnum">
-                        <el-input v-model="form.cardnum"></el-input>
-                    </el-form-item>
-                    <el-form-item label="截止日期" required>
-                        <div class="d-flex align-items-center">
-                            <el-form-item prop="year">
-                                <el-date-picker class="w-auto me-2" v-model="form.year" format="yyyy" value-format="yyyy"
-                                                type="year" placeholder="选择年">
-                                </el-date-picker>
-                            </el-form-item>
-                            <el-form-item prop="month">
-                                <el-date-picker v-model="form.month" class="w-auto" format="MM" value-format="MM" type="month"
-                                                placeholder="选择月">
-                                </el-date-picker>
-                            </el-form-item>
-                        </div>
-                    </el-form-item>
-                    <el-form-item label="安全码" prop="cvv">
-                        <el-input v-model="form.cvv"></el-input>
-                    </el-form-item>
-                    <el-form-item>
-                        <el-checkbox v-model="form.remenber">記住這張卡以備將來使用</el-checkbox>
-                    </el-form-item>
-                </el-form>
-            </div>
+<div class="mt-5" id="bk-stripe-app" v-cloak>
+  <div class="card">
+    <div class="card-body">
+      <div class="checkout-black">
+        <h5 class="checkout-title">卡信息</h5>
+        <div class="">
+          <div class="pay-iamges">
+              <img src="{{ asset("plugin/stripe/image/pay-image.png") }}" class="img-fluid">
+          </div>
+          <el-form ref="form" label-position="top" :rules="rules" :model="form" class="form-wrap w-max-500">
+            <el-form-item label="卡号" prop="cardnum">
+              <el-input v-model="form.cardnum"></el-input>
+            </el-form-item>
+            <el-form-item label="截止日期" required>
+              <div class="d-flex align-items-center">
+                <el-form-item prop="year">
+                  <el-date-picker class="w-auto me-2" v-model="form.year" format="yyyy" value-format="yyyy"
+                    type="year" placeholder="选择年">
+                  </el-date-picker>
+                </el-form-item>
+                <el-form-item prop="month">
+                  <el-date-picker v-model="form.month" class="w-auto" format="MM" value-format="MM" type="month"
+                    placeholder="选择月">
+                  </el-date-picker>
+                </el-form-item>
+              </div>
+            </el-form-item>
+            <el-form-item label="安全码" prop="cvv">
+              <el-input v-model="form.cvv"></el-input>
+            </el-form-item>
+            <el-form-item>
+              <el-checkbox v-model="form.remenber">記住這張卡以備將來使用</el-checkbox>
+            </el-form-item>
+            <el-form-item>
+              <button class="btn btn-primary" type="button" @click="checkedBtnCheckoutConfirm('form')">支付</button>
+            </el-form-item>
+          </el-form>
         </div>
+      </div>
     </div>
+  </div>
 </div>
 
 <script>
-    new Vue({
-        el: '#bk-stripe-app',
+  new Vue({
+    el: '#bk-stripe-app',
 
-        data: {
-            form: {
-                cardnum: '',
-                year: '',
-                month: '',
-                cvv: '',
-                remenber: false,
-            },
+    data: {
+      form: {
+        cardnum: '',
+        year: '',
+        month: '',
+        cvv: '',
+        remenber: false,
+      },
 
-            source: {
-                order: @json($order ?? null),
-            },
+      source: {
+        order: @json($order ?? null),
+      },
 
-            rules: {
-                cardnum: [{
-                    required: true,
-                    message: '请输入卡号',
-                    trigger: 'blur'
-                }, ],
-                cvv: [{
-                    required: true,
-                    message: '请输入安全码',
-                    trigger: 'blur'
-                }, ],
-                year: [{
-                    required: true,
-                    message: '请选择年',
-                    trigger: 'blur'
-                }, ],
-                month: [{
-                    required: true,
-                    message: '请选择月',
-                    trigger: 'blur'
-                }, ],
-            }
-        },
+      rules: {
+        cardnum: [{
+          required: true,
+          message: '请输入卡号',
+          trigger: 'blur'
+        }, ],
+        cvv: [{
+          required: true,
+          message: '请输入安全码',
+          trigger: 'blur'
+        }, ],
+        year: [{
+          required: true,
+          message: '请选择年',
+          trigger: 'blur'
+        }, ],
+        month: [{
+          required: true,
+          message: '请选择月',
+          trigger: 'blur'
+        }, ],
+      }
+    },
 
-        beforeMount() {
-            // console.log(33)
-        },
+    beforeMount() {
+      // console.log(33)
+    },
 
-        methods: {
-            checkedBtnCheckoutConfirm(form) {
-                this.$refs[form].validate((valid) => {
-                    if (!valid) {
-                        this.$message.error('请检查表单是否填写正确');
-                        return;
-                    }
+    methods: {
+      checkedBtnCheckoutConfirm(form) {
+        this.$refs[form].validate((valid) => {
+          if (!valid) {
+            this.$message.error('请检查表单是否填写正确');
+            return;
+          }
 
-                    console.log(this.form);
+          console.log(this.form);
 
-                    $http.post(`/orders/${this.source.order.number}/pay`, this.form).then((res) => {
-                        console.log(res)
-                    })
-                });
-            }
-        }
-    })
+          $http.post(`/orders/${this.source.order.number}/pay`, this.form).then((res) => {
+            console.log(res)
+          })
+        });
+      }
+    }
+  })
 </script>

public/build/beike/shop/default/css/app.css

@@ -168,6 +168,86 @@ body[class^=page-account-] {
   min-height: 1000px;
 }
 
+.h-min-100 {
+  min-width: 100px;
+}
+
+.h-min-200 {
+  min-width: 200px;
+}
+
+.h-min-300 {
+  min-width: 300px;
+}
+
+.h-min-400 {
+  min-width: 400px;
+}
+
+.h-min-500 {
+  min-width: 500px;
+}
+
+.h-min-600 {
+  min-width: 600px;
+}
+
+.h-min-700 {
+  min-width: 700px;
+}
+
+.h-min-800 {
+  min-width: 800px;
+}
+
+.h-min-900 {
+  min-width: 900px;
+}
+
+.h-min-1000 {
+  min-width: 1000px;
+}
+
+.w-max-100 {
+  max-width: 100px;
+}
+
+.w-max-200 {
+  max-width: 200px;
+}
+
+.w-max-300 {
+  max-width: 300px;
+}
+
+.w-max-400 {
+  max-width: 400px;
+}
+
+.w-max-500 {
+  max-width: 500px;
+}
+
+.w-max-600 {
+  max-width: 600px;
+}
+
+.w-max-700 {
+  max-width: 700px;
+}
+
+.w-max-800 {
+  max-width: 800px;
+}
+
+.w-max-900 {
+  max-width: 900px;
+}
+
+.w-max-1000 {
+  max-width: 1000px;
+}
+
 .hp-100 {
   height: 100px;
 }

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

@@ -0,0 +1,258 @@
+<!doctype html>
+<html lang="en">
+
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport"
+    content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
+  <meta http-equiv="X-UA-Compatible" content="ie=edge">
+  <meta name="csrf-token" content="{{ csrf_token() }}">
+  <meta name="asset" content="{{ asset('/') }}">
+  <base href="{{$admin_base_url}}">
+  <title>首页编辑器</title>
+  <script src="{{ asset('vendor/jquery/jquery-3.6.0.min.js') }}"></script>
+  <script src="{{ asset('vendor/layer/3.5.1/layer.js') }}"></script>
+  <script src="{{ mix('build/beike/admin/js/app.js') }}"></script>
+  <script src="{{ asset('vendor/vue/2.6.14/vue.js') }}"></script>
+  <script src="{{ asset('vendor/vue/Sortable.min.js') }}"></script>
+  <script src="{{ asset('vendor/vue/vuedraggable.js') }}"></script>
+  <script src="{{ asset('vendor/element-ui/2.15.6/js.js') }}"></script>
+  <link rel="stylesheet" href="{{ asset('vendor/element-ui/2.15.6/css.css') }}">
+  <link rel="stylesheet" type="text/css" href="{{ asset('/build/beike/admin/css/design.css') }}">
+  @stack('header')
+</head>
+
+<body class="page-design">
+  <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'">
+        <component
+          :is="editingModuleComponent"
+          :key="design.editingModuleIndex"
+          :module="form.modules[design.editingModuleIndex].content"
+          @on-changed="moduleUpdated"
+        ></component>
+      </div>
+
+      <el-row v-if="design.editType == 'add'" class="modules-list">
+        <el-col :span="12" v-for="(item, index) in source.modules" :key="index">
+          <div @click="addModuleButtonClicked(item.code)" class="module-list">
+            <div class="module-info">
+              <div class="icon"><i :style="item.style" class="iconfont" v-html="item.icon"></i></div>
+              <div class="name">@{{ item.name }}</div>
+            </div>
+          </div>
+        </el-col>
+      </el-row>
+    </div>
+    <div class="preview-iframe">
+      <iframe src="{{ url('/') }}?design=1" frameborder="0" id="preview-iframe" width="100%" height="100%"></iframe>
+    </div>
+  </div>
+
+
+  <script>
+    var $languages = @json($languages);
+    var $language_id = '{{ locale() }}';
+
+    function languagesFill(text) {
+      var obj = {};
+      $languages.map(e => {
+        obj[e.code] = text
+      })
+
+      return obj;
+    }
+
+    Vue.prototype.thumbnail = function thumbnail(image, width, height) {
+      return '{{ asset('') }}' + image;
+    };
+
+    function randomString(length) {
+      let str = '';
+      for (; str.length < length; str += Math.random().toString(36).substr(2));
+      return str.substr(0, length);
+    }
+
+    // iframe 操作
+    var previewWindow = null;
+    $('#preview-iframe').on('load', function(event) {
+      previewWindow = document.getElementById("preview-iframe").contentWindow;
+      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>
+
+  @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({
+      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: {},
+      // 组件方法
+      methods: {
+        moduleUpdated(module) {
+          const data = this.form.modules[this.design.editingModuleIndex]
+
+          $http.post('design/builder/preview?design=1', data, {hload: true}).then((res) => {
+            $(previewWindow.document).find('#module-' + data.module_id).replaceWith(res);
+          })
+        },
+
+        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;
+          this.design.editType = 'module';
+        },
+
+        saveButtonClicked() {
+          $http.put('design/builder', this.form).then((res) => {
+            layer.msg(res.message)
+          })
+        },
+
+        exitDesign() {
+          history.back();
+        },
+
+        viewHome() {
+          window.open('/');
+        },
+
+        showAllModuleButtonClicked() {
+          this.design.editType = 'add';
+          this.design.editingModuleIndex = 0;
+        }
+      },
+      created () {
+        this.form = @json($design_settings)
+      },
+      mounted () {
+      },
+    })
+
+    // window.addEventListener('message', (event) => {
+    //   event.stopPropagation()
+    //   if (typeof(event.data.index) !== 'undefined') {
+    //     app.editModuleButtonClicked(event.data.index)
+    //   }
+    // }, false)
+  </script>
+</body>
+</html>

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

@@ -12,7 +12,7 @@
       <draggable
         ghost-class="dragabble-ghost"
         :list="module.images"
-        :options="{animation: 330}"
+        :options="{animation: 330, handle: '.icon-rank'}"
       >
         <div class="pb-images-selector" v-for="(item, index) in module.images" :key="index">
           <div class="selector-head" @click="itemShow(index)">

resources/beike/shop/default/css/global.scss

@@ -38,6 +38,20 @@ body[class^="page-account-"] {
   }
 }
 
+// 生成 100 200 300 ... 1000 的最小宽度
+@for $i from 1 through 10 {
+  .h-min-#{$i}00 {
+    min-width: #{$i}00px;
+  }
+}
+
+// 生成 100 200 300 ... 1000 的最大宽度
+@for $i from 1 through 10 {
+  .w-max-#{$i}00 {
+    max-width: #{$i}00px;
+  }
+}
+
 // 生成 100 200 300 ... 1000 的高度
 @for $i from 1 through 10 {
   .hp-#{$i}00 {

resources/lang/zh_cn/admin/common.php

@@ -39,6 +39,7 @@ return [
     'currencies_index' => '货币管理',
     'languages_index' => '语言管理',
     'design_index' => '首页装修',
+    'design_footer_index' => '页尾装修',
     'categories_index' => '产品分类',
     'products_index' => '商品管理',
     'products_trashed' => '回收站',

resources/lang/zh_cn/admin/setting.php

@@ -12,4 +12,5 @@
 return [
     'settings_index' => '系统设置',
     'design_index' => '首页编辑器',
+    'design_footer_index' => '页尾编辑器',
 ];

themes/default/checkout/payment.blade.php

@@ -3,31 +3,24 @@
 @section('body-class', 'page-bk-stripe')
 
 @section('content')
-    <div class="container">
-        <div class="row mt-5 justify-content-center">
-            <div class="col-12 col-md-9">@include('shared.steps', ['steps' => 4])</div>
-        </div>
-
-
-        <div class="col-12 col-md-4 right-column">
-            <div class="card total-wrap">
-                <div class="card-header d-flex align-items-center justify-content-between">
-                    <h5 class="mb-0">订单结账</h5>
-                    <span class="rounded-circle bg-primary"></span>
-                </div>
-                <div class="card-body">
-                    <ul class="totals">
-                        <li><span>订单号</span><span>@{{ source.order.number }}</span></li>
-                        <li><span>运费</span><span>15</span></li>
-                        <li><span>应付总金额</span><span v-text="source.order.total"></span></li>
-                    </ul>
-                    <div class="d-grid gap-2 mt-3">
-                        <button class="btn btn-primary" type="button" @click="checkedBtnCheckoutConfirm('form')">支付</button>
-                    </div>
-                </div>
-            </div>
-        </div>
-
-        {!! $payment !!}
+  <div class="container">
+    <div class="row mt-5 mb-5 justify-content-center">
+      <div class="col-12 col-md-9">@include('shared.steps', ['steps' => 4])</div>
     </div>
+
+
+    <div class="col-12">
+      <div class="card order-wrap border total-wrap">
+        <h5 class="checkout-title">订单结账</h5>
+        <div class="card-body">
+          <ul class="totals">
+            <li><span>订单号</span><span>{{ $order->number }}</span></li>
+            <li><span>应付总金额</span><span v-text="source.order.total">{{ $order->total }}</span></li>
+          </ul>
+
+          {!! $payment !!}
+        </div>
+      </div>
+    </div>
+  </div>
 @endsection