You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
2463 lines
126 KiB
2463 lines
126 KiB
<?php if (!defined('THINK_PATH')) exit(); /*a:2:{s:80:"/www/wwwroot/stationery/public/../application/index/view/wanlshop/page/edit.html";i:1731323822;s:67:"/www/wwwroot/stationery/application/index/view/layout/wanlshop.html";i:1731323822;}*/ ?>
|
|
<!DOCTYPE html>
|
|
<html lang="zh-CN">
|
|
<head>
|
|
<meta charset="utf-8">
|
|
<title><?php echo (isset($title) && ($title !== '')?$title:'卖家控制台'); ?></title>
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
|
|
<meta name="renderer" content="webkit">
|
|
<meta name="author" content="FastAdmin">
|
|
<link rel="shortcut icon" href="/assets/img/favicon.ico" />
|
|
<link href="/assets/css/backend<?php echo \think\Config::get('app_debug')?'':'.min'; ?>.css?v=<?php echo \think\Config::get('site.version'); ?>" rel="stylesheet">
|
|
<link rel="stylesheet" href="/assets/css/skins/skin-red-light.css" type="text/css">
|
|
<link rel="stylesheet" href="/assets/addons/wanlshop/css/chat.css" type="text/css">
|
|
<!-- HTML5 shim, for IE6-8 support of HTML5 elements. All other JS at the end of file. -->
|
|
<!--[if lt IE 9]>
|
|
<script src="/assets/js/html5shiv.js"></script>
|
|
<script src="/assets/js/respond.min.js"></script>
|
|
<![endif]-->
|
|
<script type="text/javascript">
|
|
var require = {config: <?php echo json_encode($config ?? ''); ?>};
|
|
</script>
|
|
<style type="text/css">
|
|
@media (max-width: 767px) {
|
|
.fixed .content-wrapper,
|
|
.fixed .right-side {
|
|
padding-top: 50px;
|
|
}
|
|
}
|
|
#main {
|
|
height: 100%;
|
|
background: #f1f4f6;
|
|
overflow-x: hidden;
|
|
overflow-y: auto;
|
|
}
|
|
.skin-red-light .treeview-menu>li.active>a {
|
|
color: #e74c3c;
|
|
}
|
|
[v-cloak] {
|
|
display: none !important;
|
|
}
|
|
.text-cut {
|
|
overflow: hidden;
|
|
white-space: nowrap;
|
|
text-overflow: ellipsis;
|
|
}
|
|
/* 修改默认样式 */
|
|
.bootstrap-table .table:not(.table-condensed),
|
|
.bootstrap-table .table:not(.table-condensed)>tbody>tr>td,
|
|
.bootstrap-table .table:not(.table-condensed)>tbody>tr>th,
|
|
.bootstrap-table .table:not(.table-condensed)>tfoot>tr>td,
|
|
.bootstrap-table .table:not(.table-condensed)>tfoot>tr>th,
|
|
.bootstrap-table .table:not(.table-condensed)>thead>tr>td {
|
|
padding: 10px 8px;
|
|
}
|
|
</style>
|
|
</head>
|
|
|
|
<?php if(!IS_DIALOG): ?>
|
|
<!-- <body class="skin-green sidebar-mini fixed" id="tabs"> -->
|
|
<body class="sidebar-mini fixed skin-red-light" id="tabs">
|
|
<div class="wrapper">
|
|
<aside class="main-sidebar">
|
|
<!-- 左侧菜单栏 -->
|
|
<div class="slimScrollDiv">
|
|
<section class="sidebar">
|
|
<!-- 管理员信息 -->
|
|
<div class="user-panel hidden-xs">
|
|
<div class="pull-left image">
|
|
<a href="<?php echo url('index/wanlshop.shop/profile'); ?>"><img src="<?php echo htmlentities(cdnurl($shop['avatar'] ?? '') ?? ''); ?>" class="img-circle"></a>
|
|
</div>
|
|
<div class="pull-left info">
|
|
<p><?php echo $shop['shopname']; ?></p>
|
|
<div v-cloak>
|
|
<span v-if="shopOnline == 1"><i class="fa fa-circle text-success margin-r-5"></i> IM在线</span>
|
|
<span v-else><i class="fa fa-circle text-gray margin-r-5"></i> IM连接异常</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<!-- 菜单搜索 -->
|
|
<form action="" method="get" class="sidebar-form" onsubmit="return false;">
|
|
<div class="input-group">
|
|
<input type="text" name="q" class="form-control" placeholder="搜索菜单">
|
|
<span class="input-group-btn">
|
|
<button type="submit" name="search" id="search-btn" class="btn btn-flat"><i class="fa fa-search"></i>
|
|
</button>
|
|
</span>
|
|
<div class="menuresult list-group sidebar-form hide" style="width: 210px;">
|
|
</div>
|
|
</div>
|
|
</form>
|
|
<!-- 移动端一级菜单 -->
|
|
<div class="mobilenav visible-xs"> </div>
|
|
<!--如果想始终显示子菜单,则给ul加上show-submenu类即可,当multiplenav开启的情况下默认为展开-->
|
|
<ul class="sidebar-menu ">
|
|
<li class="treeview <?php echo in_array($config['controllername'],['wanlshop.console'])?'active':''; ?>">
|
|
<a href="<?php echo url('index/wanlshop.console/index'); ?>">
|
|
<i class="fa fa-dashboard fa-fw"></i> <span>控制台</span>
|
|
<span class="pull-right-container"><small class="label pull-right bg-blue">hot</small></span>
|
|
</a>
|
|
</li>
|
|
<li class="treeview <?php echo in_array($config['controllername'],['wanlshop.order','wanlshop.refund','wanlshop.groupsorder'])?'active':''; ?>">
|
|
<a href="javascript:;">
|
|
<i class="fa fa-leaf fa-fw"></i> <span>交易管理</span>
|
|
<span class="pull-right-container"><i class="fa fa-angle-left"></i></span>
|
|
</a>
|
|
<ul class="treeview-menu <?php echo in_array($config['controllername'],['wanlshop.order','wanlshop.refund','wanlshop.groupsorder'])?'menu-open':''; ?>"
|
|
style="display: <?php echo in_array($config['controllername'],['wanlshop.order','wanlshop.refund','wanlshop.groupsorder'])?'block':'none'; ?>;">
|
|
<li class="<?php echo $config['controllername'].'.'.$config['actionname']=='wanlshop.order.index'?'active':''; ?>">
|
|
<a href="<?php echo url('index/wanlshop.order/index'); ?>">
|
|
<i class="fa fa-circle-o fa-fw"></i><span>商品订单</span>
|
|
</a>
|
|
</li>
|
|
<li class="<?php echo $config['controllername'].'.'.$config['actionname']=='wanlshop.groupsorder.index'?'active':''; ?>">
|
|
<a href="<?php echo url('index/wanlshop.groupsorder/index'); ?>">
|
|
<i class="fa fa-circle-o fa-fw"></i><span>拼团订单</span>
|
|
</a>
|
|
</li>
|
|
<li class="<?php echo $config['controllername'].'.'.$config['actionname']=='wanlshop.order.comment'?'active':''; ?>">
|
|
<a href="<?php echo url('index/wanlshop.order/comment'); ?>">
|
|
<i class="fa fa-circle-o fa-fw"></i><span>评论管理</span>
|
|
</a>
|
|
</li>
|
|
<li class="<?php echo $config['controllername'].'.'.$config['actionname']=='wanlshop.refund.index'?'active':''; ?>">
|
|
<a href="<?php echo url('index/wanlshop.refund/index'); ?>">
|
|
<i class="fa fa-circle-o fa-fw"></i><span>退款管理</span>
|
|
</a>
|
|
</li>
|
|
</ul>
|
|
</li>
|
|
<li class="treeview <?php echo in_array($config['controllername'],['wanlshop.goods'])?'active':''; ?>">
|
|
<a href="javascript:;">
|
|
<i class="fa fa-shopping-bag fa-fw"></i> <span>宝贝管理</span>
|
|
<span class="pull-right-container"><i class="fa fa-angle-left"></i> </span>
|
|
</a>
|
|
<ul class="treeview-menu <?php echo in_array($config['controllername'],['wanlshop.goods'])?'menu-open':''; ?>" style="display: <?php echo in_array($config['controllername'],['wanlshop.goods'])?'block':'none'; ?>;">
|
|
<li class="<?php echo $config['controllername'].'.'.$config['actionname']=='wanlshop.goods.add'?'active':''; ?>">
|
|
<a href="<?php echo url('index/wanlshop.goods/add'); ?>">
|
|
<i class="fa fa-circle-o fa-fw"></i><span>发布宝贝</span>
|
|
</a>
|
|
</li>
|
|
<li class="<?php echo $config['controllername'].'.'.$config['actionname']=='wanlshop.goods.index'?'active':''; ?>">
|
|
<a href="<?php echo url('index/wanlshop.goods/index'); ?>">
|
|
<i class="fa fa-circle-o fa-fw"></i><span>出售中的宝贝</span>
|
|
</a>
|
|
</li>
|
|
<li class="<?php echo $config['controllername'].'.'.$config['actionname']=='wanlshop.goods.stock'?'active':''; ?>">
|
|
<a href="<?php echo url('index/wanlshop.goods/stock'); ?>">
|
|
<i class="fa fa-circle-o fa-fw"></i><span>仓库中的宝贝</span>
|
|
</a>
|
|
</li>
|
|
</ul>
|
|
</li>
|
|
<li class="treeview <?php echo $config['controllername']==='wanlshop.shopsort'?'active':''; ?>">
|
|
<a href="<?php echo url('index/wanlshop/shopsort'); ?>">
|
|
<i class="fa fa-th-list fa-fw"></i> <span>类目管理</span>
|
|
<span class="pull-right-container"> </span>
|
|
</a>
|
|
</li>
|
|
<li class="treeview <?php echo $config['controllername']==='wanlshop.shop'?'active':''; ?>">
|
|
<a href="javascript:;">
|
|
<i class="fa fa-archive fa-fw"></i> <span>店铺管理</span>
|
|
<span class="pull-right-container"><i class="fa fa-angle-left"></i> </span>
|
|
</a>
|
|
<ul class="treeview-menu <?php echo $config['controllername']==='wanlshop.shop'?'menu-open' : ''; ?>"
|
|
style="display: <?php echo $config['controllername']==='wanlshop.shop'?'block' : 'none'; ?>;">
|
|
<li class="<?php echo $config['controllername'].'.'.$config['actionname']=='wanlshop.shop.index'?'active':''; ?>">
|
|
<a href="<?php echo url('index/wanlshop.shop/index'); ?>">
|
|
<i class="fa fa-circle-o fa-fw"></i><span>装修店铺</span>
|
|
</a>
|
|
</li>
|
|
<li class="<?php echo $config['controllername'].'.'.$config['actionname']=='wanlshop.shop.attachment'?'active':''; ?>">
|
|
<a href="<?php echo url('index/wanlshop.shop/attachment'); ?>">
|
|
<i class="fa fa-circle-o fa-fw"></i><span>图片空间</span>
|
|
</a>
|
|
</li>
|
|
<li class="<?php echo $config['controllername'].'.'.$config['actionname']=='wanlshop.shop.brand'?'active':''; ?>">
|
|
<a href="<?php echo url('index/wanlshop.shop/brand'); ?>">
|
|
<i class="fa fa-circle-o fa-fw"></i><span>品牌管理</span>
|
|
</a>
|
|
</li>
|
|
<li class="<?php echo $config['controllername'].'.'.$config['actionname']=='wanlshop.shop.profile'?'active':''; ?>">
|
|
<a href="<?php echo url('index/wanlshop.shop/profile'); ?>">
|
|
<i class="fa fa-circle-o fa-fw"></i><span>店铺资料</span>
|
|
</a>
|
|
</li>
|
|
</ul>
|
|
</li>
|
|
<li class="treeview <?php echo $config['controllername']==='wanlshop.groups'?'active':''; ?>">
|
|
<a href="javascript:;">
|
|
<i class="fa fa-users fa-fw"></i> <span>阶梯拼团</span>
|
|
<span class="pull-right-container"><i class="fa fa-angle-left"></i> </span>
|
|
</a>
|
|
<ul class="treeview-menu <?php echo $config['controllername']==='wanlshop.groups'?'menu-open' : ''; ?>" style="display: <?php echo $config['controllername']==='wanlshop.groups'?'block' : 'none'; ?>;">
|
|
<li class="<?php echo $config['controllername'].'.'.$config['actionname']=='wanlshop.groups.goods'?'active':''; ?>">
|
|
<a href="<?php echo url('index/wanlshop.groups/goods'); ?>">
|
|
<i class="fa fa-circle-o fa-fw"></i><span>商品列表</span>
|
|
</a>
|
|
</li>
|
|
<li class="<?php echo $config['controllername'].'.'.$config['actionname']=='wanlshop.groups.groups'?'active':''; ?>">
|
|
<a href="<?php echo url('index/wanlshop.groups/groups'); ?>">
|
|
<i class="fa fa-circle-o fa-fw"></i><span>拼团管理</span>
|
|
</a>
|
|
</li>
|
|
<li class="<?php echo $config['controllername'].'.'.$config['actionname']=='wanlshop.groupsorder.index'?'active':''; ?>">
|
|
<a href="<?php echo url('index/wanlshop.groupsorder/index'); ?>">
|
|
<i class="fa fa-circle-o fa-fw"></i><span>订单管理</span>
|
|
</a>
|
|
</li>
|
|
</ul>
|
|
</li>
|
|
<li class="treeview <?php echo $config['controllername']==='wanlshop.find'?'active':''; ?>">
|
|
<a href="<?php echo url('index/wanlshop/find'); ?>">
|
|
<i class="fa fa-video-camera fa-fw"></i> <span>种草短视频</span>
|
|
<span class="pull-right-container"><small class="label pull-right bg-red">new</small></span>
|
|
</a>
|
|
</li>
|
|
<li class="treeview <?php echo $config['controllername']==='wanlshop.coupon'?'active':''; ?>">
|
|
<a href="javascript:;">
|
|
<i class="fa fa-cloud fa-fw"></i> <span>营销活动</span>
|
|
<span class="pull-right-container"><i class="fa fa-angle-left"></i> </span>
|
|
</a>
|
|
<ul class="treeview-menu <?php echo $config['controllername']==='wanlshop.coupon'?'menu-open' : ''; ?>"
|
|
style="display: <?php echo $config['controllername']==='wanlshop.coupon'?'block' : 'none'; ?>;">
|
|
<li class="<?php echo $config['controllername'].'.'.$config['actionname']=='wanlshop.coupon.index'?'active':''; ?>">
|
|
<a href="<?php echo url('index/wanlshop/coupon'); ?>">
|
|
<i class="fa fa-circle-o fa-fw"></i><span>满折减包邮券</span>
|
|
</a>
|
|
</li>
|
|
</ul>
|
|
</li>
|
|
<li class="treeview <?php echo in_array($config['controllername'],['wanlshop.logistics']) ?'active':''; ?>">
|
|
<a href="javascript:;">
|
|
<i class="fa fa-truck fa-fw"></i> <span>物流运费</span>
|
|
<span class="pull-right-container"><i class="fa fa-angle-left"></i> </span>
|
|
</a>
|
|
<ul class="treeview-menu <?php echo in_array($config['controllername'],['wanlshop.logistics']) ?'menu-open':''; ?>" style="display: <?php echo in_array($config['controllername'],['wanlshop.logistics']) ?'block':'none'; ?>;">
|
|
<!-- <li class="<?php echo $config['controllername'].'.'.$config['actionname']=='wanlshop.logistics.deliver'?'active':''; ?>">
|
|
<a href="<?php echo url('index/wanlshop.logistics/deliver'); ?>">
|
|
<i class="fa fa-circle-o fa-fw"></i><span>发货</span>
|
|
</a>
|
|
</li> -->
|
|
<li class="<?php echo $config['controllername'].'.'.$config['actionname']=='wanlshop.logistics.template'?'active':''; ?>">
|
|
<a href="<?php echo url('index/wanlshop.logistics/template'); ?>">
|
|
<i class="fa fa-circle-o fa-fw"></i><span>运费模板</span>
|
|
</a>
|
|
</li>
|
|
</ul>
|
|
</li>
|
|
|
|
<li class="treeview <?php echo in_array($config['controllername'],['wanlshop.finance']) ?'active':''; ?>">
|
|
<a href="javascript:;">
|
|
<i class="fa fa-paypal fa-fw"></i> <span>财务管理</span>
|
|
<span class="pull-right-container"><i class="fa fa-angle-left"></i> </span>
|
|
</a>
|
|
<ul class="treeview-menu <?php echo in_array($config['controllername'],['wanlshop.finance']) ?'menu-open':''; ?>" style="display: <?php echo in_array($config['controllername'],['wanlshop.finance']) ?'block':'none'; ?>;">
|
|
<li class="<?php echo $config['controllername'].'.'.$config['actionname']=='wanlshop.finance.bill'?'active':''; ?>">
|
|
<a href="<?php echo url('index/wanlshop.finance/bill'); ?>">
|
|
<i class="fa fa-circle-o fa-fw"></i><span>商家对账单</span>
|
|
</a>
|
|
</li>
|
|
<li class="<?php echo $config['controllername'].'.'.$config['actionname']=='wanlshop.finance.withdraw'?'active':''; ?>">
|
|
<a href="<?php echo url('index/wanlshop.finance/withdraw'); ?>">
|
|
<i class="fa fa-circle-o fa-fw"></i><span>商家提现</span>
|
|
</a>
|
|
</li>
|
|
</ul>
|
|
</li>
|
|
|
|
|
|
<li class="treeview <?php echo $config['controllername']==='wanlshop.config'?'active':''; ?>">
|
|
<a href="<?php echo url('index/wanlshop/config'); ?>">
|
|
<i class="fa fa-cog fa-fw"></i> <span>店铺配置</span>
|
|
<span class="pull-right-container"> </span>
|
|
</a>
|
|
</li>
|
|
<li class="header">相关链接</li>
|
|
<?php if(empty($config['document']) || (($config['document'] instanceof \think\Collection || $config['document'] instanceof \think\Paginator ) && $config['document']->isEmpty())): ?>
|
|
<li><a href="javascript:;" onclick="layer.msg('平台尚未配置官方文档')"><i class="fa fa-list text-red"></i> <span>官方文档</span></a></li>
|
|
<?php else: ?>
|
|
<li><a href="<?php echo $config['document']; ?>" target="_blank"><i class="fa fa-list text-red"></i> <span>官方文档</span></a></li>
|
|
<?php endif; if(empty($config['qun']) || (($config['qun'] instanceof \think\Collection || $config['qun'] instanceof \think\Paginator ) && $config['qun']->isEmpty())): ?>
|
|
<li><a href="javascript:;" onclick="layer.msg('平台尚未配置QQ交流群')"><i class="fa fa-qq text-aqua"></i> <span>QQ交流群</span></a></li>
|
|
<?php else: ?>
|
|
<li><a href="<?php echo $config['qun']; ?>" target="_blank"><i class="fa fa-qq text-aqua"></i> <span>QQ交流群</span></a></li>
|
|
<?php endif; ?>
|
|
</ul>
|
|
</section>
|
|
<div class="slimScrollBar" style="background: rgba(0, 0, 0, 0.2); width: 8px; position: absolute; top: 0px; opacity: 0.4; display: none; border-radius: 7px; z-index: 99; right: 1px; height: 897px;"></div>
|
|
<div class="slimScrollRail" style="width: 8px; height: 100%; position: absolute; top: 0px; display: none; border-radius: 7px; background: rgb(51, 51, 51); opacity: 0.2; z-index: 90; right: 1px;"></div>
|
|
</div>
|
|
</aside>
|
|
<div id="wanlchat">
|
|
<!-- 头部区域 -->
|
|
<header id="header" class="main-header">
|
|
<a href="javascript:;" class="logo">
|
|
<!-- 迷你模式下Logo的大小为50X50 -->
|
|
<span class="logo-mini">商家</span>
|
|
<!-- 普通模式下Logo -->
|
|
<span class="logo-lg">商家后台</span>
|
|
</a>
|
|
<!-- 顶部通栏样式 -->
|
|
<nav class="navbar navbar-static-top">
|
|
<!--第一级菜单-->
|
|
<div id="firstnav">
|
|
<a href="#" class="sidebar-toggle" data-toggle="offcanvas" role="button">
|
|
<span class="sr-only"><?php echo __('Toggle navigation'); ?></span><!-- 边栏切换按钮-->
|
|
</a>
|
|
<div class="navbar-custom-menu">
|
|
<ul class="nav navbar-nav">
|
|
<!-- <li> <a href="<?php echo url('index/wanlshop.console/index'); ?>"><i class="fa fa-home" style="font-size:14px;"></i></a> </li> -->
|
|
<li class="dropdown">
|
|
<a href="#" class="dropdown-toggle" data-toggle="dropdown">
|
|
<i class="fa fa-paper-plane margin-r-5"></i>
|
|
</a>
|
|
<ul class="dropdown-menu wipecache">
|
|
<li><a href="<?php echo url('index/wanlshop.goods/add'); ?>"><i class="fa fa-circle-o"></i> 发布宝贝</a></li>
|
|
<li class="divider"></li>
|
|
<li><a href="javascript:;" @click="toFind('video')"><i class="fa fa-video-camera"></i> 发布 短视频</a></li>
|
|
<li><a href="javascript:;" @click="toFind('new')"><i class="fa fa-hacker-news"></i> 发布 宝贝上新</a></li>
|
|
<li><a href="javascript:;" @click="toFind('want')"><i class="fa fa-heartbeat"></i> 发布 种草</a></li>
|
|
<li><a href="javascript:;" @click="toFind('show')"><i class="fa fa-users"></i> 发布 买家秀</a></li>
|
|
</ul>
|
|
</li>
|
|
<!-- 即时通讯 open-->
|
|
<li class="dropdown messages-menu" v-cloak>
|
|
<a href="#" class="dropdown-toggle" data-toggle="dropdown" aria-expanded="true">
|
|
<i class="fa fa-comments margin-r-5"></i>
|
|
<span class="label label-success" v-if="count > 0">{{count}}</span>
|
|
</a>
|
|
<div class="dropdown-menu wanl-chat-list">
|
|
<div class="head">
|
|
<div class="title">
|
|
<div>
|
|
<h3>{{shop.shopname}}</h3>
|
|
<span v-if="shopOnline == 1"><i class="fa fa-circle text-success margin-r-5"></i> H5在线</span>
|
|
<span v-else><i class="fa fa-circle text-gray margin-r-5"></i> IM连接异常</span>
|
|
</div>
|
|
<div style="font-size: 14px;">
|
|
<span class="active" @click="onAudio" v-if="isAudio"><i class="fa fa-volume-up text-red"></i></span>
|
|
<span v-else @click="onAudio"><i class="fa fa-volume-off text-gray"></i></span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="list">
|
|
<div class="empty" v-if="chatlist.length == 0">
|
|
<div class="main">
|
|
<img src="/assets/addons/wanlshop/img/default/find_default3x.png">
|
|
<p>没有找到任何联系人</p>
|
|
</div>
|
|
</div>
|
|
<div class="item" v-for="(item, index) in chatlist" :key="index" @click="otChat(index, 'main')">
|
|
<div class="portrait">
|
|
<img :src="cdnurl(item.avatar)">
|
|
<span class="online">
|
|
<i class="fa fa-circle text-success" v-if="item.isOnline == 1"></i>
|
|
<i class="fa fa-circle text-gray" v-else></i>
|
|
</span>
|
|
</div>
|
|
<div class="main">
|
|
<div class="user">
|
|
<span class="username text-cut">{{item.nickname}}</span>
|
|
<span class="time">{{timefriendly(item.createtime)}}</span>
|
|
</div>
|
|
<div class="info text-cut">
|
|
<span v-if="item.count > 0">
|
|
[未读{{item.count}}条]
|
|
</span>
|
|
<span v-html="item.content"></span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</li>
|
|
|
|
<!-- 账号信息下拉框 -->
|
|
<li class="dropdown user user-menu">
|
|
<a href="#" class="dropdown-toggle" data-toggle="dropdown">
|
|
<img src="<?php echo htmlentities(cdnurl($user['avatar'] ?? '') ?? ''); ?>" class="user-image" alt="<?php echo $user['username']; ?>">
|
|
<span class="hidden-xs"><?php echo htmlentities($user['username'] ?? ''); ?></span>
|
|
</a>
|
|
<ul class="dropdown-menu">
|
|
<!-- User image -->
|
|
<li class="user-header">
|
|
<img src="<?php echo htmlentities(cdnurl($user['avatar'] ?? '') ?? ''); ?>" class="img-circle" alt="<?php echo $user['username']; ?>">
|
|
<p>
|
|
<?php echo htmlentities($user['username'] ?? ''); ?>
|
|
<small><?php echo date("Y-m-d H:i:s",$user['logintime']); ?></small>
|
|
</p>
|
|
</li>
|
|
<!-- Menu Body -->
|
|
<li class="user-body">
|
|
<div class="row">
|
|
<div class="col-xs-4 text-center">余额：<?php echo htmlentities($user['money'] ?? ''); ?></div>
|
|
<div class="col-xs-4 text-center">积分：<?php echo htmlentities($user['score'] ?? ''); ?></div>
|
|
<div class="col-xs-4 text-center">登录<?php echo htmlentities($user['successions'] ?? ''); ?>次</div>
|
|
</div>
|
|
</li>
|
|
<!-- Menu Footer-->
|
|
<li class="user-footer">
|
|
<div class="pull-left">
|
|
<a href="<?php echo url('index/user/profile'); ?>" class="btn btn-primary"><i class="fa fa-user"></i> <?php echo __('Profile'); ?></a>
|
|
</div>
|
|
<div class="pull-left" style="margin-left: 10px;">
|
|
<a href="<?php echo url('index/wanlshop.shop/profile'); ?>" class="btn btn-primary"><i class="fa fa-user"></i>
|
|
<?php echo __('店铺资料'); ?></a>
|
|
</div>
|
|
<div class="pull-right">
|
|
<a href="<?php echo url('index/user/logout'); ?>" class="btn btn-danger"><i class="fa fa-sign-out"></i> <?php echo __('Logout'); ?></a>
|
|
</div>
|
|
</li>
|
|
</ul>
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
</nav>
|
|
</header>
|
|
<!-- 聊天窗口 -->
|
|
<div class="wanl-chat" :class="{full: onFull}" :style="{left:screenWidth+'px', top:screenHeight+'px'}" ref="moveBtn" v-show="chatWindow" v-cloak>
|
|
<div class="list">
|
|
<ul>
|
|
<li v-for="(item, index) in wanlchat" :key="index" :class="{checked: chatSelect == index}" @click="onChat(index)">
|
|
<div class="portrait">
|
|
<img :src="cdnurl(item.avatar)">
|
|
<span class="badge bg-red" v-if="item.count > 0">{{item.count}}</span>
|
|
</div>
|
|
<div class="user-msg">
|
|
<p>{{item.nickname}}</p>
|
|
<div class="text-cut" v-html="item.content"></div>
|
|
</div>
|
|
<div class="list-close" @click.stop="delChat(index)">
|
|
<div class="hover">
|
|
<span class="fa fa-times-circle"></span>
|
|
</div>
|
|
</div>
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
|
|
<div class="main" v-if="chatSelect != null">
|
|
<div class="msgHead" @mousedown="down" @touchstart="down" @mousemove="move" @touchmove="move" @mouseup="end" @touchend="end" @touchcancel="end">
|
|
<img :src="cdnurl(wanlchat[chatSelect].avatar)">
|
|
<div>
|
|
<span class="name">{{wanlchat[chatSelect].nickname}}</span>
|
|
<p v-if="wanlchat[chatSelect].isOnline == 1"><i class="fa fa-circle text-success"></i> 在线</p>
|
|
<p v-else><i class="fa fa-circle text-gray"></i> 离线</p>
|
|
</div>
|
|
<!-- 窗口操作 -->
|
|
<span class="layui-layer-setwin">
|
|
<block v-if="onFull">
|
|
<a class="layui-layer-ico layui-layer-max layui-layer-maxmin" href="javascript:;" @click="full"></a>
|
|
</block>
|
|
<block v-else>
|
|
<a class="layui-layer-min" href="javascript:;" @click="miniChat"><cite></cite></a>
|
|
<a class="layui-layer-ico layui-layer-max" href="javascript:;" @click="full"></a>
|
|
</block>
|
|
<a class="layui-layer-ico layui-layer-close layui-layer-close1" href="javascript:;" @click="closeChat"></a>
|
|
</span>
|
|
</div>
|
|
|
|
<div class="msgList" id="talk">
|
|
<ul>
|
|
<li :class="{my: item.form.id == shop.user_id}" v-for="(item, index) in chatContent" :key="index">
|
|
<div class="chat-user">
|
|
<img :src="cdnurl(item.form.id == shop.user_id ? shop.avatar : item.form.avatar)">
|
|
<cite>
|
|
<span>{{timefriendly(item.createtime)}}</span>
|
|
</cite>
|
|
</div>
|
|
<!-- 文字消息 -->
|
|
<div class="chat-text" v-if="item.message.type == 'text'" v-html="item.message.content.text"></div>
|
|
<!-- 语音消息 -->
|
|
<div class="chat-voice" v-if="item.message.type == 'voice'" @click="playVoice(item.message.content.url)">
|
|
<span :style="{marginRight: item.message.content.length * 8 +'px'}"></span>{{item.message.content.length}} ”
|
|
</div>
|
|
<!-- 图片消息 -->
|
|
<div class="chat-img" v-if="item.message.type == 'img'">
|
|
<a :href="item.message.content.url" target="_blank"><img :src="cdnurl(item.message.content.url)" data-tips-image></a>
|
|
</div>
|
|
<!-- 商品消息 -->
|
|
<div class="chat-goods" v-if="item.message.type == 'goods'">
|
|
<img :src="cdnurl(item.message.content.image)">
|
|
<div class="price text-orange">
|
|
￥ <span>{{item.message.content.price}}</span>
|
|
</div>
|
|
<div class="title">
|
|
{{item.message.content.title}}
|
|
</div>
|
|
</div>
|
|
<!-- 订单消息 -->
|
|
<div class="chat-order" v-if="item.message.type == 'order'" @click="onOrder(item.message.content.id)">
|
|
<div> 订单详情：</div>
|
|
<div class="product">
|
|
<div class="item" v-for="(order, index) in item.message.content.goods" :key="index">
|
|
<img :src="cdnurl(order.image)"></img>
|
|
<div class="details">
|
|
<div>
|
|
<span>{{order.title}}</span>
|
|
</div>
|
|
<div class="attribute">
|
|
<div class="text-orange">
|
|
￥ {{order.price * order.number}}
|
|
</div>
|
|
<div>
|
|
<span>{{order.difference}} x {{order.number}}</span>
|
|
<span v-if="item.refund_status > 0">({{refundStatusText[item.refund_status]}})</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="describe">
|
|
<div> <span>{{stateText[item.message.content.state-1]}}</span> </div>
|
|
<div> <span>ID：</span> <span>{{item.message.content.order_no}}</span> </div>
|
|
</div>
|
|
</div>
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
<form class="inputBox" id="form">
|
|
<div class="tool">
|
|
<span class="fa fa-smile-o" @click="toggleBox"></span>
|
|
<label for="upImage" class="fa fa-picture-o upImage"></label>
|
|
<input type="file" id="upImage" @change="chatImage" style="display:none">
|
|
</div>
|
|
<div class="input">
|
|
<textarea id="content" placeholder="请输入消息" v-model="textarea" @keyup.ctrl.enter="submit" autofocus></textarea>
|
|
</div>
|
|
<div class="operation">
|
|
<button type="button" class="btn btn-danger" @click="submit">发送 Ctrl+Enter</button>
|
|
</div>
|
|
</form>
|
|
<div class="box-container" v-if="showBox" @click.self="toggleBox"> </div>
|
|
<div class="wanl-emoji" v-if="showBox">
|
|
<div class="title">
|
|
<div> {{TabCur}} </div>
|
|
</div>
|
|
<div class="subject" v-for="(emoji, groups) in emojiList.groups" :key="groups" v-if="TabCur == groups">
|
|
<div class="item">
|
|
<span v-for="(item, index) in emoji" :key="index" @click="addEmoji(item.value)">
|
|
<img :src="item.url" >
|
|
</span>
|
|
</div>
|
|
</div>
|
|
<div class="emojiNav">
|
|
<div :class="item == TabCur ? 'emojibg' : ''" class="item" v-for="(item, index) in emojiList.categories" :key="index" :data-id="item" @click="tabSelect" >
|
|
<img :src="emojiList.groups[item][0].url" >
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<!-- 客服按钮 -->
|
|
<div class="wanl-chat-mini" v-if="chatMiniWindow" @click="miniChat" v-cloak>
|
|
<div class="water0"></div>
|
|
<div class="water1"></div>
|
|
<div class="water2"></div>
|
|
<div class="water3"></div>
|
|
</div>
|
|
</div>
|
|
<div class="content-wrapper tab-content tab-addtabs">
|
|
<div class="tab-pane active">
|
|
<div id="main" role="main">
|
|
<div class="tab-content tab-addtabs">
|
|
<div id="content">
|
|
<div class="row">
|
|
<div class="col-xs-12 col-sm-12 col-md-12 col-lg-12">
|
|
|
|
<!-- RIBBON -->
|
|
<div id="ribbon">
|
|
<ol class="breadcrumb pull-left">
|
|
<li><a href="dashboard" class="addtabsit"><i class="fa fa-dashboard"></i> 控制台</a></li>
|
|
</ol>
|
|
<ol class="breadcrumb pull-right">
|
|
<li><a href="javascript:;"><?php echo (isset($title) && ($title !== '')?$title:''); ?></a></li>
|
|
</ol>
|
|
</div>
|
|
|
|
<!-- END RIBBON -->
|
|
<div class="content">
|
|
<link href="/assets/addons/wanlshop/css/appUI.css?v=<?php echo $site['version']; ?>" rel="stylesheet">
|
|
<link href="/assets/addons/wanlshop/css/page.css?v=<?php echo $site['version']; ?>" rel="stylesheet">
|
|
<link href="//at.alicdn.com/t/font_1394144_afdog2ap4uo.css?v=<?php echo $site['version']; ?>" rel="stylesheet">
|
|
<div class="panel panel-default panel-intro" id="app" v-cloak>
|
|
<div class="panel-body" style="padding: 0;">
|
|
<div id="myTabContent" class="tab-content">
|
|
<div class="tab-pane fade active in" id="one">
|
|
<div class="widget-body no-padding">
|
|
<div class="wanl-page" :class="device">
|
|
<!-- 左侧 -->
|
|
<div class="left">
|
|
<div class="wanl-tool">
|
|
<div class="menu">
|
|
<div class="dropdown">
|
|
<div class="bnt" id="dLabel" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
|
|
<span>{{device}}</span><span class="caret"></span>
|
|
</div>
|
|
<ul class="dropdown-menu" aria-labelledby="dLabel">
|
|
<li><a @click="onDevice('huaweiMate30')">华为Mate30</a></li>
|
|
<li role="separator" class="divider"></li>
|
|
<li><a @click="onDevice('iPhoneX')">iPhoneX</a></li>
|
|
<li><a @click="onDevice('iPhoneXmax')">iPhoneXmax</a></li>
|
|
<li><a @click="onDevice('iPhone7')">iPhone7</a></li>
|
|
<li><a @click="onDevice('iPhone7plus')">iPhone7plus</a></li>
|
|
<li role="separator" class="divider"></li>
|
|
<li><a @click="onDevice('OPPORenoAce')">OPPORenoAce</a></li>
|
|
<li><a @click="onDevice('vivoNEX3')">vivoNEX3</a></li>
|
|
<li><a @click="onDevice('xiaomi9Pro')">xiaomi9Pro</a></li>
|
|
</ul>
|
|
</div>
|
|
<div class="dropdown">
|
|
<div class="bnt" id="dLabel2" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
|
|
<span>{{signal}}</span><span class="caret"></span>
|
|
</div>
|
|
<ul class="dropdown-menu" aria-labelledby="dLabel2">
|
|
<li><a @click="onSignal('WIFI')">WIFI</a></li>
|
|
<li role="separator" class="divider"></li>
|
|
<li><a @click="onSignal('3G')">3G</a></li>
|
|
<li><a @click="onSignal('4G')">4G</a></li>
|
|
<li><a @click="onSignal('5G')">5G</a></li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
<div class="Button">
|
|
<div class="dropdown">
|
|
<div @click="historyPage" class="btn btn-info btn-sm"><i class="fa fa-cloud"></i> 云端历史</div>
|
|
<div @click="publish()" class="btn btn-success btn-sm"><i class="fa fa-paper-plane"></i> 保存页面</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<!-- 手机 -->
|
|
<div class="frame">
|
|
<div class="preview">
|
|
<div ref="parant" class="page" :style="{'background-color': pageData.page.style.pageBackgroundColor,'background-repeat': pageData.page.style.pageBackgroundRepeat,'background-image': 'url('+pageData.page.style.pageBackgroundImage+')'}">
|
|
<!-- 导航 -->
|
|
<div class="navigation" :class="{action: type == 'page'}" :style="{'background-color': pageData.page.style.navigationBarBackgroundColor,'background-image': 'url('+pageData.page.style.navigationBackgroundImage+')',color:pageData.page.style.navigationBarTextStyle}" @click="onType('page')">
|
|
<div class="Statusbar">
|
|
<div class="time"> {{nowTime}} </div>
|
|
<div class="bangs">
|
|
<div class="sub"></div>
|
|
</div>
|
|
<div class="device">
|
|
<i class="wlIcon wlIcon-xinhao"></i>
|
|
<i v-if="signal == '3G'">3G</i>
|
|
<i v-if="signal == '4G'">4G</i>
|
|
<i v-if="signal == '5G'">5G</i>
|
|
<i v-if="signal == 'WIFI'" class="wlIcon wlIcon-WIFI"></i>
|
|
<i class="wlIcon wlIcon-dianchifull"></i>
|
|
</div>
|
|
</div>
|
|
<div class="page-head">
|
|
<span class="wanlicon">
|
|
<i class="wlIcon wlIcon-fanhui1"></i>
|
|
</span>
|
|
<span class="title">
|
|
{{pageData.page.params.navigationBarTitleText}}
|
|
</span>
|
|
<span class="wanlicon">
|
|
<i class="wlIcon wlIcon-fenxiang"></i>
|
|
</span>
|
|
</div>
|
|
</div>
|
|
<!-- 模块&拖动 -->
|
|
<wanldraggable class="draggable" v-model="pageData.item" v-bind="{animation:500}">
|
|
<div class="wanlshop" v-for="(item,index) in pageData.item" :key="index" @click="onType(index)" :class="{action: type == index}">
|
|
<!-- 轮播组件 -->
|
|
<div class="banner" v-if="item.type == 'banner'" :style="item.style">
|
|
<img :src="cdnurl(item.data[0].image)" :style="{height: item.params.height}">
|
|
<div class="indicator">
|
|
<div class="item">
|
|
<span v-for="indic in item.data"></span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<!-- 广告轮播组件 -->
|
|
<div class="advertBanner" v-if="item.type == 'advertBanner'" :style="item.style">
|
|
<img src="/assets/addons/wanlshop/img/page/advert-banner.png" :style="{height: item.params.height}">
|
|
<div class="indicator">
|
|
<div class="item">
|
|
<span v-for="indic in item.data"></span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<!-- 图片櫥窗 -->
|
|
<div class="image" :class="'layout-' + item.params.imgLayout" v-if="item.type == 'image'" :style="[{ padding: item.params.imgPaddingTb + ' ' + item.params.imgPaddingLf },item.style]">
|
|
<div class="item" v-for="image in item.data" :style="{ padding: item.params.imgPaddingTb + ' ' + item.params.imgPaddingLf }">
|
|
<img :src="cdnurl(image.image)">
|
|
</div>
|
|
</div>
|
|
<!-- 广告单图 -->
|
|
<div class="advertImage" v-if="item.type == 'advertImage'" :style="item.style">
|
|
<img src="/assets/addons/wanlshop/img/page/advert-image.png">
|
|
</div>
|
|
<!-- 视频 -->
|
|
<div class="video" v-if="item.type == 'video'" :style="item.style">
|
|
<img :src="cdnurl(item.data[0].image)">
|
|
<div class="play"><i class="wlIcon wlIcon-bofang"></i></div>
|
|
</div>
|
|
<!-- 菜单组件 -->
|
|
<div class="menu" v-if="item.type == 'menu'" :style="item.style">
|
|
<div class="grid text-center" :class="'col-' + item.params.colfive">
|
|
<div class="item" v-for="meun in item.data" :style="{'margin-top':item.params.menuMarginTop}">
|
|
<div v-if="item.params.menuType == 'icon'" class="picicon" :class="meun.bgClass" :style="{
|
|
'height':item.params.menuHeightWidth,
|
|
'width':item.params.menuHeightWidth,
|
|
'margin-bottom':item.params.menuMarginBottom,
|
|
'border-radius':item.params.menuBorderRadius
|
|
}">
|
|
<span :class="meun.iconClass"><i class="wlIcon" :class="meun.icon" :style="{'font-size':item.params.menuIconSize}"></i></span>
|
|
</div>
|
|
<div v-else class="picicon">
|
|
<img :src="cdnurl(meun.iconImage)" :class="meun.bgClass" :style="{
|
|
'height':item.params.menuHeightWidth,
|
|
'width':item.params.menuHeightWidth,
|
|
'margin-bottom':item.params.menuMarginBottom,
|
|
'border-radius':item.params.menuBorderRadius
|
|
}">
|
|
</div>
|
|
<div :style="{'font-size':item.params.menuTextSize}">{{meun.text}}</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<!-- 公告栏 -->
|
|
<div class="notice" v-if="item.type == 'notice'" :style="item.style">
|
|
<i class="wlIcon wlIcon-notice margin-right-xs" v-if="item.params.show"></i><span>{{item.data[0].content}}</span>
|
|
</div>
|
|
<!-- 文章组件 -->
|
|
<div class="article" v-if="item.type == 'article'" :style="item.style">
|
|
<div class="item" v-for="article in item.data">
|
|
<div class="image">
|
|
<img :src="cdnurl(article.image)" >
|
|
</div>
|
|
<div class="article-content">
|
|
<div class="title">
|
|
{{article.articleTitle ? article.articleTitle : '请点击右侧操作栏选择文章'}}
|
|
</div>
|
|
<div class="operate">
|
|
<span v-if="item.params.showTime == 'true'">2020年5月30日20:53</span>
|
|
<span v-if="item.params.showView == 'true'">浏览：100</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<!-- 头条组件 -->
|
|
<div class="headlines" v-if="item.type == 'headlines'" :style="item.style">
|
|
<div class="margin-lr-bj">
|
|
<i class="wlIcon wlIcon-toutiao"></i>
|
|
</div>
|
|
<div class="swiper">
|
|
<div class="list padding-tb-xs">
|
|
<div class="text-sm">
|
|
<div class="cu-tag sm radius bg-gradual-red margin-right-xs">热门</div>
|
|
..客户端自动获取后台头条数据..
|
|
</div>
|
|
<div class="text-sm">
|
|
<div class="cu-tag sm radius bg-gradual-red margin-right-xs">热门</div>
|
|
..客户端自动获取后台头条数据..
|
|
</div>
|
|
</div>
|
|
<div class="pic">
|
|
<img :src="cdnurl(item.data[0].image)" >
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<!-- 搜索栏 -->
|
|
<div class="search" v-if="item.type == 'search'" :style="item.style">
|
|
<div :style="{'border-radius':item.params.searchRadius,'background':item.params.searchBackground,'padding':item.params.searchPadding}">
|
|
<i class="wlIcon wlIcon-sousuo margin-right-xs"></i><span>{{item.data[0].content}}</span>
|
|
</div>
|
|
</div>
|
|
<!-- 活动橱窗 -->
|
|
<div class="category" v-if="item.type == 'activity'" :style="item.style">
|
|
<div class="bg" :style="{backgroundImage: `url(${cdnurl(item.params.activityBackground)})`}">
|
|
<div class="cu-list grid col-2-2_1">
|
|
<div class="cu-item" v-for="(act, index) in item.data" :key="index">
|
|
<div class="name">
|
|
<span class="text-lg" :class="act.textColor">{{getParameter(act.activity)}}</span>
|
|
<div v-if="act.tags" class="cu-tag round sm wanl-bg-orange">
|
|
<span class="wlIcon wlIcon-dot"></span>{{act.tags}}
|
|
</div>
|
|
</div>
|
|
<div v-if="act.describe" class="wanl-gray">{{act.describe}}</div>
|
|
<div class="goods margin-top-bj">
|
|
<div v-for="image in getListNum('col-2-2_1', index)">
|
|
<img src="/assets/addons/wanlshop/img/common/img_default3x.png">
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<!-- 分类橱窗 -->
|
|
<div class="category" v-if="item.type == 'classify'" :style="item.style">
|
|
<div class="bg" :style="{backgroundImage: `url(${cdnurl(item.params.classifyBackground)})`}">
|
|
<div class="cu-list grid" :class="item.params.colStyle">
|
|
<div class="cu-item" v-for="(cat, index) in item.data" :key="index">
|
|
<div class="name">
|
|
<span class="text-lg" :class="cat.textColor">{{categoryName(cat.categoryId)}}</span>
|
|
<div v-if="cat.tags" class="cu-tag round sm wanl-bg-orange">
|
|
<span class="wlIcon wlIcon-dot"></span>{{cat.tags}}
|
|
</div>
|
|
</div>
|
|
<div v-if="cat.describe" class="wanl-gray">{{cat.describe}}</div>
|
|
<div class="goods margin-top-bj">
|
|
<div v-for="image in getListNum(item.params.colStyle, index)">
|
|
<img src="/assets/addons/wanlshop/img/common/img_default3x.png">
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<!-- 类目标题 -->
|
|
<div class="categoryTitle" v-if="item.type == 'categoryTitle'" :style="item.style">
|
|
<div class="text-lg"> <span class="wlIcon margin-right-xs" :class="item.data[0].categoryIcon"></span>
|
|
{{item.data[0].categoryName}} ···</div>
|
|
<div class="text-sm wanl-gray">更多 <span class="wlIcon wlIcon-fanhui2 margin-left-xs"></span> </div>
|
|
</div>
|
|
<!-- 猜你喜欢 -->
|
|
<div class="product" v-if="item.type == 'likes'" :style="item.style" :class="'col-'+ item.params.colthree +'-'+item.params.colmargin" >
|
|
<div class="item">
|
|
<div class="item_pic">
|
|
<img src="/assets/addons/wanlshop/img/common/img_default3x.png">
|
|
</div>
|
|
<div class="item_list padding-bj">
|
|
<div class="margin-bottom-xs">
|
|
<div class="text-df text-cut-2">自动获取...自动获取...自动获取...</div>
|
|
<div class="wanl-orange text-price text-lg">199</div>
|
|
</div>
|
|
<div>
|
|
<div class="text-xs wanl-gray">
|
|
<span class="margin-right-sm">100+条评论</span> <span>100%好评率</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="item">
|
|
<div class="item_pic">
|
|
<img src="/assets/addons/wanlshop/img/common/img_default3x.png">
|
|
</div>
|
|
<div class="item_list padding-bj">
|
|
<div class="margin-bottom-xs">
|
|
<div class="text-df text-cut-2">自动获取...自动获取...自动获取...</div>
|
|
<div class="wanl-orange text-price text-lg">199</div>
|
|
</div>
|
|
<div>
|
|
<div class="text-xs wanl-gray">
|
|
<span class="margin-right-sm">100+条评论</span> <span>100%好评率</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<!-- 商品组件 -->
|
|
<div class="product" v-if="item.type == 'goods'" :style="item.style" :class="'col-'+ item.params.colthree +'-'+item.params.colmargin" >
|
|
<div class="item" v-for="goods in item.data">
|
|
<div class="item_pic">
|
|
<img src="/assets/addons/wanlshop/img/common/img_default3x.png">
|
|
</div>
|
|
<div class="item_list padding-bj">
|
|
<div class="margin-bottom-xs">
|
|
<div class="text-df text-cut-2">标题标题标题标题标题标题标题标题标题标题标题标题标题标题标题标题</div>
|
|
<div class="wanl-orange text-price text-lg">{{Math.round(Math.random()*10+10)}}.00</div>
|
|
</div>
|
|
<div class="">
|
|
<div class="margin-bottom-xs">
|
|
<div class="cu-tag sm round bg-gradual-red">新品</div>
|
|
<div class="cu-tag sm round bg-white">领券66减6</div>
|
|
</div>
|
|
<div class="text-xs wanl-gray">
|
|
<span class="margin-right-sm">{{Math.round(Math.random()*10+10)}}条评论</span> <span>100%好评率</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<!-- 拼团组件 -->
|
|
<div class="groups" v-if="item.type == 'groups'" :style="item.style" :class="`col-3-${item.params.colmargin}`">
|
|
<div class="bg" :style="{backgroundImage: `url(${cdnurl(item.params.groupsBackground)})`}">
|
|
<div class="head">
|
|
<div class="title">
|
|
<span class="margin-right-sm" :style="{color: item.params.titleColor, fontSize: item.params.titleFontSize}">{{item.params.titleText}}</span>
|
|
<span :style="{color: item.params.infoColor, fontSize: item.params.infoFontSize}">{{item.params.infoText}}</span>
|
|
</div>
|
|
<div class="more">
|
|
<span class="margin-right-xs">更多</span><i class="wlIcon wlIcon-fanhui2"></i>
|
|
</div>
|
|
</div>
|
|
<div class="main">
|
|
<div class="item" v-for="groups in 6">
|
|
<div class="item_pic">
|
|
<img src="/assets/addons/wanlshop/img/common/img_default3x.png">
|
|
</div>
|
|
<div class="list" style="width: 100%;">
|
|
<div class="text-space text-sm">
|
|
自动获取拼团
|
|
</div>
|
|
<div class="text-space text-orange text-xs">
|
|
描述专业电商供应厂家
|
|
</div>
|
|
<div class="flex">
|
|
<div class="price">
|
|
<span class="text-price text-lg text-orange">{{Math.round(Math.random()*10+10)}}.00</span>
|
|
</div>
|
|
<div class="cu-tag round sm wanl-bg-orange">拼</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<!-- 砍价组件 -->
|
|
<div class="bargain" v-if="item.type == 'bargain'" :style="item.style">
|
|
<span>砍价组件-下个版本发布，敬请期待</span>
|
|
</div>
|
|
<!-- 秒杀组件 -->
|
|
<div class="seckill" v-if="item.type == 'seckill'" :style="item.style">
|
|
<span>秒杀组件-下个版本发布，敬请期待</span>
|
|
</div>
|
|
<!-- 搜索栏 -->
|
|
<div class="empty" v-if="item.type == 'empty'" :style="item.style">
|
|
</div>
|
|
<!-- 分隔符 -->
|
|
<div class="division" v-if="item.type == 'division'" :style="item.style">
|
|
<div class="line" :style="{'width':item.params.lineWidth,'height':item.params.lineHeight,'background':item.params.lineBackground}"></div>
|
|
<div class="linetext" :style="{'color':item.params.lineTextColor,'font-size':item.params.lineTextSize,'line-height':item.params.lineTextSize,'background':item.params.lineTextBackground,'padding':item.params.lineTextPadding}">
|
|
{{item.params.lineText}}
|
|
</div>
|
|
</div>
|
|
<div class="sub-del" @click="delModule(index)"><i class="wlIcon wlIcon-31guanbi"></i></div>
|
|
</div>
|
|
</wanldraggable>
|
|
</div>
|
|
</div>
|
|
<div class="template">
|
|
<div class="template-title">
|
|
<span><i></i>自定义组件</span>
|
|
<!-- <span>更多 <span class="wlIcon wlIcon-fanhuigengduo"></span></span> -->
|
|
</div>
|
|
<div class="control">
|
|
<!-- 模板分组 -->
|
|
<div class="element" v-for="(item,index) in module" :key="index">
|
|
<div class="element-name"> {{getParameter(index)}}</div>
|
|
<div class="element-row">
|
|
<div v-for="element in item" @click="addTemplate(element)">
|
|
<i class="wlIcon" :class="'wlIcon-'+element.type"></i>
|
|
<span>{{element.name}}</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<!-- 编辑器 -->
|
|
<div class="editor">
|
|
<div class="bs-example bs-example-tabs" v-if="type == 'page'">
|
|
<ul class="nav nav-tabs" role="tablist">
|
|
<li class="active"><a href="#home" data-toggle="tab" aria-expanded="true">页面配置</a></li>
|
|
</ul>
|
|
<div class="tab-content">
|
|
<div class="tab-pane fade active in" id="home">
|
|
<p class="bg-info text-info"><strong>技巧：</strong>点击模块后，无法找到此页面请点击左侧导航栏即可返回！</p>
|
|
<div class="form-group">
|
|
<label>页面名称:</label>
|
|
<input type="text" class="form-control" v-model="pageData.name">
|
|
</div>
|
|
<div class="form-group">
|
|
<label>导航栏标题:</label>
|
|
<input type="text" class="form-control" v-model="pageData.page.params.navigationBarTitleText">
|
|
</div>
|
|
|
|
<h5 class="page-header"></h5>
|
|
<div class="form-group">
|
|
<label>导航栏背景图:</label>
|
|
<div class="wanl-upload">
|
|
<input class="form-control" type="text" v-model="pageData.page.style.navigationBackgroundImage">
|
|
<input type="file" id="navigationBackground" accept="image/*" @change="changeImage($event,'navigationBackgroundImage')" style="display:none" >
|
|
<label for="navigationBackground" class="btn btn-info">
|
|
<i class="fa fa-upload"></i> 上传
|
|
</label>
|
|
</div>
|
|
</div>
|
|
<div class="form-group">
|
|
<label>导航栏背景:</label>
|
|
<div class="form-inline">
|
|
<input type="text" class="form-control" v-model="pageData.page.style.navigationBarBackgroundColor"> <input
|
|
id="color" class="form-control" type="color" v-model="pageData.page.style.navigationBarBackgroundColor">
|
|
</div>
|
|
</div>
|
|
<div class="form-group">
|
|
<label>导航前景色:</label>
|
|
<select class="form-control" v-model="pageData.page.style.navigationBarTextStyle">
|
|
<option value="#ffffff">浅色（白色）</option>
|
|
<option value="#000000">深色（黑色）</option>
|
|
</select>
|
|
</div>
|
|
<h5 class="page-header"></h5>
|
|
<div class="form-group">
|
|
<label>页面背景图:</label>
|
|
<div class="wanl-upload">
|
|
<input class="form-control" type="text" v-model="pageData.page.style.pageBackgroundImage">
|
|
<input type="file" id="pageBackground" accept="image/*" @change="changeImage($event,'pageBackgroundImage')" style="display:none" >
|
|
<label for="pageBackground" class="btn btn-info">
|
|
<i class="fa fa-upload"></i> 上传
|
|
</label>
|
|
</div>
|
|
</div>
|
|
<div class="form-group">
|
|
<label>页面背景:</label>
|
|
<div class="form-inline">
|
|
<input type="text" class="form-control" v-model="pageData.page.style.pageBackgroundColor">
|
|
<input id="color" class="form-control" type="color" v-model="pageData.page.style.pageBackgroundColor">
|
|
</div>
|
|
</div>
|
|
<div class="form-group">
|
|
<label>背景重复:</label>
|
|
<select class="form-control" v-model="pageData.page.style.pageBackgroundRepeat">
|
|
<option value="repeat-x">水平方向重复</option>
|
|
<option value="repeat-y">垂直方向重复</option>
|
|
<option value="no-repeat">不重复</option>
|
|
</select>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- 组件 -->
|
|
<div class="bs-example bs-example-tabs module-example" v-for="(item,index) in pageData.item" :key="index" v-if="type == index">
|
|
<ul class="nav nav-tabs" role="tablist">
|
|
<li class="active"><a href="#home" data-toggle="tab" aria-expanded="true">{{item.name}}数据</a></li>
|
|
<li v-if="item.params !== undefined"><a href="#params" data-toggle="tab" aria-expanded="false">配置参数</a></li>
|
|
<li><a href="#style" data-toggle="tab" aria-expanded="false">CSS样式</a></li>
|
|
</ul>
|
|
<div class="tab-content">
|
|
<!-- 组件首页 -->
|
|
<div class="tab-pane fade active in" id="home">
|
|
<div class="add-data" @click="addData(index,item.data[0])">
|
|
<a class="btn btn-sm btn-info btn-append"><i class="fa fa-plus"></i> 追加数据</a>
|
|
</div>
|
|
<p class="bg-info text-info"><strong>注意：</strong>请自行判断是否要添加数据，单数据如单图追加无效！</p>
|
|
<div class="panel-group" id="accordion" role="tablist" aria-multiselectable="true">
|
|
<div class="panel panel-default" v-for="(lists,num) in item.data" :key="num">
|
|
<div class="panel-heading" role="tab" :id="'heading-'+num">
|
|
<h4 class="panel-title" role="button" data-toggle="collapse" data-parent="#accordion" :href="'#collapse-'+num" :aria-expanded="num==0?true:false" :aria-controls="'collapse-'+num">
|
|
{{item.name}} <strong>#{{num+1}}</strong>
|
|
</h4>
|
|
<span @click="delData(index,num)"><i class="wlIcon wlIcon-31guanbi"></i></span>
|
|
</div>
|
|
<div :id="'collapse-'+num" class="panel-collapse collapse" :class="num==0?'in':''" role="tabpanel" :aria-labelledby="'heading-'+num">
|
|
<div class="panel-body">
|
|
<div v-for="(datas,type) in lists" :key="type">
|
|
<!-- 图片上传组件 -->
|
|
<div class="form-group" v-if="type == 'image'">
|
|
<label>图片:</label>
|
|
<div class="wanl-upload">
|
|
<input class="form-control" type="text" v-model="lists[type]" placeholder="点击右侧选择按钮选择图标">
|
|
<input type="file" :id="type+index+num" accept="image/*" @change="dataUpload($event,index,num,type)" :ref="type+index+num" style="display: none;">
|
|
<label :for="type+index+num" class="btn btn-info">
|
|
<i class="fa fa-upload"></i> 上传
|
|
</label>
|
|
</div>
|
|
<ul class="row list-inline plupload-preview">
|
|
<li class="col-xs-3">
|
|
<a class="thumbnail"><img :src="cdnurl(lists[type])" class="img-responsive"></a>
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
<!-- 提示 -->
|
|
<div class="tips" v-else-if="type == 'tips'">
|
|
{{datas}}
|
|
</div>
|
|
<!-- 提示2 -->
|
|
<div class="title form-group" v-else-if="type == 'title'">
|
|
<span class="text-green">{{datas}}</span>
|
|
</div>
|
|
<!-- 图片上传组件 -->
|
|
<div class="form-group" v-else-if="type == 'iconImage'">
|
|
<div v-show="item.params.menuType == 'image'">
|
|
<label>菜单图片:</label>
|
|
<div class="wanl-upload">
|
|
<input class="form-control" type="text" v-model="lists[type]" placeholder="点击右侧选择按钮选择图标">
|
|
<input type="file" :id="type+index+num" accept="image/*" @change="dataUpload($event,index,num,type)" :ref="type+index+num" style="display: none;">
|
|
<label :for="type+index+num" class="btn btn-info">
|
|
<i class="fa fa-upload"></i> 上传
|
|
</label>
|
|
</div>
|
|
<ul class="row list-inline plupload-preview">
|
|
<li class="col-xs-3">
|
|
<a class="thumbnail"><img :src="cdnurl(lists[type])" class="img-responsive"></a>
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
<!-- icon类名 -->
|
|
<div class="form-group" v-else-if="type == 'categoryIcon'">
|
|
<label>图标类名:</label>
|
|
<div class="wanl-upload">
|
|
<input type="text" class="form-control" v-model="lists[type]" placeholder="点击右侧选择按钮选择图标">
|
|
<button @click="iconLink(index, num, type, 'false')" class="btn btn-info wanl-link"><i class="fa fa-bars"></i> 选择 </button>
|
|
</div>
|
|
</div>
|
|
<!-- icon类名 -->
|
|
<div class="form-group" v-else-if="type == 'icon'">
|
|
<div v-show="item.params.menuType == 'icon'">
|
|
<label>图标类名:</label>
|
|
<div class="wanl-upload">
|
|
<input type="text" class="form-control" v-model="lists[type]" placeholder="点击右侧选择按钮选择图标">
|
|
<button @click="iconLink(index, num, type, 'false')" class="btn btn-info wanl-link"><i class="fa fa-bars"></i> 选择 </button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<!-- icon颜色 -->
|
|
<div class="form-group" v-else-if="type == 'iconClass'">
|
|
<div v-show="item.params.menuType == 'icon'">
|
|
<label>icon颜色:</label>
|
|
<select class="form-control" v-model="lists[type]">
|
|
<option value="text-white">白色</option>
|
|
<option value="wanl-black">纯黑</option>
|
|
<option value="wanl-pip">标准黑</option>
|
|
<option value="wanl-gray-dark">深灰</option>
|
|
<option value="wanl-gray-light">浅灰</option>
|
|
<option value="wanl-text-white">白色（渐变）</option>
|
|
<option value="wanl-orange">橙色</option>
|
|
<option value="wanl-red">红色</option>
|
|
<option value="text-yellow">黄色</option>
|
|
<option value="text-green">绿色</option>
|
|
<option value="text-blue">蓝色</option>
|
|
<option value="text-olive">军绿色</option>
|
|
<option value="text-cyan">青色</option>
|
|
<option value="text-purple">紫色</option>
|
|
<option value="text-mauve">洋紫</option>
|
|
<option value="text-pink">粉色</option>
|
|
<option value="text-brown">棕色</option>
|
|
<option value="wanl-text-red">红色（渐变）</option>
|
|
<option value="wanl-text-yellow">黄色（渐变）</option>
|
|
<option value="wanl-text-orange">橙色（渐变）</option>
|
|
<option value="wanl-text-violet">紫罗兰（渐变）</option>
|
|
<option value="wanl-text-blue">蓝色（渐变）</option>
|
|
<option value="wanl-text-light-blue">浅蓝色（渐变）</option>
|
|
<option value="wanl-text-pink">粉色（渐变）</option>
|
|
<option value="wanl-text-green">绿色（渐变）</option>
|
|
<option value="wanl-text-purple">紫色（渐变）</option>
|
|
</select>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- 背景样式下拉 -->
|
|
<div class="form-group" v-else-if="type == 'bgClass'">
|
|
<label>背景:</label>
|
|
<select class="form-control" v-model="lists[type]">
|
|
<option value="wanl-bg-transparent">透明（无）</option>
|
|
<option value="bg-white">白色</option>
|
|
<option value="wanl-bg-redorange">橘红色（渐变）</option>
|
|
<option value="wanl-bg-orange">橙色（渐变）</option>
|
|
<option value="wanl-bg-pink">粉色（渐变）</option>
|
|
<option value="wanl-bg-blue">蓝色（渐变）</option>
|
|
<option value="bg-gradual-yellow">黄色（渐变）</option>
|
|
<option value="bg-gradual-red">洋红（渐变）</option>
|
|
<option value="bg-gradual-orange">黄橙（渐变）</option>
|
|
<option value="bg-gradual-green">草绿（渐变）</option>
|
|
<option value="bg-gradual-purple">紫色（渐变）</option>
|
|
<option value="bg-gradual-pink">洋紫（渐变）</option>
|
|
<option value="bg-gradual-blue">蓝绿（渐变）</option>
|
|
<option value="bg-red">红色</option>
|
|
<option value="bg-orange">橙色</option>
|
|
<option value="bg-yellow">黄色</option>
|
|
<option value="bg-olive">军绿</option>
|
|
<option value="bg-green">绿色</option>
|
|
<option value="bg-cyan">青色</option>
|
|
<option value="bg-blue">蓝色</option>
|
|
<option value="bg-purple">墨紫</option>
|
|
<option value="bg-mauve">洋紫</option>
|
|
<option value="bg-pink">粉红</option>
|
|
<option value="bg-brown">棕色</option>
|
|
</select>
|
|
</div>
|
|
<!-- 链接地址 -->
|
|
<div class="form-group" v-else-if="type == 'link'">
|
|
<h5 class="page-header"></h5>
|
|
<label>链接地址:</label>
|
|
<div class="wanl-upload">
|
|
<input type="text" class="form-control" v-model="lists[type]" placeholder="点击右侧选择按钮选择链接">
|
|
<button @click="obtainLink(index,num,type,'false')" class="btn btn-primary wanl-link"><i class="fa fa-link"></i> 选择 </button>
|
|
</div>
|
|
</div>
|
|
<!-- 视频地址 -->
|
|
<div class="form-group" v-else-if="type == 'video'">
|
|
<h5 class="page-header"></h5>
|
|
<label>选择视频:</label>
|
|
<div class="wanl-upload">
|
|
<input type="text" class="form-control" v-model="lists[type]" placeholder="点击右侧选择按钮选择链接">
|
|
<button @click="attachmentLink(index,num,type,'false')" class="btn btn-primary wanl-link"><i class="fa fa-list"></i> 选择 </button>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- 类目链接 -->
|
|
<div class="form-group" v-else-if="type == 'categoryLink'">
|
|
<h5 class="page-header"></h5>
|
|
<label>类目链接:</label>
|
|
<div class="wanl-upload">
|
|
<input type="text" class="form-control" v-model="lists[type]" placeholder="点击右侧选择按钮选择类目ID">
|
|
<button @click="categoryLink(index, num, 'false')" class="btn btn-info wanl-link"><i class="fa fa-bars"></i> 选择 </button>
|
|
</div>
|
|
</div>
|
|
<!-- 类目名 -->
|
|
<div class="form-group" v-else-if="type == 'categoryName'">
|
|
<label>类目名:</label>
|
|
<input type="text" class="form-control" v-model="lists[type]" disabled />
|
|
</div>
|
|
<!-- 商品链接 -->
|
|
<div class="form-group" v-else-if="type == 'goodsLink'">
|
|
<label>商品:</label>
|
|
<div class="wanl-upload">
|
|
<input type="text" class="form-control" v-model="lists[type]" placeholder="点击右侧选择按钮选择商品ID">
|
|
<button @click="goodsLink(index,num,type,'false')" class="btn btn-info wanl-link"><i class="fa fa-bars"></i> 选择 </button>
|
|
</div>
|
|
</div>
|
|
<!-- 广告 -->
|
|
<div class="form-group" v-else-if="type == 'advertLink'">
|
|
<label>展示广告:</label>
|
|
<div class="wanl-upload">
|
|
<input type="text" class="form-control" v-model="lists[type]" placeholder="点击右侧选择按钮选择广告ID">
|
|
<button @click="advertLink(index,num,type,'false')" class="btn btn-info wanl-link"><i class="fa fa-bars"></i> 选择 </button>
|
|
</div>
|
|
</div>
|
|
<!-- 文章 -->
|
|
<div class="form-group" v-else-if="type == 'articleLink'">
|
|
<h5 class="page-header"></h5>
|
|
<label>选择文章:</label>
|
|
<div class="wanl-upload">
|
|
<input type="text" class="form-control" v-model="lists[type]" placeholder="点击右侧选择按钮选择文章">
|
|
<button @click="articleLink(index,num,type,'false')" class="btn btn-info wanl-link"><i class="fa fa-bars"></i> 选择 </button>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- 文章标题 -->
|
|
<div class="form-group hidden" v-else-if="type == 'articleTitle'">
|
|
<label>已选文章:</label>
|
|
<input type="text" class="form-control" v-model="lists[type]" disabled="disabled">
|
|
</div>
|
|
|
|
<!-- 内容 -->
|
|
<div class="form-group" v-else-if="type == 'content'">
|
|
<label>内容:</label>
|
|
<input type="text" class="form-control" v-model="lists[type]" placeholder="请输入内容">
|
|
</div>
|
|
|
|
<!-- 活动类型 -->
|
|
<div class="form-group" v-else-if="type == 'activity'">
|
|
<label>活动类型:</label>
|
|
<select class="form-control" v-model="lists[type]">
|
|
<option value="distribution">分销</option>
|
|
<option value="group">团购拼团</option>
|
|
<option value="bargain">砍价</option>
|
|
<option value="rush">限时抢购</option>
|
|
<option value="coupon">领券中心</option>
|
|
</select>
|
|
</div>
|
|
<!-- 字体颜色 -->
|
|
<div class="form-group" v-else-if="type == 'textColor'">
|
|
<label>字体颜色:</label>
|
|
<select class="form-control" v-model="lists[type]">
|
|
<option value="wanl-black">黑色</option>
|
|
<option value="wanl-pip">标准黑</option>
|
|
<option value="wanl-orange">橙色</option>
|
|
<option value="wanl-red">万联红</option>
|
|
<option value="text-red">红色</option>
|
|
<option value="text-yellow">黄色</option>
|
|
<option value="text-green">绿色</option>
|
|
<option value="text-blue">蓝色</option>
|
|
<option value="text-olive">军绿色</option>
|
|
<option value="text-cyan">青色</option>
|
|
<option value="text-purple">紫色</option>
|
|
<option value="text-mauve">洋紫</option>
|
|
<option value="text-pink">粉色</option>
|
|
<option value="text-brown">棕色</option>
|
|
<option value="wanl-gray-dark">深灰</option>
|
|
<option value="wanl-gray-light">浅灰</option>
|
|
</select>
|
|
</div>
|
|
<!-- 类目 -->
|
|
<div class="form-group" v-else-if="type == 'categoryId'">
|
|
<label>选择类目:</label>
|
|
<select class="form-control" v-model="lists[type]">
|
|
<option v-for="cate in pageCategory" :value ="cate.id">{{mergeSpace(cate.spacer)}} {{cate.name}}</option>
|
|
</select>
|
|
</div>
|
|
<!-- 普通表单 -->
|
|
<div class="form-group" v-else>
|
|
<label>{{getParameter(type)}}:</label>
|
|
<input type="text" class="form-control" v-model="lists[type]" :placeholder="'请输入' + getParameter(type)">
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<!-- 组件参数 -->
|
|
<div class="tab-pane fade" id="params">
|
|
<p class="bg-warning text-warning"><strong>提示：</strong>如参数有“px单位”请勿去掉并且只能为px（客户端会自动转换为自适应rpx）</p>
|
|
<div class="form-group" v-for="(params,type) in item.params" :key="type">
|
|
<!-- 指示器样式 -->
|
|
<div v-if="type == 'banstyle'">
|
|
<label>指示器样式:</label>
|
|
<select class="form-control" v-model="item.params[type]">
|
|
<option value="1">圆形</option>
|
|
<option value="2">长形</option>
|
|
</select>
|
|
</div>
|
|
<!-- 布局方式 -->
|
|
<div v-else-if="type == 'colStyle'">
|
|
<label>布局方式:</label>
|
|
<select class="form-control" v-model="item.params[type]">
|
|
<option value="col-1-2-2">1-2-2布局</option>
|
|
<option value="col-1-1_2">1-1_2布局</option>
|
|
<option value="col-2-1_2">2-1_2布局</option>
|
|
<option value="col-2-2_1">2-2_1布局</option>
|
|
<option value="col-2-2-1_2">2-2-1_2布局</option>
|
|
<option value="col-2-4">2-4布局</option>
|
|
<option value="col-2-2-4">2-2-4布局</option>
|
|
</select>
|
|
</div>
|
|
<!-- 每行数量 -->
|
|
<div v-else-if="type == 'colthree'">
|
|
<label>每行数量:</label>
|
|
<select class="form-control" v-model="item.params[type]">
|
|
<option value="1">每行 1 列</option>
|
|
<option value="2">每行 2 列</option>
|
|
<option value="3">每行 3 列</option>
|
|
</select>
|
|
</div>
|
|
<!-- 每行数量 -->
|
|
<div v-else-if="type == 'colfive'">
|
|
<label>每行数量:</label>
|
|
<select class="form-control" v-model="item.params[type]">
|
|
<option value="1">每行 1 列</option>
|
|
<option value="2">每行 2 列</option>
|
|
<option value="3">每行 3 列</option>
|
|
<option value="4">每行 4 列</option>
|
|
<option value="5">每行 5 列</option>
|
|
</select>
|
|
</div>
|
|
<!-- 列边距 -->
|
|
<div v-else-if="type == 'colmargin'">
|
|
<label>边距:</label>
|
|
<select class="form-control" v-model="item.params[type]">
|
|
<option value="10">5像素（10rpx）</option>
|
|
<option value="15">7.5像素（15rpx）</option>
|
|
<option value="20">10像素（20rpx）</option>
|
|
<option value="25">12.5像素（25rpx）</option>
|
|
<option value="30">15像素（30rpx）</option>
|
|
</select>
|
|
</div>
|
|
<!-- 判断开关 -->
|
|
<div v-else-if="type == 'show'">
|
|
<label>通知栏图标:</label>
|
|
<select class="form-control" v-model="item.params[type]">
|
|
<option value="true">显示</option>
|
|
<option value="">不显示</option>
|
|
</select>
|
|
</div>
|
|
<div v-else-if="type == 'showTime'">
|
|
<label>文章日期:</label>
|
|
<select class="form-control" v-model="item.params[type]">
|
|
<option value="true">显示</option>
|
|
<option value="false">不显示</option>
|
|
</select>
|
|
</div>
|
|
<div v-else-if="type == 'showView'">
|
|
<label>浏览次数:</label>
|
|
<select class="form-control" v-model="item.params[type]">
|
|
<option value="true">显示</option>
|
|
<option value="false">不显示</option>
|
|
</select>
|
|
</div>
|
|
<!-- 搜索颜色选项 -->
|
|
<div class="form-inline" v-else-if="type == 'searchBackground'">
|
|
<label>搜索条背景:</label>
|
|
<input type="text" class="form-control" v-model="item.params[type]"> <input id="color" class="form-control"
|
|
type="color" v-model="item.params[type]">
|
|
</div>
|
|
<!-- 线段颜色 -->
|
|
<div class="form-inline" v-else-if="type == 'lineBackground'">
|
|
<label>线段颜色:</label>
|
|
<input type="text" class="form-control" v-model="item.params[type]"> <input id="color" class="form-control"
|
|
type="color" v-model="item.params[type]">
|
|
</div>
|
|
<!-- 分隔字体颜色 -->
|
|
<div class="form-inline" v-else-if="type == 'lineTextColor'">
|
|
<label>字体颜色:</label>
|
|
<input type="text" class="form-control" v-model="item.params[type]"> <input id="color" class="form-control"
|
|
type="color" v-model="item.params[type]">
|
|
</div>
|
|
<!-- 分隔字体背景颜色选项 -->
|
|
<div class="form-inline" v-else-if="type == 'lineTextBackground'">
|
|
<label>字体背景颜色:</label>
|
|
<input type="text" class="form-control" v-model="item.params[type]"> <input id="color" class="form-control"
|
|
type="color" v-model="item.params[type]">
|
|
</div>
|
|
<!-- 拼团组件背景图片 -->
|
|
<div class="form-inline" v-else-if="type == 'groupsBackground'">
|
|
<label>拼团组件背景图片:</label>
|
|
<div class="wanl-upload">
|
|
<input class="form-control" type="text" v-model="item.params[type]" placeholder="点击右侧按钮上传组件背景">
|
|
<input type="file" :id="type+index" :ref="type+index" @change="paramsUpload($event,index,type)" accept="image/*" style="display: none;">
|
|
<label :for="type+index" class="btn btn-info">
|
|
<i class="fa fa-upload"></i> 上传
|
|
</label>
|
|
</div>
|
|
<ul v-if="item.params[type]" class="row list-inline plupload-preview">
|
|
<li class="col-xs-3">
|
|
<a class="thumbnail"><img :src="cdnurl(item.params[type])" class="img-responsive"></a>
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
<!-- 拼团标题颜色 -->
|
|
<div class="form-inline" v-else-if="type == 'titleColor'">
|
|
<label>标题字体颜色:</label>
|
|
<input type="text" class="form-control" v-model="item.params[type]"> <input id="color" class="form-control"
|
|
type="color" v-model="item.params[type]">
|
|
</div>
|
|
<!-- 拼团描述颜色 -->
|
|
<div class="form-inline" v-else-if="type == 'infoColor'">
|
|
<label>描述字体颜色:</label>
|
|
<input type="text" class="form-control" v-model="item.params[type]"> <input id="color" class="form-control"
|
|
type="color" v-model="item.params[type]">
|
|
</div>
|
|
<!-- 图片布局方式 -->
|
|
<div v-else-if="type == 'imgLayout'">
|
|
<label>图片布局方式:</label>
|
|
<select class="form-control" v-model="item.params[type]">
|
|
<option value="1">大图热点</option>
|
|
<option value="2">堆积两列</option>
|
|
<option value="3">堆积三列</option>
|
|
<option value="4">堆积四列</option>
|
|
<option value="5">堆积五列</option>
|
|
<option value="11">橱窗一</option>
|
|
<option value="12">橱窗二</option>
|
|
<option value="13">橱窗三</option>
|
|
<option value="14">橱窗四</option>
|
|
<option value="15">橱窗五</option>
|
|
<option value="16">橱窗六</option>
|
|
<option value="17">橱窗七</option>
|
|
</select>
|
|
</div>
|
|
<!-- 菜单类型 -->
|
|
<div v-else-if="type == 'menuType'">
|
|
<label>菜单类型:</label>
|
|
<select class="form-control" v-model="item.params[type]">
|
|
<option value="icon">图标菜单</option>
|
|
<option value="image">图片菜单</option>
|
|
</select>
|
|
</div>
|
|
<!-- 图标大小 -->
|
|
<div class="form-inline" v-else-if="type == 'menuIconSize'">
|
|
<div v-show="item.params.menuType == 'icon'">
|
|
<label>图标大小:</label>
|
|
<input type="text" class="form-control" v-model="item.params[type]">
|
|
</div>
|
|
</div>
|
|
<!-- 默认表单 -->
|
|
<div v-else>
|
|
<label>{{getParameter(type)}}:</label>
|
|
<input type="text" class="form-control" v-model="item.params[type]">
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<!-- 组件样式 -->
|
|
<div class="tab-pane fade" id="style">
|
|
<p class="bg-danger text-danger"><strong>提示：</strong>操作本项需掌握前端CSS基础，不了解前端的同学，请保持默认样式，不建议您追加 / 修改样式；</p>
|
|
<div class="form-group" v-for="(styles,type) in item.style" :key="type">
|
|
<label>
|
|
<div>{{type}} {{moduleStyle[type].name}}:</div>
|
|
<div class="del" @click="delStyle(index,type)"><i class="wlIcon wlIcon-31guanbi"></i></div>
|
|
</label>
|
|
<div class="form-inline" v-if="type == 'color' || type == 'background-color'">
|
|
<input type="text" class="form-control" v-model="item.style[type]"> <input id="color" class="form-control"
|
|
type="color" v-model="item.style[type]">
|
|
</div>
|
|
<div v-else>
|
|
<input type="text" class="form-control" v-model="item.style[type]">
|
|
</div>
|
|
</div>
|
|
<div class="dropdown">
|
|
<a class="btn btn-sm btn-success btn-append" data-target="#" data-toggle="dropdown" role="button"
|
|
aria-haspopup="true" aria-expanded="false"><i class="fa fa-plus"></i> 追加新样式</a>
|
|
<ul class="dropdown-menu">
|
|
<li v-for="(item,type) in moduleStyle" :key="type">
|
|
<a @click="addStyle(index,type,item.default)">{{item.name}}</a>
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<script src="/assets/js/require.min.js" data-main="/assets/js/require-wanlshop.min.js?v=<?php echo htmlentities($site['version'] ?? ''); ?>"></script>
|
|
</body>
|
|
<?php else: ?>
|
|
<body class="inside-header inside-aside is-dialog">
|
|
<div id="main" role="main">
|
|
<div class="tab-content tab-addtabs">
|
|
<div id="content">
|
|
<div class="row">
|
|
<div class="col-xs-12 col-sm-12 col-md-12 col-lg-12">
|
|
<div class="content">
|
|
<link href="/assets/addons/wanlshop/css/appUI.css?v=<?php echo $site['version']; ?>" rel="stylesheet">
|
|
<link href="/assets/addons/wanlshop/css/page.css?v=<?php echo $site['version']; ?>" rel="stylesheet">
|
|
<link href="//at.alicdn.com/t/font_1394144_afdog2ap4uo.css?v=<?php echo $site['version']; ?>" rel="stylesheet">
|
|
<div class="panel panel-default panel-intro" id="app" v-cloak>
|
|
<div class="panel-body" style="padding: 0;">
|
|
<div id="myTabContent" class="tab-content">
|
|
<div class="tab-pane fade active in" id="one">
|
|
<div class="widget-body no-padding">
|
|
<div class="wanl-page" :class="device">
|
|
<!-- 左侧 -->
|
|
<div class="left">
|
|
<div class="wanl-tool">
|
|
<div class="menu">
|
|
<div class="dropdown">
|
|
<div class="bnt" id="dLabel" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
|
|
<span>{{device}}</span><span class="caret"></span>
|
|
</div>
|
|
<ul class="dropdown-menu" aria-labelledby="dLabel">
|
|
<li><a @click="onDevice('huaweiMate30')">华为Mate30</a></li>
|
|
<li role="separator" class="divider"></li>
|
|
<li><a @click="onDevice('iPhoneX')">iPhoneX</a></li>
|
|
<li><a @click="onDevice('iPhoneXmax')">iPhoneXmax</a></li>
|
|
<li><a @click="onDevice('iPhone7')">iPhone7</a></li>
|
|
<li><a @click="onDevice('iPhone7plus')">iPhone7plus</a></li>
|
|
<li role="separator" class="divider"></li>
|
|
<li><a @click="onDevice('OPPORenoAce')">OPPORenoAce</a></li>
|
|
<li><a @click="onDevice('vivoNEX3')">vivoNEX3</a></li>
|
|
<li><a @click="onDevice('xiaomi9Pro')">xiaomi9Pro</a></li>
|
|
</ul>
|
|
</div>
|
|
<div class="dropdown">
|
|
<div class="bnt" id="dLabel2" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
|
|
<span>{{signal}}</span><span class="caret"></span>
|
|
</div>
|
|
<ul class="dropdown-menu" aria-labelledby="dLabel2">
|
|
<li><a @click="onSignal('WIFI')">WIFI</a></li>
|
|
<li role="separator" class="divider"></li>
|
|
<li><a @click="onSignal('3G')">3G</a></li>
|
|
<li><a @click="onSignal('4G')">4G</a></li>
|
|
<li><a @click="onSignal('5G')">5G</a></li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
<div class="Button">
|
|
<div class="dropdown">
|
|
<div @click="historyPage" class="btn btn-info btn-sm"><i class="fa fa-cloud"></i> 云端历史</div>
|
|
<div @click="publish()" class="btn btn-success btn-sm"><i class="fa fa-paper-plane"></i> 保存页面</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<!-- 手机 -->
|
|
<div class="frame">
|
|
<div class="preview">
|
|
<div ref="parant" class="page" :style="{'background-color': pageData.page.style.pageBackgroundColor,'background-repeat': pageData.page.style.pageBackgroundRepeat,'background-image': 'url('+pageData.page.style.pageBackgroundImage+')'}">
|
|
<!-- 导航 -->
|
|
<div class="navigation" :class="{action: type == 'page'}" :style="{'background-color': pageData.page.style.navigationBarBackgroundColor,'background-image': 'url('+pageData.page.style.navigationBackgroundImage+')',color:pageData.page.style.navigationBarTextStyle}" @click="onType('page')">
|
|
<div class="Statusbar">
|
|
<div class="time"> {{nowTime}} </div>
|
|
<div class="bangs">
|
|
<div class="sub"></div>
|
|
</div>
|
|
<div class="device">
|
|
<i class="wlIcon wlIcon-xinhao"></i>
|
|
<i v-if="signal == '3G'">3G</i>
|
|
<i v-if="signal == '4G'">4G</i>
|
|
<i v-if="signal == '5G'">5G</i>
|
|
<i v-if="signal == 'WIFI'" class="wlIcon wlIcon-WIFI"></i>
|
|
<i class="wlIcon wlIcon-dianchifull"></i>
|
|
</div>
|
|
</div>
|
|
<div class="page-head">
|
|
<span class="wanlicon">
|
|
<i class="wlIcon wlIcon-fanhui1"></i>
|
|
</span>
|
|
<span class="title">
|
|
{{pageData.page.params.navigationBarTitleText}}
|
|
</span>
|
|
<span class="wanlicon">
|
|
<i class="wlIcon wlIcon-fenxiang"></i>
|
|
</span>
|
|
</div>
|
|
</div>
|
|
<!-- 模块&拖动 -->
|
|
<wanldraggable class="draggable" v-model="pageData.item" v-bind="{animation:500}">
|
|
<div class="wanlshop" v-for="(item,index) in pageData.item" :key="index" @click="onType(index)" :class="{action: type == index}">
|
|
<!-- 轮播组件 -->
|
|
<div class="banner" v-if="item.type == 'banner'" :style="item.style">
|
|
<img :src="cdnurl(item.data[0].image)" :style="{height: item.params.height}">
|
|
<div class="indicator">
|
|
<div class="item">
|
|
<span v-for="indic in item.data"></span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<!-- 广告轮播组件 -->
|
|
<div class="advertBanner" v-if="item.type == 'advertBanner'" :style="item.style">
|
|
<img src="/assets/addons/wanlshop/img/page/advert-banner.png" :style="{height: item.params.height}">
|
|
<div class="indicator">
|
|
<div class="item">
|
|
<span v-for="indic in item.data"></span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<!-- 图片櫥窗 -->
|
|
<div class="image" :class="'layout-' + item.params.imgLayout" v-if="item.type == 'image'" :style="[{ padding: item.params.imgPaddingTb + ' ' + item.params.imgPaddingLf },item.style]">
|
|
<div class="item" v-for="image in item.data" :style="{ padding: item.params.imgPaddingTb + ' ' + item.params.imgPaddingLf }">
|
|
<img :src="cdnurl(image.image)">
|
|
</div>
|
|
</div>
|
|
<!-- 广告单图 -->
|
|
<div class="advertImage" v-if="item.type == 'advertImage'" :style="item.style">
|
|
<img src="/assets/addons/wanlshop/img/page/advert-image.png">
|
|
</div>
|
|
<!-- 视频 -->
|
|
<div class="video" v-if="item.type == 'video'" :style="item.style">
|
|
<img :src="cdnurl(item.data[0].image)">
|
|
<div class="play"><i class="wlIcon wlIcon-bofang"></i></div>
|
|
</div>
|
|
<!-- 菜单组件 -->
|
|
<div class="menu" v-if="item.type == 'menu'" :style="item.style">
|
|
<div class="grid text-center" :class="'col-' + item.params.colfive">
|
|
<div class="item" v-for="meun in item.data" :style="{'margin-top':item.params.menuMarginTop}">
|
|
<div v-if="item.params.menuType == 'icon'" class="picicon" :class="meun.bgClass" :style="{
|
|
'height':item.params.menuHeightWidth,
|
|
'width':item.params.menuHeightWidth,
|
|
'margin-bottom':item.params.menuMarginBottom,
|
|
'border-radius':item.params.menuBorderRadius
|
|
}">
|
|
<span :class="meun.iconClass"><i class="wlIcon" :class="meun.icon" :style="{'font-size':item.params.menuIconSize}"></i></span>
|
|
</div>
|
|
<div v-else class="picicon">
|
|
<img :src="cdnurl(meun.iconImage)" :class="meun.bgClass" :style="{
|
|
'height':item.params.menuHeightWidth,
|
|
'width':item.params.menuHeightWidth,
|
|
'margin-bottom':item.params.menuMarginBottom,
|
|
'border-radius':item.params.menuBorderRadius
|
|
}">
|
|
</div>
|
|
<div :style="{'font-size':item.params.menuTextSize}">{{meun.text}}</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<!-- 公告栏 -->
|
|
<div class="notice" v-if="item.type == 'notice'" :style="item.style">
|
|
<i class="wlIcon wlIcon-notice margin-right-xs" v-if="item.params.show"></i><span>{{item.data[0].content}}</span>
|
|
</div>
|
|
<!-- 文章组件 -->
|
|
<div class="article" v-if="item.type == 'article'" :style="item.style">
|
|
<div class="item" v-for="article in item.data">
|
|
<div class="image">
|
|
<img :src="cdnurl(article.image)" >
|
|
</div>
|
|
<div class="article-content">
|
|
<div class="title">
|
|
{{article.articleTitle ? article.articleTitle : '请点击右侧操作栏选择文章'}}
|
|
</div>
|
|
<div class="operate">
|
|
<span v-if="item.params.showTime == 'true'">2020年5月30日20:53</span>
|
|
<span v-if="item.params.showView == 'true'">浏览：100</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<!-- 头条组件 -->
|
|
<div class="headlines" v-if="item.type == 'headlines'" :style="item.style">
|
|
<div class="margin-lr-bj">
|
|
<i class="wlIcon wlIcon-toutiao"></i>
|
|
</div>
|
|
<div class="swiper">
|
|
<div class="list padding-tb-xs">
|
|
<div class="text-sm">
|
|
<div class="cu-tag sm radius bg-gradual-red margin-right-xs">热门</div>
|
|
..客户端自动获取后台头条数据..
|
|
</div>
|
|
<div class="text-sm">
|
|
<div class="cu-tag sm radius bg-gradual-red margin-right-xs">热门</div>
|
|
..客户端自动获取后台头条数据..
|
|
</div>
|
|
</div>
|
|
<div class="pic">
|
|
<img :src="cdnurl(item.data[0].image)" >
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<!-- 搜索栏 -->
|
|
<div class="search" v-if="item.type == 'search'" :style="item.style">
|
|
<div :style="{'border-radius':item.params.searchRadius,'background':item.params.searchBackground,'padding':item.params.searchPadding}">
|
|
<i class="wlIcon wlIcon-sousuo margin-right-xs"></i><span>{{item.data[0].content}}</span>
|
|
</div>
|
|
</div>
|
|
<!-- 活动橱窗 -->
|
|
<div class="category" v-if="item.type == 'activity'" :style="item.style">
|
|
<div class="bg" :style="{backgroundImage: `url(${cdnurl(item.params.activityBackground)})`}">
|
|
<div class="cu-list grid col-2-2_1">
|
|
<div class="cu-item" v-for="(act, index) in item.data" :key="index">
|
|
<div class="name">
|
|
<span class="text-lg" :class="act.textColor">{{getParameter(act.activity)}}</span>
|
|
<div v-if="act.tags" class="cu-tag round sm wanl-bg-orange">
|
|
<span class="wlIcon wlIcon-dot"></span>{{act.tags}}
|
|
</div>
|
|
</div>
|
|
<div v-if="act.describe" class="wanl-gray">{{act.describe}}</div>
|
|
<div class="goods margin-top-bj">
|
|
<div v-for="image in getListNum('col-2-2_1', index)">
|
|
<img src="/assets/addons/wanlshop/img/common/img_default3x.png">
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<!-- 分类橱窗 -->
|
|
<div class="category" v-if="item.type == 'classify'" :style="item.style">
|
|
<div class="bg" :style="{backgroundImage: `url(${cdnurl(item.params.classifyBackground)})`}">
|
|
<div class="cu-list grid" :class="item.params.colStyle">
|
|
<div class="cu-item" v-for="(cat, index) in item.data" :key="index">
|
|
<div class="name">
|
|
<span class="text-lg" :class="cat.textColor">{{categoryName(cat.categoryId)}}</span>
|
|
<div v-if="cat.tags" class="cu-tag round sm wanl-bg-orange">
|
|
<span class="wlIcon wlIcon-dot"></span>{{cat.tags}}
|
|
</div>
|
|
</div>
|
|
<div v-if="cat.describe" class="wanl-gray">{{cat.describe}}</div>
|
|
<div class="goods margin-top-bj">
|
|
<div v-for="image in getListNum(item.params.colStyle, index)">
|
|
<img src="/assets/addons/wanlshop/img/common/img_default3x.png">
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<!-- 类目标题 -->
|
|
<div class="categoryTitle" v-if="item.type == 'categoryTitle'" :style="item.style">
|
|
<div class="text-lg"> <span class="wlIcon margin-right-xs" :class="item.data[0].categoryIcon"></span>
|
|
{{item.data[0].categoryName}} ···</div>
|
|
<div class="text-sm wanl-gray">更多 <span class="wlIcon wlIcon-fanhui2 margin-left-xs"></span> </div>
|
|
</div>
|
|
<!-- 猜你喜欢 -->
|
|
<div class="product" v-if="item.type == 'likes'" :style="item.style" :class="'col-'+ item.params.colthree +'-'+item.params.colmargin" >
|
|
<div class="item">
|
|
<div class="item_pic">
|
|
<img src="/assets/addons/wanlshop/img/common/img_default3x.png">
|
|
</div>
|
|
<div class="item_list padding-bj">
|
|
<div class="margin-bottom-xs">
|
|
<div class="text-df text-cut-2">自动获取...自动获取...自动获取...</div>
|
|
<div class="wanl-orange text-price text-lg">199</div>
|
|
</div>
|
|
<div>
|
|
<div class="text-xs wanl-gray">
|
|
<span class="margin-right-sm">100+条评论</span> <span>100%好评率</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="item">
|
|
<div class="item_pic">
|
|
<img src="/assets/addons/wanlshop/img/common/img_default3x.png">
|
|
</div>
|
|
<div class="item_list padding-bj">
|
|
<div class="margin-bottom-xs">
|
|
<div class="text-df text-cut-2">自动获取...自动获取...自动获取...</div>
|
|
<div class="wanl-orange text-price text-lg">199</div>
|
|
</div>
|
|
<div>
|
|
<div class="text-xs wanl-gray">
|
|
<span class="margin-right-sm">100+条评论</span> <span>100%好评率</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<!-- 商品组件 -->
|
|
<div class="product" v-if="item.type == 'goods'" :style="item.style" :class="'col-'+ item.params.colthree +'-'+item.params.colmargin" >
|
|
<div class="item" v-for="goods in item.data">
|
|
<div class="item_pic">
|
|
<img src="/assets/addons/wanlshop/img/common/img_default3x.png">
|
|
</div>
|
|
<div class="item_list padding-bj">
|
|
<div class="margin-bottom-xs">
|
|
<div class="text-df text-cut-2">标题标题标题标题标题标题标题标题标题标题标题标题标题标题标题标题</div>
|
|
<div class="wanl-orange text-price text-lg">{{Math.round(Math.random()*10+10)}}.00</div>
|
|
</div>
|
|
<div class="">
|
|
<div class="margin-bottom-xs">
|
|
<div class="cu-tag sm round bg-gradual-red">新品</div>
|
|
<div class="cu-tag sm round bg-white">领券66减6</div>
|
|
</div>
|
|
<div class="text-xs wanl-gray">
|
|
<span class="margin-right-sm">{{Math.round(Math.random()*10+10)}}条评论</span> <span>100%好评率</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<!-- 拼团组件 -->
|
|
<div class="groups" v-if="item.type == 'groups'" :style="item.style" :class="`col-3-${item.params.colmargin}`">
|
|
<div class="bg" :style="{backgroundImage: `url(${cdnurl(item.params.groupsBackground)})`}">
|
|
<div class="head">
|
|
<div class="title">
|
|
<span class="margin-right-sm" :style="{color: item.params.titleColor, fontSize: item.params.titleFontSize}">{{item.params.titleText}}</span>
|
|
<span :style="{color: item.params.infoColor, fontSize: item.params.infoFontSize}">{{item.params.infoText}}</span>
|
|
</div>
|
|
<div class="more">
|
|
<span class="margin-right-xs">更多</span><i class="wlIcon wlIcon-fanhui2"></i>
|
|
</div>
|
|
</div>
|
|
<div class="main">
|
|
<div class="item" v-for="groups in 6">
|
|
<div class="item_pic">
|
|
<img src="/assets/addons/wanlshop/img/common/img_default3x.png">
|
|
</div>
|
|
<div class="list" style="width: 100%;">
|
|
<div class="text-space text-sm">
|
|
自动获取拼团
|
|
</div>
|
|
<div class="text-space text-orange text-xs">
|
|
描述专业电商供应厂家
|
|
</div>
|
|
<div class="flex">
|
|
<div class="price">
|
|
<span class="text-price text-lg text-orange">{{Math.round(Math.random()*10+10)}}.00</span>
|
|
</div>
|
|
<div class="cu-tag round sm wanl-bg-orange">拼</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<!-- 砍价组件 -->
|
|
<div class="bargain" v-if="item.type == 'bargain'" :style="item.style">
|
|
<span>砍价组件-下个版本发布，敬请期待</span>
|
|
</div>
|
|
<!-- 秒杀组件 -->
|
|
<div class="seckill" v-if="item.type == 'seckill'" :style="item.style">
|
|
<span>秒杀组件-下个版本发布，敬请期待</span>
|
|
</div>
|
|
<!-- 搜索栏 -->
|
|
<div class="empty" v-if="item.type == 'empty'" :style="item.style">
|
|
</div>
|
|
<!-- 分隔符 -->
|
|
<div class="division" v-if="item.type == 'division'" :style="item.style">
|
|
<div class="line" :style="{'width':item.params.lineWidth,'height':item.params.lineHeight,'background':item.params.lineBackground}"></div>
|
|
<div class="linetext" :style="{'color':item.params.lineTextColor,'font-size':item.params.lineTextSize,'line-height':item.params.lineTextSize,'background':item.params.lineTextBackground,'padding':item.params.lineTextPadding}">
|
|
{{item.params.lineText}}
|
|
</div>
|
|
</div>
|
|
<div class="sub-del" @click="delModule(index)"><i class="wlIcon wlIcon-31guanbi"></i></div>
|
|
</div>
|
|
</wanldraggable>
|
|
</div>
|
|
</div>
|
|
<div class="template">
|
|
<div class="template-title">
|
|
<span><i></i>自定义组件</span>
|
|
<!-- <span>更多 <span class="wlIcon wlIcon-fanhuigengduo"></span></span> -->
|
|
</div>
|
|
<div class="control">
|
|
<!-- 模板分组 -->
|
|
<div class="element" v-for="(item,index) in module" :key="index">
|
|
<div class="element-name"> {{getParameter(index)}}</div>
|
|
<div class="element-row">
|
|
<div v-for="element in item" @click="addTemplate(element)">
|
|
<i class="wlIcon" :class="'wlIcon-'+element.type"></i>
|
|
<span>{{element.name}}</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<!-- 编辑器 -->
|
|
<div class="editor">
|
|
<div class="bs-example bs-example-tabs" v-if="type == 'page'">
|
|
<ul class="nav nav-tabs" role="tablist">
|
|
<li class="active"><a href="#home" data-toggle="tab" aria-expanded="true">页面配置</a></li>
|
|
</ul>
|
|
<div class="tab-content">
|
|
<div class="tab-pane fade active in" id="home">
|
|
<p class="bg-info text-info"><strong>技巧：</strong>点击模块后，无法找到此页面请点击左侧导航栏即可返回！</p>
|
|
<div class="form-group">
|
|
<label>页面名称:</label>
|
|
<input type="text" class="form-control" v-model="pageData.name">
|
|
</div>
|
|
<div class="form-group">
|
|
<label>导航栏标题:</label>
|
|
<input type="text" class="form-control" v-model="pageData.page.params.navigationBarTitleText">
|
|
</div>
|
|
|
|
<h5 class="page-header"></h5>
|
|
<div class="form-group">
|
|
<label>导航栏背景图:</label>
|
|
<div class="wanl-upload">
|
|
<input class="form-control" type="text" v-model="pageData.page.style.navigationBackgroundImage">
|
|
<input type="file" id="navigationBackground" accept="image/*" @change="changeImage($event,'navigationBackgroundImage')" style="display:none" >
|
|
<label for="navigationBackground" class="btn btn-info">
|
|
<i class="fa fa-upload"></i> 上传
|
|
</label>
|
|
</div>
|
|
</div>
|
|
<div class="form-group">
|
|
<label>导航栏背景:</label>
|
|
<div class="form-inline">
|
|
<input type="text" class="form-control" v-model="pageData.page.style.navigationBarBackgroundColor"> <input
|
|
id="color" class="form-control" type="color" v-model="pageData.page.style.navigationBarBackgroundColor">
|
|
</div>
|
|
</div>
|
|
<div class="form-group">
|
|
<label>导航前景色:</label>
|
|
<select class="form-control" v-model="pageData.page.style.navigationBarTextStyle">
|
|
<option value="#ffffff">浅色（白色）</option>
|
|
<option value="#000000">深色（黑色）</option>
|
|
</select>
|
|
</div>
|
|
<h5 class="page-header"></h5>
|
|
<div class="form-group">
|
|
<label>页面背景图:</label>
|
|
<div class="wanl-upload">
|
|
<input class="form-control" type="text" v-model="pageData.page.style.pageBackgroundImage">
|
|
<input type="file" id="pageBackground" accept="image/*" @change="changeImage($event,'pageBackgroundImage')" style="display:none" >
|
|
<label for="pageBackground" class="btn btn-info">
|
|
<i class="fa fa-upload"></i> 上传
|
|
</label>
|
|
</div>
|
|
</div>
|
|
<div class="form-group">
|
|
<label>页面背景:</label>
|
|
<div class="form-inline">
|
|
<input type="text" class="form-control" v-model="pageData.page.style.pageBackgroundColor">
|
|
<input id="color" class="form-control" type="color" v-model="pageData.page.style.pageBackgroundColor">
|
|
</div>
|
|
</div>
|
|
<div class="form-group">
|
|
<label>背景重复:</label>
|
|
<select class="form-control" v-model="pageData.page.style.pageBackgroundRepeat">
|
|
<option value="repeat-x">水平方向重复</option>
|
|
<option value="repeat-y">垂直方向重复</option>
|
|
<option value="no-repeat">不重复</option>
|
|
</select>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- 组件 -->
|
|
<div class="bs-example bs-example-tabs module-example" v-for="(item,index) in pageData.item" :key="index" v-if="type == index">
|
|
<ul class="nav nav-tabs" role="tablist">
|
|
<li class="active"><a href="#home" data-toggle="tab" aria-expanded="true">{{item.name}}数据</a></li>
|
|
<li v-if="item.params !== undefined"><a href="#params" data-toggle="tab" aria-expanded="false">配置参数</a></li>
|
|
<li><a href="#style" data-toggle="tab" aria-expanded="false">CSS样式</a></li>
|
|
</ul>
|
|
<div class="tab-content">
|
|
<!-- 组件首页 -->
|
|
<div class="tab-pane fade active in" id="home">
|
|
<div class="add-data" @click="addData(index,item.data[0])">
|
|
<a class="btn btn-sm btn-info btn-append"><i class="fa fa-plus"></i> 追加数据</a>
|
|
</div>
|
|
<p class="bg-info text-info"><strong>注意：</strong>请自行判断是否要添加数据，单数据如单图追加无效！</p>
|
|
<div class="panel-group" id="accordion" role="tablist" aria-multiselectable="true">
|
|
<div class="panel panel-default" v-for="(lists,num) in item.data" :key="num">
|
|
<div class="panel-heading" role="tab" :id="'heading-'+num">
|
|
<h4 class="panel-title" role="button" data-toggle="collapse" data-parent="#accordion" :href="'#collapse-'+num" :aria-expanded="num==0?true:false" :aria-controls="'collapse-'+num">
|
|
{{item.name}} <strong>#{{num+1}}</strong>
|
|
</h4>
|
|
<span @click="delData(index,num)"><i class="wlIcon wlIcon-31guanbi"></i></span>
|
|
</div>
|
|
<div :id="'collapse-'+num" class="panel-collapse collapse" :class="num==0?'in':''" role="tabpanel" :aria-labelledby="'heading-'+num">
|
|
<div class="panel-body">
|
|
<div v-for="(datas,type) in lists" :key="type">
|
|
<!-- 图片上传组件 -->
|
|
<div class="form-group" v-if="type == 'image'">
|
|
<label>图片:</label>
|
|
<div class="wanl-upload">
|
|
<input class="form-control" type="text" v-model="lists[type]" placeholder="点击右侧选择按钮选择图标">
|
|
<input type="file" :id="type+index+num" accept="image/*" @change="dataUpload($event,index,num,type)" :ref="type+index+num" style="display: none;">
|
|
<label :for="type+index+num" class="btn btn-info">
|
|
<i class="fa fa-upload"></i> 上传
|
|
</label>
|
|
</div>
|
|
<ul class="row list-inline plupload-preview">
|
|
<li class="col-xs-3">
|
|
<a class="thumbnail"><img :src="cdnurl(lists[type])" class="img-responsive"></a>
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
<!-- 提示 -->
|
|
<div class="tips" v-else-if="type == 'tips'">
|
|
{{datas}}
|
|
</div>
|
|
<!-- 提示2 -->
|
|
<div class="title form-group" v-else-if="type == 'title'">
|
|
<span class="text-green">{{datas}}</span>
|
|
</div>
|
|
<!-- 图片上传组件 -->
|
|
<div class="form-group" v-else-if="type == 'iconImage'">
|
|
<div v-show="item.params.menuType == 'image'">
|
|
<label>菜单图片:</label>
|
|
<div class="wanl-upload">
|
|
<input class="form-control" type="text" v-model="lists[type]" placeholder="点击右侧选择按钮选择图标">
|
|
<input type="file" :id="type+index+num" accept="image/*" @change="dataUpload($event,index,num,type)" :ref="type+index+num" style="display: none;">
|
|
<label :for="type+index+num" class="btn btn-info">
|
|
<i class="fa fa-upload"></i> 上传
|
|
</label>
|
|
</div>
|
|
<ul class="row list-inline plupload-preview">
|
|
<li class="col-xs-3">
|
|
<a class="thumbnail"><img :src="cdnurl(lists[type])" class="img-responsive"></a>
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
<!-- icon类名 -->
|
|
<div class="form-group" v-else-if="type == 'categoryIcon'">
|
|
<label>图标类名:</label>
|
|
<div class="wanl-upload">
|
|
<input type="text" class="form-control" v-model="lists[type]" placeholder="点击右侧选择按钮选择图标">
|
|
<button @click="iconLink(index, num, type, 'false')" class="btn btn-info wanl-link"><i class="fa fa-bars"></i> 选择 </button>
|
|
</div>
|
|
</div>
|
|
<!-- icon类名 -->
|
|
<div class="form-group" v-else-if="type == 'icon'">
|
|
<div v-show="item.params.menuType == 'icon'">
|
|
<label>图标类名:</label>
|
|
<div class="wanl-upload">
|
|
<input type="text" class="form-control" v-model="lists[type]" placeholder="点击右侧选择按钮选择图标">
|
|
<button @click="iconLink(index, num, type, 'false')" class="btn btn-info wanl-link"><i class="fa fa-bars"></i> 选择 </button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<!-- icon颜色 -->
|
|
<div class="form-group" v-else-if="type == 'iconClass'">
|
|
<div v-show="item.params.menuType == 'icon'">
|
|
<label>icon颜色:</label>
|
|
<select class="form-control" v-model="lists[type]">
|
|
<option value="text-white">白色</option>
|
|
<option value="wanl-black">纯黑</option>
|
|
<option value="wanl-pip">标准黑</option>
|
|
<option value="wanl-gray-dark">深灰</option>
|
|
<option value="wanl-gray-light">浅灰</option>
|
|
<option value="wanl-text-white">白色（渐变）</option>
|
|
<option value="wanl-orange">橙色</option>
|
|
<option value="wanl-red">红色</option>
|
|
<option value="text-yellow">黄色</option>
|
|
<option value="text-green">绿色</option>
|
|
<option value="text-blue">蓝色</option>
|
|
<option value="text-olive">军绿色</option>
|
|
<option value="text-cyan">青色</option>
|
|
<option value="text-purple">紫色</option>
|
|
<option value="text-mauve">洋紫</option>
|
|
<option value="text-pink">粉色</option>
|
|
<option value="text-brown">棕色</option>
|
|
<option value="wanl-text-red">红色（渐变）</option>
|
|
<option value="wanl-text-yellow">黄色（渐变）</option>
|
|
<option value="wanl-text-orange">橙色（渐变）</option>
|
|
<option value="wanl-text-violet">紫罗兰（渐变）</option>
|
|
<option value="wanl-text-blue">蓝色（渐变）</option>
|
|
<option value="wanl-text-light-blue">浅蓝色（渐变）</option>
|
|
<option value="wanl-text-pink">粉色（渐变）</option>
|
|
<option value="wanl-text-green">绿色（渐变）</option>
|
|
<option value="wanl-text-purple">紫色（渐变）</option>
|
|
</select>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- 背景样式下拉 -->
|
|
<div class="form-group" v-else-if="type == 'bgClass'">
|
|
<label>背景:</label>
|
|
<select class="form-control" v-model="lists[type]">
|
|
<option value="wanl-bg-transparent">透明（无）</option>
|
|
<option value="bg-white">白色</option>
|
|
<option value="wanl-bg-redorange">橘红色（渐变）</option>
|
|
<option value="wanl-bg-orange">橙色（渐变）</option>
|
|
<option value="wanl-bg-pink">粉色（渐变）</option>
|
|
<option value="wanl-bg-blue">蓝色（渐变）</option>
|
|
<option value="bg-gradual-yellow">黄色（渐变）</option>
|
|
<option value="bg-gradual-red">洋红（渐变）</option>
|
|
<option value="bg-gradual-orange">黄橙（渐变）</option>
|
|
<option value="bg-gradual-green">草绿（渐变）</option>
|
|
<option value="bg-gradual-purple">紫色（渐变）</option>
|
|
<option value="bg-gradual-pink">洋紫（渐变）</option>
|
|
<option value="bg-gradual-blue">蓝绿（渐变）</option>
|
|
<option value="bg-red">红色</option>
|
|
<option value="bg-orange">橙色</option>
|
|
<option value="bg-yellow">黄色</option>
|
|
<option value="bg-olive">军绿</option>
|
|
<option value="bg-green">绿色</option>
|
|
<option value="bg-cyan">青色</option>
|
|
<option value="bg-blue">蓝色</option>
|
|
<option value="bg-purple">墨紫</option>
|
|
<option value="bg-mauve">洋紫</option>
|
|
<option value="bg-pink">粉红</option>
|
|
<option value="bg-brown">棕色</option>
|
|
</select>
|
|
</div>
|
|
<!-- 链接地址 -->
|
|
<div class="form-group" v-else-if="type == 'link'">
|
|
<h5 class="page-header"></h5>
|
|
<label>链接地址:</label>
|
|
<div class="wanl-upload">
|
|
<input type="text" class="form-control" v-model="lists[type]" placeholder="点击右侧选择按钮选择链接">
|
|
<button @click="obtainLink(index,num,type,'false')" class="btn btn-primary wanl-link"><i class="fa fa-link"></i> 选择 </button>
|
|
</div>
|
|
</div>
|
|
<!-- 视频地址 -->
|
|
<div class="form-group" v-else-if="type == 'video'">
|
|
<h5 class="page-header"></h5>
|
|
<label>选择视频:</label>
|
|
<div class="wanl-upload">
|
|
<input type="text" class="form-control" v-model="lists[type]" placeholder="点击右侧选择按钮选择链接">
|
|
<button @click="attachmentLink(index,num,type,'false')" class="btn btn-primary wanl-link"><i class="fa fa-list"></i> 选择 </button>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- 类目链接 -->
|
|
<div class="form-group" v-else-if="type == 'categoryLink'">
|
|
<h5 class="page-header"></h5>
|
|
<label>类目链接:</label>
|
|
<div class="wanl-upload">
|
|
<input type="text" class="form-control" v-model="lists[type]" placeholder="点击右侧选择按钮选择类目ID">
|
|
<button @click="categoryLink(index, num, 'false')" class="btn btn-info wanl-link"><i class="fa fa-bars"></i> 选择 </button>
|
|
</div>
|
|
</div>
|
|
<!-- 类目名 -->
|
|
<div class="form-group" v-else-if="type == 'categoryName'">
|
|
<label>类目名:</label>
|
|
<input type="text" class="form-control" v-model="lists[type]" disabled />
|
|
</div>
|
|
<!-- 商品链接 -->
|
|
<div class="form-group" v-else-if="type == 'goodsLink'">
|
|
<label>商品:</label>
|
|
<div class="wanl-upload">
|
|
<input type="text" class="form-control" v-model="lists[type]" placeholder="点击右侧选择按钮选择商品ID">
|
|
<button @click="goodsLink(index,num,type,'false')" class="btn btn-info wanl-link"><i class="fa fa-bars"></i> 选择 </button>
|
|
</div>
|
|
</div>
|
|
<!-- 广告 -->
|
|
<div class="form-group" v-else-if="type == 'advertLink'">
|
|
<label>展示广告:</label>
|
|
<div class="wanl-upload">
|
|
<input type="text" class="form-control" v-model="lists[type]" placeholder="点击右侧选择按钮选择广告ID">
|
|
<button @click="advertLink(index,num,type,'false')" class="btn btn-info wanl-link"><i class="fa fa-bars"></i> 选择 </button>
|
|
</div>
|
|
</div>
|
|
<!-- 文章 -->
|
|
<div class="form-group" v-else-if="type == 'articleLink'">
|
|
<h5 class="page-header"></h5>
|
|
<label>选择文章:</label>
|
|
<div class="wanl-upload">
|
|
<input type="text" class="form-control" v-model="lists[type]" placeholder="点击右侧选择按钮选择文章">
|
|
<button @click="articleLink(index,num,type,'false')" class="btn btn-info wanl-link"><i class="fa fa-bars"></i> 选择 </button>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- 文章标题 -->
|
|
<div class="form-group hidden" v-else-if="type == 'articleTitle'">
|
|
<label>已选文章:</label>
|
|
<input type="text" class="form-control" v-model="lists[type]" disabled="disabled">
|
|
</div>
|
|
|
|
<!-- 内容 -->
|
|
<div class="form-group" v-else-if="type == 'content'">
|
|
<label>内容:</label>
|
|
<input type="text" class="form-control" v-model="lists[type]" placeholder="请输入内容">
|
|
</div>
|
|
|
|
<!-- 活动类型 -->
|
|
<div class="form-group" v-else-if="type == 'activity'">
|
|
<label>活动类型:</label>
|
|
<select class="form-control" v-model="lists[type]">
|
|
<option value="distribution">分销</option>
|
|
<option value="group">团购拼团</option>
|
|
<option value="bargain">砍价</option>
|
|
<option value="rush">限时抢购</option>
|
|
<option value="coupon">领券中心</option>
|
|
</select>
|
|
</div>
|
|
<!-- 字体颜色 -->
|
|
<div class="form-group" v-else-if="type == 'textColor'">
|
|
<label>字体颜色:</label>
|
|
<select class="form-control" v-model="lists[type]">
|
|
<option value="wanl-black">黑色</option>
|
|
<option value="wanl-pip">标准黑</option>
|
|
<option value="wanl-orange">橙色</option>
|
|
<option value="wanl-red">万联红</option>
|
|
<option value="text-red">红色</option>
|
|
<option value="text-yellow">黄色</option>
|
|
<option value="text-green">绿色</option>
|
|
<option value="text-blue">蓝色</option>
|
|
<option value="text-olive">军绿色</option>
|
|
<option value="text-cyan">青色</option>
|
|
<option value="text-purple">紫色</option>
|
|
<option value="text-mauve">洋紫</option>
|
|
<option value="text-pink">粉色</option>
|
|
<option value="text-brown">棕色</option>
|
|
<option value="wanl-gray-dark">深灰</option>
|
|
<option value="wanl-gray-light">浅灰</option>
|
|
</select>
|
|
</div>
|
|
<!-- 类目 -->
|
|
<div class="form-group" v-else-if="type == 'categoryId'">
|
|
<label>选择类目:</label>
|
|
<select class="form-control" v-model="lists[type]">
|
|
<option v-for="cate in pageCategory" :value ="cate.id">{{mergeSpace(cate.spacer)}} {{cate.name}}</option>
|
|
</select>
|
|
</div>
|
|
<!-- 普通表单 -->
|
|
<div class="form-group" v-else>
|
|
<label>{{getParameter(type)}}:</label>
|
|
<input type="text" class="form-control" v-model="lists[type]" :placeholder="'请输入' + getParameter(type)">
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<!-- 组件参数 -->
|
|
<div class="tab-pane fade" id="params">
|
|
<p class="bg-warning text-warning"><strong>提示：</strong>如参数有“px单位”请勿去掉并且只能为px（客户端会自动转换为自适应rpx）</p>
|
|
<div class="form-group" v-for="(params,type) in item.params" :key="type">
|
|
<!-- 指示器样式 -->
|
|
<div v-if="type == 'banstyle'">
|
|
<label>指示器样式:</label>
|
|
<select class="form-control" v-model="item.params[type]">
|
|
<option value="1">圆形</option>
|
|
<option value="2">长形</option>
|
|
</select>
|
|
</div>
|
|
<!-- 布局方式 -->
|
|
<div v-else-if="type == 'colStyle'">
|
|
<label>布局方式:</label>
|
|
<select class="form-control" v-model="item.params[type]">
|
|
<option value="col-1-2-2">1-2-2布局</option>
|
|
<option value="col-1-1_2">1-1_2布局</option>
|
|
<option value="col-2-1_2">2-1_2布局</option>
|
|
<option value="col-2-2_1">2-2_1布局</option>
|
|
<option value="col-2-2-1_2">2-2-1_2布局</option>
|
|
<option value="col-2-4">2-4布局</option>
|
|
<option value="col-2-2-4">2-2-4布局</option>
|
|
</select>
|
|
</div>
|
|
<!-- 每行数量 -->
|
|
<div v-else-if="type == 'colthree'">
|
|
<label>每行数量:</label>
|
|
<select class="form-control" v-model="item.params[type]">
|
|
<option value="1">每行 1 列</option>
|
|
<option value="2">每行 2 列</option>
|
|
<option value="3">每行 3 列</option>
|
|
</select>
|
|
</div>
|
|
<!-- 每行数量 -->
|
|
<div v-else-if="type == 'colfive'">
|
|
<label>每行数量:</label>
|
|
<select class="form-control" v-model="item.params[type]">
|
|
<option value="1">每行 1 列</option>
|
|
<option value="2">每行 2 列</option>
|
|
<option value="3">每行 3 列</option>
|
|
<option value="4">每行 4 列</option>
|
|
<option value="5">每行 5 列</option>
|
|
</select>
|
|
</div>
|
|
<!-- 列边距 -->
|
|
<div v-else-if="type == 'colmargin'">
|
|
<label>边距:</label>
|
|
<select class="form-control" v-model="item.params[type]">
|
|
<option value="10">5像素（10rpx）</option>
|
|
<option value="15">7.5像素（15rpx）</option>
|
|
<option value="20">10像素（20rpx）</option>
|
|
<option value="25">12.5像素（25rpx）</option>
|
|
<option value="30">15像素（30rpx）</option>
|
|
</select>
|
|
</div>
|
|
<!-- 判断开关 -->
|
|
<div v-else-if="type == 'show'">
|
|
<label>通知栏图标:</label>
|
|
<select class="form-control" v-model="item.params[type]">
|
|
<option value="true">显示</option>
|
|
<option value="">不显示</option>
|
|
</select>
|
|
</div>
|
|
<div v-else-if="type == 'showTime'">
|
|
<label>文章日期:</label>
|
|
<select class="form-control" v-model="item.params[type]">
|
|
<option value="true">显示</option>
|
|
<option value="false">不显示</option>
|
|
</select>
|
|
</div>
|
|
<div v-else-if="type == 'showView'">
|
|
<label>浏览次数:</label>
|
|
<select class="form-control" v-model="item.params[type]">
|
|
<option value="true">显示</option>
|
|
<option value="false">不显示</option>
|
|
</select>
|
|
</div>
|
|
<!-- 搜索颜色选项 -->
|
|
<div class="form-inline" v-else-if="type == 'searchBackground'">
|
|
<label>搜索条背景:</label>
|
|
<input type="text" class="form-control" v-model="item.params[type]"> <input id="color" class="form-control"
|
|
type="color" v-model="item.params[type]">
|
|
</div>
|
|
<!-- 线段颜色 -->
|
|
<div class="form-inline" v-else-if="type == 'lineBackground'">
|
|
<label>线段颜色:</label>
|
|
<input type="text" class="form-control" v-model="item.params[type]"> <input id="color" class="form-control"
|
|
type="color" v-model="item.params[type]">
|
|
</div>
|
|
<!-- 分隔字体颜色 -->
|
|
<div class="form-inline" v-else-if="type == 'lineTextColor'">
|
|
<label>字体颜色:</label>
|
|
<input type="text" class="form-control" v-model="item.params[type]"> <input id="color" class="form-control"
|
|
type="color" v-model="item.params[type]">
|
|
</div>
|
|
<!-- 分隔字体背景颜色选项 -->
|
|
<div class="form-inline" v-else-if="type == 'lineTextBackground'">
|
|
<label>字体背景颜色:</label>
|
|
<input type="text" class="form-control" v-model="item.params[type]"> <input id="color" class="form-control"
|
|
type="color" v-model="item.params[type]">
|
|
</div>
|
|
<!-- 拼团组件背景图片 -->
|
|
<div class="form-inline" v-else-if="type == 'groupsBackground'">
|
|
<label>拼团组件背景图片:</label>
|
|
<div class="wanl-upload">
|
|
<input class="form-control" type="text" v-model="item.params[type]" placeholder="点击右侧按钮上传组件背景">
|
|
<input type="file" :id="type+index" :ref="type+index" @change="paramsUpload($event,index,type)" accept="image/*" style="display: none;">
|
|
<label :for="type+index" class="btn btn-info">
|
|
<i class="fa fa-upload"></i> 上传
|
|
</label>
|
|
</div>
|
|
<ul v-if="item.params[type]" class="row list-inline plupload-preview">
|
|
<li class="col-xs-3">
|
|
<a class="thumbnail"><img :src="cdnurl(item.params[type])" class="img-responsive"></a>
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
<!-- 拼团标题颜色 -->
|
|
<div class="form-inline" v-else-if="type == 'titleColor'">
|
|
<label>标题字体颜色:</label>
|
|
<input type="text" class="form-control" v-model="item.params[type]"> <input id="color" class="form-control"
|
|
type="color" v-model="item.params[type]">
|
|
</div>
|
|
<!-- 拼团描述颜色 -->
|
|
<div class="form-inline" v-else-if="type == 'infoColor'">
|
|
<label>描述字体颜色:</label>
|
|
<input type="text" class="form-control" v-model="item.params[type]"> <input id="color" class="form-control"
|
|
type="color" v-model="item.params[type]">
|
|
</div>
|
|
<!-- 图片布局方式 -->
|
|
<div v-else-if="type == 'imgLayout'">
|
|
<label>图片布局方式:</label>
|
|
<select class="form-control" v-model="item.params[type]">
|
|
<option value="1">大图热点</option>
|
|
<option value="2">堆积两列</option>
|
|
<option value="3">堆积三列</option>
|
|
<option value="4">堆积四列</option>
|
|
<option value="5">堆积五列</option>
|
|
<option value="11">橱窗一</option>
|
|
<option value="12">橱窗二</option>
|
|
<option value="13">橱窗三</option>
|
|
<option value="14">橱窗四</option>
|
|
<option value="15">橱窗五</option>
|
|
<option value="16">橱窗六</option>
|
|
<option value="17">橱窗七</option>
|
|
</select>
|
|
</div>
|
|
<!-- 菜单类型 -->
|
|
<div v-else-if="type == 'menuType'">
|
|
<label>菜单类型:</label>
|
|
<select class="form-control" v-model="item.params[type]">
|
|
<option value="icon">图标菜单</option>
|
|
<option value="image">图片菜单</option>
|
|
</select>
|
|
</div>
|
|
<!-- 图标大小 -->
|
|
<div class="form-inline" v-else-if="type == 'menuIconSize'">
|
|
<div v-show="item.params.menuType == 'icon'">
|
|
<label>图标大小:</label>
|
|
<input type="text" class="form-control" v-model="item.params[type]">
|
|
</div>
|
|
</div>
|
|
<!-- 默认表单 -->
|
|
<div v-else>
|
|
<label>{{getParameter(type)}}:</label>
|
|
<input type="text" class="form-control" v-model="item.params[type]">
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<!-- 组件样式 -->
|
|
<div class="tab-pane fade" id="style">
|
|
<p class="bg-danger text-danger"><strong>提示：</strong>操作本项需掌握前端CSS基础，不了解前端的同学，请保持默认样式，不建议您追加 / 修改样式；</p>
|
|
<div class="form-group" v-for="(styles,type) in item.style" :key="type">
|
|
<label>
|
|
<div>{{type}} {{moduleStyle[type].name}}:</div>
|
|
<div class="del" @click="delStyle(index,type)"><i class="wlIcon wlIcon-31guanbi"></i></div>
|
|
</label>
|
|
<div class="form-inline" v-if="type == 'color' || type == 'background-color'">
|
|
<input type="text" class="form-control" v-model="item.style[type]"> <input id="color" class="form-control"
|
|
type="color" v-model="item.style[type]">
|
|
</div>
|
|
<div v-else>
|
|
<input type="text" class="form-control" v-model="item.style[type]">
|
|
</div>
|
|
</div>
|
|
<div class="dropdown">
|
|
<a class="btn btn-sm btn-success btn-append" data-target="#" data-toggle="dropdown" role="button"
|
|
aria-haspopup="true" aria-expanded="false"><i class="fa fa-plus"></i> 追加新样式</a>
|
|
<ul class="dropdown-menu">
|
|
<li v-for="(item,type) in moduleStyle" :key="type">
|
|
<a @click="addStyle(index,type,item.default)">{{item.name}}</a>
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<script src="/assets/js/require.min.js" data-main="/assets/js/require-wanlshop.min.js?v=<?php echo htmlentities($site['version'] ?? ''); ?>"></script>
|
|
</body>
|
|
<?php endif; ?>
|
|
|
|
</html>
|
|
|