文件

227 行
8.4 KiB
HTML
可执行文件

<!doctype html>
<html>
<!--[1.1.96]-->
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<link rel="stylesheet" type="text/css" href="__PUBLIC__/layui/css/layui.css"/>
<title>收银机模板</title>
<style>
.label_radio {
height: 18px;
align-items: center;
font-size: 14px;
position: relative;
cursor: pointer;
line-height: 19px;
color: #313131;
}
.label_radio > input {
width: 16px;
height: 16px;
opacity: 0;
margin-right: 4px;
}
.label_radio > span {
width: 20px;
height: 20px;
border-radius: 50%;
border: 2px solid #ccc;
position: absolute;
top: 0;
left: 0;
cursor: pointer;
box-sizing: border-box;
}
.label_radio > input:checked + span:after {
background-color: #009688 !important;
}
.label_radio > input:checked + span {
border-color: #009688 !important;
}
.label_radio > span::after {
position: absolute;
content: "";
width: 8px;
height: 8px;
border-radius: 50%;
background-color: #ddd;
top: 4px;
left: 4px;
transition: .5s;
}
.model_con {
width: 45%;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
margin: 2.5%;
}
.model_img {
width: 100%;
margin-bottom: 20px;
}
.list {
display: flex;
}
.see_img {
display: block;
width: 100%;
}
.save {
width: 100px;
height: 36px;
color: white;
background-color: #009688;
margin: 20px auto;
text-align: center;
line-height: 36px;
font-size: 16px;
cursor: pointer;
}
.save:hover {
background-color: #409688;
}
.layui-carousel{
margin-bottom: 20px;
}
</style>
</head>
<body>
<input type="hidden" id="id" value="{$id}">
<div class="list">
<div class="model_con">
<div class="layui-carousel" id="test1">
<div carousel-item>
<a class="see_img" target="_blank" href="__PUBLIC__/Retail/images/model/model1-01.png">
<img class="model_img" src="__PUBLIC__/Retail/images/model/model1-01.png">
</a>
<a class="see_img" target="_blank" href="__PUBLIC__/Retail/images/model/model1-02.png">
<img class="model_img" src="__PUBLIC__/Retail/images/model/model1-02.png">
</a>
<a class="see_img" target="_blank" href="__PUBLIC__/Retail/images/model/model1-03.png">
<img class="model_img" src="__PUBLIC__/Retail/images/model/model1-03.png">
</a>
<a class="see_img" target="_blank" href="__PUBLIC__/Retail/images/model/model1-04.png">
<img class="model_img" src="__PUBLIC__/Retail/images/model/model1-04.png">
</a>
<a class="see_img" target="_blank" href="__PUBLIC__/Retail/images/model/model1-05.png">
<img class="model_img" src="__PUBLIC__/Retail/images/model/model1-05.png">
</a>
<a class="see_img" target="_blank" href="__PUBLIC__/Retail/images/model/model1-06.png">
<img class="model_img" src="__PUBLIC__/Retail/images/model/model1-06.png">
</a>
<a class="see_img" target="_blank" href="__PUBLIC__/Retail/images/model/model1-07.png">
<img class="model_img" src="__PUBLIC__/Retail/images/model/model1-07.png">
</a>
</div>
</div>
<label class="label_radio" for="model1">
<input id='model1' type="radio" name="status"
<if condition="$status eq 1">checked</if>
value="1">模板一(默认)
<span></span>
</label>
</div>
<div class="model_con">
<div class="layui-carousel" id="test2">
<div carousel-item>
<a class="see_img" target="_blank" href="__PUBLIC__/Retail/images/model/model2-01.png">
<img class="model_img" src="__PUBLIC__/Retail/images/model/model2-01.png">
</a>
<a class="see_img" target="_blank" href="__PUBLIC__/Retail/images/model/model2-02.png">
<img class="model_img" src="__PUBLIC__/Retail/images/model/model2-02.png">
</a>
<a class="see_img" target="_blank" href="__PUBLIC__/Retail/images/model/model2-03.png">
<img class="model_img" src="__PUBLIC__/Retail/images/model/model2-03.png">
</a>
<a class="see_img" target="_blank" href="__PUBLIC__/Retail/images/model/model2-04.png">
<img class="model_img" src="__PUBLIC__/Retail/images/model/model2-04.png">
</a>
<a class="see_img" target="_blank" href="__PUBLIC__/Retail/images/model/model2-05.png">
<img class="model_img" src="__PUBLIC__/Retail/images/model/model2-05.png">
</a>
<a class="see_img" target="_blank" href="__PUBLIC__/Retail/images/model/model2-06.png">
<img class="model_img" src="__PUBLIC__/Retail/images/model/model2-06.png">
</a>
<a class="see_img" target="_blank" href="__PUBLIC__/Retail/images/model/model2-07.png">
<img class="model_img" src="__PUBLIC__/Retail/images/model/model2-07.png">
</a>
</div>
</div>
<label class="label_radio" for="model2">
<input id='model2' type="radio" name="status"
<if condition="$status eq 2">checked</if>
value="2">模板二(商超版)
<span></span>
</label>
</div>
</div>
<div class="save">保存</div>
</body>
<script type="text/javascript" src="__PUBLIC__/jquery/js/jquery-3.2.1.min.js"></script>
<script type="text/javascript" src="__PUBLIC__/layui/layui.js"></script>
<script>
function useImg() {
layui.use(['carousel', 'layer'], function () {
var carousel = layui.carousel;
//建造实例
var width = $('.model_con').width();
var heigth = 0.5625*width;
console.log(width)
carousel.render({
elem: '#test1',
width: '100%',
height: heigth
});
carousel.render({
elem: '#test2',
width: '100%',
height: heigth
});
})
}
useImg();
$(window).resize(function() {
useImg();
});
layui.use(['layer'], function () {
$('.save').click(function () {
if (!$("input[name='status']:checked").val()) {
layer.msg('请选择模板', {time: 1000});
return;
}
var tips = "<php>if(I('get.type')==1){</php>确认统一设置所有收银员模板吗?<php>}else{</php>确认为该收银员设置模板吗<php>}</php>";
layer.confirm(tips, function () {
$.post("{:U('setModel')}", {
type: "{$type}",
id: $('#id').val(),
status: $("input[name='status']:checked").val()
}, function (res) {
layer.msg(res.msg, {time: 1000},function () {
var index = parent.layer.getFrameIndex(window.name); //先得到当前iframe层的索引
parent.layer.close(index); //再执行关闭
});
})
})
})
})
</script>
</html>