yueshengshop/app/admin/view/express/edit_company.html

{extend name="base"/}
{block name="resources"}
<style>
	.design-sketch{
		border: 1px solid #ccc;
		position: relative;
	}
	.design-sketch div{
		display: inline-block;
		border: 1px solid #ccc;
		padding: 10px;
		margin: 8px;
		border-radius: 2px;
		color: #555;
		white-space: nowrap;
		user-select: none;
		background-color: #fff;
		line-height: 1;
	}
	.design-sketch div i {
		position: absolute;
		top: -10px;
		right: -10px;
		display: none;
		width: 20px;
		height: 20px;
		border-radius: 10px;
		background-color: rgba(0, 0, 0, .5);
		color: #FFFFFF;
		text-align: center;
		line-height: 20px;
		z-index: 99;
	}
	.print-option{
		display: inline-block;
		border: 1px solid;
		line-height: 1;
		padding: 10px;
		margin-left: 5px;
		margin-bottom: 8px;
		border-radius: 2px;
		color: #545454;
		cursor: pointer;
	}
	.ns-form-row {
		margin-top: 0;
	}
</style>
{/block}
{block name="main"}
<div class="layui-form">
	<div class="layui-card ns-card-common ns-card-brief">
		<div class="layui-card-header">
			<span class="ns-card-title">物流公司信息</span>
		</div>
		<div class="layui-card-body">
			<div class="layui-form-item">
				<label class="layui-form-label"><span class="required">*</span>物流公司名称：</label>
				<div class="layui-input-inline">
					<input type="text" name="company_name" value="{$company_info.data.company_name}" class="layui-input ns-len-long">
				</div>
			</div>
			
			<div class="layui-form-item">
				<label class="layui-form-label img-upload-lable ns-short-label ">物流公司LOGO：</label>
				<div class="layui-input-inline">
					<div class="upload-img-block">
						<div class="upload-img-box" id="companyLOGO">
							{if empty($company_info.data.logo)}
							<div class="ns-upload-default">
								<img src="__STATIC__/img/upload_img.png" />
								<p>点击上传</p>
							</div>
							{else/}
								<img src="{:img($company_info.data.logo)}" alt="">
							{/if}
						</div>
					</div>
				</div>
			</div>
			
			<div class="layui-form-item">
				<label class="layui-form-label">排序：</label>
				<div class="layui-input-block">
					<input type="number" name="sort" value="{$company_info.data.sort}" lay-verify="sorts" autocomplete="off" class="layui-input ns-len-short">
				</div>
				<div class="ns-word-aux">排序值必须为整数</div>
			</div>
			
			<div class="layui-form-item">
				<label class="layui-form-label">URL：</label>
				<div class="layui-input-block">
					<input type="text" name="url" lay-verify="required" value="{$company_info.data.url}" class="layui-input ns-len-long">
				</div>
				<p class="ns-word-aux">请输入物流公司官方网址</p>
			</div>
			
			<div class="layui-form-item">
				<label class="layui-form-label">快递鸟编码：</label>
				<div class="layui-input-inline">
					<input type="text" name="express_no_kdniao" value="{$company_info.data.express_no_kdniao}" class="layui-input ns-len-long">
				</div>
			</div>
			
			<div class="layui-form-item">
				<label class="layui-form-label">快递100免费版编码：</label>
				<div class="layui-input-inline">
					<input type="text" name="express_no_kd100_free" value="{$company_info.data.express_no_kd100_free}" class="layui-input ns-len-long">
				</div>
			</div>
			
			<div class="layui-form-item">
				<label class="layui-form-label">快递100付费版编码：</label>
				<div class="layui-input-inline">
					<input type="text" name="express_no_kd100" value="{$company_info.data.express_no_kd100}" class="layui-input ns-len-long">
				</div>
			</div>
			
			<div class="layui-form-item">
				<label class="layui-form-label">菜鸟物流接口编码：</label>
				<div class="layui-input-inline">
					<input type="text" name="express_no_cainiao" value="{$company_info.data.express_no_cainiao}" class="layui-input ns-len-long">
				</div>
			</div>
			
			<div class="layui-form-item">
				<label class="layui-form-label">快递查询接口编码：</label>
				<div class="layui-input-inline">
					<input type="text" name="express_no_ext" value="{$company_info.data.express_no_ext}" class="layui-input ns-len-long">
				</div>
			</div>
		</div>
	</div>
	
	<div class="layui-card ns-card-common ns-card-brief">
		<div class="layui-card-header">
			<span class="ns-card-title">订单发票设置</span>
		</div>
		<div class="layui-card-body">
			<div class="layui-form-item">
				<label class="layui-form-label">打印字体大小：</label>
				<div class="layui-input-block">
					<div class="layui-input-inline">
						<input type="number" name="font_size" lay-verify="int" value="{$company_info.data.font_size}" class="layui-input print-size ns-len-short">
					</div>
					<span class="layui-form-mid">px</span>
				</div>
				<div class="ns-word-aux">字体大小必须为正整数</div>
			</div>
			
			<div class="layui-form-item">
				<label class="layui-form-label">比例：</label>
				<div class="layui-input-block">
					<input type="number" name="scale" value="{$company_info.data.scale}" class="layui-input proportion ns-len-short">
				</div>
				<div class="ns-word-aux">比例为当前显示尺寸与实际尺寸的比例</div>
			</div>
			
			<div class="layui-form-item">
				<label class="layui-form-label">显示尺寸：</label>
				<div class="layui-input-block">
					<div class="layui-input-inline">
						<input name="width" type="number" value="{$company_info.data.width}" lay-verify="int" class="layui-input show-width ns-len-short">
					</div>
					<div class="layui-form-mid">-</div>
					<div class="layui-input-inline">
						<input name="height" type="number" value="{$company_info.data.height}" lay-verify="int" class="layui-input show-height ns-len-short">
					</div>
				</div>
				<div class="ns-word-aux">尺寸单位：px，用于打印模板预览效果的尺寸，值为整数且不能小于0</div>
			</div>
			
			<div class="layui-form-item">
				<label class="layui-form-label">实际尺寸：</label>
				<div class="layui-input-block">
					<div class="layui-input-inline">
						<span id="realWidth"></span>
					</div>
					<div class="layui-form-mid">*</div>
					<div class="layui-input-inline">
						<span id="realHeight"></span>
					</div>
				</div>
				<div class="ns-word-aux">单位：px，实际尺寸由当前尺寸乘以比例所得</div>
			</div>
			
			<div class="layui-form-item">
				<label class="layui-form-label">打印选项：</label>
				<div class="layui-input-block">
					{foreach $print_item_list as $print_k=>$print_v}
					<span class="print-option ns-border-color-gray" data-print-name="{$print_v.item_name}">{$print_v.item_title}</span>
					{/foreach}
				</div>
			</div>
			
			<div class="layui-form-item">
				<label class="layui-form-label">效果图预览：</label>
				<div class="layui-input-block design-sketch">
				</div>
			</div>
			
			<div class="layui-form-item">
				<label class="layui-form-label img-upload-lable">打印背景图：</label>
				<div class="layui-input-block">
					<div class="upload-img-block">
						<div class="upload-img-box" id="printBackground">
							{if empty($company_info.data.background_image)}
							<div class="ns-upload-default">
								<img src="__STATIC__/img/upload_img.png" />
								<p>点击上传</p>
							</div>
							{else/}
								<img src="{:img($company_info.data.background_image)}" alt="">
							{/if}
						</div>
					</div>
				</div>
				<div class="ns-word-aux">打印模板背景图</div>
			</div>
		</div>
	</div>
	
	<div class="ns-single-filter-box">
		<div class="ns-form-row">
			<button class="layui-btn ns-bg-color" lay-submit lay-filter="save">保存</button>
			<button type="reset" class="layui-btn layui-btn-primary" onclick="back()">返回</button>
		</div>
	</div>
	
	<input type="hidden" name="company_id" value="{$company_info.data.company_id}" />
	<input type="hidden" name="logo" value="{$company_info.data.logo}" />
	<input type="hidden" name="background_image" value="{$company_info.data.background_image}" />
	<input type="hidden" class="bg-img-pri" value="{$company_info.data.background_image}" />
	<input type="hidden" class="print-con" value="{$company_info.data.content_json}" />   <!-- 打印内容 -->
	
</div>
{/block}
{block name="script"}
<script src="STATIC_JS/Tdrag.min.js"></script>
<script>
	$(document).ready(function () {
		var img = $(".bg-img-pri").val();
		$("#realWidth").text($(".proportion").val() * $(".show-width").val());
		$("#realHeight").text($(".proportion").val() * $(".show-height").val());
		$(".design-sketch").css({
			"width": $(".show-width").val() + "px",
			"height": $(".show-height").val() + "px",
			"background": "url("+ img +") no-repeat center/ cover"
		});
		
		var arr = JSON.parse($(".print-con").val());
		var fontSize = $("input[name=font_size]").val();
		if (fontSize == 0 || fontSize == '') {
			fontSize = 14;
		}
		for (index in arr) {
			var class_name = arr[index].item_name,
				span_text = arr[index].item_title,
				top = arr[index].top, 
				left = arr[index].left;
				
			$(".print-option").each(function () {
				var print_name = $(this).attr("data-print-name");
				if (class_name == print_name) {
					$(this).addClass("ns-bg-color-gray");
					$(this).css("cursor", "not-allowed");
				}
			});
			
			var html = '<div class="span_' + class_name + '" style="top: '+ top +'px; left: '+ left +'px;">'+
							'<span style="font-size: '+ fontSize +'px;">' + span_text + '</span>'+
							'<i class="iconfont iconclose_light" onclick="remove(this)"></i>'
						'</div>';
						
			$(".design-sketch").append(html);
			
			$(".span_" + arr[index].item_name).hover(function () {
				$(this).find("i").show();
			}, function () {
				$(this).find("i").hide();
			});
			
			$(".span_" + arr[index].item_name).Tdrag({
				scope: ".design-sketch"
			});
		}
	});
</script>
<script>
	layui.use(['form', 'upload'],function() {
		var form = layui.form,
			upload = layui.upload,
			companyLOGO = '',
			repeat_flag = false; //防重复标识
		form.render();

		/**
		 * logo
		 */
		var uploadInst = upload.render({
			elem: '#companyLOGO',
			url: ns.url("admin/upload/upload"),
			done: function(res) {
				if (res.code >= 0) {
					$("input[name='logo']").val(res.data.pic_path);
					$("#companyLOGO").html("<img src=" + ns.img(res.data.pic_path) + " >");
				}
				return layer.msg(res.message);
			}
		});
		
		/**
		 * 打印背景图
		 */
		var uploadInst = upload.render({
			elem: '#printBackground',
			url: ns.url("admin/upload/upload"),
			done: function(res) {
				if (res.code >= 0) {
					$("input[name='background_image']").val(res.data.pic_path);
					$("#printBackground").html("<img src=" + ns.img(res.data.pic_path) + " >");
					$(".design-sketch").css("background", "url("+ ns.img(res.data.pic_path) +") no-repeat center/ cover");
				}
				return layer.msg(res.message);
			}
		});
		
		/**
		 * 监听提交
		 */
		form.on('submit(save)', function(data) {
			var content = [];
			$(".design-sketch div").each(function () {
				var item = {};
				item.item_name = $(this).attr("class").substring(5);
				item.item_title = $(this).text();
				item.left = $(this).position().left;
				item.top = $(this).position().top;
				content.push(item);
			});
			data.field.content_json = JSON.stringify(content);
			
	        if (repeat_flag) return;
	        repeat_flag = true;
			
			$.ajax({
				url: ns.url("admin/express/editCompany"),
				data: data.field,
				dataType: 'JSON',
				type: 'POST',
				success: function(res){
					repeat_flag = false;

				    if(res.code == 0){
						layer.confirm('编辑成功', {
							title:'操作提示',
							btn: ['返回列表', '继续操作'],
							yes: function(){
								location.href = ns.url("admin/express/expressCompany")
							},
							btn2: function() {
								location.reload();
							}
						});
					} else {
						layer.msg(res.message);
					}
				}
			});
		});
		
		/**
		 * 预览内容添加
		 */
		$(".print-option").click(function(){
			var dataValue = $(this).text(),
				dataId = $(this).attr("data-print-name");
			var fontSize = $("input[name=font_size]").val();
			if (fontSize == '' || fontSize == 0) {
				fontSize = 14;
			}
			if ($(".span_"+ dataId).length > 0) {
				return false;
			} else {
				$(this).addClass("ns-bg-color-gray");
				$(this).css("cursor", "not-allowed");
			}
			
			var html = '<div class="span_' + dataId + '" style="font-size: '+ fontSize +'px;">'+
							'<span>' + dataValue + '</span>'+
							'<i class="iconfont iconclose_light" onclick="remove(this)"></i>'
						'</div>';
			
			$(".design-sketch").append(html);
			
			$(".span_" + dataId).hover(function () {
				$(this).find("i").show();
			}, function () {
				$(this).find("i").hide();
			});
			
			$(".span_" + dataId).Tdrag({
				scope: ".design-sketch"
			});
		});
		
		/**
		 * 改变效果图宽和高
		 */
		$(".show-width").blur(function(){
			$(".design-sketch").css("width", $(this).val());
			$("#realWidth").text($(this).val() * $(".proportion").val() + "px");
		});
		
		$(".show-height").blur(function(){
			$(".design-sketch").css("height", $(this).val());
			$("#realHeight").text($(this).val() * $(".proportion").val() + "px");
		});
		
		/**
		 * 实际尺寸
		 */
		$(".proportion").blur(function () {
			$(this).val();
			$("#realWidth").text($(this).val() * $(".show-width").val() + "px");
			$("#realHeight").text($(this).val() * $(".show-height").val() + "px");
		});
		
		/**
		 *  打印字体大小
		 */
		$(".print-size").blur(function(){
			$(".design-sketch span").css("font-size", $(this).val() + "px");
		});
		
		/**
		 * 表单验证
		 */
		form.verify({
			sorts: function(value){ 
				if (value == '') {
					return;
				}
				if (value%1 != 0) {
					return '排序数值必须为整数';
				}
				if (value < 0) {
					return '排序数值必须为大于0';
				}
			},
			int: function (value) {
				if (value == '') {
					return;
				}
				if (value < 0 && value%1 != 0) {
					return '请输入正整数!'
				}
			}
		});
	});
	
	function remove(e) {
		var that = e;
		$(that).parent().remove();
		
		var attr_name = $(that).parent().attr("class").substring(5);
		$(".print-option").each(function () {
			var print_name = $(this).attr("data-print-name");
			if (attr_name == print_name) {
				$(this).removeClass("ns-bg-color-gray");
				$(this).css("cursor", "pointer");
			}
		});
	}
	
	function back(){
		location.href = ns.url("admin/express/expressCompany");
	}
</script>
{/block}