zhongshen_project/addon/fenxiao/shop/view/poster_template/add.html

{extend name="app/shop/view/base.html"/}
{block name="resources"}
<style>
	.layui-layout-admin .layui-body .body-content {
		min-height: initial;
		padding-top: 0;
		padding-bottom: 0;
		margin: 0;
	}
	.form-wrap {
		margin-top: 0;
	}

	.layui-form-label.mid {
		width: 100px;
	}

	.layui-form-label.mid+.layui-input-block {
		margin-left: 100px;
	}

	.new-mid {
		margin-left: -20px !important;
	}

	.poster-form {
		display: flex;
		background: #eee;
	}

	.poster-left {
		width: 400px;
		height: 800px;
		background: #FFFFFF;
		padding: 10px 30px 10px 10px;
	}

	.poster-left-header {
		font-size: 18px;
		border-bottom: 1px solid #eee;
		padding: 0 0 10px 0;
		margin: 0 0 10px 0;
	}

	.layui-input-block {
		margin-left: 0;
	}

	.poster-headimg,
	.poster-name {
		display: flex;
	}

	.poster-right {
		width: 360px;
		height: 640px;
		opacity: 0.9;
		margin: 20px 0 0 271px;
		background-color: #fff;
	}

	.tips {
		width: 153px;
		height: 16px;
		font-size: 12px;
		font-family: Microsoft YaHei;
		font-weight: 400;
		color: #909399;
		padding-left: 100px;
	}

	.album-img-select {
		height: 30px;
		line-height: 30px;
		margin: 0 0 5px 20px;
	}

	.upload-img-block {
		width: 300px;
		height: 100px;
	}
	
	.upload {  
	}

	.form-row {
		padding-top: 20px;
	}

	.bg-color {
		margin-left: 800px;
		background: #ff6a00;
	}

	.poster-tips {
		background: #fff;
		width: 280px;
		margin-left: 320px;
		padding: 20px 20px;
		border: 1px solid #e8e8e8;
		border-right: none;
	}

	.set-tips {
		font-size: 16px;
		font-family: Microsoft YaHei;
		font-weight: bolder;
		color: #303133;
		line-height: 22px;
	}

	.content {
		font-size: 12px;
		font-family: Microsoft YaHei;
		font-weight: 400;
		color: #909399;
		line-height: 22px;
		margin-top: 10px;
	}

	.layui-nav-more1 {
		width: 7px;
		height: 7px;
		border-width: 1px;
		border-color: #333 #333 transparent transparent;
		border-style: solid;
		transform: rotate(135deg);
		top: 16px;
		right: 16px;
		margin-top: 7px;
	}

	.layui-nav-more2 {
		width: 7px;
		height: 7px;
		border-width: 1px;
		border-color: #333 #333 transparent transparent;
		border-style: solid;
		transform: rotate(135deg);
		top: 16px;
		right: 16px;
		margin-top: 7px;
	}

	.layui-new-more1 {
		transform: rotate(45deg);
	}

	.layui-new-more2 {
		transform: rotate(45deg);
	}

	.layui-colorpicker {
		margin-left: 15px;
	}

	.form-row {
		position: fixed;
		bottom: 0px;
		left: 0;
		width: 89.7%;
		background: #fff;
		padding: 10px 0;
		display: flex;
		justify-content: center;

	}
	.form-row button{
		margin-right: 20px;
	}

	.layui-colorpicker-main-input .layui-btn {
		padding: 0 10px;
	}

	.circle {
		border-radius: 50%;
	}

	.upload img {
		margin-top: 20px;
	}
	
	.img_prev {
		margin-top: 0 !important;
	}
</style>
{/block}
{block name="main"}
<div class="layui-form add-poster">
	<div class="poster-form">
		<div id="view" style="display: flex;"></div>
		<div class="poster-tips">
			<div class="set-tips">海报设置说明</div>
			<div class="content">
				1. 用户头像,用户昵称这两个元素需要空出<br>
				2. 裂变海报其他部分皆可自定义设计<br>
				3. 可自行拖拉设置相应元素的大小
			</div>
		</div>
	</div>

	<div class="form-row">
		<button class="layui-btn" lay-submit lay-filter="save_poster">保存</button>
		<input type="hidden" name="template_id" value='{notempty name="$template_data"}{$template_data.template_id}{/notempty}'>
		<button class="layui-btn layui-btn-primary" onclick="back()">返回</button>
	</div>
</div>

<script type="text/html" id="poster_left">
	<div class="poster-left">
		<div class="poster-left-header">基础设置</div>
		<div class="layui-form-item">
			<label class="layui-form-label mid"><span class="required">*</span>海报名称</label>
			<div class="layui-input-block mid">
				<input type="text" class="layui-input" lay-verify="required" placeholder="请输入海报名称" name="poster_name" value="{{d.poster_name || ''}}"/>
			</div>
		</div>
		<div class="layui-form-item">
			<label class="layui-form-label mid"><span class="required">*</span>宣传语</label>
			<div class="layui-input-block mid">
				<input type="text" class="layui-input" lay-verify="required" placeholder="请输入宣传语" name="share_content" value="{{d.share_content || ''}}"/>
			</div>
		</div>

		<div class="layui-form-item">
			<label class="layui-form-label short-label mid"><span class="required">*</span>上传海报</label>
			<div class="layui-input-block mid">
				<div class="upload-img-block icon">
					<div class="upload-img-box  {{d.background ? 'hover' : ''}}" >
						<div class="upload-default" id="posterImg">
							{{# if (d.background) {  }}
							<div id="preview_posterImg" class="preview_img">
								<img layer-src src='{{ ns.img(d.background) }}' class="img_prev" data-id="qr_img"/>
								<p style="width: 300px;"></p>
							</div>
							{{# } else {  }}
							<div class="upload">
								<i class="iconfont iconshangchuan"></i>
								<p>点击上传</p>
							</div>
							{{# }  }}
						</div>
						<div class="operation">
							<div style="position: absolute; top: -10px; left: 110px;">
								<i title="图片预览" class="iconfont iconreview js-preview"></i>
								<i title="删除图片" class="layui-icon layui-icon-delete js-delete"></i>
							</div>
							<div class="replace_img js-replace">点击替换</div>
						</div>
						<input type="hidden" lay-verify="background" name="background" value='{{d.background}}' />
					</div>
				</div>
			</div>
		</div>

		<div class="tips">建议图片尺寸：720*1280px</div>

		<div class="layui-form-item poster-headimg">
		<div class="layui-form album-img-select">
			<input type="checkbox" name="switch" lay-filter="headimg" value="" lay-skin="primary" {{d.headimg_is_show == '1' ? 'checked' : ''}}>
		</div>
		<label class="layui-form-label mid" style="text-align: left;">用户头像</label>
		<div class="layui-input-block mid new-mid">
			<div class="layui-input-block">
				<input type="radio" lay-filter="headimg" name="shop_status" value="circle" title="圆形" {{d.headimg_shape == 'circle' ? 'checked' : ''}}>
				<input type="radio" lay-filter="headimg" name="shop_status" value="square" title="方形" {{d.headimg_shape == 'square' ? 'checked' : ''}}>
			</div>
		</div>
	</div>

		<div class="layui-form-item poster-name">
		<div class="layui-form album-img-select">
			<input type="checkbox" name="check[]" lay-filter="nickname" value="" lay-skin="primary" {{d.nickname_is_show == '1' ? 'checked' : ''}}>
		</div>
		<label class="layui-form-label mid" style="text-align: left;">用户昵称</label>
		<div class="layui-input-block mid new-mid">
			<div class="poster-name-box">
				<div class="layui-form poster-select len-short" lay-filter="poster-select">
					<select name=""  lay-filter="nickname">
						{{# for (var font_index = 14; font_index <= 36; font_index++) {  }}
						{{# if (font_index == d.nickname_font_size) {  }}
						<option value="{{font_index}}" selected>{{font_index}}px</option>
						{{# } else {  }}
						<option value="{{font_index}}">{{font_index}}px</option>
						{{# }  }}
						{{# }  }}
					</select>
				</div>
			</div>
		</div>
		<div class="layui-form poster_color_nickname">
			颜色：
			<div>
				<input type="hidden" name="color" id="friendfission-all-input">
				<div class="friendfission-all"></div>
			</div>
		</div>
	</div>

		<div class="layui-form-item poster-name">
			<div class="layui-form album-img-select">
				<input type="checkbox" name="check[]" lay-filter="share_content" value="" lay-skin="primary" {{d.share_content_is_show == '1' ? 'checked' : ''}}>
			</div>
			<label class="layui-form-label mid" style="text-align: left;">宣传语</label>
			<div class="layui-input-block mid new-mid">
				<div class="poster-name-box">
					<div class="layui-form poster-select len-short" lay-filter="poster-select">
						<select name=""  lay-filter="share_content">
							{{# for (var font_index = 14; font_index <= 36; font_index++) {  }}
							{{# if (font_index == d.share_content_font_size) {  }}
							<option value="{{font_index}}" selected>{{font_index}}px</option>
							{{# } else {  }}
							<option value="{{font_index}}">{{font_index}}px</option>
							{{# }  }}
							{{# }  }}
						</select>
					</div>
				</div>
			</div>
			<div class="layui-form poster_color_share_content">
				颜色：
				<div>
					<input type="hidden" name="color" id="friendfission-all-input">
					<div class="friendfission-all"></div>
				</div>
			</div>
		</div>

	</div>

	<div class="poster-right design-sketch" style="position: relative;border: 1px solid #d6d6d6;
	 {notempty name='$template_data.background'}background-image:url({:img($template_data.background)}); background-size: 100%; background-repeat: no-repeat;{/notempty}
	{{# if (d.background) { }}background-image:url(/{{ d.background }});background-size: 100%;background-repeat: no-repeat;{{# } }}
	">
		<div class="headimg {{d.headimg_is_show == '1' ? '' : 'layui-hide'}}" style="position:absolute;top: {{d.headimg_top}}px; left: {{d.headimg_left}}px; width: {{d.headimg_width}}px; height: {{d.headimg_height}}px;">
			<img alt="" class="{{d.headimg_shape == 'circle' ? 'circle' : ''}}" src="__STATIC__/img/caner1.png" width="100%" />
		</div>

		<div class="nickname {{d.nickname_is_show == '1' ? '' : 'layui-hide'}}" style="position:absolute;top: {{d.nickname_top}}px; left: {{d.nickname_left}}px; width: {{d.nickname_width}}px; color: {{d.nickname_color}}; font-size: {{d.nickname_font_size}}px;">
			<span class="design-text">用户昵称</span>
		</div>

		<div style="margin: 10px;">
			<div class="share_content {{d.share_content_is_show == '1' ? '' : 'layui-hide'}}" style="position:absolute;top: {{d.share_content_top}}px; color: {{d.share_content_color}}; left: {{d.share_content_left}}px; width: {{d.share_content_width}}px; height: {{d.share_content_height}}px; font-size: {{d.share_content_font_size}}px;">
				<span class="design-text">{{d.share_content}}</span>
			</div>
		</div>

		<div class="qrcode" style="top: {{d.qrcode_top}}px; left: {{d.qrcode_left}}px; height: {{d.qrcode_height}}px; width: {{d.qrcode_width}}px;">
			<img alt="" src="__STATIC__/img/caner_erweima.png" width="100%" />
		</div>
	</div>
</script>
{/block}
{block name="script"}
<script src="STATIC_JS/tdrag.js"></script>
<script>
	var form, laytpl, laypage, laydate, colorpicker, repeat_flag = false;
	var poster_detail = JSON.parse('{:json_encode($template_info)}');

	layui.use(['form', 'laytpl', 'colorpicker'], function() {
		var form = layui.form,
			laytpl = layui.laytpl,
			colorpicker = layui.colorpicker,
			repeat_flag = false; //防重复标识
		form.render();

		laytpl($("#poster_left").html()).render(poster_detail, function(html) {
			$('#view').html(html);
			form.render();
			new Upload({
				elem: '#posterImg',
				data: {
				},
				callback: function(res) {
					if (res.code >= 0) {
						$('.poster-right').css({
							"background-image": `url('${ns.img(res.data.pic_path)}')`,
							"background-size": "100%",
							"background-repeat": "no-repeat"
						});
						poster_detail.background = res.data.pic_path;
						$("input[name='background']").val(res.data.pic_path)
					}
				},
				deleteCallback: function() {
					poster_detail.background = '';
					$("input[name='background']").val('')
				}
			});
		});

		//是否显示的控制
		var checkbox_field_arr = ['headimg', 'nickname', 'share_content'];
		checkbox_field_arr.forEach(function(field_name, index){
			form.on('checkbox('+ field_name +')', function(data) {
				poster_detail[field_name + '_is_show'] = data.elem.checked ? '1' : '0';
				if (data.elem.checked) {
					$("."+ field_name).removeClass("layui-hide");
				} else {
					$("."+ field_name).addClass("layui-hide");
				}
			})
		});

		//字体大小控制
		var font_field_arr = ['nickname', 'share_content'];
		font_field_arr.forEach(function(field_name, index){
			form.on('select('+ field_name +')', function(data) {
				poster_detail[field_name + '_font_size'] = data.value;
				$("."+ field_name).css("font-size", data.value + "px")
			});
		});

		//字体颜色控制
		var color_field_arr = ['nickname', 'share_content'];
		color_field_arr.forEach(function(field_name, index){
			colorpicker.render({
				elem: '.poster_color_' + field_name, //绑定元素
				color: poster_detail[field_name + '_color'],
				done: function(color) {
					$("."+ field_name).css("color", color);
					poster_detail[field_name + '_color'] = color;
				}
			});
		});

		//圆角控制
		var shape_field_arr = ['headimg'];
		shape_field_arr.forEach(function(field_name, index){
			form.on('radio('+ field_name +')', function(data) {
				let shape = data.value;
				poster_detail[field_name + '_shape'] = shape;
				if(shape == 'circle'){
					$("."+ field_name +" img").addClass('circle');
				}else{
					$("."+ field_name +" img").removeClass('circle');
				}
			})
		});

		//拖拽控制
		var drag_field_arr = ['headimg', 'nickname', 'qrcode', 'share_content'];
		drag_field_arr.forEach((field_name, index) => {
			$(`.${field_name}`).Tdrag({
				scope: '.design-sketch',
				cbChange: function(obj, self) {
					poster_detail[field_name + '_top'] = parseFloat($(self.$element).css('top'));
					poster_detail[field_name + '_left'] =parseFloat($(self.$element).css('left'));
					poster_detail[field_name + '_width'] = parseFloat($(self.$element).css('width'));
					poster_detail[field_name + '_height'] = parseFloat($(self.$element).css('height'));
				},
				cbEnd: function (obj, self) {
					poster_detail[field_name + '_top'] = parseFloat($(self.$element).css('top'));
					poster_detail[field_name + '_left'] =parseFloat($(self.$element).css('left'));
					poster_detail[field_name + '_width'] = parseFloat($(self.$element).css('width'));
					poster_detail[field_name + '_height'] = parseFloat($(self.$element).css('height'));
				}
			});
		});

		form.verify({
			background: function(value){
				if(!value){
					return '请上传海报背景';
				}
			}
		});
		
		/**
		 * 监听提交
		 */
		form.on('submit(save_poster)', function(data) {
			poster_detail.poster_name = data.field.poster_name;
			poster_detail.share_content = data.field.share_content;

			if (repeat_flag) return false;
			repeat_flag = true;
			$.ajax({
				url: ns.url("fenxiao://shop/postertemplate/"+ (poster_detail['template_id'] ? 'edit' : 'add') +"postertemplate"),
				data:poster_detail,
				dataType: 'JSON', //服务器返回json格式数据
				type: 'POST', //HTTP请求类型
				success: function(res) {
					repeat_flag = false;
					if(res.code == 0){
						layer.confirm(poster_detail['template_id'] ? '编辑成功' : '添加成功',{
							title: '操作提示',
							btn: ['返回列表',poster_detail['template_id'] ? '继续编辑' : '继续添加'],
							closeBtn: 0,
							yes: function() {
								location.href = ns.url("fenxiao://shop/postertemplate/lists");
							},btn2: function() {
								location.reload();
							}
						})
					} else {
						layer.msg(res.message);
					}
				}
			});
		});
	});

	function back() {
		location.href = ns.url("fenxiao://shop/postertemplate/lists");
		localStorage.removeItem("poster_data");
	}

	$('body').on('click', '.layui-nav-more1', function() {
		$(this).addClass('layui-new-more1');
		$('.layer-form').css("display", 'none');
	});
	
	$('body').on('click', '.layui-new-more1', function() {
		$(this).removeClass('layui-new-more1');
		$('.layer-form').css("display", 'block');
	});

	$('body').on('click', '.layui-nav-more2', function() {
		$(this).addClass('layui-new-more2');
		$('.layer-form2').css("display", 'none');
	});
	
	$('body').on('click', '.layui-new-more2', function() {
		$(this).removeClass('layui-new-more2');
		$('.layer-form2').css("display", 'block');
	});
	
	$('body').on('click', '.js-delete', function() {
		$('.poster-right').css("background-image", 'none');
	});
</script>
{/block}
{block name="copyright"}{/block}