314 行
11 KiB
HTML
可执行文件
314 行
11 KiB
HTML
可执行文件
<!--[1.5.22]-->
|
||
<style>
|
||
table {
|
||
border: 1px solid #f1f1f1;
|
||
margin-top: 40px;
|
||
}
|
||
|
||
.layui-table-cell {
|
||
height: auto;
|
||
}
|
||
|
||
#exchange {
|
||
margin: 0 0 0 20px;
|
||
}
|
||
|
||
.magic_img {
|
||
margin: 0;
|
||
padding: 0;
|
||
width: 100%;
|
||
display: flex;
|
||
flex-direction: column;
|
||
}
|
||
|
||
.magic_img_big_img {
|
||
width: 100%;
|
||
max-width: 100% !important;
|
||
border-radius: 8px;
|
||
border: 1px dashed #ccc;
|
||
height: 120px;
|
||
}
|
||
|
||
.magic_img_small {
|
||
width: 100%;
|
||
height: 70px;
|
||
margin-top: 5px;
|
||
display: flex;
|
||
justify-content: space-between;
|
||
}
|
||
|
||
.magic_img_small_img {
|
||
width: 67px;
|
||
height: 67px;
|
||
border-radius: 8px;
|
||
border: 1px dashed #ccc;
|
||
}
|
||
|
||
.center {
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
}
|
||
|
||
.layui-unselect {
|
||
width: 56px;
|
||
height: 24px;
|
||
line-height: 24px;
|
||
}
|
||
</style>
|
||
<div class="goodsBox">
|
||
<div>
|
||
<div> 智慧魔方须知>></div>
|
||
<div>1.开启魔方并且已添加魔方记录，在微信小程序首页则可以看到魔方设置的活动</div>
|
||
</div>
|
||
|
||
<div class="goods_edit">
|
||
<form class="layui-form">
|
||
<div class="layui-form-item" style="display: flex;align-items: center;margin-bottom: 0">
|
||
<span class="open_text" style="margin-right: 10px;color: #009688;">是否开启魔方</span>
|
||
<div class="layui-input-block" style="margin-left: 10px">
|
||
<input type="checkbox"
|
||
<if condition="$status">checked</if>
|
||
<if condition="$authArr['changeMagic'] neq true">disabled</if>
|
||
name="open" lay-skin="switch" date-value='{$status}' value='{$status}' lay-text="开启|关闭">
|
||
</div>
|
||
<if condition="$authArr['add_magic'] eq true">
|
||
<button style="margin-left: 30px" type="button" class="layui-btn" id="add">添加魔方</button>
|
||
</if>
|
||
</div>
|
||
</form>
|
||
</div>
|
||
<table class="layui-hide" id="" lay-filter="demo"></table>
|
||
<script type="text/html" id="switchTpl">
|
||
<input type="checkbox" name="status"
|
||
<if condition="$authArr['doChangeStatus'] neq true"> disabled
|
||
</if> date-value="{{d.status}}" data-id="{{d.id}}" value="{{d.status}}"
|
||
lay-skin="switch" lay-text="启用|禁用" lay-filter="sexDemo" {{ d.status== 1 ? 'checked' : '' }}>
|
||
</script>
|
||
<script type="text/html" id="magicImg">
|
||
<div class="magic_img">
|
||
<img class="magic_img_big_img" src="{{ d.child_img}}">
|
||
{{# if(d.magic_type==1){ }}
|
||
<div class="magic_img_small">
|
||
<img class="magic_img_small_img" src="{{ d.child_img_1}}">
|
||
<img class="magic_img_small_img" src="{{ d.child_img_2}}">
|
||
<img class="magic_img_small_img" src="{{ d.child_img_3}}">
|
||
</div>
|
||
{{# } }}
|
||
</div>
|
||
</script>
|
||
<script type="text/html" id="magicType">
|
||
<div class="magic_img">
|
||
<div class="magic_img_big_img center">{{ d.mc_id}}</div>
|
||
{{# if(d.magic_type==1){ }}
|
||
<div class="magic_img_small">
|
||
<div class="magic_img_small_img center">{{ d.mc_id_1}}</div>
|
||
<div class="magic_img_small_img center">{{ d.mc_id_2}}</div>
|
||
<div class="magic_img_small_img center">{{ d.mc_id_3}}</div>
|
||
</div>
|
||
{{# } }}
|
||
</div>
|
||
</script>
|
||
<table class="layui-hide" id="test" lay-filter="demo"></table>
|
||
<script type="text/html" id="barDemo">
|
||
<if condition="$authArr['add_magic'] eq true">
|
||
<button class="layui-btn layui-btn-xs layui-btn-normal" lay-event="edit">编辑</button>
|
||
</if>
|
||
<if condition="$authArr['delMagic'] eq true">
|
||
<button class="layui-btn layui-btn-xs layui-btn-danger" lay-event="del">删除</button>
|
||
</if>
|
||
</script>
|
||
</div>
|
||
<script>
|
||
layui.use(['form', 'layedit', 'laydate', 'table'], function () {
|
||
// 日期
|
||
var laydate = layui.laydate, form = layui.form;
|
||
var table = layui.table;
|
||
form.render();
|
||
|
||
|
||
var giftid = $("#giftid").val();
|
||
//展示已知数据
|
||
table.render({
|
||
elem: '#test',
|
||
url: "{:U('getMagicCube')}",
|
||
method: 'post',
|
||
cols: [
|
||
[{
|
||
field: 'id',
|
||
title: '序号',
|
||
width: 60
|
||
}, {
|
||
field: 'title',
|
||
title: '标题',
|
||
align: 'center'
|
||
}, {
|
||
field: 'img_one_url',
|
||
title: '图片',
|
||
style: 'height:100%;',
|
||
align: 'center',
|
||
templet: "#magicImg",
|
||
width: 240
|
||
}, {
|
||
field: 'mc_id',
|
||
title: '模块类型',
|
||
templet: "#magicType",
|
||
align: 'center',
|
||
width: 240
|
||
}, {
|
||
field: 'addtime',
|
||
title: '添加时间',
|
||
align: 'center'
|
||
}, {
|
||
field: 'status',
|
||
title: '状态',
|
||
templet: '#switchTpl',
|
||
align: 'center'
|
||
}, {
|
||
field: 'right',
|
||
title: '操作',
|
||
align: 'center',
|
||
toolbar: '#barDemo'
|
||
}]
|
||
],
|
||
page: {
|
||
layout: ['count', 'prev', 'page', 'next', 'skip'] //自定义分页布局
|
||
}, //是否开启分页
|
||
id: 'testReload'
|
||
});
|
||
$("input[name='open']").next().click(function () {
|
||
var status = 1;
|
||
if ($(this).prev().val() == 0) {
|
||
status = 1;
|
||
} else {
|
||
status = 0;
|
||
}
|
||
var that = this;
|
||
layer.confirm("确认" + (status == 1 ? "开启" : "关闭") + "魔方吗？", {
|
||
btn: ['确认', '取消'], btn2: function () {
|
||
if ($(that).hasClass("layui-form-onswitch")) {
|
||
$(that).removeClass("layui-form-onswitch");
|
||
$(that).find('em').html('关闭');
|
||
} else {
|
||
$(that).addClass("layui-form-onswitch");
|
||
$(that).find('em').html('开启');
|
||
}
|
||
}
|
||
}, function () {
|
||
$.ajax({
|
||
url: "{:U('changeMagic')}",
|
||
type: "POST",
|
||
data: {
|
||
status: status
|
||
},
|
||
success: function (res) {
|
||
if (res.status == 1) {
|
||
layer.msg(res.msg, {time: 1000})
|
||
$(that).prev().val(status)
|
||
if ($(that).prev().val() == 0) {
|
||
$(that).removeClass("layui-form-onswitch");
|
||
$(that).find('em').html('关闭');
|
||
} else {
|
||
$(that).addClass("layui-form-onswitch");
|
||
$(that).find('em').html('开启');
|
||
}
|
||
} else {
|
||
layer.msg(res.msg)
|
||
if ($(that).prev().val() == 0) {
|
||
$(that).removeClass("layui-form-onswitch");
|
||
$(that).find('em').html('关闭');
|
||
} else {
|
||
$(that).addClass("layui-form-onswitch");
|
||
$(that).find('em').html('开启');
|
||
}
|
||
}
|
||
}
|
||
})
|
||
})
|
||
})
|
||
$('#Preservation').click(function () {
|
||
table.reload('test', {
|
||
page: {
|
||
curr: 1 //重新从第 1 页开始
|
||
}
|
||
, where: {
|
||
keyword: $('#keyword').val()
|
||
}
|
||
});
|
||
})
|
||
form.on('switch(sexDemo)', function (obj) {
|
||
var status = this.value;
|
||
var id = $(obj.elem).attr('data-id');
|
||
var that = this;
|
||
$.post("{:U('doChangeStatus')}", {
|
||
status: status == 1 ? 2 : 1,
|
||
id: id
|
||
}, function (res) {
|
||
console.log(res);
|
||
that.value = res.value;
|
||
// $(obj.elem).val(res.value);
|
||
if (res.value == 1) {
|
||
top.layer.msg(res.msg, {time: 1000});
|
||
$(obj.elem).parent().find('div').addClass('layui-form-onswitch');
|
||
$(obj.elem).parent().find('em').html('启用');
|
||
} else {
|
||
top.layer.msg(res.msg, {time: 1500});
|
||
$(obj.elem).parent().find('div').removeClass('layui-form-onswitch');
|
||
$(obj.elem).parent().find('em').html('禁用');
|
||
}
|
||
})
|
||
});
|
||
table.on('tool(demo)', function (obj) {
|
||
var data = obj.data;
|
||
var layEvent = obj.event;
|
||
var tr = obj.tr;
|
||
|
||
if (layEvent === 'del') { //删除
|
||
layer.confirm('确定删除这个魔方吗？', function (index) {
|
||
layer.close(index);
|
||
//向服务端发送删除指令
|
||
$.ajax({
|
||
url: "{:U('delMagic')}",
|
||
data: {id: data.id},
|
||
type: 'post',
|
||
success: function (res) {
|
||
if (res.status == 1) {
|
||
obj.del();
|
||
} else {
|
||
top.layer.msg(res.msg, {icon: 4, time: 1000})
|
||
}
|
||
}
|
||
})
|
||
});
|
||
} else if (layEvent === 'edit') {
|
||
layer.open({
|
||
type: 2,
|
||
content: "{:U(add_magic)}?id=" + data.id,
|
||
title: "编辑魔方",
|
||
area: ['calc(100% - 160px)', 'calc(100% - 65px)'],
|
||
offset: 'rb',
|
||
shade: 0,
|
||
btnAlign: 'c',
|
||
end: function () {
|
||
table.reload('testReload', {})
|
||
}
|
||
})
|
||
}
|
||
});
|
||
$('#add').click(function () {
|
||
layer.open({
|
||
type: 2,
|
||
content: "{:U(add_magic)}",
|
||
title: "添加魔方",
|
||
area: ['calc(100% - 160px)', 'calc(100% - 65px)'],
|
||
offset: 'rb',
|
||
shade: 0,
|
||
btnAlign: 'c',
|
||
end: function () {
|
||
table.reload('testReload', {})
|
||
}
|
||
})
|
||
})
|
||
})
|
||
</script>
|