305 lines
12 KiB
HTML
Executable File
305 lines
12 KiB
HTML
Executable File
{layout name="layout2" /}
|
||
<style>
|
||
.layui-form {padding: 20px 30px;background-color: #ffffff;}
|
||
.layui-form-item .layui-form-label { width: 95px; }
|
||
.layui-form-item .layui-input-inline { width: 240px; }
|
||
.layui-form-item .map-container{ width: 600px; height: 400px; margin-left: 100px; margin-top: 20px; }
|
||
#video-block {position: relative; width: 700px;height: 300px}
|
||
.del-video-btn {
|
||
visibility: hidden;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
position: absolute;
|
||
z-index: 100;
|
||
top: -11px;
|
||
right: -9px;
|
||
width: 20px;
|
||
height: 20px;
|
||
cursor: pointer;
|
||
font-size: 14px;
|
||
color: #FFFFFF;
|
||
border-radius: 50%;
|
||
background: hsla(0, 0%, 60%, .6)
|
||
}
|
||
.select-goods {margin-left: 10px}
|
||
</style>
|
||
|
||
<div class="layui-card layui-form">
|
||
<div class="layui-card-body">
|
||
<div class="layui-form-item">
|
||
<label for="title" class="layui-form-label">标题：</label>
|
||
<div class="layui-input-inline">
|
||
<input type="text" name="title" id="title" autocomplete="off" class="layui-input">
|
||
</div>
|
||
</div>
|
||
|
||
<div class="layui-form-item">
|
||
<label for="desc" class="layui-form-label">文章概述：</label>
|
||
<div class="layui-input-inline">
|
||
<input type="text" name="desc" id="desc" autocomplete="off" class="layui-input">
|
||
</div>
|
||
</div>
|
||
|
||
<div class="layui-form-item">
|
||
<label class="layui-form-label">文章类型：</label>
|
||
<div class="layui-input-inline">
|
||
<input type="radio" lay-filter="type" name="type" value="0" title="文章" checked>
|
||
<input type="radio" lay-filter="type" name="type" value="1" title="视频">
|
||
</div>
|
||
</div>
|
||
|
||
<div class="layui-form-item" id="mall_type">
|
||
<label class="layui-form-label">快讯类型：</label>
|
||
<div class="layui-input-inline">
|
||
<input type="radio" lay-filter="mall_type" name="mall_type" value="0" title="单个商品" checked>
|
||
<input type="radio" lay-filter="mall_type" name="mall_type" value="1" title="组类商品">
|
||
</div>
|
||
</div>
|
||
|
||
<div id="mall-image" class="layui-form-item">
|
||
<label class="layui-form-label">图片：</label>
|
||
<div class="layui-input-block">
|
||
<div class="like-upload-image">
|
||
<div class="upload-image-elem"><a class="add-upload-image" id="mallNewImage"> + 添加图片</a></div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div id="mall-video" class="layui-form-item" style="display: none">
|
||
<label class="layui-form-label">视频：</label>
|
||
<div id="upload-video-block" class="layui-input-block">
|
||
<div class="like-upload-image">
|
||
<div class="upload-image-elem"><a class="add-upload-video"> + 上传视频</a></div>
|
||
</div>
|
||
</div>
|
||
<div id="video-block" style="display: none">
|
||
<div class="del-video-btn" style="visibility: inherit">x</div>
|
||
<video id="mallVideo" controls></video>
|
||
<input type="hidden" name="video_file" >
|
||
</div>
|
||
|
||
<div class="layui-form-item">
|
||
<label class="layui-form-label"></label>
|
||
<span style="color: #a3a3a3;font-size: 9px">视频上传格式为mp4，上传文件大小限制为：{$max_upload_size}</span>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="layui-form-item" id="one-shop">
|
||
<label class="layui-form-label">商品：</label>
|
||
<div class="layui-input-inline" style="display: flex">
|
||
<div id="shop_name"></div>
|
||
<input type="hidden" id="shop_id" name="shop_id">
|
||
<a class="layui-btn layui-btn-normal select-goods">选择商品</a>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="layui-form-item">
|
||
<label class="layui-form-label">是否置顶：</label>
|
||
<div class="layui-input-inline">
|
||
<input type="radio" name="is_top" value="0" title="否" checked>
|
||
<input type="radio" name="is_top" value="1" title="是">
|
||
</div>
|
||
</div>
|
||
|
||
<div class="layui-form-item">
|
||
<label for="sort" class="layui-form-label">排序：</label>
|
||
<div class="layui-input-inline">
|
||
<input type="text" name="sort" id="sort" autocomplete="off" class="layui-input">
|
||
</div>
|
||
</div>
|
||
|
||
<div class="layui-form-item" id="article-content">
|
||
<label for="content" class="layui-form-label">文章详情：</label>
|
||
<div class="layui-input-block">
|
||
<textarea name="content" id="content" lay-verify="content"></textarea>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="layui-form-item layui-hide">
|
||
<input type="button" lay-submit lay-filter="addSubmit" id="addSubmit" value="确认">
|
||
</div>
|
||
</div>
|
||
|
||
|
||
<script src="__PUBLIC__/static/common/js/area.js"></script>
|
||
<script>
|
||
layui.config({
|
||
base: "/static/lib/"
|
||
}).extend({
|
||
likeedit: "likeedit/likeedit",
|
||
likeArea: "likeArea/likeArea",
|
||
txMap: "likeMap/txMap"
|
||
}).use(["form", "laydate", "likeArea", "txMap", 'likeedit', 'upload', 'element'], function(){
|
||
var $ = layui.$;
|
||
var form = layui.form;
|
||
var laydate = layui.laydate;
|
||
var likeedit = layui.likeedit;
|
||
var likeupload = layui.upload;
|
||
|
||
//------------------------------------------富文本编辑器 begin --------------------------------
|
||
var content = likeedit.build("content", {
|
||
uploadImage: {
|
||
url: '{:url("file/lists")}?type=10'
|
||
}
|
||
});
|
||
|
||
form.verify({
|
||
content: function() {
|
||
likeedit.sync(content)
|
||
}
|
||
});
|
||
//------------------------------------------富文本编辑器 end --------------------------------
|
||
|
||
|
||
form.on('radio(type)', function(data){
|
||
var val = $('input[name="mall_type"]:checked').val()
|
||
|
||
if(data.value == 0){
|
||
if (val == 1) {
|
||
$("#mall-image").hide()
|
||
} else {
|
||
$("#mall-image").show()
|
||
}
|
||
|
||
$("#mall_type").show()
|
||
$("#mall-video").hide()
|
||
} else {
|
||
$("#mall-image").hide()
|
||
$("#mall_type").hide()
|
||
$("#one-shop").show()
|
||
$("#mall-video").show()
|
||
}
|
||
});
|
||
|
||
form.on('radio(mall_type)', function(data){
|
||
if(data.value == 0){
|
||
$("#mall-image").show()
|
||
$("#mall-video").hide()
|
||
$("#article-content").show()
|
||
} else {
|
||
console.log(456)
|
||
$("#mall-image").hide()
|
||
$("#mall-video").hide()
|
||
$("#article-content").hide()
|
||
}
|
||
});
|
||
|
||
laydate.render({type:"datetime", elem:"#expire_time", trigger:"click",min:0});
|
||
|
||
like.delUpload();
|
||
$(document).on("click", "#mallNewImage", function () {
|
||
like.imageUpload({
|
||
limit: {$max_upload_file},
|
||
field: "mall_news_images[]",
|
||
that: $(this)
|
||
});
|
||
});
|
||
|
||
// 视频上传
|
||
likeupload
|
||
var uploadInst = likeupload.render({
|
||
elem: '.add-upload-video' //绑定元素
|
||
,url: "{:url('MallNews/uploadVideo')}" //上传接口
|
||
,accept: 'video'
|
||
,exts: "mp4"
|
||
,before: function(obj){ //obj参数包含的信息，跟 choose回调完全一致，可参见上文。
|
||
console.log(222)
|
||
layer.load(); //上传loading
|
||
}
|
||
,done: function(res, index, upload){
|
||
if (res.code === 1) {
|
||
$("#upload-video-block").hide()
|
||
$("#video-block").show()
|
||
$("#mallVideo").attr('src', res.data.file)
|
||
$("#mall_news_images").val(res.data.file)
|
||
$("input[name='video_file']").val(res.data.file)
|
||
} else {
|
||
layer.msg('上传错误');
|
||
return false;
|
||
}
|
||
layer.closeAll('loading'); //关闭loading
|
||
}
|
||
,error: function(index, upload){
|
||
layer.closeAll('loading'); //关闭loading
|
||
}
|
||
});
|
||
|
||
// 删除视频
|
||
$(document).on("click", ".del-video-btn", function (e) {
|
||
layer.confirm("是否删除该视频？", function(index) {
|
||
const videoFile = $("#mallVideo").attr('src')
|
||
like.ajax({
|
||
url: '{:url("mallNews/delVideo")}',
|
||
data: {videoFile},
|
||
type: "post",
|
||
success: function (res) {}
|
||
});
|
||
|
||
$("#upload-video-block").show()
|
||
$("#video-block").hide()
|
||
$("#mallVideo").attr('src', '')
|
||
layer.close(index);
|
||
})
|
||
});
|
||
|
||
// 选择商品
|
||
$(document).on('click','.select-goods',function () {
|
||
var val = $('input[name="mall_type"]:checked').val()
|
||
if (val == 0) {
|
||
layer.open({
|
||
type: 2
|
||
,title: '选择商品'
|
||
,content: '{:url("mallNews/goods")}'
|
||
,area: ['90%', '90%']
|
||
,btn: ['确认', '取消']
|
||
,yes: function(index, layero){
|
||
var data = window["layui-layer-iframe" + index].callbackdata();
|
||
$('#shop_name').html(data[0].name)
|
||
$('#shop_id').val(data[0].id)
|
||
}
|
||
})
|
||
} else if (val == 1) {
|
||
layer.open({
|
||
type: 2
|
||
,title: '选择商品'
|
||
,content: '{:url("mallNews/mall_news_goods")}'
|
||
,area: ['90%', '90%']
|
||
,btn: ['确认', '取消']
|
||
,yes: function(index, layero){
|
||
var data = window["layui-layer-iframe" + index].callbackdata();
|
||
var html = $('#shop_name').html()
|
||
html += '<br/> ' + data[0].name
|
||
$('#shop_name').html(html)
|
||
|
||
var val = $('#shop_id').val()
|
||
val += ',' + data[0].id
|
||
$('#shop_id').val(val)
|
||
}
|
||
})
|
||
}
|
||
})
|
||
|
||
form.verify({
|
||
title: function (value, item) {
|
||
if (!value) {
|
||
switchTab($(item).attr("switch-tab"));
|
||
return "请填写标题";
|
||
}
|
||
},
|
||
desc: function (value, item) {
|
||
if (!value) {
|
||
switchTab($(item).attr("switch-tab"));
|
||
return "请填写文章概述";
|
||
}
|
||
},
|
||
});
|
||
|
||
function switchTab(number) {
|
||
$('.layui-tab-card .layui-tab-title li').removeClass('layui-this');
|
||
$('.layui-tab-content .layui-tab-item').removeClass('layui-show');
|
||
$('.layui-tab-card .layui-tab-title li').eq(number).addClass('layui-this');
|
||
$('.layui-tab-content .layui-tab-item').eq(number).addClass('layui-show');
|
||
}
|
||
})
|
||
</script> |