Yuan/ZangShiQi
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

初始上传

Browse Source
This commit is contained in:
Mr. Hu
2026-04-04 17:27:12 +08:00
parent 4d80d28eb4
commit b7e11774ee
11191 changed files with 1588469 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

3
public/.gitignore vendored Executable file
View File

@@ -0,0 +1,3 @@
h5
weapp
source

14
public/error/error.html Executable file
View File

@@ -0,0 +1,14 @@
<title>您访问的页面无法访问</title>
<div>
<div style="margin-top:10% ">
<div style="text-align:center;margin: auto;">
<img src="SHOP_IMG/404.png" alt="">
</div>
<div style="text-align:center;margin: auto;margin-top: 10px">
<p><span style="font-size:36px ">很抱歉,</span>&nbsp&nbsp&nbsp&nbsp<span style="font-size:24px ">您访问的页面无法访问...</span></p>
</div>
<div style="text-align:center;margin: auto;margin-top: 10px">
<button style="font-size:18px;width:154px;height:44px;border-radius:2px; border:#ff6a00 1px solid; background-color: #ffffff ;color:#FF6A00;cursor: pointer;margin-top: 30px" onClick="javascript :history.go(-1);">返回上一页</button>
</div>
</div>
</div>

1
public/exception/404.html Executable file
View File

@@ -0,0 +1 @@
404 error

49
public/exception/dispatch_jump.tpl Executable file
View File

@@ -0,0 +1,49 @@
{__NOLAYOUT__}<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="viewport" content="width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no"/>
<title>跳转提示</title>
<style type="text/css">
*{ padding: 0; margin: 0; }
body{ background: #fff; font-family: "Microsoft Yahei","Helvetica Neue",Helvetica,Arial,sans-serif; color: #333; font-size: 16px; }
.system-message{padding: 24px 48px; width: 300px; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); }
.system-message h1{ font-size: 100px; font-weight: normal; line-height: 120px; margin-bottom: 12px; }
.system-message .jump{ padding-top: 10px; }
.system-message .jump a{ color: #333; }
.system-message .success,.system-message .error{ line-height: 1.8em; font-size: 36px; }
.system-message .detail{ font-size: 12px; line-height: 20px; margin-top: 12px; display: none; }
</style>
</head>
<body>
<div class="system-message">
<?php switch ($code) {?>
<?php case 1:?>
<h1>:)</h1>
<p class="success"><?php echo(strip_tags($msg));?></p>
<?php break;?>
<?php case 0:?>
<h1>:(</h1>
<p class="error"><?php echo(strip_tags($msg));?></p>
<?php break;?>
<?php } ?>
<p class="detail"></p>
<p class="jump">
页面自动 <a id="href" href="<?php echo($url);?>">跳转</a> 等待时间： <b id="wait"><?php echo($wait);?></b>
</p>
</div>
<script type="text/javascript">
(function(){
var wait = document.getElementById('wait'),
href = document.getElementById('href').href;
var interval = setInterval(function(){
var time = --wait.innerHTML;
if(time <= 0) {
location.href = href;
clearInterval(interval);
};
}, 1000);
})();
</script>
</body>
</html>

537
public/exception/think_exception.tpl Executable file
View File

@@ -0,0 +1,537 @@
<?php
if(!function_exists('parse_padding')){
function parse_padding($source)
{
$length = strlen(strval(count($source['source']) + $source['first']));
return 40 + ($length - 1) * 8;
}
}
if(!function_exists('parse_class')){
function parse_class($name)
{
$names = explode('\\', $name);
return '<abbr title="'.$name.'">'.end($names).'</abbr>';
}
}
if(!function_exists('parse_file')){
function parse_file($file, $line)
{
return '<a class="toggle" title="'."{$file} line {$line}".'">'.basename($file)." line {$line}".'</a>';
}
}
if(!function_exists('parse_args')){
function parse_args($args)
{
$result = [];
foreach ($args as $key => $item) {
switch (true) {
case is_object($item):
$value = sprintf('<em>object</em>(%s)', parse_class(get_class($item)));
break;
case is_array($item):
if(count($item) > 3){
$value = sprintf('[%s, ...]', parse_args(array_slice($item, 0, 3)));
} else {
$value = sprintf('[%s]', parse_args($item));
}
break;
case is_string($item):
if(strlen($item) > 20){
$value = sprintf(
'\'<a class="toggle" title="%s">%s...</a>\'',
htmlentities($item),
htmlentities(substr($item, 0, 20))
);
} else {
$value = sprintf("'%s'", htmlentities($item));
}
break;
case is_int($item):
case is_float($item):
$value = $item;
break;
case is_null($item):
$value = '<em>null</em>';
break;
case is_bool($item):
$value = '<em>' . ($item ? 'true' : 'false') . '</em>';
break;
case is_resource($item):
$value = '<em>resource</em>';
break;
default:
$value = htmlentities(str_replace("\n", '', var_export(strval($item), true)));
break;
}
$result[] = is_int($key) ? $value : "'{$key}' => {$value}";
}
return implode(', ', $result);
}
}
?>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title><?php echo \think\Lang::get('System Error'); ?></title>
<meta name="robots" content="noindex,nofollow" />
<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">
<style>
/* Base */
body {
color: #333;
font: 14px Verdana, "Helvetica Neue", helvetica, Arial, 'Microsoft YaHei', sans-serif;
margin: 0;
padding: 0 20px 20px;
word-break: break-word;
}
h1{
margin: 10px 0 0;
font-size: 28px;
font-weight: 500;
line-height: 32px;
}
h2{
color: #4288ce;
font-weight: 400;
padding: 6px 0;
margin: 6px 0 0;
font-size: 18px;
border-bottom: 1px solid #eee;
}
h3.subheading {
color: #4288ce;
margin: 6px 0 0;
font-weight: 400;
}
h3{
margin: 12px;
font-size: 16px;
font-weight: bold;
}
abbr{
cursor: help;
text-decoration: underline;
text-decoration-style: dotted;
}
a{
color: #868686;
cursor: pointer;
}
a:hover{
text-decoration: underline;
}
.line-error{
background: #f8cbcb;
}
.echo table {
width: 100%;
}
.echo pre {
padding: 16px;
overflow: auto;
font-size: 85%;
line-height: 1.45;
background-color: #f7f7f7;
border: 0;
border-radius: 3px;
font-family: Consolas, "Liberation Mono", Menlo, Courier, monospace;
}
.echo pre > pre {
padding: 0;
margin: 0;
}
/* Layout */
.col-md-3 {
width: 25%;
}
.col-md-9 {
width: 75%;
}
[class^="col-md-"] {
float: left;
}
.clearfix {
clear:both;
}
@media only screen
and (min-device-width : 375px)
and (max-device-width : 667px) {
.col-md-3,
.col-md-9 {
width: 100%;
}
}
/* Exception Info */
.exception {
margin-top: 20px;
}
.exception .message{
padding: 12px;
border: 1px solid #ddd;
border-bottom: 0 none;
line-height: 18px;
font-size:16px;
border-top-left-radius: 4px;
border-top-right-radius: 4px;
font-family: Consolas,"Liberation Mono",Courier,Verdana,"微软雅黑";
}
.exception .code{
float: left;
text-align: center;
color: #fff;
margin-right: 12px;
padding: 16px;
border-radius: 4px;
background: #999;
}
.exception .source-code{
padding: 6px;
border: 1px solid #ddd;
background: #f9f9f9;
overflow-x: auto;
}
.exception .source-code pre{
margin: 0;
}
.exception .source-code pre ol{
margin: 0;
color: #4288ce;
display: inline-block;
min-width: 100%;
box-sizing: border-box;
font-size:14px;
font-family: "Century Gothic",Consolas,"Liberation Mono",Courier,Verdana;
padding-left: <?php echo (isset($source) && !empty($source)) ? parse_padding($source) : 40; ?>px;
}
.exception .source-code pre li{
border-left: 1px solid #ddd;
height: 18px;
line-height: 18px;
}
.exception .source-code pre code{
color: #333;
height: 100%;
display: inline-block;
border-left: 1px solid #fff;
font-size:14px;
font-family: Consolas,"Liberation Mono",Courier,Verdana,"微软雅黑";
}
.exception .trace{
padding: 6px;
border: 1px solid #ddd;
border-top: 0 none;
line-height: 16px;
font-size:14px;
font-family: Consolas,"Liberation Mono",Courier,Verdana,"微软雅黑";
}
.exception .trace ol{
margin: 12px;
}
.exception .trace ol li{
padding: 2px 4px;
}
.exception div:last-child{
border-bottom-left-radius: 4px;
border-bottom-right-radius: 4px;
}
/* Exception Variables */
.exception-var table{
width: 100%;
margin: 12px 0;
box-sizing: border-box;
table-layout:fixed;
word-wrap:break-word;
}
.exception-var table caption{
text-align: left;
font-size: 16px;
font-weight: bold;
padding: 6px 0;
}
.exception-var table caption small{
font-weight: 300;
display: inline-block;
margin-left: 10px;
color: #ccc;
}
.exception-var table tbody{
font-size: 13px;
font-family: Consolas,"Liberation Mono",Courier,"微软雅黑";
}
.exception-var table td{
padding: 0 6px;
vertical-align: top;
word-break: break-all;
}
.exception-var table td:first-child{
width: 28%;
font-weight: bold;
white-space: nowrap;
}
.exception-var table td pre{
margin: 0;
}
/* Copyright Info */
.copyright{
margin-top: 24px;
padding: 12px 0;
border-top: 1px solid #eee;
}
/* SPAN elements with the classes below are added by prettyprint. */
pre.prettyprint .pln { color: #000 } /* plain text */
pre.prettyprint .str { color: #080 } /* string content */
pre.prettyprint .kwd { color: #008 } /* a keyword */
pre.prettyprint .com { color: #800 } /* a comment */
pre.prettyprint .typ { color: #606 } /* a type name */
pre.prettyprint .lit { color: #066 } /* a literal value */
/* punctuation, lisp open bracket, lisp close bracket */
pre.prettyprint .pun, pre.prettyprint .opn, pre.prettyprint .clo { color: #660 }
pre.prettyprint .tag { color: #008 } /* a markup tag name */
pre.prettyprint .atn { color: #606 } /* a markup attribute name */
pre.prettyprint .atv { color: #080 } /* a markup attribute value */
pre.prettyprint .dec, pre.prettyprint .var { color: #606 } /* a declaration; a variable name */
pre.prettyprint .fun { color: red } /* a function name */
</style>
</head>
<body>
<div class="echo">
<?php echo $echo;?>
</div>
<?php if(\think\App::$debug) { ?>
<div class="exception">
<div class="message">
<div class="info">
<div>
<h2>[<?php echo $code; ?>]&nbsp;<?php echo sprintf('%s in %s', parse_class($name), parse_file($file, $line)); ?></h2>
</div>
<div><h1><?php echo nl2br(htmlentities($message)); ?></h1></div>
</div>
</div>
<?php if(!empty($source)){?>
<div class="source-code">
<pre class="prettyprint lang-php"><ol start="<?php echo $source['first']; ?>"><?php foreach ((array) $source['source'] as $key => $value) { ?><li class="line-<?php echo $key + $source['first']; ?>"><code><?php echo htmlentities($value); ?></code></li><?php } ?></ol></pre>
</div>
<?php }?>
<div class="trace">
<h2>Call Stack</h2>
<ol>
<li><?php echo sprintf('in %s', parse_file($file, $line)); ?></li>
<?php foreach ((array) $trace as $value) { ?>
<li>
<?php
// Show Function
if($value['function']){
echo sprintf(
'at %s%s%s(%s)',
isset($value['class']) ? parse_class($value['class']) : '',
isset($value['type']) ? $value['type'] : '',
$value['function'],
isset($value['args'])?parse_args($value['args']):''
);
}
// Show line
if (isset($value['file']) && isset($value['line'])) {
echo sprintf(' in %s', parse_file($value['file'], $value['line']));
}
?>
</li>
<?php } ?>
</ol>
</div>
</div>
<?php } else { ?>
<div class="exception">
<div class="info"><h1><?php echo htmlentities($message); ?></h1></div>
</div>
<?php } ?>
<?php if(!empty($datas)){ ?>
<div class="exception-var">
<h2>Exception Datas</h2>
<?php foreach ((array) $datas as $label => $value) { ?>
<table>
<?php if(empty($value)){ ?>
<caption><?php echo $label; ?><small>empty</small></caption>
<?php } else { ?>
<caption><?php echo $label; ?></caption>
<tbody>
<?php foreach ((array) $value as $key => $val) { ?>
<tr>
<td><?php echo htmlentities($key); ?></td>
<td>
<?php
if(is_array($val) || is_object($val)){
echo htmlentities(json_encode($val, JSON_PRETTY_PRINT));
} else if(is_bool($val)) {
echo $val ? 'true' : 'false';
} else if(is_scalar($val)) {
echo htmlentities($val);
} else {
echo 'Resource';
}
?>
</td>
</tr>
<?php } ?>
</tbody>
<?php } ?>
</table>
<?php } ?>
</div>
<?php } ?>
<?php if(!empty($tables)){ ?>
<div class="exception-var">
<h2>Environment Variables</h2>
<?php foreach ((array) $tables as $label => $value) { ?>
<div>
<?php if(empty($value)){ ?>
<div class="clearfix">
<div class="col-md-3"><strong><?php echo $label; ?></strong></div>
<div class="col-md-9"><small>empty</small></div>
</div>
<?php } else { ?>
<h3 class="subheading"><?php echo $label; ?></h3>
<div>
<?php foreach ((array) $value as $key => $val) { ?>
<div class="clearfix">
<div class="col-md-3"><strong><?php echo htmlentities($key); ?></strong></div>
<div class="col-md-9"><small>
<?php
if(is_array($val) || is_object($val)){
echo htmlentities(json_encode($val, JSON_PRETTY_PRINT));
} else if(is_bool($val)) {
echo $val ? 'true' : 'false';
} else if(is_scalar($val)) {
echo htmlentities($val);
} else {
echo 'Resource';
}
?>
</small></div>
</div>
<?php } ?>
</div>
<?php } ?>
</div>
<?php } ?>
</div>
<?php } ?>
<div class="copyright">
<a title="官方网站" href="http://www.thinkphp.cn">ThinkPHP</a>
<span>V<?php echo THINK_VERSION; ?></span>
<span>{ 十年磨一剑-为API开发设计的高性能框架 }</span>
</div>
<?php if(\think\App::$debug) { ?>
<script>
var LINE = <?php echo $line; ?>;
function $(selector, node){
var elements;
node = node || document;
if(document.querySelectorAll){
elements = node.querySelectorAll(selector);
} else {
switch(selector.substr(0, 1)){
case '#':
elements = [node.getElementById(selector.substr(1))];
break;
case '.':
if(document.getElementsByClassName){
elements = node.getElementsByClassName(selector.substr(1));
} else {
elements = get_elements_by_class(selector.substr(1), node);
}
break;
default:
elements = node.getElementsByTagName();
}
}
return elements;
function get_elements_by_class(search_class, node, tag) {
var elements = [], eles,
pattern = new RegExp('(^|\\s)' + search_class + '(\\s|$)');
node = node || document;
tag = tag || '*';
eles = node.getElementsByTagName(tag);
for(var i = 0; i < eles.length; i++) {
if(pattern.test(eles[i].className)) {
elements.push(eles[i])
}
}
return elements;
}
}
$.getScript = function(src, func){
var script = document.createElement('script');
script.async = 'async';
script.src = src;
script.onload = func || function(){};
$('head')[0].appendChild(script);
}
;(function(){
var files = $('.toggle');
var ol = $('ol', $('.prettyprint')[0]);
var li = $('li', ol[0]);
// 短路径和长路径变换
for(var i = 0; i < files.length; i++){
files[i].ondblclick = function(){
var title = this.title;
this.title = this.innerHTML;
this.innerHTML = title;
}
}
// 设置出错行
var err_line = $('.line-' + LINE, ol[0])[0];
err_line.className = err_line.className + ' line-error';
$.getScript('//cdn.bootcss.com/prettify/r298/prettify.min.js', function(){
prettyPrint();
// 解决Firefox浏览器一个很诡异的问题
// 当代码高亮后，ol的行号莫名其妙的错位
// 但是只要刷新li里面的html重新渲染就没有问题了
if(window.navigator.userAgent.indexOf('Firefox') >= 0){
ol[0].innerHTML = ol[0].innerHTML;
}
});
})();
</script>
<?php } ?>
</body>
</html>

BIN
public/favicon.ico Executable file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 1.1 KiB

BIN
public/static/audio/cashier_order_pay_remind.mp3 Executable file
View File

Binary file not shown.

BIN
public/static/audio/order_pay_remind.mp3 Executable file
View File

Binary file not shown.

992
public/static/css/iconfont.css Executable file
View File

File diff suppressed because one or more lines are too long

BIN
public/static/css/iconfont.ttf Executable file
View File

Binary file not shown.

BIN
public/static/css/iconfont.woff Executable file
View File

Binary file not shown.

BIN
public/static/css/iconfont.woff2 Executable file
View File

Binary file not shown.

18
public/static/css/promotion_detail.css Executable file
View File

@@ -0,0 +1,18 @@
/*活动整体框架*/
.promotion-view{display:flex;flex-wrap:wrap}
.promotion-view-item{width:33.3%;padding-right:10px;box-sizing:border-box;line-height:30px}
.promotion-view-item-line{padding-right:10px;box-sizing:border-box;line-height:30px;overflow: hidden;width: 100%}
.promotion-view-item-custom-label{float:left}
.promotion-view-item-custom-box{float:left}
/*活动商品列表相关*/
.promotion-list-item-title{display:flex;align-items:center}
.promotion-list-item-title .promotion-list-item-title-icon{display:flex;align-items:center;justify-content:center;width:55px;height:55px;margin-right:5px}
.promotion-list-item-title .promotion-list-item-title-icon img{max-height:100%;max-width:100%}
.promotion-list-item-title .promotion-list-item-title-name{flex:1;line-height:1.6}
/*统计相关*/
.promotion-stat-view{display:flex;flex-wrap:wrap}
.promotion-stat-view .promotion-stat-item{width:25%;padding:0 15px 10px 15px;box-sizing:border-box}
.promotion-stat-view .promotion-stat-item .promotion-stat-item-title{color:#909399;font-size:14px;margin-top:5px}
.promotion-stat-view .promotion-stat-item .promotion-stat-item-value{color:#303133;font-size:26px;margin-top:10px}
.todo-list .promotion-stat-item{flex:1;width:0;cursor:pointer}

175
public/static/css/seller_center.css Executable file
View File

@@ -0,0 +1,175 @@
@charset "utf-8";
body { color: #666; background-color: #F9F9F9;}
html,body{ height:100%;}
h2 { font: 24px/40px "microsoft yahei"; color: #27A9E3;}
h1, h2, h3, h4, h5, h6 { font-family: "microsoft yahei"; font-weight: normal;}
h1 { font-size: 32px;}
h2 { font-size: 25px;}
h3 { font-size: 22px;}
h5 { font-size: 15px;}
h6 { font-size: 13px;}
.lighter { font-weight: lighter;}
.bolder { font-weight: bolder;}
h1.block, h2.block, h3.block, h4.block, h5.block, h6.block { margin-bottom: 16px;}
i { font-size: 1.2em;}
a:focus, a:active { text-decoration: none;}
a { color: #0579C6; text-decoration: none; -webkit-transition-property:color; -webkit-transition-duration:0.3s; -webkit-transition-timing-function: ease;}
a:hover { text-decoration: underline; color: #F60;}
.hidden { display: none;}
.center { text-align: center;}
.dark { color: #333333 !important;}
.white { color: #FFFFFF !important;}
.red { color: #DD5A43 !important;}
.light-red { color: #FF7777 !important;}
.blue { color: #27A9E3 !important;}
.light-blue { color: #93CBF9 !important;}
.green { color: #69AA46 !important;}
.light-green { color: #B6E07F !important;}
.orange { color: #FF892A !important;}
.pink { color: #C6699F !important;}
.pink2 { color: #D6487E !important;}
.brown { color: #A52A2A !important;}
.grey { color: #777777 !important;}
/* ---------------------------------------- */
/* 常用宽度、高度、边距、边框属性 */
/* ---------------------------------------- */
.fl { float: left;}
.fr { float: right;}
/* 表单项属性
------------------------------------------- */
input[type="text"], input[type="password"], input.text, input.password { font: 12px/20px Arial; color: #777; background-color: #FFF; vertical-align: top; display: inline-block; height: 20px; padding: 4px; border: solid 1px #CCC; outline: 0 none;}
input[type="text"]:focus, input[type="password"]:focus, input.text:focus, input.password:focus, textarea:focus { color: #333; border-color: #75B9F0; box-shadow: 0 0 0 2px rgba(82, 168, 236, 0.15); outline: 0 none;}
input[type="text"].error, input[type="password"].error, textarea.error { border-color: #ED6C4F; box-shadow: 0 0 0 2px rgba(232, 71, 35, 0.15); outline: 0 none;}
textarea, .textarea { font: 12px/20px Arial; color: #777; background-color: #FFF; vertical-align: top; display: inline-block; height: 60px; padding: 4px; border: solid 1px #CCC; outline: 0 none;}
select { color: #777; background-color: #FFF; height: 30px; vertical-align: middle; *display: inline; padding: 4px; border: solid 1px #CCC; *zoom:1;}
select option { line-height: 20px; display: block; height: 20px; padding: 4px;}
input[type="file"] { line-height:20px; background-color:#FBFBFB; height: 20px; border: solid 1px #D8D8D8; cursor: default;}
.add-on { line-height: 28px; background-color: #E6E6E6; vertical-align: top; display: inline-block; text-align: center; width: 28px; height: 28px; border: solid #CCC; border-width: 1px 1px 1px 0}
.add-on { *display: inline/*IE6,7*/; zoom:1;}
.add-on i { font-size: 14px; color: #666; text-shadow: 1px 1px 0 #FFFFFF; *margin-top: 8px/*IE7*/;}
/*表单验证错误提示文字*/
label.error { font-size: 12px; color: #E84723; margin-left: 8px;}
label.error i { margin-right: 4px;}
.hint { font-size: 12px; line-height: 16px; color: #BBB; margin-top: 10px; }
/* 按钮样式 */
a.ncsc-btn { font: normal 12px/20px "microsoft yahei"; text-decoration: none; color: #777; background-color: #F5F5F5; text-align: center; vertical-align: middle; display: inline-block; height: 20px; padding: 4px 10px; border: solid 1px; border-color: #DCDCDC #DCDCDC #B3B3B3 #DCDCDC; cursor: pointer;}
a:hover.ncsc-btn { text-decoration: none; color: #333; background-color: #E6E6E6; border-color: #CFCFCF #CFCFCF #B3B3B3 #CFCFCF;}
input[type="submit"], input.submit, a.submit { font-size: 12px; font-weight: bold; color: #FFF; text-shadow: 0 -1px 0 rgba(0,0,0,0.1); background-color: #5BB75B; display: block; height: 30px; padding: 0 20px 2px 20px; border: 0; cursor: pointer; }
input[type="submit"]:hover, input.submit:hover, a.submit:hover { text-decoration: none; color: #FFF; background-color: #51A351;}
.order .buyer { color: #555; position:relative; display:block; }
.order .buyer-info { display:none; }
.order .buyer:hover .buyer-info { *width:250px/*IE7*/; display:block; position:absolute; z-index:8; top:-40px; left: 90px; border: solid 1px #FEC500; background-color:#FFF9D4; padding:4px; border-radius:5px;}
.order .buyer-info .con { display:block; overflow:hidden; background: #FFF; padding:5px;}
.order .buyer-info h3 { font-size:1em; font-weight:700; color: #C33700; padding: 5px 0; overflow:hidden;}
.order .buyer-info h3 span { float:left;}
.order .buyer-info dl { color: #777; padding:2px 0; width:220px; overflow:hidden; clear:both;}
.order .buyer-info dt { float:left; width:50px; text-align:right;}
.order .buyer-info dd { float:left; width:140px; text-align:left;}
/*商品列表页-SKU值显示部分*/
td.trigger i { color: #C8C8C8; cursor: pointer; }
td.trigger i:hover { color: #27A9E3;}
/* 商品发布页面相关样式
------------------------------------------- */
/* 发布商品第一步-选择分类 */
.bottom .submit { font: 14px/36px "microsoft yahei"; text-align: center; min-width: 100px; *min-width: auto; height: 36px;}
.bottom a.submit { width: 100px; margin: 0 auto;}
.bottom .submit[disabled="disabled"] { color: #999; text-shadow: none; background-color: #F5F5F5; border: solid 1px; border-color: #DCDCDC #DCDCDC #B3B3B3 #DCDCDC; cursor: default;}
/*商品添加步骤二运费模板样式 by hou*/
/* 发布商品-属性 */
.spec { font-size: 0; *word-spacing:-1px/*IE6、7*/; }
.spec li { font-size: 12px; vertical-align: top; letter-spacing: normal; word-spacing: normal; display: inline-block; *display: inline/*IE6,7*/; width:25%; margin-bottom: 6px; zoom: 1;}
.spec li span { line-height: 30px; vertical-align: middle; margin-right:6px;}
.spec li span .text { vertical-align: middle; width: 130px;}
/* 发布商品-上传主图 */
.sticky #uploadHelp { width: 178px; position: fixed; z-index: 10; top: 75px;}
/* 发布与编辑商品-AJAX图片上传及控制删除 */
.ncsc-select-album { background-color: #FFF; border-top: solid 1px #E6E6E6; padding: 10px;}
/*运费*/
form .red { color:red; border:0px; }
form label.error { color:red; margin-left:5px; }
form input.error { border:red 1px dotted; }
.select_add { float:left; width: 8%;}
/* E 提示的样式*/
.add_link{ margin:0 3px 0 10px;}
/* 从图片空间选择图片 */
#demo, #des_demo { line-height: 0; text-align: center; width: 100%}
#demo .ajaxload,
#des_demo .ajaxload { width: 16px; height: 16px; margin: 80px auto;}
/* 发货 */
.step-title { margin: 12px 0; font-size: 14px; font-weight: 600; color: #555;}
.step-title em { font-weight:600; color:#F60; margin-right:12px;}
/* 店铺
------------------------------------------- */
/* 店铺幻灯片设置 */
.slides{ padding: 0; margin: 0; list-style: none;}
.slides:after { line-height: 0; content: "."; display: block; height: 0; clear: both; visibility: hidden;}
html[xmlns] .slides { display: block;}
*html .slides { height: 1%;}
.no-js .slides > li:first-child { display: block;}
/* 店铺装修
------------------------------------------- */
/*商家入驻表单*/
table.type { width: 700px; border: solid 1px #E6E6E6;}
table.type thead th { color: #555; background-color: #F7F7F7; text-align: center; padding: 4px; border-color: #E6E6E6; }
table.type tbody td { color: #777; text-align: center; padding: 4px; border-color: #E6E6E6;}
table.type tbody td input { width: 60px; padding: 0;}
/* 发货单打印页面 */
.print-layout { font-size:12px; background:#FAFAFA; border: solid 1px #CCC; position:relative;height:297mm; padding:5mm 50mm 5mm 5mm ; margin: 20px auto; box-shadow: 2px 2px 2px rgba(204,204,204,0.5); }
.print-layout .print-btn {background:#FFF; border: solid 1px #ccc; position: absolute; z-index: 3; top:10mm; right:10mm; line-height:32px; padding:5px 10px; border-radius: 5px; box-shadow: 2px 2px 0 rgba(153,153,153,0.2); cursor: pointer;}
.print-layout .print-btn:hover { background: #555; box-shadow: none; border-color: #555;}
.print-layout .print-btn i { background: url(../img/ncsc_bg_img.png)scroll no-repeat 0 -460px; vertical-align: middle; display: inline-block; width: 32px; height: 32px;}
.print-layout .print-btn a { font-family:"microsoft yahei"; font-size: 20px;padding: 0 0 0 10px; color: #555; font-weight:600; display:inline-block; vertical-align: middle;}
.print-layout .print-btn:hover a, .print-layout .print-btn a:hover { color: #FFF; text-decoration:none;}
.print-layout .a5-size, .print-layout .a4-size { background:#FFF; border: dashed 1px #ccc; width: 210mm; position:absolute; top:5mm; left:5mm; padding:1px;}
.print-layout .a5-size { height:148mm; z-index:2;}
.print-layout .a4-size { height:297mm; z-index:1;}
.print-layout .a5-tip, .print-layout .a4-tip{ color:#333; width:37mm; position: absolute; z-index:2; right:8mm;}
.print-layout .a5-tip { top:50mm;}
.print-layout .a4-tip { top:160mm;}
.print-layout dl dt h1 { font-family:"Arial Black", Gadget, sans-serif; font-size:72px; line-height:72px;}
.print-layout dl dt em { font-family: Arial; font-size:11px; line-height:20px; background: #333; color: #FFF; padding: 0 8px; height:20px; border-radius:10px; -webkit-text-size-adjust:none;}
.print-layout .a5-tip dd, .print-layout .a4-tip dd { line-height:24px;}
.print-layout .print-page { width: 210mm; height:297mm; position:absolute; z-index:3; top:5mm; left:5mm; margin:1px; overflow:auto;}
.orderprint { background: #FFF; width: 190mm; height:100%; margin-bottom:20px;padding:10mm 10mm 8mm 10mm; color:#000000; position:relative;}
.orderprint .top { font-family:"microsoft yahei"; line-height:60px; width:190mm; height:60px; overflow:hidden; font-size:24px;}
.orderprint .top .logo { width:200px; height:60px; float:left;}
.orderprint .top .logo-title { text-align: left; width:450px; height: 60px; float:left; margin-left:10px; overflow:hidden;}
.orderprint .top .full-title { width:100%; text-align:center;}
.orderprint .explain { color: #555; line-height: 20px; width:100%;}
.orderprint .seal { position: absolute; top:120px; right:50px; }
.orderprint .page { line-height:18px; color:#999; position: absolute; bottom:0px; left:50%; margin-left:-30px;}
.orderprint table { font-family:Arial, Helvetica, sans-serif; font-size:12px; line-height:18px; width:100%; border-collapse: collapse;}
.buyer-info { margin: 15px 0;}
.order-info thead th { font-weight:normal;background: #E7E7E7; text-align:center; border-bottom: solid 2px #000; border-top: solid 2px #000; padding:2px 0;}
.order-info thead tr td {}
.order-info tbody tr th { background: #F7F7F7; text-align:left; padding:8px 0; text-align:center; font-weight:600; border-bottom: solid 2px #000; border-top: solid 2px #000;}
.order-info tbody tr td { padding: 8px 0; text-align: center;}
.order-info tfoot tr th { border-bottom: solid 2px #000; padding: 6px 0;text-align:left;font-weight:normal;}
.order-info tfoot tr th span { line-height:20px; white-space:nowrap; display:inline-block; width: 24%; height: 20px; padding:0; margin:0; border:0; overflow:hidden; text-overflow:ellipsis; }
.orderprint th{ font-variant:normal; text-align:left}
.w200 {
width: 200px !important;
}
.tl {
text-align: left !important;
}
.w70 {
width: 70px !important;
}
.w40 {
width: 40px !important;
}

31
public/static/ext/colorPicker/css/colorpicker.css Executable file
View File

@@ -0,0 +1,31 @@
@charset "utf-8";
/* colorpicker */
.colorpicker{width:356px;height:176px;overflow:hidden;position:absolute;background:url(../images/colorpicker_background.png);font-family:Arial, Helvetica, sans-serif;display:none;z-index:1000;}
.colorpicker_color{width:150px;height:150px;left:14px;top:13px;position:absolute;background:#f00;overflow:hidden;cursor:crosshair;}
.colorpicker_color div{position:absolute;top:0;left:0;width:150px;height:150px;background:url(../images/colorpicker_overlay.png);}
.colorpicker_color div div{position:absolute;top:0;left:0;width:11px;height:11px;overflow:hidden;background:url(../images/colorpicker_select.png);margin:-5px 0 0 -5px;}
.colorpicker_hue{position:absolute;top:13px;left:171px;width:35px;height:150px;cursor:n-resize;}
.colorpicker_hue div{position:absolute;width:35px;height:9px;overflow:hidden;background:url(../images/colorpicker_indic.gif) left top;margin:-4px 0 0 0;left:0px;}
.colorpicker_new_color{position:absolute;width:60px;height:30px;left:213px;top:13px;background:#f00;}
.colorpicker_current_color{position:absolute;width:60px;height:30px;left:283px;top:13px;background:#f00;}
.colorpicker input{background-color:transparent;border:1px solid transparent;position:absolute;font-size:10px;font-family:Arial, Helvetica, sans-serif;color:#898989;top:4px;right:11px;text-align:right;margin:0;padding:0;height:11px;}
.colorpicker_hex{position:absolute;width:72px;height:22px;background:url(../images/colorpicker_hex.png) top;left:212px;top:142px;}
.colorpicker_hex input{right:6px;}
.colorpicker_field{height:22px;width:62px;background-position:top;position:absolute;}
.colorpicker_field span{position:absolute;width:12px;height:22px;overflow:hidden;top:0;right:0;cursor:n-resize;}
.colorpicker_rgb_r{background-image:url(../images/colorpicker_rgb_r.png);top:52px;left:212px;}
.colorpicker_rgb_g{background-image:url(../images/colorpicker_rgb_g.png);top:82px;left:212px;}
.colorpicker_rgb_b{background-image:url(../images/colorpicker_rgb_b.png);top:112px;left:212px;}
.colorpicker_hsb_h{background-image:url(../images/colorpicker_hsb_h.png);top:52px;left:282px;}
.colorpicker_hsb_s{background-image:url(../images/colorpicker_hsb_s.png);top:82px;left:282px;}
.colorpicker_hsb_b{background-image:url(../images/colorpicker_hsb_b.png);top:112px;left:282px;}
.colorpicker_submit{position:absolute;width:51px;height:22px;background:url(../images/colorpicker_submit.png) top;left:293px;top:142px;overflow:hidden;cursor:pointer;}
.colorpicker_focus{background-position:center;}
.colorpicker_hex.colorpicker_focus{background-position:bottom;}
.colorpicker_submit.colorpicker_focus{background-position:bottom;}
.colorpicker_slider{background-position:bottom;}
/* colorpicker ie6 hack */
.colorpicker_color div{_background:none;_filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='images/colorpicker_overlay.png',sizingMethod='crop');}
.colorpicker_color div div{_background:none;_filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='images/colorpicker_select.png',sizingMethod='crop');}
.colorSelector{position:relative;width:20px;height:20px;/*background:url(../images/select.png);*/border-radius: 3px;border:1px solid #d7d7d7;}
.colorSelector div{position:absolute;top:50%;left:50%;width:16px;height:16px;background:url(../images/select.png) center;border-radius: 3px;margin-top: -8px;margin-left: -8px;}

BIN
public/static/ext/colorPicker/images/colorpicker_background.png Executable file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 1.9 KiB

BIN
public/static/ext/colorPicker/images/colorpicker_hex.png Executable file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 444 B

BIN
public/static/ext/colorPicker/images/colorpicker_hsb_b.png Executable file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 807 B

BIN
public/static/ext/colorPicker/images/colorpicker_hsb_h.png Executable file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 827 B

BIN
public/static/ext/colorPicker/images/colorpicker_hsb_s.png Executable file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 838 B

BIN
public/static/ext/colorPicker/images/colorpicker_indic.gif Executable file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 86 B

BIN
public/static/ext/colorPicker/images/colorpicker_overlay.png Executable file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 8.3 KiB

BIN
public/static/ext/colorPicker/images/colorpicker_rgb_b.png Executable file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 807 B

BIN
public/static/ext/colorPicker/images/colorpicker_rgb_g.png Executable file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 884 B

BIN
public/static/ext/colorPicker/images/colorpicker_rgb_r.png Executable file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 825 B

BIN
public/static/ext/colorPicker/images/colorpicker_select.png Executable file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 151 B

BIN
public/static/ext/colorPicker/images/colorpicker_submit.png Executable file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 1.2 KiB

BIN
public/static/ext/colorPicker/images/custom_background.png Executable file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 1.9 KiB

BIN
public/static/ext/colorPicker/images/custom_hex.png Executable file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 424 B

BIN
public/static/ext/colorPicker/images/custom_hsb_h.png Executable file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 775 B

BIN
public/static/ext/colorPicker/images/custom_hsb_s.png Executable file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 943 B

BIN
public/static/ext/colorPicker/images/custom_indic.gif Executable file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 86 B

BIN
public/static/ext/colorPicker/images/custom_rgb_b.png Executable file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 787 B

BIN
public/static/ext/colorPicker/images/custom_rgb_g.png Executable file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 851 B

BIN
public/static/ext/colorPicker/images/custom_rgb_r.png Executable file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 789 B

BIN
public/static/ext/colorPicker/images/custom_submit.png Executable file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 1.2 KiB

BIN
public/static/ext/colorPicker/images/select.png Executable file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 82 B

BIN
public/static/ext/colorPicker/images/select1.png Executable file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 308 B

541
public/static/ext/colorPicker/js/colorpicker.js Executable file
View File

@@ -0,0 +1,541 @@
(function () {
var util = {
css: function (elem, obj) {
for (var i in obj) {
elem.style[i] = obj[i];
}
},
hasClass: function (elem, classN) {
var className = elem.getAttribute("class");
return className.indexOf(classN) != -1;
}
};
function Colorpicker(opt) {
if (this === window) throw `Colorpicker: Can't call a function directly`;
this.init(opt);
}
Colorpicker.prototype = {
init(opt) {
let {el, initColor = "rgb(255,0,0)", allMode = ['hex', 'rgb'], color = ''} = opt;
var elem = document.getElementById(el);
if (!(elem && elem.nodeType && elem.nodeType === 1)) {
// throw `Colorpicker: not found ID:${el} HTMLElement,not ${{}.toString.call(el)}`;
console.log(`Colorpicker: not found ID:${el} HTMLElement,not ${{}.toString.call(el)}`);
return;
}
this.Opt = {
...opt,
el,
initColor,
allMode,
color
};
this.bindElem = elem; // 绑定的元素
this.elem_wrap = null; // 最外层容器
this.fixedBg = null; // 拾色器后面固定定位的透明div 用于点击隐藏拾色器
this.elem_colorPancel = null; // 色彩面板
this.elem_picker = null; // 拾色器色块按钮
this.elem_barPicker1 = null; // 颜色条
this.elem_hexInput = null; // 显示hex的表单
this.elem_showColor = null; // 显示当前颜色
this.elem_showModeBtn = null; // 切换输入框模式按钮
this.elem_inputWrap = null; // 输入框外层容器
this.pancelLeft = 0;
this.pancelTop = 0;
this.downX = 0;
this.downY = 0;
this.moveX = 0;
this.moveY = 0;
this.pointLeft = 0;
this.pointTop = 0;
this.current_mode = 'hex'; // input框当前的模式
this.rgba = {r: 0, g: 0, b: 0, a: 1};
if (this.Opt.color) {
this.hsb = this.hexToHsb(this.Opt.color);
} else {
this.hsb = {h: 0, s: 100, b: 100};
}
var _this = this, rgb = initColor.slice(4, -1).split(",");
this.rgba.r = parseInt(rgb[0]);
this.rgba.g = parseInt(rgb[1]);
this.rgba.b = parseInt(rgb[2]);
var body = document.getElementsByTagName("body")[0],
div = document.createElement("div");
div.innerHTML = this.render();
body.appendChild(div);
this.elem_wrap = div;
this.fixedBg = div.children[0];
this.elem_colorPancel = div.getElementsByClassName("color-pancel")[0];
this.pancel_width = this.elem_colorPancel.offsetWidth;
this.pancel_height = this.elem_colorPancel.offsetHeight;
this.elem_picker = div.getElementsByClassName("pickerBtn")[0];
this.elem_colorPalette = div.getElementsByClassName("color-palette")[0];
this.elem_showColor = div.getElementsByClassName("colorpicker-showColor")[0];
this.elem_barPicker1 = div.getElementsByClassName("colorBar-color-picker")[0];
/* this.elem_barPicker2 = div.getElementsByClassName("colorBar-opacity-picker")[0]; */
this.elem_hexInput = div.getElementsByClassName("colorpicker-hexInput")[0];
// this.elem_showModeBtn = div.getElementsByClassName("colorpicker-showModeBtn")[0];
this.elem_inputWrap = div.getElementsByClassName("colorpicker-inputWrap")[0];
/* this.elem_opacityPancel = this.elem_barPicker2.parentNode.parentNode.children[1]; */
this.confirmBtn = div.getElementsByClassName("confirm-btn")[0];
this.cancelBtn = div.getElementsByClassName("cancel-btn")[0];
// var rect = this.bindElem.getBoundingClientRect();
/* var elem = this.bindElem;
var top = elem.offsetTop;
var left = elem.offsetLeft;
console.log(top, left);
while (elem.offsetParent) {
top += elem.offsetParent.offsetTop;
left += elem.offsetParent.offsetLeft;
elem = elem.offsetParent;
}
this.pancelLeft = left + this.elem_colorPalette.clientWidth;
this.pancelTop = top + this.bindElem.offsetHeight; */
div.className = 'colorpicker-layer'
util.css(div, {
"position": "absolute",
"z-index": 999,
"display": 'none',
// "left": left + "px",
});
this.bindMove(this.elem_colorPancel, this.setPosition, true);
this.bindMove(this.elem_barPicker1.parentNode, this.setBar, false);
/* this.bindMove(this.elem_barPicker2.parentNode,this.setBar,false); */
this.bindElem.addEventListener("click", function () {
_this.show();
var elem = _this.bindElem;
var top = elem.offsetTop;
var left = elem.offsetLeft;
while (elem.offsetParent) {
top += elem.offsetParent.offsetTop;
left += elem.offsetParent.offsetLeft;
elem = elem.offsetParent;
}
if (left - 240 < 0) left += 240;
_this.pancelLeft = left + _this.elem_colorPalette.clientWidth;
_this.pancelTop = 10 + $(_this.bindElem).offset().top + _this.bindElem.offsetHeight;
if ($(document).height() - _this.pancelTop < 240) {
_this.pancelTop = $(_this.bindElem).offset().top - _this.bindElem.offsetHeight - 240;
}
util.css(div, {
"display": 'block',
"left": (left - 240) + "px",
"top": (_this.pancelTop) + "px"
});
}, false);
this.fixedBg.addEventListener("click", function (e) {
_this.hide();
}, false)
this.confirmBtn.addEventListener("click", function () {
_this.setValue(_this.rgba);
_this.hide();
}, false);
this.cancelBtn.addEventListener("click", function () {
_this.Opt.change(_this.bindElem, "");
_this.hide();
}, false);
/* this.elem_showModeBtn.addEventListener("click", function () {
_this.switch_current_mode();
}, false) */
this.elem_wrap.addEventListener("input", function (e) {
var target = e.target, value = target.value;
_this.setColorByInput(value);
}, false);
this.elem_colorPalette.addEventListener("click", function (e) {
if (e.target.tagName.toLocaleLowerCase() == "p") {
let colorStr = e.target.style.background;
let rgb = colorStr.slice(4, -1).split(",");
let rgba = {
r: parseInt(rgb[0]),
g: parseInt(rgb[1]),
b: parseInt(rgb[2])
}
switch (_this.current_mode) {
case "hex":
_this.setColorByInput("#" + _this.rgbToHex(rgba))
break;
case 'rgb':
let inputs = _this.elem_wrap.getElementsByTagName("input")
inputs[0].value = rgba.r;
inputs[1].value = rgba.g;
inputs[2].value = rgba.b;
_this.setColorByInput(colorStr)
/* _this.hsb = _this.rgbToHsb(rgba); */
break;
}
}
}, false);
(color != '' && this.setColorByInput(color));
},
render: function () {
var tpl =
`<div style="position: fixed; top: 0px; right: 0px; bottom: 0px; left: 0px;"></div>
<div style="position: inherit; height: 245px; padding: 8px; border-radius: 3px; background: #fff; z-index: 100; display: flex; box-shadow: rgba(0, 0, 0, 0.3) 0px 0px 2px, rgba(0, 0, 0, 0.3) 0px 4px 8px;">
<div style='width:0;padding:0;overflow: hidden; background: #f9f9f9;display: flex;flex-flow: row wrap;align-content: space-around;justify-content: space-around;' class='color-palette'>
${this.getPaletteColorsItem()}
</div>
<div class="colorpicker-pancel" style="background: rgb(255, 255, 255);box-sizing: initial; width: 240px; font-family: Menlo;">
<div style="width: 100%; padding-bottom: 75%; position: relative; border-radius: 2px 2px 0px 0px; overflow: hidden;">
<div class="color-pancel" style="position: absolute; top: 0px; right: 0px; bottom: 0px; left: 0px; background: rgb(${this.rgba.r},${this.rgba.g},${this.rgba.b})">
<style>
.saturation-white {background: -webkit-linear-gradient(to right, #fff, rgba(255,255,255,0));background: linear-gradient(to right, #fff, rgba(255,255,255,0));}
.saturation-black {background: -webkit-linear-gradient(to top, #000, rgba(0,0,0,0));background: linear-gradient(to top, #000, rgba(0,0,0,0));}
</style>
<div class="saturation-white" style="position: absolute; top: 0px; right: 0px; bottom: 0px; left: 0px;">
<div class="saturation-black" style="position: absolute; top: 0px; right: 0px; bottom: 0px; left: 0px;">
</div>
<div class="pickerBtn" style="position: absolute; top: 0%; left: 100%; cursor: default;">
<div style="width: 12px; height: 12px; border-radius: 6px; box-shadow: rgb(255, 255, 255) 0px 0px 0px 1px inset; transform: translate(-6px, -6px);">
</div>
</div>
</div>
</div>
</div>
<div style="padding: 0;">
<div class="flexbox-fix" style="display: flex;align-items: center;height: 40px;">
<div style="width: 0; overflow: hidden;">
<div style="width: 16px; height: 16px; border-radius: 8px; position: relative; overflow: hidden;">
<div class="colorpicker-showColor" style="position: absolute; top: 0px; right: 0px; bottom: 0px; left: 0px; border-radius: 8px; box-shadow: rgba(0, 0, 0, 0.1) 0px 0px 0px 1px inset; background:rgb(${this.rgba.r},${this.rgba.g},${this.rgba.b}); z-index: 2;"></div>
<div style="position: absolute; top: 0px; right: 0px; bottom: 0px; left: 0px; background: url(&quot;data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAAMUlEQVQ4T2NkYGAQYcAP3uCTZhw1gGGYhAGBZIA/nYDCgBDAm9BGDWAAJyRCgLaBCAAgXwixzAS0pgAAAABJRU5ErkJggg==&quot;) left center;"></div>
</div>
</div>
<div style="-webkit-box-flex: 1; flex: 1 1 0%;"><div style="height: 10px; position: relative;">
<div style="position: absolute; top: 0px;right: 0px; bottom: 0px; left: 0px;">
<div class="hue-horizontal" style="padding: 0px 2px; position: relative; height: 100%;">
<style>
.hue-horizontal {background: linear-gradient(to right, #f00 0%, #ff0 17%, #0f0 33%, #0ff 50%, #00f 67%, #f0f 83%, #f00 100%);background: -webkit-linear-gradient(to right, #f00 0%, #ff0 17%, #0f0 33%, #0ff 50%, #00f 67%, #f0f 83%, #f00 100%);}
.hue-vertical {background: linear-gradient(to top, #f00 0%, #ff0 17%, #0f0 33%,#0ff 50%, #00f 67%, #f0f 83%, #f00 100%);background: -webkit-linear-gradient(to top, #f00 0%, #ff0 17%,#0f0 33%, #0ff 50%, #00f 67%, #f0f 83%, #f00 100%);}
</style>
<div class="colorBar-color-picker" style="position: absolute; left: 0; top: 1px;">
<div style="width: 4px; height: 8px; border-radius: 1px; background-color: rgb(248, 248, 248); box-shadow: rgba(0, 0, 0, 0.37) 0px 1px 4px 0px;">
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="flexbox-fix" style="display: flex;">
<div class="flexbox-fix colorpicker-inputWrap" style="-webkit-box-flex: 1; flex: 1 1 0%; display: flex; width: 138px;">
${this.getInputTpl()}
</div>
<div class="flexbox-fix flexbox-fix-btn" style="display: flex; width: 90px;">
<button class="btn cancel-btn">清空</button>
<button class="btn confirm-btn" style="margin-left: 5px; background: var(--base-color); border: 1px solid #ff6600; color: #fff;">确定</button>
</div>
</div>
</div>
</div>
</div>`;
return tpl;
},
getInputTpl: function () {
var current_mode_html = "";
switch (this.current_mode) {
case 'hex':
var hex = "#" + this.rgbToHex(this.HSBToRGB(this.hsb));
current_mode_html += `
<div style="width: 138px;">
<div style="position: relative;">
<input class="colorpicker-hexInput" value="${hex.toUpperCase()}" spellcheck="false" style="font-size: 11px; color: rgb(51, 51, 51); width: 100%; border-radius: 3px; border: none; box-shadow: rgb(218, 218, 218) 0px 0px 0px 1px inset; width: 138px; height: 24px; text-align: center;">
</div>
</div>`;
break;
case 'rgb':
for (var i = 0; i < 3; i++) {
current_mode_html +=
`<div style="padding-left: 6px; width: 100%;">
<div style="position: relative;">
<input class="colorpicker-hexInput" value="${this.rgba['rgb'[i]].toUpperCase()}" spellcheck="false" style="font-size: 11px; color: rgb(51, 51, 51); width: 100%; border-radius: 2px; border: none; box-shadow: rgb(218, 218, 218) 0px 0px 0px 1px inset; height: 21px; text-align: center;">
<span style="text-transform: uppercase; font-size: 11px; line-height: 11px; color: rgb(150, 150, 150); text-align: center; display: block; margin-top: 12px;">${'rgb'[i]}</span>
</div>
</div>`;
}
default:
}
return current_mode_html;
},
getPaletteColorsItem: function () {
let str = '';
let palette = ["rgb(0, 0, 0)", "rgb(67, 67, 67)", "rgb(102, 102, 102)", "rgb(204, 204, 204)", "rgb(217, 217, 217)", "rgb(255, 255, 255)",
"rgb(152, 0, 0)", "rgb(255, 0, 0)", "rgb(255, 153, 0)", "rgb(255, 255, 0)", "rgb(0, 255, 0)", "rgb(0, 255, 255)",
"rgb(74, 134, 232)", "rgb(0, 0, 255)", "rgb(153, 0, 255)", "rgb(255, 0, 255)", "rgb(230, 184, 175)", "rgb(244, 204, 204)",
"rgb(252, 229, 205)", "rgb(255, 242, 204)", "rgb(217, 234, 211)", "rgb(208, 224, 227)", "rgb(201, 218, 248)", "rgb(207, 226, 243)",
"rgb(217, 210, 233)", "rgb(234, 209, 220)", "rgb(221, 126, 107)", "rgb(234, 153, 153)", "rgb(249, 203, 156)", "rgb(255, 229, 153)",
"rgb(182, 215, 168)", "rgb(162, 196, 201)", "rgb(164, 194, 244)", "rgb(159, 197, 232)", "rgb(180, 167, 214)"]
palette.forEach(item => str += `<p style='width:20px;height:20px;background:${item};margin:0 5px;border: solid 1px #d0d0d0;'></p>`)
return str;
},
setPosition(x, y) {
var LEFT = parseInt(x - this.pancelLeft) + 240,
TOP = parseInt(y - this.pancelTop);
this.pointLeft = Math.max(0, Math.min(LEFT, this.pancel_width));
this.pointTop = Math.max(0, Math.min(TOP, this.pancel_height));
util.css(this.elem_picker, {
left: this.pointLeft + "px",
top: this.pointTop + "px"
})
this.hsb.s = parseInt(100 * this.pointLeft / this.pancel_width);
this.hsb.b = parseInt(100 * (this.pancel_height - this.pointTop) / this.pancel_height);
this.setShowColor();
this.setValue(this.rgba);
},
setBar: function (elem, x) {
var elem_bar = elem.getElementsByTagName("div")[0],
rect = elem.getBoundingClientRect(),
elem_width = elem.offsetWidth,
X = Math.max(0, Math.min(x - rect.x, elem_width));
if (elem_bar === this.elem_barPicker1) {
util.css(elem_bar, {
left: X + "px"
});
this.hsb.h = parseInt(360 * X / elem_width);
} else {
util.css(elem_bar, {
left: X + "px"
});
this.rgba.a = X / elem_width;
}
this.setPancelColor(this.hsb.h);
this.setShowColor();
this.setValue(this.rgba);
},
setPancelColor: function (h) {
var rgb = this.HSBToRGB({h: h, s: 100, b: 100});
util.css(this.elem_colorPancel, {
background: 'rgba(' + rgb.r + ',' + rgb.g + ',' + rgb.b + ',' + this.rgba.a + ')'
});
},
setShowColor: function () {
var rgb = this.HSBToRGB(this.hsb);
this.rgba.r = rgb.r;
this.rgba.g = rgb.g;
this.rgba.b = rgb.b;
util.css(this.elem_showColor, {
background: 'rgba(' + rgb.r + ',' + rgb.g + ',' + rgb.b + ',' + this.rgba.a + ')'
});
},
setValue: function (rgb) {
var hex = "#" + this.rgbToHex(rgb);
this.elem_inputWrap.innerHTML = this.getInputTpl();
this.Opt.change(this.bindElem, hex.toUpperCase());
},
setColorByInput: function (value) {
var _this = this;
switch (this.current_mode) {
case "hex":
value = value.slice(1);
if (value.length == 3) {
value = '#' + value[0] + value[0] + value[1] + value[1] + value[2] + value[2];
this.hsb = this.hexToHsb(value);
} else if (value.length == 6) {
this.hsb = this.hexToHsb(value);
}
break;
case 'rgb':
var inputs = this.elem_wrap.getElementsByTagName("input"),
rgb = {
r: inputs[0].value ? parseInt(inputs[0].value) : 0,
g: inputs[1].value ? parseInt(inputs[1].value) : 0,
b: inputs[2].value ? parseInt(inputs[2].value) : 0
};
this.hsb = this.rgbToHsb(rgb);
}
this.changeViewByHsb();
},
changeViewByHsb: function () {
this.pointLeft = parseInt(this.hsb.s * this.pancel_width / 100);
this.pointTop = parseInt((100 - this.hsb.b) * this.pancel_height / 100);
util.css(this.elem_picker, {
left: this.pointLeft + "px",
top: this.pointTop + "px"
});
this.setPancelColor(this.hsb.h);
this.setShowColor();
util.css(this.elem_barPicker1, {
left: this.hsb.h / 360 * (this.elem_barPicker1.parentNode.offsetWidth) + "px"
});
var hex = '#' + this.rgbToHex(this.HSBToRGB(this.hsb));
this.Opt.change(this.bindElem, hex.toUpperCase());
},
switch_current_mode: function () {
this.current_mode = this.current_mode == 'hex' ? 'rgb' : 'hex';
this.elem_inputWrap.innerHTML = this.getInputTpl();
},
bindMove: function (elem, fn, bool) {
var _this = this;
elem.addEventListener("mousedown", function (e) {
_this.downX = e.pageX;
_this.downY = e.pageY;
bool ? fn.call(_this, _this.downX, _this.downY) : fn.call(_this, elem, _this.downX, _this.downY);
document.addEventListener("mousemove", mousemove, false);
function mousemove(e) {
_this.moveX = e.pageX;
_this.moveY = e.pageY;
bool ? fn.call(_this, _this.moveX, _this.moveY) : fn.call(_this, elem, _this.moveX, _this.moveY);
e.preventDefault();
}
document.addEventListener("mouseup", mouseup, false);
function mouseup(e) {
document.removeEventListener("mousemove", mousemove, false)
document.removeEventListener("mouseup", mouseup, false)
}
}, false);
},
show: function () {
util.css(this.elem_wrap, {
"display": "block"
})
},
hide: function () {
util.css(this.elem_wrap, {
"display": "none"
})
},
HSBToRGB: function (hsb) {
var rgb = {};
var h = Math.round(hsb.h);
var s = Math.round(hsb.s * 255 / 100);
var v = Math.round(hsb.b * 255 / 100);
if (s == 0) {
rgb.r = rgb.g = rgb.b = v;
} else {
var t1 = v;
var t2 = (255 - s) * v / 255;
var t3 = (t1 - t2) * (h % 60) / 60;
if (h == 360) h = 0;
if (h < 60) {
rgb.r = t1;
rgb.b = t2;
rgb.g = t2 + t3
} else if (h < 120) {
rgb.g = t1;
rgb.b = t2;
rgb.r = t1 - t3
} else if (h < 180) {
rgb.g = t1;
rgb.r = t2;
rgb.b = t2 + t3
} else if (h < 240) {
rgb.b = t1;
rgb.r = t2;
rgb.g = t1 - t3
} else if (h < 300) {
rgb.b = t1;
rgb.g = t2;
rgb.r = t2 + t3
} else if (h < 360) {
rgb.r = t1;
rgb.g = t2;
rgb.b = t1 - t3
} else {
rgb.r = 0;
rgb.g = 0;
rgb.b = 0
}
}
return {r: Math.round(rgb.r), g: Math.round(rgb.g), b: Math.round(rgb.b)};
},
rgbToHex: function (rgb) {
var hex = [
rgb.r.toString(16),
rgb.g.toString(16),
rgb.b.toString(16)
];
hex.map(function (str, i) {
if (str.length == 1) {
hex[i] = '0' + str;
}
});
return hex.join('');
},
hexToRgb: function (hex) {
var hex = parseInt(((hex.indexOf('#') > -1) ? hex.substring(1) : hex), 16);
return {r: hex >> 16, g: (hex & 0x00FF00) >> 8, b: (hex & 0x0000FF)};
},
hexToHsb: function (hex) {
return this.rgbToHsb(this.hexToRgb(hex));
},
rgbToHsb: function (rgb) {
var hsb = {h: 0, s: 0, b: 0};
var min = Math.min(rgb.r, rgb.g, rgb.b);
var max = Math.max(rgb.r, rgb.g, rgb.b);
var delta = max - min;
hsb.b = max;
hsb.s = max != 0 ? 255 * delta / max : 0;
if (hsb.s != 0) {
if (rgb.r == max) hsb.h = (rgb.g - rgb.b) / delta;
else if (rgb.g == max) hsb.h = 2 + (rgb.b - rgb.r) / delta;
else hsb.h = 4 + (rgb.r - rgb.g) / delta;
} else hsb.h = -1;
hsb.h *= 60;
if (hsb.h < 0) hsb.h += 360;
hsb.s *= 100 / 255;
hsb.b *= 100 / 255;
return hsb;
}
}
Colorpicker.create = function (opt) {
return new Colorpicker(opt)
}
window.Colorpicker = Colorpicker;
})()

270
public/static/ext/diyview/css/bottom_nav_design.css Executable file
View File

@@ -0,0 +1,270 @@
.layui-layout-admin .layui-body .body-content{padding: 15px;margin: 15px;}
#bottomNav{position: relative;overflow: hidden}
#bottomNav .preview{width: 320px;background-repeat: no-repeat;background-size: 100%;float: left;}
#bottomNav .preview .preview-head{background: url("../img/preview_head_old.png") no-repeat;position: relative;}
#bottomNav .preview .preview-head>span{color: #ffffff;font-size: 16px;display: block;text-align: center;margin-left: 50px;height: 64px;line-height: 82px;margin-right: 40px;text-overflow: ellipsis;white-space: nowrap;overflow: hidden;cursor: pointer;}
#bottomNav .preview .preview-block{border-left: 1px solid #e5e5e5;border-right: 1px solid #e5e5e5;border-bottom: 1px solid #e5e5e5;min-height: 100px;position: relative;}
.preview-block ul{overflow: hidden;display: flex;position: absolute;bottom: 0;width: 100%;border-top:1px solid #e5e5e5;}
.preview-block ul li{text-align: center;flex: 1;margin: 5px 0;}
.preview-block ul li>div{height: 30px;line-height: 30px;width: 30px; display: flex;align-items: center;justify-content: center;margin: 0 auto;}
.preview-block ul li>div>div{height: 20px;width: 20px;}
.preview-block ul li>div.js-icon{font-size: 20px}
.preview-block ul li img{width: 20px;max-height: 100%;}
.preview-block ul li span{text-overflow: ellipsis;white-space: nowrap;overflow: hidden;display: block;}
.preview-block ul li .icon-wrap{font-size: 20px}
#bottomNav .edit-attribute{position: relative;border: 1px solid #e5e5e5;width:400px;float: left;margin-left: 20px;overflow-y: scroll;overflow-x: auto;display: block;}
.edit-attribute .img-block{width: 50px;height: 48px;display: inline-block;padding: 8px;margin-right: 10px;cursor: pointer;vertical-align: top; line-height: 1;background-color: #EEEEEE;text-align: center;font-size: 12px;}
.edit-attribute .img-block i.add{display:block;font-style: normal;text-align: center;font-size:30px;line-height: 48px;}
.edit-attribute .img-block i.del{display: block;}
.edit-attribute .img-block.has-choose-image{width: 66px;height: 64px;margin-right:0;background-color: #EEEEEE;display: inline-block;vertical-align: top;position: relative;line-height: 64px;text-align: center;padding: 0;}
.edit-attribute .img-block:last-child{margin-top:15px;}
.edit-attribute .img-block.has-choose-image>div{width: 66px;height: 48px;line-height: 48px;}
.edit-attribute .img-block.has-choose-image img{width: 30px;height: auto;max-width: 100%;max-height: 100%;}
.edit-attribute .img-block.has-choose-image span{position: absolute;bottom: 0;left: 0;width: 100%;text-align: center;font-size:12px;background: rgba(0,0,0,.6);color:#ffffff;line-height: initial;cursor:pointer;}
.edit-attribute .bottom-menu-config ul>li{display: flex; padding: 10px;background: #ffffff; border: 1px dashed #e5e5e5;position: relative;margin-top: 16px;justify-content: space-between;flex-direction: column;}
.edit-attribute .bottom-menu-config ul>li:first-child{margin-top:0;}
.edit-attribute .bottom-menu-config ul>li .image-block{display: flex;flex-direction: row;margin-right:20px;cursor:pointer;vertical-align: top;line-height: 1;text-align: center;margin-top: 15px;}
.edit-attribute .bottom-menu-config ul>li .content-block{display:inline-block;width:100%;}
.edit-attribute .bottom-menu-config ul>li .content-block .layui-form-label{width:70px;color: #909399 !important;font-size: 14px;}
.edit-attribute .bottom-menu-config ul>li .content-block .layui-input-block{margin-left:80px;}
.edit-attribute .bottom-menu-config ul>li:hover .del{display:block;}
.edit-attribute .bottom-menu-config ul>li .img-hover-block{clear: both;}
.edit-attribute .bottom-menu-config ul>li .img-hover-block .img-block{margin-top: 10px;}
.edit-attribute .bottom-menu-config ul.icon-wrap>li {margin-top: 0px;justify-content: center;align-items: center;}
.edit-attribute .bottom-menu-config .add-item{text-align:center;padding: 10px;border: 1px dashed #e5e5e5;margin: 10px 0;cursor: pointer;}
.edit-attribute .bottom-menu-config .add-item i{font-size: 18px;vertical-align: middle;margin-right: 10px;font-style: normal;}
.edit-attribute .bottom-menu-config .add-item span{vertical-align: middle;}
.edit-attribute .bottom-menu-config p.hint{font-size: 12px;color: #999;margin: 10px;}
.edit-attribute .bottom-menu-config .error-msg{margin-top: 5px;color: #f44;display: none;}
.edit-attribute .bottom-menu-config .layui-form-checkbox span{height: initial;}
.custom-save{margin-top: 20px;padding: 0;}
.layui-form-item .layui-form-checkbox{margin-top: 8px !important;padding-left: 0 !important;}
.bottom-menu-config .layui-form-label.sm{color: #909399 !important;font-size: 14px;}
.edit-attribute .bottom-menu-set li .del{left:unset;right: -10px;top: -10px;}
.edit-attribute .icon-block{display: inline-block;margin-right: 10px;cursor: pointer;vertical-align: top; line-height: 1;text-align: center;font-size: 12px;position: relative;}
.edit-attribute .icon-block i.add{display:block;font-style: normal;text-align: center;font-size:30px;line-height: 48px;}
.edit-attribute .icon-block>div{display: flex;flex-direction: row;height: 60px;align-items: center;padding: 0px;}
.edit-attribute .icon-block>div img{width: 100%;max-height: 100%}
.edit-attribute .icon-block>div .edit-icon{position: absolute;bottom: 0;left: 0;width: 100%;text-align: center;font-size: 12px;background: rgba(0,0,0,.6);color: #ffffff;line-height: initial;cursor: pointer;}
.edit-attribute .icon-block i.del{display: block;}
.edit-attribute .icon-block.has-choose-image{width: 66px;height: 64px;margin-right:0;background-color: #EEEEEE;display: inline-block;vertical-align: top;position: relative;line-height: 64px;text-align: center;padding: 0;}
.edit-attribute .icon-block:last-child{margin-top:0px;}
.edit-attribute .icon-block.has-choose-image>div{width: 66px;height: 48px;line-height: 48px;}
.edit-attribute .icon-block.has-choose-image img{width: 30px;height: auto;max-width: 100%;max-height: 100%;}
.edit-attribute .icon-block.has-choose-image span{position: absolute;bottom: 0;left: 0;width: 100%;text-align: center;font-size:12px;background: rgba(0,0,0,.6);color:#ffffff;line-height: initial;cursor:pointer;}
.edit-attribute .icon-block>div .operation {
position: absolute;
width: 100%;
height: 100%;
background: rgba(0,0,0,.6);
flex-direction: column;
display: none;
}
.edit-attribute .icon-block>div .icon-box:hover .operation, .edit-attribute .icon-block>div .upload-box:hover .operation {
display: flex;
}
.edit-attribute .icon-block>div .operation-warp {
flex: 1;
height: 0;
display: flex;
align-items: center;
justify-content: center;
color: #fff;
}
.edit-attribute .icon-block>div .iconfont {
margin: 0 3px;
}
.edit-attribute .icon-block>div .operation .js-replace{
line-height: 1;
color: #fff;
text-align: center;
padding: 5px 0;
background: rgba(0,0,0,.7);
font-size: 12px;
}
.icon-box,.upload-box{
width: 60px;
height: 60px;
font-size: 60px;
border: 1px dashed #ddd;
display: flex;
align-items: center;
justify-content: center;
padding: 0!important;
cursor: pointer;
position: relative;
}
.icon-box .select-icon, .upload-box .select-icon {
width: inherit;
height: inherit;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
line-height: 1;
}
.icon-box .select-icon .add, .upload-box .select-icon .add {
font-size: 26px;
color: var(--base-color);
}
.icon-box .operation, .upload-box .operation {
position: absolute;
width: 100%;
height: 100%;
background: rgba(0,0,0,.6);
flex-direction: column;
display: none;
}
.icon-box:hover .operation {
/*display: flex;*/
}
.upload-box:hover .operation{
display: flex;
}
.upload-box:hover {
}
.icon-box .operation-warp,.upload-box .operation-warp {
flex: 1;
height: 0;
display: flex;
align-items: center;
justify-content: center;
color: #fff;
}
.icon-box .iconfont, .upload-box .iconfont {
margin: 0 3px;
font-size: 16px!important;
}
.icon-box .operation .js-replace, .upload-box .operation .js-replace{
line-height: 1;
color: #fff;
text-align: center;
padding: 5px 0;
background: rgba(0,0,0,.7);
font-size: 12px;
}
.edit-attribute .image-block .action-box {
display: flex;
flex-direction: column;
}
.edit-attribute .image-block .action {
margin-left: 6px;
width: 42px;
height: 28px;
line-height: 28px;
text-align: center;
border: 1px solid #EEEEEE;
cursor: pointer;
}
.edit-attribute .image-block .action:last-child {
margin-top: 2px;
}
.edit-attribute .image-block .iconfont {
font-size: 20px;
}
.edit-attribute .image-block .action:hover {
border-color: var(--base-color);
color: var(--base-color);
}
.select-icon-style {
position: fixed;
width: 100vw;
height: 100vh;
left: 0;
top: 0;
z-index: 9999;
}
.select-icon-style .icon-style-wrap {
position: absolute;
background: #fff;
border: 1px solid #ddd;
right: 40px;
margin-top: 15px;
}
.select-icon-style .icon-style-wrap iframe {
width: 100%;
height: 100%;
}
.img-upload, .upload-img-block {
width: 60px;
height: 60px;
padding: 0;
}
.upload-img-block .upload-img-box .add {
font-size: 26px;
color: var(--base-color);
}
.upload-img-block .operation i {
font-size: 16px!important;
margin: 0 2px!important;
line-height: 1;
}
.upload-img-block .operation > div:first-child {
display: flex;
align-items: center;
justify-content: center;
height: calc(100% - 20px);
}
.select-url {
background: #fff;
height: 32px;
cursor: pointer;
display: flex;
align-items: end;
color: #666;
}
.select-url .text {
flex: 1;
width: 0;
white-space: nowrap;
overflow: hidden;
text-overflow:ellipsis;
text-align: right;
color: #000;
}
.select-url .layui-icon {
font-size: 12px;
margin-top: 1px;
}
.icon-text {
height: 30px!important;
text-align: center;
width: 64px;
line-height: 30px;
padding: 0 13px!important;
}
.edit-attribute .bottom-menu-set li{
padding-left: 25px!important;
}
.edit-attribute .bottom-menu-set li .icontuodong{
position: absolute;
top: calc(50% - 10px);
left: 10px;
cursor: pointer;
font-size: 20px;
}
/*滚动条样式*/
.edit-attribute::-webkit-scrollbar {
width: 4px;
}
.edit-attribute::-webkit-scrollbar-thumb {
border-radius: 10px;
box-shadow: inset 0 0 5px rgba(0,0,0,0.2);
background: rgba(0,0,0,0.2);
}
.edit-attribute::-webkit-scrollbar-track {
box-shadow: inset 0 0 5px rgba(0,0,0,0.2);
border-radius: 0;
background: rgba(0,0,0,0.1);
}

263
public/static/ext/diyview/css/diyview.css Executable file
View File

@@ -0,0 +1,263 @@
#diyView .layui-form-label.sm{width: 90px;font-size: 13px;}
#diyView .layui-form-label.sm + .layui-input-block{margin-left: 100px;}
.layui-form-select dl {z-index: 9999;}
.layui-btn:hover {opacity: 1;}
.footer{display:none;}
.top-full-screen .layui-layout-admin .layui-body{top: 0;left: 0;}
.layui-layout-admin .layui-body .body-content {min-height: initial;margin: 0;padding-top: 0;padding-bottom: 0; background: #fff;}
.position-page-btn {position: absolute;left: 50%;margin-left: 140px;border-color: #f7f8fa;box-shadow: 0 2px 8px 0 rgba(0, 0, 0, .1);z-index: 9;}
/*快捷操作*/
.quick-action{position: absolute;width: 42px;background: #fff;left: 50%;top: 20%;margin-left: 140px;border-radius: 4px;text-align: center;box-shadow: 0 2px 8px 0 rgba(0, 0, 0, .1);z-index: 9;}
.quick-action li{position: relative;}
.quick-action li i {display: block;text-align: center;font-size: 20px;line-height: 40px;cursor: pointer;}
.quick-action li.disabled i{color: #CECECE;/*cursor: not-allowed;*/}
.quick-action li span {position: absolute;top: 5px;right: -60px;font-size: 14px;height: 30px;line-height: 30px;padding: 0 10px;background: #fff;border-radius: 4px;box-shadow: 0 2px 8px 0 rgba(0, 0, 0, .1);display: none;}
.quick-action li:not(.disabled):hover span {display: block;}
.quick-action li span:after {content: "";position: absolute;left: -3px;top: 50%;margin-top: -3px;background: #fff;width: 6px;height: 6px;transform: rotate(45deg);}
@keyframes spin {
from {
transform: rotate(0deg);
}
to {
transform: rotate(360deg);
}
}
.loading-layer {width: 400px;height: 525px;position: absolute;z-index: 997;background: #f8f8f8;left: 50%;top: 84px;margin-left: -270px;}
.loading-anim {position: absolute;left: 50%;top: 40%;transform: translate(-50%, -50%);width: 35px;height: 35px;perspective: 800px;transform-style: preserve-3d;transition: all 0.2s ease-out;}
.loading-anim > .item {position: relative;width: 35px;height: 35px;perspective: 800px;transform-style: preserve-3d;transition: all 0.2s ease-out;}
.loading-anim .out {position: absolute;border-radius: 50%;
border: 3px solid;top: 15%;left: 15%;width: 70%;height: 70%;
border-left-color: var(--base-color);
border-right-color: #C5C5C5;
border-top-color: var(--base-color);
border-bottom-color: #C5C5C5;
animation: spin 0.6s linear normal infinite;
perspective: 800px;
transform-style: preserve-3d;
transition: all 0.2s ease-out;}
/* 顶部风格 */
.nav-style {display: flex;flex-wrap: wrap;}
.nav-style .text-title {margin-right: 2%;margin-bottom: 15px;width: 32%;height: 100px;line-height: 100px;border: 1px solid #cccc;background-color: #eee;display: inline-block;box-sizing: border-box;}
.nav-style .text-title:nth-child(3n+3) {margin-right: 0;}
.nav-style .text-title img {width: 100%}
.template-edit-title {border-bottom: 5px solid #f6f7f9;}
.template-edit-title:last-of-type{border-bottom: none;}
.template-edit-title h3 {font-size: 14px;padding: 10px;color: #303133;}
/*颜色选择器*/
.colorSelector {display: inline-block;vertical-align: middle;cursor: pointer;border-radius: 2px;width: 38px;}
.colorSelector:nth-of-type(2){margin-left: 5px;}
.colorSelector div{border-radius: 2px;width: 34px;margin-left: -17px;background-position: initial;}
.color-selector-reset {display: inline-block;line-height: 34px;cursor: pointer;margin-left: 10px;}
.flexbox-fix-btn {justify-content: center;}
.flexbox-fix-btn .btn {width: 40px;line-height: 22px;font-size: 12px;margin: 0;box-sizing: border-box;border-radius: 3px;}
.flex {justify-content: space-between;display: flex;align-items: center;}
.flex .flex_fill {flex: 1;text-align: right;margin-left: 5px;}
.flex .flex_left {display: flex;align-items: center;}
.flex .flex_left .curr-color {color: #303133;margin-left: 7px;}
.flex .flex_left .curr-color span:first-child{margin-right: 10px;}
.selected-style {cursor: pointer;float: right;color: #909399;}
.selected-style i {font-size: 12px;line-height: 34px;color: #818181;margin-left: 5px;}
/* 链接地址 */
.layui-input-block span.sm {display: flex;line-height: 34px;cursor: pointer;}
.layui-input-block span.sm span {display: inline-block;max-width: 130px;overflow: hidden;text-overflow: ellipsis;white-space: nowrap;}
.layui-input-block span.sm i {margin-left: 5px;font-size: 12px;color: #818181;}
.component-links .layui-input-block .sm {float: right;}
/* 选择icon */
.component-icon .layui-input-block .sm {width: 50px;height: 50px;justify-content: space-around;align-items: center;border: 1px solid #CCC;}
.component-icon .layui-input-block .sm i{margin: 0;font-size: 16px;}
.component-icon .layui-input-block .sm i.js-icon{font-size: 20px;}
/* 进度条样式 */
.layui-input-block {line-height: 34px;min-height: 34px;}
.side-process {display: inline-block;margin-right: 15px;margin-left: 5px;width: 260px;vertical-align: middle;}
.slide-prompt-text {color: #909399;}
.layui-slider-wrap {top: -17px;}
.layui-slider {height: 3px;}
#diyView {position: relative;background: #f7f8fa;padding: 20px 0 0;visibility: hidden;/*min-width: 1300px;*/}
.custom-save {text-align: center;background: #fff;padding: 15px 400px 15px 290px;}
.preview-wrap {overflow: hidden;margin-left: 255px;margin-right: 392px;}
.preview-wrap .preview-restore-wrap { /*width: 102%;*/margin-right: -12px;visibility: hidden;}
.preview-wrap .preview-restore-wrap .div-wrap {overflow: auto;height: 525px;}
.preview-wrap .preview-restore-wrap .diy-view-wrap {width: 375px;background-repeat: no-repeat;background-position-y: 128px;background-size: 100%;margin: 0 auto 20px;border:2px solid #f0f1f3;padding-top: 64px;margin-top: -64px;}
.preview-wrap .preview-restore-wrap .diy-view-wrap .preview-head {height: 64px;width: 375px;}
.preview-wrap .preview-restore-wrap .diy-view-wrap .preview-head > span {background: #fff url(../img/preview_head.png) no-repeat 50%/cover;font-size: 14px;display: block;text-align: center;height: 64px;line-height: 82px;text-overflow: ellipsis;white-space: nowrap;overflow: hidden;cursor: pointer;margin: 0 auto;}
.preview-wrap .preview-restore-wrap .diy-view-wrap .preview-block {min-height: 400px;}
/*组件列表*/
.component-list {width: 235px;padding: 0 10px;background: #ffffff;float: left;position: absolute;top: 0;overflow: hidden;user-select: none;z-index: 9999;}
.component-list .tab{display: flex;margin: 10px 0 5px -10px;}
.component-list .tab span{font-weight: normal;font-size: 14px;cursor: pointer;line-height: 40px;flex: 1;text-align: center;position: relative;background: #fff;border-top: 1px solid #f1f1f1;border-bottom: 1px solid #f1f1f1;border-left: 1px solid #f1f1f1;}
.component-list .tab span:last-child{border-right: 1px solid #f1f1f1;}
.component-list .tab span.selected{background-color: #f1f1f1;}
/*.component-list .tab span.selected:after{content: '';border-bottom: 2px solid;position: absolute;left: 50%;bottom: 0;width: 65%;transform: translate(-50%, -50%);}*/
.component-list nav {height: 610px;overflow-y: auto;width: 257px;}
.component-list h3 {font-size: 14px;/*margin-top: 10px;*/cursor: pointer;line-height: 40px;}
.component-list h3 img {width: 16px;margin-right: 5px;}
.component-list ul {overflow: hidden;margin: 0;padding: 0;transition: all .3s;opacity: 1;}
.component-list ul li {float: left;font-size: 12px;width: 78px;height: 75px;text-align: center;cursor: pointer;position: relative;text-overflow: ellipsis;white-space: nowrap;overflow: hidden;}
.component-list ul li.hot:after {content: '';background: url(../img/hot_component.png) no-repeat center/100%;position: absolute;width: 16px;height: 20px;right: 20%;top: 0;}
.component-list ul li.disabled { /*cursor: not-allowed;*/color: #bbb;}
.component-list ul li img {width: 42px;margin-top: 11px;}
.component-list ul li span:last-child {font-size: 12px;/*color: #909399;*/display: block;margin-top: 5px;}
.component-list ul li i{font-size: 23px;margin-bottom: 4px;/*color: #909399;*/margin-top: 14px;display: inline-block;}
/*预览*/
.draggable-element {outline: 2px dotted transparent; /*background: #ffffff;position: relative;*/}
.draggable-element .preview-draggable { cursor: move;position: relative;}
.draggable-element .preview-draggable .preview-box {padding: 0;}
.draggable-element.selected {outline: 2px solid;}
.del {background: #999;color: #FFFFFF;position: absolute;border-radius: 50%;width: 20px;height: 20px;font-size: 12px;font-style: normal;line-height: 18px;text-align: center;right: -10px;top: -10px;cursor: pointer;z-index: 1;display: none;}
/*ul li .content-block + .del {right: unset;left: 68px;top: 0;}*/
.draggable-element .preview-draggable:hover .del {display: block;}
.draggable-element .comp-title{position: absolute;left: -90px;min-width: 70px;min-height: 20px;padding: 4px 7px;box-shadow: 0 2px 8px 0 rgba(0, 0, 0, .1);box-sizing: border-box;text-align: center;line-height: 20px;font-size: 12px;background: #fff;border-radius: 2px;top:0;/*top: 50%;margin-top: -14px;*/}
/*右侧编辑栏*/
.edit-attribute {position: absolute;top: 0;right: 0;background: #ffffff;border-top: 1px solid #f7f8fa;width: 370px;padding: 10px;z-index: 1;overflow: hidden;display: none;}
.draggable-element.selected .edit-attribute{display: block;}
/* 选中页面设置 */
.page-set-wrap.selected .edit-attribute{display: block;}
/* 选中弹窗广告组件 */
.pop-window-wrap.selected .edit-attribute{display: block;}
.edit-attribute .attr-wrap {width: 392px;overflow-x: hidden;overflow-y: auto;height: 600px;}
.edit-attribute .attr-wrap .restore-wrap {width: 360px;}
.edit-attribute .attr-wrap .restore-wrap .layui-form-label {color: #666 !important;}
.edit-attribute .attr-wrap .restore-wrap .attr-title {padding: 10px 0 15px 10px;border-bottom: 2px solid #f2f4f6;margin-bottom: 10px;color: #303133;display: flex;justify-content: space-between;align-items: center;}
.edit-attribute .attr-wrap .restore-wrap .attr-title .title{font-size: 18px;}
.edit-attribute .attr-wrap .restore-wrap .attr-title .tab-wrap{background-color: #f5f5f5;border-radius: 50px;font-size: 14px;display: flex;}
.edit-attribute .attr-wrap .restore-wrap .attr-title .tab-wrap span{cursor: pointer;padding: 5px 15px;border-radius: 50px;}
.edit-attribute .attr-wrap .restore-wrap .attr-title .tab-wrap span.active{color: #fff;}
.edit-attribute .attr-wrap .restore-wrap .layui-form input[type=radio] {display: inline-block;opacity: 0;position: absolute;top: 10px;width: 60px;height: 20px;cursor: pointer;}
.edit-attribute .attr-wrap .restore-wrap .img-block {display: inline-block;margin-right: 10px;cursor: pointer;vertical-align: top;text-align: center;border: 1px solid #CCCCCC;width: 66px;height: 66px;line-height: 66px;}
.edit-attribute .attr-wrap .restore-wrap .img-block > div {position: relative}
.edit-attribute .attr-wrap .restore-wrap .img-block > div.del {display: inline-block;margin-right: 10px;cursor: pointer;vertical-align: top;text-align: center;border: 1px solid #CCCCCC;width: 66px;height: 66px;line-height: 66px;}
.edit-attribute .attr-wrap .restore-wrap .img-block + .content-block {display: inline-block;width: calc(100% - 78px);font-size: 14px;}
.edit-attribute .attr-wrap .restore-wrap .img-block + .content-block .layui-form-label.sm {width: 68px !important;}
.edit-attribute .attr-wrap .restore-wrap .img-block + .content-block .layui-input-block {margin-left: 78px;}
.edit-attribute .attr-wrap .restore-wrap .img-block + .content-block .layui-input-block span.sm {float: right;}
.edit-attribute .attr-wrap .restore-wrap .img-block i.add {display: block;font-style: normal;text-align: center;font-size: 26px;min-width: 26px;}
.edit-attribute .attr-wrap .restore-wrap .img-block i.del {display: none;}
.edit-attribute .attr-wrap .restore-wrap .img-block:hover i.del {display: block;}
.edit-attribute .attr-wrap .restore-wrap .img-block.has-choose-image {width: 66px;height: 64px;border: 1px dashed #e5e5e5;display: inline-block;vertical-align: top;position: relative;line-height: 64px;margin-right: 10px;text-align: center;padding: 0;overflow: hidden}
.edit-attribute .attr-wrap .restore-wrap .img-block.has-choose-image > div {width: 66px;height: 64px;}
.edit-attribute .attr-wrap .restore-wrap .img-block.has-choose-image img {width: auto;height: auto;max-width: 100%;max-height: 100%;}
.edit-attribute .attr-wrap .restore-wrap .img-block.has-choose-image span {position: absolute;bottom: 0;left: 0;width: 100%;text-align: center;font-size: 12px;background: rgba(0, 0, 0, .6);color: #ffffff;line-height: initial;cursor: pointer;}
.edit-attribute .attr-wrap .restore-wrap .img-block span {font-size: 12px;line-height: 23px;}
.layui-btn.layui-btn-primary.sm {margin-top: 5px;padding: 5px 10px !important;height: auto;font-size: 12px;border-radius: 0;vertical-align: baseline;line-height: 1}
/*.edit-attribute .attr-wrap .restore-wrap .layui-form-radio {margin-top: 0;line-height: 34px;}*/
/*.edit-attribute .attr-wrap .restore-wrap .layui-form-radio:last-child{margin-right: 0;}*/
/* 单选 */
.icon-radio .icon-wrap {float: right;}
.icon-radio .icon-wrap li {display: inline-block;width: 50px;height: 32px;line-height: 30px;text-align: center;border: 1px solid #EEEEEE;border-right: 1px solid transparent;cursor: pointer;float: left;box-sizing: border-box;color: #909399;}
.icon-radio .icon-wrap li .iconfont.angle{font-size: 14px;}
.icon-radio .icon-wrap li:last-child {border-right: 1px solid #EEEEEE;}
/* 复选 */
.checkbox-wrap .layui-form-checkbox, .checkbox-wrap .layui-input-inline-checkbox .layui-form-checkbox {float: right;}
.checkbox-wrap .layui-form-checkbox[lay-skin=primary] {margin-top: 4px;padding-left: 20px;}
.checkbox-wrap .layui-input-inline-checkbox span {color: #666;}
.checkbox-wrap .layui-input-block {margin-left: 35px;}
.checkbox-wrap .layui-input-inline-checkbox .layui-form-checkbox[lay-skin=primary] {margin-top: 8px;}
/* 图片上传 */
.edit-attribute .attr-wrap .restore-wrap .img-upload .img-block {padding: 4px;margin-right: 0;float: right;}
.edit-attribute .attr-wrap .restore-wrap .img-block .operation{position: absolute;width: 100%;height: 100%;background: rgba(0,0,0,.6);flex-direction: column;display: none;top:0;}
.edit-attribute .attr-wrap .restore-wrap .img-block:hover .operation {display: flex;}
.edit-attribute .attr-wrap .restore-wrap .img-block .operation-warp {flex: 1;height: 0;display: flex;align-items: center;justify-content: center;color: #fff;}
.edit-attribute .attr-wrap .restore-wrap .img-block .iconfont {margin: 0 3px;font-size: 16px!important;}
.edit-attribute .attr-wrap .restore-wrap .img-block .operation .js-replace{line-height: 1;color: #fff;text-align: center;padding: 5px 0;background: rgba(0,0,0,.7);font-size: 12px;}
.edit-attribute .attr-wrap .restore-wrap .img-block .icon-wrap:hover .operation{display: block;}
.edit-attribute .attr-wrap .restore-wrap .img-block .upload-img-box:hover .operation{display: block;}
.img-upload + .diy-word-aux {margin-left: 15px;}
.preview-wrap .preview-restore-wrap .diy-view-wrap .preview-head .nav-tabbar.style-1{}
.preview-wrap .preview-restore-wrap .diy-view-wrap .preview-head .nav-tabbar.style-1 .preview-head-div {background: url(../img/preview_head.png) no-repeat 50%/cover;font-size: 16px;height: 64px;line-height: 90px;cursor: pointer;}
.preview-wrap .preview-restore-wrap .diy-view-wrap .preview-head .nav-tabbar.style-1 .preview-head-div span {display: inline-block;padding: 0 15px 0 15px;}
.preview-wrap .preview-restore-wrap .diy-view-wrap .preview-head .nav-tabbar.style-1.center .preview-head-div span{padding-right:20px;width: 160px;margin: 0 auto;overflow: hidden;text-overflow: ellipsis;white-space: nowrap;}
.preview-wrap .preview-restore-wrap .diy-view-wrap .preview-head .nav-tabbar.style-2{}
.preview-wrap .preview-restore-wrap .diy-view-wrap .preview-head .nav-tabbar.style-2 .preview-head-div {background: url(../img/preview_head.png) no-repeat 50%/cover;height: 64px;cursor: pointer;padding: 0 15px;line-height: 90px;}
.preview-wrap .preview-restore-wrap .diy-view-wrap .preview-head .nav-tabbar.style-2 .preview-head-div span{font-size: 16px;}
.preview-wrap .preview-restore-wrap .diy-view-wrap .preview-head .nav-tabbar.style-2 img{margin-right: 15px;max-width:150px;height: 28px;}
.preview-wrap .preview-restore-wrap .diy-view-wrap .preview-head .nav-tabbar.style-3{}
.preview-wrap .preview-restore-wrap .diy-view-wrap .preview-head .nav-tabbar.style-3 .preview-head-div {background: url(../img/preview_head.png) no-repeat 50%/cover;height: 64px;cursor: pointer;padding: 0 15px;line-height: 90px;}
.preview-wrap .preview-restore-wrap .diy-view-wrap .preview-head .nav-tabbar.style-3 .preview-head-div .img-text-search{padding-right: 100px;display: flex;align-items: center;padding-top: 28px;}
.preview-wrap .preview-restore-wrap .diy-view-wrap .preview-head .nav-tabbar.style-3 .preview-head-div .img-text-search img {margin-right: 10px;height: 30px;max-width: 85px;}
.preview-wrap .preview-restore-wrap .diy-view-wrap .preview-head .nav-tabbar.style-3 .preview-head-div .img-text-search .top-search-box {flex:1;width: 80%;height: 30px;display: flex;align-items:center;border-radius:30px;background: rgb(255, 255, 255);color:#909399;line-height: 2.1;border:1px solid #E6E6E6;}
.preview-wrap .preview-restore-wrap .diy-view-wrap .preview-head .nav-tabbar.style-3 .preview-head-div .img-text-search .top-search-box i {margin-right: 5px;margin-left: 10px;}
.preview-wrap .preview-restore-wrap .diy-view-wrap .preview-head .nav-tabbar.style-4{}
.preview-wrap .preview-restore-wrap .diy-view-wrap .preview-head .nav-tabbar.style-4 .preview-head-div {background: url(../img/preview_head.png) no-repeat 50%/cover;height: 64px;cursor: pointer;padding: 0 15px;line-height: 90px;display: flex;}
.preview-wrap .preview-restore-wrap .diy-view-wrap .preview-head .nav-tabbar.style-4 span.store-name{margin: 0 5px;font-size: 16px;}
.preview-wrap .preview-restore-wrap .diy-view-wrap .preview-head .nav-tabbar.style-4 .nearby-store-name{display: inline-block;margin: -1px 5px 0;}
.preview-wrap .preview-restore-wrap .diy-view-wrap .preview-head .nav-tabbar.style-4 .nearby-store-name span{background: rgba(0,0,0,.3);font-size: 12px;border-radius: 20px;padding: 5px 10px;}
.preview-wrap .preview-restore-wrap .diy-view-wrap .preview-head .nav-tabbar.style-4 i:first-child{font-size: 18px;}
.preview-wrap .preview-restore-wrap .diy-view-wrap .preview-head .nav-tabbar.style-4 i:last-child{font-size: 14px;}
.diy-word-aux {margin-left: 95px;display: block;margin-top: 5px;color: #B2B2B2;font-size: 12px;line-height: 1.6;}
.layui-layer-page .layui-layer-content {overflow: auto !important;}
.top-full-screen .layui-layout-admin .layui-body{padding-right: 0 !important;width: 100% !important;margin-left: 0 !important;}
.top-full-screen .layui-layout-admin .layui-body .body-wrap{margin-top: 0 !important;}
.top-full-screen .custom-save{display: flex;justify-content: space-between;align-items: center;padding: 10px 0;border-bottom: 1px solid #ececec;}
/*.top-full-screen .custom-save .layui-btn{background-color: #fff;}*/
/*.top-full-screen .cancel-btn{border-color: #ececec;color: #333;}*/
/*.top-full-screen .cancel-btn:hover{color: #333;}*/
.bg-select .bg-select-ul{text-align:right}
.bg-select .bg-select-ul li{display:inline-block;width:20px;height:20px;border-radius:3px;border:1px solid #d7d7d7;vertical-align:middle;cursor:pointer;padding:2px;box-sizing:border-box;margin-left:5px}
.bg-select .bg-select-ul li div{width:100%;height:100%;border-radius:3px}
/* 超出单行影藏 */
.using-hidden {overflow: hidden;text-overflow: ellipsis;white-space: nowrap;}
/* 超出两行影藏 */
.multi-hidden {overflow: hidden;text-overflow: ellipsis;display: -webkit-box;-webkit-line-clamp: 2;-webkit-box-orient: vertical;}
/* 商品来源选择 */
.source-selected {display: flex;flex-wrap: wrap;}
.source-selected .source {flex: 1;}
.source-selected .source-item,.template-selected .source-item {width: 46px;height: 32px;text-align: center;border: 1px solid #e5e5e5;padding: 5px;cursor: pointer;background: #ffffff;box-sizing: border-box;border-right: 1px transparent solid;display: flex;align-items: center;justify-content: center;color: #909399;}
.source-selected .source-item:last-child,.template-selected .source-item:last-child{border-right: 1px solid #e5e5e5;}
/* 列表样式 */
.list-style .layui-input-block{margin-left: 40px !important;}
.template-selected {display: flex;flex-wrap: wrap;margin-left: 50px;}
.style-selected{display: flex;flex-wrap: wrap;margin-top: 10px;margin-left: 50px;}
.style-selected .layui-form-radio:nth-child(3n){margin-right: 0;}
/* 图片和图标选择 */
.icon-img-upload {width: 66px;height: 66px;font-size: 66px;display: flex;align-items: center;justify-items: center;border: 1px solid #CCCCCC;text-align: center;margin-right: 10px;position: relative;}
.icon-img-upload .add {color: var(--base-color);font-size: 26px;margin: 0 auto;width: 66px;height: 66px;line-height: 66px;text-align: center;cursor: pointer;}
.icon-img-upload img {max-width: 100%;max-height: 100%;width: 100%;}
.icon-img-upload .operation {position: absolute;left: 0;top: 0;width: 100%;height: 100%;background: rgba(0, 0, 0, 0.5);color: #fff;display: none;flex-direction: column;z-index: 5;}
.icon-img-upload:hover .operation {display: flex;}
.icon-img-upload .operation .operation-warp {flex: 1;height: 0;display: flex;align-items: center;justify-content: center;}
.icon-img-upload .operation-warp i {margin: 0 2px;cursor: pointer;}
.icon-img-upload .operation .js-replace {height: 24px;color: #fff;background: rgba(0, 0, 0, 0.5);font-size: 12px;line-height: 24px;cursor: pointer;}
.common-set .word-aux{margin: 0 0 0 100px;padding: 0;}
/* 选择图标风格 */
.select-icon-style {position: fixed;width: 100vw;height: 100vh;left: 0;top: 0;z-index: 9999;}
.select-icon-style .icon-style-wrap {position: absolute;background: #fff;border: 1px solid #ddd;right: 40px;margin-top: 15px;}
.select-icon-style .icon-style-wrap iframe {width: 100%;height: 100%;}

5493
public/static/ext/diyview/css/font/iconfont.css Executable file
View File

File diff suppressed because it is too large Load Diff

33
public/static/ext/diyview/css/member_icon/iconfont.css Executable file
View File

@@ -0,0 +1,33 @@
@font-face {font-family: "iconfont";
src: url('iconfont.eot?t=1603697914102'); /* IE9 */
src: url('iconfont.eot?t=1603697914102#iefix') format('embedded-opentype'), /* IE6-IE8 */
url('data:application/x-font-woff2;charset=utf-8;base64,d09GMgABAAAAAAWwAAsAAAAAC0gAAAViAAEAAAAAAAAAAAAAAAAAAAAAAAAAAAAAHEIGVgCDMgqJZIddATYCJAMUCwwABCAFhG0HShtrCSMRtntxApL9RYJ5yHh5RiMEi+kx+Qyk2+kMZFNWMFKkKxI8kw99Z77BaiIdpBJBQfh3r6ISADz0O//VvUBDSTSJo4jCCUxpOhPnemCjItRIvkWPvtuubTZO8/i/c9lunGzc8oiFvhlxgGpEbhJT21j4x2DvTSim/zlmunw+sPw2G9DUsoIqAEd7A5zNOi6L7E7lHM/9Fti5rTqYhOuBAIQoGcjwVa8PFccLCWbtLp3aQHWo8AgcoUrlgJ0JciFRyxSqA5il/Tz5kRcqQEkV/MraHb3tUf551PN1bHRwNJorCLCLMwC47QMYIAPAgZxAU3cwQ5ChiUTQeK48AEFF0aKGFX9e+vm6YBAWr0MSIfzDAxiKI0AaeJGRsOWFfODYEgUYPC9OAQrPS7OixeuQMy0iSdkhADYgD0A+8JIEbTXBKaTesZ7RGCeE0YR/i01wVtdiAB2S2p5o1zPq7g5LN6i+r+twFq8jdPMzk0ioibSCAoi5VU28JZVfnHXkaiiERNaGlF3887lNayrp2NOpFsb3//PJpJbMLeMwBkxX+Wti7d0DNariIOYZg8WNwq8X04Y5mZhMGyEhtL+/kJPTQT8xhFyF/VS++9MEQgHGVJKRrv7AeylGnJimStTf3yBJK4yrQUzh33/7q3Ku4jCAyMr//5Sg2ynH2iiKYWMkM/z8xGrPKItRo/XFv2Fd6Y+CgeuvqO5qU5adZjLlwCBtSKjLWRJI/aSLNBYHay25e0sG0HHO50vBIcYIx8MUHLFBudrBmCvkTqdbfblEiS1e6wTYJpw/HePwPuTWfM32ys4+UHWdE8UT8gR3pI3ewGm5LFFWV4ZEU+uGGvyeKccRW4Vx/8UIvuJSEcuhK9FszNaf3UBmmaOta7xrfUJ6XzqtVM49qTDpbYs6xFqAshGV0MXGawcCCp2Ofhv/sKFeui5s6aCTxy5fPlpIo0zz6KBK9E9NMJ26/FXqWDr5KtSoXKNCBvzojUY2anQDU3je8SWXLi06PqVzONAME3HunsRWI2sJ41Y/ad0aVTwbEpxpcQMrKsLXqFoJh4N5SaPiBnlY5bg0J7kRCn/rtn5id9dML5te001/ONf6ZGT/8cNrlitIqF66sa1feWUwaIrvZ4sc7hrppdOPPbvJiV+gKwy5xBqXVrtqQFECgd69AxodT0PB8nqVSq0vt66keHOWOLMdS53TGcNWR4hkz57uXIof4FzSG17nlpjLMVuc3rXTPJo+++VsXfOszWw5+q7zrtZS47aeuyh0zafpTl34hL5QcJVszKhHIeMVYZPncGV7xqlT77o1Dn4+DT+198H0ypbKuqTwesV7Fi/h8zUPXu150TFZYom548MdDxua55kbWk6LT5NKcu+OykalY29txWozwWAAQDDIqMBAwlb2jjUkrGUDWHZEZ5dYwd4/CzUvvP3eylL6m2q4IHruHF/xi5zBtRzZWLuwGInZ+zo7YQv/cnm1lO9yifVOl1yCAvsNZ7cu2cNtdveL0boUGSFULgsoRSQwqgQkx2aAxKAAZKpyIKTz7zdw6AuGpAYgzQQAwmoXUGangLEqRHLsPZC4vQOZNRgIDYnjRIOkWM67g8AoSsp/xEXfWVGrOz37CvdqjNi5Gv4JCeylNErc0Qs6SBFrwttlqpas9C2d4WZomp4G6SsUGnnVYR/HNuiLoqJvJzscBEZRUv4jLvrOKt115/n+K9yrMRJR8UP9hAQenNIoSYC8iLpEFZtSGN4uUwpYsrfMvqUzGdAIoZ6G4GkVCo18hsCwj6mTTSqKqpe085h9oVXlP08ilDDCiURkLPuy87oKHn/PqxINFKucTVfxZAIAAA==') format('woff2'),
url('iconfont.woff?t=1603697914102') format('woff'),
url('iconfont.ttf?t=1603697914102') format('truetype'), /* chrome, firefox, opera, Safari, Android, iOS 4.2+ */
url('iconfont.svg?t=1603697914102#iconfont') format('svg'); /* iOS 4.1- */
}
.iconfont {
font-family: "iconfont" !important;
font-size: 16px;
font-style: normal;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
.icon-right:before {
content: "\e6a3";
}
.icon-shezhi:before {
content: "\e638";
}
.icon-delete:before {
content: "\e61e";
}
.icon-bianji:before {
content: "\e63c";
}

BIN
public/static/ext/diyview/css/member_icon/iconfont.eot Executable file
View File

Binary file not shown.

1
public/static/ext/diyview/css/member_icon/iconfont.js Executable file
View File

File diff suppressed because one or more lines are too long

37
public/static/ext/diyview/css/member_icon/iconfont.json Executable file
View File

@@ -0,0 +1,37 @@
{
"id": "",
"name": "",
"font_family": "iconfont",
"css_prefix_text": "icon-",
"description": "",
"glyphs": [
{
"icon_id": "56027336",
"name": "right",
"font_class": "right",
"unicode": "e6a3",
"unicode_decimal": 59043
},
{
"icon_id": "56027364",
"name": "设置",
"font_class": "shezhi",
"unicode": "e638",
"unicode_decimal": 58936
},
{
"icon_id": "376362",
"name": "删除",
"font_class": "delete",
"unicode": "e61e",
"unicode_decimal": 58910
},
{
"icon_id": "1472556",
"name": "编辑",
"font_class": "bianji",
"unicode": "e63c",
"unicode_decimal": 58940
}
]
}

38
public/static/ext/diyview/css/member_icon/iconfont.svg Executable file
View File

@@ -0,0 +1,38 @@
<?xml version="1.0" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd" >
<!--
2013-9-30: Created.
-->
<svg>
<metadata>
Created by iconfont
</metadata>
<defs>
<font id="iconfont" horiz-adv-x="1024" >
<font-face
font-family="iconfont"
font-weight="500"
font-stretch="normal"
units-per-em="1024"
ascent="896"
descent="-128"
/>
<missing-glyph />
<glyph glyph-name="right" unicode="&#59043;" d="M761.056 363.872c0.512 0.992 1.344 1.824 1.792 2.848 8.8 18.304 5.92 40.704-9.664 55.424L399.936 756.256c-19.264 18.208-49.632 17.344-67.872-1.888-18.208-19.264-17.376-49.632 1.888-67.872l316.96-299.84-315.712-304.288c-19.072-18.4-19.648-48.768-1.248-67.872 9.408-9.792 21.984-14.688 34.56-14.688 12 0 24 4.48 33.312 13.44l350.048 337.376c0.672 0.672 0.928 1.6 1.6 2.304 0.512 0.48 1.056 0.832 1.568 1.344C757.76 357.12 759.2 360.608 761.056 363.872z" horiz-adv-x="1024" />
<glyph glyph-name="shezhi" unicode="&#58936;" d="M992 285.866667c-4.266667-27.733333-21.333333-46.933333-42.666667-46.933334h-4.266666c-70.4 0-128-57.6-128-130.133333 0-23.466667 10.666667-49.066667 10.666666-49.066667 10.666667-25.6 2.133333-55.466667-19.2-70.4h-2.133333L682.666667-81.066667h-2.133334c-6.4-2.133333-14.933333-4.266667-23.466666-4.266666-17.066667 0-36.266667 8.533333-46.933334 19.2-14.933333 17.066667-64 61.866667-102.4 61.866666-38.4 0-87.466667-44.8-102.4-59.733333-10.666667-12.8-27.733333-19.2-46.933333-19.2-8.533333 0-17.066667 2.133333-23.466667 4.266667h-2.133333L213.333333-10.666667h-2.133333c-21.333333 14.933333-29.866667 46.933333-19.2 70.4 0 0 10.666667 25.6 10.666667 49.066667 0 70.4-57.6 130.133333-128 130.133333-19.2 0-36.266667 17.066667-42.666667 46.933334 0 2.133333-10.666667 55.466667-10.666667 98.133333 0 42.666667 10.666667 96 10.666667 98.133333 4.266667 27.733333 21.333333 46.933333 42.666667 46.933334h4.266666c70.4 0 128 57.6 128 130.133333 0 23.466667-10.666667 49.066667-10.666666 49.066667-12.8 21.333333-4.266667 53.333333 19.2 68.266666h2.133333l128 70.4h2.133333c4.266667 4.266667 10.666667 6.4 19.2 6.4 17.066667 0 34.133333-6.4 46.933334-19.2 14.933333-14.933333 61.866667-57.6 100.266666-57.6 38.4 0 85.333333 40.533333 100.266667 55.466667 10.666667 12.8 27.733333 19.2 44.8 19.2 8.533333 0 17.066667-2.133333 23.466667-4.266667h2.133333l123.733333-68.266666h2.133334c21.333333-14.933333 29.866667-46.933333 19.2-70.4 0 0-10.666667-25.6-10.666667-49.066667 0-70.4 57.6-130.133333 128-130.133333h4.266667c19.2 0 36.266667-17.066667 42.666666-46.933334 0-2.133333 10.666667-55.466667 10.666667-98.133333-2.133333-42.666667-12.8-96-12.8-98.133333z m-40.533333 187.733333c-2.133333 6.4-2.133333 8.533333-4.266667 10.666667-93.866667 0-170.666667 76.8-170.666667 172.8 0 29.866667 10.666667 59.733333 14.933334 66.133333 2.133333 6.4 0 14.933333-4.266667 19.2l-119.466667 66.133333H661.333333c-6.4 0-12.8-2.133333-14.933333-6.4-6.4-6.4-68.266667-70.4-132.266667-70.4s-125.866667 64-132.266666 70.4c-2.133333 6.4-8.533333 8.533333-14.933334 8.533334h-6.4l-123.733333-68.266667c-4.266667-4.266667-6.4-12.8-4.266667-19.2 0 0 14.933333-34.133333 14.933334-66.133333 0-93.866667-76.8-172.8-170.666667-172.8-2.133333-2.133333-2.133333-6.4-4.266667-10.666667 0 0-8.533333-51.2-8.533333-89.6 0-38.4 8.533333-89.6 8.533333-89.6 2.133333-6.4 2.133333-8.533333 4.266667-10.666667 93.866667 0 170.666667-76.8 170.666667-172.8 0-27.733333-10.666667-55.466667-14.933334-66.133333-2.133333-6.4 0-14.933333 4.266667-19.2l117.333333-66.133333h6.4c6.4 0 12.8 2.133333 14.933334 6.4 2.133333 2.133333 68.266667 74.666667 134.4 74.666666 66.133333 0 128-68.266667 134.4-74.666666 2.133333-2.133333 8.533333-6.4 14.933333-6.4h6.4l121.6 68.266666c4.266667 4.266667 6.4 12.8 4.266667 19.2-2.133333 4.266667-14.933333 34.133333-14.933334 66.133334 0 93.866667 76.8 172.8 170.666667 172.8 2.133333 2.133333 2.133333 6.4 4.266667 10.666666 0 0 8.533333 51.2 8.533333 89.6 0 36.266667-8.533333 87.466667-8.533333 87.466667zM512 213.333333c-93.866667 0-170.666667 76.8-170.666667 170.666667s76.8 170.666667 170.666667 170.666667 170.666667-76.8 170.666667-170.666667-76.8-170.666667-170.666667-170.666667z m0 300.8c-70.4 0-130.133333-57.6-130.133333-130.133333 0-72.533333 57.6-130.133333 130.133333-130.133333s130.133333 57.6 130.133333 130.133333c0 72.533333-59.733333 130.133333-130.133333 130.133333z" horiz-adv-x="1024" />
<glyph glyph-name="delete" unicode="&#58910;" d="M837.818 581.455l0-581.818c0-51.433-41.705-93.091-93.091-93.091l-465.455 0c-51.433 0-93.091 41.705-93.091 93.091l0 581.818c-25.693 0-46.545 20.852-46.545 46.545l0 46.545c0 25.693 20.852 46.545 46.545 46.545l139.636 0 0 46.545c0 25.74 20.852 46.545 46.545 46.545l279.273 0c25.693 0 46.545-20.852 46.545-46.545l0-46.545 139.636 0c25.693 0 46.545-20.852 46.545-46.545l0-46.545c0-25.74-20.852-46.545-46.545-46.545zM232.727 581.455l0-581.818c0-25.693 20.852-46.545 46.545-46.545l465.455 0c25.693 0 46.545 20.852 46.545 46.545l0 581.818c-26.159 0-526.569 0-558.545 0zM372.364 721.091l0 23.273c0 12.847 10.426 23.273 23.273 23.273l232.727 0c12.847 0 23.273-10.426 23.273-23.273l0-23.273c-22.528 0-279.273 0-279.273 0M814.545 674.545l-605.091 0c-12.847 0-23.273-10.426-23.273-23.273 0-12.847 10.426-23.273 23.273-23.273l605.091 0c12.847 0 23.273 10.426 23.273 23.273 0 12.847-10.426 23.273-23.273 23.273zM372.364 465.091c12.847 0 23.273-10.426 23.273-23.273l0-325.818c0-12.847-10.426-23.273-23.273-23.273-12.847 0-23.273 10.426-23.273 23.273l0 325.818c0 12.847 10.426 23.273 23.273 23.273zM512 465.091c12.847 0 23.273-10.426 23.273-23.273l0-325.818c0-12.847-10.426-23.273-23.273-23.273s-23.273 10.426-23.273 23.273l0 325.818c0 12.847 10.426 23.273 23.273 23.273zM651.636 465.091c12.847 0 23.273-10.426 23.273-23.273l0-325.818c0-12.847-10.426-23.273-23.273-23.273s-23.273 10.426-23.273 23.273l0 325.818c0 12.847 10.426 23.273 23.273 23.273z" horiz-adv-x="1024" />
<glyph glyph-name="bianji" unicode="&#58940;" d="M300.8 172.8c0-12.8 0-19.2 6.4-25.6 6.4-6.4 12.8-6.4 19.2-6.4h6.4l172.8 44.8 448 448c19.2 19.2 32 51.2 0 83.2l-64 64c-32 32-64 32-96-6.4l-448-435.2-44.8-166.4zM825.6 736c6.4 6.4 19.2 6.4 25.6 0l44.8-44.8c6.4-6.4 6.4-19.2 0-25.6l-44.8-44.8-70.4 70.4 44.8 44.8zM736 646.4l70.4-70.4-313.6-313.6-70.4 70.4L736 646.4zM384 288l64-64-83.2-19.2L384 288z m544 204.8c-25.6 0-38.4-12.8-38.4-25.6v-409.6c0-19.2-19.2-38.4-38.4-38.4H166.4c-19.2 0-38.4 19.2-38.4 38.4V716.8c0 19.2 19.2 38.4 38.4 38.4h448c12.8 0 25.6 12.8 25.6 32s-12.8 32-32 32H160c-51.2 0-96-44.8-96-96v-678.4c0-51.2 44.8-96 96-96h704c51.2 0 96 44.8 96 96v416c0 19.2-12.8 32-32 32z" horiz-adv-x="1024" />
</font>
</defs></svg>
Side by Side

After

Width:  |  Height:  |  Size: 6.6 KiB

BIN
public/static/ext/diyview/css/member_icon/iconfont.ttf Executable file
View File

Binary file not shown.

BIN
public/static/ext/diyview/css/member_icon/iconfont.woff Executable file
View File

Binary file not shown.

BIN
public/static/ext/diyview/css/member_icon/iconfont.woff2 Executable file
View File

Binary file not shown.

79
public/static/ext/diyview/css/member_index.css Executable file
View File

@@ -0,0 +1,79 @@
.preview-wrap{overflow: hidden;margin-left: 290px;margin-right: 400px;}
/* 新的样式 */
.preview-block{background-color: #fff;}
.color-list>.colorSelector{margin-right: 20px;}
.color-list>.colorSelector:nth-last-child(2){margin-right: 16px;}
.color-list>.colorSelector.selected,.color-list .layui-form-item.selected .colorSelector{border: 1px solid #FF6A00;}
.color-list .layui-form-item{display: inline-block;margin-bottom: 0;}
.color-list .layui-form-label{display: none;}
.color-list .layui-form-label.sm + .layui-input-block{margin-left: 0;line-height: initial;min-height: initial;}
.color-list .diy-color-wrap{width: 85px; display: inline-block;padding: 0 5px;height: 28px;line-height: 26px;}
.color-list .diy-color-wrap .flex_left{margin-left: 50px;}
.color-list .diy-color-wrap input{width: 55px;border: none;font-size: 12px;}
.color-list .diy-color-wrap .color-selector-reset{line-height: initial;font-size: 12px;display: none;}
/*.color-list .diy-color-wrap .colorSelector{margin-right: 0;}*/
.color-list .diy-color-wrap .flex_fill{position: absolute;top: 68px;left: 34px;}
.diy-text-color .flex{display: flex;}
.diy-text-color .flex .flex_left{display: flex; align-items: center;}
.diy-text-color .flex .flex_left .curr_color{display: none;}
/* 会员中心 */
.member-info .preview-draggable{background-color: #ff454f;background-size: 100% auto;background-position: left top;}
.member-info .preview-draggable .info{position: relative;display: flex;align-items: center;padding: 15px;color: #fff;}
.member-info .preview-draggable .info .info-img{width: 50px;height: 50px;border: 3px solid #fff;margin-right: 8px;-webkit-border-radius: 50%;-moz-border-radius: 50%;border-radius: 50%;}
.member-info .preview-draggable .info .info-img img{max-width: 100%;max-height: 100%;}
.member-info .preview-draggable .info .info-set{position: absolute;width: 20px;height: 20px;right: 15px;top: 15px;}
.member-info .preview-draggable .info .info-set i {font-size: 18px;color: #fff;line-height: 1;}
.member-info .preview-draggable .info .info-content .info-name{font-size: 16px;font-weight: bold;}
.member-info .preview-draggable .info .info-content .info-grad{text-align: center;display: block;color: #e7e525;background: rgba(0, 0, 0, 0.5);-webkit-border-radius: 50px;-moz-border-radius: 50px;border-radius: 50px;font-size: 12px;margin-top: 5px;padding: 5px 8px;line-height: 1;}
.member-info .preview-draggable .wallet{margin-top: 10px;display: flex;justify-content: space-around;align-items: center;color: #fff;padding-bottom: 10px;}
.member-info .preview-draggable .wallet .wallet-item{padding: 0 30px;}
.member-info .preview-draggable .wallet .wallet-item-border{height: 30px;width: 1px;background-color: rgba(255,255,255,.5);}
.member-info .preview-draggable .wallet span{display: flex;justify-content: center;}
/* 订单信息 */
.order-info .preview-draggable{background-color: #fff;padding: 0 15px;}
.order-info .preview-draggable .order-info-title{display: flex;align-items: center;height: 50px;justify-content: space-between;border-bottom: 1px solid #e7e7e7;}
.order-info .preview-draggable .order-info-title .all-order{font-size: 16px;font-weight: bold;}
.order-info .preview-draggable .order-info-title .check-order,.order-info .preview-draggable .order-info-title .check-order i{color: #a3a3a3;font-size: 12px;}
.order-info .preview-draggable .order-info-content{display: flex;justify-content: space-between;padding: 10px 0;text-align: center;}
.order-info .preview-draggable .order-info-content .content-item-icon{width: 25px;height: 25px;margin: 0 auto 5px;}
.order-info .preview-draggable .order-info-content .content-item-icon img{max-width: 100%;max-height: 100%;}
/* 会员等级 */
.member-grade .preview-draggable{display: flex;justify-content: space-between;align-items: center;height: 44px;margin: 20px 10px;color: #e5ce75;border-radius: 6px;background: #1D1D1D;padding: 0 10px;background: -webkit-linear-gradient(left, #683f00, #1D1D1D);background: linear-gradient(to right, #683f00, #1D1D1D);}
/* 常用工具 */
.common-tools .preview-draggable{padding: 10px 0;}
.common-tools .preview-draggable .tools-title{padding: 0 10px;height: 40px;line-height: 40px;}
.common-tools .preview-draggable .tools-title span{font-size: 16px;font-weight: bold;}
.common-tools .preview-draggable .tools-list{padding: 0;display: flex;flex-wrap: wrap;}
.common-tools .preview-draggable .tools-list .tools-item{display: flex;flex-direction: column;justify-content: center;align-items: center;width: 92px;height: 48px;padding: 10px 0;}
.common-tools .preview-draggable .tools-list .tools-item .tools-item-icon{display: flex;align-items: center;justify-content: center;width: 22px;height: 22px;margin-bottom: 5px;}
.common-tools .preview-draggable .tools-list .tools-item img{max-width: 100%;max-height: 100%;}
.common-tools .preview-draggable .tools-list.list{display: block;}
.common-tools .preview-draggable .tools-list.list .tools-item{display: block;width: initial;height: initial;padding: 12px 10px;margin: 0 10px;border-bottom: 1px solid #e5e5e5;}
.common-tools .preview-draggable .tools-list.list .tools-item:first-child{border-bottom: 1px solid #e5e5e5;}
.common-tools .preview-draggable .tools-list.list .tools-item:last-child{border-bottom: none;}
.common-tools .preview-draggable .tools-list.list .tools-item .tools-item-icon{display: inline-block;width: 22px;height: 22px;margin-right: 5px;}
.common-tools .preview-draggable .tools-list.list .tools-item i{float: right;color: #a3a3a3;}
.common-tools .preview-draggable .tools-list.list.insert-gap{background: #F7F8FA;}
.common-tools .preview-draggable .tools-list.list.insert-gap li{background: #fff;margin-bottom: 10px;border-bottom: 0 !important;}
.common-tools .preview-draggable .tools-list.list.insert-gap li:last-child{margin-bottom: 0;}
.menu-list{margin-left:10px;}
/*#f2f4f6*/
.menu-list>ul{margin-bottom: 10px;}
.menu-list>ul>li{background: #ffffff;border:1px solid #e5e5e5;position:relative;border-top: none;-webkit-user-select: none;-moz-user-select: none;-ms-user-select: none;user-select: none;height: 50px;line-height: 50px;}
.menu-list>ul>li:first-child{border-top:1px solid #e5e5e5;}
.menu-list>ul>li .layui-form-checkbox{display: inline-block;margin-left: 10px;}
.menu-list>ul>li .info-wrap{display: inline-block;width: 65%;padding-right:10px;}
.menu-list>ul>li .info-wrap .tips{color:#a3a3a3;}
.menu-list>ul>li .info-wrap span{cursor: pointer;}
.menu-list>ul>li i{color: #B2B2B2;font-size: 18px;vertical-align: middle;float: right;cursor: pointer;margin-right: 10px;}
.img-upload .upload-img-block{width: 120px;height: 50px;}
.upload-img-block .del{width: 15px;height: 15px;line-height: 14px;}
.js-select-link-text{margin-right: 10px; font-size: 12px; display: inline-block; height: 36px; line-height: 36px; vertical-align: top; white-space: nowrap; overflow: hidden; max-width: 80%; text-overflow: ellipsis;}

BIN
public/static/ext/diyview/img/component_down.png Executable file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 767 B

BIN
public/static/ext/diyview/img/component_right.png Executable file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 665 B

BIN
public/static/ext/diyview/img/crack_figure.png Executable file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 28 KiB

BIN
public/static/ext/diyview/img/hot.png Executable file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 1.0 KiB

BIN
public/static/ext/diyview/img/hot_component.png Executable file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 2.2 KiB

BIN
public/static/ext/diyview/img/icon_bg/bg_01.png Executable file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 837 B

BIN
public/static/ext/diyview/img/icon_bg/bg_02.png Executable file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 1.9 KiB

BIN
public/static/ext/diyview/img/icon_bg/bg_03.png Executable file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 2.2 KiB

BIN
public/static/ext/diyview/img/icon_bg/bg_04.png Executable file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 2.6 KiB

BIN
public/static/ext/diyview/img/icon_bg/bg_05.png Executable file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 4.4 KiB

BIN
public/static/ext/diyview/img/icon_bg/bg_06.png Executable file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 1.1 KiB

BIN
public/static/ext/diyview/img/iphone_shell.png Executable file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 33 KiB

BIN
public/static/ext/diyview/img/jiazai.gif Executable file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 1.5 KiB

BIN
public/static/ext/diyview/img/member_index/member_bg.png Executable file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 5.1 KiB

BIN
public/static/ext/diyview/img/member_index/member_head.png Executable file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 3.6 KiB

BIN
public/static/ext/diyview/img/nav_style/img_icon.png Executable file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 7.5 KiB

BIN
public/static/ext/diyview/img/nav_style/img_icon_1.png Executable file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 6.9 KiB

BIN
public/static/ext/diyview/img/nav_style/img_link.png Executable file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 315 B

BIN
public/static/ext/diyview/img/nav_style/img_link_hover.png Executable file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 316 B

BIN
public/static/ext/diyview/img/nav_style/nav_style0.png Executable file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 12 KiB

BIN
public/static/ext/diyview/img/nav_style/nav_style1.png Executable file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 15 KiB

BIN
public/static/ext/diyview/img/nav_style/nav_style2.png Executable file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 16 KiB

BIN
public/static/ext/diyview/img/nav_style/nav_style_store.png Executable file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 19 KiB

BIN
public/static/ext/diyview/img/nav_style/text_left.png Executable file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 1.1 KiB

BIN
public/static/ext/diyview/img/nav_style/text_left_hover.png Executable file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 1.1 KiB

BIN
public/static/ext/diyview/img/nav_style/text_link.png Executable file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 228 B

BIN
public/static/ext/diyview/img/nav_style/text_link_hover.png Executable file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 222 B

BIN
public/static/ext/diyview/img/nav_style/text_right.png Executable file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 1.1 KiB

BIN
public/static/ext/diyview/img/nav_style/text_right_hover.png Executable file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 1.1 KiB

BIN
public/static/ext/diyview/img/preview/diy_page.jpg Executable file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 28 KiB

BIN
public/static/ext/diyview/img/preview/diy_store.jpg Executable file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 126 KiB

BIN
public/static/ext/diyview/img/preview/diy_view_goods_category.jpg Executable file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 78 KiB

BIN
public/static/ext/diyview/img/preview/diy_view_index.jpg Executable file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 111 KiB

BIN
public/static/ext/diyview/img/preview/diy_view_member_index.jpg Executable file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 75 KiB

BIN
public/static/ext/diyview/img/preview_head.png Executable file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 7.8 KiB

BIN
public/static/ext/diyview/img/preview_head_old.png Executable file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 3.9 KiB

BIN
public/static/ext/diyview/img/search/style1.png Executable file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 8.5 KiB

BIN
public/static/ext/diyview/img/search/style2.png Executable file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 7.7 KiB

BIN
public/static/ext/diyview/img/search/style3.png Executable file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 4.6 KiB

BIN
public/static/ext/diyview/img/search/style4.png Executable file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 4.5 KiB

BIN
public/static/ext/diyview/img/temp_component.png Executable file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 2.1 KiB

81
public/static/ext/diyview/js/async_load_css.js Executable file
View File

@@ -0,0 +1,81 @@
/**
* 异步加载外部CSS文件，并且回调
*/
function styleOnload(node, callback) {
// for IE6-9 and Opera
if (node.attachEvent) {
node.attachEvent('onload', callback);
// NOTICE:
// 1. "onload" will be fired in IE6-9 when the file is 404, but in
// this situation, Opera does nothing, so fallback to timeout.
// 2. "onerror" doesn't fire in any browsers!
}
// polling for Firefox, Chrome, Safari
else {
setTimeout(function () {
poll(node, callback);
}, 0); // for cache
}
}
function poll(node, callback) {
if (callback.isCalled) {
return;
}
var isLoaded = false;
if (/webkit/i.test(navigator.userAgent)) {// webkit
if (node['sheet']) {
isLoaded = true;
}
}
// for Firefox
else if (node['sheet']) {
try {
if (node['sheet'].cssRules) {
isLoaded = true;
}
} catch (ex) {
// NS_ERROR_DOM_SECURITY_ERR
if (ex.code === 1000) {
isLoaded = true;
}
}
}
if (isLoaded) {
// give time to render.
setTimeout(function () {
callback();
}, 1);
} else {
setTimeout(function () {
poll(node, callback);
}, 1);
}
}
// 我的动态创建LINK函数
function createLink(cssURL, lnkId, charset, media) {
var head = document.getElementsByTagName('head')[0], linkTag = null;
if (!cssURL) {
return false;
}
linkTag = document.createElement('link');
linkTag.setAttribute('id', (lnkId || 'dynamic-style'));
linkTag.setAttribute('rel', 'stylesheet');
linkTag.setAttribute('charset', (charset || 'utf-8'));
linkTag.setAttribute('media', (media || 'all'));
linkTag.setAttribute('type', 'text/css');
linkTag.href = cssURL;
head.appendChild(linkTag);
return linkTag;
}
/**
* demo
*/
//function loadcss() {
// var styleNode = createLink("http://localhost/niucloud/addon/system/DiyView/component/view/rubik_cube/css/rubik_cube.css");
// styleOnload(styleNode, function() {
// alert("loaded");
// });
//}

1358
public/static/ext/diyview/js/components.js Executable file
View File

File diff suppressed because it is too large Load Diff

866
public/static/ext/diyview/js/custom_template.js Executable file
View File

@@ -0,0 +1,866 @@
//最外层组件
var ncComponentHtml = '<div v-show="data.lazyLoadCss && data.lazyLoad" :key="data.id">';
ncComponentHtml += '<div class="preview-draggable" ' +
':style="{ ' +
'backgroundColor : data.pageBgColor, ' +
'paddingTop : data.margin.top + \'px\', ' +
'paddingBottom : data.margin.bottom + \'px\', ' +
'paddingLeft : data.margin.both + \'px\', ' +
'paddingRight : data.margin.both + \'px\' }" @click="$parent.changeCurrentIndex(data.index)">'; // 拖拽区域
ncComponentHtml += '<slot name="preview"></slot>';
ncComponentHtml += '<i class="del" v-show="data.isDelete !== 1" @click.stop="$parent.delComponent(data.index)" data-disabled="1">x</i>';
ncComponentHtml += '<div class="comp-title">{{ data.componentTitle }}</div>';
ncComponentHtml += '</div>';
ncComponentHtml += '<div class="edit-attribute" :data-have-edit="1">';
ncComponentHtml += '<div class="attr-wrap">';
ncComponentHtml += '<div class="restore-wrap">';
ncComponentHtml += '<div class="attr-title">';
ncComponentHtml += '<span class="title">{{data.componentTitle}}</span>';
ncComponentHtml += '<div class="tab-wrap">';
ncComponentHtml += '<span class="active bg-color" data-type="content">内容</span>';
ncComponentHtml += '<span data-type="style">样式</span>';
ncComponentHtml += '</div>';
ncComponentHtml += '</div>';
// 内容
ncComponentHtml += '<div class="edit-content-wrap">';
ncComponentHtml += '<slot name="edit-content"></slot>';
ncComponentHtml += '</div>';
// 样式
ncComponentHtml += '<div class="edit-style-wrap" style="display: none;">';
ncComponentHtml += '<slot name="edit-style"></slot>';
ncComponentHtml += '<common-set v-if="data.ignoreLoad" :ignore="data.ignore"></common-set>';
ncComponentHtml += '</div>';
ncComponentHtml += '</div>';
ncComponentHtml += '</div>';
ncComponentHtml += '</div>';
ncComponentHtml += '<div style="display:none;">';
ncComponentHtml += '<slot name="resource"></slot>';
ncComponentHtml += '</div>';
ncComponentHtml += '</div>';
var ncComponent = {
props: ["data"],
template: ncComponentHtml,
created: function () {
//如果当前添加的组件没有添加过资源
if (!this.$slots.resource) {
this.data.lazyLoadCss = true;
this.data.lazyLoad = true;
} else {
//检测是否只添加了JS或者CSS，没有添加默认为true
var countCss = 0, countJs = 0, outerCountJs = 0;
for (var i = 0; i < this.$slots.resource.length; i++) {
if (this.$slots.resource[i].componentOptions) {
if (this.$slots.resource[i].componentOptions.tag === "css") {
countCss++;
} else if (this.$slots.resource[i].componentOptions.tag === "js") {
countJs++;
//统计外部JS数量
if (!$.isEmptyObject(this.$slots.resource[i].componentOptions.propsData)) outerCountJs++;
}
}
}
if (countCss === 0) this.data.lazyLoadCss = true;
if (countJs === 0) this.data.lazyLoad = true;
this.data.outerCountJs = outerCountJs;
}
}
};
/**
* 手机端自定义模板Vue对象
*/
var vue = new Vue({
el: "#diyView",
data: {
//当前编辑的组件位置
currentIndex: -99,
globalLazyLoad: false,
//全局属性
global: {
name:$('#name').val(),
title: "页面" + $('#name').val().replace('DIY_VIEW_RANDOM_', ''),
pageBgColor: "#ffffff", // 页面背景颜色
topNavColor: "#ffffff",
topNavBg: false,
navBarSwitch: true, // 导航栏是否显示
navStyle: 1, // 导航栏风格
textNavColor: "#333333",
topNavImg: "",
moreLink: {
name: ""
},
//是否显示底部导航标识
openBottomNav: true,
textImgPosLink: 'center',
mpCollect: false,
// 弹框形式，不弹出 -1，首次弹出 1，每次弹出 0
popWindow: {
imageUrl: "",
count: -1,
show: 0,
link: {
name: ""
},
imgWidth: '',
imgHeight: ''
},
bgUrl: '',
imgWidth: '',
imgHeight: '',
// 公共模板属性，所有组件都继承，不需要重复定义，组件内部根据业务自行调用
template: {
pageBgColor: '', // 底部背景颜色
textColor: "#303133", // 文字颜色
componentBgColor: '', // 组件背景颜色
componentAngle: 'round', // 组件角标（round：圆角，right：直角）
topAroundRadius: 0, // 组件上圆角，命名缩减
bottomAroundRadius: 0, // 组件下圆角，命名缩减
elementBgColor: '', // 元素背景颜色
elementAngle: 'round', // 元素角标（round：圆角，right：直角）
topElementAroundRadius: 0, // 元素上圆角，命名缩减
bottomElementAroundRadius: 0, // 元素下圆角，命名缩减
margin: {
top: 0, // 上边距
bottom: 0, // 下边距
both: 0, // 左右边距
}
},
//公众号分享
wechatShareTitle:'',
wechatShareDesc:'',
wechatShareImage:'',
//小程序分享
weappShareTitle:'',
weappShareImage:'',
},
//自定义组件集合
data: [],
},
components: {
'nc-component': ncComponent,//最外层组件
},
created: function () {
if ($("#info").length) {
setTimeout(function () {
$('#diyView').css('visibility', 'visible');
}, 50);
} else {
$('#diyView').css('visibility', 'visible');
$('.loading-layer').hide();
$('.preview-wrap .preview-restore-wrap').css('visibility', 'visible');
}
},
mounted: function () {
this.refresh();
},
methods: {
addComponent: function (obj, other) {
//附加公共字段
obj.index = 0;
obj.sort = 0;
obj.lazyLoadCss = false; // 资源懒加载，防止看到界面缓慢加载
obj.lazyLoad = false; // 资源懒加载，防止看到界面缓慢加载
obj.outerCountJs = 0;
obj.ignore = []; // 忽略模板属性
obj.ignoreLoad = false; // 等待忽略数组赋值后加载
// obj.hidden = []; // 隐藏公共属性
obj.tempData = {}; // 临时数据
obj.id = ns.gen_non_duplicate(5);
//第一次添加组件时，添加以下字段
if (other) {
// 第一次添加组件时，添加以下字段
obj.addonName = other.addon_name; // 如果插件不存在，后台则会清除组件
obj.componentName = other.name;
obj.componentTitle = other.title;
obj.isDelete = parseInt(other.is_delete);
for (var key in this.global.template) {
obj[key] = typeof this.global.template[key] == 'object' ? JSON.parse(JSON.stringify(this.global.template[key])) : this.global.template[key];
}
if (!this.checkComponentIsAdd(obj.componentName)) {
this.autoSelected(obj.componentName);
return;
}
}
if (this.currentIndex === -99 || this.currentIndex === -98) {
this.data.push(obj);
// 添加组件后（不是编辑调用的），选择最后一个
if (other) this.currentIndex = this.data.length - 1;
}else {
// 查询当前选中索引，插入到指定位置
if (other && other.index) {
this.data.splice(other.index, 0, obj);// 指定下标
} else {
this.data.splice(++this.currentIndex, 0, obj);
}
}
$('.loading-layer').hide();
$('.preview-wrap .preview-restore-wrap').css('visibility', 'visible');
this.refresh();
var self = this;
setTimeout(function () {
if (obj.componentName !== "FloatBtn" && obj.componentName !== "FollowOfficialAccount") {
// 如果在末尾添加组件，则定位到最后的位置
if (self.currentIndex === -99 || ((self.currentIndex + 1) === self.data.length)) {
$(".preview-wrap .preview-restore-wrap .div-wrap").scrollTop($(".diy-view-wrap").height());
} else {
// 如果在其他位置添加组件，则定位到组件位置
var element = $(".draggable-element[data-index=" + self.currentIndex + "]");
var warp = $(".preview-wrap .preview-restore-wrap .div-wrap");
var height = 0;
$(".draggable-element:lt(" + (element.index() + 1) + ")").each(function (i) {
height += $(this).outerHeight();
});
height -= element.outerHeight() + 30;
warp.animate({scrollTop: height}, 300);
}
}
}, 50);
},
//检测组件是否允许添加，true：允许 false：不允许
checkComponentIsAdd: function (componentName) {
var component = $('.component-list ul li[data-name="' + componentName + '"]');
var maxCount = parseInt(component.attr('data-max-count'));
//maxCount为0时不处理
if (maxCount === 0) return true;
var count = 0;
//遍历已添加的自定义组件，检测是否超出数量
for (var i in this.data) if (this.data[i].componentName === componentName) count++;
if (count >= maxCount) return false;
else return true;
},
// 获取组件添加数量
getComponentAddCount: function (componentName) {
var count = 0;
//遍历已添加的自定义组件，检测是否超出数量
for (var i in this.data) if (this.data[i].componentName === componentName) count++;
return count;
},
//改变当前编辑的组件选中
changeCurrentIndex: function (sort) {
this.currentIndex = parseInt(sort);
this.refresh();
},
//改变当前的删除弹出框的显示状态
delComponent: function (i) {
if (i < -1) return; // 从0开始
var self = this;
layer.confirm('确定要删除吗?', {title: '操作提示'}, function (index) {
self.data.splice(i, 1);
// 如果组件全部删除，则选中页面设置
if(self.data.length === 0){
self.currentIndex = -99;
}
// 如果当前选中的组件不存在，则选择上一个
if(self.currentIndex === self.data.length){
self.currentIndex--;
}
self.refresh();
self.refreshQuick(true);
layer.close(index);
});
},
// 重置当前组件数据
resetComponent: function () {
if (this.currentIndex < 0) return; // 从0开始
// if (self.data.length < 1) return; // 重置全部用
var self = this;
layer.confirm('确认要重置组件默认数据吗?', {title: '操作提示'}, function (index) {
// 重置当前选中的组件数据
var current = $(".draggable-element[data-index=" + self.currentIndex + "]");
var id = current.attr('data-id');
var temp = {};
if ($("#info").length) {
var info = JSON.parse($("#info").val().toString());
if (Object.keys(info).length) {
for (var i = 0; i < info.value.length; i++) {
if (info.value[i].id === id) {
info.value[i].index = self.currentIndex;
info.value[i].sort = self.data[self.currentIndex].sort;
info.value[i].lazyLoadCss = true; // 资源懒加载，防止看到界面缓慢加载
info.value[i].lazyLoad = true; // 资源懒加载，防止看到界面缓慢加载
info.value[i].outerCountJs = self.data[self.currentIndex].outerCountJs;
info.value[i].ignore = self.data[self.currentIndex].ignore; // 忽略模板属性
info.value[i].tempData = self.data[self.currentIndex].tempData; // 临时数据
info.value[i].id = ns.gen_non_duplicate(5);
temp = info.value[i];
break;
}
}
$("#info").val(JSON.stringify(info));
}
}
// 如果是新添加的组件，要重置数据
if (Object.keys(temp).length === 0) {
var component = $('.component-list ul li[data-name="' + self.data[self.currentIndex].componentName + '"]');
var value = JSON.parse(component.attr('data-value'));
var index = self.currentIndex;
self.data.splice(index, 1);
self.addComponent(value, {
index: index, // 指定下标
name: component.attr('data-name'),
title: component.attr('title'),
addon_name: component.attr('data-addon-name'),
max_count: component.attr('data-max-count'),
is_delete: component.attr('data-is-delete')
});
} else {
self.data.splice(self.currentIndex, 1, temp);
}
setTimeout(function () {
fullScreenSize();
self.refreshQuick(true);
}, 10);
// 以下是重置全部数据，需要时放开，勿删！
// self.data = [];
// self.currentIndex = -99;
// setTimeout(function () {
// self.refreshComponent();
// }, 10 * 2);
layer.close(index);
});
},
// 上移组件
moveUpComponent: function () {
if ((this.currentIndex - 1) < 0) return; // 从0开始
var element = $(".draggable-element[data-index=" + this.currentIndex + "]");
var prev = element.prev('.draggable-element'); // 上一个组件
if(prev.length === 0) return;
var prevIndex = parseInt(prev.attr('data-index'));
var temp = this.deepClone(this.data[this.currentIndex]); // 当前选中组件
temp.id = ns.gen_non_duplicate(5); // 更新id，刷新组件数据
var temp2 = this.deepClone(this.data[prevIndex]); // 上个组件
temp2.id = ns.gen_non_duplicate(5); // 更新id，刷新组件数据
this.data[this.currentIndex] = temp2;
this.data[prevIndex] = temp;
this.changeCurrentIndex(prevIndex);
this.refreshQuick();
var self = this;
setTimeout(function () {
self.$forceUpdate();
},10);
},
// 下移组件
moveDownComponent: function () {
var element = $(".draggable-element[data-index=" + this.currentIndex + "]");
var next = element.next('.draggable-element'); // 上一个组件
if(next.length === 0) return; // 最后一个不能下移
var nextIndex = parseInt(next.attr('data-index'));
var temp = this.deepClone(this.data[this.currentIndex]); // 当前选中组件
temp.id = ns.gen_non_duplicate(5); // 更新id，刷新组件数据
var temp2 = this.deepClone(this.data[nextIndex]); // 下个组件
temp2.id = ns.gen_non_duplicate(5); // 更新id，刷新组件数据
this.data[this.currentIndex] = temp2;
this.data[nextIndex] = temp;
this.changeCurrentIndex(nextIndex);
this.refreshQuick();
var self = this;
setTimeout(function () {
self.$forceUpdate();
},10);
},
// 复制组件
copyComponent: function () {
if (this.currentIndex < 0) return; // 从0开始
var temp = this.deepClone(this.data[this.currentIndex]); // 当前选中组件
temp.index++;
temp.id = ns.gen_non_duplicate(5); // 更新id，刷新组件数据
var component = $('.component-list ul li[data-name="' + temp.componentName + '"]');
var maxCount = parseInt(component.attr('data-max-count'));
if (!this.checkComponentIsAdd(temp.componentName)) {
layer.msg(`无法复制，${temp.componentTitle}组件只能添加${maxCount}个`);
return;
}
var index = this.currentIndex + 1;
this.data.splice(index, 0, temp);
this.changeCurrentIndex(index);
this.refreshQuick(true);
},
// 深度拷贝对象
deepClone(source) {
if (typeof source !== 'object' || source == null) {
return source;
}
var target = Array.isArray(source) ? [] : {};
for (var key in source) {
if (Object.prototype.hasOwnProperty.call(source, key)) {
if (typeof source[key] === 'object' && source[key] !== null) {
target[key] = this.deepClone(source[key]);
} else {
target[key] = source[key];
}
}
}
return target;
},
//刷新数据排序
refresh: function () {
var self = this;
//vue框架执行，异步操作组件列表的排序
setTimeout(function () {
$(".draggable-element").each(function (i) {
$(this).attr("data-sort", i);
});
for (var i = 0; i < self.data.length; i++) {
self.data[i].index = $(".draggable-element[data-index=" + i + "]").attr("data-index");
self.data[i].sort = $(".draggable-element[data-index=" + i + "]").attr("data-sort");
}
// 如果当前编辑的组件不存在了，则选中最后一个
if (parseInt(self.currentIndex) >= self.data.length) self.currentIndex--;
$(".draggable-element[data-index=" + self.currentIndex + "] .edit-attribute .attr-wrap").css("height", ($(window).height() - 135) + "px");
}, 50);
},
//转换图片路径
changeImgUrl: function (url) {
if (url == null || url === "") return '';
if (url.indexOf("static/img/") > -1) return ns.img(ns_url.staticImg + "/" + url.replace("public/static/img/", ""));
else return ns.img(url);
},
//设置全局对象属性
setGlobal: function (obj) {
for (var k in obj) {
if (k) this.$set(this.global, k, obj[k]);
}
this.globalLazyLoad = true;
},
verify: function () {
if (this.global.title === "") {
layer.msg('请输入页面名称');
this.currentIndex = -99;
this.refresh();
return false;
} else if (this.global.title.length > 15) {
layer.msg('页面名称最多15个字符');
this.currentIndex = -99;
this.refresh();
return false;
}
if (this.global.popWindow.count !== -1 && this.global.popWindow.imageUrl === '') {
layer.msg('请上传弹框广告');
this.currentIndex = -99;
this.refresh();
return false;
}
for (var i = 0; i < this.data.length; i++) {
try {
if (this.data[i].verify) {
for (var j = 0; j < this.data[i].verify.length; j++) {
var res = this.data[i].verify[j](i);
if (!res.code) {
this.currentIndex = i;
this.refresh();
layer.msg(res.message);
return false;
}
}
}
} catch (e) {
console.log("verify Error:", e, i, this.data[i]);
}
}
return true;
},
// 定位组件位置
autoSelected(componentName) {
for (var i in this.data) {
if (this.data[i].componentName === componentName) {
this.changeCurrentIndex(this.data[i].index);
var element = $('.preview-wrap .preview-restore-wrap [data-index="' + this.data[i].index + '"]'),
warp = $(".preview-wrap .preview-restore-wrap .div-wrap"),
warpTop = warp.offset().top,
warpBottom = warpTop + warp.height(),
elementTop = element.offset().top,
elementBottom = elementTop + element.height(),
scrollTop = warp.scrollTop();
if (elementBottom > warpBottom) {
scrollTop += (elementBottom - warpBottom) + 2;
} else if (warpTop > elementTop) {
scrollTop -= (warpTop - elementTop);
}
warp.animate({scrollTop: scrollTop}, 300);
return;
}
}
},
// 刷新组件数据
refreshComponent: function () {
if ($("#info").length === 0) return;
var info = JSON.parse($("#info").val().toString());// .replace(/\@/g, "'"));
if (Object.keys(info).length) {
for (var i = 0; i < info.value.length; i++) {
info.value[i].index = 0;
info.value[i].sort = 0;
info.value[i].lazyLoadCss = false; // 资源懒加载，防止看到界面缓慢加载
info.value[i].lazyLoad = false; // 资源懒加载，防止看到界面缓慢加载
info.value[i].outerCountJs = 0;
info.value[i].ignore = []; // 忽略模板属性
info.value[i].tempData = {}; // 临时数据
// info.value[i].id = ns.gen_non_duplicate(5);
}
}
this.setGlobal(info.global);
if(info.value.length) {
this.data = info.value;
this.changeCurrentIndex(0); // 选择第一个
this.refresh();
}
fullScreenSize();
$('.loading-layer').hide();
$('.preview-wrap .preview-restore-wrap').css('visibility', 'visible');
},
/**
* 刷新快捷操作后的展示
* @param isScroll false：滚动，true：不滚动
*/
refreshQuick: function (isScroll) {
var self = this;
vue.$nextTick(function () {
if (!isScroll) {
var element = $(".draggable-element[data-index=" + self.currentIndex + "]");
var warp = $(".preview-wrap .preview-restore-wrap .div-wrap");
var height = 0;
$(".draggable-element:lt(" + (element.index() + 1) + ")").each(function (i) {
height += $(this).outerHeight();
});
height -= element.outerHeight() + 30;
warp.animate({scrollTop: height}, 300);
}
});
}
}
});
// 自适应全屏宽高
function fullScreenSize(isFull) {
var size = 139; // 公式：二级面包屑layui-header-crumbs-second （55px）+ 自定义模板区域上内边距diyview（20px） + 底部保存按钮（90px）
if (isFull) size = 75; // 顶部面包屑（55px） + 自定义模板区域上内边距diyview（20px）
var commonHeight = $(window).height() - size;
['.preview-wrap .preview-restore-wrap .div-wrap'].forEach(function (obj) {
$(obj).css("height", (commonHeight) + "px");
});
$('.loading-layer').css('height', (commonHeight - 70) + "px"); // 70px是头部高度
$(".component-list nav").css("height", (commonHeight + 20 - 55) + "px");// 20px是自定义模板区域上内边距，55px是标准/第三方组件tab切换高度
$(".edit-attribute .attr-wrap").css("height", (commonHeight - 1) + "px");// 1px是上边框
$(".preview-block").css("min-height", (commonHeight - 104) + "px"); // 公式：高度 - 自定义模板区域上内边距（20px） - 自定义模板区域下外编辑（20px）- 自定义模板头部（64px）
}
var form, repeat_flag = false;//防重复标识
layui.use(['form'], function () {
form = layui.form;
form.render();
fullScreenSize();
if ($("#info").val()) {
vue.refreshComponent();
} else {
if($("#title").val()) vue.global.title = $("#title").val();
vue.globalLazyLoad = true;
}
// 标准/第三方组件切换
$("body").off("click", ".component-list .tab span").on("click", ".component-list .tab span", function () {
var type = $(this).attr("data-type");
$('.component-list h3').hide();
$('.component-list ul').hide();
if(type === 'EXTEND'){
$('.component-list h3[data-type="EXTEND"]').show();
$('.component-list ul[data-type="EXTEND"]').show();
}else{
$('.component-list h3[data-type!="EXTEND"]').show();
$('.component-list ul[data-type!="EXTEND"]').show();
}
$(this).addClass('selected').siblings().removeClass('selected');
});
// 组件列表
$("body").off("click", ".component-list h3").on("click", ".component-list h3", function () {
var index = $(this).attr("data-index");
var ul = $(".component-list ul[data-index='" + index + "']");
if (ul.height()) {
$(this).find("img").attr("src", ns_url.staticExt + "/diyview/img/component_right.png");
if (!ul.attr("data-height")) ul.attr("data-height", ul.height());
ul.animate({opacity: 0, height: 0}, 100);
} else {
$(this).find("img").attr("src", ns_url.staticExt + "/diyview/img/component_down.png");
ul.animate({opacity: 1, height: ul.attr("data-height") + "px"}, 100);
}
});
$("body").off("click", ".edit-attribute .attr-wrap .restore-wrap .attr-title .tab-wrap span").on("click", ".edit-attribute .attr-wrap .restore-wrap .attr-title .tab-wrap span", function () {
$(this).addClass('active bg-color').siblings().removeClass('active bg-color');
var type = $(this).attr('data-type');
$(this).parent().parent().parent().find('.edit-content-wrap').hide();
$(this).parent().parent().parent().find('.edit-style-wrap').hide();
$(this).parent().parent().parent().find(`.edit-${type}-wrap`).show();
});
// 处理全屏切换事件
// 事件开始，通过添加顶级样式控制按钮相关展示
// 底部全屏按钮，隐藏菜单，添加顶级样式，top-full-screen
$('body').off('click', '.full-screen-btn').on('click', '.full-screen-btn', function () {
$('body').find('.layui-header').hide(); //顶部菜单
$('body').find('.layui-side').hide(); //侧边菜单
$('body').find('.layui-layout-admin .crumbs').hide(); //面包屑
$('body').addClass('top-full-screen'); //添加顶级样式，处理大板块结构
// 隐藏底部按钮，放开头部按钮
$('body').find('.js-bottom-custom-save').hide(); //底部按钮隐藏
$('body').find('.js-top-custom-save').removeClass('layui-hide'); //顶部按钮放开
$('body').find('.main-contact').hide(); //全屏右侧帮助不展示
// 全屏需处理适应大小
fullScreenSize(true);
});
// 顶部恢复按钮，与底部按钮完全相反
$('body').off('click', '.cancel-btn').on('click', '.cancel-btn', function () {
$('body').find('.layui-header').show(); //顶部菜单
$('body').find('.layui-side').show(); //侧边菜单
$('body').find('.layui-layout-admin .crumbs').show(); //面包屑
$('body').removeClass('top-full-screen'); //添加顶级样式，处理大板块结构
// 隐藏底部按钮，放开头部按钮
$('body').find('.js-bottom-custom-save').show(); //底部按钮隐藏
$('body').find('.js-top-custom-save').addClass('layui-hide'); //顶部按钮放开
// 全屏需处理适应大小
fullScreenSize();
});
/**
* 绑定拖拽事件
*/
$('.preview-block').DDSort({
//拖拽数据源
target: '.draggable-element',
//拖拽时显示的样式
floatStyle: {
'border': '1px solid',
'background-color': '#ffffff'
},
//设置可拖拽区域
draggableArea: "preview-draggable",
//拖拽中，隐藏右侧编辑属性栏
move: function (index) {
var curr = $(".draggable-element[data-index='" + index + "'] .edit-attribute");
if (curr.attr("data-have-edit") == 1) curr.hide();
},
//拖拽结束后，选择当前拖拽，并且显示右侧编辑属性栏，刷新数据
up: function (beforeIndex,afterIndex) {
var temp = [];
$('.draggable-element').each(function (index) {
var dIndex = $(this).attr('data-index');
temp[index] = vue.deepClone(vue.data[dIndex]);
});
temp.forEach(function (item, index) {
item.index = index;
item.id = ns.gen_non_duplicate(5); // 更新id，刷新组件数据
vue.$set(vue.data, index, item)
});
vue.currentIndex = afterIndex;
$(".draggable-element.selected .edit-attribute").show();
}
});
// 保存
$("button.save").click(function () {
// 刷新排序
vue.refresh();
setTimeout(function () {
if (vue.verify()) {
//全局属性
var global = JSON.stringify(vue.global);
global = eval("(" + global + ")");
//组件属性
var value = JSON.stringify(vue.data); // .replace(/\@/g, "");
value = JSON.parse(value);
//重新排序
value.sort(function (a, b) {
return a.sort - b.sort;
});
for (var k in value) {
value[k].ignore.forEach((item, index) => {
if (item.indexOf('margin') !== -1) delete value[k].margin[item.split('margin')[1].toLowerCase()];
else delete value[k][item];
});
delete value[k].ignore;
// delete value[k].hidden;
delete value[k].ignoreLoad;
delete value[k].verify;
delete value[k].lazyLoad;
delete value[k].lazyLoadCss;
delete value[k].index;
delete value[k].sort;
delete value[k].outerCountJs;
delete value[k].tempData; // 临时数据
}
var v = {
global: global,
value: value
};
// console.log(v);
// console.log(JSON.stringify(v));
// return false;
if (repeat_flag) return;
repeat_flag = true;
$.ajax({
type: "post",
url: ns.url(requestUrl),
data: {
id: $("#id").val(),
name: $("#name").val(),
template_id: $("#template_id").val(),
page_type: $("#page_type").val(), // 页面类型
title: vue.global.title,
value: JSON.stringify(v), // .replace(/\'/g, "@")
site_id: ns_url.siteId,
app_module: ns_url.appModule
},
dataType: "JSON",
success: function (res) {
layer.msg(res.message);
if (res.code == 0) {
if ($("#id").val() || $("#name").val().indexOf('DIY_VIEW_RANDOM_') == -1) {
repeat_flag = false;
} else {
location.hash = ns.hash("shop/diy/lists");
}
} else {
repeat_flag = false;
}
}
});
}
}, 100);
});
});
// 预览
function preview() {
window.open(ns.url('index/index/h5preview', {id: $('#id').val(), type: 'page'}));
}

247
public/static/ext/diyview/js/ddsort.js Executable file
View File

@@ -0,0 +1,247 @@
;(function ($) {
/**
* Author: https://github.com/Barrior
*
* DDSort: drag and drop sorting.
* @param {Object} options
* target[string]: 可选，jQuery事件委托选择器字符串，默认'li'
* cloneStyle[object]: 可选，设置占位符元素的样式
* floatStyle[object]: 可选，设置拖动元素的样式
* down[function]: 可选，鼠标按下时执行的函数
* move[function]: 可选，鼠标移动时执行的函数
* up[function]: 可选，鼠标抬起时执行的函数
* draggableArea[string]:可选，设置可拖拽的区域
*/
$.fn.DDSort = function (options) {
var $doc = $(document),
fnEmpty = function () {
},
settings = $.extend(true, {
down: fnEmpty,
move: fnEmpty,
up: fnEmpty,
target: 'li',
cloneStyle: {
'background-color': '#f7f8fa'
},
floatStyle: {
//用固定定位可以防止定位父级不是Body的情况的兼容处理，表示不兼容IE6，无妨
'position': 'fixed',
'box-shadow': '10px 10px 20px 0 #eee',
/*'webkitTransform': 'rotate(4deg)',
'mozTransform': 'rotate(4deg)',
'msTransform': 'rotate(4deg)',
'transform': 'rotate(4deg)'*/
},
draggableArea: ''
}, options);
return this.each(function () {
var that = $(this),
height = 'height',
width = 'width';
if (that.css('box-sizing') == 'border-box') {
height = 'outerHeight';
width = 'outerWidth';
}
var time; // 监听长按时间
var progress = 0; // 记录长按时长
that.on('mousedown.DDSort', settings.target, function (e) {
//只允许鼠标左键拖动
if (e.which != 1) {
return;
}
//防止表单元素失效
var tagName = e.target.tagName.toLowerCase();
if (tagName == 'input' || tagName == 'textarea' || tagName == 'select' || $(e.target).attr('stop-ddsort')) {
return;
}
// 记录长按时长
time = setInterval(() => {
progress++
}, 125);
var THIS = this,
$this = $(THIS),
offset = $this.offset(),
disX = e.pageX - offset.left,
disY = e.pageY - offset.top,
clone = $this.clone()
.css(settings.cloneStyle)
.css('height', $this[height]())
.empty(),
hasClone = 1,
//缓存计算
thisOuterHeight = $this.outerHeight(),
thatOuterHeight = that.outerHeight(),
//滚动速度
upSpeed = thisOuterHeight,
downSpeed = thisOuterHeight,
maxSpeed = thisOuterHeight * 3;
if (settings.draggableArea != "") {
//判断当前点击的DOM是否允许拖拽
var isDraggable = recursiveQuery($(e.target), settings.draggableArea);
// 特殊处理：带有该属性的禁用
if ($(e.target).parent().attr("data-disabled") || $(e.target).attr("data-disabled")) {
return;
}
if (!isDraggable) {
return;
}
}
var downIndex = $(THIS).index();
settings.down.call(THIS, downIndex);
$doc.on('mousemove.DDSort', function (e) {
if (progress === 0) return; // 如果没有长按则不能拖拽
if (hasClone) {
$this.before(clone)
.css('width', $this[width]())
.css(settings.floatStyle)
.appendTo($this.parent());
hasClone = 0;
}
var left = e.pageX - disX,
top = e.pageY - disY,
prev = clone.prev(),
next = clone.next().not($this);
var gap = $(window).scrollTop();
var calculate = top - gap;
//检测是否滚动了
top = ((top - $(window).scrollTop()) != top) ? calculate : top;
$this.css({
left: left,
top: top,
zIndex: 999
});
//向上排序
if (prev.length && top < (prev.offset().top - gap) + prev.outerHeight() / 2) {
clone.after(prev);
//向下排序
} else if (next.length && top + thisOuterHeight > (next.offset().top - gap) + next.outerHeight() / 2) {
clone.before(next);
}
/**
* 处理滚动条
* that是带着滚动条的元素，这里默认以为that元素是这样的元素（正常情况就是这样），如果使用者事件委托的元素不是这样的元素，那么需要提供接口出来
*/
var thatScrollTop = that.scrollTop(),
thatOffsetTop = that.offset().top,
scrollVal;
//向上滚动
if (top < thatOffsetTop) {
downSpeed = thisOuterHeight;
upSpeed = ++upSpeed > maxSpeed ? maxSpeed : upSpeed;
scrollVal = thatScrollTop - upSpeed;
//向下滚动
} else if (top + thisOuterHeight - thatOffsetTop > thatOuterHeight) {
upSpeed = thisOuterHeight;
downSpeed = ++downSpeed > maxSpeed ? maxSpeed : downSpeed;
scrollVal = thatScrollTop + downSpeed;
}
that.scrollTop(scrollVal);
var index = recursiveQueryIndex($(THIS));
settings.beforeIndex = index; // 当前拖拽元素
settings.move.call(THIS, index);
})
.on('mouseup.DDSort', function () {
clearInterval(time);
progress = 0;
$doc.off('mousemove.DDSort mouseup.DDSort');
//click的时候也会触发mouseup事件，加上判断阻止这种情况
if (!hasClone) {
clone.before($this.removeAttr('style')).remove();
settings.afterIndex = $this.index();
settings.up.call(THIS, settings.beforeIndex, settings.afterIndex);
}
});
return false;
});
});
};
//当前递归次数
var currentRecursiveCount = 0;
//最大递归次数
var recursiveMaxCount = 20;
/**
* 递归查询当前区域是否允许拖拽
*/
function recursiveQuery(o, draggableArea) {
if (o.hasClass(draggableArea)) {
//允许拖拽，清空递归次数
currentRecursiveCount = 0;
// console.log($(o));
return true;
} else {
if (currentRecursiveCount <= recursiveMaxCount) {
currentRecursiveCount++;
return recursiveQuery(o.parent(), draggableArea);
} else {
//清空递归次数
// console.log("清空递归次数");
currentRecursiveCount = 0;
return false;
}
}
}
/**
* 递归查询当前拖拽的下标
*/
function recursiveQueryIndex(o) {
if (o.hasClass("draggable-element")) {
//允许拖拽，清空递归次数
currentRecursiveCount = 0;
return $(o).attr("data-index");
} else {
if (currentRecursiveCount <= recursiveMaxCount) {
currentRecursiveCount++;
return recursiveQueryIndex(o.parent());
} else {
//清空递归次数
// console.log("清空递归次数");
currentRecursiveCount = 0;
return -1;
}
}
}
})(jQuery);

796
public/static/ext/diyview/js/link.js Executable file
View File

@@ -0,0 +1,796 @@
var form, laytpl;
var goodsLink = ['ALL_GOODS', 'PINTUAN_GOODS', 'PINFAN_GOODS', 'GROUPBUY_GOODS', 'DISTRIBUTION_GOODS', 'BARGAIN_GOODS', 'PRESALE_GOODS','BUNDING_GOODS'];
layui.use(['form', 'laytpl'], function () {
form = layui.form;
laytpl = layui.laytpl;
setTimeout(function () {
if (selectLink.name) {
// 编辑赋值
$('.link-box .link-left dd.text-color').click();
} else if (selectLink.parent && goodsLink.indexOf(selectLink.parent) !== -1) {
// 如果选择了商品
$('.link-box .link-left dd[data-name="' + selectLink.parent + '"]').click();
} else {
// 默认选中第一个
$('.link-box .link-left dd:eq(0)').click();
}
}, 100);
});
/**
* 查询子级链接
* @param name
*/
function getLinkInfo(name) {
try {
$('.link-box .link-right.js-system dl').hide();
var linkList = $('.link-box .link-right.js-system dl[data-parent="' + name + '"]');
linkList.show();
if (linkList.length === 0) childLinkCallback(name); // 触发选择子级链接回调
} catch (e) {
console.log('childLinkCallback error', e);
}
}
// 展开收缩自定义链接
$(".link-box .link-left dt").click(function () {
if ($(this).hasClass("active")) {
$(this).removeClass("active");
$(this).parent("dl").find("dd").removeClass("layui-hide");
} else {
$(this).addClass("active");
$(this).parent("dl").find("dd").addClass("layui-hide");
}
if ($(this).parent("dl").find("dd").length === 0) {
$(".link-box .link-left dd,.link-box .link-left dt").removeClass("text-color");
$(this).addClass("text-color");
}
});
// 选择左侧父级链接
$('.link-box .link-left dd').click(function () {
$('.link-box .link-left dd').removeClass("text-color");
$(this).addClass("text-color");
var name = $(this).attr('data-name');
switch (name) {
case 'CUSTOM_LINK':
// 自定义链接，支持外链
var data = JSON.parse(JSON.stringify(selectLink));
if(data.parent !=='CUSTOM_LINK') {
data.title = '';
data.wap_url = '';
}
laytpl($('#customHtml').html()).render(data, function (html) {
$(".link-right.js-system").hide();
$(".link-right.js-extend").html(html).show();
});
break;
case 'OTHER_APPLET':
// 跳转小程序
laytpl($('#appletHtml').html()).render(selectLink, function (html) {
$(".link-right.js-system").hide();
$(".link-right.js-extend").html(html).show();
});
break;
case 'MOBILE':
// 拨打手机号
laytpl($('#mobileHtml').html()).render(selectLink, function (html) {
$(".link-right.js-system").hide();
$(".link-right.js-extend").html(html).show();
});
break;
default:
$(".link-right.js-extend").hide();
$(".link-right.js-system").show();
getLinkInfo(name);
break;
}
});
$("body").off("click", ".link-box .link-right dd").on("click", ".link-box .link-right dd", function () {
$(".link-box .link-right dd").removeClass("border-color text-color");
$(this).addClass("border-color text-color");
});
//清空
$(".link-btn .link-eliminate").click(function () {
window.linkData = {name:'',title:'',wap_url:'',parent:''};
layer.close(window.linkIndex);
});
// 取消
$(".link-btn .link-cancel").click(function () {
layer.close(window.linkIndex);
});
// 保存
$(".link-box .link-save").click(function () {
var value = {};
var dd = $(".link-box .link-right dd.border-color"); // 子级链接
var parentLink = $('.link-box .link-left dd.text-color'); // 父级链接
// 标准链接
if (dd.length) {
value = {
name: dd.attr('data-name'),
title: dd.text(),
wap_url: dd.attr('data-wap-url')
};
}
// 自定义链接
if (parentLink.attr('data-name') === 'CUSTOM_LINK') {
var title = $(".custom-link input[name='title']").val();
var wap_url = $(".custom-link input[name='wap_url']").val();
if (!title) {
layer.msg("链接名称不能为空");
return;
}
if (!wap_url) {
layer.msg("跳转路径不能为空");
return;
}
value = {
name: parentLink.attr('data-name'),
title: title,
wap_url: wap_url
};
}
// 跳转小程序
if (parentLink.attr('data-name') === 'OTHER_APPLET') {
var appid = $(".other-applet input[name='appid']").val();
var page = $(".other-applet input[name='page']").val();
if (!appid) {
layer.msg("跳转微信小程序的appid不能为空");
return;
}
if (!page) {
layer.msg("微信小程序路径不能为空");
return;
}
value = {
name: parentLink.attr('data-name'),
title: '微信小程序-' + appid,
appid: appid,
page: page
};
}
if (parentLink.attr('data-name') === 'MOBILE') {
var mobile = $(".call-mobile input[name='mobile']").val();
if (!mobile) {
layer.msg("电话号码不能为空");
return;
}
value = {
name: parentLink.attr('data-name'),
title: '拨打电话：' + mobile,
mobile: mobile
};
}
try {
value = beforeSaveCallback(value); // 保存前处理数据的回调
} catch (e) {
console.log('saveCallback error', e);
}
if (Object.keys(value).length) {
value.parent = parentLink.attr('data-name');
window.linkData = value;
}
layer.close(window.linkIndex);
});
/**
* 触发选择子级链接回调
* @param name
*/
function childLinkCallback(name) {
if (name === 'GOODS_CATEGORY') {
// 商品分类
var html = `<div id="goods_category_list"></div>`;
$(".link-right.js-extend").html(html).show();
$(".link-right.js-system").hide();
getGoodsCategory();
} else if (goodsLink.indexOf(name) !== -1) {
if(name == "BUNDING_GOODS"){
var placeholder = "请输入套餐名称"
}else{
var placeholder = "请输入商品名称"
}
var html = "<div class='search'>";
html += `<input name='search_text' class='layui-input search-input layui-input-inline len-mid' placeholder='`+placeholder+`' onkeyup="if(event.keyCode === 13) getGoodsList('${name}') " />`;
html += `<button onclick="getGoodsList('${name}')" class='layui-btn'>搜索</button>`;
html += "</div>";
html += `<table id="goods_list" lay-filter="goods_list"></table>`;
$(".link-right.js-extend").html(html).show();
$(".link-right.js-system").hide();
getGoodsList(name);
} else if (['CARDS_GAME', 'TURNTABLE_GAME', 'EGG_GAME'].indexOf(name) !== -1) {
var html = `<table id="game_list" lay-filter="game_list"></table>`;
$(".link-right.js-extend").html(html).show();
$(".link-right.js-system").hide();
getGameList(name);
} else if (['DIY_FORM'].indexOf(name) !== -1) {
var html = `<table id="diy_form_list" lay-filter="diy_form_list"></table>`;
$(".link-right.js-extend").html(html).show();
$(".link-right.js-system").hide();
getDiyFormList(name);
} else if (name == 'CARDS_SERVICE_CATEGORY_LINK') {
var html = `<div id="service_category_list"></div>`;
$(".link-right.js-extend").html(html).show();
$(".link-right.js-system").hide();
getServiceCategoryList();
}else if(name == 'GOODS_CATEGORY_PAGE'){
var html = `<div id="goods_category_list"></div>`;
$(".link-right.js-extend").html(html).show();
$(".link-right.js-system").hide();
getGoodsCategoryPage()
}
}
/**
* 获取商品分类数据
*/
function getGoodsCategory() {
laytpl($("#goodsCategoryHtml").html()).render([], function (html) {
$("#goods_category_list").html(html);
//展开收齐点击事件
$(".js-switch").click(function () {
var category_id = $(this).attr("data-category-id");
var operation = $(this).attr("data-operation");
if (operation === 'off') {
$(".goods-category-list .layui-table tr[data-pid='" + category_id + "']").show();
$(this).text("-").attr("data-operation", 'on');
} else {
$(".goods-category-list .layui-table tr[data-pid='" + category_id + "']").hide();
$(this).text("+").attr("data-operation", 'off');
}
});
var category = $("input[name='category_id']:checked");
if (category.length) {
var pid = category.parent().parent().attr('data-pid');
if (pid) $(".js-switch[data-category-id='" + pid + "']").click();
}
// 勾选分类
form.on('checkbox(category_id)', function (data) {
if (data.elem.checked) {
$("input[name='category_id']:checked").prop("checked", false);
$(data.elem).prop("checked", true);
form.render();
}
});
form.render();
});
}
function getGoodsCategoryPage() {
laytpl($("#goodsCategoryPageHtml").html()).render([], function (html) {
$("#goods_category_list").html(html);
// 勾选分类
form.on('checkbox(category_id)', function (data) {
if (data.elem.checked) {
$("input[name='category_id']:checked").prop("checked", false);
$(data.elem).prop("checked", true);
form.render();
}
});
form.render();
});
}
/**
* 获取项目分类
* @param name
*/
function getServiceCategoryList() {
laytpl($("#serviceCategoryHtml").html()).render([], function (html) {
$("#service_category_list").html(html);
var category = $("input[name='service_category_id']:checked");
if (category.length) {
var pid = category.parent().parent().attr('data-pid');
if (pid) $(".js-switch[data-category-id='" + pid + "']").click();
}
// 勾选分类
form.on('checkbox(service_category_id)', function (data) {
if (data.elem.checked) {
$("input[name='service_category_id']:checked").prop("checked", false);
$(data.elem).prop("checked", true);
form.render();
}
});
form.render();
});
}
/**
* 获取商品列表
* @param name
*/
function getGoodsList(name) {
var promotion = '', goodsCols = [];
if (name === 'ALL_GOODS') {
promotion = 'all';
goodsCols = [
[
{
width: '8%',
templet: function (data) {
return `<input type="checkbox" name="goods_checkbox" value="${data.goods_id}" data-goods-name="${data.goods_name}" lay-skin="primary" lay-filter="goods_checkbox" ${data.goods_id == selectLink.goods_id ? 'checked' : ''} />`;
}
},
{
title: '商品',
width: '52%',
templet: '#goods_info'
},
{
field: 'price',
title: '价格',
width: '15%'
},
{
field: 'goods_stock',
title: '库存',
width: '15%'
}
]
];
} else if (name === "PINTUAN_GOODS") {
promotion = 'pintuan';
goodsCols = [
[{
unresize: 'false',
width: '8%',
templet: function (data) {
return `<input type="checkbox" name="goods_checkbox" value="${data.pintuan_id}" data-goods-name="${data.goods_name}" lay-skin="primary" lay-filter="goods_checkbox" ${data.pintuan_id == selectLink.pintuan_id ? 'checked' : ''} />`;
}
}, {
title: '拼团商品',
unresize: 'false',
width: '52%',
templet: '#goods_info'
}, {
field: 'pintuan_price',
title: '价格',
unresize: 'false',
width: '15%'
}, {
field: 'goods_stock',
title: '库存',
unresize: 'false',
width: '15%'
}]
];
} else if (name === "PINFAN_GOODS") {
promotion = 'pinfan';
goodsCols = [
[{
unresize: 'false',
width: '8%',
templet: function (data) {
return `<input type="checkbox" name="goods_checkbox" value="${data.pintuan_id}" data-goods-name="${data.goods_name}" lay-skin="primary" lay-filter="goods_checkbox" ${data.pintuan_id == selectLink.pinfan_id ? 'checked' : ''} />`;
}
}, {
title: '拼团返利',
unresize: 'false',
width: '52%',
templet: '#goods_info'
}, {
field: 'pintuan_price',
title: '价格',
unresize: 'false',
width: '15%'
}, {
field: 'goods_stock',
title: '库存',
unresize: 'false',
width: '15%'
}]
];
} else if (name === "GROUPBUY_GOODS") {
promotion = 'groupbuy';
goodsCols = [
[{
unresize: 'false',
width: '8%',
templet: function (data) {
return `<input type="checkbox" name="goods_checkbox" value="${data.groupbuy_id}" data-goods-name="${data.goods_name}" lay-skin="primary" lay-filter="goods_checkbox" ${data.groupbuy_id == selectLink.groupbuy_id ? 'checked' : ''} />`;
}
}, {
title: '团购商品',
unresize: 'false',
width: '52%',
templet: '#goods_info'
}, {
field: 'groupbuy_price',
title: '价格',
unresize: 'false',
width: '15%'
}, {
field: 'goods_stock',
title: '库存',
unresize: 'false',
width: '15%'
}]
];
} else if (name === "DISTRIBUTION_GOODS") {
promotion = 'fenxiao';
goodsCols = [
[{
unresize: 'false',
width: '8%',
templet: function (data) {
return `<input type="checkbox" name="goods_checkbox" value="${data.goods_id}" data-goods-name="${data.goods_name}" lay-skin="primary" lay-filter="goods_checkbox" ${data.goods_id == selectLink.goods_id ? 'checked' : ''} />`;
}
}, {
title: '分销商品',
unresize: 'false',
width: '52%',
templet: '#goods_info'
}, {
field: 'price',
title: '价格',
unresize: 'false',
width: '15%'
}, {
field: 'goods_stock',
title: '库存',
unresize: 'false',
width: '15%'
}]
]
} else if (name === "BARGAIN_GOODS") {
promotion = 'bargain';
goodsCols = [
[{
unresize: 'false',
width: '8%',
templet: function (data) {
return `<input type="checkbox" name="goods_checkbox" value="${data.bargain_id}" data-goods-name="${data.goods_name}" lay-skin="primary" lay-filter="goods_checkbox" ${data.bargain_id == selectLink.bargain_id ? 'checked' : ''} />`;
}
}, {
title: '砍价商品',
unresize: 'false',
width: '52%',
templet: '#goods_info'
}, {
field: 'price',
title: '价格',
unresize: 'false',
width: '15%'
}, {
field: 'goods_stock',
title: '库存',
unresize: 'false',
width: '15%'
}]
]
} else if (name === "PRESALE_GOODS") {
promotion = 'presale';
goodsCols = [
[{
unresize: 'false',
width: '8%',
templet: function (data) {
return `<input type="checkbox" name="goods_checkbox" value="${data.presale_id}" data-goods-name="${data.goods_name}" lay-skin="primary" lay-filter="goods_checkbox" ${data.presale_id == selectLink.presale_id ? 'checked' : ''} />`;
}
}, {
title: '预售商品',
unresize: 'false',
width: '45%',
templet: '#goods_info'
}, {
field: 'presale_name',
title: '活动名称',
unresize: 'false',
width: '30%'
}, {
field: 'presale_stock',
title: '库存',
unresize: 'false',
width: '15%'
}]
]
}else if (name === "BUNDING_GOODS") {
promotion = 'bundling';
console.log(selectLink)
goodsCols = [
[{
unresize: 'false',
width: '8%',
templet: function (data) {
return `<input type="checkbox" name="goods_checkbox" value="${data.bl_id}" data-goods-name="${data.bl_name}" lay-skin="primary" lay-filter="goods_checkbox" ${data.bl_id == selectLink.presale_id ? 'checked' : ''} />`;
}
}, {
field: 'bl_name',
title: '套餐名称',
unresize: 'false',
width: '45%',
}, {
field: 'bl_price',
title: '套餐价',
unresize: 'false',
width: '30%'
}, {
field: 'goods_money',
title: '商品总价',
unresize: 'false',
width: '15%'
}]
]
}
new Table({
elem: '#goods_list',
url: ns.url('shop/goods/goodsselect'),
where: {
site_id: ns_url.siteId,
app_module: ns_url.appModule,
promotion: promotion,
search_text: $("input[name='search_text']").val()
},
cols: goodsCols
});
// 选择商品
form.on('checkbox(goods_checkbox)', function (data) {
if (data.elem.checked) {
$("input[name='goods_checkbox']:checked").prop("checked", false);
$(data.elem).prop("checked", true);
form.render();
}
});
}
/**
* 获取小游戏
* @param name
*/
function getGameList(name) {
var addon_url = '';
if (name === 'CARDS_GAME') {
addon_url = ns.url('cards://shop/cards/lists', {
status: 1,
app_module: ns_url.appModule,
site_id: ns_url.siteId
});
} else if (name === 'TURNTABLE_GAME') {
addon_url = ns.url('turntable://shop/turntable/lists', {
status: 1,
app_module: ns_url.appModule,
site_id: ns_url.siteId
});
} else if (name === 'EGG_GAME') {
addon_url = ns.url('egg://shop/egg/lists', {status: 1, app_module: ns_url.appModule, site_id: ns_url.siteId});
}
var gameCols = [
[
{
unresize: 'false',
width: '8%',
templet: function (data) {
return `<input type="checkbox" name="game_checkbox" value="${data.game_id}" data-game-name="${data.game_name}" lay-skin="primary" lay-filter="game_checkbox" ${data.game_id == selectLink.game_id ? 'checked' : ''} />`;
}
},
{
field: 'game_name',
title: '游戏名称',
unresize: 'false',
width: '60%',
},
{
field: 'status',
title: '游戏状态',
unresize: 'false',
width: '30%',
templet: function (d) {
var status = '';
if (d.status == 0) {
status = '未开始';
} else if (d.status == 1) {
status = '进行中';
} else if (d.status == 2) {
status = '已结束';
} else if (d.status == 3) {
status = '已关闭';
}
return status;
}
}
]
];
new Table({
elem: '#game_list',
url: addon_url,
cols: gameCols
});
// 勾选小游戏
form.on('checkbox(game_checkbox)', function (data) {
if (data.elem.checked) {
$("input[name='game_checkbox']:checked").prop("checked", false);
$(data.elem).prop("checked", true);
form.render();
}
});
}
/**
* 获取小游戏
* @param name
*/
function getDiyFormList(name) {
var addon_url = ns.url('form://shop/form/lists', {
form_type: 'custom',
is_use: 1,
app_module: ns_url.appModule,
site_id: ns_url.siteId
});
var diyFormCols = [
[
{
unresize: 'false',
width: '10%',
templet: function (data) {
return `<input type="checkbox" name="diy_form_checkbox" value="${data.id}" data-form-name="${data.form_name}" lay-skin="primary" lay-filter="diy_form_checkbox" ${data.id == selectLink.form_id ? 'checked' : ''} />`;
}
},
{
field: 'form_name',
title: '表单名称',
unresize: 'false',
width: '80%',
}
]
];
new Table({
elem: '#diy_form_list',
url: addon_url,
cols: diyFormCols
});
// 勾选自定义表单
form.on('checkbox(diy_form_checkbox)', function (data) {
if (data.elem.checked) {
$("input[name='diy_form_checkbox']:checked").prop("checked", false);
$(data.elem).prop("checked", true);
form.render();
}
});
}
/**
* 保存前处理数据的回调
* @param oV 原链接
*/
function beforeSaveCallback(oV) {
var name = $('.link-box .link-left dd.text-color').attr('data-name');
var value = {};
// 选择商品分类
var category = $("input[name='category_id']:checked");
if (category.length) {
value.name = name;
if(name === "GOODS_CATEGORY_PAGE"){
value.wap_url = '/pages/goods/category?category_id=' + category.val();
}else{
value.wap_url = '/pages/goods/list?category_id=' + category.val();
}
value.title = category.attr('data-category-name');
value.category_id = category.val();
}
// 选择商品分类
var service_category = $("input[name='service_category_id']:checked");
if (service_category.length) {
value.name = name;
value.wap_url = '/pages_promotion/cardservice/service_goods/service_list?category_id=' + service_category.val();
value.title = service_category.attr('data-category-name');
value.service_category_id = service_category.val();
}
// 选择商品
var goods = $("input[name='goods_checkbox']:checked");
if (goods.length) {
value.name = name;
value.title = goods.attr('data-goods-name');
console.log(name)
console.log(goods.val())
switch (name) {
case 'BARGAIN_GOODS':
// 砍价商品
value.bargain_id = goods.val();
value.wap_url = '/pages_promotion/bargain/detail?b_id=';
break;
case 'GROUPBUY_GOODS':
// 团购商品
value.groupbuy_id = goods.val();
value.wap_url = '/pages_promotion/groupbuy/detail?groupbuy_id=';
break;
case 'PINTUAN_GOODS':
// 拼团商品
value.pintuan_id = goods.val();
value.wap_url = '/pages_promotion/pintuan/detail?pintuan_id=';
break;
case 'PINFAN_GOODS':
// 拼团返利商品
value.pinfan_id = goods.val();
value.wap_url = '/pages_promotion/pinfan/detail?pinfan_id=';
break;
case 'PRESALE_GOODS':
// 预售商品
value.presale_id = goods.val();
value.wap_url = '/pages_promotion/presale/detail?id=';
break;
case 'BUNDING_GOODS':
// 预售商品
value.presale_id = goods.val();
value.wap_url = '/pages_promotion/bundling/detail?bl_id=';
break;
default:
// 全部商品、分销商品
value.goods_id = goods.val();
value.wap_url = '/pages/goods/detail?goods_id=';
break;
}
value.wap_url += goods.val();
}
// 选择小游戏
var game = $("input[name='game_checkbox']:checked");
if(game.length) {
value.name = name;
value.wap_url = '';
value.title = game.attr('data-game-name');
value.game_id = game.val();
switch (name) {
case 'CARDS_GAME':
value.wap_url = '/pages_promotion/game/cards?id=';
break;
case 'TURNTABLE_GAME':
value.wap_url = '/pages_promotion/game/turntable?id=';
break;
case 'EGG_GAME':
value.wap_url = '/pages_promotion/game/smash_eggs?id=';
break;
}
value.wap_url += game.val();
}
// 选择自定义表单
var diyForm = $("input[name='diy_form_checkbox']:checked");
if(diyForm.length) {
value.name = name;
value.wap_url = '/pages_tool/form/form?id=';
value.title = diyForm.attr('data-form-name');
value.form_id = diyForm.val();
value.wap_url += diyForm.val();
}
// 如果没有选择以上链接，则还原最初链接
if (Object.keys(value).length === 0) value = oV;
return value;
}

581
public/static/ext/diyview/js/shop_bottom_nav.js Executable file
View File

@@ -0,0 +1,581 @@
/**
* 底部导航·组件
*/
var bottomMenuHtml = '<div class="bottom-menu-config">';
bottomMenuHtml += '<div class="template-edit-title">';
bottomMenuHtml += '<h3>导航样式设置</h3>';
bottomMenuHtml += '<div class="layui-form-item icon-radio">';
bottomMenuHtml += '<label class="layui-form-label sm">导航类型</label>';
bottomMenuHtml += '<div class="layui-input-block">';
bottomMenuHtml += '<template v-for="(item, index) in typeList">';
bottomMenuHtml += '<span :class="[item.value == data.type ? \'\' : \'layui-hide\']">{{item.label}}</span>';
bottomMenuHtml += '</template>';
bottomMenuHtml += '<ul class="icon-wrap">';
bottomMenuHtml += '<li v-for="(item, index) in typeList" :class="{\'text-color border-color\':data.type==item.value}" @click="data.type=item.value">';
bottomMenuHtml += '<i :class="[\'iconfont\',item.src,{\'text-color\':data.type==item.value}]"></i>';
bottomMenuHtml += '</li>';
bottomMenuHtml += '</ul>';
bottomMenuHtml += '</div>';
bottomMenuHtml += '</div>';
bottomMenuHtml += '<div class="layui-form-item">';
bottomMenuHtml += '<label class="layui-form-label sm">色调</label>';
bottomMenuHtml += '<div class="layui-input-block">';
bottomMenuHtml += '<div @click="switchTheme(\'default\')" :class="{ \'layui-unselect layui-form-radio\' : true,\'layui-form-radioed\' : ($parent.data.theme == \'default\') }">';
bottomMenuHtml += '<i class="layui-anim layui-icon">{{ $parent.data.theme == \'default\' ? \'&#xe643;\' : \'&#xe63f;\' }}</i>';
bottomMenuHtml += '<div>跟随主题风格</div>';
bottomMenuHtml += '</div>';
bottomMenuHtml += '<div @click="switchTheme(\'diy\')" :class="{ \'layui-unselect layui-form-radio\' : true,\'layui-form-radioed\' : ($parent.data.theme == \'diy\') }">';
bottomMenuHtml += '<i class="layui-anim layui-icon">{{ $parent.data.theme == \'diy\' ? \'&#xe643;\' : \'&#xe63f;\' }}</i>';
bottomMenuHtml += '<div>自定义</div>';
bottomMenuHtml += '</div>';
bottomMenuHtml += '</div>';
bottomMenuHtml += '</div>';
bottomMenuHtml += '<div v-show="$parent.data.theme==\'diy\'">';
bottomMenuHtml += '<color :data="{ field: \'backgroundColor\', label: \'背景颜色\' }"></color>';
bottomMenuHtml += '<color v-show="$parent.data.type == 1 || $parent.data.type == 3"></color>';
bottomMenuHtml += '<color :data="{ field: \'textHoverColor\', label: \'文字选中\' }" v-show="$parent.data.type == 1 || $parent.data.type == 3"></color>';
bottomMenuHtml += '</div>';
bottomMenuHtml += '</div>';
bottomMenuHtml += '<div class="template-edit-title">';
bottomMenuHtml += '<h3>导航内容设置</h3>';
bottomMenuHtml += '</div>';
bottomMenuHtml += '<ul class="bottom-menu-set">';
bottomMenuHtml += '<li v-for="(item,index) in menuList" :key="item.id">';
bottomMenuHtml += '<div class="content-block">';
bottomMenuHtml += '<div class="layui-form-item" v-show="$parent.data.type != 3">';
bottomMenuHtml += '<label class="layui-form-label sm">图标</label>';
bottomMenuHtml += '<div class="layui-input-block">';
bottomMenuHtml += '<div class="image-block">';
bottomMenuHtml += '<icon-upload :data="{ data : item, field : \'iconPath\'}" ></icon-upload>';
bottomMenuHtml += '<icon-upload :data="{ data : item, field : \'selectedIconPath\'}" ></icon-upload>';
bottomMenuHtml += '</div>';
bottomMenuHtml += '</div>';
bottomMenuHtml += '</div>';
bottomMenuHtml += '<div class="layui-form-item" v-show="$parent.data.type == 1 || $parent.data.type == 3">';
bottomMenuHtml += '<label class="layui-form-label sm">标题</label>';
bottomMenuHtml += '<div class="layui-input-block">';
bottomMenuHtml += '<input type="text" name=\'text\' v-model="item.text" maxlength="5" @keyup="listenText(index,item.text)" class="layui-input" />';
bottomMenuHtml += '</div>';
bottomMenuHtml += '</div>';
bottomMenuHtml += '<nc-link :data="{ field : $parent.data.list[index].link, label:\'链接\' }"></nc-link>';
bottomMenuHtml += '</div>';
bottomMenuHtml += '<i class="del" @click="menuList.splice(index,1)" data-disabled="1">x</i>';
bottomMenuHtml += '<div class="error-msg"></div>';
bottomMenuHtml += '<div class="iconfont icontuodong"></div>';
bottomMenuHtml += '</li>';
bottomMenuHtml += '</ul>';
bottomMenuHtml += '<div class="add-item text-color" v-if="showAddItem" @click="addMemu">';
bottomMenuHtml += '<i>+</i>';
bottomMenuHtml += '<span>添加一个图文导航</span>';
bottomMenuHtml += '</div>';
bottomMenuHtml += '<p class="hint">建议上传比例相同的图片，最多添加 {{maxTip}} 个底部导航</p>';
bottomMenuHtml += '</div>';
Vue.component("bottom-menu", {
template: bottomMenuHtml,
data: function () {
return {
data: this.$parent.data,
typeList: [
{
label: "图文",
value: 1,
src: "icontuwendaohang1",
},
{
label: "图片",
value: 2,
src: "icontuwendaohang",
},
{
label: "文字",
value: 3,
src: "iconchunwenzidaohang",
},
],
menuList: this.$parent.data.list,
showAddItem: true,
maxTip: 5,
};
},
created: function () {
this.changeShowAddItem();
this.menuList.forEach(function(e, i){
if(!e.id ) e.id = ns.gen_non_duplicate(6);
});
this.$parent.data.list = this.menuList;
var moveBeforeIndex = 0;
var _this = this;
setTimeout(function(){
$( '.edit-attribute .bottom-menu-set' ).DDSort({
// target: 'li',
floatStyle: {
'border': '1px solid #ccc',
'background-color': '#fff'
},
down: function(index){
moveBeforeIndex = index;
},
move: function (){
},
up: function(){
var index = $(this).index();
var temp = _this.menuList[moveBeforeIndex];
_this.menuList.splice(moveBeforeIndex, 1);
_this.menuList.splice(index, 0, temp);
_this.$parent.data.list = _this.menuList;
_this.$forceUpdate();
}
});
}, 500)
},
methods: {
switchTheme: function (theme) {
this.$parent.data.theme = theme;
this.$parent.data.backgroundColor = "#ffffff";
this.$parent.data.textColor = "#333333";
this.$forceUpdate();
},
listenText: function (index, text) {
if (text.length > 6) {
this.data.list[index].text = this.data.list[index].text.substr(0, 5);
layer.msg("字数不能超出5位");
}
},
//改变图文导航按钮的显示隐藏
changeShowAddItem: function () {
if (this.menuList.length >= this.maxTip) this.showAddItem = false;
else this.showAddItem = true;
},
addMemu(){
this.menuList.push({
iconPath: '',
selectedIconPath: '',
text: '菜单',
link: {},
iconClass : '',
style: null,
selected_style: null,
id: ns.gen_non_duplicate(6)
})
}
},
watch: {
menuList: function () {
this.changeShowAddItem();
}
}
});
var iconHtml = '<div class="icon-block layui-form" :id="id">';
iconHtml += '<div v-if="data.field == \'iconPath\'">';
iconHtml += '<template v-if="!myData.data[data.field]">';
iconHtml += '<div class="icon-box">';
iconHtml += '<div class="select-icon" v-if="myData.data[data.field] == \'\'" @click="uploadImg(\'icon_type\')">';
iconHtml += '<span class="add">+</span>';
iconHtml += '</div>';
iconHtml += '</div>';
iconHtml += '</template>';
iconHtml += '<template v-else>';
iconHtml += '<template v-if="myData.data.icon_type == \'icon\'">';
iconHtml += '<div class="icon-box">';
iconHtml += '<iconfont :icon="myData.data[data.field]" :value="myData.data.style ? myData.data.style : null"></iconfont>';
iconHtml += '<div class="operation">';
iconHtml += '<div class="operation-warp">';
iconHtml += '<i title="图片预览" class="iconfont iconreview js-preview"></i>';
iconHtml += '<i title="删除图标" class="layui-icon layui-icon-delete" @click="deleteIcon()"></i>';
iconHtml += '</div>';
iconHtml += '<div @click="uploadImg(\'icon_type\')" class="js-replace">点击替换</div>';
iconHtml += '</div>';
iconHtml += '</div>';
iconHtml += '<div class="action-box">';
iconHtml += '<div class="action" @click="iconStyle($event, \'style\')"><i class="iconfont iconpifu"></i></div>';
iconHtml += '<div class="action" @click="selectColor(\'color-\' + data.field+id, \'style\')" :id="\'color-\' + data.field+id"><i class="iconfont iconyanse"></i></div>';
iconHtml += '</div>';
iconHtml += '</template>';
iconHtml += '<template v-if="myData.data.icon_type == \'img\'">';
iconHtml += '<div class="upload-box">';
iconHtml += '<img :layer-src="img(myData.data[data.field])" :src="img(myData.data[data.field])" class="img_prev"/>';
iconHtml += '<div class="operation">';
iconHtml += '<div class="operation-warp">';
iconHtml += '<i title="图片预览" class="iconfont iconreview js-preview" @click="previewImg()"></i>';
iconHtml += '<i title="删除图片" class="layui-icon layui-icon-delete js-delete" @click="deleteImg()"></i>';
iconHtml += '</div>';
iconHtml += '<div @click="uploadImg(\'icon_type\')" class="js-replace">点击替换</div>';
iconHtml += '</div>';
iconHtml += '</div>';
iconHtml += '</template>';
iconHtml += '</template>';
iconHtml += '</div>';
iconHtml += '<div v-if="data.field == \'selectedIconPath\'">';
iconHtml += '<template v-if="!myData.data[data.field]">';
iconHtml += '<div class="icon-box">';
iconHtml += '<div class="select-icon" v-if="myData.data[data.field] == \'\'" @click="uploadImg(\'selected_icon_type\')">';
iconHtml += '<span class="add">+</span>';
iconHtml += '</div>';
iconHtml += '</div>';
iconHtml += '</template>';
iconHtml += '<template v-else>';
iconHtml += '<template v-if="myData.data.selected_icon_type == \'icon\'">';
iconHtml += '<div class="icon-box">';
iconHtml += '<template>';
iconHtml += '<iconfont :icon="myData.data[data.field]" :value="myData.data.selected_style ? myData.data.selected_style : null"></iconfont>';
iconHtml += '<div class="operation">';
iconHtml += '<div class="operation-warp">';
iconHtml += '<i title="图片预览" class="iconfont iconreview js-preview"></i>';
iconHtml += '<i title="删除图标" class="layui-icon layui-icon-delete" @click="deleteIcon()"></i>';
iconHtml += '</div>';
iconHtml += '<div @click="uploadImg(\'selected_icon_type\',\'img,icon\')" class="js-replace">点击替换</div>';
iconHtml += '</div>';
iconHtml += '</template>';
iconHtml += '</div>';
iconHtml += '<div class="action-box">';
iconHtml += '<div class="action" @click="iconStyle($event, \'selected_style\')"><i class="iconfont iconpifu"></i></div>';
iconHtml += '<div class="action" @click="selectColor(\'color-\' + data.field+id, \'selected_style\')" :id="\'color-\' + data.field+id"><i class="iconfont iconyanse"></i></div>';
iconHtml += '</div>';
iconHtml += '</template>';
iconHtml += '<template v-if="myData.data.selected_icon_type == \'img\'">';
iconHtml += '<div class="upload-box">';
iconHtml += '<img :layer-src="img(myData.data[data.field])" :src="img(myData.data[data.field])" class="img_prev"/>';
iconHtml += '<div class="operation">';
iconHtml += '<div class="operation-warp">';
iconHtml += '<i title="图片预览" class="iconfont iconreview js-preview" @click="previewImg()"></i>';
iconHtml += '<i title="删除图片" class="layui-icon layui-icon-delete js-delete" @click="deleteImg()"></i>';
iconHtml += '</div>';
iconHtml += '<div @click="uploadImg(\'selected_icon_type\',\'img,icon\')" class="js-replace">点击替换</div>';
iconHtml += '</div>';
iconHtml += '</div>';
iconHtml += '</template>';
iconHtml += '</template>';
iconHtml += '</div>';
iconHtml += '<div class="icon-text" v-if="data.field == \'iconPath\'">未选中</div>';
iconHtml += '<div class="icon-text" v-if="data.field == \'selectedIconPath\'">已选中</div>';
iconHtml += '</div>';
/**
* 选择Icon组件：
* 参数说明：data：链接对象，callback：回调
*/
Vue.component("icon-upload", {
props: {
data: {
type: Object,
default: function () {
return {
field: null,// icon对象
label: "图标",// 文本
};
}
}
},
template: iconHtml,
data: function () {
return {
id: ns.gen_non_duplicate(10),
myData: this.data, // 此处用数组的目的是触发变异方法，进行视图更新
parent: (Object.keys(this.$parent.data).length) ? this.$parent.data : this.$parent.global
};
},
created: function () {
this.myData.label = this.myData.label || "图标";
// 找寻父级
if (this.myData.parent !== undefined) this.parent = this.$parent.data[this.myData.parent];
this.id = ns.gen_non_duplicate(10);
},
methods: {
selectedIcon: function () {
iconSelect((data) => {
this.myData.data[this.data.field] = data;
})
},
uploadImg(field, display_type) {
display_type = display_type || 'img,icon';
var self = this;
openAlbum(function (obj) {
if (typeof obj == 'object') {
self.myData.data[self.data.field] = obj[0].pic_path;
self.myData.data[field] = 'img';
} else {
self.myData.data[self.data.field] = obj;
self.myData.data[field] = 'icon';
var defaultStyle = {
fontSize: 100,
iconBgColor: [],
iconBgColorDeg: 0,
iconBgImg: '',
bgRadius: 0,
iconColor: ['#000'],
iconColorDeg: 0,
};
if (!self.myData.data.selected_style) self.$set(self.myData.data, 'selected_style', JSON.parse(JSON.stringify(defaultStyle)))
if (!self.myData.data.style) self.$set(self.myData.data, 'style', JSON.parse(JSON.stringify(defaultStyle)))
}
self.$forceUpdate();
}, 1, 0, 'img', display_type);
},
previewImg() {
$('#' + this.id).find('.upload-box>img').click();
},
deleteImg() {
this.myData.data[this.data.field] = '';
this.$forceUpdate();
},
deleteIcon(index) {
this.myData.data[this.data.field] = '';
this.$forceUpdate();
},
img(path) {
return ns.img(path)
},
selectColor(id, style_field) {
var self = this;
colorRender(id, '', function (elem, color) {
if (self.myData.data[style_field].iconBgImg || self.myData.data[style_field]['iconBgColor'].length) {
self.myData.data[style_field]['iconBgColor'] = [color];
} else {
self.myData.data[style_field]['iconColor'] = [color];
}
self.$forceUpdate();
})
},
/**
* 选择图标风格
* @param event
* @param style_field
*/
iconStyle(event, style_field) {
var self = this;
selectIconStyle({
elem: event,
icon: self.myData.data[self.data.field],
callback: function (data) {
if (data) {
self.myData.data[style_field] = data;
self.$forceUpdate();
} else {
iconStyleSet({
query: {
icon: self.myData.data[self.data.field]
},
}, function (style) {
self.myData.data[style_field] = style;
self.$forceUpdate();
})
}
}
})
},
}
});
/**
* 渲染颜色组件
* @param id
* @param color
* @param callback
*/
var _colorPicker = {};
function colorRender(id, color, callback){
if (_colorPicker[id]) return;
setTimeout(function () {
_colorPicker[id] = Colorpicker.create({
el: id,
color: color,
change: function (elem, hex) {
callback(elem, hex)
}
});
$('#'+id).click();
},10)
}
function selectIconStyle(option) {
var _w = option.width ? option.width : 340,
_h = option.height ? option.height : 200,
_x = option.elem.x - _w,
_y = option.elem.y;
option.pagex -= _w;
window.onmessage = function(e) {
if (e.data.event && e.data.event == 'selectIconStyle') {
$('.select-icon-style').remove();
typeof option.callback == 'function' && option.callback(e.data.data);
}
};
var h = `
<div class="select-icon-style">
<div class="icon-style-wrap" style="width: `+ _w +`px;height: `+ _h +`px;left:`+ _x +`px;top:`+ _y +`px">
<iframe src="`+ ns.url('shop/diy/selecticonstyle', {request_mode: 'iframe',icon: option.icon}) +`" frameborder="0"></iframe>
</div>
</div>
`;
$('body').append(h);
// 点击任意位置关闭弹窗
$('.select-icon-style').click(function () {
$(this).remove();
})
}
/**
* 底部导航Vue对象
*/
var vue = new Vue({
el: "#bottomNav",
data: {
data: {
type: 1,
theme:'default',
// fontSize: 14,
textColor: "#333333",
textHoverColor: "#ff0036",
iconColor: "#333333",
iconHoverColor: "#ff0036",
backgroundColor: "#ffffff",
bulge : true,
list: [
{iconPath: '', selectedIconPath: '', text: '菜单', link: {}, icon_type:'icon', selected_icon_type:'icon', style:'', selected_style:''},
{iconPath: '', selectedIconPath: '', text: '菜单', link: {}, icon_type:'icon', selected_icon_type:'icon', style:'', selected_style:''},
{iconPath: '', selectedIconPath: '', text: '菜单', link: {}, icon_type:'icon', selected_icon_type:'icon', style:'', selected_style:''},
{iconPath: '', selectedIconPath: '', text: '菜单', link: {}, icon_type:'icon', selected_icon_type:'icon', style:'', selected_style:''},
],
},
selected: -1,
},
created: function () {
if (bottomNavInfo) this.data = bottomNavInfo;
},
methods: {
mouseOver: function (index) {
this.selected = index;
},
mouseOut: function () {
this.selected = -1;
},
//转换图片路径
changeImgUrl: function (url) {
if (url == null || url === "") return '';
if (url.indexOf("static/img/") > -1) return ns.img(ns_url.staticImg + "/" + url.replace("public/static/img/", ""));
else return ns.img(url);
},
}
});
$('.edit-attribute').height($(window).height()-150+'px');
var repeat_flag = false;//防重复标识
$("button.save").click(function () {
// 验证
var verify = {
flag : false,
message : ""
};
for (var i=0;i<vue.data.list.length;i++) {
var item = vue.data.list[i];
if (vue.data.type == 1) {
// 图文
if (item.text == '') {
verify.flag = true;
verify.message = "请输入第[" + (i + 1) + "]个标题";
break;
}
if (item.iconPath == '' ) {
verify.flag = true;
verify.message = "请上传第[" + (i + 1) + "]个图标";
break;
}
if (item.selectedIconPath == '') {
verify.flag = true;
verify.message = "请上传第[" + (i + 1) + "]个选中图标";
break;
}
} else if (vue.data.type == 2) {
// 图片
if (item.iconPath == '') {
verify.flag = true;
verify.message = "请上传第[" + (i + 1) + "]个图片";
break;
}
if (item.selectedIconPath == '') {
verify.flag = true;
verify.message = "请上传第[" + (i + 1) + "]个选中图片";
break;
}
} else if (vue.data.type == 3) {
// 文字
if (item.text == '') {
verify.flag = true;
verify.message = "请输入第[" + (i + 1) + "]个标题";
break;
}
}
if ($.isEmptyObject(item.link)) {
verify.flag = true;
verify.message = "请选择链接地址";
break;
}
}
if(verify.flag){
layer.msg(verify.message);
return;
}
if (repeat_flag) return;
repeat_flag = true;
$.ajax({
type: "post",
url: ns.url("shop/diy/bottomNavDesign"),
data: {value: JSON.stringify(vue.data)},
dataType: "JSON",
success: function (res) {
layer.msg(res.message);
repeat_flag = false;
if (res.code == 0) {
listenerHash(); // 刷新页面
}
}
});
});

229
public/static/ext/drag-arrange.js Executable file
View File

@@ -0,0 +1,229 @@
'use strict';
(function (factory) {
if (typeof define === 'function' && define.amd) {
define(['jquery'], factory);
} else {
factory(jQuery);
}
}
(function ($) {
var IS_TOUCH_DEVICE = ('ontouchstart' in document.documentElement);
var DRAG_THRESHOLD = 5;
var counter = 0;
var dragEvents = (function () {
if (IS_TOUCH_DEVICE) {
return {
START: 'touchstart',
MOVE: 'touchmove',
END: 'touchend'
};
} else {
return {
START: 'mousedown',
MOVE: 'mousemove',
END: 'mouseup'
};
}
}());
$.fn.arrangeable = function (options) {
var dragging = false;
var $clone;
var dragElement;
var originalClientX, originalClientY;
var $elements;
var touchDown = false;
var leftOffset, topOffset;
var eventNamespace;
var $options = options;
if (typeof options === "string") {
if (options === 'destroy') {
if (this.eq(0).data('drag-arrange-destroy')) {
this.eq(0).data('drag-arrange-destroy')();
}
return this;
}
}
options = $.extend({
"dragEndEvent": "drag.end.arrangeable"
}, options);
var dragEndEvent = options["dragEndEvent"];
$elements = this;
eventNamespace = getEventNamespace();
this.each(function () {
var dragSelector = options.dragSelector;
var self = this;
var $this = $(this);
if (dragSelector) {
$this.on(dragEvents.START + eventNamespace,
dragSelector, dragStartHandler);
} else {
$this.on(dragEvents.START + eventNamespace,
dragStartHandler);
}
function dragStartHandler(e) {
e.stopPropagation();
touchDown = true;
originalClientX = e.clientX
|| e.originalEvent.touches[0].clientX;
originalClientY = e.clientY
|| e.originalEvent.touches[0].clientY;
dragElement = self;
}
});
$(document).on(dragEvents.MOVE + eventNamespace,
dragMoveHandler).on(dragEvents.END + eventNamespace,
dragEndHandler);
function dragMoveHandler(e) {
if (!touchDown) {
return;
}
var $dragElement = $(dragElement);
var dragDistanceX = (e.clientX || e.originalEvent.touches[0].clientX)
- originalClientX;
var dragDistanceY = (e.clientY || e.originalEvent.touches[0].clientY)
- originalClientY;
if (dragging) {
e.stopPropagation();
$clone.css({
left: leftOffset + dragDistanceX,
top: topOffset + dragDistanceY
});
shiftHoveredElement($clone, $dragElement, $elements);
} else if (Math.abs(dragDistanceX) > DRAG_THRESHOLD
|| Math.abs(dragDistanceY) > DRAG_THRESHOLD) {
$clone = clone($dragElement);
leftOffset = dragElement.offsetLeft
- parseInt($dragElement.css('margin-left'))
- parseInt($dragElement.css('padding-left'));
topOffset = dragElement.offsetTop
- parseInt($dragElement.css('margin-top'))
- parseInt($dragElement.css('padding-top'));
$clone.css({
left: leftOffset,
top: topOffset
});
$dragElement.parent().append($clone);
$dragElement.css('visibility', 'hidden');
dragging = true;
}
}
function dragEndHandler(e) {
if (dragging) {
e.stopPropagation();
dragging = false;
$clone.remove();
dragElement.style.visibility = 'visible';
$(dragElement).parent().trigger(dragEndEvent,
[$(dragElement)]);
//拖拽结束后执行回调，传入当前拖拽的对象
if ($options.callback) $options.callback($(dragElement));
}
touchDown = false;
}
function destroy() {
$elements.each(function () {
var dragSelector = options.dragSelector;
var $this = $(this);
if (dragSelector) {
$this.off(dragEvents.START + eventNamespace,
dragSelector);
} else {
$this.off(dragEvents.START + eventNamespace);
}
});
$(document).off(dragEvents.MOVE + eventNamespace).off(
dragEvents.END + eventNamespace);
$elements.eq(0).data('drag-arrange-destroy', null);
$elements = null;
dragMoveHandler = null;
dragEndHandler = null;
}
this.eq(0).data('drag-arrange-destroy', destroy);
};
function clone($element) {
var $clone = $element.clone();
$clone.css({
position: 'absolute',
width: $element.width(),
height: $element.height(),
'z-index': 100000
});
return $clone;
}
function getHoveredElement($clone, $dragElement, $movableElements) {
var cloneOffset = $clone.offset();
var cloneWidth = $clone.width();
var cloneHeight = $clone.height();
var cloneLeftPosition = cloneOffset.left;
var cloneRightPosition = cloneOffset.left + cloneWidth;
var cloneTopPosition = cloneOffset.top;
var cloneBottomPosition = cloneOffset.top + cloneHeight;
var $currentElement;
var horizontalMidPosition, verticalMidPosition;
var offset, overlappingX, overlappingY, inRange;
for (var i = 0; i < $movableElements.length; i++) {
$currentElement = $movableElements.eq(i);
if ($currentElement[0] === $dragElement[0]) {
continue;
}
offset = $currentElement.offset();
horizontalMidPosition = offset.left + 0.5
* $currentElement.width();
verticalMidPosition = offset.top + 0.5
* $currentElement.height();
overlappingX = (horizontalMidPosition < cloneRightPosition)
&& (horizontalMidPosition > cloneLeftPosition);
overlappingY = (verticalMidPosition < cloneBottomPosition)
&& (verticalMidPosition > cloneTopPosition);
inRange = overlappingX && overlappingY;
if (inRange) {
return $currentElement[0];
}
}
}
function shiftHoveredElement($clone, $dragElement, $movableElements) {
var hoveredElement = getHoveredElement($clone, $dragElement,
$movableElements);
if (hoveredElement !== $dragElement[0]) {
var hoveredElementIndex = $movableElements
.index(hoveredElement);
var dragElementIndex = $movableElements.index($dragElement);
if (hoveredElementIndex < dragElementIndex) {
$(hoveredElement).before($dragElement);
} else {
$(hoveredElement).after($dragElement);
}
shiftElementPosition($movableElements, dragElementIndex,
hoveredElementIndex);
}
}
function shiftElementPosition(arr, fromIndex, toIndex) {
var temp = arr.splice(fromIndex, 1)[0];
return arr.splice(toIndex, 0, temp);
}
function getEventNamespace() {
counter += 1;
return '.drag-arrange-' + counter;
}
}));

5575
public/static/ext/layui/css/layui.css Executable file
View File

File diff suppressed because it is too large Load Diff

Some files were not shown because too many files have changed in this diff Show More