Yuan/ZangShiQi
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

初始上传

Browse Source
This commit is contained in:
Mr. Hu
2026-04-04 17:27:12 +08:00
parent 4d80d28eb4
commit b7e11774ee
11191 changed files with 1588469 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

394
addon/postertemplate/shop/controller/Postertemplate.php Executable file
View File

@@ -0,0 +1,394 @@
<?php
/**
* Niushop商城系统 - 团队十年电商经验汇集巨献!
* =========================================================
* Copy right 2019-2029 杭州牛之云科技有限公司, 保留所有权利。
* ----------------------------------------------
* 官方网址: https://www.niushop.com
* =========================================================
*/
namespace addon\postertemplate\shop\controller;
use addon\postertemplate\model\PosterTemplate as PosterTemplateModel;
use app\model\system\Site;
use app\model\upload\Upload;
use app\shop\controller\BaseShop;
use extend\Poster as PosterExtend;
/**
* 海报模板 控制器
*/
class Postertemplate extends BaseShop
{
/**
* 海报模板列表
* @return mixed
*/
public function lists()
{
if (request()->isJson()) {
$page_index = input('page', 1);
$page_size = input('page_size', PAGE_LIST_ROWS);
$search_text = input('search_text', '');
$condition = [ [ 'site_id', '=', $this->site_id ] ];
$condition[] = [ 'template_type', '=', 'goods' ];
if (!empty($search_text)) {
$condition[] = [ 'poster_name', 'like', '%' . $search_text . '%' ];
}
$poster_template_model = new PosterTemplateModel();
$res = $poster_template_model->getPosterTemplatePageList($condition, $page_index, $page_size);
return $res;
} else {
return $this->fetch('poster_template/lists');
}
}
/**
* 添加海报模板
* @return mixed
*/
public function addPosterTemplate()
{
$poster_template_model = new PosterTemplateModel();
if (request()->isJson()) {
$default_template = PosterTemplateModel::DEFAULT_TEMPLATE;
$add_data = [];
$template_json = [];
foreach ($default_template as $field => $field_value) {
if ($field == 'template_json') {
foreach ($default_template[ 'template_json' ] as $json_field => $json_field_value) {
$template_json[ $json_field ] = input($json_field, $json_field_value);
}
} else {
$add_data[ $field ] = input($field, $field_value);
}
}
unset($add_data[ 'template_id' ]);
$add_data[ 'site_id' ] = $this->site_id;
$add_data[ 'template_json' ] = json_encode($template_json, true);
return $poster_template_model->addPosterTemplate($add_data);
} else {
//模板信息
$muban_id = input('muban_id', 0);
$muban_info = $muban_info = $poster_template_model->getMubanInfo([ [ 'muban_id', '=', $muban_id ] ])[ 'data' ];
if (!empty($muban_info)) {
$template_info = $muban_info;
$template_info[ 'template_json' ] = json_decode($template_info[ 'template_json' ], true);
$template_info[ 'template_id' ] = 0;
} else {
$template_info = PosterTemplateModel::DEFAULT_TEMPLATE;
}
$template_info = array_merge($template_info, $template_info[ 'template_json' ]);
unset($template_info[ 'template_json' ]);
$this->assign('template_info', $template_info);
//站点信息
$site_model = new Site();
$site_info = $site_model->getSiteInfo([ [ "site_id", "=", $this->site_id ] ], 'site_name,logo')[ 'data' ];
$this->assign('site_data', $site_info);
return $this->fetch('poster_template/add');
}
}
/**
* 添加海报模板
* @return mixed
*/
public function editPosterTemplate()
{
$template_id = input('template_id', '');
$poster_template_model = new PosterTemplateModel();
if (request()->isJson()) {
$default_template = PosterTemplateModel::DEFAULT_TEMPLATE;
$edit_data = [];
$template_json = [];
foreach ($default_template as $field => $field_value) {
if ($field == 'template_json') {
foreach ($default_template[ 'template_json' ] as $json_field => $json_field_value) {
$template_json[ $json_field ] = input($json_field, $json_field_value);
}
} else {
$edit_data[ $field ] = input($field, $field_value);
}
}
unset($edit_data[ 'template_id' ]);
$edit_data[ 'site_id' ] = $this->site_id;
$edit_data[ 'template_json' ] = json_encode($template_json, true);
return $poster_data = $poster_template_model->editPosterTemplate($edit_data, [
[ 'template_id', '=', $template_id ],
[ 'site_id', '=', $this->site_id ]
]);
} else {
//模板信息
$template_info = $poster_template_model->getPosterTemplateInfo([
[ 'site_id', '=', $this->site_id ],
[ 'template_id', '=', $template_id ],
], '*')[ 'data' ];
$template_info = array_merge($template_info, json_decode($template_info[ 'template_json' ], true));
if (empty($template_info)) $this->error('模板信息有误');
unset($template_info[ 'template_json' ]);
$this->assign('template_info', $template_info);
//站点信息
$site_model = new Site();
$site_info = $site_model->getSiteInfo([ [ "site_id", "=", $this->site_id ] ], 'site_name,logo');
$this->assign('site_data', $site_info[ 'data' ]);
return $this->fetch('poster_template/add');
}
}
/**
* 获取海报模板预览
* @return mixed
*/
public function posterTemplateDetail()
{
$template_id = input('template_id', '');
$condition = [
[ 'template_id', '=', $template_id ],
[ 'site_id', '=', $this->site_id ]
];
$poster_template_model = new PosterTemplateModel();
$poster_data = $poster_template_model->getPosterTemplateInfo($condition);
if (empty($poster_data[ 'data' ])) {
return $poster_template_model->error(null, '模板信息有误');
}
$poster_data[ 'data' ][ 'template_json' ] = json_decode($poster_data[ 'data' ][ 'template_json' ], true);
$site_model = new Site();
$site_info = $site_model->getSiteInfo([ [ "site_id", "=", $this->site_id ] ]);
$poster_width = 720;
$poster_height = 1280;
$poster = new PosterExtend($poster_width, $poster_height);
$ground = [
[
'action' => 'setBackground', // 设背景色
'data' => [ 255, 255, 255 ]
],
];
$fontRate = 0.725; // 20px 等于 14.5磅，换算比率 1px = 0.725磅
$option = [
[
'action' => 'imageText', // 写入店铺名称
'data' => [
$site_info[ 'data' ][ 'site_name' ],
$poster_data[ 'data' ][ 'template_json' ][ 'store_name_font_size' ] * $fontRate * 2,
hex2rgb($poster_data[ 'data' ][ 'template_json' ][ 'store_name_color' ]),
$poster_data[ 'data' ][ 'template_json' ][ 'store_name_left' ] * 2,
( $poster_data[ 'data' ][ 'template_json' ][ 'store_name_top' ] + $poster_data[ 'data' ][ 'template_json' ][ 'store_name_font_size' ] ) * 2,
$poster_data[ 'data' ][ 'template_json' ][ 'store_name_width' ] * 2,
$poster_data[ 'data' ][ 'template_json' ][ 'store_name_height' ] * 2,
0,
$poster_data[ 'data' ][ 'template_json' ][ 'store_name_is_show' ]
]
],
[
'action' => 'imageCopy', // 店铺logo
'data' => [
!empty($site_info[ 'data' ][ 'logo_square' ]) ? $site_info[ 'data' ][ 'logo_square' ] : getUrl() . '/app/shop/view/public/img/shop_logo.png',
$poster_data[ 'data' ][ 'template_json' ][ 'store_logo_left' ] * 2,
$poster_data[ 'data' ][ 'template_json' ][ 'store_logo_top' ] * 2,
$poster_data[ 'data' ][ 'template_json' ][ 'store_logo_width' ] * 2,
$poster_data[ 'data' ][ 'template_json' ][ 'store_logo_height' ] * 2,
'square',
0,
$poster_data[ 'data' ][ 'template_json' ][ 'store_logo_is_show' ]
]
],
[
'action' => 'imageCopy', // 写入商品图
'data' => [
getUrl() . '/public/static/img/goods_template.png',
$poster_data[ 'data' ][ 'template_json' ][ 'goods_img_left' ] * 2,
$poster_data[ 'data' ][ 'template_json' ][ 'goods_img_top' ] * 2,
$poster_data[ 'data' ][ 'template_json' ][ 'goods_img_width' ] * 2,
$poster_data[ 'data' ][ 'template_json' ][ 'goods_img_height' ] * 2,
!empty($poster_data[ 'data' ][ 'template_json' ][ 'goods_img_shape' ]) ? $poster_data[ 'data' ][ 'template_json' ][ 'goods_img_shape' ] : 'square',
0,
$poster_data[ 'data' ][ 'template_json' ][ 'goods_img_is_show' ]
]
],
[
'action' => 'imageText', // 写入商品名称
'data' => [
'商品名称-商品名称-商品名称',
$poster_data[ 'data' ][ 'template_json' ][ 'goods_name_font_size' ] * $fontRate * 2,
hex2rgb($poster_data[ 'data' ][ 'template_json' ][ 'goods_name_color' ]),
$poster_data[ 'data' ][ 'template_json' ][ 'goods_name_left' ] * 2,
( $poster_data[ 'data' ][ 'template_json' ][ 'goods_name_top' ] + $poster_data[ 'data' ][ 'template_json' ][ 'goods_name_font_size' ] ) * 2 + 10,
$poster_data[ 'data' ][ 'template_json' ][ 'goods_name_width' ] * 2,
$poster_data[ 'data' ][ 'template_json' ][ 'goods_name_height' ] * 2,
0,
$poster_data[ 'data' ][ 'template_json' ][ 'goods_name_is_show' ]
]
],
[
'action' => 'imageCopy', // 写入商品二维码
'data' => [
getUrl() . '/public/static/img/caner_erweima.png',
$poster_data[ 'data' ][ 'qrcode_left' ] * 2,
$poster_data[ 'data' ][ 'qrcode_top' ] * 2,
$poster_data[ 'data' ][ 'qrcode_width' ] * 2,
$poster_data[ 'data' ][ 'qrcode_height' ] * 2,
'square',
0,
1
]
],
[
'action' => 'imageText', // 写入商品价格
'data' => [
'¥' . '100.00',
$poster_data[ 'data' ][ 'template_json' ][ 'goods_price_font_size' ] * $fontRate * 2,
hex2rgb($poster_data[ 'data' ][ 'template_json' ][ 'goods_price_color' ]),
$poster_data[ 'data' ][ 'template_json' ][ 'goods_price_left' ] * 2,
( $poster_data[ 'data' ][ 'template_json' ][ 'goods_price_top' ] + $poster_data[ 'data' ][ 'template_json' ][ 'goods_price_font_size' ] ) * 2,
$poster_data[ 'data' ][ 'template_json' ][ 'goods_price_width' ] * 2,
$poster_data[ 'data' ][ 'template_json' ][ 'goods_price_height' ] * 2,
0,
$poster_data[ 'data' ][ 'template_json' ][ 'goods_price_is_show' ]
]
],
[
'action' => 'imageText', // 写入商品划线价格
'data' => [
'¥' . '199.00',
$poster_data[ 'data' ][ 'template_json' ][ 'goods_market_price_font_size' ] * $fontRate * 2,
hex2rgb($poster_data[ 'data' ][ 'template_json' ][ 'goods_market_price_color' ]),
$poster_data[ 'data' ][ 'template_json' ][ 'goods_market_price_left' ] * 2,
( $poster_data[ 'data' ][ 'template_json' ][ 'goods_market_price_top' ] + $poster_data[ 'data' ][ 'template_json' ][ 'goods_market_price_font_size' ] ) * 2,
$poster_data[ 'data' ][ 'template_json' ][ 'goods_market_price_width' ] * 2,
$poster_data[ 'data' ][ 'template_json' ][ 'goods_market_price_height' ] * 2,
0,
$poster_data[ 'data' ][ 'template_json' ][ 'goods_market_price_is_show' ]
]
],
[
'action' => 'imageText', // 写入线
'data' => [
'一一一一',
$poster_data[ 'data' ][ 'template_json' ][ 'goods_market_price_font_size' ] * $fontRate * 2,
hex2rgb($poster_data[ 'data' ][ 'template_json' ][ 'goods_market_price_color' ]),
$poster_data[ 'data' ][ 'template_json' ][ 'goods_market_price_left' ] * 2 - 5,
( $poster_data[ 'data' ][ 'template_json' ][ 'goods_market_price_top' ] + $poster_data[ 'data' ][ 'template_json' ][ 'goods_market_price_font_size' ] ) * 2,
$poster_data[ 'data' ][ 'template_json' ][ 'goods_market_price_width' ] * 2,
$poster_data[ 'data' ][ 'template_json' ][ 'goods_market_price_height' ] * 2,
0,
$poster_data[ 'data' ][ 'template_json' ][ 'goods_market_price_is_show' ]
]
],
];
$member_option = [
[
'action' => 'imageCopy', // 写入用户头像
'data' => [
getUrl() . '/public/static/img/default_img/head.png',
$poster_data[ 'data' ][ 'template_json' ][ 'headimg_left' ] * 2,
$poster_data[ 'data' ][ 'template_json' ][ 'headimg_top' ] * 2,
$poster_data[ 'data' ][ 'template_json' ][ 'headimg_width' ] * 2,
$poster_data[ 'data' ][ 'template_json' ][ 'headimg_height' ] * 2,
!empty($poster_data[ 'data' ][ 'template_json' ][ 'headimg_shape' ]) ? $poster_data[ 'data' ][ 'template_json' ][ 'headimg_shape' ] : 'square',
0,
$poster_data[ 'data' ][ 'template_json' ][ 'headimg_is_show' ]
]
],
[
'action' => 'imageText', // 写入分享人昵称
'data' => [
'用户昵称',
$poster_data[ 'data' ][ 'template_json' ][ 'nickname_font_size' ] * $fontRate * 2,
hex2rgb($poster_data[ 'data' ][ 'template_json' ][ 'nickname_color' ]),
$poster_data[ 'data' ][ 'template_json' ][ 'nickname_left' ] * 2,
( $poster_data[ 'data' ][ 'template_json' ][ 'nickname_top' ] + $poster_data[ 'data' ][ 'template_json' ][ 'nickname_font_size' ] ) * 2,
$poster_data[ 'data' ][ 'template_json' ][ 'nickname_width' ] * 2,
$poster_data[ 'data' ][ 'template_json' ][ 'nickname_height' ] * 2,
0,
$poster_data[ 'data' ][ 'template_json' ][ 'nickname_is_show' ]
]
],
];
if (!empty($poster_data[ 'data' ][ 'background' ])) {
list($width, $height, $type, $attr) = getimagesize(img(trim($poster_data[ 'data' ][ 'background' ])));
$height = 720 * $height / $width;
$back_ground = [
[
'action' => 'imageCopy', // 写入背景图
'data' => [
img($poster_data[ 'data' ][ 'background' ]),
0,
0,
720,
$height,
'square',
0,
1
]
],
];
} else {
$back_ground = [
[
'action' => 'setBackground', // 设背景色
'data' => [ 255, 255, 255 ]
],
];
}
$option = array_merge($ground, $back_ground, $option, $member_option);
$option_res = $poster->create($option);
if (is_array($option_res)) return $option_res;
$pic_name = rand(10000, 99999);
$res = $option_res->jpeg('upload/poster/goods', 'goods_' . $pic_name);
if ($res[ 'code' ] == 0) {
$upload = new Upload($this->site_id);
$res = $upload->fileCloud($res[ 'data' ][ 'path' ]);
}
return $res;
}
/**
* 删除海报模板
* @return mixed
*/
public function delPosterTemplate()
{
if (request()->isJson()) {
$template_ids = input('template_ids', '');
$condition = [
[ 'template_id', 'in', $template_ids ],
[ 'site_id', '=', $this->site_id ],
];
$poster_template_model = new PosterTemplateModel();
$res = $poster_template_model->deletePosterTemplate($condition);
return $res;
}
}
/**
* 编辑模板状态啊
* @return array
*/
public function editstatus()
{
if (request()->isJson()) {
$template_id = input('template_id', 0);
$template_status = input('template_status', 0);
$condition = [
[ 'template_id', 'in', $template_id ],
[ 'site_id', '=', $this->site_id ]
];
$data = [ 'template_status' => $template_status ];
$poster_template_model = new PosterTemplateModel();
$res = $poster_template_model->editPosterTemplate($data, $condition);
return $res;
}
}
}

514
addon/postertemplate/shop/view/poster_template/add.html Executable file
View File

@@ -0,0 +1,514 @@
<style>
.layui-layout-admin .layui-body .body-content{min-height: initial;padding-top: 0;padding-bottom: 0;margin: 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;background: #FFFFFF;padding: 10px 30px 10px 10px;position: fixed;left: 256px;top: 55px;bottom: 54px;}
.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 321px 0 440px;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;}
.form-row{padding-top: 20px;}
.poster-tips{background: #fff;width: 280px;padding: 20px 20px;border: 1px solid #e8e8e8;border-right: none;position: fixed;right: 0;bottom: 54px;top: 55px;}
.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_name{/*border-radius: 15px;*/font-family: Microsoft YaHei;font-weight: 400;line-height: 26px;text-align: left;margin: 30px 25px;}
.goods_img{border-radius: 5px;}
.goods_price-info{width: 310px;height: 80px;border-radius: 10px;margin: 0 15px;padding: 15px;}
.goods_price{font-size: 18px;font-family: Microsoft YaHei;font-weight: 400;color: #FF4544;display: inline-block;width: 75px;height: 20px;}
.goods_market_price{font-size: 12px;font-family: Microsoft YaHei;font-weight: 400;text-decoration: line-through;color: #999999;display: inline-block;margin-top: 6px;}
.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: 56px;width: 89.7%;background: #fff;padding: 10px 0;}
.layui-colorpicker-main-input .layui-btn{padding: 0 10px;}
.circle{border-radius: 50%;}
.upload img{margin-top: 20px;}
.img_prev{margin-top: 0 !important;}
.layui-layout-admin .form-row{text-align: center;}
.layui-layout-admin .layui-body .body-content{padding: 0;}
</style>
<div class="layui-form add-poster">
<div class="poster-form">
<div id="view" style="display: flex;flex: 1;justify-content: center;"></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="backPosterTemplateList()">返回</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 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 style="display: flex; justify-content: space-between; border-bottom: 1px solid #eee;">
<div class="poster-left-header1">商品信息设置</div>
<div class="layui-nav-more1"></div>
</div>
<div class="layer-form">
<div class="layui-form-item poster-headimg">
<div class="layui-form album-img-select">
<input type="checkbox" name="check[]" lay-filter="goods_img" value="" lay-skin="primary" {{d.goods_img_is_show == '1' ? 'checked' : ''}}>
</div>
<label class="layui-form-label mid" style="text-align: left;">商品图</label>
</div>
<div class="layui-form-item poster-name">
<div class="layui-form album-img-select">
<input type="checkbox" name="check[]" lay-filter="goods_name" value="" lay-skin="primary" {{d.goods_name_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="goods_name">
{{# for (var font_index = 14; font_index <= 36; font_index++) { }}
{{# if (font_index == d.goods_name_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_goods_name">
颜色：
<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[]" value="" lay-filter="goods_price" lay-skin="primary" {{d.goods_price_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="goods_price">
{{# for (var font_index = 14; font_index <= 36; font_index++) { }}
{{# if (font_index == d.goods_price_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_goods_price">
颜色：
<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[]" value="" lay-filter="goods_market_price" lay-skin="primary" {{d.goods_market_price_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="goods_market_price">
{{# for (var font_index = 14; font_index <= 36; font_index++) { }}
{{# if (font_index == d.goods_market_price_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_goods_market_price">
颜色：
<div>
<input type="hidden" name="color" id="friendfission-all-input">
<div class="friendfission-all"></div>
</div>
</div>
</div>
</div>
<div style="display: flex; justify-content: space-between; border-bottom: 1px solid #eee;">
<div class="poster-left-header2">店铺信息设置</div>
<div class="layui-nav-more2"></div>
</div>
<div class="layer-form2">
<div class="layui-form-item poster-headimg">
<div class="layui-form album-img-select">
<input type="checkbox" name="check[]" lay-filter="store_logo" value="" lay-skin="primary" {{d.store_logo_is_show == '1' ? 'checked' : ''}}>
</div>
<label class="layui-form-label mid" style="text-align: left;">店铺logo</label>
</div>
<div class="layui-form-item poster-name">
<div class="layui-form album-img-select">
<input type="checkbox" name="check[]" value="" lay-filter="store_name" lay-skin="primary" {{d.store_name_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="store_name">
{{# for (var font_index = 14; font_index <= 36; font_index++) { }}
{{# if (font_index == d.store_name_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_store_name">
颜色：
<div>
<input type="hidden" name="color" id="friendfission-all-input">
<div class="friendfission-all"></div>
</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="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="store_logo {{d.store_logo_is_show == '1' ? '' : 'layui-hide'}}" style="position:absolute;top: {{d.store_logo_top}}px; left: {{d.store_logo_left}}px; width: {{d.store_logo_width}}px; height: {{d.store_logo_height}}px;">
<img src='{:img($site_data.logo)}' width="100%" />
</div>
<div class="store_name {{d.store_name_is_show == '1' ? '' : 'layui-hide'}}" style="position:absolute;top: {{d.store_name_top}}px; color: {{d.store_name_color}}; left: {{d.store_name_left}}px; width: {{d.store_name_width}}px; height: {{d.store_name_height}}px; font-size: {{d.store_name_font_size}}px;">
<span class="design-text">{$site_data.site_name}</span>
</div>
</div>
<div class="goods-info">
<div class="goods_name {{d.goods_name_is_show == '1' ? '' : 'layui-hide'}}" style="top: {{d.goods_name_top}}px; color: {{d.goods_name_color}}; left: {{d.goods_name_left}}px; width: {{d.goods_name_width}}px; height: {{d.goods_name_height}}px; font-size: {{d.goods_name_font_size}}px;">
<p>商品名称-商品名称-商品名称</p>
</div>
<div class="goods_img {{d.goods_img_is_show == '1' ? '' : 'layui-hide'}}" style="top: {{d.goods_img_top}}px; left: {{d.goods_img_left}}px; width: {{d.goods_img_width}}px; height: {{d.goods_img_height}}px;">
<img src="__STATIC__/img/goods_template.png">
</div>
</div>
<div class="price-info" style="display: flex; justify-content: space-between;">
<div>
<div class="goods_price {{d.goods_price_is_show == '1' ? '' : 'layui-hide'}}" style="top: {{d.goods_price_top}}px; left: {{d.goods_price_left}}px; width: {{d.goods_price_width}}px; height: {{d.goods_price_height}}px; color: {{d.goods_price_color}}; font-size: {{d.goods_price_font_size}}px;">
<p>￥100.00</p>
</div>
<span class="goods_market_price poster_lineprice {{d.goods_market_price_is_show == '1' ? '' : 'layui-hide'}}" style="top: {{d.goods_market_price_top}}px; left: {{d.goods_market_price_left}}px; width: {{d.goods_market_price_width}}px; height: {{d.goods_market_price_height}}px; color: {{d.goods_market_price_color}}; font-size: {{d.goods_market_price_font_size}}px;">
<p>￥199.00</p>
</span>
</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>
</div>
</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() {
form = layui.form;
laytpl = layui.laytpl;
colorpicker = layui.colorpicker;
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', 'goods_img', 'goods_name', 'goods_price', 'goods_market_price', 'store_name', 'store_logo'];
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', 'goods_name', 'goods_price', 'goods_market_price', 'store_name'];
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', 'goods_name', 'goods_price', 'goods_market_price', 'store_name'];
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', 'goods_img', 'goods_name', 'goods_price', 'goods_market_price','store_name', 'store_logo'];
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;
if (repeat_flag) return false;
repeat_flag = true;
$.ajax({
url: ns.url("postertemplate://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(index, layero) {
location.hash = ns.hash("postertemplate://shop/postertemplate/lists");
layer.close(index);
},btn2: function(index, layero) {
listenerHash(); // 刷新页面
layer.close(index);
}
})
} else {
layer.msg(res.message);
}
}
});
});
});
function backPosterTemplateList() {
location.hash = ns.hash("postertemplate://shop/postertemplate/lists");
localStorage.removeItem("poster_data");
}
$('body').off('click', '.layui-nav-more1').on('click', '.layui-nav-more1', function() {
$(this).addClass('layui-new-more1');
$('.layer-form').css("display", 'none');
});
$('body').off('click', '.layui-new-more1').on('click', '.layui-new-more1', function() {
$(this).removeClass('layui-new-more1');
$('.layer-form').css("display", 'block');
});
$('body').off('click', '.layui-nav-more2').on('click', '.layui-nav-more2', function() {
$(this).addClass('layui-new-more2');
$('.layer-form2').css("display", 'none');
});
$('body').off('click', '.layui-new-more2').on('click', '.layui-new-more2', function() {
$(this).removeClass('layui-new-more2');
$('.layer-form2').css("display", 'block');
});
$('body').off('click', '.js-delete').on('click', '.js-delete', function() {
$('.poster-right').css("background-image", 'none');
})
</script>

337
addon/postertemplate/shop/view/poster_template/lists.html Executable file
View File

@@ -0,0 +1,337 @@
<style type="text/css">
.iconadd_light {
font-size: 40px;
}
.good-poster {
width: 240px;
height: 413px;
margin:0 0 10px 30px;
text-align: center;
position: relative;
cursor: pointer;
}
</style>
<div class="layui-collapse tips-wrap" style="margin-top: 10px;">
<div class="layui-colla-item">
<h2 class="layui-colla-title">操作提示</h2>
<ul class="layui-colla-content layui-show">
<li>商品海报，在商品分享时的海报样式时为商家提供丰富的海报模板，可自定义设置，也可使用本商城提供的模板</li>
<li>使用商品海报，需要在商品添加、编辑中对商品海报选项进行选择。</li>
<li>分享商品海报，客户可以在手机端的商品详情中分享时获取商品海报图片。</li>
</ul>
</div>
</div>
<div class="single-filter-box top">
<button class="layui-btn add-button" onclick="add()">添加海报</button>
</div>
<div class="screen layui-collapse" lay-filter="selection_panel">
<div class="layui-colla-item">
<form class="layui-colla-content layui-form layui-show">
<div class="layui-form-item">
<div class="layui-inline">
<label class="layui-form-label">海报名称：</label>
<div class="layui-input-inline">
<input type="text" name="search_text" placeholder="请输入海报名称" class="layui-input" autocomplete="off">
</div>
</div>
</div>
<div class="form-row">
<button type="button" class="layui-btn" lay-filter="search" lay-submit>筛选</button>
<button type="reset" class="layui-btn layui-btn-primary">重置</button>
</div>
</form>
</div>
</div>
<div class="layui-tab table-tab" lay-filter="manjian_tab">
<div class="layui-tab-content">
<!-- 列表 -->
<table id="poster_list" lay-filter="poster_list"></table>
</div>
</div>
<script type="text/html" id="qr_img">
<div class='table-title'>
<div class='title-pic'>
<img layer-src src="{{ns.img()}}" onerror="this.src = '{:img('public/static/img/default_img/head.png')}' ">
</div>
</div>
</script>
<script type="text/html" id="poster_status">
<div class='table-title'>
{{# if(d.template_status == 0){ }}
<div class='title-pic' style="text-align:left">未启用</div>
{{# }else{ }}
<div class='title-pic text-color' style="text-align:left">启用</div>
{{# } }}
</div>
</script>
<!-- 操作 -->
<script type="text/html" id="operation">
<div class="table-btn">
<a class="layui-btn" lay-event="detail">预览</a>
<a class="layui-btn" lay-event="edit">编辑</a>
{{# if(d.template_status==0){ }}
<a class="layui-btn" lay-event="start">启用</a>
<a class="layui-btn" lay-event="delete">删除</a>
{{# }else{ }}
<a class="layui-btn" lay-event="close">关闭</a>
{{# } }}
</div>
</script>
<script type="text/html" id="add">
<div style="display: flex;">
<div>
<div class="border-color text-color" style="width: 240px; height: 413px; border: 1px dashed;text-align: center; line-height: 413px; cursor: pointer; display: inline-block;" onclick="toAdd()">
<i class="iconfont iconadd_light"></i>
</div>
<div style="text-align: center; margin-top: 10px;">自定义海报</div>
</div>
<div style="display: inline-block; position: relative;">
<div style="display: flex;">
{{# d.forEach(function(item, index){ }}
<li class="good-poster" onclick="toAdd({{ item.muban_id }})">
<span class="iconfont" ></span>
<img data-id="1" style="width: 100%;" src="{{ item.image }}">
<span style="color: #000000; font-size: 14px;">{{ item.name }}</span>
<div class="js-zhezhao" ></div>
</li>
{{# }) }}
</div>
</div>
</div>
</script>
<!-- 详情弹框html -->
<script type="text/html" id="detail">
<img layer-src src="{{ns.img(d)}}" style="width: 360px; height: 640px;" />
</script>
<script>
var laytpl,template_id,table,form,element,repeat_flag = false;
layui.use(['form', 'element', 'laytpl'], function() {
form = layui.form;
element = layui.element;
laytpl = layui.laytpl;
form.render();
table = new Table({
elem: '#poster_list',
url: ns.url("postertemplate://shop/postertemplate/lists"),
cols: [
[ {
field: 'poster_name',
title: '海报名称',
unresize: 'false',
width: '15%',
}, {
field: 'template_status',
title: '海报状态',
unresize: 'false',
width: '60%',
templet: '#poster_status'
}, {
title: '操作',
toolbar: '#operation',
unresize: 'false',
align:'right'
}]
]
});
/**
* 监听工具栏操作
*/
table.tool(function(obj) {
var data = obj.data;
switch (obj.event) {
case 'detail': //预览
detailPoster(data.template_id);
break;
case 'edit': //编辑
location.hash = ns.hash("postertemplate://shop/postertemplate/editpostertemplate", {
"template_id": data.template_id
});
break;
case 'delete': //删除
deletePoster(data.template_id, data.template_status);
break;
case 'close': //关闭
close(data.template_id);
break;
case 'start': //启用
start(data.template_id);
break;
}
});
/**
* 删除
*/
function deletePoster(template_ids, template_status) {
if (template_status == 1) {
return layer.msg('请先关闭海报后再删除');
}
layer.confirm('确定要删除该海报吗?', function(index) {
if (repeat_flag) return false;
repeat_flag = true;
layer.close(index);
$.ajax({
url: ns.url("postertemplate://shop/postertemplate/delpostertemplate"),
data: {
template_ids: template_ids
},
dataType: 'JSON',
type: 'POST',
success: function(res) {
repeat_flag = false;
layer.msg(res.message);
if (res.code == 0) {
table.reload({
page: {
curr: 1
},
});
}
}
});
}, function() {
layer.close();
});
}
/**
* 关闭
*/
function close(template_id) {
layer.confirm('确定关闭吗?', function(index) {
if (repeat_flag) return false;
repeat_flag = true;
layer.close(index);
$.ajax({
url: ns.url("postertemplate://shop/postertemplate/editstatus"),
data: {
template_id: template_id,
template_status: 0
},
dataType: 'JSON',
type: 'POST',
success: function(res) {
repeat_flag = false;
layer.msg(res.message);
if (res.code == 0) {
table.reload();
}
}
});
});
}
/**
* 预览
*/
function detailPoster(template_id) {
if (repeat_flag) return false;
repeat_flag = true;
$.ajax({
url: ns.url("postertemplate://shop/postertemplate/postertemplatedetail"),
data: {
template_id: template_id,
},
dataType: 'JSON',
type: 'POST',
success: function(res) {
repeat_flag = false;
if (res.code >= 0) {
laytpl($("#detail").html()).render(res.data, function(html) {
layer.open({
type: 1,
shadeClose: true,
shade: 0.3,
offset: 'auto',
fixed: false,
title: "预览",
area: ['400px', '760px'],
btn: ['退出'],
content: html,
skin: 'detail'
});
})
}else{
layer.msg(res.message || '操作错误');
}
}
});
}
/**
* 开启
*/
function start(template_id) {
layer.confirm('确定启用吗?', function(index) {
if (repeat_flag) return false;
repeat_flag = true;
layer.close(index);
$.ajax({
url: ns.url("postertemplate://shop/postertemplate/editstatus"),
data: {
template_id: template_id,
template_status: 1
},
dataType: 'JSON',
type: 'POST',
success: function(res) {
repeat_flag = false;
layer.msg(res.message);
if (res.code == 0) {
table.reload();
}
}
});
});
}
/**
* 搜索功能
*/
form.on('submit(search)', function(data) {
table.reload({
page: {
curr: 1
},
where: data.field
});
});
});
function add() {
var mubanList = [
{muban_id: 1, name:'商品海报1', image:"SHOP_IMG/poster1.png"},
{muban_id: 2, name:'商品海报2', image:"SHOP_IMG/poster2.png"},
{muban_id: 3, name:'商品海报3', image:"SHOP_IMG/poster3.png"},
];
laytpl($("#add").html()).render(mubanList, function(html) {
layer.open({
type: 1,
shadeClose: true,
shade: 0.3,
offset: 'auto',
fixed: false,
title: "添加海报",
area: ['1100px', '560px'],
btnAlign: 'c',
content: html,
skin: 'add',
});
})
}
function toAdd(muban_id) {
location.hash = ns.hash("postertemplate://shop/postertemplate/addpostertemplate", {muban_id:muban_id});
}
</script>

BIN
addon/postertemplate/shop/view/public/img/poster_bg1.png Executable file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 37 KiB

BIN
addon/postertemplate/shop/view/public/img/poster_bg2.png Executable file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 10 KiB

BIN
addon/postertemplate/shop/view/public/img/poster_bg3.png Executable file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 61 KiB