Files
littleTiger/application/admin/view/shipping/info.html

358 lines
18 KiB
HTML
Raw Normal View History

2019-02-28 19:48:21 +08:00
<include file="public/layout" />
<script src="__PUBLIC__/js/jquery.event.drag.js" type="text/javascript"></script>
<script type="text/javascript" src="__PUBLIC__/static/js/perfect-scrollbar.min.js"></script>
<style>
.waybill_design .item { background-color: #FEF5E6; width: 90px; height: 20px; padding: 1px 5px 4px 5px !important; border-color: #FFBEBC; border-style: solid; border-width: 1px 1px 1px 1px; cursor: move; position: absolute; left: 0; top: 0;}
.waybill_design .item pre {
height: 100%;
float: left;
padding: 0;
margin: 0;
border:0;
cursor: move;
}
.waybill_design textarea {
padding-left: 0px;
margin: 0px;
font-size: 12px;
resize: none;
outline: none;
overflow: hidden;
border: none;
}
.waybill_design .resize {
height: 6px;
width: 6px;
position: absolute;
bottom: 0px;
right: 0px;
overflow: hidden;
cursor: nw-resize;
background-color: #aaaaaa;
}
.waybill_design .selected {
filter: alpha(opacity = 100);
-moz-opacity: 1;
opacity: 1;
border: 1px solid #ff6600;
}
</style>
<body style="background-color: #FFF; overflow: auto;">
<div id="toolTipLayer" style="position: absolute; z-index: 9999; display: none; visibility: visible; left: 95px; top: 573px;"></div>
<div id="append_parent"></div>
<div id="ajaxwaitid"></div>
<div class="page">
<div class="fixed-bar">
<div class="item-title"><a class="back" href="javascript:history.back();" title="返回列表"><i class="fa fa-arrow-circle-o-left"></i></a>
<div class="subject">
<h3>物流管理 - 添加物流</h3>
<h5>网站系统物流索引和管理</h5>
</div>
</div>
</div>
<form class="form-horizontal" id="handleposition">
<input type="hidden" name="shipping_id" value="{$shipping.shipping_id}">
<input type="hidden" name="template_html" value="{$shipping.template_html}">
<div class="ncap-form-default">
<dl class="row">
<dt class="tit">
<label for="shipping_name"><em>*</em>物流公司名字</label>
</dt>
<dd class="opt">
<input type="text" value="{$shipping.shipping_name}" id="shipping_name" name="shipping_name" class="input-txt">
<span class="err" id="err_shipping_name"></span>
<p class="notic">物流公司名字</p>
</dd>
</dl>
<dl class="row">
<dt class="tit">
<label for="shipping_code"><em>*</em>快递公司编码</label>
</dt>
<dd class="opt">
<input type="text" value="{$shipping.shipping_code}" id="shipping_code" name="shipping_code" class="input-txt">
<span class="err" id="err_shipping_code"></span>
<if condition="$express_switch eq 1">
<p class="notic">物流公司编码由拼音组成,不得含有英文以外的字符。<a href="http://blog.csdn.net/wyp584168/article/details/79196562" target="_blank" class="ncap-btn"><i class="fa fa-truck"></i>
快递鸟编码参考</a></p>
<else />
<p class="notic">物流公司编码由拼音组成,不得含有英文以外的字符。<a href="http://www.ickd.cn/api/list.html" target="_blank" class="ncap-btn"><i class="fa fa-truck"></i>
快递100编码参考</a></p>
</if>
</dd>
</dl>
<dl class="row">
<dt class="tit">
<label>简短描述</label>
</dt>
<dd class="opt">
<textarea placeholder="请输入简短描述" name="shipping_desc" class="tarea w700">{$shipping.shipping_desc}</textarea>
<span class="err" id="err_shipping_desc"></span>
<p class="notic">简短描述</p>
</dd>
</dl>
<dl class="row">
<dt class="tit">
<em>*</em><label>物流图片图标</label>
</dt>
<dd class="opt">
<div class="input-file-show">
<span class="show">
<a id="img_a" target="_blank" class="nyroModal" rel="gal" href="{$shipping.shipping_logo}">
<i id="img_i" class="fa fa-picture-o" onmouseover="layer.tips('<img src={$shipping.shipping_logo}>',this,{tips: [1, '#fff']});" onmouseout="layer.closeAll();"></i>
</a>
</span>
<span class="type-file-box">
<input type="text" id="shipping_logo" name="shipping_logo" value="{$shipping.shipping_logo}" class="type-file-text">
<input type="button" name="button" value="选择上传..." class="type-file-button">
<input class="type-file-file" onClick="GetUploadify(1,'','shipping_logo','img_call_back')" size="30" title="点击前方预览图可查看大图,点击按钮选择文件并提交表单后上传生效">
</span>
</div>
<span class="err" id="err_shipping_logo"></span>
<p class="notic">物流图片图标最佳显示尺寸为240*60像素</p>
</dd>
</dl>
<dl class="row">
<dt class="tit">
<label for="width">模板宽度</label>
</dt>
<dd class="opt">
<input type="text" name="template_width" value="{$shipping.template_width|default='840'}" id="width" class="w100">
<span class="err" id="err_template_width"></span>
<p class="notic">运单宽度,单位为毫米(mm)</p>
</dd>
</dl>
<dl class="row">
<dt class="tit">
<label>模板高度</label>
</dt>
<dd class="opt">
<input type="text" name="template_height" value="{$shipping.template_height|default='480'}" class="w100">
<span class="err" id="err_template_height"></span>
<p class="notic">运单高度度,单位为毫米(mm)</p>
</dd>
</dl>
<dl class="row">
<dt class="tit">
<label>偏移量X</label>
</dt>
<dd class="opt">
<input type="text" name="template_offset_x" value="{$shipping.template_offset_x|default='0'}" class="w100">
<span class="err" id="err_template_offset_x"></span>
<p class="notic">运单模板左偏移量,单位为毫米(mm)</p>
</dd>
</dl>
<dl class="row">
<dt class="tit">
<label>偏移量Y</label>
</dt>
<dd class="opt">
<input type="text" name="template_offset_y" value="{$shipping.template_offset_y|default='0'}" class="w100">
<span class="err" id="err_template_offset_y"></span>
<p class="notic">运单模板上偏移量,单位为毫米(mm)</p>
</dd>
</dl>
<dl class="row">
<dt class="tit">
<label><em>*</em>模板图片</label>
</dt>
<dd class="opt">
<div class="input-file-show">
<span class="show">
<a id="template_img_a" target="_blank" class="nyroModal" rel="gal" href="{$shipping.template_img}">
<i id="template_img_i" class="fa fa-picture-o" onmouseover="layer.tips('<img src={$shipping.template_img}>',this,{tips: [1, '#fff']});" onmouseout="layer.closeAll();"></i>
</a>
</span>
<span class="type-file-box">
<input id="template_img" name="template_img" value="{$shipping.template_img}" class="type-file-text" type="text">
<input name="button" id="button1" value="选择上传..." class="type-file-button" type="button">
<input class="type-file-file" onclick="GetUploadify(1,'','plugins','template_img_call_back')" size="30" title="点击前方预览图可查看大图,点击按钮选择文件并提交表单后上传生效">
</span>
</div>
<span class="err" id="err_template_img"></span>
<p class="notic">请上传扫描好的运单图片,图片尺寸必须与快递单实际尺寸相符</p>
</dd>
</dl>
<dl class="row">
<dt class="tit">选择打印项</dt>
<dd class="opt">
<select class="form-control" id="tagOption">
<option value="">添加标签</option>
<option value="发货点-名称">发货点-名称</option>
<option value="发货点-联系人">发货点-联系人</option>
<option value="发货点-电话">发货点-电话</option>
<option value="发货点-省份">发货点-省份</option>
<option value="发货点-城市">发货点-城市</option>
<option value="发货点-区县">发货点-区县</option>
<option value="发货点-手机">发货点-手机</option>
<option value="发货点-详细地址">发货点-详细地址</option>
<option value="收件人-姓名">收件人-姓名</option>
<option value="收件人-手机">收件人-手机</option>
<option value="收件人-电话">收件人-电话</option>
<option value="收件人-省份">收件人-省份</option>
<option value="收件人-城市">收件人-城市</option>
<option value="收件人-区县">收件人-区县</option>
<option value="收件人-邮编">收件人-邮编</option>
<option value="收件人-详细地址">收件人-详细地址</option>
<option value="时间-年">时间-年</option>
<option value="时间-月">时间-月</option>
<option value="时间-日">时间-日</option>
<option value="时间-当前日期">时间-当前日期</option>
<option value="订单-订单号">订单-订单号</option>
<option value="订单-备注">订单-备注</option>
<option value="订单-配送费用">订单-配送费用</option>
</select>
<a id="deleteTag" class="ncap-btn"><i class="fa fa-trash-o"></i>删除标签</a>
</dd>
</dl>
<dl class="row">
<dt class="tit">打印项偏移校正</dt>
<dd class="opt">
<div class="waybill_area" style="overflow: auto;position: relative; width: {$config.width|default='840'}px; height: {$config.height|default='480'}px;">
<div class="waybill_back" style="position: relative; width: {$shipping.template_width|default='840'}px; height: {$shipping.template_height|default='480'}px;"> <img id="tp-img" src="{$shipping.template_img}" style="width: {$config.width|default='840'}px; height: {$config.height|default='480'}px;" alt=""> </div>
<div class="waybill_design" style="position: absolute; left: {$shipping.template_offset_x|default='0'}px; top: {$shipping.template_offset_y|default='0'}px; width: {$shipping.template_width|default='840'}px; height: {$shipping.template_height|default='480'}px;">
{$shipping.template_html|htmlspecialchars_decode}
</div>
</div>
</dd>
</dl>
<div class="bot" style="position: relative;z-index: 10"><a href="JavaScript:void(0);" onclick="verifyForm();" class="ncap-btn-big ncap-btn-green" id="submit">确认提交</a></div>
</div>
</form>
</div>
<script type="text/javascript">
function img_call_back(fileurl_tmp)
{
$("#shipping_logo").val(fileurl_tmp);
$("#img_a").attr('href', fileurl_tmp);
$("#img_i").attr('onmouseover', "layer.tips('<img src="+fileurl_tmp+">',this,{tips: [1, '#fff']});");
}
function template_img_call_back(value) {
$("#template_img").val(value);
$("#template_img_a").attr('href', value);
$("#template_img_i").attr('onmouseover', "layer.tips('<img src="+value+">',this,{tips: [1, '#fff']});");
$(".waybill_design").css({
background: "url(" + value + ") 0px 0px no-repeat"
});
$('#tp-img').hide();
}
$().ready(function () {
var $tagOption = $("#tagOption");
var $deleteTag = $("#deleteTag");
var $container = $(".waybill_design");
var $background = $("#template_img");
var $width = $("#width");
var $height = $("#height");
var zIndex = 1;
bind($container.find("div.item"));
// 标签选项
$tagOption.change(function () {
var value = $(this).find("option:selected").val();
if (value != "") {
bind($('<div class="item"><pre>' + value + '<\/pre><div class="resize"><\/div><\/div>').appendTo($container));
}
return false;
});
// 绑定
function bind($item) {
$item.drag("start", function (ev, dd) {
var $this = $(this);
dd.width = $this.width();
dd.height = $this.height();
dd.limit = {
right: $container.innerWidth() - $this.outerWidth(),
bottom: $container.innerHeight() - $this.outerHeight()
};
dd.isResize = $(ev.target).hasClass("resize");
}).drag(function (ev, dd) {
var $this = $(this);
if (dd.isResize) {
$this.css({
width: Math.max(20, Math.min(dd.width + dd.deltaX, $container.innerWidth() - $this.position().left) - 2),
height: Math.max(20, Math.min(dd.height + dd.deltaY, $container.innerHeight() - $this.position().top) - 2)
}).find("textarea").blur();
} else {
$this.css({
top: Math.min(dd.limit.bottom, Math.max(0, dd.offsetY)),
left: Math.min(dd.limit.right, Math.max(0, dd.offsetX))
});
}
}, {relative: true}).mousedown(function () {
$(this).css("z-index", zIndex++);
}).click(function () {
var $this = $(this);
$container.find("div.item").not($this).removeClass("selected");
$this.toggleClass("selected");
}).dblclick(function () {
var $this = $(this);
if ($this.find("textarea").size() == 0) {
var $pre = $this.find("pre");
var value = $pre.hide().text($pre.html()).html();
$('<textarea>' + value + '<\/textarea>').replaceAll($pre).width($this.innerWidth() - 6).height($this.innerHeight() - 6).blur(function () {
var $this = $(this);
$this.replaceWith('<pre>' + $this.val() + '<\/pre>');
}).focus();
}
});
}
// 删除标签
$deleteTag.click(function () {
$container.find("div.selected").remove();
return false;
});
$background.bind("input propertychange change", function () {
$container.css({
background: "url(/" + $background.val() + ") 0px 0px no-repeat"
});
});
// 宽度
$width.bind("input propertychange change", function () {
$container.width($width.val());
});
// 高度
$height.bind("input propertychange change", function () {
$container.height($height.val());
});
});
function verifyForm(){
var template_html = $(".waybill_design").html();
$("input[name='template_html']").val(template_html);
$('span.err').hide();
$.ajax({
type: "POST",
url: "{:U('Shipping/save')}",
data: $('#handleposition').serialize(),
async:false,
dataType: "json",
error: function () {
layer.alert("服务器繁忙, 请联系管理员!");
},
success: function (data) {
if (data.status == 1) {
layer.msg(data.msg,{icon: 1,time: 2000},function(){
location.href = "{:U('Shipping/index')}";
});
} else {
$('#submit').attr('disabled',false);
$.each(data.result, function (index, item) {
$('span.err').show();
$('#err_'+index).text(item);
});
layer.msg(data.msg, {icon: 2,time: 3000});
}
}
});
}
</script>
</body>
</html>