You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
1013 lines
45 KiB
1013 lines
45 KiB
<!DOCTYPE html>
|
|
<html lang="en" class="app">
|
|
<head>
|
|
<meta charset="utf-8">
|
|
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title></title>
|
|
<script type="text/javascript" src="style/tgt/util.js"></script>
|
|
<link rel="stylesheet" href="style/assets/css/bootstrap.min.css" type="text/css"/>
|
|
{literal}
|
|
<script>
|
|
var require = {
|
|
urlArgs: 'v=2018070213'
|
|
};
|
|
</script>
|
|
<script src="style/tgt/require.js"></script>
|
|
<script src="style/tgt/config.js"></script>
|
|
<script src="style/js/jquery.min.js"></script>
|
|
<script type="text/javascript" src="style/tgt/jquery.gcjs.js"></script>
|
|
<script type="text/javascript" src="style/tgt/jquery.form.js"></script>
|
|
<script type="text/javascript" src="style/tgt/tooltipbox.js"></script>
|
|
<script type="text/javascript" src="style/tgt/sceollFix.js"></script>
|
|
<script src="style/tgt/common.js"></script>
|
|
<script language='javascript' src="style/tgt/designer.js"></script>
|
|
<script language='javascript' src="style/tgt/jquery.contextMenu.js"></script>
|
|
<link href="style/tgt/jquery.contextMenu.css" rel="stylesheet">
|
|
{/literal}
|
|
</head>
|
|
<body>
|
|
{literal}
|
|
<style type="text/css">
|
|
.red {
|
|
float: left;
|
|
color: red
|
|
}
|
|
|
|
.white {
|
|
float: left;
|
|
color: #fff
|
|
}
|
|
|
|
.tooltipbox {
|
|
background: #fef8dd;
|
|
border: 1px solid #c40808;
|
|
position: absolute;
|
|
left: 0;
|
|
top: 0;
|
|
text-align: center;
|
|
height: 20px;
|
|
color: #c40808;
|
|
padding: 2px 5px 1px 5px;
|
|
border-radius: 3px;
|
|
z-index: 1000;
|
|
}
|
|
|
|
.red {
|
|
float: left;
|
|
color: red
|
|
}
|
|
|
|
.bg-light .nav-primary > ul > li > ul.nav > li > a {
|
|
margin: 0 0 0 10px;
|
|
}
|
|
|
|
#poster {
|
|
width: 320px;
|
|
height: 504px;
|
|
border: 1px solid #ccc;
|
|
position: relative
|
|
}
|
|
|
|
#poster .bg {
|
|
position: absolute;
|
|
width: 100%;
|
|
z-index: 0
|
|
}
|
|
|
|
#poster .drag[type=img] img,
|
|
#poster .drag[type=thumb] img {
|
|
width: 100%;
|
|
height: 100%;
|
|
}
|
|
|
|
#poster .drag {
|
|
position: absolute;
|
|
width: 80px;
|
|
height: 80px;
|
|
border: 1px solid #000;
|
|
}
|
|
|
|
#poster .drag[type=nickname] {
|
|
width: 80px;
|
|
height: 40px;
|
|
font-size: 16px;
|
|
font-family: 黑体;
|
|
}
|
|
|
|
#poster .drag img {
|
|
position: absolute;
|
|
z-index: 0;
|
|
width: 100%;
|
|
}
|
|
|
|
#poster .rRightDown,
|
|
.rLeftDown,
|
|
.rLeftUp,
|
|
.rRightUp,
|
|
.rRight,
|
|
.rLeft,
|
|
.rUp,
|
|
.rDown {
|
|
position: absolute;
|
|
width: 7px;
|
|
height: 7px;
|
|
z-index: 1;
|
|
font-size: 0;
|
|
}
|
|
|
|
#poster .rRightDown,
|
|
.rLeftDown,
|
|
.rLeftUp,
|
|
.rRightUp,
|
|
.rRight,
|
|
.rLeft,
|
|
.rUp,
|
|
.rDown {
|
|
background: #C00;
|
|
}
|
|
|
|
.rLeftDown,
|
|
.rRightUp {
|
|
cursor: ne-resize;
|
|
}
|
|
|
|
.rRightDown,
|
|
.rLeftUp {
|
|
cursor: nw-resize;
|
|
}
|
|
|
|
.rRight,
|
|
.rLeft {
|
|
cursor: e-resize;
|
|
}
|
|
|
|
.rUp,
|
|
.rDown {
|
|
cursor: n-resize;
|
|
}
|
|
|
|
.rLeftDown {
|
|
left: -4px;
|
|
bottom: -4px;
|
|
}
|
|
|
|
.rRightUp {
|
|
right: -4px;
|
|
top: -4px;
|
|
}
|
|
|
|
.rRightDown {
|
|
right: -4px;
|
|
bottom: -4px;
|
|
}
|
|
|
|
.rRightDown {
|
|
background-color: #00F;
|
|
}
|
|
|
|
.rLeftUp {
|
|
left: -4px;
|
|
top: -4px;
|
|
}
|
|
|
|
.rRight {
|
|
right: -4px;
|
|
top: 50%;
|
|
margin-top: -4px;
|
|
}
|
|
|
|
.rLeft {
|
|
left: -4px;
|
|
top: 50%;
|
|
margin-top: -4px;
|
|
}
|
|
|
|
.rUp {
|
|
top: -4px;
|
|
left: 50%;
|
|
margin-left: -4px;
|
|
}
|
|
|
|
.rDown {
|
|
bottom: -4px;
|
|
left: 50%;
|
|
margin-left: -4px;
|
|
}
|
|
|
|
.context-menu-layer {
|
|
z-index: 9999;
|
|
}
|
|
|
|
.context-menu-list {
|
|
z-index: 9999;
|
|
}
|
|
|
|
</style>
|
|
{/literal}
|
|
|
|
<section class="scrollable padder" style="padding-top:10px;">
|
|
|
|
<div class="main rightlist">
|
|
<form action="" method="post" class="form-horizontal form" enctype="multipart/form-data">
|
|
<input type="hidden" name="id" value="{$res->id}"/>
|
|
<input type="hidden" name="https_name" class="https_name" value="{$uploadImg}"/>
|
|
<div class='panel panel-default'>
|
|
<div class='panel-heading'>
|
|
海报修改
|
|
</div>
|
|
|
|
<div class='panel-body'>
|
|
<div class="form-group">
|
|
<label class="col-xs-12 col-sm-3 col-md-2 control-label"><span style='color:red'>*</span>
|
|
海报名称</label>
|
|
<div class="col-sm-9 col-xs-12">
|
|
<input type="text" name="title" class="form-control" value="{$res->name}"/>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="form-group">
|
|
<label class="col-xs-12 col-sm-3 col-md-2 control-label"><span style='color:red'>*</span>
|
|
海报类型</label>
|
|
<div class="col-sm-9 col-xs-12">
|
|
<label class="radio-inline">
|
|
|
|
<input type="radio" {if $res->type ==1} checked='checked"{/if} name="type" value="1" /> 文章海报
|
|
|
|
</label>
|
|
|
|
|
|
<label class="radio-inline">
|
|
<input type="radio" {if $res->type ==2} checked="checked"{/if} name="type" value="2" /> 红包
|
|
</label>
|
|
|
|
<label class="radio-inline">
|
|
<input type="radio" {if $res->type ==3} checked="checked"{/if} name="type" value="3" /> 商品海报
|
|
</label>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
|
|
|
|
<div class="form-group" style="display:none">
|
|
<label class="col-xs-12 col-sm-3 col-md-2 control-label"><span style=' color:red'>*</span>
|
|
生成二维码关键词</label>
|
|
<div class="col-sm-9 col-xs-12">
|
|
<input type="text" name="keyword" class="form-control" value="{$res->keyword}"/>
|
|
<span class='help-block'>如果是商品海报 ，回复关键词是 关键词+商品ID</span>
|
|
</div>
|
|
</div>
|
|
|
|
|
|
<div class="form-group">
|
|
<label class="col-xs-12 col-sm-3 col-md-2 control-label">是否默认</label>
|
|
<div class="col-sm-9 col-xs-12">
|
|
{if $res->isdefault == 1}
|
|
<label class="radio-inline">
|
|
<input type="radio" name="isdefault" value="1" checked/> 是
|
|
</label>
|
|
<label class="radio-inline">
|
|
<input type="radio" name="isdefault" value="0"/> 否
|
|
</label>
|
|
{else}
|
|
<label class="radio-inline">
|
|
<input type="radio" name="isdefault" value="1"/> 是
|
|
</label>
|
|
<label class="radio-inline">
|
|
<input type="radio" name="isdefault" value="0" checked/> 否
|
|
</label>
|
|
{/if}
|
|
|
|
<span class='help-block'>是否是海报类型的默认设置，一种海报只能一个默认设置</span>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
<div class="form-group">
|
|
|
|
<label class="col-xs-12 col-sm-3 col-md-2 control-label"><span style='color:red'>*</span>
|
|
海报设计</label>
|
|
<div class="col-sm-9 col-xs-12">
|
|
<table style='width:100%;'>
|
|
<tr>
|
|
<td style='width:320px;' valign='top'>
|
|
<div id='poster'>
|
|
{if $res->bg != ''}
|
|
<img src='{$uploadImg}{$res->bg}' class='bg'/>
|
|
{/if}
|
|
|
|
{if $data != ''}
|
|
|
|
{foreach from=$data item=d key=key name=f1}
|
|
<div class="drag" type="{$d->type}" index="{$key+1}"
|
|
style="zindex:{$key+1};left:{$d->left};top:{$d->top};
|
|
width:{$d->width};height:{$d->height}"
|
|
src="{$d->src}" size="{$d->size}" color="{$d->color}">
|
|
{if $d->type=='qr'}
|
|
<img src="style/tgt/qr.jpg"/>
|
|
{elseif $d->type=='head'}
|
|
<img src="style/tgt/moren.png"/>
|
|
{elseif $d->type=='thumb'}
|
|
<img src="style/tgt/kdd.png"/>
|
|
{elseif $d->type =='img'}
|
|
<img src="{$d->src}"/>
|
|
{elseif $d->type =='nickname'}
|
|
<div class=text
|
|
style="font-size:{$d->size};color:{$d->color}">昵称
|
|
</div>
|
|
{elseif $d->type =='title'}
|
|
<div class=text
|
|
style="font-size:{$d->size};color:{$d->color}">商品名称
|
|
</div>
|
|
{elseif $d->type =='marketprice'}
|
|
<div class=text
|
|
style="font-size:{$d->size};color:{$d->color}">商品现价
|
|
</div>
|
|
{elseif $d->type =='productprice'}
|
|
<div class=text
|
|
style="font-size:{$d->size};color:{$d->color}">商品原价
|
|
</div>
|
|
{/if}
|
|
|
|
<div class="rRightDown"></div>
|
|
<div class="rLeftDown"></div>
|
|
<div class="rRightUp"></div>
|
|
<div class="rLeftUp"></div>
|
|
<div class="rRight"></div>
|
|
<div class="rLeft"></div>
|
|
<div class="rUp"></div>
|
|
<div class="rDown"></div>
|
|
|
|
</div>
|
|
{/foreach}
|
|
|
|
{/if}
|
|
|
|
</div>
|
|
</td>
|
|
|
|
<td valign='top'>
|
|
<div class='panel panel-default'>
|
|
<div class='panel-body'>
|
|
<div class="form-group" id="bgset">
|
|
<label class="col-xs-12 col-sm-3 col-md-2 control-label">背景图片</label>
|
|
<div class="col-sm-9 col-xs-12">
|
|
{literal}
|
|
<script type="text/javascript">
|
|
function showImageDialog(elm, opts, options) {
|
|
require(["util"], function (util) {
|
|
var btn = $(elm);
|
|
var ipt = btn.parent().prev();
|
|
var val = ipt.val();
|
|
options = {
|
|
'global': false,
|
|
'class_extra': '',
|
|
'direct': true,
|
|
'multiple': false
|
|
};
|
|
|
|
util.image(val, function (url) {
|
|
|
|
var imgInfo = JSON.parse(url._raw);
|
|
|
|
if (imgInfo.height != 1008 || imgInfo.width != 640) {
|
|
alert('背景图片尺寸不符！')
|
|
return;
|
|
} else {
|
|
if (url.url) {
|
|
|
|
ipt.val(url.attachment);
|
|
ipt.attr("filename", url.filename);
|
|
ipt.attr("url", url.url);
|
|
|
|
}
|
|
}
|
|
|
|
|
|
if (url.media_id) {
|
|
if (img.length > 0) {
|
|
img.get(0).src = "";
|
|
}
|
|
ipt.val(url.media_id);
|
|
}
|
|
}, null, options);
|
|
});
|
|
}
|
|
|
|
|
|
function deleteImage(elm) {
|
|
require(["jquery"], function ($) {
|
|
$(elm).prev().attr("src", "style/tgt/nopic.jpg");
|
|
$(elm).parent().prev().find("input").val("");
|
|
});
|
|
}
|
|
|
|
</script>
|
|
{/literal}
|
|
|
|
<div class="input-group ">
|
|
|
|
<input type="text" name="bg" value="{$res->bg}"
|
|
class="form-control" autocomplete="off">
|
|
<span class="input-group-btn">
|
|
<button class="btn btn-default" type="button" onclick="showImageDialog(this);">选择图片</button>
|
|
</span>
|
|
</div>
|
|
|
|
<div class="input-group " style="margin-top:.5em;">
|
|
<img src="style/tgt/nopic.jpg"
|
|
onerror="this.src='style/tgt/nopic.jpg'; this.title='图片未找到.'"
|
|
class="img-responsive img-thumbnail" width="150"/>
|
|
<em class="close"
|
|
style="position:absolute; top: 0px; right: -14px;"
|
|
title="删除这张图片" onclick="deleteImage(this)">×</em>
|
|
</div>
|
|
<span class='help-block'>背景图片尺寸: 640 * 1008</span>
|
|
|
|
</div>
|
|
|
|
|
|
</div>
|
|
|
|
<div class="form-group">
|
|
<label class="col-xs-12 col-sm-3 col-md-3 control-label">海报元素</label>
|
|
<div class="col-sm-9 col-xs-12">
|
|
<button class='btn btn-default btn-com' type='button'
|
|
data-type='qr' style="margin-bottom: 4px">二维码
|
|
</button>
|
|
<button class='btn btn-default btn-com' type='button'
|
|
data-type='img' style="margin-bottom: 4px">图片
|
|
</button>
|
|
<span id="goodsparams">
|
|
|
|
<button class='btn btn-default btn-com' type='button'
|
|
data-type='title'>商品名称</button>
|
|
|
|
<button class='btn btn-default btn-com' type='button'
|
|
data-type='thumb'>商品图片</button>
|
|
|
|
<button class='btn btn-default btn-com' type='button'
|
|
data-type='marketprice'>商品现价</button>
|
|
|
|
<button class='btn btn-default btn-com' type='button'
|
|
data-type='productprice'>商品原价</button>
|
|
|
|
</span>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
<div id='qrset' style='display:none'>
|
|
|
|
<div class="form-group">
|
|
|
|
<label class="col-xs-12 col-sm-3 col-md-3 control-label">二维码尺寸</label>
|
|
|
|
<div class="col-sm-9 col-xs-12">
|
|
<select id='qrsize' class='form-control'>
|
|
<option value='1'>1</option>
|
|
<option value='2'>2</option>
|
|
<option value='3'>3</option>
|
|
<option value='4'>4</option>
|
|
<option value='5'>5</option>
|
|
<option value='6'>6</option>
|
|
</select>
|
|
</div>
|
|
</div>
|
|
|
|
</div>
|
|
|
|
|
|
<div id='nameset' style='display:none'>
|
|
<div class="form-group">
|
|
<label class="col-xs-12 col-sm-3 col-md-3 control-label">昵称颜色</label>
|
|
<div class="col-sm-9 col-xs-12 wid100">
|
|
|
|
{literal}
|
|
<script type="text/javascript">
|
|
require(["jquery", "util"], function ($, util) {
|
|
$(function () {
|
|
$(".colorpicker").each(function () {
|
|
var elm = this;
|
|
util.colorpicker(elm, function (color) {
|
|
$(elm).parent().prev().prev().val(color.toHexString());
|
|
$(elm).parent().prev().css("background-color", color.toHexString());
|
|
});
|
|
|
|
});
|
|
|
|
$(".colorclean").click(function () {
|
|
$(this).parent().prev().prev().val("");
|
|
$(this).parent().prev().css("background-color", "#FFF");
|
|
});
|
|
|
|
});
|
|
|
|
});
|
|
|
|
</script>
|
|
{/literal}
|
|
|
|
<div class="row row-fix">
|
|
<div class="col-xs-8 col-sm-8"
|
|
style="padding-right:0;">
|
|
<div class="input-group">
|
|
<input class="form-control" type="text"
|
|
name="color" placeholder="请选择颜色"
|
|
value="{$res->color}">
|
|
<span class="input-group-addon"
|
|
style="width:35px;border-left:none;background-color:"></span>
|
|
<span class="input-group-btn">
|
|
|
|
<button class="btn btn-default colorpicker" type="button">选择颜色 <i class="fa fa-caret-down"></i></button>
|
|
|
|
<button class="btn btn-default colorclean" type="button"><span><i class="fa fa-remove"></i></span></button>
|
|
|
|
</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
</div>
|
|
|
|
<div class="form-group">
|
|
|
|
<label class="col-xs-12 col-sm-3 col-md-3 control-label">昵称大小</label>
|
|
<div class="col-sm-4">
|
|
<div class='input-group wid100'>
|
|
<input type="text" id="namesize"
|
|
class="form-control namesize"
|
|
placeholder="例如: 14,16"/>
|
|
<div class='input-group-addon'>px</div>
|
|
</div>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
<div class="form-group" id="imgset" style="display:none">
|
|
<label class="col-xs-12 col-sm-3 col-md-3 control-label">图片设置</label>
|
|
<div class="col-sm-9 col-xs-12">
|
|
<div class="input-group ">
|
|
<input type="text" name="img" value="{$res->image}"
|
|
class="form-control" autocomplete="off">
|
|
|
|
<span class="input-group-btn">
|
|
|
|
<button class="btn btn-default" type="button" onclick="showImageDialog(this);">选择图片</button>
|
|
|
|
</span>
|
|
|
|
</div>
|
|
|
|
<div class="input-group " style="margin-top:.5em;">
|
|
|
|
<img src="style/tgt/nopic.jpg"
|
|
onerror="this.src='style/tgt/nopic.jpg'; this.title='图片未找到.'"
|
|
class="img-responsive img-thumbnail" width="150"/>
|
|
|
|
<em class="close"
|
|
style="position:absolute; top: 0px; right: -14px;"
|
|
title="删除这张图片" onclick="deleteImage(this)">×</em>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
</td>
|
|
|
|
</tr>
|
|
|
|
</table>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
|
|
<div class="form-group">
|
|
|
|
<label class="col-xs-12 col-sm-3 col-md-2 control-label">生成等待文字</label>
|
|
|
|
<div class="col-sm-9 col-xs-12">
|
|
<textarea name="waittext" class="form-control">{$res->waittext}</textarea>
|
|
<span class="help-block">例如：您的专属海报正在拼命生成中，请等待片刻...</span>
|
|
</div>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
|
|
<div class="panel-body">
|
|
|
|
<div class="form-group">
|
|
<label class="col-xs-12 col-sm-3 col-md-2 control-label"></label>
|
|
<div class="col-sm-9 col-xs-12">
|
|
<input type="submit" name="submit" value="提交" class="btn btn-primary col-lg-1"/>
|
|
<input type="hidden" name="token" value=""/>
|
|
<input type="hidden" name="data" value="{$res->data}"/>
|
|
<input type="button" name="back" onclick='history.back()' style='margin-left:10px;'
|
|
value="返回列表" class="btn btn-default"/>
|
|
</div>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
</form>
|
|
|
|
</div>
|
|
|
|
{literal}
|
|
<script language='javascript'>
|
|
|
|
$('form').submit(function () {
|
|
if ($(':input[name=title]').isEmpty()) {
|
|
Tip.focus($(':input[name=title]'), '请输入海报名称!');
|
|
return false;
|
|
}
|
|
|
|
if ($(':input[name=type]:checked').length <= 0) {
|
|
Tip.focus($(':input[name=title]'), '请选择海报类型!');
|
|
return false;
|
|
}
|
|
|
|
|
|
|
|
if ($(':radio[name=type]:checked').val() == '4') {
|
|
if ($(':radio[name=paytype]:checked').val() == '1') {
|
|
var recmoney = parseFloat($(':input[name=recmoney]').val());
|
|
if (recmoney > 0) {
|
|
if (recmoney < 1) {
|
|
Tip.select($(':input[name=recmoney]'), '微信企业付款需支付1元以上!', 'bottom');
|
|
return false;
|
|
}
|
|
}
|
|
|
|
var submoney = parseFloat($(':input[name=submoney]').val());
|
|
if (submoney > 0) {
|
|
if (submoney < 1) {
|
|
Tip.select($(':input[name=submoney]'), '微信企业付款需支付1元以上!', 'bottom');
|
|
return false;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
var data = [];
|
|
|
|
$('.drag').each(function () {
|
|
var obj = $(this);
|
|
var type = obj.attr('type');
|
|
var left = obj.css('left'),
|
|
top = obj.css('top');
|
|
var d = {
|
|
left: left,
|
|
top: top,
|
|
type: obj.attr('type'),
|
|
width: obj.css('width'),
|
|
height: obj.css('height')
|
|
};
|
|
|
|
if (type == 'nickname' || type == 'title' || type == 'marketprice' || type == 'productprice') {
|
|
d.size = obj.attr('size');
|
|
d.color = obj.attr('color');
|
|
} else if (type == 'qr') {
|
|
d.size = obj.attr('size');
|
|
} else if (type == 'img') {
|
|
d.src = obj.attr('src');
|
|
}
|
|
data.push(d);
|
|
|
|
});
|
|
|
|
$(':input[name=data]').val(JSON.stringify(data));
|
|
|
|
return true;
|
|
|
|
});
|
|
|
|
|
|
function bindEvents(obj) {
|
|
var index = obj.attr('index');
|
|
var rs = new Resize(obj, {
|
|
Max: true,
|
|
mxContainer: "#poster"
|
|
});
|
|
|
|
rs.Set($(".rRightDown", obj), "right-down");
|
|
rs.Set($(".rLeftDown", obj), "left-down");
|
|
rs.Set($(".rRightUp", obj), "right-up");
|
|
rs.Set($(".rLeftUp", obj), "left-up");
|
|
rs.Set($(".rRight", obj), "right");
|
|
rs.Set($(".rLeft", obj), "left");
|
|
rs.Set($(".rUp", obj), "up");
|
|
rs.Set($(".rDown", obj), "down");
|
|
rs.Scale = true;
|
|
var type = obj.attr('type');
|
|
if (type == 'nickname' || type == 'img' || type == 'title' || type == 'marketprice' || type == 'productprice') {
|
|
rs.Scale = false;
|
|
}
|
|
|
|
new Drag(obj, {
|
|
Limit: true,
|
|
mxContainer: "#poster"
|
|
});
|
|
|
|
$('.drag .remove').unbind('click').click(function () {
|
|
$(this).parent().remove();
|
|
})
|
|
|
|
$.contextMenu({
|
|
selector: '.drag[index=' + index + ']',
|
|
callback: function (key, options) {
|
|
var index = parseInt($(this).attr('zindex'));
|
|
if (key == 'next') {
|
|
var nextdiv = $(this).next('.drag');
|
|
if (nextdiv.length > 0) {
|
|
nextdiv.insertBefore($(this));
|
|
}
|
|
} else if (key == 'prev') {
|
|
var prevdiv = $(this).prev('.drag');
|
|
if (prevdiv.length > 0) {
|
|
$(this).insertBefore(prevdiv);
|
|
}
|
|
} else if (key == 'last') {
|
|
var len = $('.drag').length;
|
|
if (index >= len - 1) {
|
|
return;
|
|
}
|
|
var last = $('#poster .drag:last');
|
|
if (last.length > 0) {
|
|
$(this).insertAfter(last);
|
|
}
|
|
|
|
} else if (key == 'first') {
|
|
var index = $(this).index();
|
|
if (index <= 1) {
|
|
return;
|
|
}
|
|
|
|
var first = $('#poster .drag:first');
|
|
if (first.length > 0) {
|
|
$(this).insertBefore(first);
|
|
}
|
|
|
|
} else if (key == 'delete') {
|
|
$(this).remove();
|
|
}
|
|
|
|
var n = 1;
|
|
$('.drag').each(function () {
|
|
$(this).css("z-index", n);
|
|
n++;
|
|
})
|
|
},
|
|
|
|
items: {
|
|
"next": {
|
|
name: "调整到上层"
|
|
},
|
|
|
|
"prev": {
|
|
name: "调整到下层"
|
|
},
|
|
|
|
"last": {
|
|
name: "调整到最顶层"
|
|
},
|
|
|
|
"first": {
|
|
name: "调整到最低层"
|
|
},
|
|
|
|
"delete": {
|
|
name: "删除元素"
|
|
}
|
|
|
|
}
|
|
|
|
});
|
|
|
|
obj.unbind('click').click(function () {
|
|
bind($(this));
|
|
})
|
|
|
|
|
|
}
|
|
|
|
var imgsettimer = 0;
|
|
var nametimer = 0;
|
|
var bgtimer = 0;
|
|
|
|
function bindType(type) {
|
|
$("#goodsparams").hide();
|
|
$(".type4").hide();
|
|
if (type == '4') {
|
|
$(".type4").show();
|
|
} else if (type == '3') {
|
|
$("#goodsparams").show();
|
|
}
|
|
}
|
|
|
|
function clearTimers() {
|
|
clearInterval(imgsettimer);
|
|
clearInterval(nametimer);
|
|
clearInterval(bgtimer);
|
|
}
|
|
|
|
|
|
function getImgUrl(val) {
|
|
var https_name = $(".https_name").val();
|
|
if (val.indexOf('http://') == -1) {
|
|
val = https_name + val;
|
|
}
|
|
return val;
|
|
}
|
|
|
|
function bind(obj) {
|
|
var imgset = $('#imgset'),
|
|
nameset = $("#nameset"),
|
|
qrset = $('#qrset');
|
|
imgset.hide(), nameset.hide(), qrset.hide();
|
|
clearTimers();
|
|
var type = obj.attr('type');
|
|
if (type == 'img') {
|
|
imgset.show();
|
|
var src = obj.attr('src');
|
|
var input = imgset.find('input');
|
|
var img = imgset.find('img');
|
|
if (typeof(src) != 'undefined' && src != '') {
|
|
input.val(src);
|
|
img.attr('src', getImgUrl(src));
|
|
}
|
|
|
|
imgsettimer = setInterval(function () {
|
|
if (input.val() != src && input.val() != '') {
|
|
var url = getImgUrl(input.val());
|
|
obj.attr('src', input.val()).find('img').attr('src', url);
|
|
}
|
|
}, 10);
|
|
|
|
} else if (type == 'nickname' || type == 'title' || type == 'marketprice' || type == 'productprice') {
|
|
|
|
nameset.show();
|
|
var color = obj.attr('color') || "#000";
|
|
var size = obj.attr('size') || "16";
|
|
var input = nameset.find('input:first');
|
|
var namesize = nameset.find('#namesize');
|
|
var picker = nameset.find('.sp-preview-inner');
|
|
input.val(color);
|
|
namesize.val(size.replace("px", ""));
|
|
picker.css({
|
|
'background-color': color,
|
|
'font-size': size
|
|
});
|
|
|
|
|
|
nametimer = setInterval(function () {
|
|
obj.attr('color', input.val()).find('.text').css('color', input.val());
|
|
obj.attr('size', namesize.val() + "px").find('.text').css('font-size', namesize.val() + "px");
|
|
}, 10);
|
|
|
|
|
|
} else if (type == 'qr') {
|
|
qrset.show();
|
|
var size = obj.attr('size') || "3";
|
|
var sel = qrset.find('#qrsize');
|
|
sel.val(size);
|
|
sel.unbind('change').change(function () {
|
|
obj.attr('size', sel.val())
|
|
});
|
|
}
|
|
}
|
|
|
|
$(function () {
|
|
$('.drag').each(function () {
|
|
bindEvents($(this));
|
|
})
|
|
|
|
$(':radio[name=type]').click(function () {
|
|
var type = $(this).val();
|
|
bindType(type);
|
|
})
|
|
|
|
//改变背景
|
|
$('#bgset').find('button:first').click(function () {
|
|
var oldbg = $(':input[name=bg]').val();
|
|
bgtimer = setInterval(function () {
|
|
var bg = $(':input[name=bg]').val();
|
|
if (oldbg != bg && bg != '') {
|
|
bg = getImgUrl(bg);
|
|
$('#poster .bg').remove();
|
|
var bgh = $("<img src='" + bg + "' class='bg' />");
|
|
var first = $('#poster .drag:first');
|
|
if (first.length > 0) {
|
|
bgh.insertBefore(first);
|
|
} else {
|
|
$('#poster').append(bgh);
|
|
}
|
|
oldbg = bg;
|
|
clearInterval(bgtimer);
|
|
}
|
|
}, 1000);
|
|
|
|
})
|
|
|
|
$('.btn-com').click(function () {
|
|
var imgset = $('#imgset'),
|
|
nameset = $("#nameset"),
|
|
qrset = $('#qrset');
|
|
imgset.hide(), nameset.hide(), qrset.hide();
|
|
clearTimers();
|
|
var type = $(this).data('type');
|
|
var img = "";
|
|
if (type == 'qr') {
|
|
img = '<img src="style/tgt/qr.jpg" />';
|
|
} else if (type == 'head') {
|
|
img = '<img src="style/tgt/moren.png" />';
|
|
} else if (type == 'img' || type == 'thumb') {
|
|
img = '<img src="style/tgt/kdd.png" />';
|
|
} else if (type == 'nickname') {
|
|
img = '<div class=text>昵称</div>';
|
|
} else if (type == 'title') {
|
|
img = '<div class=text>商品名称</div>';
|
|
} else if (type == 'marketprice') {
|
|
img = '<div class=text>商品现价</div>';
|
|
} else if (type == 'productprice') {
|
|
img = '<div class=text>商品原价</div>';
|
|
}
|
|
|
|
var index = $('#poster .drag').length + 1;
|
|
var obj = $('<div class="drag" type="' + type + '" index="' + index + '" style="z-index:' + index + '">' + img + '<div class="rRightDown"> </div><div class="rLeftDown"> </div><div class="rRightUp"> </div><div class="rLeftUp"> </div><div class="rRight"> </div><div class="rLeft"> </div><div class="rUp"> </div><div class="rDown"></div></div>');
|
|
|
|
$('#poster').append(obj);
|
|
bindEvents(obj);
|
|
});
|
|
|
|
$('.drag').click(function () {
|
|
bind($(this));
|
|
})
|
|
|
|
})
|
|
|
|
var currentCouponType = null;
|
|
|
|
function selectCoupon(type) {
|
|
currentCouponType = type;
|
|
$('#modal-module-menus-coupon').modal();
|
|
}
|
|
|
|
|
|
function select_coupon(o) {
|
|
|
|
$(":input[name=" + currentCouponType + "couponid]").val(o.id);
|
|
$("." + currentCouponType + "group").find('button').html("[" + o.id + "]" + o.couponname);
|
|
$("#modal-module-menus-coupon .close").click();
|
|
|
|
}
|
|
|
|
</script>
|
|
</div>
|
|
<script language='javascript'>
|
|
require(['bootstrap'], function ($) {
|
|
$('.btn').each(function () {
|
|
if ($(this).closest('td').css('position') == 'relative') {
|
|
return true;
|
|
}
|
|
|
|
$(this).hover(function () {
|
|
$(this).tooltip('show');
|
|
}, function () {
|
|
$(this).tooltip('hide');
|
|
});
|
|
})
|
|
|
|
});
|
|
|
|
$('.js-clip').each(function () {
|
|
util.clip(this, $(this).attr('data-url'));
|
|
});
|
|
|
|
</script>
|
|
{/literal}
|
|
|
|
</section>
|
|
|
|
</html>
|