jh-admin/addon/fenxiao/shop/view/poster/edit.html

731 lines
21 KiB
HTML
Raw Blame History

This file contains ambiguous Unicode characters

This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

{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.json_array.poster_text}{/notempty}'/>
</div>
</div>
<div class="layui-form-item">
<label class="layui-form-label img-upload-lable ns-short-label mid">上传海报</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}' />
</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">分享语</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();
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}