214 lines
7.4 KiB
HTML
214 lines
7.4 KiB
HTML
<link rel="stylesheet" href="STATIC_EXT/colorPicker/css/colorpicker.css" />
|
|
<link rel="stylesheet" href="STATIC_EXT/diyview/css/diyview.css?v={$version}" />
|
|
<style>
|
|
.svg{
|
|
width: 24px;
|
|
height: 24px;
|
|
font-size: 24px;
|
|
text-align: center;
|
|
line-height: 24px;
|
|
margin: 11px auto;
|
|
}
|
|
.component-list ul li img{
|
|
width: 24px;
|
|
height: 24px;
|
|
font-size: 24px;
|
|
text-align: center;
|
|
line-height: 24px;
|
|
margin: 11px auto;
|
|
margin-top: 14px;
|
|
}
|
|
.component-list ul li .ititle:last-child {
|
|
font-size: 12px;
|
|
color: #3C4B7A;
|
|
display: block;
|
|
margin-top: 5px;
|
|
font-weight: bold;
|
|
}
|
|
.component-list ul li .imgtitle:last-child {
|
|
font-size: 12px;
|
|
color: #3C4B7A;
|
|
display: block;
|
|
margin-top: -2px;
|
|
font-weight: bold;
|
|
}
|
|
.component-list ul li i{
|
|
color:#2d8cf0
|
|
}
|
|
.component-list ul li{
|
|
position: relative;
|
|
margin: 5px;
|
|
width: 82px;
|
|
height: 82px;
|
|
-webkit-box-sizing: border-box;
|
|
box-sizing: border-box;
|
|
padding: 0;
|
|
background: #F8F9FF;
|
|
border-radius: 8px;
|
|
border: none;
|
|
}
|
|
.component-list ul li:not(.disabled):hover {
|
|
border: 1px solid #4390FF;
|
|
background: #F8F9FF;
|
|
color:#2d8cf0 !important
|
|
}
|
|
</style>
|
|
<div class="custom-save js-top-custom-save layui-hide">
|
|
<span></span>
|
|
<div class="button-group">
|
|
<button class="layui-btn save-button save">保存</button>
|
|
{notempty name="$diy_view_info"}
|
|
<!-- <button class="layui-btn" onclick="preview()">预览</button> -->
|
|
{/notempty}
|
|
<!-- <button class="layui-btn layui-btn-primary cancel-btn">取消</button> -->
|
|
</div>
|
|
</div>
|
|
|
|
<div id="diyView">
|
|
<!-- 组件列表 -->
|
|
<div class="component-list">
|
|
<!-- <div class="tab">
|
|
<span class="selected">内置组件</span>
|
|
<span data-type="EXTEND">第三方组件</span>
|
|
</div> -->
|
|
<nav>
|
|
{foreach name="$diy_view_utils" item="vo" key="k"}
|
|
<h3 style="font-weight: bold" data-index="{$k}" data-type="{$vo.type}" {if $vo['type'] == 'EXTEND'}style="display:none;"{/if}><img src="__STATIC__/ext/diyview/img/component_down.png" />{$vo.type_name}</h3>
|
|
<ul data-index="{$k}" data-type="{$vo.type}" {if $vo['type'] == 'EXTEND'}style="display:none;"{/if}>
|
|
{if $vo['type'] == 'SYSTEM'}
|
|
<!-- <li title="弹窗广告" @click='changeCurrentIndex(-98)'>
|
|
<i class="iconfont icondanchuangguanggao"></i>
|
|
<span>弹窗广告</span>
|
|
</li> -->
|
|
{/if}
|
|
{foreach name="$vo.list" item="li" key="li_k"}
|
|
<li title="{$li.title}" data-name="{$li.name}" data-max-count="{$li.max_count}" data-value='{$li.value}' data-is-delete="{$li.is_delete}" data-addon-name="{$li.addon_name}"
|
|
{if condition="$li.value"} @click='addComponent({$li.value},{ name : "{$li.name}", title : "{$li.title}", max_count : {$li.max_count}, addon_name : "{$li.addon_name}", is_delete : "{$li.is_delete}" })'
|
|
:class="{ 'disabled' : !checkComponentIsAdd('{$li.name}') }"
|
|
{else/}class="disabled"{/if}>
|
|
<!-- <i class="{$li.icon}"></i> -->
|
|
{if $li.icon_type == 1}
|
|
<i class="{$li.icon}" style="font-size:24px"></i>
|
|
<span class="ititle">{$li.title}</span>
|
|
{else}
|
|
<img :src="changeImgUrl('{$li.icon}')" class="svg"></img>
|
|
<span class="imgtitle">{$li.title}</span>
|
|
{/if}
|
|
|
|
</li>
|
|
{/foreach}
|
|
</ul>
|
|
{/foreach}
|
|
</nav>
|
|
</div>
|
|
|
|
<div class="preview-wrap">
|
|
|
|
<div class="loading-layer">
|
|
<div class="loading-anim">
|
|
<div class="box item"><div class="border out item"></div></div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="preview-restore-wrap">
|
|
|
|
<div class="div-wrap">
|
|
|
|
<!-- <button class="layui-btn layui-btn-primary position-page-btn" @click="changeCurrentIndex(-99)">页面设置</button> -->
|
|
<!-- 快捷操作 -->
|
|
<ul class="quick-action">
|
|
<!-- <li>-->
|
|
<!-- <i class="icondiy icon-system-eye-line"></i>-->
|
|
<!-- <span>隐藏</span>-->
|
|
<!-- </li>-->
|
|
<li @click="moveUpComponent()" :class="{ disabled : ((currentIndex - 1) < 0) }">
|
|
<i class="iconfontnew icon-shangyi" style="font-size: 24px"></i>
|
|
<span>组件上移</span>
|
|
</li>
|
|
<li @click="moveDownComponent()" :class="{ disabled : ( currentIndex < 0 || data.length === 0 || (currentIndex + 1) === data.length) }">
|
|
<i class="iconfontnew icon-xiayi" style="font-size: 24px"></i>
|
|
<span>组件下移</span>
|
|
</li>
|
|
<li @click="copyComponent()" :class="{ disabled : ( currentIndex < 0) }">
|
|
<i class="iconfontnew icon-fuzhi" style="font-size: 24px"></i>
|
|
<span>组件复制</span>
|
|
</li>
|
|
<li @click="delComponent(currentIndex)" :class="{ disabled : currentIndex < -1 }">
|
|
<i class="iconfontnew icon-shanchu1" style="font-size: 24px"></i>
|
|
<span>组件删除</span>
|
|
</li>
|
|
<!-- <li @click="resetComponent()" :class="{ disabled : ( currentIndex < 0) }">
|
|
<i class="icondiy icon-system-loader-4-line"></i>
|
|
<span>重置</span>
|
|
</li> -->
|
|
</ul>
|
|
|
|
<div class='diy-view-wrap layui-form' :style="{ backgroundColor : global.pageBgColor,backgroundImage : 'url('+changeImgUrl(global.bgUrl)+')' }">
|
|
|
|
<div class="preview-head" @click="changeCurrentIndex(-99)">
|
|
|
|
<!-- 顶部tabbar风格 -->
|
|
<tabbar :current-index="currentIndex" :global="global"></tabbar>
|
|
|
|
<!-- 页面设置 -->
|
|
<div class="page-set-wrap" :class="{ selected : currentIndex == -99 }" :data-sort="-99" v-show="data.length == 0 || currentIndex == -99">
|
|
<page-set :current-index="currentIndex" :global="global" :global-lazy-load="globalLazyLoad"></page-set>
|
|
</div>
|
|
|
|
</div>
|
|
|
|
<!-- 弹窗广告 -->
|
|
<pop-window :current-index="currentIndex" :global="global" :global-lazy-load="globalLazyLoad"></pop-window>
|
|
|
|
<div class="preview-block">
|
|
|
|
<div v-for="(nc,index) in data" :key="nc.id" :data-index="index" :data-id="nc.id" :class="{ 'draggable-element' : true,selected : currentIndex == index }" :data-sort="index">
|
|
{foreach name="$diy_view_utils" item="vo"}
|
|
{foreach name="$vo.list" item="li"}
|
|
<template v-if="nc.componentName == '{$li.name}'">
|
|
{:event('DiyViewUtils',[ 'name' => $li['name'], 'addon_name' => $li['addon_name'] ],true)}
|
|
</template>
|
|
{/foreach}
|
|
{/foreach}
|
|
</div>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
</div>
|
|
|
|
</div>
|
|
</div>
|
|
|
|
<!-- 预览 -->
|
|
<template slot="preview"></template>
|
|
|
|
<div class="custom-save js-bottom-custom-save">
|
|
<button class="layui-btn save">保存</button>
|
|
<!-- <button class="layui-btn full-screen-btn">全屏</button> -->
|
|
</div>
|
|
</div>
|
|
|
|
{if condition="!empty($diy_view_info)"}
|
|
<input type="hidden" id="id" value="{$diy_view_info.id}">
|
|
<input type="hidden" id="info" value='{$diy_view_info.value ?? ""}' />
|
|
{/if}
|
|
<input type="hidden" id="name" value="{$name}" />
|
|
<input type="hidden" id="title" value="{$title}" />
|
|
<input type="hidden" id="template_id" value="{$template_id}" />
|
|
<input type="hidden" id="page_type" value="{$page_type ?? ''}" />
|
|
|
|
<script>
|
|
var requestUrl = '{$request_url}';
|
|
var storeIsExit = '{$store_is_exit}';
|
|
</script>
|
|
<script src="STATIC_JS/vue.js"></script>
|
|
<script src="STATIC_EXT/colorPicker/js/colorpicker.js"></script>
|
|
<script src="STATIC_EXT/diyview/js/async_load_css.js"></script>
|
|
<script src="STATIC_EXT/diyview/js/ddsort.js"></script>
|
|
<script src="STATIC_EXT/ueditor/ueditor.config.js"></script>
|
|
<script src="STATIC_EXT/ueditor/ueditor.all.js"> </script>
|
|
<script src="STATIC_EXT/ueditor/lang/zh-cn/zh-cn.js"></script>
|
|
<script src="STATIC_EXT/diyview/js/components.js?time={$version}"></script>
|
|
<script src="STATIC_EXT/diyview/js/custom_template.js?v={$version}"></script>
|
|
{include file="app/shop/view/diy/iconfont_component.html"/} |