页尾编辑
This commit is contained in:
parent
c273d52f54
commit
2e4115dbe6
|
|
@ -19,7 +19,7 @@ class DesignFooterController extends Controller
|
|||
public function index(Request $request): View
|
||||
{
|
||||
$data = [
|
||||
'languages' => LanguageRepo::all(),
|
||||
// 'languages' => LanguageRepo::all(),
|
||||
'design_settings' => system_setting('base.footer_setting'),
|
||||
];
|
||||
return view('admin::pages.design.builder.footer', $data);
|
||||
|
|
|
|||
|
|
@ -339,6 +339,40 @@ body.page-design .autocomplete-group-wrapper .item-group-wrapper .item i.right:h
|
|||
color: #222;
|
||||
}
|
||||
|
||||
.footer-link-item {
|
||||
padding: 6px 10px;
|
||||
background: #f5f5f5;
|
||||
margin-bottom: 10px;
|
||||
position: relative;
|
||||
}
|
||||
.footer-link-item:hover .remove-item {
|
||||
display: block;
|
||||
}
|
||||
.footer-link-item .icon-rank {
|
||||
position: absolute;
|
||||
top: 11px;
|
||||
left: 10px;
|
||||
z-index: 9;
|
||||
}
|
||||
.footer-link-item .link-selector-wrap > .title {
|
||||
padding-left: 20px;
|
||||
}
|
||||
.footer-link-item .remove-item {
|
||||
position: absolute;
|
||||
display: none;
|
||||
top: 0;
|
||||
right: 0;
|
||||
background: red;
|
||||
color: #fff;
|
||||
z-index: 9;
|
||||
padding: 0 4px;
|
||||
cursor: pointer;
|
||||
border-radius: 0 0 0 4px;
|
||||
}
|
||||
.footer-link-item .remove-item:hover {
|
||||
background: #c70000;
|
||||
}
|
||||
|
||||
.file-manager-box .layui-layer-title {
|
||||
background-color: #293042;
|
||||
color: #fff;
|
||||
|
|
|
|||
|
|
@ -2063,34 +2063,18 @@ module.exports = {
|
|||
"use strict";
|
||||
__webpack_require__.r(__webpack_exports__);
|
||||
/* harmony import */ var _js_http__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! ../../../js/http */ "./resources/js/http.js");
|
||||
/* harmony import */ var _common__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ./common */ "./resources/beike/admin/js/common.js");
|
||||
var _document$querySelect;
|
||||
|
||||
|
||||
window.$http = _js_http__WEBPACK_IMPORTED_MODULE_0__["default"];
|
||||
|
||||
window.bk = _common__WEBPACK_IMPORTED_MODULE_1__["default"];
|
||||
var base = document.querySelector('base').href;
|
||||
var asset = document.querySelector('meta[name="asset"]').content;
|
||||
var editor_language = ((_document$querySelect = document.querySelector('meta[name="editor_language"]')) === null || _document$querySelect === void 0 ? void 0 : _document$querySelect.content) || 'zh_cn';
|
||||
$(document).on('click', '.open-file-manager', function (event) {
|
||||
var $this = $(this);
|
||||
layer.open({
|
||||
type: 2,
|
||||
title: '图片管理器',
|
||||
shadeClose: false,
|
||||
skin: 'file-manager-box',
|
||||
scrollbar: false,
|
||||
shade: 0.4,
|
||||
area: ['1060px', '680px'],
|
||||
content: "".concat(base, "/file_manager"),
|
||||
success: function success(layerInstance, index) {
|
||||
var iframeWindow = window[layerInstance.find("iframe")[0]["name"]];
|
||||
|
||||
iframeWindow.callback = function (images) {
|
||||
$this.find('img').prop('src', images[0].url);
|
||||
$this.next('input').val(images[0].path);
|
||||
$this.next('input')[0].dispatchEvent(new Event('input'));
|
||||
};
|
||||
}
|
||||
});
|
||||
bk.fileManagerIframe();
|
||||
});
|
||||
|
||||
if (typeof Vue != 'undefined') {
|
||||
|
|
@ -2126,7 +2110,7 @@ $(document).ready(function ($) {
|
|||
tinymceInit();
|
||||
});
|
||||
|
||||
function tinymceInit() {
|
||||
var tinymceInit = function tinymceInit() {
|
||||
if (typeof tinymce == 'undefined') {
|
||||
return;
|
||||
}
|
||||
|
|
@ -2148,40 +2132,75 @@ function tinymceInit() {
|
|||
fontsize_formats: "10px 12px 14px 18px 24px 36px",
|
||||
relative_urls: true,
|
||||
setup: function setup(ed) {
|
||||
var height = ed.getElement().dataset.tinymceHeight; // console.log(ed);
|
||||
// 修改 tinymce 的高度
|
||||
// if (height) {
|
||||
// ed.theme.resizeTo(null, height);
|
||||
// }
|
||||
|
||||
ed.ui.registry.addButton('toolbarImageButton', {
|
||||
// text: '',
|
||||
icon: 'image',
|
||||
onAction: function onAction() {
|
||||
layer.open({
|
||||
type: 2,
|
||||
title: '图片管理器',
|
||||
shadeClose: false,
|
||||
skin: 'file-manager-box',
|
||||
scrollbar: false,
|
||||
shade: 0.4,
|
||||
area: ['1060px', '680px'],
|
||||
content: "".concat(base, "/file_manager"),
|
||||
success: function success(layerInstance, index) {
|
||||
var iframeWindow = window[layerInstance.find("iframe")[0]["name"]];
|
||||
|
||||
iframeWindow.callback = function (images) {
|
||||
if (images.length) {
|
||||
images.forEach(function (e) {
|
||||
ed.insertContent("<img src='/".concat(e.path, "' class=\"img-fluid\" />"));
|
||||
});
|
||||
}
|
||||
};
|
||||
bk.fileManagerIframe(function (images) {
|
||||
if (images.length) {
|
||||
images.forEach(function (e) {
|
||||
ed.insertContent("<img src='/".concat(e.path, "' class=\"img-fluid\" />"));
|
||||
});
|
||||
}
|
||||
});
|
||||
}
|
||||
}); // ed.on('change', function(e) {
|
||||
// if (e.target.targetElm.dataset.key) {
|
||||
// app.form[e.target.targetElm.dataset.key] = ed.getContent()
|
||||
// }
|
||||
// });
|
||||
});
|
||||
}
|
||||
});
|
||||
}
|
||||
};
|
||||
|
||||
/***/ }),
|
||||
|
||||
/***/ "./resources/beike/admin/js/common.js":
|
||||
/*!********************************************!*\
|
||||
!*** ./resources/beike/admin/js/common.js ***!
|
||||
\********************************************/
|
||||
/***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => {
|
||||
|
||||
"use strict";
|
||||
__webpack_require__.r(__webpack_exports__);
|
||||
/* harmony export */ __webpack_require__.d(__webpack_exports__, {
|
||||
/* harmony export */ "default": () => (__WEBPACK_DEFAULT_EXPORT__)
|
||||
/* harmony export */ });
|
||||
/*
|
||||
* @copyright 2022 opencart.cn - All Rights Reserved.
|
||||
* @link https://www.guangdawangluo.com
|
||||
* @Author PS <pushuo@opencart.cn>
|
||||
* @Date 2022-08-09 09:39:34
|
||||
* @LastEditTime 2022-08-09 09:43:18
|
||||
*/
|
||||
/* harmony default export */ const __WEBPACK_DEFAULT_EXPORT__ = ({
|
||||
fileManagerIframe: function fileManagerIframe(callback) {
|
||||
var base = document.querySelector('base').href;
|
||||
var $this = $(this);
|
||||
layer.open({
|
||||
type: 2,
|
||||
title: '图片管理器',
|
||||
shadeClose: false,
|
||||
skin: 'file-manager-box',
|
||||
scrollbar: false,
|
||||
shade: 0.4,
|
||||
area: ['1060px', '680px'],
|
||||
content: "".concat(base, "/file_manager"),
|
||||
success: function success(layerInstance, index) {
|
||||
var iframeWindow = window[layerInstance.find("iframe")[0]["name"]];
|
||||
|
||||
iframeWindow.callback = function (images) {
|
||||
if (callback && typeof callback === "function") return callback(images);
|
||||
$this.find('img').prop('src', images[0].url);
|
||||
$this.next('input').val(images[0].path);
|
||||
$this.next('input')[0].dispatchEvent(new Event('input'));
|
||||
};
|
||||
}
|
||||
});
|
||||
}
|
||||
});
|
||||
|
||||
/***/ }),
|
||||
|
||||
|
|
|
|||
|
|
@ -582,27 +582,27 @@ footer {
|
|||
background: #fafafa;
|
||||
margin-top: 5rem;
|
||||
}
|
||||
footer .footer-top {
|
||||
footer .services-wrap {
|
||||
padding: 2.2rem 0;
|
||||
border-bottom: 1px solid #e4e4e4;
|
||||
}
|
||||
footer .footer-top .service-item {
|
||||
footer .services-wrap .service-item {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
footer .footer-top .service-item .icon {
|
||||
footer .services-wrap .service-item .icon {
|
||||
width: 34px;
|
||||
margin-right: 14px;
|
||||
}
|
||||
footer .footer-top .service-item p {
|
||||
footer .services-wrap .service-item p {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
footer .footer-top .service-item .title {
|
||||
footer .services-wrap .service-item .title {
|
||||
margin-bottom: 2px;
|
||||
font-weight: bold;
|
||||
color: #333;
|
||||
}
|
||||
footer .footer-top .service-item .sub-title {
|
||||
footer .services-wrap .service-item .sub-title {
|
||||
font-size: 0.6rem;
|
||||
color: #8D94A0;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -2065,6 +2065,13 @@ __webpack_require__.r(__webpack_exports__);
|
|||
/* harmony export */ __webpack_require__.d(__webpack_exports__, {
|
||||
/* harmony export */ "default": () => (__WEBPACK_DEFAULT_EXPORT__)
|
||||
/* harmony export */ });
|
||||
/*
|
||||
* @copyright 2022 opencart.cn - All Rights Reserved.
|
||||
* @link https://www.guangdawangluo.com
|
||||
* @Author PS <pushuo@opencart.cn>
|
||||
* @Date 2022-08-04 17:22:54
|
||||
* @LastEditTime 2022-08-09 09:40:08
|
||||
*/
|
||||
/* harmony default export */ const __WEBPACK_DEFAULT_EXPORT__ = ({
|
||||
/**
|
||||
* @description: 获取购物车数据
|
||||
|
|
|
|||
|
|
@ -430,6 +430,52 @@ body.page-design {
|
|||
}
|
||||
}
|
||||
|
||||
.footer-link-item {
|
||||
padding: 6px 10px;
|
||||
background: #f5f5f5;
|
||||
margin-bottom: 10px;
|
||||
position: relative;
|
||||
|
||||
&:hover {
|
||||
.remove-item {
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
|
||||
.icon-rank {
|
||||
position: absolute;
|
||||
top: 11px;
|
||||
left: 10px;
|
||||
z-index: 9;
|
||||
}
|
||||
|
||||
.link-selector-wrap {
|
||||
> .title {
|
||||
padding-left: 20px;
|
||||
}
|
||||
|
||||
.selector-type .title {
|
||||
// line-height: 1.42857;
|
||||
}
|
||||
}
|
||||
|
||||
.remove-item {
|
||||
position: absolute;
|
||||
display: none;
|
||||
top: 0;
|
||||
right: 0;
|
||||
background: red;
|
||||
color: #fff;
|
||||
z-index: 9;
|
||||
padding: 0 4px;
|
||||
cursor: pointer;
|
||||
border-radius: 0 0 0 4px;
|
||||
&:hover {
|
||||
background: #c70000;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.file-manager-box {
|
||||
.layui-layer-title {
|
||||
background-color: #293042;
|
||||
|
|
|
|||
|
|
@ -1,30 +1,14 @@
|
|||
import http from "../../../js/http";
|
||||
window.$http = http;
|
||||
import common from "./common";
|
||||
window.bk = common;
|
||||
|
||||
const base = document.querySelector('base').href;
|
||||
const asset = document.querySelector('meta[name="asset"]').content;
|
||||
const editor_language = document.querySelector('meta[name="editor_language"]')?.content || 'zh_cn';
|
||||
|
||||
$(document).on('click', '.open-file-manager', function(event) {
|
||||
const $this = $(this);
|
||||
|
||||
layer.open({
|
||||
type: 2,
|
||||
title: '图片管理器',
|
||||
shadeClose: false,
|
||||
skin: 'file-manager-box',
|
||||
scrollbar: false,
|
||||
shade: 0.4,
|
||||
area: ['1060px', '680px'],
|
||||
content: `${base}/file_manager`,
|
||||
success: function(layerInstance, index) {
|
||||
var iframeWindow = window[layerInstance.find("iframe")[0]["name"]];
|
||||
iframeWindow.callback = function(images) {
|
||||
$this.find('img').prop('src', images[0].url);
|
||||
$this.next('input').val(images[0].path)
|
||||
$this.next('input')[0].dispatchEvent(new Event('input'));
|
||||
}
|
||||
}
|
||||
});
|
||||
bk.fileManagerIframe();
|
||||
});
|
||||
|
||||
if (typeof Vue != 'undefined') {
|
||||
|
|
@ -53,7 +37,7 @@ $(document).ready(function ($) {
|
|||
tinymceInit()
|
||||
});
|
||||
|
||||
function tinymceInit() {
|
||||
const tinymceInit = () => {
|
||||
if (typeof tinymce == 'undefined') {
|
||||
return;
|
||||
}
|
||||
|
|
@ -75,38 +59,28 @@ function tinymceInit() {
|
|||
"微软雅黑='Microsoft YaHei';黑体=黑体;Arial=arial,helvetica,sans-serif;Arial Black=arial black,avant garde;Georgia=georgia,palatino;Helvetica=helvetica;Times New Roman=times new roman,times;Verdana=verdana,geneva",
|
||||
fontsize_formats: "10px 12px 14px 18px 24px 36px",
|
||||
relative_urls : true,
|
||||
setup:function(ed) {
|
||||
setup: function(ed) {
|
||||
const height = ed.getElement().dataset.tinymceHeight;
|
||||
// console.log(ed);
|
||||
// 修改 tinymce 的高度
|
||||
// if (height) {
|
||||
// ed.theme.resizeTo(null, height);
|
||||
// }
|
||||
|
||||
ed.ui.registry.addButton('toolbarImageButton',{
|
||||
// text: '',
|
||||
icon: 'image',
|
||||
onAction:function() {
|
||||
layer.open({
|
||||
type: 2,
|
||||
title: '图片管理器',
|
||||
shadeClose: false,
|
||||
skin: 'file-manager-box',
|
||||
scrollbar: false,
|
||||
shade: 0.4,
|
||||
area: ['1060px', '680px'],
|
||||
content: `${base}/file_manager`,
|
||||
success: function(layerInstance, index) {
|
||||
var iframeWindow = window[layerInstance.find("iframe")[0]["name"]];
|
||||
iframeWindow.callback = function(images) {
|
||||
if (images.length) {
|
||||
images.forEach(e => {
|
||||
ed.insertContent(`<img src='/${e.path}' class="img-fluid" />`);
|
||||
});
|
||||
}
|
||||
}
|
||||
bk.fileManagerIframe(images => {
|
||||
if (images.length) {
|
||||
images.forEach(e => {
|
||||
ed.insertContent(`<img src='/${e.path}' class="img-fluid" />`);
|
||||
});
|
||||
}
|
||||
});
|
||||
})
|
||||
}
|
||||
});
|
||||
// ed.on('change', function(e) {
|
||||
// if (e.target.targetElm.dataset.key) {
|
||||
// app.form[e.target.targetElm.dataset.key] = ed.getContent()
|
||||
// }
|
||||
// });
|
||||
}
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -0,0 +1,34 @@
|
|||
/*
|
||||
* @copyright 2022 opencart.cn - All Rights Reserved.
|
||||
* @link https://www.guangdawangluo.com
|
||||
* @Author PS <pushuo@opencart.cn>
|
||||
* @Date 2022-08-09 09:39:34
|
||||
* @LastEditTime 2022-08-09 09:43:18
|
||||
*/
|
||||
export default {
|
||||
fileManagerIframe(callback) {
|
||||
const base = document.querySelector('base').href;
|
||||
const $this = $(this);
|
||||
|
||||
layer.open({
|
||||
type: 2,
|
||||
title: '图片管理器',
|
||||
shadeClose: false,
|
||||
skin: 'file-manager-box',
|
||||
scrollbar: false,
|
||||
shade: 0.4,
|
||||
area: ['1060px', '680px'],
|
||||
content: `${base}/file_manager`,
|
||||
success: function(layerInstance, index) {
|
||||
var iframeWindow = window[layerInstance.find("iframe")[0]["name"]];
|
||||
iframeWindow.callback = function(images) {
|
||||
if (callback && typeof(callback) === "function") return callback(images);
|
||||
|
||||
$this.find('img').prop('src', images[0].url);
|
||||
$this.next('input').val(images[0].path)
|
||||
$this.next('input')[0].dispatchEvent(new Event('input'));
|
||||
}
|
||||
}
|
||||
});
|
||||
},
|
||||
}
|
||||
|
|
@ -23,7 +23,14 @@
|
|||
</el-tabs>
|
||||
|
||||
<div class="i18n-inner" v-else>
|
||||
<img :src="type == 'image' ? thumbnail(value) : 'image/video.png'" @click="selectButtonClicked" style="max-width: 60px; cursor: pointer;border: 1px solid #eee;">
|
||||
<div class="img">
|
||||
<el-image :src="type == 'image' ? thumbnail(value) : 'image/video.png'" :id="'thumb-' + id" @click="selectButtonClicked">
|
||||
<div slot="error" class="image-slot">
|
||||
<i class="el-icon-picture-outline"></i>
|
||||
</div>
|
||||
</el-image>
|
||||
</div>
|
||||
|
||||
<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>
|
||||
|
|
@ -51,7 +58,7 @@
|
|||
|
||||
data: function () {
|
||||
return {
|
||||
tabActiveId: $language_id,
|
||||
tabActiveId: $locale,
|
||||
languages: $languages,
|
||||
internalValues: {},
|
||||
id: 'image-selector-'+ randomString(4),
|
||||
|
|
|
|||
|
|
@ -288,8 +288,8 @@
|
|||
},
|
||||
|
||||
updateData() {
|
||||
this.value.type = this.value.type || 'category';
|
||||
this.value.link = this.value.link || '';
|
||||
this.value.type = this.value?.type || 'category';
|
||||
this.value.link = this.value?.link || '';
|
||||
this.link = JSON.parse(JSON.stringify(this.value));
|
||||
if (this.type) {
|
||||
this.types = this.types.filter(e => e.type == this.type);
|
||||
|
|
|
|||
|
|
@ -0,0 +1,153 @@
|
|||
<template id="rich-text-i18n-template">
|
||||
<div class="rich-text-i18n-template">
|
||||
<el-button style="width: 100%;" icon="el-icon-edit-outline" plain @click="richTextDialogChecked('open')">编辑内容</el-button>
|
||||
<el-dialog
|
||||
custom-class="rich-text-dialog"
|
||||
:modal-append-to-body="false"
|
||||
title="编辑"
|
||||
:visible.sync="richTextDialog.show"
|
||||
width="800px">
|
||||
<el-tabs v-if="languages.length > 1" value="language-{{ locale() }}" :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 8px; font-size: 12px">@{{ item.name }}</span>
|
||||
|
||||
<div class="i18n-inner">
|
||||
<textarea class="tinymce" :id="randomNumber + '-' +item.code" :data-code="item.code">@{{ richTextDialog.content[item.code] }}</textarea>
|
||||
</div>
|
||||
</el-tab-pane>
|
||||
</el-tabs>
|
||||
|
||||
<div class="i18n-inner" v-else>
|
||||
<textarea class="tinymce">@{{ value[languages[0].code] }}</textarea>
|
||||
</div>
|
||||
<span slot="footer" class="dialog-footer">
|
||||
<el-button @click="richTextDialog.show = false">取 消</el-button>
|
||||
<el-button type="primary" @click="richTextDialogSave">确 定</el-button>
|
||||
</span>
|
||||
</el-dialog>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script type="text/javascript">
|
||||
Vue.component('rich-text-i18n', {
|
||||
template: '#rich-text-i18n-template',
|
||||
props: {
|
||||
value: {
|
||||
default: null
|
||||
},
|
||||
},
|
||||
data: function () {
|
||||
return {
|
||||
richTextDialog: {
|
||||
show: false,
|
||||
content: {}
|
||||
},
|
||||
languages: $languages,
|
||||
}
|
||||
},
|
||||
|
||||
created: function () {
|
||||
this.initInternalValues();
|
||||
},
|
||||
|
||||
// 计算属性
|
||||
computed: {
|
||||
randomNumber() {
|
||||
return (Math.random() * 1000000).toFixed(0);
|
||||
}
|
||||
},
|
||||
|
||||
methods: {
|
||||
initInternalValues() {
|
||||
let internalValues = {};
|
||||
|
||||
this.languages.forEach(e => {
|
||||
Vue.set(internalValues, e.code, this.value[e.code] || '');
|
||||
})
|
||||
|
||||
this.$emit('input', internalValues);
|
||||
this.richTextDialog.content = JSON.parse(JSON.stringify(internalValues));
|
||||
},
|
||||
|
||||
richTextDialogChecked(type) {
|
||||
if (type == 'open') {
|
||||
this.richTextDialog.show = true;
|
||||
|
||||
this.$nextTick(() => {
|
||||
this.tinymceInit()
|
||||
for (let key in this.value) {
|
||||
tinymce.get(this.randomNumber + '-' + key).setContent(this.value[key]);
|
||||
}
|
||||
});
|
||||
}
|
||||
},
|
||||
|
||||
richTextDialogSave() {
|
||||
this.$emit('input', this.richTextDialog.content);
|
||||
this.richTextDialog.show = false;
|
||||
},
|
||||
|
||||
tinymceInit() {
|
||||
const self = this;
|
||||
|
||||
tinymce.init({
|
||||
selector: '.tinymce',
|
||||
language: '{{ locale() }}',
|
||||
branding: false,
|
||||
height: 300,
|
||||
plugins: "link lists fullscreen table hr wordcount image imagetools code",
|
||||
menubar: "",
|
||||
toolbar: "undo redo | toolbarImageButton | bold italic underline strikethrough | forecolor backcolor | fontselect fontsizeselect | alignleft aligncenter alignright alignjustify | outdent indent | numlist bullist | formatpainter removeformat | charmap emoticons | preview | template link anchor | code",
|
||||
toolbar_items_size: 'small',
|
||||
image_caption: true,
|
||||
toolbar_mode: 'wrap',
|
||||
font_formats:
|
||||
"微软雅黑='Microsoft YaHei';黑体=黑体;Arial=arial,helvetica,sans-serif;Arial Black=arial black,avant garde;Georgia=georgia,palatino;Helvetica=helvetica;Times New Roman=times new roman,times;Verdana=verdana,geneva",
|
||||
fontsize_formats: "10px 12px 14px 18px 24px 36px",
|
||||
relative_urls : true,
|
||||
// init_instance_callback: function (ed) {
|
||||
// let code = ed.getElement().dataset.code
|
||||
// ed.setContent(self.value[code])
|
||||
// },
|
||||
setup: function(ed) {
|
||||
ed.ui.registry.addButton('toolbarImageButton', {
|
||||
// text: '',
|
||||
icon: 'image',
|
||||
onAction:function() {
|
||||
bk.fileManagerIframe(images => {
|
||||
if (images.length) {
|
||||
images.forEach(e => {
|
||||
ed.insertContent(`<img src='/${e.path}' class="img-fluid" />`);
|
||||
});
|
||||
}
|
||||
})
|
||||
}
|
||||
});
|
||||
ed.on('change', function(e) {
|
||||
let code = e.target.targetElm.dataset.code
|
||||
self.richTextDialog.content[code] = ed.getContent()
|
||||
});
|
||||
}
|
||||
});
|
||||
},
|
||||
}
|
||||
});
|
||||
</script>
|
||||
|
||||
<style>
|
||||
.rich-text-i18n-template .el-dialog__wrapper {
|
||||
z-index: 1000 !important;
|
||||
}
|
||||
|
||||
.rich-text-i18n-template .v-modal {
|
||||
z-index: 999 !important;
|
||||
}
|
||||
|
||||
.rich-text-i18n-template .el-tabs__nav {
|
||||
display: flex;
|
||||
/* border-color: #ebecf5; */
|
||||
}
|
||||
.rich-text-i18n-template .i18n-inner {
|
||||
margin-top: 20px;
|
||||
}
|
||||
</style>
|
||||
|
|
@ -16,6 +16,7 @@
|
|||
<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/tinymce/5.9.1/tinymce.min.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') }}">
|
||||
|
|
@ -31,7 +32,7 @@
|
|||
</div>
|
||||
<div class="module-edit">
|
||||
<el-collapse value="intro" @change="footerItemChange" accordion>
|
||||
<el-collapse-item title="服务图标" name="service_icon">
|
||||
<el-collapse-item title="服务图标" name="services-wrap">
|
||||
<div class="module-edit-group">
|
||||
<div class="module-edit-group">
|
||||
<div class="module-edit-title">启用</div>
|
||||
|
|
@ -69,27 +70,102 @@
|
|||
</draggable>
|
||||
</div>
|
||||
</el-collapse-item>
|
||||
<el-collapse-item title="Logo/介绍" name="footer-content-left">
|
||||
<div class="module-edit-group">
|
||||
<div class="module-edit-title">logo</div>
|
||||
<pb-image-selector v-model="form.content.intro.logo" :is-language="false"></pb-image-selector>
|
||||
</div>
|
||||
<div class="module-edit-group">
|
||||
<div class="module-edit-title">简介</div>
|
||||
<rich-text-i18n v-model="form.content.intro.text"></rich-text-i18n>
|
||||
</div>
|
||||
</el-collapse-item>
|
||||
@for ($i = 1; $i <= 3; $i++)
|
||||
<el-collapse-item title="链接栏{{ $i }}" name="top_link{{ $i }}">
|
||||
<div class="module-edit-group">
|
||||
<div class="module-edit-title">配置标题</div>
|
||||
<text-i18n v-model="form.content.link{{ $i }}.title"></text-i18n>
|
||||
</div>
|
||||
<div class="module-edit-group">
|
||||
<div class="module-edit-title">链接</div>
|
||||
|
||||
<draggable
|
||||
ghost-class="dragabble-ghost"
|
||||
:list="form.content.link{{ $i }}.links"
|
||||
:options="{animation: 330, handle: '.icon-rank'}">
|
||||
<div v-for="(item, index) in form.content.link{{ $i }}.links" :key="index" class="footer-link-item">
|
||||
<el-tooltip class="icon-rank" effect="dark" content="拖动排序" placement="left">
|
||||
<i class="el-icon-rank"></i>
|
||||
</el-tooltip>
|
||||
<link-selector :show-text="true" v-model="form.content.link{{ $i }}.links[index]"></link-selector>
|
||||
<div class="remove-item" @click="removeLink('link{{ $i }}', index)"><i class="iconfont"></i></div>
|
||||
</div>
|
||||
</draggable>
|
||||
</div>
|
||||
<el-button class="add-item" size="mini" type="primary" plain @click="topLinkAddLinkButtonClicked({{ $i }})">添加链接</el-button>
|
||||
</el-collapse-item>
|
||||
@endfor
|
||||
|
||||
<el-collapse-item title="联系我们" name="top_contact">
|
||||
<div class="module-edit-group">
|
||||
<div class="module-edit-title">联系电话</div>
|
||||
<el-input placeholder="联系电话" size="small" v-model="form.content.contact.telephone"></el-input>
|
||||
</div>
|
||||
<div class="module-edit-group">
|
||||
<div class="module-edit-title">地址</div>
|
||||
<el-input placeholder="地址" size="small" v-model="form.content.contact.address"></el-input>
|
||||
</div>
|
||||
<div class="module-edit-group">
|
||||
<div class="module-edit-title">邮箱</div>
|
||||
<el-input placeholder="邮箱" size="small" v-model="form.content.contact.email"></el-input>
|
||||
</div>
|
||||
</el-collapse-item>
|
||||
|
||||
<el-collapse-item title="版权设置" name="bottom_copyright">
|
||||
<rich-text-i18n v-model="form.bottom.copyright"></rich-text-i18n>
|
||||
</el-collapse-item>
|
||||
|
||||
<el-collapse-item title="更多链接" name="bottom_link">
|
||||
<draggable
|
||||
v-if="form.bottom.links.length"
|
||||
ghost-class="dragabble-ghost"
|
||||
:list="form.bottom.links"
|
||||
:options="{animation: 330, handle: '.icon-rank'}"
|
||||
>
|
||||
<div v-for="(item, index) in form.bottom.links" :key="index" class="footer-link-item">
|
||||
<el-tooltip class="icon-rank" effect="dark" content="拖动排序" placement="left">
|
||||
<i class="el-icon-rank"></i>
|
||||
</el-tooltip>
|
||||
<link-selector :show-text="true" v-model="item.link"></link-selector>
|
||||
<div class="remove-item" @click="removeBottomLink(index)"><i class="iconfont"></i>
|
||||
</div>
|
||||
</div>
|
||||
</draggable>
|
||||
<div class="add-item">
|
||||
<el-button type="primary" size="small" @click="addBottomLink" icon="el-icon-circle-plus-outline">添加链接</el-button>
|
||||
</div>
|
||||
</el-collapse-item>
|
||||
</el-collapse>
|
||||
</div>
|
||||
</div>
|
||||
<div class="preview-iframe">
|
||||
<iframe src="{{ url('/') }}?design=1" frameborder="0" id="preview-iframe" width="100%" height="100%"></iframe>
|
||||
<iframe src="{{ url('/') }}" frameborder="0" id="preview-iframe" width="100%" height="100%"></iframe>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<script>
|
||||
var $languages = @json($languages);
|
||||
var $language_id = '{{ locale() }}';
|
||||
var $locale = '{{ locale() }}';
|
||||
|
||||
// function languagesFill(text) {
|
||||
// var obj = {};
|
||||
// $languages.map(e => {
|
||||
// obj[e.code] = text
|
||||
// })
|
||||
function languagesFill(text) {
|
||||
var obj = {};
|
||||
$languages.map(e => {
|
||||
obj[e.code] = text
|
||||
})
|
||||
|
||||
// return obj;
|
||||
// }
|
||||
return obj;
|
||||
}
|
||||
|
||||
Vue.prototype.thumbnail = function thumbnail(image, width, height) {
|
||||
if (!image) {
|
||||
|
|
@ -112,13 +188,17 @@
|
|||
app.design.ready = true;
|
||||
app.design.sidebar = true;
|
||||
|
||||
|
||||
// 页面滚动到最底部
|
||||
$(previewWindow.document).ready(function() {
|
||||
previewWindow.scrollTo(0, $(previewWindow.document).height());
|
||||
});
|
||||
});
|
||||
</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')
|
||||
@include('admin::pages.design.builder.component.rich_text_i18n')
|
||||
|
||||
<script>
|
||||
let app = new Vue({
|
||||
|
|
@ -152,43 +232,31 @@
|
|||
},
|
||||
|
||||
footerItemChange(val) {
|
||||
console.log(val)
|
||||
// $footer = $("#preview-iframe").contents().find('footer');
|
||||
// $footer.find("div").removeClass('footer-active');
|
||||
// if (!val) return;
|
||||
// $footer.find(`.${val}`).addClass('footer-active');
|
||||
},
|
||||
|
||||
// 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';
|
||||
},
|
||||
|
||||
topLinkAddLinkButtonClicked(index) {
|
||||
this.form.content['link' + index].links.push({type: '', value: '', text: {}});
|
||||
},
|
||||
|
||||
removeLink(item, index) {
|
||||
this.form.content[item].links.splice(index, 1);
|
||||
},
|
||||
|
||||
addBottomLink: function () {
|
||||
this.form.bottom.links.push({link: {type: '', value: '', text: {}}})
|
||||
},
|
||||
|
||||
saveButtonClicked() {
|
||||
$http.put('design/builder', this.form).then((res) => {
|
||||
layer.msg(res.message)
|
||||
|
|
|
|||
|
|
@ -27,7 +27,7 @@
|
|||
<x-admin-form-input name="title[{{ $language['code'] }}]" title="信息标题" value="{{ old('title', '') }}" />
|
||||
<x-admin::form.row title="内容">
|
||||
<div class="w-max-1000">
|
||||
<textarea name="content[{{ $language['code'] }}]" class="form-control tinymce">
|
||||
<textarea name="content[{{ $language['code'] }}]" data-tinymce-height="600" class="form-control tinymce">
|
||||
{{ old('content', '') }}
|
||||
</textarea>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -5,7 +5,7 @@ footer {
|
|||
background: #fafafa;
|
||||
margin-top: 5rem;
|
||||
|
||||
.footer-top {
|
||||
.services-wrap {
|
||||
padding: 2.2rem 0;
|
||||
border-bottom: 1px solid #e4e4e4;
|
||||
|
||||
|
|
|
|||
|
|
@ -1,3 +1,10 @@
|
|||
/*
|
||||
* @copyright 2022 opencart.cn - All Rights Reserved.
|
||||
* @link https://www.guangdawangluo.com
|
||||
* @Author PS <pushuo@opencart.cn>
|
||||
* @Date 2022-08-04 17:22:54
|
||||
* @LastEditTime 2022-08-09 09:40:08
|
||||
*/
|
||||
export default {
|
||||
/**
|
||||
* @description: 获取购物车数据
|
||||
|
|
|
|||
|
|
@ -1,6 +1,6 @@
|
|||
<footer>
|
||||
<div class="container">
|
||||
<div class="footer-top">
|
||||
<div class="services-wrap">
|
||||
<div class="container">
|
||||
<div class="row">
|
||||
@for ($i = 0; $i < 4; $i++)
|
||||
<div class="col-lg-3">
|
||||
|
|
@ -15,6 +15,8 @@
|
|||
@endfor
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="container">
|
||||
<div class="footer-content">
|
||||
<div class="row">
|
||||
<div class="col-12 col-md-4">
|
||||
|
|
|
|||
Loading…
Reference in New Issue