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

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

	.poster-left-header1 {
		font-size: 18px;
		padding: 0 0 10px 0;
	}

	.poster-left-header2 {
		font-size: 18px;
		padding: 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 {
		top: 50% !important;
		height: 100px;
	}

	.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;
	}

	.goods-info {
		width: 340px;
		height: 354px;
		border-radius: 10px;
		margin: 50px 15px 20px;
	}

	.goods-desc {
		/*border-radius: 15px;*/
		font-family: Microsoft YaHei;
		font-weight: 400;
		line-height: 26px;
		text-align: left;
		margin: 30px 25px;
	}

	.goods-img {
		border-radius: 5px;
	}

	.price-info {
		width: 310px;
		height: 80px;
		border-radius: 10px;
		margin: 0 15px;
		padding: 15px;
	}

	.price {
		font-size: 18px;
		font-family: Microsoft YaHei;
		font-weight: 400;
		color: #FF4544;
		display: inline-block;
		width: 75px;
		height: 20px;
	}

	.line-price {
		font-size: 12px;
		font-family: Microsoft YaHei;
		font-weight: 400;
		text-decoration: line-through;
		color: #999999;
		display: inline-block;
		margin-top: 6px;
	}

	.baoyou {
		font-size: 14px;
		font-family: PingFang SC;
		font-weight: 500;
		color: #FF4544;
		line-height: 36px;
		margin-top: 15px;
	}

	.qianggou {
		width: 160px;
		height: 24px;
		line-height: 22px;
		background: #FF4544;
		border-radius: 5px;
		font-size: 12px;
		font-family: Microsoft YaHei;
		font-weight: 400;
		color: #FFFFFF;
		text-align: center;
	}

	.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: 180px;
		width: 89.7%;
		background: #fff;
		padding: 10px 0;
	}

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

	.circle {
		border-radius: 50%;
	}

	.aaa {
		margin-top: 20px;
	}

	.upload img {
		margin-top: 20px;
	}

	.img_prev {
		margin-top: 0 !important;
	}

	.no-background {
		background-image: none !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 bg-color" 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>
{/block}
{block name="script"}
<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='{notempty name="$template_data"}{$template_data.poster_name}{/notempty}'/>
			</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 poster-text" lay-verify="required" placeholder="请输入分享语" name="poster_text"
					   value='{notempty name="$template_data"}{$template_data.poster_text}{/notempty}'/>
			</div>
		</div>
		<div class="layui-form-item">
			<label class="layui-form-label img-upload-lable ns-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 {{# if (d.background) { }}hover{{# }  }} {notempty name="$template_data.background"}hover{/notempty}" >
					<div class="ns-upload-default" id="posterImg">
						{notempty name="$template_data.background"}
						<div id="preview_posterImg" class="preview_img">
							<img layer-src src='{:img($template_data.background)}' class="img_prev" data-id="qr_img"/>
							<p style="width: 300px;"></p>
						</div>
						{else/}
						{{# 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>
						{{# } }}
						{{# if (!d.background) {  }}
						<div class="upload">
							<img class="aaa" src="SHOP_IMG/upload_img.png" />
							<p>点击上传</p>
						</div>
						{{# } }}
						{/notempty}
					</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="posterImg" name="background" value='{notempty name="$template_data.background"}{$template_data.background}{/notempty}{{# if (d.background) { }}{{ 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="poster_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="circle" name="shop_status" value="1" title="圆形" data-value='circle' {{d.headimg_shape == 'circle' ? 'checked' : ''}}>
				<input type="radio" lay-filter="square" name="shop_status" value="0" title="方形" data-value='square' {{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="poster_name" 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="" class="mySelect" lay-filter="mySelect">
						{{# 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">
			颜色：
			<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({{ ns.img(d.background) }});background-size: 100%;background-repeat: no-repeat;{{# } }}
	">
		<div class="" style="display: flex; justify-content: space-between; height: 90px;">
			<div style="margin: 20px; display: flex;">
				<div class="poster_head" 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' : ''}} {{d.headimg_is_show == '1' ? '' : 'layui-hide'}}"
						 src="__STATIC__/img/caner1.png" width="100%" />
				</div>

				<div class="poster_title {{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 class="poster_img" style="position:absolute;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 class="poster_text" style="position:absolute;top: {{d.text_content_top}}px; left: {{d.text_content_left}}px">
					<span class="design-text">{{ d.poster_text }}</span>
				</div>
			</div>
		</div>
	</div>
</script>
<script src="STATIC_JS/tdrag.js"></script>
<script>
	var form, laytpl, laypage, laydate, colorpicker, repeat_flag = false;

	var poster_detail = {
		'poster_name': '',
		'headimg_is_show': 1,
		'headimg_shape': 'circle', // 头像形式  circle 圆  square  方形
		'nickname_is_show': 1,
		'nickname_font_size': 22,
		'nickname_color': '#faa87a',
		'background': '',
		'qrcode_type': '',
		'headimg_width': 56,
		'headimg_height': 56,
		'headimg_top': 426,
		'headimg_left': 41,
		'nickname_width': '',
		'nickname_height': '',
		'nickname_top': 515,
		'nickname_left': 20,
		'qrcode_width': 80,
		'qrcode_height': 80,
		'qrcode_top': 540,
		'qrcode_left': 260,
		'poster_text': '邀您一起分享赚佣金',
		'text_content_size': 10,
		'text_content_color': [141, 141, 141],
		'text_content_top': 535,
		'text_content_left':20,
		'template_type': 'fenxiao',
		"template_id":''
	};

	{notempty name="$template_data.json_array"}
	poster_detail = {:json_encode($template_data.json_array)}
	{else/}
		poster_detail = {
			'poster_name': '',
			'headimg_is_show': 1,
			'headimg_shape': 'circle', // 头像形式  circle 圆  square  方形
			'nickname_is_show': 1,
			'nickname_font_size': 22,
			'nickname_color': '#faa87a',
			'background': '',
			'qrcode_type': '',
			'headimg_width': 56,
			'headimg_height': 56,
			'headimg_top': 426,
			'headimg_left': 41,
			'nickname_width': '',
			'nickname_height': '',
			'nickname_top': 515,
			'nickname_left': 20,
			'qrcode_width': 80,
			'qrcode_height': 80,
			'qrcode_top': 540,
			'qrcode_left': 260,
			'poster_text': '邀您一起分享赚佣金',
			'text_content_size': 10,
			'text_content_color': [141, 141, 141],
			'text_content_top': 535,
			'text_content_left':20,
			'template_type': 'fenxiao',
			"template_id":''
		}
		{/notempty}

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

				laydate.render({
					elem: '#laydate'
				});

				if(localStorage.getItem('poster_data')) {
					var poster = JSON.parse(localStorage.getItem('poster_data'));
					if(poster.template_json) {
						poster.template_json = JSON.parse(poster.template_json)
						poster_detail = Object.assign(poster, poster.template_json)
					}
				}

				var data =  poster_detail;

				var getTpl = $("#poster_left").html(),
						view = $('#view');
				laytpl(getTpl).render(data, 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
							}
						},
						deleteCallback: function() {
							poster_detail.background = '';
						}
					});
				});

				colorpicker.render({
					elem: '.poster-color', //绑定元素
					color: poster_detail.nickname_color,
					done: function(color) {
						$('.poster_title').css("color", color);
						poster_detail.nickname_color = color;
					}
				});

				form.on('checkbox(poster_headimg)', function(data) {
					poster_detail.headimg_is_show = data.elem.checked ? '1' : '0';

					if (data.elem.checked) {
						$(".poster_head img").removeClass("layui-hide");
					} else {
						$(".poster_head img").addClass("layui-hide");
					}
				})

				form.on('checkbox(poster_name)', function(data) {
					poster_detail.nickname_is_show = data.elem.checked ? '1' : '0';

					if (data.elem.checked) {
						$(".poster_title").removeClass("layui-hide");
					} else {
						$(".poster_title").addClass("layui-hide");
					}
				})

				$(".poster-text").change(function(){
					var text = $(".poster-text").val();
					$(".poster_text .design-text").html(text);
				})

				// 监听字体大小下拉框
				form.on('select(mySelect)', function(data) {
					$('.poster_title').css("font-size", data.value + "px");
					poster_detail.nickname_font_size = data.value;
				});

				form.on('radio(circle)', function(data) {
					poster_detail.headimg_shape = $(this).attr("data-value");
					$(".poster_head img").addClass("circle");
				})

				form.on('radio(square)', function(data) {
					poster_detail.headimg_shape = $(this).attr("data-value");
					$(".poster_head img").removeClass("circle");
				})

				var arr = ['head', 'title', 'img', 'text'];
				arr.forEach((_item, _index) => {
					$(`.poster_${_item}`).Tdrag({
						scope: '.design-sketch',
						cbChange: function(obj, self) {
							var top = parseFloat($(self.$element).css('top')),
									left =parseFloat($(self.$element).css('left')),
									width = parseFloat($(self.$element).css('width')),
									height = parseFloat($(self.$element).css('height')),
									font_size = parseFloat($(self.$element).css('font_size'));

							if (_item == 'head') {
								poster_detail.headimg_top = top ? top : poster_detail.headimg_top;
								poster_detail.headimg_left = left ? left : poster_detail.headimg_left;
								poster_detail.headimg_width = width ? width : poster_detail.headimg_width;
								poster_detail.headimg_height = height ? height : poster_detail.headimg_height;
							} else if (_item == 'title') {
								poster_detail.nickname_top = top ? top : poster_detail.nickname_top;
								poster_detail.nickname_left = left ? left : poster_detail.nickname_left;
								poster_detail.nickname_width = width ? width : poster_detail.nickname_width;
								poster_detail.nickname_height = height ? height : poster_detail.nickname_height;
								poster_detail.nickname_font_size = font_size ? font_size : poster_detail.nickname_font_size;
							} else if (_item == 'img') {
								poster_detail.qrcode_top = top ? top : poster_detail.qrcode_top;
								poster_detail.qrcode_left = left ? left : poster_detail.qrcode_left;
								poster_detail.qrcode_width = width ? width : poster_detail.qrcode_width;
								poster_detail.qrcode_height = height ? height : poster_detail.qrcode_height;
							} else if (_item == 'text'){
								poster_detail.text_content_top = top ? top : poster_detail.text_content_top;
								poster_detail.text_content_left = left ? left : poster_detail.text_content_left;
								poster_detail.text_content_width = width ? width : poster_detail.text_content_width;
								poster_detail.text_content_height = height ? height : poster_detail.text_content_height;
							}
						},
						cbEnd: function (obj, self) {
							var top = parseFloat($(self.$element).css('top')),
									left =parseFloat($(self.$element).css('left')),
									width = parseFloat($(self.$element).css('width')),
									height = parseFloat($(self.$element).css('height')),
									font_size = parseFloat($(self.$element).css('font_size'));


							if (_item == 'head') {
								poster_detail.headimg_top = top ? top : poster_detail.headimg_top;
								poster_detail.headimg_left = left ? left : poster_detail.headimg_left;
								poster_detail.headimg_width = width ? width : poster_detail.headimg_width;
								poster_detail.headimg_height = height ? height : poster_detail.headimg_height;
							} else if (_item == 'title') {
								poster_detail.nickname_top = top ? top : poster_detail.nickname_top;
								poster_detail.nickname_left = left ? left : poster_detail.nickname_left;
								poster_detail.nickname_width = width ? width : poster_detail.nickname_width;
								poster_detail.nickname_height = height ? height : poster_detail.nickname_height;
								poster_detail.nickname_font_size = font_size ? font_size : poster_detail.nickname_font_size;
							} else if (_item == 'img') {
								poster_detail.qrcode_top = top ? top : poster_detail.qrcode_top;
								poster_detail.qrcode_left = left ? left : poster_detail.qrcode_left;
								poster_detail.qrcode_width = width ? width : poster_detail.qrcode_width;
								poster_detail.qrcode_height = height ? height : poster_detail.qrcode_height;
							} else if (_item == 'text'){
								poster_detail.text_content_top = top ? top : poster_detail.text_content_top;
								poster_detail.text_content_left = left ? left : poster_detail.text_content_left;
								poster_detail.text_content_width = width ? width : poster_detail.text_content_width;
								poster_detail.text_content_height = height ? height : poster_detail.text_content_height;
							}
						}
					});
				})

				/**
				 * 监听提交
				 */
				form.on('submit(save_poster)', function(data) {
					poster_detail.poster_name = data.field.poster_name;
					poster_detail.poster_text = data.field.poster_text;
					var template_id = {notempty name="$template_data.template_id"}{$template_data.template_id}{else/} '' {/notempty};

					poster_detail.background = $('input[name="background"]').val();
					if( $('input[name="background"]').val() == ""){
						layui.msg("海报图片不能为空");
						return
					}

					localStorage.removeItem("poster_data");

					if (repeat_flag) return false;
					repeat_flag = true;

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

							} else {
								layer.msg(res.message);
							}
						}
					});
				});
			});

			function back() {
				location.href = ns.url("fenxiao://shop/poster/list");
				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}