初始上传
This commit is contained in:
329
addon/live/shop/view/room/add.html
Executable file
329
addon/live/shop/view/room/add.html
Executable file
@@ -0,0 +1,329 @@
|
||||
<div class="layui-form form-wrap">
|
||||
<div class="layui-card card-common card-brief">
|
||||
<div class="layui-card-header">
|
||||
<span class="card-title">基础设置</span>
|
||||
</div>
|
||||
<div class="layui-card-body">
|
||||
<div class="layui-form-item">
|
||||
<label class="layui-form-label"><span class="required">*</span>直播类型：</label>
|
||||
<div class="layui-input-block">
|
||||
<input type="radio" name="type" value="0" title="手机直播" checked>
|
||||
</div>
|
||||
<div class="word-aux">
|
||||
<p>通过“小程序直播主播端小程序”发起直播</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="layui-form-item">
|
||||
<label class="layui-form-label"><span class="required">*</span>直播标题：</label>
|
||||
<div class="layui-input-block">
|
||||
<input type="text" name="name" lay-verify="required|name" class="layui-input len-mid" autocomplete="off">
|
||||
</div>
|
||||
<div class="word-aux">
|
||||
<p>直播标题必须为3-17个字符</p>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
<div class="layui-form-item">
|
||||
<label class="layui-form-label"><span class="required">*</span>开播时间：</label>
|
||||
<div class="layui-input-block len-mid">
|
||||
<input type="text" class="layui-input" name="startTime" lay-verify="required" id="startTime" autocomplete="off" readonly>
|
||||
<i class=" iconrili iconfont calendar"></i>
|
||||
</div>
|
||||
</div>
|
||||
<div class="layui-form-item">
|
||||
<label class="layui-form-label"><span class="required">*</span>结束时间：</label>
|
||||
<div class="layui-input-block len-mid end_time">
|
||||
<input type="text" class="layui-input" name="endTime" lay-verify="required|time" id="endTime" autocomplete="off" readonly>
|
||||
<i class=" iconrili iconfont calendar"></i>
|
||||
</div>
|
||||
<div class="word-aux">
|
||||
<p>开播时间至少需在10分钟后</p>
|
||||
<p>开播时间段仅供参考，不是实际直播间可以开播的时间。</p>
|
||||
<p>直播间在开始时间前也可以开播，并且到结束时间后不会强制结束。</p>
|
||||
<p>若到结束时间仍未开播，则直播间无法再开播。</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="layui-form-item">
|
||||
<label class="layui-form-label"><span class="required">*</span>主播昵称：</label>
|
||||
<div class="layui-input-block len-mid">
|
||||
<input type="text" class="layui-input" name="anchorName" lay-verify="required|anchorName" autocomplete="off">
|
||||
</div>
|
||||
<div class="word-aux">
|
||||
<p>主播昵称必须为2-15个字符</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="layui-form-item">
|
||||
<label class="layui-form-label"><span class="required">*</span>主播微信账号：</label>
|
||||
<div class="layui-input-block len-mid">
|
||||
<input type="text" class="layui-input" name="anchorWechat" lay-verify="required" autocomplete="off">
|
||||
</div>
|
||||
<div class="word-aux">
|
||||
<p>每个直播间需要绑定一个用作核实主播身份</p>
|
||||
<p>主播微信号，需通过实名认证</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="layui-card card-common card-brief">
|
||||
<div class="layui-card-header">
|
||||
<span class="card-title">分享卡片样式配置</span>
|
||||
</div>
|
||||
<div class="layui-card-body">
|
||||
<div class="layui-form-item">
|
||||
<label class="layui-form-label"><span class="required">*</span>分享卡片封面：</label>
|
||||
<div class="layui-input-block">
|
||||
<div class="upload-img-block">
|
||||
<div class="upload-img-box">
|
||||
<div class="upload-default" id="shareImgUpload">
|
||||
<div class="upload">
|
||||
<i class="iconfont iconshangchuan"></i>
|
||||
<p>点击上传</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="operation">
|
||||
<div>
|
||||
<i title="图片预览" class="iconfont iconreview js-preview" style="margin-right: 20px;"></i>
|
||||
<i title="删除图片" class="layui-icon layui-icon-delete js-delete"></i>
|
||||
</div>
|
||||
<div class="replace_img js-replace">点击替换</div>
|
||||
</div>
|
||||
<input type="hidden" name="shareImg" value="" lay-verify="shareImg"/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="word-aux">
|
||||
<p>观众在微信对话框内分享的直播间将以分享卡片的形式呈现。建议尺寸：800像素 * 640像素，图片大小不得超过1M。</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="layui-card card-common card-brief">
|
||||
<div class="layui-card-header">
|
||||
<span class="card-title">直播间样式配置</span>
|
||||
</div>
|
||||
<div class="layui-card-body">
|
||||
<div class="layui-form-item">
|
||||
<label class="layui-form-label"><span class="required">*</span>直播间背景墙：</label>
|
||||
<div class="layui-input-block">
|
||||
<div class="upload-img-block">
|
||||
<div class="upload-img-box">
|
||||
<div class="upload-default" id="coverImgUpload">
|
||||
<div class="upload">
|
||||
<i class="iconfont iconshangchuan"></i>
|
||||
<p>点击上传</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="operation">
|
||||
<div>
|
||||
<i title="图片预览" class="iconfont iconreview js-preview" style="margin-right: 20px;"></i>
|
||||
<i title="删除图片" class="layui-icon layui-icon-delete js-delete"></i>
|
||||
</div>
|
||||
<div class="replace_img js-replace">点击替换</div>
|
||||
</div>
|
||||
<input type="hidden" name="coverImg" value="" lay-verify="coverImg"/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
<div class="word-aux">
|
||||
<p>直播间背景墙是每个直播间的默认背景。建议尺寸：1080像素 * 1920像素，图片大小不得超过2M。</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="layui-form-item">
|
||||
<label class="layui-form-label"><span class="required">*</span>购物直播频道封面：</label>
|
||||
<div class="layui-input-block">
|
||||
<div class="upload-img-block">
|
||||
<div class="upload-img-box">
|
||||
<div class="upload-default" id="feedsImgUpload">
|
||||
<div class="upload">
|
||||
<i class="iconfont iconshangchuan"></i>
|
||||
<p>点击上传</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="operation">
|
||||
<div>
|
||||
<i title="图片预览" class="iconfont iconreview js-preview" style="margin-right: 20px;"></i>
|
||||
<i title="删除图片" class="layui-icon layui-icon-delete js-delete"></i>
|
||||
</div>
|
||||
<div class="replace_img js-replace">点击替换</div>
|
||||
</div>
|
||||
<input type="hidden" name="feedsImg" value="" lay-verify="feedsImg"/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="word-aux">
|
||||
<p>购物直播频道封面图。建议尺寸：建议像素800*800，大小不超过100KB。</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="layui-form-item">
|
||||
<label class="layui-form-label">直播间功能：</label>
|
||||
<div class="layui-input-block">
|
||||
<input type="checkbox" name="closeLike" value="0" title="开启点赞" lay-skin="primary" checked><br>
|
||||
<input type="checkbox" name="closeGoods" value="0" title="开启货架" lay-skin="primary" checked><br>
|
||||
<input type="checkbox" name="closeComment" value="0" title="开启评论" lay-skin="primary" checked><br>
|
||||
<input type="checkbox" name="closeReplay" value="0" title="开启回放" lay-skin="primary" checked><br>
|
||||
<input type="checkbox" name="closeKf" value="0" title="开启客服" lay-skin="primary" checked>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="form-row">
|
||||
<button class="layui-btn" lay-submit lay-filter="save">添加</button>
|
||||
<button class="layui-btn layui-btn-primary" onclick="backLiveRoom()">返回</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script type="text/javascript">
|
||||
var form, laydate, repeat_flag = false, //防重复标识
|
||||
minDate = "";
|
||||
|
||||
layui.use(['form', 'laydate'], function() {
|
||||
form = layui.form,
|
||||
laydate = layui.laydate;
|
||||
|
||||
form.render();
|
||||
|
||||
// 开始时间
|
||||
laydate.render({
|
||||
elem: '#startTime' ,//指定元素
|
||||
type: 'datetime',
|
||||
value: new Date(Date.parse(new Date()) + 3600000),
|
||||
done: function(value){
|
||||
minDate = value;
|
||||
reRender();
|
||||
}
|
||||
});
|
||||
|
||||
//结束时间
|
||||
laydate.render({
|
||||
elem: '#endTime' ,//指定元素
|
||||
type: 'datetime',
|
||||
value: ''
|
||||
});
|
||||
|
||||
/**
|
||||
* 重新渲染结束时间
|
||||
* */
|
||||
function reRender(){
|
||||
$("#endTime").remove();
|
||||
$(".end_time").html('<input type="text" id="endTime" name="endTime" placeholder="请输入结束时间" lay-verify="required|time" class="layui-input len-mid" autocomplete="off">');
|
||||
laydate.render({
|
||||
elem: '#endTime',
|
||||
type: 'datetime',
|
||||
min: minDate
|
||||
});
|
||||
}
|
||||
|
||||
/**
|
||||
* 表单验证
|
||||
*/
|
||||
form.verify({
|
||||
name: function(value){
|
||||
if (value.length < 3 || value.length > 17) {
|
||||
return '直播标题必须为3-17个字符';
|
||||
}
|
||||
},
|
||||
anchorName: function(value){
|
||||
if (value.length < 2 || value.length > 15) {
|
||||
return '主播昵称必须为2-15个字符';
|
||||
}
|
||||
},
|
||||
time: function(value) {
|
||||
var now_time = (new Date()).getTime();
|
||||
var start_time = (new Date($("#start_time").val())).getTime();
|
||||
var end_time = (new Date(value)).getTime();
|
||||
if (now_time > end_time) {
|
||||
return '结束时间不能小于当前时间!'
|
||||
}
|
||||
if (start_time > end_time) {
|
||||
return '结束时间不能小于开始时间!';
|
||||
}
|
||||
},
|
||||
shareImg: function(value){
|
||||
var patt = /[\S]+/;
|
||||
if (!patt.test(value)) {
|
||||
return '请上传分享卡片封面!';
|
||||
}
|
||||
},
|
||||
coverImg: function(value){
|
||||
var patt = /[\S]+/;
|
||||
if (!patt.test(value)) {
|
||||
return '请上传直播间背景墙!';
|
||||
}
|
||||
},
|
||||
feedsImg: function(value){
|
||||
var patt = /[\S]+/;
|
||||
if (!patt.test(value)) {
|
||||
return '请上传直播间购物直播频道封面!';
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
// 添加
|
||||
form.on('submit(save)', function(data){
|
||||
if (repeat_flag) return;
|
||||
repeat_flag = true;
|
||||
|
||||
$.ajax({
|
||||
type: 'POST',
|
||||
url: ns.url("live://shop/room/add"),
|
||||
data: data.field,
|
||||
dataType: 'JSON',
|
||||
success: function(res) {
|
||||
layer.msg(res.message);
|
||||
repeat_flag = false;
|
||||
if (res.code == 0) {
|
||||
location.hash = ns.hash("live://shop/room/index");
|
||||
}
|
||||
}
|
||||
});
|
||||
});
|
||||
|
||||
var share_upload = new Upload({
|
||||
elem: '#shareImgUpload',
|
||||
url: ns.url("live://shop/room/addimagemedia"),
|
||||
callback: function(res) {
|
||||
if (res.code >= 0) {
|
||||
$("input[name='shareImg']").val(res.data.media_info.media_id);
|
||||
// $("#shareImgUpload").parent().find(".upload-img-box").html("<img src=" + ns.img(res.data.pic_info.pic_path) + " >");
|
||||
$("#shareImgUpload").html("<div id='preview_imgUpload' class='preview_img'><img layer-src class='img_prev' src=" + ns.img(res.data.pic_info.pic_path) + " ></div>");
|
||||
}
|
||||
return layer.msg(res.message);
|
||||
}
|
||||
});
|
||||
|
||||
var cover_upload = new Upload({
|
||||
elem: '#coverImgUpload',
|
||||
url: ns.url("live://shop/room/addimagemedia"),
|
||||
callback: function(res) {
|
||||
if (res.code >= 0) {
|
||||
$("input[name='coverImg']").val(res.data.media_info.media_id);
|
||||
$("#coverImgUpload").html("<div id='preview_imgUpload' class='preview_img'><img layer-src class='img_prev' src=" + ns.img(res.data.pic_info.pic_path) + " ></div>");
|
||||
}
|
||||
return layer.msg(res.message);
|
||||
}
|
||||
});
|
||||
|
||||
var feeds_upload = new Upload({
|
||||
elem: '#feedsImgUpload',
|
||||
url: ns.url("live://shop/room/addimagemedia"),
|
||||
callback: function(res) {
|
||||
if (res.code >= 0) {
|
||||
$("input[name='feedsImg']").val(res.data.media_info.media_id);
|
||||
$("#feedsImgUpload").html("<div id='preview_imgUpload' class='preview_img'><img layer-src class='img_prev' src=" + ns.img(res.data.pic_info.pic_path) + " ></div>");
|
||||
}
|
||||
return layer.msg(res.message);
|
||||
}
|
||||
});
|
||||
|
||||
});
|
||||
|
||||
function backLiveRoom() {
|
||||
location.hash = ns.hash("live://shop/room/index");
|
||||
}
|
||||
</script>
|
||||
93
addon/live/shop/view/room/goods_select.html
Executable file
93
addon/live/shop/view/room/goods_select.html
Executable file
@@ -0,0 +1,93 @@
|
||||
<style type="text/css">
|
||||
.table-wrap {padding: 0 20px;width: 560px;height: 385px;}
|
||||
.table-wrap .layui-table-body {overflow-x: hidden;height: 260px;overflow-y: scroll;}
|
||||
.goods-info {padding: 5px 0;align-items: center;flex-wrap:unset!important;}
|
||||
.goods-info .room-name {padding-left: 5px;line-height: 1}
|
||||
.goods-info img {width:50px;height: 50px;}
|
||||
.info-wrap{height: 30px;line-height: 30px;background: #f2f2f2;color: #666;padding: 5px 10px;margin-top: 15px;}
|
||||
</style>
|
||||
|
||||
<div class="table-wrap">
|
||||
<div class="info-wrap">已选择 <span id="selectNum">0</span> 件 商品</div>
|
||||
<table id="goods_list" lay-filter="goods_list"></table>
|
||||
</div>
|
||||
|
||||
<script type="text/html" id="goodsinfo">
|
||||
<div class="goods-info">
|
||||
<img src="{{ ns.img(d.cover_img) }}">
|
||||
<span class="room-name" title="{{ d.name }}">{{ d.name }}</span>
|
||||
</div>
|
||||
</script>
|
||||
|
||||
<script type="text/javascript">
|
||||
var sku_id = '{$ids}',
|
||||
selectedData = [];
|
||||
selectedIdData = [];
|
||||
|
||||
$(function(){
|
||||
var table = new Table({
|
||||
id: 'goodsTable',
|
||||
elem: '#goods_list',
|
||||
url: ns.url("live://shop/room/getGoodsPageList"),
|
||||
where: {
|
||||
sku_id: sku_id
|
||||
},
|
||||
cols: [
|
||||
[
|
||||
{
|
||||
title: '',
|
||||
type: 'checkbox',
|
||||
unresize: 'false',
|
||||
width: '10%',
|
||||
},
|
||||
{
|
||||
title: '商品信息',
|
||||
unresize: 'false',
|
||||
width: '90%',
|
||||
templet: "#goodsinfo"
|
||||
}
|
||||
]
|
||||
],
|
||||
callback: function(res, curr, count){
|
||||
if (res.data.length) {
|
||||
var checkedNum = 0;
|
||||
res.data.forEach(function(e,i){
|
||||
if ($.inArray(e.id, selectedIdData) != -1) {
|
||||
checkedNum += 1;
|
||||
res.data[i]["LAY_CHECKED"] = 'true';
|
||||
var index= res.data[i]['LAY_TABLE_INDEX'];
|
||||
$('.table-wrap tr[data-index=' + index + '] input[type="checkbox"]').prop('checked', true);
|
||||
$('.table-wrap tr[data-index=' + index + '] input[type="checkbox"]').next().addClass('layui-form-checked');
|
||||
}
|
||||
});
|
||||
if (res.data.length == checkedNum) {
|
||||
$('.table-wrap .layui-table-header tr input[type="checkbox"]').prop('checked', true);
|
||||
$('.table-wrap .layui-table-header tr input[type="checkbox"]').next().addClass('layui-form-checked');
|
||||
}
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
// 监听checkbox选中状态改变事件
|
||||
table.on('checkboxChange', function(obj){
|
||||
if (obj.checked) {
|
||||
if ($.inArray(obj.data.id, selectedIdData) == -1) {
|
||||
selectedIdData.push(obj.data.id);
|
||||
selectedData.push(obj.data)
|
||||
}
|
||||
} else {
|
||||
selectedData.forEach(function(e,i){
|
||||
if (JSON.stringify(e) == JSON.stringify(obj.data)) {
|
||||
selectedData.splice(i, 1);
|
||||
}
|
||||
});
|
||||
selectedIdData.splice($.inArray(obj.data.id, selectedIdData), 1);
|
||||
}
|
||||
$('#selectNum').text(selectedData.length);
|
||||
})
|
||||
});
|
||||
|
||||
function liveSelectGoodsCallbackListener(fun){
|
||||
if (typeof fun == 'function') fun(selectedData);
|
||||
}
|
||||
</script>
|
||||
230
addon/live/shop/view/room/index.html
Executable file
230
addon/live/shop/view/room/index.html
Executable file
@@ -0,0 +1,230 @@
|
||||
<style>
|
||||
.progress-layer {width:400px;background:#fff;position:fixed;top:50%;left:50%;transform:translate(-50%,-50%);box-shadow:1px 1px 50px rgba(0,0,0,.3);padding:20px 20px;z-index:100;display:none;}
|
||||
.progress-layer h3 {line-height:1;margin-bottom:15px;text-align:center;font-size:14px;}
|
||||
.progress-layer .layui-progress-big,.progress-layer .layui-progress-big .layui-progress-bar {height:14px;line-height:14px;}
|
||||
.progress-layer .layui-progress-text {line-height:14px;}
|
||||
.room-info {padding: 5px 0;align-items: center;flex-wrap:unset!important;}
|
||||
.room-info .room-img{width:50px;height: 50px;background: #f5f5f5;}
|
||||
.room-info img {width:50px;height: 50px;}
|
||||
.room-info .room-name {padding-left: 5px;line-height: 1;flex: 1}
|
||||
.single-filter-box{justify-content: end}
|
||||
.push-layer{text-align: center;padding: 30px 0;}
|
||||
.push-layer .qrcode{width:100px;height:100px;margin:10px auto;display:block}
|
||||
</style>
|
||||
|
||||
<div class="single-filter-box">
|
||||
<button class="layui-btn" onclick="sync()">同步直播间</button>
|
||||
<a href="{:href_url('live://shop/room/add')}" class="layui-btn layui-btn-primary">添加直播间</a>
|
||||
</div>
|
||||
|
||||
<table id="room_list" lay-filter="room_list"></table>
|
||||
|
||||
<!-- 直播间信息 -->
|
||||
<script type="text/html" id="roominfo">
|
||||
<div class="table-btn room-info">
|
||||
<div class="room-img">
|
||||
<img src="{{ ns.img(d.share_img) }}">
|
||||
</div>
|
||||
<div class="room-name" title="{{ d.name }}">{{ d.name }}</div>
|
||||
</div>
|
||||
</script>
|
||||
|
||||
<!-- 操作 -->
|
||||
<script type="text/html" id="operation">
|
||||
<div class="table-btn">
|
||||
<a class="layui-btn" lay-event="operate">运营</a>
|
||||
{{# if( d.live_status == '102' ){ }}
|
||||
<a class="layui-btn" lay-event="push">推流入口</a>
|
||||
{{# } }}
|
||||
<a class="layui-btn" lay-event="delete">删除</a>
|
||||
</div>
|
||||
</script>
|
||||
|
||||
<div class="progress-layer">
|
||||
<h3>正在同步中...</h3>
|
||||
<div class="layui-progress layui-progress-big" lay-showPercent="true" lay-filter="progress">
|
||||
<div class="layui-progress-bar layui-bg-blue" lay-percent="0%"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script type="text/html" id="push">
|
||||
<div class="push-layer">
|
||||
<img src="LIVE_IMG/weapp_push.png" class="qrcode">
|
||||
<p>主播可通过微信扫该小程序码或搜一搜“小程序直播”进入主播小程序进行推流</p>
|
||||
</div>
|
||||
</script>
|
||||
|
||||
<!-- 批量操作 -->
|
||||
<script type="text/html" id="batchOperation">
|
||||
<button class="layui-btn layui-btn-primary" lay-event="delete">批量删除</button>
|
||||
</script>
|
||||
|
||||
<script>
|
||||
var form,table,element,syncClick = false,repeat_flag = false;
|
||||
layui.use(['form', 'element'], function() {
|
||||
form = layui.form;
|
||||
element = layui.element;
|
||||
|
||||
table = new Table({
|
||||
elem: '#room_list',
|
||||
url: ns.url("live://shop/room/index"),
|
||||
bottomToolbar: "#batchOperation",
|
||||
cols: [
|
||||
[{
|
||||
type: 'checkbox',
|
||||
unresize: 'false',
|
||||
width: '3%'
|
||||
},{
|
||||
title: '直播间信息',
|
||||
unresize: 'false',
|
||||
width: '17%',
|
||||
templet: "#roominfo"
|
||||
}, {
|
||||
field: 'roomid',
|
||||
title: '直播间ID',
|
||||
unresize: 'false',
|
||||
width: '10%'
|
||||
}, {
|
||||
field: 'anchor_name',
|
||||
title: '主播昵称',
|
||||
unresize: 'false',
|
||||
width: '10%'
|
||||
}, {
|
||||
field: 'start_time',
|
||||
title: '开播时间',
|
||||
unresize: 'false',
|
||||
width: '15%',
|
||||
templet: function(data) {
|
||||
return ns.time_to_date(data.start_time);
|
||||
}
|
||||
}, {
|
||||
field: 'end_time',
|
||||
title: '结束时间',
|
||||
unresize: 'false',
|
||||
width: '15%',
|
||||
templet: function(data) {
|
||||
return ns.time_to_date(data.end_time);
|
||||
}
|
||||
}, {
|
||||
title: '商品数量',
|
||||
unresize: 'false',
|
||||
width: '10%',
|
||||
templet: function(data) {
|
||||
return data.goods.length;
|
||||
}
|
||||
}, {
|
||||
field: 'status_name',
|
||||
title: '状态',
|
||||
unresize: 'false',
|
||||
width: '10%',
|
||||
}, {
|
||||
title: '操作',
|
||||
toolbar: '#operation',
|
||||
unresize: 'false',
|
||||
align:'right'
|
||||
}]
|
||||
]
|
||||
});
|
||||
|
||||
table.tool(function(obj) {
|
||||
var data = obj.data;
|
||||
switch (obj.event) {
|
||||
case 'operate': // 运营
|
||||
location.hash = ns.hash("live://shop/room/operate", {"id": data.id});
|
||||
break;
|
||||
case 'push':
|
||||
layer.open({
|
||||
type: 1,
|
||||
title: false,
|
||||
skin: 'weapp-preview',
|
||||
closeBtn: 1, //不显示关闭按钮
|
||||
anim: 0,
|
||||
shadeClose: false,
|
||||
content: $('#push').html()
|
||||
});
|
||||
break;
|
||||
case 'delete':
|
||||
deleteRoom(data.id);
|
||||
break;
|
||||
}
|
||||
})
|
||||
|
||||
// 批量操作
|
||||
table.bottomToolbar(function (obj) {
|
||||
if (obj.data.length < 1) {
|
||||
layer.msg('请选择要操作的数据');
|
||||
return;
|
||||
}
|
||||
var id_array = new Array();
|
||||
for (i in obj.data) id_array.push(obj.data[i].id);
|
||||
switch (obj.event) {
|
||||
case "delete":
|
||||
deleteRoom(id_array.toString());
|
||||
break;
|
||||
}
|
||||
});
|
||||
});
|
||||
|
||||
// 同步直播间
|
||||
function sync(start){
|
||||
if (syncClick) return;
|
||||
syncClick = true;
|
||||
start = start == undefined ? 0 : start;
|
||||
|
||||
$.ajax({
|
||||
url: ns.url("live://shop/room/sync"),
|
||||
data: {
|
||||
start: 0,
|
||||
},
|
||||
dataType: 'JSON',
|
||||
type: 'POST',
|
||||
success: function(res) {
|
||||
syncClick = false;
|
||||
if (res.code == 0) {
|
||||
var data = res.data,
|
||||
next = parseInt(start) + 1;
|
||||
|
||||
if (next < data.total_page) {
|
||||
if (start == 0) {
|
||||
$(".progress-layer").fadeOut();
|
||||
}
|
||||
var progress = (next / data.total_page * 100).toFixed(2);
|
||||
element.progress('progress', progress + '%');
|
||||
// 拉取下一页
|
||||
sync(next);
|
||||
} else {
|
||||
if (!$(".progress-layer").is(':hidden')) $(".progress-layer").fadeOut();
|
||||
layer.closeAll();
|
||||
layer.msg('同步成功');
|
||||
table.reload();
|
||||
}
|
||||
} else {
|
||||
layer.msg(res.message);
|
||||
}
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
function
|
||||
deleteRoom(room_ids){
|
||||
layer.confirm('是否确定要删除所选直播间？', {title: '提示'}, function (index) {
|
||||
if (repeat_flag) return;
|
||||
repeat_flag = true;
|
||||
layer.close(index);
|
||||
|
||||
$.ajax({
|
||||
url: ns.url("live://shop/room/delete"),
|
||||
data: {room_ids: room_ids},
|
||||
dataType: 'JSON',
|
||||
type: 'POST',
|
||||
success: function (res) {
|
||||
layer.msg(res.message);
|
||||
repeat_flag = false;
|
||||
if (res.code == 0) {
|
||||
table.reload();
|
||||
}
|
||||
}
|
||||
});
|
||||
});
|
||||
}
|
||||
</script>
|
||||
278
addon/live/shop/view/room/operate.html
Executable file
278
addon/live/shop/view/room/operate.html
Executable file
@@ -0,0 +1,278 @@
|
||||
<style type="text/css">
|
||||
.goods-empty {padding: 100px 0;text-align: center;}
|
||||
.goods-info {padding: 5px 0;align-items: center;flex-wrap:unset!important;}
|
||||
.goods-info .room-name {padding-left: 5px;line-height: 1}
|
||||
.goods-info img {width:50px;height: 50px;}
|
||||
</style>
|
||||
|
||||
<div class="layui-form form-wrap">
|
||||
<div class="layui-card card-common card-brief">
|
||||
<div class="layui-card-header">
|
||||
<span class="card-title">直播间信息</span>
|
||||
</div>
|
||||
<div class="layui-card-body">
|
||||
<div class="layui-form-item">
|
||||
<label class="layui-form-label">直播间：</label>
|
||||
<div class="layui-input-block">
|
||||
<p>{$room_info.name}</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="layui-form-item">
|
||||
<label class="layui-form-label">直播时间：</label>
|
||||
<div class="layui-input-block">
|
||||
<p>{:time_to_date($room_info.start_time)} - {:time_to_date($room_info.end_time)}</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="layui-card card-common card-brief">
|
||||
<div class="layui-card-header">
|
||||
<span class="card-title">列表展示</span>
|
||||
</div>
|
||||
<div class="layui-card-body">
|
||||
<div class="layui-form-item">
|
||||
<label class="layui-form-label">主播头像：</label>
|
||||
<div class="layui-input-block">
|
||||
<div class="upload-img-block">
|
||||
<div class="upload-img-box {notempty name="$room_info['anchor_img']"}hover{/notempty}">
|
||||
<div class="upload-default" id="anchorImgUpload">
|
||||
{if condition="$room_info.anchor_img"}
|
||||
<div id="preview_imgUpload" class="preview_img">
|
||||
<img layer-src src="{:img($room_info.anchor_img)}" class="img_prev"/>
|
||||
</div>
|
||||
{else/}
|
||||
<div class="upload">
|
||||
<i class="iconfont iconshangchuan"></i>
|
||||
<p>点击上传</p>
|
||||
</div>
|
||||
{/if}
|
||||
</div>
|
||||
<div class="operation">
|
||||
<div>
|
||||
<i title="图片预览" class="iconfont iconreview js-preview" style="margin-right: 20px;"></i>
|
||||
<i title="删除图片" class="layui-icon layui-icon-delete js-delete" ></i>
|
||||
</div>
|
||||
<div class="replace_img js-replace">点击替换</div>
|
||||
</div>
|
||||
<input type="hidden" name="anchor_img" value="{if condition="$room_info.anchor_img"}{$room_info.anchor_img}{/if}"/>
|
||||
</div>
|
||||
<!-- <p id="anchorImgUpload" class=" {if condition='$room_info.anchor_img'} replace {else/} no-replace{/if}">替换</p>
|
||||
<i class="del {if condition="$room_info.anchor_img"}show{/if}">x</i> -->
|
||||
</div>
|
||||
</div>
|
||||
<div class="word-aux">
|
||||
<p>在直播列表中展示。建议尺寸：100像素 * 100像素，图片大小不得超过1M。</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="layui-form-item">
|
||||
<label class="layui-form-label"><span class="required">*</span>直播间横幅：</label>
|
||||
<div class="layui-input-block">
|
||||
<div class="upload-img-block">
|
||||
<div class="upload-img-box {notempty name="$room_info['banner']"}hover{/notempty}" >
|
||||
<div class="upload-default" id="bannerUpload">
|
||||
{if condition="$room_info.banner"}
|
||||
<div id="preview_imgUpload" class="preview_img">
|
||||
<img layer-src src="{:img($room_info.banner)}" class="img_prev"/>
|
||||
</div>
|
||||
{else/}
|
||||
<i class="iconfont iconshangchuan"></i>
|
||||
<p>点击上传</p>
|
||||
{/if}
|
||||
</div>
|
||||
<div class="operation">
|
||||
<div>
|
||||
<i title="图片预览" class="iconfont iconreview js-preview" style="margin-right: 20px;"></i>
|
||||
<i title="删除图片" class="layui-icon layui-icon-delete js-delete"></i>
|
||||
</div>
|
||||
<div class="replace_img js-replace">点击替换</div>
|
||||
</div>
|
||||
<input type="hidden" name="banner" value="{if condition="$room_info.banner"}{$room_info.banner}{/if}"/>
|
||||
</div>
|
||||
<!-- <p class="{if condition='$room_info.banner'} replace {else/} no-replace{/if}">替换</p>
|
||||
|
||||
<i class="del {if condition="$room_info.banner"}show{/if}">x</i> -->
|
||||
</div>
|
||||
</div>
|
||||
<div class="word-aux">
|
||||
<p>在直播列表中展示。建议尺寸：702像素 * 208像素，图片大小不得超过2M。</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="layui-card card-common card-brief">
|
||||
<div class="layui-card-header">
|
||||
<span class="card-title">商品货架</span>
|
||||
</div>
|
||||
<div class="layui-card-body">
|
||||
{notempty name="$room_info['goods']"}
|
||||
{if $room_info['live_status'] == '102'}
|
||||
<div class="single-filter-box">
|
||||
<button class="layui-btn" onclick="importGoods()">从商品库导入商品</button>
|
||||
</div>
|
||||
{/if}
|
||||
<table class="layui-table" lay-skin="nob">
|
||||
<colgroup>
|
||||
<col width="10%">
|
||||
<col width="45">
|
||||
<col width="15">
|
||||
<col width="30">
|
||||
<col>
|
||||
</colgroup>
|
||||
<thead>
|
||||
<tr>
|
||||
<th>序号</th>
|
||||
<th>商品信息</th>
|
||||
<th>价格</th>
|
||||
<th>商品链接</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
{foreach name="$room_info['goods']" item="vo" index="k"}
|
||||
{php}
|
||||
preg_match("/(pages\/goods\/detail\?sku_id=)(\d*)$/", $vo['url'], $matches);
|
||||
{/php}
|
||||
{if isset($matches[2])}
|
||||
<tr data-sku="{$matches[2]}">
|
||||
{else/}
|
||||
<tr>
|
||||
{/if}
|
||||
<td>{$k}</td>
|
||||
<td>
|
||||
<div class="table-btn goods-info">
|
||||
<img src="{:img($vo.cover_img)}">
|
||||
<span class="room-name" title="{$vo.name}">{$vo.name}</span>
|
||||
</div>
|
||||
</td>
|
||||
<td>{:sprintf("%.2f", $vo.price)}</td>
|
||||
<td>{$vo.url}</td>
|
||||
</tr>
|
||||
{/foreach}
|
||||
</tbody>
|
||||
</table>
|
||||
{else/}
|
||||
{if $room_info['live_status'] == '102'}
|
||||
<div class="goods-empty">暂无商品<a href="javascript:;" class="text-color" onclick="importGoods()">从商品库中导入</a></div>
|
||||
{else/}
|
||||
<div class="goods-empty">暂无商品</div>
|
||||
{/if}
|
||||
{/notempty}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script type="text/javascript">
|
||||
layui.use(['form'], function() {
|
||||
|
||||
var anchor_upload = new Upload({
|
||||
elem: '#anchorImgUpload',
|
||||
callback:function (res) {
|
||||
if (res.code >= 0) {
|
||||
$.ajax({
|
||||
type: 'POST',
|
||||
dataType: 'JSON',
|
||||
url: ns.url("live://shop/room/operate"),
|
||||
data: {
|
||||
id: {$room_info.id},
|
||||
anchor_img: res.data.pic_path
|
||||
},
|
||||
success: function(res) {}
|
||||
});
|
||||
}
|
||||
},
|
||||
deleteCallback:function () {
|
||||
anchor_upload.delete();
|
||||
$.ajax({
|
||||
type: 'POST',
|
||||
dataType: 'JSON',
|
||||
url: ns.url("live://shop/room/operate"),
|
||||
data: {
|
||||
id: {$room_info.id},
|
||||
anchor_img: ''
|
||||
},
|
||||
success: function(res) {
|
||||
layer.msg(res.message);
|
||||
}
|
||||
});
|
||||
}
|
||||
});
|
||||
|
||||
var banner_upload = new Upload({
|
||||
elem: '#bannerUpload',
|
||||
callback:function (res) {
|
||||
if (res.code >= 0) {
|
||||
$.ajax({
|
||||
type: 'POST',
|
||||
dataType: 'JSON',
|
||||
url: ns.url("live://shop/room/operate"),
|
||||
data: {
|
||||
id: {$room_info.id},
|
||||
banner: res.data.pic_path
|
||||
},
|
||||
success: function(res) {}
|
||||
});
|
||||
}
|
||||
},
|
||||
deleteCallback:function () {
|
||||
banner_upload.delete();
|
||||
$.ajax({
|
||||
type: 'POST',
|
||||
dataType: 'JSON',
|
||||
url: ns.url("live://shop/room/operate"),
|
||||
data: {
|
||||
id: {$room_info.id},
|
||||
banner: ''
|
||||
},
|
||||
success: function(res) {
|
||||
layer.msg(res.message);
|
||||
}
|
||||
});
|
||||
}
|
||||
});
|
||||
|
||||
});
|
||||
|
||||
function importGoods() {
|
||||
var sku_id = [];
|
||||
if ($('[data-sku]').length) {
|
||||
$('[data-sku]').each(function (el) {
|
||||
sku_id.push($(this).attr('data-sku'));
|
||||
})
|
||||
}
|
||||
|
||||
layer.open({
|
||||
type: 2,
|
||||
title: '从商品库导入商品',
|
||||
content: ns.url("live://shop/room/getGoodsPageList", {request_mode: 'iframe', ids: sku_id.toString()}),
|
||||
area: ['600px', '550px'],
|
||||
btn: ['确定', '取消'],
|
||||
yes: function (index, layero) {
|
||||
form.render();
|
||||
var iframeWin = document.getElementById(layero.find('iframe')[0]['name']).contentWindow;//得到iframe页的窗口对象，执行iframe页的方法：
|
||||
iframeWin.liveSelectGoodsCallbackListener(function (data) {
|
||||
if (data.length == 0) {
|
||||
layer.msg('请选择要添加的商品', {icon: 5, shift: 6});
|
||||
return;
|
||||
}
|
||||
$.ajax({
|
||||
type: 'POST',
|
||||
url: ns.url("live://shop/room/addGoods"),
|
||||
data: {
|
||||
room_id: {$room_info.roomid},
|
||||
data: JSON.stringify(data)
|
||||
},
|
||||
dataType: 'JSON',
|
||||
success: function (res) {
|
||||
layer.msg(res.msg);
|
||||
if (res.code == 0) {
|
||||
layer.closeAll();
|
||||
listenerHash(); // 刷新页面
|
||||
}
|
||||
}
|
||||
});
|
||||
})
|
||||
}
|
||||
})
|
||||
}
|
||||
</script>
|
||||
Reference in New Issue
Block a user