810 lines
106 KiB
PHP
810 lines
106 KiB
PHP
<?php /*a:5:{s:77:"/www/wwwroot/app.cxhxy.dev.1nww.com/app/store/view/food/applet/page/edit.html";i:1700553054;s:67:"/www/wwwroot/app.cxhxy.dev.1nww.com/app/store/view/layout/food.html";i:1700553054;s:80:"/www/wwwroot/app.cxhxy.dev.1nww.com/app/store/view/food/applet/page/tpl/diy.html";i:1700553054;s:83:"/www/wwwroot/app.cxhxy.dev.1nww.com/app/store/view/food/applet/page/tpl/editor.html";i:1700553054;s:48:"../addons/upload/view/template/file_library.html";i:1700552721;}*/ ?>
|
||
<!DOCTYPE html>
|
||
|
||
<html lang="en">
|
||
|
||
<head>
|
||
|
||
<meta charset="utf-8"/>
|
||
|
||
<meta http-equiv="X-UA-Compatible" content="IE=edge"/>
|
||
|
||
<title><?php echo htmlentities($app_name); ?>管理后台</title>
|
||
|
||
<meta name="author" content="<?php echo htmlentities($web['name']); ?>">
|
||
|
||
<meta name="keywords" content="<?php echo htmlentities($web['keywords']); ?>">
|
||
|
||
<meta name="description" content="<?php echo htmlentities($web['description']); ?>">
|
||
|
||
<meta name="viewport" content="width=device-width, initial-scale=1"/>
|
||
|
||
<meta name="referrer" content="no-referrer-when-downgrade">
|
||
|
||
<meta http-equiv="Cache-Control" content="no-siteapp"/>
|
||
|
||
<link rel="icon" href="/favicon.png" type="image/x-icon">
|
||
|
||
<link rel="stylesheet" href="/assets/plugins/amazeui/amazeui.css?v=<?php echo htmlentities($version); ?>"/>
|
||
|
||
<link rel="stylesheet" href="/assets/css/hema.app.css?v=<?php echo htmlentities($version); ?>"/>
|
||
|
||
<link rel="stylesheet" href="/addons/upload/css/file.library.css?v=<?php echo htmlentities($version); ?>"/>
|
||
|
||
<script src="/assets/plugins/jquery/jquery.min.js?v=<?php echo htmlentities($version); ?>"></script>
|
||
|
||
<link rel="stylesheet" href="/assets/plugins/iconfont/iconfont.css?v=<?php echo htmlentities($version); ?>">
|
||
|
||
<script src="/assets/plugins/iconfont/iconfont.js?v=<?php echo htmlentities($version); ?>"></script>
|
||
|
||
<script>
|
||
|
||
BASE_URL = "<?php echo isset($base_url) ? $base_url : ''; ?>";
|
||
|
||
STORE_URL = "<?php echo isset($store_url) ? $store_url : ''; ?>";
|
||
|
||
APPLET_ID = "<?php echo isset($applet_id) ? $applet_id : 0; ?>";
|
||
|
||
</script>
|
||
|
||
</head>
|
||
|
||
|
||
|
||
<body data-type="">
|
||
|
||
<div class="am-g tpl-g">
|
||
|
||
<!-- 头部 -->
|
||
|
||
<header class="tpl-header">
|
||
|
||
<!-- 右侧内容 -->
|
||
|
||
<div class="tpl-header-fluid">
|
||
|
||
<!-- 侧边切换 -->
|
||
|
||
<div class="am-fl tpl-header-button switch-button">
|
||
|
||
<i class="iconfont iconzhedie"></i>
|
||
|
||
</div>
|
||
|
||
<!-- 刷新页面 -->
|
||
|
||
<div class="am-fl tpl-header-button refresh-button">
|
||
|
||
<i class="iconfont iconshuaxin"></i>
|
||
|
||
</div>
|
||
|
||
<!-- 超链接-->
|
||
|
||
<div class="am-fl tpl-header-navbar">
|
||
|
||
<ul>
|
||
|
||
<!-- 网站首页 -->
|
||
|
||
<li class="am-text-sm">
|
||
|
||
<a href="/">
|
||
|
||
<i class="iconfont iconshouye"></i> 网站首页
|
||
|
||
</a>
|
||
|
||
</li>
|
||
|
||
</ul>
|
||
|
||
</div>
|
||
|
||
<!-- 其它功能-->
|
||
|
||
<div class="am-fr tpl-header-navbar">
|
||
|
||
<ul>
|
||
|
||
<li class="am-text-sm">
|
||
|
||
<div class="am-dropdown" data-am-dropdown="{boundary: '.am-topbar'}">
|
||
|
||
<div class="am-topbar-btn am-dropdown-toggle" data-am-dropdown-toggle>
|
||
|
||
<img src="<?php echo htmlentities($user['user']['avatar']); ?>" />
|
||
|
||
<?php echo htmlentities($user['user']['user_name']); ?>
|
||
|
||
<span class="am-icon-caret-down"></span>
|
||
|
||
</div>
|
||
|
||
<ul class="am-dropdown-content">
|
||
|
||
<li><a href="/user">用户中心</a></li>
|
||
|
||
<li><a href="/store/<?php echo htmlentities($app_type); ?>.setting/renew">修改密码</a></li>
|
||
|
||
<li><a href="/store/passport/<?php echo htmlentities($logout); ?>?app_type=<?php echo htmlentities($app_type); ?>">安全退出</a></li>
|
||
|
||
</ul>
|
||
|
||
</div>
|
||
|
||
</li>
|
||
|
||
</ul>
|
||
|
||
</div>
|
||
</div>
|
||
|
||
</header>
|
||
|
||
<!-- 侧边导航栏 -->
|
||
|
||
<div class="left-sidebar dis-flex">
|
||
|
||
<!-- 一级菜单 -->
|
||
|
||
<ul class="sidebar-nav">
|
||
|
||
<li class="sidebar-nav-heading"><?php echo htmlentities($app_name); ?> <small>V<?php echo htmlentities((isset($version) && ($version !== '')?$version:'1.0.0')); ?></small></li>
|
||
|
||
<?php foreach($menus as $key => $item): ?>
|
||
|
||
<li class="sidebar-nav-link">
|
||
|
||
<a href="<?php echo isset($item['index'])?url($item['index']):'javascript:void(0);'; ?>"
|
||
|
||
class="<?php echo !empty($item['active']) ? 'active' : ''; ?>">
|
||
|
||
<?php if(isset($item['is_svg']) && $item['is_svg'] === true): ?>
|
||
|
||
<svg class="icon sidebar-nav-link-logo" aria-hidden="true">
|
||
|
||
<use xlink:href="#<?php echo htmlentities($item['icon']); ?>"></use>
|
||
|
||
</svg>
|
||
|
||
<?php else: ?>
|
||
|
||
<i class="iconfont sidebar-nav-link-logo <?= $item['icon'] ?>"
|
||
|
||
style="color:<?php echo isset($item['color'])?$item['color']:''; ?>;"></i>
|
||
|
||
<?php endif; ?>
|
||
|
||
<?php echo htmlentities($item['name']); ?>
|
||
|
||
</a>
|
||
|
||
</li>
|
||
|
||
<?php endforeach; ?>
|
||
|
||
</ul>
|
||
|
||
<!-- 子级菜单-->
|
||
|
||
<?php $second = isset($menus[$group]['submenu']) ? $menus[$group]['submenu'] : []; if(!empty($second)): ?>
|
||
|
||
<ul class="left-sidebar-second">
|
||
|
||
<li class="sidebar-second-title"><?php echo htmlentities($menus[$group]['name']); ?></li>
|
||
|
||
<li class="sidebar-second-item">
|
||
|
||
<?php foreach($second as $item): if(!isset($item['submenu'])): ?>
|
||
|
||
<!-- 二级菜单-->
|
||
|
||
<a href="<?= url($item['index']) ?>" class="<?= $item['active'] ? 'active' : '' ?>">
|
||
|
||
<?= $item['name']; ?>
|
||
|
||
</a>
|
||
|
||
<?php else: ?>
|
||
|
||
<!-- 三级菜单-->
|
||
|
||
<div class="sidebar-third-item">
|
||
|
||
<a href="javascript:void(0);"
|
||
|
||
class="sidebar-nav-sub-title <?php echo !empty($item['active']) ? 'active' : ''; ?>">
|
||
|
||
<i class="iconfont icongengduo"></i>
|
||
|
||
<?php echo htmlentities($item['name']); ?>
|
||
|
||
</a>
|
||
|
||
<ul class="sidebar-third-nav-sub">
|
||
|
||
<?php foreach($item['submenu'] as $third): ?>
|
||
|
||
<li>
|
||
|
||
<a class="<?php echo !empty($third['active']) ? 'active' : ''; ?>"
|
||
|
||
href="<?php echo url($third['index']); ?>">
|
||
|
||
<?php echo htmlentities($third['name']); ?>
|
||
|
||
</a>
|
||
|
||
</li>
|
||
|
||
<?php endforeach; ?>
|
||
|
||
</ul>
|
||
|
||
</div>
|
||
|
||
<?php endif; ?>
|
||
|
||
<?php endforeach; ?>
|
||
|
||
</li>
|
||
|
||
</ul>
|
||
|
||
<?php endif; ?>
|
||
|
||
</div>
|
||
|
||
<!-- 内容区域 start -->
|
||
|
||
<div class="tpl-content-wrapper <?php echo empty($second) ? 'no-sidebar-second' : ''; ?>">
|
||
|
||
|
||
|
||
<!-- 内容区域 start -->
|
||
|
||
<link rel="stylesheet" href="/assets/plugins/umeditor/themes/default/css/umeditor.css?v=<?php echo htmlentities($version); ?>">
|
||
|
||
<link rel="stylesheet" href="/addons/food/css/hema.diy.css?v=<?php echo htmlentities($version); ?>">
|
||
|
||
<div class="row-content am-cf">
|
||
|
||
<div class="widget am-cf">
|
||
|
||
<div class="widget-body">
|
||
|
||
<!-- diy 工作区 -->
|
||
|
||
<div id="app" class="work-diy dis-flex flex-x-between">
|
||
|
||
<!-- 工具栏 -->
|
||
|
||
<div id="diy-menu" class="diy-menu">
|
||
|
||
<div class="menu-title"><span>组件库</span></div>
|
||
|
||
<div class="navs">
|
||
|
||
<div class="navs-group">
|
||
|
||
<div class="title">媒体组件</div>
|
||
|
||
<div class="navs-components am-cf">
|
||
|
||
<nav class="special" @click="onAddItem('banner')">
|
||
|
||
<p class="item-icon"><i class="iconfont iconlunbotupian"></i></p>
|
||
|
||
<p>图片轮播</p>
|
||
|
||
</nav>
|
||
|
||
<nav class="special" @click="onAddItem('imageSingle')">
|
||
|
||
<p class="item-icon"><i class="iconfont icontupian"></i></p>
|
||
|
||
<p>单图组</p>
|
||
|
||
</nav>
|
||
|
||
<nav class="special" @click="onAddItem('window')">
|
||
|
||
<p class="item-icon"><i class="iconfont iconduotu"></i></p>
|
||
|
||
<p>图片橱窗</p>
|
||
|
||
</nav>
|
||
|
||
<nav class="special" @click="onAddItem('video')">
|
||
|
||
<p class="item-icon"><i class="iconfont iconshipin"></i></p>
|
||
|
||
<p>视频组</p>
|
||
|
||
</nav>
|
||
|
||
</div>
|
||
|
||
<div class="title">门店组件</div>
|
||
|
||
<div class="navs-components am-cf">
|
||
|
||
<nav class="special" @click="onAddItem('order')">
|
||
|
||
<p class="item-icon"><i class="iconfont iconshangpin"></i></p>
|
||
|
||
<p>点单组</p>
|
||
|
||
</nav>
|
||
|
||
<nav class="special" @click="onAddItem('notice')">
|
||
|
||
<p class="item-icon"><i class="iconfont icongonggao"></i></p>
|
||
|
||
<p>公告组</p>
|
||
|
||
</nav>
|
||
|
||
<nav class="special" @click="onAddItem('navBar')">
|
||
|
||
<p class="item-icon"><i class="iconfont icondaohangzu"></i></p>
|
||
|
||
<p>导航组</p>
|
||
|
||
</nav>
|
||
|
||
<nav class="special" @click="onAddItem('goods')">
|
||
|
||
<p class="item-icon"><i class="iconfont iconshangpin"></i></p>
|
||
|
||
<p>商品组</p>
|
||
|
||
</nav>
|
||
|
||
</div>
|
||
|
||
<div class="title">工具组件</div>
|
||
|
||
<div class="navs-components am-cf">
|
||
|
||
<nav class="special" @click="onAddItem('service')">
|
||
|
||
<p class="item-icon"><i class="iconfont iconkefu"></i></p>
|
||
|
||
<p>在线客服</p>
|
||
|
||
</nav>
|
||
|
||
<nav class="special" @click="onAddItem('officialAccount')">
|
||
|
||
<p class="item-icon"><i class="iconfont icongongzhonghao2"></i></p>
|
||
|
||
<p>关注公众号</p>
|
||
|
||
</nav>
|
||
|
||
<nav class="special" @click="onAddItem('richText')">
|
||
|
||
<p class="item-icon"><i class="iconfont iconfuwenben"></i></p>
|
||
|
||
<p>富文本</p>
|
||
|
||
</nav>
|
||
|
||
<nav class="special" @click="onAddItem('blank')">
|
||
|
||
<p class="item-icon"><i class="iconfont iconfuzhukongbai"></i></p>
|
||
|
||
<p>辅助空白</p>
|
||
|
||
</nav>
|
||
|
||
<nav class="special" @click="onAddItem('guide')">
|
||
|
||
<p class="item-icon"><i class="iconfont iconfuzhuxian"></i></p>
|
||
|
||
<p>辅助线</p>
|
||
|
||
</nav>
|
||
|
||
<nav class="special" @click="onAddItem('columnTitle')">
|
||
|
||
<p class="item-icon"><i class="iconfont iconlanmubiaoti"></i></p>
|
||
|
||
<p>栏目标题</p>
|
||
|
||
</nav>
|
||
|
||
</div>
|
||
|
||
</div>
|
||
|
||
</div>
|
||
|
||
<div class="action">
|
||
|
||
<button @click.stop="onSubmit" type="button" class="am-btn am-btn-xs am-btn-secondary">
|
||
|
||
保存页面
|
||
|
||
</button>
|
||
|
||
</div>
|
||
|
||
</div>
|
||
|
||
<!--手机diy容器-->
|
||
|
||
<div class="diy-phone" v-cloak>
|
||
|
||
<!-- 手机顶部标题 -->
|
||
|
||
<div id="diy-page11" class="phone-top optional" @click.stop="onEditer('page')"
|
||
|
||
:class="{selected: 'page' === selectedIndex}"
|
||
|
||
:style="{background: diyData.page.style.titleBackgroundColor + ' url(/addons/food/img/diy/phone-top-' + diyData.page.style.titleTextColor + '.png) no-repeat center / contain'}">
|
||
|
||
<h4 :style="{color: diyData.page.style.titleTextColor}">{{ diyData.page.params.title }}</h4>
|
||
|
||
</div>
|
||
|
||
<!-- 小程序内容区域 -->
|
||
|
||
<div id="phone-main" class="phone-main" v-cloak style="position: relative;">
|
||
|
||
<draggable :list="diyData.items" class="dragArea" @update="onDragItemEnd" :options="{animation: 120, filter: '.drag__nomove' }">
|
||
|
||
<template v-for="(item, index) in diyData.items">
|
||
|
||
<!-- diy元素: 图片轮播 -->
|
||
|
||
<template v-if="item.type == 'banner'">
|
||
|
||
<div class="drag optional bg-f7" @click.stop="onEditer(index)"
|
||
|
||
:class="{selected: index === selectedIndex}">
|
||
|
||
<div class="diy-banner" :style="{padding:'0px ' + item.style.marginLr/2 + 'px'}">
|
||
|
||
<img v-for="(banner, index) in item.data" :style="{borderRadius:item.style.radius + 'px'}" v-if="index <= 1"
|
||
|
||
:src="banner.type == 'image'?banner.image:banner.poster">
|
||
|
||
<div class="dots center" :class="item.style.btnShape">
|
||
|
||
<span v-for="banner in item.data"
|
||
|
||
:style="{background:item.style.btnColor}"></span>
|
||
|
||
</div>
|
||
|
||
</div>
|
||
|
||
<div class="btn-edit-del">
|
||
|
||
<div class="btn-del" @click.stop="onDeleleItem(index)">删除</div>
|
||
|
||
</div>
|
||
|
||
</div>
|
||
|
||
</template>
|
||
|
||
<!-- diy元素: 单图组 -->
|
||
|
||
<template v-else-if="item.type == 'imageSingle'">
|
||
|
||
<div @click.stop="onEditer(index)" class="bg-f7">
|
||
|
||
<div class="drag optional" :class="{selected:index === selectedIndex}">
|
||
|
||
<div :style="{padding:'0px ' + item.style.marginLr + 'px'}">
|
||
|
||
<div class="diy-imageSingle"
|
||
|
||
:style="{background: item.style.bgColor}">
|
||
|
||
<div class="item-image" v-for="imageSingle in item.data"
|
||
|
||
:style="{padding: item.style.paddingTb + 'px ' + item.style.paddingLr + 'px'}">
|
||
|
||
<img :src="imageSingle.image" :style="{borderRadius: item.style.radius + 'px'}">
|
||
|
||
</div>
|
||
|
||
</div>
|
||
|
||
</div>
|
||
|
||
<div class="btn-edit-del">
|
||
|
||
<div class="btn-del" @click.stop="onDeleleItem(index)">删除</div>
|
||
|
||
</div>
|
||
|
||
</div>
|
||
|
||
</div>
|
||
|
||
</template>
|
||
|
||
<!-- diy元素: 图片橱窗 -->
|
||
|
||
<template v-else-if="item.type == 'window'">
|
||
|
||
<div @click.stop="onEditer(index)" class="bg-f7">
|
||
|
||
<div class="drag optional" :class="{selected:index === selectedIndex}">
|
||
|
||
<div :style="{padding:'0px ' + item.style.marginLr + 'px'}">
|
||
|
||
<div class="diy-window"
|
||
|
||
:style="{ background: item.style.bgColor, padding: item.style.paddingTb + 'px ' + item.style.paddingLr + 'px'}">
|
||
|
||
<ul class="data-list" v-if="item.style.layout > -1"
|
||
|
||
:class="'am-avg-sm-' + item.style.layout">
|
||
|
||
<li v-for="window in item.data"
|
||
|
||
:style="{ padding: item.style.paddingTb + 'px ' + item.style.paddingLr + 'px' }">
|
||
|
||
<div class="item-image">
|
||
|
||
<img :src="window.image" :style="{borderRadius: item.style.radius + 'px',height:item.style.height + 'px'}">
|
||
|
||
</div>
|
||
|
||
</li>
|
||
|
||
</ul>
|
||
|
||
<div :style="{padding: item.style.paddingTb + 'px ' + item.style.paddingLr + 'px',height:item.style.height + 'px'}" class="display" v-else>
|
||
|
||
<div class="display-left">
|
||
|
||
<img :src="item.data[0].image" :style="{borderRadius: item.style.radius + 'px',height:item.style.height + 'px'}">
|
||
|
||
</div>
|
||
|
||
<div class="display-right">
|
||
|
||
<div v-if="item.data.length >= 2" class="display-right1"
|
||
|
||
:style="{ padding:item.style.paddingTb+'px '+item.style.paddingLr +'px' }">
|
||
|
||
<img :src="item.data[1].image" :style="{borderRadius: item.style.radius + 'px'}">
|
||
|
||
</div>
|
||
|
||
<div class="display-right2">
|
||
|
||
<div v-if="item.data.length >= 3" class="left"
|
||
|
||
:style="{ padding:item.style.paddingTb + 'px ' + item.style.paddingLr + 'px' }">
|
||
|
||
<img :src="item.data[2].image" :style="{borderRadius: item.style.radius + 'px'}">
|
||
|
||
</div>
|
||
|
||
<div v-if="item.data.length >= 4" class="right"
|
||
|
||
:style="{ padding:item.style.paddingTb + 'px ' + item.style.paddingLr + 'px' }">
|
||
|
||
<img :src="item.data[3].image" :style="{borderRadius: item.style.radius + 'px'}">
|
||
|
||
</div>
|
||
|
||
</div>
|
||
|
||
</div>
|
||
|
||
</div>
|
||
|
||
</div>
|
||
|
||
</div>
|
||
|
||
<div class="btn-edit-del">
|
||
|
||
<div class="btn-del" @click.stop="onDeleleItem(index)">删除</div>
|
||
|
||
</div>
|
||
|
||
</div>
|
||
|
||
</div>
|
||
|
||
</template>
|
||
|
||
<!-- diy元素: 视频组 -->
|
||
|
||
<template v-else-if="item.type == 'video'">
|
||
|
||
<div @click.stop="onEditer(index)" class="bg-f7">
|
||
|
||
<div class="drag optional" :class="{selected:index === selectedIndex}">
|
||
|
||
<div class="diy-video" :style="{padding:'0px ' + item.style.marginLr + 'px'}">
|
||
|
||
<video
|
||
|
||
:style="{height:item.style.height + 'px'}" :src="item.params.src"
|
||
|
||
:poster="item.params.poster" :autoplay="item.params.autoplay == 'true'" controls>
|
||
|
||
您的浏览器不支持 video 标签
|
||
|
||
</video>
|
||
|
||
</div>
|
||
|
||
<div class="btn-edit-del">
|
||
|
||
<div class="btn-del" @click.stop="onDeleleItem(index)">删除</div>
|
||
|
||
</div>
|
||
|
||
</div>
|
||
|
||
</div>
|
||
|
||
</template>
|
||
|
||
<!-- diy元素: 点单组 -->
|
||
|
||
<template v-else-if="item.type == 'order'">
|
||
|
||
<div @click.stop="onEditer(index)" class="bg-f7" :style="{zIndex:9999,marginTop:'-' + item.style.marginTop/2 + 'px'}">
|
||
|
||
<div class="drag optional" :class="{selected:index === selectedIndex}">
|
||
|
||
<div :style="{padding:'0px ' + item.style.marginLr/2 + 'px'}">
|
||
|
||
<div class="diy-order" :style="{background:item.style.bgColor,borderRadius:item.style.radius + 'px'}">
|
||
|
||
<div v-if="item.params.number == 1" class="food-box">
|
||
|
||
<div class="icon">
|
||
|
||
<img :src="item.data[0].image">
|
||
|
||
</div>
|
||
|
||
<div class="right">
|
||
|
||
<div class="title">{{item.data[0].title}}</div>
|
||
|
||
<div class="text">{{item.data[0].text}}</div>
|
||
|
||
</div>
|
||
|
||
</div>
|
||
|
||
<div v-if="item.params.number == 2 && index < item.params.number" :class="index == 0 ? 'item num2':'item num2 b-l'" v-for="(order,index) in item.data">
|
||
|
||
<div class="item-image">
|
||
|
||
<img :src="order.image" :style="{width:item.style.width/2 + 'px',height:item.style.height/2 + 'px'}">
|
||
|
||
</div>
|
||
|
||
<div class="item-title">
|
||
|
||
{{order.title}}</div>
|
||
|
||
<div class="item-text">
|
||
|
||
{{order.text}}</div>
|
||
|
||
</div>
|
||
|
||
<div v-if="item.params.number == 3" :class="index == 0 ? 'item num3':'item num3 b-l'" v-for="(order,index) in item.data">
|
||
|
||
<div class="item-image">
|
||
|
||
<img :src="order.image" :style="{width:item.style.width/2 + 'px',height:item.style.height/2 + 'px'}">
|
||
|
||
</div>
|
||
|
||
<div class="item-title">
|
||
|
||
{{order.title}}</div>
|
||
|
||
<div class="item-text">
|
||
|
||
{{order.text}}</div>
|
||
|
||
</div>
|
||
|
||
</div>
|
||
|
||
</div>
|
||
|
||
<div class="btn-edit-del">
|
||
|
||
<div class="btn-del" @click.stop="onDeleleItem(index)">删除</div>
|
||
|
||
</div>
|
||
|
||
</div>
|
||
|
||
</div>
|
||
|
||
</template>
|
||
|
||
<!-- diy元素: 公告组 -->
|
||
|
||
<template v-else-if="item.type == 'notice'">
|
||
|
||
<div @click.stop="onEditer(index)" class="bg-f7">
|
||
|
||
<div class="drag optional" :class="{selected:index === selectedIndex}">
|
||
|
||
<div :style="{padding:'0px ' + item.style.marginLr + 'px'}">
|
||
|
||
<div class="diy-notice dis-flex"
|
||
|
||
:style="{padding: + '10px',background: item.style.bgColor,color: item.style.color}">
|
||
|
||
<div class="notice__icon">
|
||
|
||
<img src="/addons/food/img/diy/notice.png">
|
||
|
||
</div>
|
||
|
||
<div class="notice__text flex-box am-text-truncate">
|
||
|
||
<span :style="{color: item.style.textColor}">{{item.data[0].text}}</span>
|
||
|
||
</div>
|
||
|
||
</div>
|
||
|
||
</div>
|
||
|
||
<div class="btn-edit-del">
|
||
|
||
<div class="btn-del" @click.stop="onDeleleItem(index)">删除</div>
|
||
|
||
</div>
|
||
|
||
</div>
|
||
|
||
</div>
|
||
|
||
</template>
|
||
|
||
<!-- diy元素: 导航组 -->
|
||
|
||
<template v-else-if="item.type == 'navBar'">
|
||
|
||
<div @click.stop="onEditer(index)" class="bg-f7">
|
||
|
||
<div class="drag optional" :class="{selected:index === selectedIndex}">
|
||
|
||
<div :style="{padding:'0px ' + item.style.marginLr + 'px'}">
|
||
|
||
<div class="diy-navBar" :style="{background:item.style.bgColor}">
|
||
|
||
<ul :class="item.style.rowsNum === '4'?'am-avg-sm-4':(item.style.rowsNum ==='3'?'am-avg-sm-3':'am-avg-sm-5')">
|
||
|
||
<li v-for="(navBar,index) in item.data">
|
||
|
||
<div class="item-image">
|
||
|
||
<img :src="navBar.image">
|
||
|
||
</div>
|
||
|
||
<p class="item-text am-text-truncate" :style="{color:navBar.color}">
|
||
|
||
{{navBar.text}}</p>
|
||
|
||
</li>
|
||
|
||
</ul>
|
||
|
||
</div>
|
||
|
||
</div>
|
||
|
||
<div class="btn-edit-del">
|
||
|
||
<div class="btn-del" @click.stop="onDeleleItem(index)">删除</div>
|
||
|
||
</div>
|
||
|
||
</div>
|
||
|
||
</div>
|
||
|
||
</template>
|
||
|
||
<!-- diy元素: 商品组 -->
|
||
|
||
<template v-else-if="item.type == 'goods'">
|
||
|
||
<div @click.stop="onEditer(index)" class="bg-f7">
|
||
|
||
<div class="drag optional" :class="{selected: index === selectedIndex}">
|
||
|
||
<div :style="{padding:'0px ' + item.style.marginLr + 'px'}">
|
||
|
||
<div class="diy-goods" v-if="item.style.display == 'list'" :style="{background:item.style.bgColor}">
|
||
|
||
<ul class="goods-list am-cf"
|
||
|
||
:class="['display__' + item.style.display, 'column__' + item.style.column]">
|
||
|
||
<li class="goods-item"
|
||
|
||
v-for="goods in (item.params.source == 'choice' ? item.data : item.defaultData)">
|
||
|
||
<!-- 单列商品 -->
|
||
|
||
<template v-if="item.style.column == 1">
|
||
|
||
<div class="dis-flex">
|
||
|
||
<!-- 商品图片 -->
|
||
|
||
<div class="goods-item_left"> <img :src="goods.image"> </div>
|
||
|
||
<div class="goods-item_right">
|
||
|
||
<!-- 商品名称 -->
|
||
|
||
<div v-if="item.style.show.goodsName"
|
||
|
||
class="goods-item_title twolist-hidden">
|
||
|
||
<span>{{ goods.goods_name }}</span>
|
||
|
||
</div>
|
||
|
||
<div class="goods-item_desc">
|
||
|
||
<!-- 商品卖点 -->
|
||
|
||
<div v-if="item.style.show.sellingPoint"
|
||
|
||
class="desc-selling_point am-text-truncate">
|
||
|
||
<span>{{ goods.selling_point }}</span>
|
||
|
||
</div>
|
||
|
||
<!-- 商品销量 -->
|
||
|
||
<div v-if="item.style.show.goodsSales"
|
||
|
||
class="desc-goods_sales am-text-truncate">
|
||
|
||
<span>已售{{ goods.goods_sales }}件</span>
|
||
|
||
</div>
|
||
|
||
<!-- 商品价格 -->
|
||
|
||
<div class="desc_footer">
|
||
|
||
<span v-if="item.style.show.goodsPrice"
|
||
|
||
class="price_x">¥{{ goods.goods_price }}</span>
|
||
|
||
<span class="price_y x-color-999"
|
||
|
||
v-if="item.style.show.linePrice && goods.line_price > 0">
|
||
|
||
¥{{ goods.line_price }}
|
||
|
||
</span>
|
||
|
||
</div>
|
||
|
||
</div>
|
||
|
||
</div>
|
||
|
||
</div>
|
||
|
||
</template>
|
||
|
||
<!-- 两列三列 -->
|
||
|
||
<template v-else>
|
||
|
||
<div class="goods-image"> <img :src="goods.image"> </div>
|
||
|
||
<div class="detail">
|
||
|
||
<p v-if="item.style.show.goodsName" class="goods-name twolist-hidden">
|
||
|
||
{{goods.goods_name}}
|
||
|
||
</p>
|
||
|
||
<p class="detail-price">
|
||
|
||
<span v-if="item.style.show.goodsPrice" class="goods-price x-color-red">
|
||
|
||
{{ goods.goods_price }}
|
||
|
||
</span>
|
||
|
||
<span v-if="item.style.show.linePrice && goods.line_price > 0"
|
||
|
||
class="line-price">
|
||
|
||
{{ goods.line_price }}
|
||
|
||
</span>
|
||
|
||
</p>
|
||
|
||
</div>
|
||
|
||
</template>
|
||
|
||
</li>
|
||
|
||
</ul>
|
||
|
||
</div>
|
||
|
||
<div class="diy-goods" v-else :style="{background:item.style.bgColor}">
|
||
|
||
<ul class="goods-list am-cf"
|
||
|
||
:class="['display__' + item.style.display, 'column__3']">
|
||
|
||
<li class="goods-item"
|
||
|
||
v-for="goods in (item.params.source == 'choice' ? item.data : item.defaultData)">
|
||
|
||
<!-- 三列 -->
|
||
|
||
<template>
|
||
|
||
<div class="goods-image"> <img :src="goods.image"> </div>
|
||
|
||
<div class="detail">
|
||
|
||
<p v-if="item.style.show.goodsName" class="goods-name twolist-hidden">
|
||
|
||
{{goods.goods_name}}
|
||
|
||
</p>
|
||
|
||
<p class="detail-price">
|
||
|
||
<span v-if="item.style.show.goodsPrice" class="goods-price x-color-red">
|
||
|
||
{{ goods.goods_price }}
|
||
|
||
</span>
|
||
|
||
<span v-if="item.style.show.linePrice && goods.line_price > 0"
|
||
|
||
class="line-price">
|
||
|
||
{{ goods.line_price }}
|
||
|
||
</span>
|
||
|
||
</p>
|
||
|
||
</div>
|
||
|
||
</template>
|
||
|
||
</li>
|
||
|
||
</ul>
|
||
|
||
</div>
|
||
|
||
</div>
|
||
|
||
<div class="btn-edit-del">
|
||
|
||
<div class="btn-del" @click.stop="onDeleleItem(index)">删除</div>
|
||
|
||
</div>
|
||
|
||
</div>
|
||
|
||
</div>
|
||
|
||
</template>
|
||
|
||
<!-- diy元素: 在线客服 -->
|
||
|
||
<template v-else-if="item.type == 'service'">
|
||
|
||
<div class="diy-service drag optional drag__nomove" @click.stop="onEditer(index)"
|
||
|
||
:class="{selected: index === selectedIndex}"
|
||
|
||
:style="{ right: item.style.right + 'px', bottom: item.style.bottom + 'px', opacity: item.style.opacity / 100 }">
|
||
|
||
<div class="service-icon"> <img :src="item.params.image" alt=""> </div>
|
||
|
||
<div class="btn-edit-del">
|
||
|
||
<div class="btn-del" @click.stop="onDeleleItem(index)">删除</div>
|
||
|
||
</div>
|
||
|
||
</div>
|
||
|
||
</template>
|
||
|
||
<!-- diy元素: 关注公众号 -->
|
||
|
||
<template v-else-if="item.type == 'officialAccount'">
|
||
|
||
<div @click.stop="onEditer(index)">
|
||
|
||
<div class="drag optional" :class="{selected:index === selectedIndex}">
|
||
|
||
<div :style="{padding:'0px ' + item.style.marginLr + 'px'}">
|
||
|
||
<div class="diy-officialAccount">
|
||
|
||
<div class="item-top">
|
||
|
||
<span>关联的公众号</span>
|
||
|
||
</div>
|
||
|
||
<div class="item-content am-cf">
|
||
|
||
<div class="item-cont-avatar am-fl">
|
||
|
||
<img src="/addons/food/img/diy/circular.png" alt="">
|
||
|
||
</div>
|
||
|
||
<div class="item-cont-public am-fl">
|
||
|
||
<div class="public-name">
|
||
|
||
<span>公众号名称</span>
|
||
|
||
</div>
|
||
|
||
<div class="public-describe">
|
||
|
||
<span>公众号简介公众号简介</span>
|
||
|
||
</div>
|
||
|
||
</div>
|
||
|
||
<div class="item-cont-active am-fr">
|
||
|
||
<div class="active-btn">
|
||
|
||
<span>关注</span>
|
||
|
||
</div>
|
||
|
||
</div>
|
||
|
||
</div>
|
||
|
||
</div>
|
||
|
||
</div>
|
||
|
||
<div class="btn-edit-del">
|
||
|
||
<div class="btn-del" @click.stop="onDeleleItem(index)">删除</div>
|
||
|
||
</div>
|
||
|
||
</div>
|
||
|
||
</div>
|
||
|
||
</template>
|
||
|
||
<!-- diy元素: 富文本 -->
|
||
|
||
<template v-else-if="item.type == 'richText'">
|
||
|
||
<div @click.stop="onEditer(index)" class="bg-f7">
|
||
|
||
<div class="drag optional" :class="{selected: index === selectedIndex}">
|
||
|
||
<div :style="{padding:'0px ' + item.style.marginLr + 'px'}">
|
||
|
||
<div class="diy-richText"
|
||
|
||
:style="{background: item.style.bgColor, padding: item.style.paddingTb + 'px ' + item.style.paddingLr + 'px'}"
|
||
|
||
v-html="item.params.content">
|
||
|
||
</div>
|
||
|
||
</div>
|
||
|
||
<div class="btn-edit-del">
|
||
|
||
<div class="btn-del" @click.stop="onDeleleItem(index)">删除</div>
|
||
|
||
</div>
|
||
|
||
</div>
|
||
|
||
</div>
|
||
|
||
</template>
|
||
|
||
<!-- diy元素: 辅助空白 -->
|
||
|
||
<template v-else-if="item.type == 'blank'">
|
||
|
||
<div @click.stop="onEditer(index)">
|
||
|
||
<div class="drag optional" :class="{selected:index === selectedIndex}">
|
||
|
||
<div :style="{padding:'0px ' + item.style.marginLr + 'px'}">
|
||
|
||
<div class="diy-blank"
|
||
|
||
:style="{height: item.style.height +'px', background:item.style.bgColor }">
|
||
|
||
</div>
|
||
|
||
</div>
|
||
|
||
<div class="btn-edit-del">
|
||
|
||
<div class="btn-del" @click.stop="onDeleleItem(index)">删除</div>
|
||
|
||
</div>
|
||
|
||
</div>
|
||
|
||
</div>
|
||
|
||
</template>
|
||
|
||
<!-- diy元素: 辅助线 -->
|
||
|
||
<template v-else-if="item.type == 'guide'">
|
||
|
||
<div @click.stop="onEditer(index)" class="drag optional"
|
||
|
||
:class="{selected: index === selectedIndex}">
|
||
|
||
<div :style="{padding:'0px ' + item.style.marginLr + 'px'}">
|
||
|
||
<div class="diy-guide"
|
||
|
||
:style="{padding: item.style.paddingTb +'px '+'0', background:item.style.bgColor }">
|
||
|
||
<p class="line"
|
||
|
||
:style="{borderTopWidth: item.style.height +'px',borderTopColor:item.style.color,borderTopStyle: item.style.style }">
|
||
|
||
</p>
|
||
|
||
</div>
|
||
|
||
</div>
|
||
|
||
<div class="btn-edit-del">
|
||
|
||
<div class="btn-del" @click.stop="onDeleleItem(index)">删除</div>
|
||
|
||
</div>
|
||
|
||
</div>
|
||
|
||
</template>
|
||
|
||
<!-- diy元素: 栏目标题 -->
|
||
|
||
<template v-else-if="item.type == 'columnTitle'">
|
||
|
||
<div @click.stop="onEditer(index)" class="bg-f7">
|
||
|
||
<div class="drag optional" :class="{selected:index === selectedIndex}">
|
||
|
||
<div :style="{padding:'0px ' + item.style.marginLr + 'px'}">
|
||
|
||
<div class="column-title" :style="{background:item.style.bgColor, padding: item.style.paddingTb + 'px 0px'}">
|
||
|
||
<div v-if="item.params.showLine=='true'" class="line" :style="{background:item.style.lineColor}"></div>
|
||
|
||
<div class="title" :style="{color:item.style.color,fontWeight:item.style.bold}">{{item.params.title}}</div>
|
||
|
||
<div v-if="item.params.right=='true'" class="sub" :style="{color:item.style.subColor}">
|
||
|
||
{{item.params.subTitle}}
|
||
|
||
<i v-if="item.params.arrow=='true'" class="iconfont icongengduo"></i>
|
||
|
||
</div>
|
||
|
||
</div>
|
||
|
||
</div>
|
||
|
||
<div class="btn-edit-del">
|
||
|
||
<div class="btn-del" @click.stop="onDeleleItem(index)">删除</div>
|
||
|
||
</div>
|
||
|
||
</div>
|
||
|
||
</div>
|
||
|
||
</template>
|
||
|
||
</template>
|
||
|
||
</draggable>
|
||
|
||
</div>
|
||
|
||
<!-- 手机底部标题 -->
|
||
|
||
<div id="diy-page11" class="phone-bottom optional box-border-top" @click.stop="onEditer('tabbar')" :class="{selected: 'tabbar' === selectedIndex}" :style="{background: diyData.tabbar.style.bgColor}">
|
||
|
||
<div class="tabbar" v-for="(item,index) in diyData.tabbar.list">
|
||
|
||
<div>
|
||
|
||
<img :src="index ? item.inactiveIcon : item.activeIcon" />
|
||
|
||
</div>
|
||
|
||
<div class="text" :style="'color:'+ index ? diyData.tabbar.style.inactiveColor : diyData.tabbar.style.activeColor +';'">
|
||
|
||
{{item.text}}
|
||
|
||
</div>
|
||
|
||
</div>
|
||
|
||
</div>
|
||
|
||
</div>
|
||
|
||
<!-- 编辑器容器 -->
|
||
|
||
<div id="diy-editor" ref="diy-editor" class="diy-editor form-horizontal" :style="{ visibility: selectedIndex != -1 ? 'visible' : 'hidden' } " v-cloak>
|
||
|
||
<!-- 编辑器: 标题栏 -->
|
||
|
||
<div id="tpl_editor_page" v-if="selectedIndex === 'page'">
|
||
|
||
<div class="editor-title">
|
||
|
||
<span>{{ diyData.page.name }}</span>
|
||
|
||
</div>
|
||
|
||
<form class="am-form tpl-form-line-form">
|
||
|
||
<div class="am-form-group">
|
||
|
||
<label class="am-u-sm-3 am-form-label am-text-xs">页面名称 </label>
|
||
|
||
<div class="am-u-sm-8 am-u-end">
|
||
|
||
<input class="tpl-form-input" type="text" v-model="diyData.page.params.name">
|
||
|
||
<div class="help-block am-margin-top-xs">
|
||
|
||
<small>页面名称仅用于后台查找</small>
|
||
|
||
</div>
|
||
|
||
</div>
|
||
|
||
</div>
|
||
|
||
<div class="am-form-group">
|
||
|
||
<label class="am-u-sm-3 am-form-label am-text-xs">页面标题 </label>
|
||
|
||
<div class="am-u-sm-8 am-u-end">
|
||
|
||
<input class="tpl-form-input" type="text" v-model="diyData.page.params.title">
|
||
|
||
<div class="help-block am-margin-top-xs">
|
||
|
||
<small>小程序端顶部显示的标题</small>
|
||
|
||
</div>
|
||
|
||
</div>
|
||
|
||
</div>
|
||
|
||
<div class="am-form-group">
|
||
|
||
<label class="am-u-sm-3 am-form-label am-text-xs">分享标题 </label>
|
||
|
||
<div class="am-u-sm-8 am-u-end">
|
||
|
||
<input class="tpl-form-input" type="text" v-model="diyData.page.params.share_title">
|
||
|
||
<div class="help-block am-margin-top-xs">
|
||
|
||
<small>小程序端转发时显示的标题</small>
|
||
|
||
</div>
|
||
|
||
</div>
|
||
|
||
</div>
|
||
|
||
<div class="am-form-group">
|
||
|
||
<label class="am-u-sm-3 am-form-label am-text-xs">分享图片 </label>
|
||
|
||
<div class="am-u-sm-8 am-u-end">
|
||
|
||
<div class="data-image">
|
||
|
||
<img :src="curItem.params.share_image" style="height: 60px;"
|
||
|
||
@click="onEditorSelectImage(curItem.params, 'share_image')" alt="">
|
||
|
||
</div>
|
||
|
||
<div class="help-block">
|
||
|
||
<small>建议尺寸：500×400</small>
|
||
|
||
</div>
|
||
|
||
</div>
|
||
|
||
</div>
|
||
|
||
<div class="am-form-group">
|
||
|
||
<label class="am-u-sm-3 am-form-label am-text-xs">标题栏文字 </label>
|
||
|
||
<div class="am-u-sm-8 am-u-end">
|
||
|
||
<label class="am-radio-inline">
|
||
|
||
<input type="radio" value="black" v-model="diyData.page.style.titleTextColor"> 黑色
|
||
|
||
</label>
|
||
|
||
<label class="am-radio-inline">
|
||
|
||
<input type="radio" value="white" v-model="diyData.page.style.titleTextColor"> 白色
|
||
|
||
</label>
|
||
|
||
</div>
|
||
|
||
</div>
|
||
|
||
<div class="am-form-group">
|
||
|
||
<label class="am-u-sm-3 am-form-label am-text-xs">标题栏背景 </label>
|
||
|
||
<div class="am-u-sm-8 am-u-end">
|
||
|
||
<input class="" type="color" v-model="diyData.page.style.titleBackgroundColor">
|
||
|
||
<button type="button" class="btn-resetColor am-btn am-btn-xs"
|
||
|
||
@click.stop="onEditorResetColor(diyData.page.style, 'titleBackgroundColor', '#ffffff')"> 重置
|
||
|
||
</button>
|
||
|
||
</div>
|
||
|
||
</div>
|
||
|
||
</form>
|
||
|
||
</div>
|
||
|
||
<!-- 编辑器: 底部导航 -->
|
||
|
||
<div id="tpl_editor_tabbar" v-if="selectedIndex === 'tabbar'">
|
||
|
||
<div class="editor-title">
|
||
|
||
<span>{{ diyData.tabbar.name }}</span>
|
||
|
||
</div>
|
||
|
||
<form class="am-form tpl-form-line-form">
|
||
|
||
<div class="am-form-group">
|
||
|
||
<label class="am-u-sm-3 am-form-label am-text-xs">顶部边框 </label>
|
||
|
||
<div class="am-u-sm-8 am-u-end">
|
||
|
||
<label class="am-radio-inline">
|
||
|
||
<input type="radio" value="true" v-model="diyData.tabbar.style.border"> 有
|
||
|
||
</label>
|
||
|
||
<label class="am-radio-inline">
|
||
|
||
<input type="radio" value="false" v-model="diyData.tabbar.style.border"> 无
|
||
|
||
</label>
|
||
|
||
</div>
|
||
|
||
</div>
|
||
|
||
<div class="am-form-group">
|
||
|
||
<label class="am-u-sm-3 am-form-label am-text-xs">未激活颜色 </label>
|
||
|
||
<div class="am-u-sm-8 am-u-end">
|
||
|
||
<input class="" type="color" v-model="diyData.tabbar.style.inactiveColor">
|
||
|
||
<button type="button" class="btn-resetColor am-btn am-btn-xs"
|
||
|
||
@click.stop="onEditorResetColor(diyData.tabbar.style, 'inactiveColor', '#7d7e80')"> 重置
|
||
|
||
</button>
|
||
|
||
</div>
|
||
|
||
</div>
|
||
|
||
<div class="am-form-group">
|
||
|
||
<label class="am-u-sm-3 am-form-label am-text-xs">被激活颜色 </label>
|
||
|
||
<div class="am-u-sm-8 am-u-end">
|
||
|
||
<input class="" type="color" v-model="diyData.tabbar.style.activeColor">
|
||
|
||
<button type="button" class="btn-resetColor am-btn am-btn-xs"
|
||
|
||
@click.stop="onEditorResetColor(diyData.tabbar.style, 'activeColor', '#000000')"> 重置
|
||
|
||
</button>
|
||
|
||
</div>
|
||
|
||
</div>
|
||
|
||
<div class="form-items">
|
||
|
||
<div v-for="(item, index) in diyData.tabbar.list">
|
||
|
||
<div>{{item.text}}</div>
|
||
|
||
<div class="form-item">
|
||
|
||
<div class="item-inner">
|
||
|
||
<div class="am-form-group">
|
||
|
||
<label class="am-u-sm-3 am-form-label am-text-xs">被激活图标 </label>
|
||
|
||
<div class="am-u-sm-8 am-u-end">
|
||
|
||
<div class="data-image">
|
||
|
||
<img :src="item.activeIcon" alt=""
|
||
|
||
@click="onEditorSelectImage(item, 'activeIcon')">
|
||
|
||
</div>
|
||
|
||
<div class="help-block">
|
||
|
||
<small>建议尺寸：50*50，单位PX</small>
|
||
|
||
</div>
|
||
|
||
</div>
|
||
|
||
</div>
|
||
|
||
<div class="am-form-group">
|
||
|
||
<label class="am-u-sm-3 am-form-label am-text-xs">未激活图标 </label>
|
||
|
||
<div class="am-u-sm-8 am-u-end">
|
||
|
||
<div class="data-image">
|
||
|
||
<img :src="item.inactiveIcon" alt=""
|
||
|
||
@click="onEditorSelectImage(item, 'inactiveIcon')">
|
||
|
||
</div>
|
||
|
||
<div class="help-block">
|
||
|
||
<small>建议尺寸：50*50，单位PX</small>
|
||
|
||
</div>
|
||
|
||
</div>
|
||
|
||
</div>
|
||
|
||
<div class="am-form-group">
|
||
|
||
<label class="am-u-sm-3 am-form-label am-text-xs">栏目名称 </label>
|
||
|
||
<div class="am-u-sm-8 am-u-end">
|
||
|
||
<input type="text" v-model='item.text'>
|
||
|
||
</div>
|
||
|
||
</div>
|
||
|
||
</div>
|
||
|
||
</div>
|
||
|
||
</div>
|
||
|
||
</div>
|
||
|
||
</form>
|
||
|
||
</div>
|
||
|
||
<template v-if="diyData.items.length && curItem">
|
||
|
||
<!-- 编辑器: 图片轮播 -->
|
||
|
||
<div id="tpl_editor_banner" v-if="curItem.type == 'banner'">
|
||
|
||
<div class="editor-title"><span>{{curItem.name}}</span></div>
|
||
|
||
<form class="am-form tpl-form-line-form">
|
||
|
||
<div class="am-form-group">
|
||
|
||
<label class="am-u-sm-3 am-form-label am-text-xs">自动播放 </label>
|
||
|
||
<div class="am-u-sm-9 am-u-end">
|
||
|
||
<label class="am-radio-inline">
|
||
|
||
<input type="radio" value="true" v-model="curItem.params.autoplay"> 开
|
||
|
||
</label>
|
||
|
||
<label class="am-radio-inline">
|
||
|
||
<input type="radio" value="false" v-model="curItem.params.autoplay"> 关
|
||
|
||
</label>
|
||
|
||
</div>
|
||
|
||
</div>
|
||
|
||
<div class="am-form-group">
|
||
|
||
<label class="am-u-sm-3 am-form-label am-text-xs">播放衔接 </label>
|
||
|
||
<div class="am-u-sm-9 am-u-end">
|
||
|
||
<label class="am-radio-inline">
|
||
|
||
<input type="radio" value="true" v-model="curItem.params.circular"> 开
|
||
|
||
</label>
|
||
|
||
<label class="am-radio-inline">
|
||
|
||
<input type="radio" value="false" v-model="curItem.params.circular"> 关
|
||
|
||
</label>
|
||
|
||
</div>
|
||
|
||
</div>
|
||
|
||
<div class="am-form-group">
|
||
|
||
<label class="am-u-sm-3 am-form-label am-text-xs">面板指示 </label>
|
||
|
||
<div class="am-u-sm-9 am-u-end">
|
||
|
||
<label class="am-radio-inline">
|
||
|
||
<input type="radio" value="true" v-model="curItem.params.indicator"> 开
|
||
|
||
</label>
|
||
|
||
<label class="am-radio-inline">
|
||
|
||
<input type="radio" value="false"
|
||
|
||
v-model="curItem.params.indicator"> 关 </label> </div>
|
||
|
||
</div>
|
||
|
||
<div class="am-form-group"> <label class="am-u-sm-3 am-form-label am-text-xs">轮播时间 </label>
|
||
|
||
<div class="am-u-sm-8 am-u-end"> <input class="tpl-form-input" type="number"
|
||
|
||
v-model="curItem.params.interval">
|
||
|
||
<div class="help-block"> <small>自动轮播时间间隔，单位ms</small> </div>
|
||
|
||
</div>
|
||
|
||
</div>
|
||
|
||
<div class="am-form-group"> <label class="am-u-sm-3 am-form-label am-text-xs">切换时间 </label>
|
||
|
||
<div class="am-u-sm-8 am-u-end"> <input class="tpl-form-input" type="number"
|
||
|
||
v-model="curItem.params.duration">
|
||
|
||
<div class="help-block"> <small>切换一张轮播图所需的时间，单位ms</small> </div>
|
||
|
||
</div>
|
||
|
||
</div>
|
||
|
||
<div class="am-form-group"> <label class="am-u-sm-3 am-form-label am-text-xs">显示高度 </label>
|
||
|
||
<div class="am-u-sm-8 am-u-end"> <input class="tpl-form-input" type="number"
|
||
|
||
v-model="curItem.style.height">
|
||
|
||
<div class="help-block"> <small>轮播图显示高度，单位px</small> </div>
|
||
|
||
</div>
|
||
|
||
</div>
|
||
|
||
<div class="am-form-group">
|
||
|
||
<label class="am-u-sm-3 am-form-label am-text-xs">左右边距 </label>
|
||
|
||
<div class="am-u-sm-9 am-u-end">
|
||
|
||
<input class="tpl-form-input" type="range"
|
||
|
||
v-model="curItem.style.marginLr" min="0" max="100">
|
||
|
||
<div class="display-value">
|
||
|
||
<span class="value">{{ curItem.style.marginLr }}</span>px (像素)
|
||
|
||
</div>
|
||
|
||
</div>
|
||
|
||
</div>
|
||
|
||
<div class="am-form-group"> <label class="am-u-sm-3 am-form-label am-text-xs">圆角边框 </label>
|
||
|
||
<div class="am-u-sm-9 am-u-end"> <input class="tpl-form-input" type="range"
|
||
|
||
v-model="curItem.style.radius" min="0" max="20">
|
||
|
||
<div class="display-value"> <span class="value">{{ curItem.style.radius }}</span>px (像素)
|
||
|
||
</div>
|
||
|
||
</div>
|
||
|
||
</div>
|
||
|
||
<div class="am-form-group">
|
||
|
||
<label class="am-u-sm-3 am-form-label am-text-xs">欢迎标语 </label>
|
||
|
||
<div class="am-u-sm-9 am-u-end">
|
||
|
||
<label class="am-radio-inline">
|
||
|
||
<input type="radio" value="true" v-model="curItem.style.welcome"> 显示
|
||
|
||
</label>
|
||
|
||
<label class="am-radio-inline">
|
||
|
||
<input type="radio" value="false" v-model="curItem.style.welcome"> 隐藏
|
||
|
||
</label>
|
||
|
||
</div>
|
||
|
||
</div>
|
||
|
||
<div class="am-form-group"> <label class="am-u-sm-3 am-form-label am-text-xs">背景颜色 </label>
|
||
|
||
<div class="am-u-sm-9 am-u-end"> <input class="" type="color" v-model="curItem.style.bgColor">
|
||
|
||
<button type="button" class="btn-resetColor am-btn am-btn-xs"
|
||
|
||
@click.stop="onEditorResetColor(curItem.style, 'bgColor', '#ffffff')"> 重置 </button>
|
||
|
||
</div>
|
||
|
||
</div>
|
||
|
||
<div class="am-form-group"> <label class="am-u-sm-3 am-form-label am-text-xs">3D效果 </label>
|
||
|
||
<div class="am-u-sm-9 am-u-end"> <label class="am-radio-inline"> <input type="radio" value="30"
|
||
|
||
v-model="curItem.style.effect3d"> 开 </label> <label class="am-radio-inline"> <input
|
||
|
||
type="radio" value="0" v-model="curItem.style.effect3d"> 关 </label> </div>
|
||
|
||
</div>
|
||
|
||
<div class="am-form-group"> <label class="am-u-sm-3 am-form-label am-text-xs">显示标题 </label>
|
||
|
||
<div class="am-u-sm-9 am-u-end"> <label class="am-radio-inline"> <input type="radio"
|
||
|
||
value="true" v-model="curItem.style.showTitle"> 开 </label> <label
|
||
|
||
class="am-radio-inline"> <input type="radio" value="false"
|
||
|
||
v-model="curItem.style.showTitle"> 关 </label> </div>
|
||
|
||
</div>
|
||
|
||
<div class="am-form-group"> <label class="am-u-sm-3 am-form-label am-text-xs">指示点形状 </label>
|
||
|
||
<div class="am-u-sm-9 am-u-end"> <label class="am-radio-inline"> <input type="radio"
|
||
|
||
value="rect" v-model="curItem.style.indicatorMode"> 方块 </label> <label
|
||
|
||
class="am-radio-inline"> <input type="radio" value="dot"
|
||
|
||
v-model="curItem.style.indicatorMode"> 圆点 </label> <label class="am-radio-inline">
|
||
|
||
<input type="radio" value="line" v-model="curItem.style.indicatorMode"> 粗线 </label>
|
||
|
||
<label class="am-radio-inline"> <input type="radio" value="none"
|
||
|
||
v-model="curItem.style.indicatorMode"> 无 </label> </div>
|
||
|
||
</div>
|
||
|
||
<div class="am-form-group"> <label class="am-u-sm-3 am-form-label am-text-xs">指点位置 </label>
|
||
|
||
<div class="am-u-sm-9 am-u-end"> <label class="am-radio-inline"> <input type="radio" value="top"
|
||
|
||
v-model="curItem.style.indicatorStyle"> 上边 </label> <label class="am-radio-inline">
|
||
|
||
<input type="radio" value="bottom" v-model="curItem.style.indicatorStyle"> 下边 </label>
|
||
|
||
<label class="am-radio-inline"> <input type="radio" value="left"
|
||
|
||
v-model="curItem.style.indicatorStyle"> 左边 </label> <label class="am-radio-inline">
|
||
|
||
<input type="radio" value="right" v-model="curItem.style.indicatorStyle"> 右边 </label>
|
||
|
||
</div>
|
||
|
||
</div>
|
||
|
||
<div class="form-items">
|
||
|
||
<draggable :list="curItem.data"
|
||
|
||
:options="{ animation: 120, filter: 'input', preventOnFilter: false }">
|
||
|
||
<div class="form-item" v-for="(banner, index) in curItem.data">
|
||
|
||
<i class="iconfont iconshanchu item-delete"
|
||
|
||
@click="onEditorDeleleData(index, selectedIndex)"></i>
|
||
|
||
<div class="item-inner">
|
||
|
||
<div class="am-form-group"> <label class="am-u-sm-3 am-form-label am-text-xs">类型
|
||
|
||
</label>
|
||
|
||
<div class="am-u-sm-8 am-u-end"> <label class="am-radio-inline"> <input
|
||
|
||
type="radio" value="image" v-model="banner.type"> 图片 </label> <label
|
||
|
||
class="am-radio-inline"> <input type="radio" value="video"
|
||
|
||
v-model="banner.type"> 视频 </label> </div>
|
||
|
||
</div>
|
||
|
||
<div class="am-form-group"> <label class="am-u-sm-3 am-form-label am-text-xs">图片
|
||
|
||
</label>
|
||
|
||
<div class="am-u-sm-8 am-u-end">
|
||
|
||
<div v-if="banner.type == 'image'" class="data-image"> <img
|
||
|
||
:src="banner.image" alt=""
|
||
|
||
@click="onEditorSelectImage(banner, 'image')"> </div>
|
||
|
||
<div v-if="banner.type == 'video'" class="data-image"> <img
|
||
|
||
:src="banner.poster" alt=""
|
||
|
||
@click="onEditorSelectImage(banner, 'poster')"> </div>
|
||
|
||
<div class="help-block"> <small>建议尺寸：宽750 高度同上设置，单位PX</small> </div>
|
||
|
||
</div>
|
||
|
||
</div>
|
||
|
||
<div class="am-form-group"> <label class="am-u-sm-3 am-form-label am-text-xs">显示标题
|
||
|
||
</label>
|
||
|
||
<div class="am-u-sm-8 am-u-end"> <input type="text" value=""
|
||
|
||
v-model='banner.title'> </div>
|
||
|
||
</div>
|
||
|
||
<div class="am-form-group"> <label class="am-u-sm-3 am-form-label am-text-xs">链接地址
|
||
|
||
</label>
|
||
|
||
<div class="am-u-sm-8 am-u-end"> <input type="text" value=""
|
||
|
||
v-model='banner.url'> </div>
|
||
|
||
</div>
|
||
|
||
<div v-if="banner.type == 'video'" class="am-form-group"> <label
|
||
|
||
class="am-u-sm-3 am-form-label am-text-xs">视频地址 </label>
|
||
|
||
<div class="am-u-sm-8 am-u-end"> <input type="text" value=""
|
||
|
||
v-model='banner.image'> </div>
|
||
|
||
</div>
|
||
|
||
</div>
|
||
|
||
</div>
|
||
|
||
</draggable>
|
||
|
||
</div>
|
||
|
||
<div class="j-data-add form-item-add" @click="onEditorAddData"> <i class="fa fa-plus"></i> 添加一个
|
||
|
||
</div>
|
||
|
||
</form>
|
||
|
||
</div>
|
||
|
||
<!--编辑器: 单图组-->
|
||
|
||
<div id="tpl_editor_imageSingle" v-if="curItem.type == 'imageSingle'">
|
||
|
||
<div class="editor-title">
|
||
|
||
<span>{{ curItem.name }}</span>
|
||
|
||
</div>
|
||
|
||
<form class="am-form tpl-form-line-form">
|
||
|
||
<div class="am-form-group">
|
||
|
||
<label class="am-u-sm-3 am-form-label am-text-xs">左右边距 </label>
|
||
|
||
<div class="am-u-sm-9 am-u-end">
|
||
|
||
<input class="tpl-form-input" type="range"
|
||
|
||
v-model="curItem.style.marginLr" min="0" max="100">
|
||
|
||
<div class="display-value">
|
||
|
||
<span class="value">{{ curItem.style.marginLr }}</span>px (像素)
|
||
|
||
</div>
|
||
|
||
</div>
|
||
|
||
</div>
|
||
|
||
<div class="am-form-group">
|
||
|
||
<label class="am-u-sm-3 am-form-label am-text-xs">上下填充 </label>
|
||
|
||
<div class="am-u-sm-9 am-u-end">
|
||
|
||
<input class="tpl-form-input" type="range" v-model="curItem.style.paddingTb" min="0" max="50">
|
||
|
||
<div class="display-value">
|
||
|
||
<span class="value">{{ curItem.style.paddingTb }}</span>px (像素)
|
||
|
||
</div>
|
||
|
||
</div>
|
||
|
||
</div>
|
||
|
||
<div class="am-form-group">
|
||
|
||
<label class="am-u-sm-3 am-form-label am-text-xs">左右填充 </label>
|
||
|
||
<div class="am-u-sm-9 am-u-end">
|
||
|
||
<input class="tpl-form-input" type="range" v-model="curItem.style.paddingLr" min="0" max="50">
|
||
|
||
<div class="display-value">
|
||
|
||
<span class="value">{{ curItem.style.paddingLr }}</span>px(像素)
|
||
|
||
</div>
|
||
|
||
</div>
|
||
|
||
</div>
|
||
|
||
<div class="am-form-group">
|
||
|
||
<label class="am-u-sm-3 am-form-label am-text-xs">图片圆角 </label>
|
||
|
||
<div class="am-u-sm-9 am-u-end">
|
||
|
||
<input class="tpl-form-input" type="range" v-model="curItem.style.radius" min="0" max="100">
|
||
|
||
<div class="display-value">
|
||
|
||
<span class="value">{{ curItem.style.radius }}</span>px(像素)
|
||
|
||
</div>
|
||
|
||
</div>
|
||
|
||
</div>
|
||
|
||
<div class="am-form-group">
|
||
|
||
<label class="am-u-sm-3 am-form-label am-text-xs">背景颜色 </label>
|
||
|
||
<div class="am-u-sm-9 am-u-end">
|
||
|
||
<input class="" type="color" v-model="curItem.style.bgColor">
|
||
|
||
<button type="button" class="btn-resetColor am-btn am-btn-xs"
|
||
|
||
@click.stop="onEditorResetColor(curItem.style, 'bgColor', '#ffffff')"> 重置 </button>
|
||
|
||
</div>
|
||
|
||
</div>
|
||
|
||
<div class="form-items">
|
||
|
||
<draggable :list="curItem.data"
|
||
|
||
:options="{ animation: 120, filter: 'input', preventOnFilter: false }">
|
||
|
||
<div class="form-item drag" v-for="(imageSingle, index) in curItem.data">
|
||
|
||
<i class="iconfont iconshanchu item-delete"
|
||
|
||
@click="onEditorDeleleData(index,selectedIndex)"></i>
|
||
|
||
<div class="item-inner">
|
||
|
||
<div class="am-form-group">
|
||
|
||
<label class="am-u-sm-3 am-form-label am-text-xs">图片</label>
|
||
|
||
<div class="am-u-sm-8 am-u-end">
|
||
|
||
<div class="data-image">
|
||
|
||
<img :src="imageSingle.image" alt=""
|
||
|
||
@click="onEditorSelectImage(imageSingle, 'image')">
|
||
|
||
</div>
|
||
|
||
</div>
|
||
|
||
</div>
|
||
|
||
<div class="am-form-group">
|
||
|
||
<label class="am-u-sm-3 am-form-label am-text-xs">链接地址</label>
|
||
|
||
<div class="am-u-sm-8 am-u-end">
|
||
|
||
<input type="text" value="" v-model='imageSingle.url'>
|
||
|
||
</div>
|
||
|
||
</div>
|
||
|
||
</div>
|
||
|
||
</div>
|
||
|
||
</draggable>
|
||
|
||
</div>
|
||
|
||
<div class="j-data-add form-item-add" @click="onEditorAddData">
|
||
|
||
<i class="fa fa-plus"></i> 添加一个
|
||
|
||
</div>
|
||
|
||
</form>
|
||
|
||
</div>
|
||
|
||
<!--编辑器: 图片橱窗-->
|
||
|
||
<div id="tpl_editor_window" v-if="curItem.type == 'window'">
|
||
|
||
<div class="editor-title"><span>{{ curItem.name }}</span></div>
|
||
|
||
<form class="am-form tpl-form-line-form">
|
||
|
||
<div class="am-form-group">
|
||
|
||
<label class="am-u-sm-3 am-form-label am-text-xs">图片形状 </label>
|
||
|
||
<div class="am-u-sm-9 am-u-end">
|
||
|
||
<label class="am-radio-inline">
|
||
|
||
<input type="radio" value="square" v-model="curItem.style.shape"> 方形
|
||
|
||
</label>
|
||
|
||
<label class="am-radio-inline">
|
||
|
||
<input type="radio" value="circle" v-model="curItem.style.shape"> 圆形
|
||
|
||
</label>
|
||
|
||
</div>
|
||
|
||
</div>
|
||
|
||
<div class="am-form-group">
|
||
|
||
<label class="am-u-sm-3 am-form-label am-text-xs">左右边距 </label>
|
||
|
||
<div class="am-u-sm-9 am-u-end">
|
||
|
||
<input class="tpl-form-input" type="range"
|
||
|
||
v-model="curItem.style.marginLr" min="0" max="100">
|
||
|
||
<div class="display-value">
|
||
|
||
<span class="value">{{ curItem.style.marginLr }}</span>px (像素)
|
||
|
||
</div>
|
||
|
||
</div>
|
||
|
||
</div>
|
||
|
||
<div class="am-form-group">
|
||
|
||
<label class="am-u-sm-3 am-form-label am-text-xs">上下填充 </label>
|
||
|
||
<div class="am-u-sm-9 am-u-end"> <input class="tpl-form-input" type="range"
|
||
|
||
v-model="curItem.style.paddingTb" min="0" max="50">
|
||
|
||
<div class="display-value">
|
||
|
||
<span class="value">{{ curItem.style.paddingTb }}</span>px (像素)
|
||
|
||
</div>
|
||
|
||
</div>
|
||
|
||
</div>
|
||
|
||
<div class="am-form-group">
|
||
|
||
<label class="am-u-sm-3 am-form-label am-text-xs">左右填充 </label>
|
||
|
||
<div class="am-u-sm-9 am-u-end"> <input class="tpl-form-input" type="range"
|
||
|
||
v-model="curItem.style.paddingLr" min="0" max="50">
|
||
|
||
<div class="display-value"> <span class="value">{{ curItem.style.paddingLr }}</span>px
|
||
|
||
(像素) </div>
|
||
|
||
</div>
|
||
|
||
</div>
|
||
|
||
<div class="am-form-group">
|
||
|
||
<label class="am-u-sm-3 am-form-label am-text-xs">图片圆角 </label>
|
||
|
||
<div class="am-u-sm-9 am-u-end"> <input class="tpl-form-input" type="range"
|
||
|
||
v-model="curItem.style.radius" min="0" max="100">
|
||
|
||
<div class="display-value"> <span class="value">{{ curItem.style.radius }}</span>px
|
||
|
||
(像素) </div>
|
||
|
||
</div>
|
||
|
||
</div>
|
||
|
||
<div class="am-form-group">
|
||
|
||
<label class="am-u-sm-3 am-form-label am-text-xs">显示高度</label>
|
||
|
||
<div class="am-u-sm-8 am-u-end">
|
||
|
||
<input type="text" value="" v-model='curItem.style.height'>
|
||
|
||
<div class="help-block">
|
||
|
||
<small>图片显示的高度，单位px(像素)</small>
|
||
|
||
</div>
|
||
|
||
</div>
|
||
|
||
</div>
|
||
|
||
<div class="am-form-group"> <label class="am-u-sm-3 am-form-label am-text-xs">背景颜色 </label>
|
||
|
||
<div class="am-u-sm-9 am-u-end">
|
||
|
||
<input class="" type="color" v-model="curItem.style.bgColor">
|
||
|
||
<button type="button" class="btn-resetColor am-btn am-btn-xs"
|
||
|
||
@click.stop="onEditorResetColor(curItem.style, 'bgColor', '#ffffff')"> 重置 </button>
|
||
|
||
</div>
|
||
|
||
</div>
|
||
|
||
<div class="am-form-group">
|
||
|
||
<label class="am-u-sm-3 am-form-label am-text-xs">布局方式 </label>
|
||
|
||
<div class="j-switch-help am-u-sm-8 am-u-end">
|
||
|
||
<label class="am-radio-inline">
|
||
|
||
<input type="radio" value="2" v-model="curItem.style.layout"> 堆积两列
|
||
|
||
</label>
|
||
|
||
<label class="am-radio-inline">
|
||
|
||
<input type="radio" value="3" v-model="curItem.style.layout"> 堆积三列
|
||
|
||
</label>
|
||
|
||
<label class="am-radio-inline">
|
||
|
||
<input type="radio" value="4" v-model="curItem.style.layout"> 堆积四列
|
||
|
||
</label>
|
||
|
||
<label class="am-radio-inline">
|
||
|
||
<input type="radio" value="-1" v-model="curItem.style.layout"> 橱窗样式
|
||
|
||
<small class="help am-hide"> 最多显示四张图片，超出隐藏 </small>
|
||
|
||
</label>
|
||
|
||
<div class="help-block am-margin-top-xs" data-default="请确保所有图片的尺寸/比例相同。">
|
||
|
||
<small>请确保所有图片的尺寸/比例相同。</small>
|
||
|
||
</div>
|
||
|
||
</div>
|
||
|
||
</div>
|
||
|
||
<div class="form-items">
|
||
|
||
<draggable :list="curItem.data"
|
||
|
||
:options="{ animation: 120, filter: 'input', preventOnFilter: false }">
|
||
|
||
<div class="form-item drag" v-for="(item, index) in curItem.data"> <i
|
||
|
||
class="iconfont iconshanchu item-delete"
|
||
|
||
@click="onEditorDeleleData(index,selectedIndex)"> </i>
|
||
|
||
<div class="item-inner">
|
||
|
||
<div class="am-form-group">
|
||
|
||
<label class="am-u-sm-3 am-form-label am-text-xs">图片</label>
|
||
|
||
<div class="am-u-sm-8 am-u-end">
|
||
|
||
<div class="data-image">
|
||
|
||
<img :src="item.image" @click="onEditorSelectImage(item, 'image')">
|
||
|
||
</div>
|
||
|
||
</div>
|
||
|
||
</div>
|
||
|
||
<div class="am-form-group">
|
||
|
||
<label class="am-u-sm-3 am-form-label am-text-xs">链接地址</label>
|
||
|
||
<div class="am-u-sm-8 am-u-end">
|
||
|
||
<input type="text" v-model="item.url">
|
||
|
||
</div>
|
||
|
||
</div>
|
||
|
||
</div>
|
||
|
||
</div>
|
||
|
||
</draggable>
|
||
|
||
</div>
|
||
|
||
<div class="j-data-add form-item-add" @click="onEditorAddData"> <i class="fa fa-plus"></i> 添加一个
|
||
|
||
</div>
|
||
|
||
</form>
|
||
|
||
</div>
|
||
|
||
<!--编辑器: 视频组-->
|
||
|
||
<div id="tpl_editor_video" v-if="curItem.type == 'video'">
|
||
|
||
<div class="editor-title"><span>{{ curItem.name }}</span></div>
|
||
|
||
<form class="am-form tpl-form-line-form">
|
||
|
||
<div class="am-form-group">
|
||
|
||
<label class="am-u-sm-3 am-form-label am-text-xs">自动播放 </label>
|
||
|
||
<div class="am-u-sm-9 am-u-end">
|
||
|
||
<label class="am-radio-inline">
|
||
|
||
<input type="radio" value="false" v-model="curItem.params.autoplay"> 否
|
||
|
||
</label>
|
||
|
||
<label class="am-radio-inline">
|
||
|
||
<input type="radio" value="true" v-model="curItem.params.autoplay"> 是
|
||
|
||
</label>
|
||
|
||
</div>
|
||
|
||
</div>
|
||
|
||
<div class="am-form-group">
|
||
|
||
<label class="am-u-sm-3 am-form-label am-text-xs">循环播放 </label>
|
||
|
||
<div class="am-u-sm-9 am-u-end">
|
||
|
||
<label class="am-radio-inline">
|
||
|
||
<input type="radio" value="false" v-model="curItem.params.loop"> 否
|
||
|
||
</label>
|
||
|
||
<label class="am-radio-inline">
|
||
|
||
<input type="radio" value="true" v-model="curItem.params.loop"> 是
|
||
|
||
</label>
|
||
|
||
</div>
|
||
|
||
</div>
|
||
|
||
<div class="am-form-group">
|
||
|
||
<label class="am-u-sm-3 am-form-label am-text-xs">静音播放 </label>
|
||
|
||
<div class="am-u-sm-9 am-u-end">
|
||
|
||
<label class="am-radio-inline">
|
||
|
||
<input type="radio" value="false" v-model="curItem.params.muted"> 否
|
||
|
||
</label>
|
||
|
||
<label class="am-radio-inline">
|
||
|
||
<input type="radio" value="true" v-model="curItem.params.muted"> 是
|
||
|
||
</label>
|
||
|
||
</div>
|
||
|
||
</div>
|
||
|
||
<div class="am-form-group">
|
||
|
||
<label class="am-u-sm-3 am-form-label am-text-xs">视频高度 </label>
|
||
|
||
<div class="am-u-sm-8 am-u-end">
|
||
|
||
<input class="tpl-form-input" type="text" v-model="curItem.style.height">
|
||
|
||
<div class="help-block">
|
||
|
||
<small>显示的高度，单位px(像素)</small>
|
||
|
||
</div>
|
||
|
||
</div>
|
||
|
||
</div>
|
||
|
||
<div class="am-form-group">
|
||
|
||
<label class="am-u-sm-3 am-form-label am-text-xs">左右边距 </label>
|
||
|
||
<div class="am-u-sm-9 am-u-end">
|
||
|
||
<input class="tpl-form-input" type="range"
|
||
|
||
v-model="curItem.style.marginLr" min="0" max="100">
|
||
|
||
<div class="display-value">
|
||
|
||
<span class="value">{{ curItem.style.marginLr }}</span>px (像素)
|
||
|
||
</div>
|
||
|
||
</div>
|
||
|
||
</div>
|
||
|
||
<div class="am-form-group">
|
||
|
||
<label class="am-u-sm-3 am-form-label am-text-xs">背景颜色 </label>
|
||
|
||
<div class="am-u-sm-9 am-u-end">
|
||
|
||
<input class="" type="color" v-model="curItem.style.bgColor">
|
||
|
||
<button type="button" class="btn-resetColor am-btn am-btn-xs"
|
||
|
||
@click.stop="onEditorResetColor(curItem.style, 'bgColor', '#ffffff')"> 重置 </button>
|
||
|
||
</div>
|
||
|
||
</div>
|
||
|
||
<div class="am-form-group am-padding-top"> <label class="am-u-sm-3 am-form-label am-text-xs">视频封面
|
||
|
||
</label>
|
||
|
||
<div class="am-u-sm-8 am-u-end">
|
||
|
||
<div class="data-image">
|
||
|
||
<img :src="curItem.params.poster" @click="onEditorSelectImage(curItem.params, 'poster')">
|
||
|
||
</div>
|
||
|
||
</div>
|
||
|
||
</div>
|
||
|
||
<div class="am-form-group"> <label class="am-u-sm-3 am-form-label am-text-xs">视频地址 </label>
|
||
|
||
<div class="am-u-sm-9 am-u-end">
|
||
|
||
<input class="tpl-form-input" type="text" v-model="curItem.params.src"> </div>
|
||
|
||
</div>
|
||
|
||
|
||
|
||
</form>
|
||
|
||
</div>
|
||
|
||
<!--编辑器: 点单组-->
|
||
|
||
<div id="tpl_editor_navBar" v-if="curItem.type == 'order'">
|
||
|
||
<div class="editor-title"><span>{{ curItem.name }}</span></div>
|
||
|
||
<form class="am-form tpl-form-line-form">
|
||
|
||
<div class="am-form-group">
|
||
|
||
<label class="am-u-sm-3 am-form-label am-text-xs">图标宽度</label>
|
||
|
||
<div class="am-u-sm-8 am-u-end">
|
||
|
||
<input type="text" value="" v-model='curItem.style.width'>
|
||
|
||
<div class="help-block">
|
||
|
||
<small>图标显示的宽度，单位px(像素)</small>
|
||
|
||
</div>
|
||
|
||
</div>
|
||
|
||
</div>
|
||
|
||
<div class="am-form-group">
|
||
|
||
<label class="am-u-sm-3 am-form-label am-text-xs">图标高度</label>
|
||
|
||
<div class="am-u-sm-8 am-u-end">
|
||
|
||
<input type="text" value="" v-model='curItem.style.height'>
|
||
|
||
<div class="help-block">
|
||
|
||
<small>图标显示的高度，单位px(像素)</small>
|
||
|
||
</div>
|
||
|
||
</div>
|
||
|
||
</div>
|
||
|
||
<div class="am-form-group">
|
||
|
||
<label class="am-u-sm-3 am-form-label am-text-xs">左右边距 </label>
|
||
|
||
<div class="am-u-sm-9 am-u-end">
|
||
|
||
<input class="tpl-form-input" type="range"
|
||
|
||
v-model="curItem.style.marginLr" min="0" max="100">
|
||
|
||
<div class="display-value">
|
||
|
||
<span class="value">{{ curItem.style.marginLr }}</span>px (像素)
|
||
|
||
</div>
|
||
|
||
</div>
|
||
|
||
</div>
|
||
|
||
<div class="am-form-group">
|
||
|
||
<label class="am-u-sm-3 am-form-label am-text-xs">向上移动 </label>
|
||
|
||
<div class="am-u-sm-9 am-u-end">
|
||
|
||
<input class="tpl-form-input" type="range"
|
||
|
||
v-model="curItem.style.marginTop" min="0" max="100">
|
||
|
||
<div class="display-value">
|
||
|
||
<span class="value">{{ curItem.style.marginTop }}</span>px (像素)
|
||
|
||
</div>
|
||
|
||
</div>
|
||
|
||
</div>
|
||
|
||
<div class="am-form-group">
|
||
|
||
<label class="am-u-sm-3 am-form-label am-text-xs">外框圆角 </label>
|
||
|
||
<div class="am-u-sm-9 am-u-end">
|
||
|
||
<input class="tpl-form-input" type="range"
|
||
|
||
v-model="curItem.style.radius" min="0" max="20">
|
||
|
||
<div class="display-value">
|
||
|
||
<span class="value">{{ curItem.style.radius }}</span>px (像素)
|
||
|
||
</div>
|
||
|
||
</div>
|
||
|
||
</div>
|
||
|
||
<div class="am-form-group">
|
||
|
||
<label class="am-u-sm-3 am-form-label am-text-xs">背景颜色 </label>
|
||
|
||
<div class="am-u-sm-9 am-u-end">
|
||
|
||
<input class="" type="color" v-model="curItem.style.bgColor">
|
||
|
||
<button type="button" class="btn-resetColor am-btn am-btn-xs"
|
||
|
||
@click.stop="onEditorResetColor(curItem.style, 'bgColor', '#ffffff')"> 重置 </button>
|
||
|
||
</div>
|
||
|
||
</div>
|
||
|
||
<div class="am-form-group">
|
||
|
||
<label class="am-u-sm-3 am-form-label am-text-xs"> 显示数量 </label>
|
||
|
||
<div class="am-u-sm-8 am-u-end">
|
||
|
||
<label class="am-radio-inline">
|
||
|
||
<input type="radio" value="1" v-model="curItem.params.number"> 1个
|
||
|
||
</label>
|
||
|
||
<label class="am-radio-inline">
|
||
|
||
<input type="radio" value="2" v-model="curItem.params.number"> 2个
|
||
|
||
</label>
|
||
|
||
<label class="am-radio-inline">
|
||
|
||
<input type="radio" value="3" v-model="curItem.params.number"> 3个
|
||
|
||
</label>
|
||
|
||
</div>
|
||
|
||
</div>
|
||
|
||
<div class="form-items">
|
||
|
||
<draggable :list="curItem.data"
|
||
|
||
:options="{ animation: 120, filter: 'input', preventOnFilter: false }">
|
||
|
||
<div class="form-item drag" v-for="(item, index) in curItem.data"> <i
|
||
|
||
class="iconfont iconshanchu item-delete"
|
||
|
||
@click="onEditorDeleleData(index, selectedIndex)"></i>
|
||
|
||
<div class="item-inner">
|
||
|
||
<div class="am-form-group">
|
||
|
||
<label class="am-u-sm-3 am-form-label am-text-xs">项目图标 </label>
|
||
|
||
<div class="am-u-sm-8 am-u-end">
|
||
|
||
<div class="data-image">
|
||
|
||
<img :src="item.image" alt=""
|
||
|
||
@click="onEditorSelectImage(item, 'image')">
|
||
|
||
</div>
|
||
|
||
<div class="help-block">
|
||
|
||
<small>建议尺寸：150*150，单位PX</small>
|
||
|
||
</div>
|
||
|
||
</div>
|
||
|
||
</div>
|
||
|
||
<div class="am-form-group">
|
||
|
||
<label class="am-u-sm-3 am-form-label am-text-xs">标题名称 </label>
|
||
|
||
<div class="am-u-sm-8 am-u-end">
|
||
|
||
<input type="text" v-model='item.title'>
|
||
|
||
</div>
|
||
|
||
</div>
|
||
|
||
<div class="am-form-group">
|
||
|
||
<label class="am-u-sm-3 am-form-label am-text-xs">辅助文字 </label>
|
||
|
||
<div class="am-u-sm-8 am-u-end">
|
||
|
||
<input type="text" v-model='item.text'>
|
||
|
||
</div>
|
||
|
||
</div>
|
||
|
||
<div class="am-form-group">
|
||
|
||
<label class="am-u-sm-3 am-form-label am-text-xs">点单类型 </label>
|
||
|
||
<div class="am-u-sm-8 am-u-end">
|
||
|
||
<label class="am-radio-inline">
|
||
|
||
<input type="radio" value="10" v-model="item.food_mode"> 堂食
|
||
|
||
</label>
|
||
|
||
<label class="am-radio-inline">
|
||
|
||
<input type="radio" value="20" v-model="item.food_mode"> 外卖
|
||
|
||
</label>
|
||
|
||
<label class="am-radio-inline">
|
||
|
||
<input type="radio" value="30" v-model="item.food_mode"> 自取
|
||
|
||
</label>
|
||
|
||
</div>
|
||
|
||
</div>
|
||
|
||
</div>
|
||
|
||
</div>
|
||
|
||
</draggable>
|
||
|
||
</div>
|
||
|
||
<div v-if="curItem.data.length < curItem.params.number" class="j-data-add form-item-add" @click="onEditorAddData">
|
||
|
||
<i class="fa fa-plus"></i> 添加一个
|
||
|
||
</div>
|
||
|
||
</form>
|
||
|
||
</div>
|
||
|
||
<!--编辑器: 公告组-->
|
||
|
||
<div id="tpl_editor_notice" v-if="curItem.type == 'notice'">
|
||
|
||
<div class="editor-title"><span>{{ curItem.name }}</span></div>
|
||
|
||
<form class="am-form tpl-form-line-form">
|
||
|
||
<div class="am-form-group">
|
||
|
||
<label class="am-u-sm-3 am-form-label am-text-xs">滚动方式 </label>
|
||
|
||
<div class="am-u-sm-9 am-u-end">
|
||
|
||
<label class="am-radio-inline">
|
||
|
||
<input type="radio" value="row" v-model="curItem.params.direction"> 水平
|
||
|
||
</label>
|
||
|
||
<label class="am-radio-inline">
|
||
|
||
<input type="radio" value="column" v-model="curItem.params.direction"> 垂直
|
||
|
||
</label>
|
||
|
||
</div>
|
||
|
||
</div>
|
||
|
||
<div class="am-form-group">
|
||
|
||
<label class="am-u-sm-3 am-form-label am-text-xs">步进效果 </label>
|
||
|
||
<div class="am-u-sm-9 am-u-end">
|
||
|
||
<label class="am-radio-inline">
|
||
|
||
<input type="radio" value="false" v-model="curItem.params.step"> 否
|
||
|
||
</label>
|
||
|
||
<label class="am-radio-inline">
|
||
|
||
<input type="radio" value="true" v-model="curItem.params.step"> 是
|
||
|
||
</label>
|
||
|
||
</div>
|
||
|
||
</div>
|
||
|
||
<div class="am-form-group">
|
||
|
||
<label class="am-u-sm-3 am-form-label am-text-xs">文字颜色 </label>
|
||
|
||
<div class="am-u-sm-9 am-u-end">
|
||
|
||
<input type="color" v-model="curItem.style.color">
|
||
|
||
<button type="button" class="btn-resetColor am-btn am-btn-xs"
|
||
|
||
@click.stop="onEditorResetColor(curItem.style, 'color', '#f9ae3d')"> 重置 </button>
|
||
|
||
</div>
|
||
|
||
</div>
|
||
|
||
<div class="am-form-group">
|
||
|
||
<label class="am-u-sm-3 am-form-label am-text-xs">背景颜色 </label>
|
||
|
||
<div class="am-u-sm-9 am-u-end">
|
||
|
||
<input class="" type="color" v-model="curItem.style.bgColor">
|
||
|
||
<button type="button" class="btn-resetColor am-btn am-btn-xs"
|
||
|
||
@click.stop="onEditorResetColor(curItem.style, 'bgColor', '#fdf6ec')"> 重置 </button>
|
||
|
||
</div>
|
||
|
||
</div>
|
||
|
||
<div class="am-form-group">
|
||
|
||
<label class="am-u-sm-3 am-form-label am-text-xs">左右边距 </label>
|
||
|
||
<div class="am-u-sm-9 am-u-end">
|
||
|
||
<input class="tpl-form-input" type="range"
|
||
|
||
v-model="curItem.style.marginLr" min="0" max="100">
|
||
|
||
<div class="display-value">
|
||
|
||
<span class="value">{{ curItem.style.marginLr }}</span>px (像素)
|
||
|
||
</div>
|
||
|
||
</div>
|
||
|
||
</div>
|
||
|
||
<div class="form-items">
|
||
|
||
<draggable :list="curItem.data"
|
||
|
||
:options="{ animation: 120, filter: 'input', preventOnFilter: false }">
|
||
|
||
<div class="form-item drag" v-if="curItem.params.direction == 'row'">
|
||
|
||
<div class="item-inner">
|
||
|
||
<div class="am-form-group">
|
||
|
||
<label class="am-u-sm-3 am-form-label am-text-xs">公告内容</label>
|
||
|
||
<div class="am-u-sm-8 am-u-end">
|
||
|
||
<input type="text" v-model='curItem.data[0].text'>
|
||
|
||
</div>
|
||
|
||
</div>
|
||
|
||
<div class="am-form-group">
|
||
|
||
<label class="am-u-sm-3 am-form-label am-text-xs">公告连接</label>
|
||
|
||
<div class="am-u-sm-8 am-u-end">
|
||
|
||
<input type="text" v-model='curItem.data[0].url'>
|
||
|
||
</div>
|
||
|
||
</div>
|
||
|
||
</div>
|
||
|
||
</div>
|
||
|
||
<div v-else class="form-item drag" v-for="(notice, index) in curItem.data">
|
||
|
||
<i class="iconfont iconshanchu item-delete"
|
||
|
||
@click="onEditorDeleleData(index,selectedIndex)"></i>
|
||
|
||
<div class="item-inner">
|
||
|
||
<div class="am-form-group">
|
||
|
||
<label class="am-u-sm-3 am-form-label am-text-xs">公告内容</label>
|
||
|
||
<div class="am-u-sm-8 am-u-end">
|
||
|
||
<input type="text" v-model='notice.text'>
|
||
|
||
</div>
|
||
|
||
</div>
|
||
|
||
<div class="am-form-group">
|
||
|
||
<label class="am-u-sm-3 am-form-label am-text-xs">公告连接</label>
|
||
|
||
<div class="am-u-sm-8 am-u-end">
|
||
|
||
<input type="text" v-model='notice.url'>
|
||
|
||
</div>
|
||
|
||
</div>
|
||
|
||
</div>
|
||
|
||
</div>
|
||
|
||
</draggable>
|
||
|
||
</div>
|
||
|
||
<div v-if="curItem.params.direction == 'column'" class="j-data-add form-item-add" @click="onEditorAddData">
|
||
|
||
<i class="fa fa-plus"></i> 添加一个
|
||
|
||
</div>
|
||
|
||
</form>
|
||
|
||
</div>
|
||
|
||
<!--编辑器: 导航组-->
|
||
|
||
<div id="tpl_editor_navBar" v-if="curItem.type == 'navBar'">
|
||
|
||
<div class="editor-title"><span>{{ curItem.name }}</span></div>
|
||
|
||
<form class="am-form tpl-form-line-form">
|
||
|
||
<div class="am-form-group">
|
||
|
||
<label class="am-u-sm-3 am-form-label am-text-xs">显示宽度</label>
|
||
|
||
<div class="am-u-sm-8 am-u-end">
|
||
|
||
<input type="text" value="" v-model='curItem.style.width'>
|
||
|
||
<div class="help-block">
|
||
|
||
<small>图片显示的宽度，单位px(像素)</small>
|
||
|
||
</div>
|
||
|
||
</div>
|
||
|
||
</div>
|
||
|
||
<div class="am-form-group">
|
||
|
||
<label class="am-u-sm-3 am-form-label am-text-xs">显示高度</label>
|
||
|
||
<div class="am-u-sm-8 am-u-end">
|
||
|
||
<input type="text" value="" v-model='curItem.style.height'>
|
||
|
||
<div class="help-block">
|
||
|
||
<small>图片显示的高度，单位px(像素)</small>
|
||
|
||
</div>
|
||
|
||
</div>
|
||
|
||
</div>
|
||
|
||
<div class="am-form-group">
|
||
|
||
<label class="am-u-sm-3 am-form-label am-text-xs">左右边距 </label>
|
||
|
||
<div class="am-u-sm-9 am-u-end">
|
||
|
||
<input class="tpl-form-input" type="range"
|
||
|
||
v-model="curItem.style.marginLr" min="0" max="100">
|
||
|
||
<div class="display-value">
|
||
|
||
<span class="value">{{ curItem.style.marginLr }}</span>px (像素)
|
||
|
||
</div>
|
||
|
||
</div>
|
||
|
||
</div>
|
||
|
||
<div class="am-form-group">
|
||
|
||
<label class="am-u-sm-3 am-form-label am-text-xs">背景颜色 </label>
|
||
|
||
<div class="am-u-sm-9 am-u-end">
|
||
|
||
<input class="" type="color" v-model="curItem.style.bgColor">
|
||
|
||
<button type="button" class="btn-resetColor am-btn am-btn-xs"
|
||
|
||
@click.stop="onEditorResetColor(curItem.style, 'bgColor', '#ffffff')"> 重置 </button>
|
||
|
||
</div>
|
||
|
||
</div>
|
||
|
||
<div class="am-form-group">
|
||
|
||
<label class="am-u-sm-3 am-form-label am-text-xs">每行数量 </label>
|
||
|
||
<div class="am-u-sm-9 am-u-end">
|
||
|
||
<label class="am-radio-inline">
|
||
|
||
<input type="radio" value="3" v-model="curItem.style.rowsNum"> 3个
|
||
|
||
</label>
|
||
|
||
<label class="am-radio-inline">
|
||
|
||
<input type="radio" value="4" v-model="curItem.style.rowsNum"> 4个
|
||
|
||
</label>
|
||
|
||
<label class="am-radio-inline">
|
||
|
||
<input type="radio" value="5" v-model="curItem.style.rowsNum"> 5个
|
||
|
||
</label>
|
||
|
||
</div>
|
||
|
||
</div>
|
||
|
||
<div class="form-items">
|
||
|
||
<draggable :list="curItem.data"
|
||
|
||
:options="{ animation: 120, filter: 'input', preventOnFilter: false }">
|
||
|
||
<div class="form-item drag" v-for="(navBar, index) in curItem.data"> <i
|
||
|
||
class="iconfont iconshanchu item-delete"
|
||
|
||
@click="onEditorDeleleData(index, selectedIndex)"></i>
|
||
|
||
<div class="item-inner">
|
||
|
||
<div class="am-form-group">
|
||
|
||
<label class="am-u-sm-3 am-form-label am-text-xs">图片</label>
|
||
|
||
<div class="am-u-sm-8 am-u-end">
|
||
|
||
<div class="data-image">
|
||
|
||
<img :src="navBar.image" @click="onEditorSelectImage(navBar, 'image')">
|
||
|
||
</div>
|
||
|
||
<div class="help-block">
|
||
|
||
<small>建议尺寸100x100</small>
|
||
|
||
</div>
|
||
|
||
</div>
|
||
|
||
</div>
|
||
|
||
<div class="am-form-group">
|
||
|
||
<label class="am-u-sm-3 am-form-label am-text-xs">文字内容</label>
|
||
|
||
<div class="am-u-sm-8 am-u-end">
|
||
|
||
<input type="text" v-model="navBar.text">
|
||
|
||
</div>
|
||
|
||
</div>
|
||
|
||
<div class="am-form-group">
|
||
|
||
<label class="am-u-sm-3 am-form-label am-text-xs">文字颜色</label>
|
||
|
||
<div class="am-u-sm-8 am-u-end">
|
||
|
||
<input type="color" v-model="navBar.color">
|
||
|
||
<button type="button" class="btn-resetColor am-btn am-btn-xs"
|
||
|
||
@click.stop="onEditorResetColor(navBar, 'color', '#999999')"> 重置
|
||
|
||
</button>
|
||
|
||
</div>
|
||
|
||
</div>
|
||
|
||
<div class="am-form-group">
|
||
|
||
<label class="am-u-sm-3 am-form-label am-text-xs">链接地址</label>
|
||
|
||
<div class="am-u-sm-8 am-u-end">
|
||
|
||
<input type="text" v-model="navBar.url">
|
||
|
||
</div>
|
||
|
||
</div>
|
||
|
||
</div>
|
||
|
||
</div>
|
||
|
||
</draggable>
|
||
|
||
</div>
|
||
|
||
<div class="j-data-add form-item-add" @click="onEditorAddData"> <i class="fa fa-plus"></i> 添加一个
|
||
|
||
</div>
|
||
|
||
</form>
|
||
|
||
</div>
|
||
|
||
<!--编辑器: 商品组-->
|
||
|
||
<div id="tpl_editor_goods" v-if="curItem.type == 'goods'">
|
||
|
||
<div class="editor-title"><span>{{ curItem.name }}</span></div>
|
||
|
||
<form class="am-form tpl-form-line-form">
|
||
|
||
<!--商品数据-->
|
||
|
||
<div class="j-switch-box" data-item-class="switch-source">
|
||
|
||
<div class="am-form-group">
|
||
|
||
<label class="am-u-sm-3 am-form-label am-text-xs">商品来源 </label>
|
||
|
||
<div class="am-u-sm-8 am-u-end">
|
||
|
||
<label class="am-radio-inline">
|
||
|
||
<input type="radio" value="auto" v-model="curItem.params.source"> 自动获取
|
||
|
||
</label>
|
||
|
||
<label class="am-radio-inline">
|
||
|
||
<input type="radio" value="choice" v-model="curItem.params.source" disabled> 手动选择
|
||
|
||
</label>
|
||
|
||
</div>
|
||
|
||
</div>
|
||
|
||
<!--手动选择-->
|
||
|
||
<div class="switch-source __choice " v-show="curItem.params.source == 'choice'">
|
||
|
||
<div class="form-items __goods am-cf">
|
||
|
||
<draggable :list="curItem.data"
|
||
|
||
:options="{ animation: 120, filter: 'input', preventOnFilter: false }">
|
||
|
||
<div v-for="(goods,index) in curItem.data" class="form-item drag">
|
||
|
||
<i class="iconfont iconshanchu item-delete" data-no-confirm="true"
|
||
|
||
@click="onEditorDeleleData(index, selectedIndex)"></i>
|
||
|
||
<div class="item-inner">
|
||
|
||
<div class="data-image"> <img :src="goods.image"> </div>
|
||
|
||
</div>
|
||
|
||
</div>
|
||
|
||
</draggable>
|
||
|
||
</div>
|
||
|
||
<div class="j-selectGoods form-item-add" @click.stop="onSelectGoods(curItem)">
|
||
|
||
<i class="fa fa-plus"></i> 选择商品
|
||
|
||
</div>
|
||
|
||
</div>
|
||
|
||
<!-- 自动获取 -->
|
||
|
||
<div class="switch-source" v-show="curItem.params.source == 'auto'">
|
||
|
||
<!-- <div class="am-form-group"> <label class="am-u-sm-3 am-form-label am-text-xs">商品分类 </label> <div class="am-u-sm-8 am-u-end"> <select v-model="curItem.params.auto.category" data-am-selected="{btnSize: 'sm', placeholder:'全部分类', maxHeight: 400}"> <option value="0"> -- 全部分类 --</option> <template v-for="first in opts.category"> <option :value="first.category_id"> {{ first.name }}</option> <template v-if="first.child"> <option v-for="two in first.child" :value="two.category_id"> {{ two.name }} </option> </template> </template> </select> </div> </div> -->
|
||
|
||
<div class="am-form-group">
|
||
|
||
<label class="am-u-sm-3 am-form-label am-text-xs"> 筛选条件 </label>
|
||
|
||
<div class="am-u-sm-8 am-u-end">
|
||
|
||
<label class="am-radio-inline">
|
||
|
||
<input type="radio" value="all" v-model="curItem.params.auto.goodsSort"> 综合
|
||
|
||
</label>
|
||
|
||
<label class="am-radio-inline">
|
||
|
||
<input type="radio" value="sales" v-model="curItem.params.auto.goodsSort"> 销量
|
||
|
||
</label>
|
||
|
||
<label class="am-radio-inline">
|
||
|
||
<input type="radio" value="new" v-model="curItem.params.auto.goodsSort"> 新品
|
||
|
||
</label>
|
||
|
||
<label class="am-radio-inline">
|
||
|
||
<input type="radio" value="recommend" v-model="curItem.params.auto.goodsSort"> 推荐
|
||
|
||
</label>
|
||
|
||
</div>
|
||
|
||
</div>
|
||
|
||
<div class="am-form-group">
|
||
|
||
<label class="am-u-sm-3 am-form-label am-text-xs"> 显示数量 </label>
|
||
|
||
<div class="am-u-sm-8 am-u-end">
|
||
|
||
<input class="tpl-form-input" type="number" min="1" v-model="curItem.params.auto.showNum">
|
||
|
||
</div>
|
||
|
||
</div>
|
||
|
||
</div>
|
||
|
||
</div>
|
||
|
||
<!--分割线-->
|
||
|
||
<hr data-am-widget="divider" style="" class="am-divider am-divider-dashed" />
|
||
|
||
<!--组件样式-->
|
||
|
||
<div class="am-form-group">
|
||
|
||
<label class="am-u-sm-3 am-form-label am-text-xs">左右边距 </label>
|
||
|
||
<div class="am-u-sm-9 am-u-end">
|
||
|
||
<input class="tpl-form-input" type="range"
|
||
|
||
v-model="curItem.style.marginLr" min="0" max="100">
|
||
|
||
<div class="display-value">
|
||
|
||
<span class="value">{{ curItem.style.marginLr }}</span>px (像素)
|
||
|
||
</div>
|
||
|
||
</div>
|
||
|
||
</div>
|
||
|
||
<div class="am-form-group">
|
||
|
||
<label class="am-u-sm-3 am-form-label am-text-xs">背景颜色 </label>
|
||
|
||
<div class="am-u-sm-8 am-u-end">
|
||
|
||
<input type="color" v-model="curItem.style.bgColor">
|
||
|
||
<button type="button" class="btn-resetColor am-btn am-btn-xs"
|
||
|
||
@click.stop="onEditorResetColor(curItem.style, 'bgColor', '#ffffff')"> 重置 </button>
|
||
|
||
</div>
|
||
|
||
</div>
|
||
|
||
<div class="am-form-group">
|
||
|
||
<label class="am-u-sm-3 am-form-label am-text-xs">显示类型 </label>
|
||
|
||
<div class="am-u-sm-8 am-u-end">
|
||
|
||
<label class="am-radio-inline">
|
||
|
||
<input type="radio" value="list" v-model="curItem.style.display"> 列表平铺
|
||
|
||
</label>
|
||
|
||
<label class="am-radio-inline">
|
||
|
||
<input type="radio" value="slide" v-model="curItem.style.display"> 横向滑动
|
||
|
||
</label>
|
||
|
||
</div>
|
||
|
||
</div>
|
||
|
||
<div class="am-form-group" v-if="curItem.style.display == 'list'">
|
||
|
||
<label class="am-u-sm-3 am-form-label am-text-xs">分列数量 </label>
|
||
|
||
<div class="am-u-sm-8 am-u-end">
|
||
|
||
<label class="am-radio-inline">
|
||
|
||
<input type="radio" value="1" v-model="curItem.style.column"> 单列
|
||
|
||
</label>
|
||
|
||
<label class="am-radio-inline">
|
||
|
||
<input type="radio" value="2" v-model="curItem.style.column"> 两列
|
||
|
||
</label>
|
||
|
||
<label class="am-radio-inline">
|
||
|
||
<input type="radio" value="3" v-model="curItem.style.column"> 三列
|
||
|
||
</label>
|
||
|
||
</div>
|
||
|
||
</div>
|
||
|
||
<div class="am-form-group">
|
||
|
||
<label class="am-u-sm-3 am-form-label am-text-xs">显示内容 </label>
|
||
|
||
<div class="am-u-sm-8 am-u-end">
|
||
|
||
<label class="am-checkbox-inline">
|
||
|
||
<input type="checkbox" v-model="curItem.style.show.goodsName">商品名称
|
||
|
||
</label>
|
||
|
||
<label class="am-checkbox-inline">
|
||
|
||
<input type="checkbox" v-model="curItem.style.show.goodsPrice"> 商品价格
|
||
|
||
</label>
|
||
|
||
<label
|
||
|
||
class="am-checkbox-inline">
|
||
|
||
<input type="checkbox" v-model="curItem.style.show.linePrice"> 划线价格
|
||
|
||
</label>
|
||
|
||
<label class="am-checkbox-inline" v-if="curItem.style.column == 1 && curItem.style.display == 'list'">
|
||
|
||
<input type="checkbox" v-model="curItem.style.show.sellingPoint"> 商品卖点
|
||
|
||
</label>
|
||
|
||
<label class="am-checkbox-inline" v-if="curItem.style.column == 1 && curItem.style.display == 'list'">
|
||
|
||
<input type="checkbox" v-model="curItem.style.show.goodsSales"> 商品销量
|
||
|
||
</label>
|
||
|
||
</div>
|
||
|
||
</div>
|
||
|
||
</form>
|
||
|
||
</div>
|
||
|
||
<!--编辑器: 在线客服-->
|
||
|
||
<div id="tpl_editor_service" v-if="curItem.type == 'service'">
|
||
|
||
<div class="editor-title"><span>{{ curItem.name }}</span></div>
|
||
|
||
<form class="am-form tpl-form-line-form">
|
||
|
||
<div class="am-form-group">
|
||
|
||
<label class="am-u-sm-3 am-form-label am-text-xs"> 底边距 </label>
|
||
|
||
<div class="am-u-sm-8 am-u-end">
|
||
|
||
<input class="tpl-form-input" type="range" v-model="curItem.style.bottom" min="0" max="200">
|
||
|
||
<div class="display-value">
|
||
|
||
<span class="value">{{ curItem.style.bottom }}</span>px
|
||
|
||
</div>
|
||
|
||
</div>
|
||
|
||
</div>
|
||
|
||
<div class="am-form-group">
|
||
|
||
<label class="am-u-sm-3 am-form-label am-text-xs"> 右边距 </label>
|
||
|
||
<div class="am-u-sm-8 am-u-end">
|
||
|
||
<input class="tpl-form-input" type="range" v-model="curItem.style.right" min="0" max="200">
|
||
|
||
<div class="display-value">
|
||
|
||
<span class="value">{{ curItem.style.right }}</span>px
|
||
|
||
</div>
|
||
|
||
</div>
|
||
|
||
</div>
|
||
|
||
<div class="am-form-group">
|
||
|
||
<label class="am-u-sm-3 am-form-label am-text-xs"> 透明度 </label>
|
||
|
||
<div class="am-u-sm-8 am-u-end">
|
||
|
||
<input class="tpl-form-input" type="range" v-model="curItem.style.opacity" min="0" max="100">
|
||
|
||
<div class="display-value">
|
||
|
||
<span class="value">{{ curItem.style.opacity }}</span>%
|
||
|
||
</div>
|
||
|
||
</div>
|
||
|
||
</div>
|
||
|
||
<hr data-am-widget="divider" class="am-divider am-divider-dashed">
|
||
|
||
<div class="am-form-group">
|
||
|
||
<label class="am-u-sm-3 am-form-label am-text-xs"> 客服类型 </label>
|
||
|
||
<div class="am-u-sm-9 am-u-end">
|
||
|
||
<label class="am-radio-inline">
|
||
|
||
<input type="radio" value="chat" v-model="curItem.params.type"> 在线聊天
|
||
|
||
</label>
|
||
|
||
<label class="am-radio-inline">
|
||
|
||
<input type="radio" value="phone" v-model="curItem.params.type"> 拨打电话
|
||
|
||
</label>
|
||
|
||
</div>
|
||
|
||
</div>
|
||
|
||
<div class="am-form-group" v-show="curItem.params.type == 'phone'">
|
||
|
||
<label class="am-u-sm-3 am-form-label am-text-xs"> 电话号码 </label>
|
||
|
||
<div class="am-u-sm-9 am-u-end">
|
||
|
||
<input type="text" class="tpl-form-input" placeholder="请输入电话号码" v-model="curItem.params.phone_num">
|
||
|
||
</div>
|
||
|
||
</div>
|
||
|
||
<div class="am-form-group">
|
||
|
||
<label class="am-u-sm-3 am-form-label am-text-xs"> 客服图标 </label>
|
||
|
||
<div class="am-u-sm-8 am-u-end">
|
||
|
||
<div class="data-image">
|
||
|
||
<img :src="curItem.params.image" style="height: 45px;" title="点击更换图片" alt="" @click="onEditorSelectImage(curItem.params, 'image')">
|
||
|
||
</div>
|
||
|
||
<div class="help-block">
|
||
|
||
<small>建议尺寸：90×90</small>
|
||
|
||
</div>
|
||
|
||
</div>
|
||
|
||
</div>
|
||
|
||
</form>
|
||
|
||
</div>
|
||
|
||
<!-- 编辑器: 关注公众号 -->
|
||
|
||
<div id="tpl_editor_officialAccount" v-if="curItem.type == 'officialAccount'">
|
||
|
||
<div class="editor-title">
|
||
|
||
<span>{{ curItem.name }}</span>
|
||
|
||
</div>
|
||
|
||
<form class="am-form tpl-form-line-form">
|
||
|
||
<div class="am-form-group">
|
||
|
||
<label class="am-u-sm-3 am-form-label am-text-xs">左右边距 </label>
|
||
|
||
<div class="am-u-sm-9 am-u-end">
|
||
|
||
<input class="tpl-form-input" type="range"
|
||
|
||
v-model="curItem.style.marginLr" min="0" max="100">
|
||
|
||
<div class="display-value">
|
||
|
||
<span class="value">{{ curItem.style.marginLr }}</span>px (像素)
|
||
|
||
</div>
|
||
|
||
</div>
|
||
|
||
</div>
|
||
|
||
</form>
|
||
|
||
<hr data-am-widget="divider" class="am-divider am-divider-dashed">
|
||
|
||
<div class="editor-centent">
|
||
|
||
<p>1、使用组件前，需前往<a href="https://mp.weixin.qq.com" target="_blank">小程序后台</a>，在“设置”->“接口设置”->“公众号关注组件”中设置要展示的公众号。</p>
|
||
|
||
<p class="x-mb-10">注：设置的公众号需与小程序主体一致。</p>
|
||
|
||
<p>2、当小程序从扫二维码场景（场景值1011）打开时，才具有展示引导关注公众号组件的能力。</p>
|
||
|
||
</div>
|
||
|
||
</div>
|
||
|
||
<!--编辑器: 富文本-->
|
||
|
||
<div id="tpl_editor_richText" v-if="curItem.type == 'richText'">
|
||
|
||
<div class="editor-title">
|
||
|
||
<span>{{curItem.name}}</span>
|
||
|
||
</div>
|
||
|
||
<form class="am-form tpl-form-line-form">
|
||
|
||
<div class="am-form-group">
|
||
|
||
<label class="am-u-sm-3 am-form-label am-text-xs">左右边距 </label>
|
||
|
||
<div class="am-u-sm-9 am-u-end">
|
||
|
||
<input class="tpl-form-input" type="range"
|
||
|
||
v-model="curItem.style.marginLr" min="0" max="100">
|
||
|
||
<div class="display-value">
|
||
|
||
<span class="value">{{ curItem.style.marginLr }}</span>px (像素)
|
||
|
||
</div>
|
||
|
||
</div>
|
||
|
||
</div>
|
||
|
||
<div class="am-form-group">
|
||
|
||
<label class="am-u-sm-3 am-form-label am-text-xs">上下填充 </label>
|
||
|
||
<div class="am-u-sm-8 am-u-end">
|
||
|
||
<input class="tpl-form-input" type="range" v-model="curItem.style.paddingTb" min="0" max="50">
|
||
|
||
<div class="display-value">
|
||
|
||
<span class="value">{{ curItem.style.paddingTb }}</span>px(像素)
|
||
|
||
</div>
|
||
|
||
</div>
|
||
|
||
</div>
|
||
|
||
<div class="am-form-group">
|
||
|
||
<label class="am-u-sm-3 am-form-label am-text-xs">左右填充 </label>
|
||
|
||
<div class="am-u-sm-8 am-u-end">
|
||
|
||
<input class="tpl-form-input" type="range" min="0" max="50" v-model="curItem.style.paddingLr">
|
||
|
||
<div class="display-value">
|
||
|
||
<span class="value">{{curItem.style.paddingLr}}</span>px(像素)
|
||
|
||
</div>
|
||
|
||
</div>
|
||
|
||
</div>
|
||
|
||
<div class="am-form-group">
|
||
|
||
<label class="am-u-sm-3 am-form-label am-text-xs">背景颜色 </label>
|
||
|
||
<div class="am-u-sm-9 am-u-end">
|
||
|
||
<input class="" type="color" v-model="curItem.style.bgColor">
|
||
|
||
<button type="button" class="btn-resetColor am-btn am-btn-xs"
|
||
|
||
@click.stop="onEditorResetColor(curItem.style, 'bgColor', '#ffffff')"> 重置 </button>
|
||
|
||
</div>
|
||
|
||
</div>
|
||
|
||
<div class="am-form-group am-padding-top-sm">
|
||
|
||
<textarea id="ume-editor" name="editorValue"></textarea>
|
||
|
||
</div>
|
||
|
||
</form>
|
||
|
||
</div>
|
||
|
||
<!--编辑器: 辅助空白-->
|
||
|
||
<div id="tpl_editor_blank" v-if="curItem.type == 'blank'">
|
||
|
||
<div class="editor-title">
|
||
|
||
<span>{{ curItem.name }}</span>
|
||
|
||
</div>
|
||
|
||
<form class="am-form tpl-form-line-form">
|
||
|
||
<div class="am-form-group">
|
||
|
||
<label class="am-u-sm-3 am-form-label am-text-xs">左右边距 </label>
|
||
|
||
<div class="am-u-sm-9 am-u-end">
|
||
|
||
<input class="tpl-form-input" type="range"
|
||
|
||
v-model="curItem.style.marginLr" min="0" max="100">
|
||
|
||
<div class="display-value">
|
||
|
||
<span class="value">{{ curItem.style.marginLr }}</span>px (像素)
|
||
|
||
</div>
|
||
|
||
</div>
|
||
|
||
</div>
|
||
|
||
<div class="am-form-group">
|
||
|
||
<label class="am-u-sm-4 am-form-label am-text-xs">组件高度 </label>
|
||
|
||
<div class="am-u-sm-8 am-u-end">
|
||
|
||
<input class="tpl-form-input" type="range" v-model="curItem.style.height" min="1" max="100">
|
||
|
||
<div class="display-value">
|
||
|
||
<span class="value">{{ curItem.style.height }}</span>px(像素)
|
||
|
||
</div>
|
||
|
||
</div>
|
||
|
||
</div>
|
||
|
||
<div class="am-form-group">
|
||
|
||
<label class="am-u-sm-4 am-form-label am-text-xs">背景颜色 </label>
|
||
|
||
<div class="am-u-sm-8 am-u-end">
|
||
|
||
<input class="" type="color" v-model="curItem.style.bgColor">
|
||
|
||
<button type="button" class="btn-resetColor am-btn am-btn-xs"
|
||
|
||
@click.stop="onEditorResetColor(curItem.style, 'bgColor', '#f7f7f7')"> 重置 </button>
|
||
|
||
</div>
|
||
|
||
</div>
|
||
|
||
</form>
|
||
|
||
</div>
|
||
|
||
<!--编辑器: 辅助线-->
|
||
|
||
<div id="tpl_editor_guide" v-if="curItem.type == 'guide'">
|
||
|
||
<div class="editor-title">
|
||
|
||
<span>{{ curItem.name }}</span>
|
||
|
||
</div>
|
||
|
||
<form class="am-form tpl-form-line-form">
|
||
|
||
<div class="am-form-group">
|
||
|
||
<label class="am-u-sm-4 am-form-label am-text-xs">线条样式 </label>
|
||
|
||
<div class="am-u-sm-8 am-u-end">
|
||
|
||
<label class="am-radio-inline">
|
||
|
||
<input type="radio" value="solid" v-model='curItem.style.style'> 实线
|
||
|
||
</label>
|
||
|
||
<label class="am-radio-inline">
|
||
|
||
<input type="radio" value="dashed" v-model='curItem.style.style'> 虚线
|
||
|
||
</label>
|
||
|
||
<label class="am-radio-inline">
|
||
|
||
<input type="radio" value="dotted" v-model='curItem.style.style'> 点状
|
||
|
||
</label>
|
||
|
||
</div>
|
||
|
||
</div>
|
||
|
||
<div class="am-form-group">
|
||
|
||
<label class="am-u-sm-4 am-form-label am-text-xs">线条颜色 </label>
|
||
|
||
<div class="am-u-sm-8 am-u-end">
|
||
|
||
<input class="" type="color" v-model="curItem.style.color">
|
||
|
||
<button type="button" class="btn-resetColor am-btn am-btn-xs"
|
||
|
||
@click.stop="onEditorResetColor(curItem.style, 'color', '#f7f7f7')"> 重置 </button>
|
||
|
||
</div>
|
||
|
||
</div>
|
||
|
||
<div class="am-form-group">
|
||
|
||
<label class="am-u-sm-3 am-form-label am-text-xs">左右边距 </label>
|
||
|
||
<div class="am-u-sm-9 am-u-end">
|
||
|
||
<input class="tpl-form-input" type="range"
|
||
|
||
v-model="curItem.style.marginLr" min="0" max="100">
|
||
|
||
<div class="display-value">
|
||
|
||
<span class="value">{{ curItem.style.marginLr }}</span>px (像素)
|
||
|
||
</div>
|
||
|
||
</div>
|
||
|
||
</div>
|
||
|
||
<div class="am-form-group">
|
||
|
||
<label class="am-u-sm-4 am-form-label am-text-xs">上下填充 </label>
|
||
|
||
<div class="am-u-sm-8 am-u-end">
|
||
|
||
<input class="tpl-form-input" type="range" v-model="curItem.style.paddingTb" min="0" max="50">
|
||
|
||
<div class="display-value">
|
||
|
||
<span class="value">{{ curItem.style.paddingTb }}</span>px(像素)
|
||
|
||
</div>
|
||
|
||
</div>
|
||
|
||
</div>
|
||
|
||
<div class="am-form-group">
|
||
|
||
<label class="am-u-sm-4 am-form-label am-text-xs">线条高度 </label>
|
||
|
||
<div class="am-u-sm-8 am-u-end">
|
||
|
||
<input class="tpl-form-input" type="range" v-model="curItem.style.height" min="1" max="20">
|
||
|
||
<div class="display-value">
|
||
|
||
<span class="value">{{ curItem.style.height }}</span>px(像素)
|
||
|
||
</div>
|
||
|
||
</div>
|
||
|
||
</div>
|
||
|
||
<div class="am-form-group">
|
||
|
||
<label class="am-u-sm-4 am-form-label am-text-xs">背景颜色 </label>
|
||
|
||
<div class="am-u-sm-8 am-u-end">
|
||
|
||
<input class="" type="color" v-model="curItem.style.bgColor">
|
||
|
||
<button type="button" class="btn-resetColor am-btn am-btn-xs"
|
||
|
||
@click.stop="onEditorResetColor(curItem.style, 'bgColor', '#f7f7f7')"> 重置 </button>
|
||
|
||
</div>
|
||
|
||
</div>
|
||
|
||
</form>
|
||
|
||
</div>
|
||
|
||
<!--编辑器: 栏目标题-->
|
||
|
||
<div id="tpl_editor_service" v-if="curItem.type == 'columnTitle'">
|
||
|
||
<div class="editor-title">
|
||
|
||
<span>{{ curItem.name }}</span>
|
||
|
||
</div>
|
||
|
||
<form class="am-form tpl-form-line-form">
|
||
|
||
<div class="am-form-group">
|
||
|
||
<label class="am-u-sm-3 am-form-label am-text-xs"> 右边标题 </label>
|
||
|
||
<div class="am-u-sm-9 am-u-end">
|
||
|
||
<input type="text" class="tpl-form-input" placeholder="请输入标题" v-model="curItem.params.title"> </div>
|
||
|
||
</div>
|
||
|
||
<div class="am-form-group">
|
||
|
||
<label class="am-u-sm-3 am-form-label am-text-xs"> 左边标题 </label>
|
||
|
||
<div class="am-u-sm-9 am-u-end">
|
||
|
||
<input type="text" class="tpl-form-input" placeholder="请输入标题" v-model="curItem.params.subTitle">
|
||
|
||
</div>
|
||
|
||
</div>
|
||
|
||
<div class="am-form-group">
|
||
|
||
<label class="am-u-sm-3 am-form-label am-text-xs"> 标题链接 </label>
|
||
|
||
<div class="am-u-sm-9 am-u-end">
|
||
|
||
<input type="text" class="tpl-form-input" placeholder="请输入连接地址" v-model="curItem.params.url">
|
||
|
||
</div>
|
||
|
||
</div>
|
||
|
||
<div class="am-form-group">
|
||
|
||
<label class="am-u-sm-3 am-form-label am-text-xs"> 左边竖条 </label>
|
||
|
||
<div class="am-u-sm-9 am-u-end">
|
||
|
||
<label class="am-radio-inline">
|
||
|
||
<input type="radio" value="true" v-model="curItem.params.showLine"> 显示
|
||
|
||
</label>
|
||
|
||
<label class="am-radio-inline">
|
||
|
||
<input type="radio" value="false" v-model="curItem.params.showLine"> 隐藏
|
||
|
||
</label>
|
||
|
||
</div>
|
||
|
||
</div>
|
||
|
||
<div class="am-form-group">
|
||
|
||
<label class="am-u-sm-3 am-form-label am-text-xs"> 右边内容 </label>
|
||
|
||
<div class="am-u-sm-9 am-u-end">
|
||
|
||
<label class="am-radio-inline">
|
||
|
||
<input type="radio" value="true" v-model="curItem.params.right"> 显示
|
||
|
||
</label>
|
||
|
||
<label class="am-radio-inline">
|
||
|
||
<input type="radio" value="false" v-model="curItem.params.right"> 隐藏
|
||
|
||
</label>
|
||
|
||
</div>
|
||
|
||
</div>
|
||
|
||
<div class="am-form-group">
|
||
|
||
<label class="am-u-sm-3 am-form-label am-text-xs"> 右边箭头 </label>
|
||
|
||
<div class="am-u-sm-9 am-u-end">
|
||
|
||
<label class="am-radio-inline">
|
||
|
||
<input type="radio" value="true" v-model="curItem.params.arrow"> 显示
|
||
|
||
</label>
|
||
|
||
<label class="am-radio-inline">
|
||
|
||
<input type="radio" value="false" v-model="curItem.params.arrow"> 隐藏
|
||
|
||
</label>
|
||
|
||
</div>
|
||
|
||
</div>
|
||
|
||
<hr data-am-widget="divider" class="am-divider am-divider-dashed">
|
||
|
||
<div class="am-form-group">
|
||
|
||
<label class="am-u-sm-3 am-form-label am-text-xs"> 标题加粗 </label>
|
||
|
||
<div class="am-u-sm-9 am-u-end">
|
||
|
||
<label class="am-radio-inline">
|
||
|
||
<input type="radio" value="900" v-model="curItem.style.bold"> 是
|
||
|
||
</label>
|
||
|
||
<label class="am-radio-inline">
|
||
|
||
<input type="radio" value="400" v-model="curItem.style.bold"> 否
|
||
|
||
</label>
|
||
|
||
</div>
|
||
|
||
</div>
|
||
|
||
<div class="am-form-group">
|
||
|
||
<label class="am-u-sm-3 am-form-label am-text-xs">左右边距 </label>
|
||
|
||
<div class="am-u-sm-9 am-u-end">
|
||
|
||
<input class="tpl-form-input" type="range"
|
||
|
||
v-model="curItem.style.marginLr" min="0" max="100">
|
||
|
||
<div class="display-value">
|
||
|
||
<span class="value">{{ curItem.style.marginLr }}</span>px (像素)
|
||
|
||
</div>
|
||
|
||
</div>
|
||
|
||
</div>
|
||
|
||
<div class="am-form-group">
|
||
|
||
<label class="am-u-sm-3 am-form-label am-text-xs">上下填充 </label>
|
||
|
||
<div class="am-u-sm-8 am-u-end">
|
||
|
||
<input class="tpl-form-input" type="range" min="0" max="50" v-model="curItem.style.paddingTb">
|
||
|
||
<div class="display-value">
|
||
|
||
<span class="value">{{curItem.style.paddingTb}}</span>px(像素)
|
||
|
||
</div>
|
||
|
||
</div>
|
||
|
||
</div>
|
||
|
||
<div class="am-form-group">
|
||
|
||
<label class="am-u-sm-3 am-form-label am-text-xs">字体大小 </label>
|
||
|
||
<div class="am-u-sm-8 am-u-end">
|
||
|
||
<input class="tpl-form-input" type="range" min="20" max="50" v-model="curItem.style.fontSize">
|
||
|
||
<div class="display-value">
|
||
|
||
<span class="value">{{curItem.style.fontSize}}</span>px(像素)
|
||
|
||
</div>
|
||
|
||
</div>
|
||
|
||
</div>
|
||
|
||
<div class="am-form-group">
|
||
|
||
<label class="am-u-sm-3 am-form-label am-text-xs">左边标题 </label>
|
||
|
||
<div class="am-u-sm-9 am-u-end">
|
||
|
||
<input class="" type="color" v-model="curItem.style.color">
|
||
|
||
<button type="button" class="btn-resetColor am-btn am-btn-xs"
|
||
|
||
@click.stop="onEditorResetColor(curItem.style, 'color', '#303133')"> 重置 </button>
|
||
|
||
</div>
|
||
|
||
</div>
|
||
|
||
<div class="am-form-group">
|
||
|
||
<label class="am-u-sm-3 am-form-label am-text-xs">左边竖线 </label>
|
||
|
||
<div class="am-u-sm-9 am-u-end">
|
||
|
||
<input class="" type="color" v-model="curItem.style.lineColor">
|
||
|
||
<button type="button" class="btn-resetColor am-btn am-btn-xs"
|
||
|
||
@click.stop="onEditorResetColor(curItem.style, 'lineColor', '#303133')"> 重置 </button>
|
||
|
||
</div>
|
||
|
||
</div>
|
||
|
||
<div class="am-form-group">
|
||
|
||
<label class="am-u-sm-3 am-form-label am-text-xs">右边标题 </label>
|
||
|
||
<div class="am-u-sm-9 am-u-end">
|
||
|
||
<input class="" type="color" v-model="curItem.style.subColor">
|
||
|
||
<button type="button" class="btn-resetColor am-btn am-btn-xs"
|
||
|
||
@click.stop="onEditorResetColor(curItem.style, 'subColor', '#909399')"> 重置 </button>
|
||
|
||
</div>
|
||
|
||
</div>
|
||
|
||
<div class="am-form-group">
|
||
|
||
<label class="am-u-sm-3 am-form-label am-text-xs">背景颜色 </label>
|
||
|
||
<div class="am-u-sm-9 am-u-end"> <input class="" type="color"
|
||
|
||
v-model="curItem.style.bgColor"> <button type="button"
|
||
|
||
class="btn-resetColor am-btn am-btn-xs"
|
||
|
||
@click.stop="onEditorResetColor(curItem.style, 'bgColor', '#f7f7f7')"> 重置 </button>
|
||
|
||
</div>
|
||
|
||
</div>
|
||
|
||
</form>
|
||
|
||
</div>
|
||
|
||
</template>
|
||
|
||
</div>
|
||
|
||
|
||
|
||
</div>
|
||
|
||
<!-- 提示 -->
|
||
|
||
<div class="tips am-margin-top-lg am-margin-bottom-sm">
|
||
|
||
<div class="pre-warning">
|
||
|
||
<p>1. 设计完成后点击"保存页面"，在小程序端页面下拉刷新即可看到效果。</p>
|
||
|
||
<p>2. 如需填写链接地址请参考<a href="<?php echo url('food.applet.page/links'); ?>" target="_blank">页面链接</a></p>
|
||
|
||
</div>
|
||
|
||
</div>
|
||
|
||
</div>
|
||
|
||
</div>
|
||
|
||
</div>
|
||
|
||
<!-- 文件库弹窗 -->
|
||
|
||
<!-- 文件库模板 -->
|
||
|
||
<script id="tpl-file-library" type="text/template">
|
||
|
||
<div class="row">
|
||
|
||
<div class="file-group">
|
||
|
||
<ul class="nav-new">
|
||
|
||
<li class="ng-scope {{ is_default ? 'active' : '' }}" data-group-id="0">
|
||
|
||
<a class="group-name am-text-truncate" href="javascript:void(0);" title="全部">全部</a>
|
||
|
||
</li>
|
||
|
||
<li class="ng-scope" data-group-id="-1">
|
||
|
||
<a class="group-name am-text-truncate" href="javascript:void(0);" title="未分组">未分组</a>
|
||
|
||
</li>
|
||
|
||
{{ each group_list }}
|
||
|
||
<li class="ng-scope"
|
||
|
||
data-group-id="{{ $value.group_id }}" title="{{ $value.group_name }}">
|
||
|
||
<a class="group-edit" href="javascript:void(0);" title="编辑分组">
|
||
|
||
<i class="iconfont iconbianji"></i>
|
||
|
||
</a>
|
||
|
||
<a class="group-name am-text-truncate" href="javascript:void(0);">
|
||
|
||
{{ $value.group_name }}
|
||
|
||
</a>
|
||
|
||
<a class="group-delete" href="javascript:void(0);" title="删除分组">
|
||
|
||
<i class="iconfont iconshanchu"></i>
|
||
|
||
</a>
|
||
|
||
</li>
|
||
|
||
{{ /each }}
|
||
|
||
</ul>
|
||
|
||
<a class="group-add" href="javascript:void(0);">新增分组</a>
|
||
|
||
</div>
|
||
|
||
<div class="file-list">
|
||
|
||
<div class="v-box-header am-cf">
|
||
|
||
<div class="h-left am-fl am-cf">
|
||
|
||
<div class="am-fl">
|
||
|
||
<div class="group-select am-dropdown">
|
||
|
||
<button type="button" class="am-btn am-btn-sm am-btn-secondary am-dropdown-toggle">
|
||
|
||
移动至 <span class="am-icon-caret-down"></span>
|
||
|
||
</button>
|
||
|
||
<ul class="group-list am-dropdown-content">
|
||
|
||
<li class="am-dropdown-header">请选择分组</li>
|
||
|
||
{{ each group_list }}
|
||
|
||
<li>
|
||
|
||
<a class="move-file-group" data-group-id="{{ $value.group_id }}"
|
||
|
||
href="javascript:void(0);">{{ $value.group_name }}</a>
|
||
|
||
</li>
|
||
|
||
{{ /each }}
|
||
|
||
</ul>
|
||
|
||
</div>
|
||
|
||
</div>
|
||
|
||
<div class="am-fl file-library-operation">
|
||
|
||
<a href="javascript:void(0);" class="file-delete tpl-table-black-operation-del"
|
||
|
||
data-group-id="2">
|
||
|
||
<i class="am-icon-trash"></i> 删除
|
||
|
||
</a>
|
||
|
||
</div>
|
||
|
||
</div>
|
||
|
||
<div class="h-rigth am-fr">
|
||
|
||
<div class="j-upload upload-image">
|
||
|
||
<i class="iconfont icontianjia"></i>
|
||
|
||
上传图片
|
||
|
||
</div>
|
||
|
||
</div>
|
||
|
||
</div>
|
||
|
||
<div id="file-list-body" class="v-box-body">
|
||
|
||
{{ include 'tpl-file-list' file_list }}
|
||
|
||
</div>
|
||
|
||
<div class="v-box-footer am-cf"></div>
|
||
|
||
</div>
|
||
|
||
</div>
|
||
|
||
|
||
|
||
</script>
|
||
|
||
|
||
|
||
<!-- 文件列表模板 -->
|
||
|
||
<script id="tpl-file-list" type="text/template">
|
||
|
||
<ul class="file-list-item">
|
||
|
||
{{ include 'tpl-file-list-item' data }}
|
||
|
||
</ul>
|
||
|
||
{{ if last_page > 1 }}
|
||
|
||
<div class="file-page-box am-fr">
|
||
|
||
<ul class="pagination">
|
||
|
||
{{ if current_page > 1 }}
|
||
|
||
<li>
|
||
|
||
<a class="switch-page" href="javascript:void(0);" title="上一页" data-page="{{ current_page - 1 }}">«</a>
|
||
|
||
</li>
|
||
|
||
{{ /if }}
|
||
|
||
{{ if current_page < last_page }}
|
||
|
||
<li>
|
||
|
||
<a class="switch-page" href="javascript:void(0);" title="下一页" data-page="{{ current_page + 1 }}">»</a>
|
||
|
||
</li>
|
||
|
||
{{ /if }}
|
||
|
||
</ul>
|
||
|
||
</div>
|
||
|
||
{{ /if }}
|
||
|
||
</script>
|
||
|
||
|
||
|
||
<!-- 文件列表模板 -->
|
||
|
||
<script id="tpl-file-list-item" type="text/template">
|
||
|
||
{{ each $data }}
|
||
|
||
<li class="ng-scope" title="{{ $value.file_name }}" data-file-id="{{ $value.file_id }}"
|
||
|
||
data-url="{{ $value.url }}" data-file-path="{{ $value.file_path }}">
|
||
|
||
<div class="img-cover"
|
||
|
||
style="background-image: url('{{ $value.url }}')">
|
||
|
||
</div>
|
||
|
||
<p class="file-name am-text-center am-text-truncate">{{ $value.file_name }}</p>
|
||
|
||
<div class="select-mask">
|
||
|
||
<img src="/assets/img/chose.png">
|
||
|
||
</div>
|
||
|
||
</li>
|
||
|
||
{{ /each }}
|
||
|
||
</script>
|
||
|
||
|
||
|
||
<!-- 分组元素-->
|
||
|
||
<script id="tpl-group-item" type="text/template">
|
||
|
||
<li class="ng-scope" data-group-id="{{ group_id }}" title="{{ group_name }}">
|
||
|
||
<a class="group-edit" href="javascript:void(0);" title="编辑分组">
|
||
|
||
<i class="iconfont iconbianji"></i>
|
||
|
||
</a>
|
||
|
||
<a class="group-name am-text-truncate" href="javascript:void(0);">
|
||
|
||
{{ group_name }}
|
||
|
||
</a>
|
||
|
||
<a class="group-delete" href="javascript:void(0);" title="删除分组">
|
||
|
||
<i class="iconfont iconshanchu"></i>
|
||
|
||
</a>
|
||
|
||
</li>
|
||
|
||
</script>
|
||
|
||
|
||
|
||
<script src="/assets/plugins/vue/vue.min.js?v=<?php echo htmlentities($version); ?>"></script>
|
||
|
||
<script src="/assets/plugins/umeditor/umeditor.config.js?v=<?php echo htmlentities($version); ?>"></script>
|
||
|
||
<script src="/assets/plugins/umeditor/umeditor.min.js?v=<?php echo htmlentities($version); ?>"></script>
|
||
|
||
<script src="/addons/food/js/hema.diy.js?v=<?php echo htmlentities($version); ?>"></script>
|
||
|
||
<script src="/addons/food/js/select.data.js?v=<?php echo htmlentities($version); ?>"></script>
|
||
|
||
<script src="/addons/food/plugins/sortable/Sortable.min.js?v=<?php echo htmlentities($version); ?>"></script>
|
||
|
||
<script src="/addons/food/plugins/vuedraggable/vuedraggable.min.js?v=<?php echo htmlentities($version); ?>"></script>
|
||
|
||
<script>
|
||
|
||
$(function () {
|
||
|
||
// 渲染diy页面
|
||
|
||
new diyPhone(<?= $temp.','.$jsonData.','.$opts ?>);
|
||
|
||
});
|
||
|
||
</script>
|
||
|
||
<!-- 内容区域 end -->
|
||
|
||
</div>
|
||
|
||
<!-- 内容区域 end -->
|
||
|
||
|
||
|
||
</div>
|
||
|
||
<script src="/assets/plugins/layer/layer.js?v=<?php echo htmlentities($version); ?>"></script>
|
||
|
||
<script src="/assets/plugins/jquery/jquery.form.min.js?v=<?php echo htmlentities($version); ?>"></script>
|
||
|
||
<script src="/assets/plugins/amazeui/amazeui.min.js?v=<?php echo htmlentities($version); ?>"></script>
|
||
|
||
<script src="/assets/js/hema.app.js?v=<?php echo htmlentities($version); ?>"></script>
|
||
|
||
<script src="/assets/js/webuploader.html5only.js?v=<?php echo htmlentities($version); ?>"></script>
|
||
|
||
<script src="/assets/js/art-template.js?v=<?php echo htmlentities($version); ?>"></script>
|
||
|
||
<script src="/addons/upload/js/file.library.js?v=<?php echo htmlentities($version); ?>"></script>
|
||
|
||
</body>
|
||
|
||
|
||
|
||
</html>
|
||
|