250 lines
10 KiB
HTML
250 lines
10 KiB
HTML
{include file="Public/header3" /}
|
||
<div class="layui-form" style="width: 90%; margin: 0 auto; padding-top: 20px;">
|
||
<div class="layui-form-item">
|
||
<label class="layui-form-label">状态</label>
|
||
<div class="layui-input-block">
|
||
<input type="radio" name="status" value="0" title="关闭" checked>
|
||
<input type="radio" name="status" value="1" title="开启">
|
||
</div>
|
||
</div>
|
||
|
||
<div class="layui-form-item">
|
||
<label class="layui-form-label">标题</label>
|
||
<div class="layui-input-block">
|
||
<input type="text" name="title" id="title" autocomplete="off" placeholder="请输入标题" class="layui-input">
|
||
</div>
|
||
</div>
|
||
|
||
<div class="layui-form-item">
|
||
<div class="layui-inline">
|
||
<label class="layui-form-label">X坐标</label>
|
||
<div class="layui-input-inline">
|
||
<input type="text" name="position_x" id="position_x" autocomplete="off" placeholder="请输入X坐标，如：15% 或 15rpx" class="layui-input">
|
||
</div>
|
||
</div>
|
||
<div class="layui-inline">
|
||
<label class="layui-form-label">Y坐标</label>
|
||
<div class="layui-input-inline">
|
||
<input type="text" name="position_y" id="position_y" autocomplete="off" placeholder="请输入Y坐标，如：15% 或 15rpx" class="layui-input">
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="layui-form-item">
|
||
<div class="layui-inline">
|
||
<label class="layui-form-label">宽度</label>
|
||
<div class="layui-input-inline">
|
||
<input type="text" name="width" id="width" autocomplete="off" placeholder="请输入宽度，如：100rpx" class="layui-input">
|
||
</div>
|
||
</div>
|
||
<div class="layui-inline">
|
||
<label class="layui-form-label">高度</label>
|
||
<div class="layui-input-inline">
|
||
<input type="text" name="height" id="height" autocomplete="off" placeholder="请输入高度，如：100rpx" class="layui-input">
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="layui-form-item">
|
||
<label class="layui-form-label">类型</label>
|
||
<div class="layui-input-block">
|
||
<input type="radio" name="type" value="1" title="展示图片" checked lay-filter="typeFilter">
|
||
<input type="radio" name="type" value="2" title="跳转页面" lay-filter="typeFilter">
|
||
</div>
|
||
</div>
|
||
<div class="layui-form-item">
|
||
<label class="layui-form-label">图片</label>
|
||
<div class="layui-input-block">
|
||
<button type="button" class="layui-btn" id="uploadImage">上传图片</button>
|
||
<div class="layui-upload-list">
|
||
<img class="layui-upload-img" id="imagePreview" style="max-width: 120px; max-height: 80px;">
|
||
</div>
|
||
<input type="hidden" name="image" id="image" value="">
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 展示图片类型专属字段 -->
|
||
<div id="showImageFields">
|
||
<div class="layui-form-item" id="imageDetailsDiv">
|
||
<label class="layui-form-label">图片详情</label>
|
||
<div class="layui-input-block">
|
||
<button type="button" class="layui-btn" id="uploadImageDetails">上传图片详情</button>
|
||
<div class="layui-upload-list">
|
||
<img class="layui-upload-img" id="imageDetailsPreview" style="max-width: 120px; max-height: 80px;">
|
||
</div>
|
||
<input type="hidden" name="image_details" id="image_details" value="">
|
||
</div>
|
||
</div>
|
||
|
||
<div class="layui-form-item">
|
||
<label class="layui-form-label">背景图</label>
|
||
<div class="layui-input-block">
|
||
<button type="button" class="layui-btn" id="uploadImageBj">上传背景图</button>
|
||
<div class="layui-upload-list">
|
||
<img class="layui-upload-img" id="imageBjPreview" style="max-width: 120px; max-height: 80px;">
|
||
</div>
|
||
<input type="hidden" name="image_bj" id="image_bj" value="">
|
||
</div>
|
||
</div>
|
||
|
||
<div class="layui-form-item">
|
||
<div class="layui-inline">
|
||
<label class="layui-form-label">详情图X坐标</label>
|
||
<div class="layui-input-inline">
|
||
<input type="text" name="image_details_x" id="image_details_x" autocomplete="off" placeholder="请输入详情图X坐标" class="layui-input">
|
||
</div>
|
||
</div>
|
||
<div class="layui-inline">
|
||
<label class="layui-form-label">详情图Y坐标</label>
|
||
<div class="layui-input-inline">
|
||
<input type="text" name="image_details_y" id="image_details_y" autocomplete="off" placeholder="请输入详情图Y坐标" class="layui-input">
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="layui-form-item">
|
||
<div class="layui-inline">
|
||
<label class="layui-form-label">详情图宽度</label>
|
||
<div class="layui-input-inline">
|
||
<input type="text" name="image_details_w" id="image_details_w" autocomplete="off" placeholder="请输入详情图宽度" class="layui-input">
|
||
</div>
|
||
</div>
|
||
<div class="layui-inline">
|
||
<label class="layui-form-label">详情图高度</label>
|
||
<div class="layui-input-inline">
|
||
<input type="text" name="image_details_h" id="image_details_h" autocomplete="off" placeholder="请输入详情图高度" class="layui-input">
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="layui-form-item" id="linkUrlDiv">
|
||
<label class="layui-form-label">跳转链接</label>
|
||
<div class="layui-input-block">
|
||
<input type="text" name="link_url" id="link_url" autocomplete="off" placeholder="请输入跳转链接" class="layui-input">
|
||
</div>
|
||
</div>
|
||
|
||
<div class="layui-form-item">
|
||
<label class="layui-form-label">特效</label>
|
||
<div class="layui-input-block">
|
||
<select name="effect">
|
||
<option value="0">无</option>
|
||
<option value="1">特效1（放大，缩小）</option>
|
||
</select>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="layui-form-item">
|
||
<div class="layui-input-block">
|
||
<button class="layui-btn" lay-submit lay-filter="saveBtn">保存</button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
{include file="Public/footer3" /}
|
||
<script>
|
||
layui.use(['form', 'upload', 'layer'], function () {
|
||
var form = layui.form,
|
||
layer = layui.layer,
|
||
upload = layui.upload,
|
||
$ = layui.jquery;
|
||
|
||
// 初始隐藏跳转链接和展示图片相关字段
|
||
$('#linkUrlDiv').hide();
|
||
$('#showImageFields').hide();
|
||
|
||
// 监听类型切换
|
||
form.on('radio(typeFilter)', function(data){
|
||
if(data.value == 1) {
|
||
$('#linkUrlDiv').hide();
|
||
$('#showImageFields').show();
|
||
} else {
|
||
$('#linkUrlDiv').show();
|
||
$('#showImageFields').hide();
|
||
}
|
||
});
|
||
|
||
// 上传图片
|
||
upload.render({
|
||
accept: 'imgurl',
|
||
elem: '#uploadImage',
|
||
url: '/admin/picture',
|
||
done: function (res) {
|
||
if (res.status == 1) {
|
||
layer.msg("上传成功", { icon: 1, time: 1000 }, function () {
|
||
$("#imagePreview").attr("src", res.data.path);
|
||
$("input[name=image]").val(res.data.imgurl);
|
||
});
|
||
} else {
|
||
layer.msg(res.msg, { icon: 2, anim: 6, time: 1500 });
|
||
}
|
||
},
|
||
error: function () {
|
||
layer.msg('服务繁忙，请稍后再试', { icon: 2, anim: 6, time: 1500 });
|
||
}
|
||
});
|
||
|
||
// 上传图片详情
|
||
upload.render({
|
||
accept: 'imgurl',
|
||
elem: '#uploadImageDetails',
|
||
url: '/admin/picture',
|
||
done: function (res) {
|
||
if (res.status == 1) {
|
||
layer.msg("上传成功", { icon: 1, time: 1000 }, function () {
|
||
$("#imageDetailsPreview").attr("src", res.data.path);
|
||
$("input[name=image_details]").val(res.data.imgurl);
|
||
});
|
||
} else {
|
||
layer.msg(res.msg, { icon: 2, anim: 6, time: 1500 });
|
||
}
|
||
},
|
||
error: function () {
|
||
layer.msg('服务繁忙，请稍后再试', { icon: 2, anim: 6, time: 1500 });
|
||
}
|
||
});
|
||
|
||
// 上传背景图
|
||
upload.render({
|
||
accept: 'imgurl',
|
||
elem: '#uploadImageBj',
|
||
url: '/admin/picture',
|
||
done: function (res) {
|
||
if (res.status == 1) {
|
||
layer.msg("上传成功", { icon: 1, time: 1000 }, function () {
|
||
$("#imageBjPreview").attr("src", res.data.path);
|
||
$("input[name=image_bj]").val(res.data.imgurl);
|
||
});
|
||
} else {
|
||
layer.msg(res.msg, { icon: 2, anim: 6, time: 1500 });
|
||
}
|
||
},
|
||
error: function () {
|
||
layer.msg('服务繁忙，请稍后再试', { icon: 2, anim: 6, time: 1500 });
|
||
}
|
||
});
|
||
|
||
// 表单提交
|
||
form.on('submit(saveBtn)', function (data) {
|
||
$.ajax({
|
||
url: '{:url("/admin/float_ball_add")}',
|
||
type: 'POST',
|
||
data: data.field,
|
||
success: function (res) {
|
||
if (res.status) {
|
||
layer.msg(res.msg, {icon: 1, time: 1000}, function () {
|
||
parent.layui.table.reload('tableList');
|
||
var iframeIndex = parent.layer.getFrameIndex(window.name);
|
||
parent.layer.close(iframeIndex);
|
||
});
|
||
} else {
|
||
layer.msg(res.msg, {icon: 2});
|
||
}
|
||
}
|
||
});
|
||
return false;
|
||
});
|
||
});
|
||
</script>
|
||
|