585 行
23 KiB
HTML
可执行文件
585 行
23 KiB
HTML
可执行文件
<!doctype html>
|
||
<html>
|
||
<!--[1.0.46]-->
|
||
<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>
|
||
html, body {
|
||
background-color: rgb(246, 248, 249);
|
||
font-size: 0;
|
||
margin: 0;
|
||
padding: 0;
|
||
}
|
||
|
||
.file_label {
|
||
position: relative;
|
||
cursor: pointer;
|
||
font-weight: normal;
|
||
margin-right: 10px;
|
||
}
|
||
|
||
.file_label:before {
|
||
display: block;
|
||
content: '+';
|
||
font-size: 80px;
|
||
font-weight: 100;
|
||
color: #bbb;
|
||
border: 1px solid #bbb;
|
||
width: 100px;
|
||
height: 100px;
|
||
border-radius: 10px;
|
||
text-align: center;
|
||
line-height: 96px;
|
||
}
|
||
.box_file_label:before {
|
||
width: 320px;
|
||
height: 160px;
|
||
line-height: 156px;
|
||
}
|
||
|
||
.file_label > input {
|
||
width: 100px;
|
||
opacity: 0;
|
||
position: absolute;
|
||
top: 0;
|
||
left: 0;
|
||
}
|
||
|
||
.file_label > img {
|
||
position: absolute;
|
||
top: 0;
|
||
left: 0;
|
||
width: 100%;
|
||
height: 100%;
|
||
background-color: white;
|
||
border-radius: 10px;
|
||
border: 1px solid #ddd;
|
||
display: none;
|
||
}
|
||
|
||
.box {
|
||
border: 1px solid #eee;
|
||
border-radius: 5px;
|
||
background-color: white;
|
||
padding: 0 20px 20px;
|
||
}
|
||
|
||
.list {
|
||
display: flex;
|
||
flex-direction: row;
|
||
align-items: flex-start;
|
||
margin: 10px 0;
|
||
}
|
||
|
||
.title {
|
||
background-color: #f5f5f5;
|
||
color: black;
|
||
font-size: 18px;
|
||
border-bottom: 1px solid #e6e6e6;
|
||
line-height: 60px;
|
||
border-radius: 5px 5px 0 0;
|
||
text-indent: 15px;
|
||
}
|
||
|
||
.left_name {
|
||
width: 100px;
|
||
text-align: right;
|
||
font-size: 14px;
|
||
line-height: 56px;
|
||
color: #666;
|
||
margin-right: 20px;
|
||
}
|
||
|
||
.list>input {
|
||
margin: 10px 0;
|
||
width: 300px;
|
||
border: 1px solid #ccc;
|
||
padding: 10px;
|
||
border-radius: 5px;
|
||
outline: none;
|
||
font-size: 14px;
|
||
}
|
||
|
||
.list>select {
|
||
width: 322px;
|
||
margin: 10px 0;
|
||
padding: 10px;
|
||
border: 1px solid #ccc;
|
||
border-radius: 5px;
|
||
outline: none;
|
||
font-size: 14px;
|
||
color: #333;
|
||
}
|
||
|
||
.save {
|
||
font-size: 16px;
|
||
width: 50px;
|
||
background-color: #009688;
|
||
color: white;
|
||
text-align: center;
|
||
padding: 8px 10px;
|
||
border-radius: 5px;
|
||
margin: 50px 200px;
|
||
cursor: pointer;
|
||
}
|
||
|
||
.save:hover {
|
||
background-color: #099688;
|
||
}
|
||
.label_radio{
|
||
height: 18px;
|
||
align-items: center;
|
||
font-size: 14px;
|
||
position: relative;
|
||
cursor: pointer;
|
||
line-height: 19px;
|
||
color: #313131;
|
||
margin-right: 20px;
|
||
padding-top: 2px;
|
||
}
|
||
.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;
|
||
}
|
||
.small_img_box{
|
||
margin-bottom: 10px;
|
||
display: flex;
|
||
}
|
||
.small_img_box-right{
|
||
display: flex;
|
||
flex-direction: column;
|
||
}
|
||
.small_img_box-right>input{
|
||
margin-bottom: 5px;
|
||
width: 300px;
|
||
border: 1px solid #ccc;
|
||
padding: 10px;
|
||
border-radius: 5px;
|
||
outline: none;
|
||
font-size: 14px;
|
||
}
|
||
.small_img_box-right > input,.small_img_box-right>div>input,.searchInput {
|
||
margin-bottom: 5px;
|
||
width: 300px;
|
||
border: 1px solid #ccc;
|
||
padding: 10px;
|
||
border-radius: 5px;
|
||
outline: none;
|
||
font-size: 14px;
|
||
}
|
||
|
||
.small_img_box-right > select {
|
||
margin-bottom: 5px;
|
||
width: 322px;
|
||
padding: 10px;
|
||
border: 1px solid #ccc;
|
||
border-radius: 5px;
|
||
outline: none;
|
||
font-size: 14px;
|
||
color: #333;
|
||
}
|
||
|
||
.chooseGoods {
|
||
width: 70px;
|
||
height: 30px;
|
||
line-height: 30px;
|
||
background-color: #009688;
|
||
color: white;
|
||
border-radius: 5px;
|
||
font-size: 12px;
|
||
display: inline-block;
|
||
margin-left: 10px;
|
||
text-align: center;
|
||
cursor: pointer;
|
||
}
|
||
input:disabled{
|
||
background-color: transparent;
|
||
}
|
||
.layui-table-cell{
|
||
height: auto;
|
||
}
|
||
.hidden{
|
||
width: 0!important;
|
||
height: 0!important;
|
||
border: 0!important;
|
||
padding: 0!important;
|
||
margin: 0!important;
|
||
}
|
||
</style>
|
||
</head>
|
||
<body style="padding: 0 50px">
|
||
<form id="form">
|
||
<input type="hidden" name="id" value="{$magic['id']}">
|
||
<div class="box">
|
||
<img style="width: 320px;margin-left: 120px;margin-top: 20px;" src="__PUBLIC__/Retail/images/magic_model.png" alt="模板图">
|
||
<div class="list">
|
||
<div class="left_name">魔方标题：</div>
|
||
<input type="text" name="magic_title" placeholder="魔方名称" maxlength="16" value="{$magic['title']}">
|
||
</div>
|
||
<div class="list">
|
||
<sapn class="left_name">魔方主图：</sapn>
|
||
<label class="file_label box_file_label">
|
||
<input type="file" name="magic_icon" placeholder="选择图片" accept="image/png,image/jpeg" value=""/>
|
||
<img style="display: block;" src="{$magic['child_img']}">
|
||
</label>
|
||
<span style="font-size: 12px;color: #666;padding-top: 5px;">建议尺寸：326x161，或等比例图片</span>
|
||
</div>
|
||
<div class="list">
|
||
<div class="left_name">主图链接：</div>
|
||
<select name="type_url">
|
||
<option value="0">其他链接</option>
|
||
<volist name="classList" id="vo">
|
||
<option value="{$vo['id']}" data-type="{$vo['type']}" <if condition="$magic['mc_id'] eq $vo['id']">selected</if>>{$vo['name']}</option>
|
||
</volist>
|
||
</select>
|
||
</div>
|
||
<div class="list other_url" <if condition="$magic['url']"><else/>style="display: none;"</if>>
|
||
<div class="left_name">主图链接地址：</div>
|
||
<input type="text" name="other_url" value="{$magic['url']}" placeholder="其他网页链接地址">
|
||
<span style="font-size: 12px;color: #666;padding-top: 20px;">其他链接需要您到小程序后台添加域名白名单</span>
|
||
</div>
|
||
<div class="list link_id" <if condition="$magic['link_id']"><else/>style="display: none;"</if>>
|
||
<div class="left_name">主图商品：</div>
|
||
<input type="text" data-name-index="0" value="{$magic['goods_name']}" placeholder="选择商品">
|
||
<div class="chooseGoods chooseGoods0" data-index="0" style="margin-top: 14px;">选择商品</div>
|
||
<input class="hidden" type="text" data-id-index="0" name="link_id" value="{$magic['link_id']}">
|
||
</div>
|
||
<div class="list" style="align-items: center">
|
||
<div class="left_name">是否添加小图：</div>
|
||
<div>
|
||
<label class="label_radio">
|
||
<input type="radio" <if condition="$magic['magic_type'] eq 1">checked</if> name="magic_type" value="1">添加
|
||
<span></span>
|
||
</label>
|
||
<label class="label_radio">
|
||
<input type="radio" <if condition="$magic['magic_type'] eq 2">checked</if> name="magic_type" value="2">不添加
|
||
<span></span>
|
||
</label>
|
||
</div>
|
||
<span style="font-size: 12px;color: #666;">小图建议尺寸：117X124，或等比例图片</span>
|
||
</div>
|
||
<div class="list small_img" <if condition="$magic['magic_type'] eq 2">style='display:none;'</if>>
|
||
<sapn class="left_name">魔方小图：</sapn>
|
||
<div>
|
||
<div class="small_img_box">
|
||
<label class="file_label">
|
||
<input type="file" name="magic_icon1" placeholder="选择图片" accept="image/png,image/jpeg" value=""/>
|
||
<img <if condition="$magic['magic_type'] eq 1">style='display:block' src='{$magic['child_img_1']}'</if>>
|
||
</label>
|
||
<div class="small_img_box-right">
|
||
<select class="select" name="type_url1">
|
||
<option value="0">其他链接</option>
|
||
<volist name="classList" id="vo">
|
||
<option value="{$vo['id']}" data-type="{$vo['type']}" <if condition="$magic['mc_id_1'] eq $vo['id']">selected</if>>{$vo['name']}</option>
|
||
</volist>
|
||
</select>
|
||
<div <if condition="$magic['link_id_1']"><else/>style="display: none;"</if>>
|
||
<input class="link" data-name-index="1" type="text" disabled placeholder="选择商品" value="{$magic['goods_name_1']}">
|
||
<div class="chooseGoods chooseGoods1" data-index="1">选择商品</div>
|
||
<input class="hidden" type="text" data-id-index="1" name="link_id1" value="{$magic['link_id_1']}">
|
||
</div>
|
||
<input class="other" <if condition="$magic['url_1'] AND ($magic['magic_type'] eq 1)"><elseif condition="$magic['magic_type'] eq 1"/>style="display: none;"</if> type="text" name="other_url1" value="{$magic['url_1']}" placeholder="其他网页链接地址">
|
||
</div>
|
||
</div>
|
||
<div class="small_img_box">
|
||
<label class="file_label">
|
||
<input type="file" name="magic_icon2" placeholder="选择图片" accept="image/png,image/jpeg" value=""/>
|
||
<img <if condition="$magic['magic_type'] eq 1">style='display:block' src='{$magic['child_img_2']}'</if>>
|
||
</label>
|
||
<div class="small_img_box-right">
|
||
<select class="select" name="type_url2">
|
||
<option value="0">其他链接</option>
|
||
<volist name="classList" id="vo">
|
||
<option value="{$vo['id']}" data-type="{$vo['type']}" <if condition="$magic['mc_id_2'] eq $vo['id']">selected</if>>{$vo['name']}</option>
|
||
</volist>
|
||
</select>
|
||
<div <if condition="$magic['link_id_2']"><else/>style="display: none;"</if>>
|
||
<input class="link" data-name-index="2" type="text" disabled placeholder="选择商品" value="{$magic['goods_name_2']}">
|
||
<div class="chooseGoods chooseGoods2" data-index="2">选择商品</div>
|
||
<input class="hidden" type="text" data-id-index="2" name="link_id2" value="{$magic['link_id_2']}">
|
||
</div>
|
||
<input class="other"<if condition="$magic['url_2'] AND ($magic['magic_type'] eq 1)"><elseif condition="$magic['magic_type'] eq 1"/>style="display: none;"</if> type="text" name="other_url2" value="{$magic['url_2']}" placeholder="其他网页链接地址">
|
||
</div>
|
||
</div>
|
||
<div class="small_img_box">
|
||
<label class="file_label">
|
||
<input type="file" name="magic_icon3" placeholder="选择图片" accept="image/png,image/jpeg" value=""/>
|
||
<img <if condition="$magic['magic_type'] eq 1">style='display:block' src='{$magic['child_img_3']}'</if>>
|
||
</label>
|
||
<div class="small_img_box-right">
|
||
<select class="select" name="type_url3">
|
||
<option value="0">其他链接</option>
|
||
<volist name="classList" id="vo">
|
||
<option value="{$vo['id']}" data-type="{$vo['type']}" <if condition="$magic['mc_id_3'] eq $vo['id']">selected</if>>{$vo['name']}</option>
|
||
</volist>
|
||
</select>
|
||
<div <if condition="$magic['link_id_3']"><else/>style="display: none;"</if>>
|
||
<input class="link" data-name-index="3" type="text" disabled placeholder="选择商品" value="{$magic['goods_name_3']}">
|
||
<div class="chooseGoods chooseGoods3" data-index="3">选择商品</div>
|
||
<input class="hidden" type="text" data-id-index="3" name="link_id3" value="{$magic['link_id_3']}">
|
||
</div>
|
||
<input class="other"<if condition="$magic['url_3'] AND ($magic['magic_type'] eq 1)"><elseif condition="$magic['magic_type'] eq 1"/>style="display: none;"</if> type="text" name="other_url3" value="{$magic['url_3']}" placeholder="其他网页链接地址">
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="save">提交</div>
|
||
</div>
|
||
</form>
|
||
<div id="selectGoods" style="display: none;">
|
||
<div style="margin: 10px;display: flex;align-items: center;">
|
||
<input type="text" style="margin-top: 3px;margin-right: 10px" class="searchInput" value="" placeholder="商品名称/货号/编码">
|
||
<a class="layui-btn layui-btn-sm" id="search">搜索</a>
|
||
</div>
|
||
<table class="layui-hide" id="Goods" lay-filter="demo"></table>
|
||
<script type="text/html" id="barDemo">
|
||
<a class="layui-btn layui-btn-sm choose" lay-event="choose">选择</a>
|
||
</script>
|
||
</div>
|
||
</body>
|
||
<script src="__PUBLIC__/jquery/js/jquery-3.2.1.min.js"></script>
|
||
<script src="__PUBLIC__/layui/layui.js"></script>
|
||
<script src="__PUBLIC__/js/tips.js"></script>
|
||
<script type="text/javascript" src="__PUBLIC__/layui/layui.js"></script>
|
||
<script>
|
||
layui.use(['form', 'layedit', 'laydate', 'table'], function () {
|
||
var form = layui.form;
|
||
var layer = layui.layer;
|
||
var laydate = layui.laydate;
|
||
var table = layui.table;
|
||
|
||
$('.chooseGoods').click(function () {
|
||
var index = $(this).attr('data-index');
|
||
var goods = {};
|
||
if(index==0){
|
||
var title = '选择主图商品';
|
||
}else {
|
||
var title = '选择小图'+index+'的商品';
|
||
}
|
||
$('.searchInput').val('');
|
||
var layIndex = layer.open({
|
||
type: 1,
|
||
content: $('#selectGoods'),
|
||
title: `<strong>${title}</strong>`,
|
||
area: ["800px", "100%"],
|
||
btnAlign: 'c',
|
||
success: function () {
|
||
table.render({
|
||
elem: '#Goods',
|
||
url: "{:U('getOnlineGoods')}",
|
||
limit: 14,
|
||
cols: [
|
||
[{
|
||
field: 'id',
|
||
title: 'ID',
|
||
align: 'center',
|
||
width: 60
|
||
}, {
|
||
field: 'good_image',
|
||
title: '商品图片',
|
||
align: 'center',
|
||
templet: '<div><a target="_blank" href="{{ d.good_image}}"><img src="{{ d.good_image}}" style="height: 30px;width: 30px;"></a></div>',
|
||
width: 90,
|
||
}, {
|
||
field: 'goods_name',
|
||
title: '商品名称',
|
||
align: 'center'
|
||
}, {
|
||
field: 'goods_num',
|
||
title: '商品库存',
|
||
align: 'center',
|
||
width: 90
|
||
}, {
|
||
field: 'online_price',
|
||
title: '零售价',
|
||
align: 'center',
|
||
width: 90
|
||
}, {
|
||
fixed: 'right',
|
||
title: '操作',
|
||
align: 'center',
|
||
toolbar: '#barDemo',
|
||
width: 80
|
||
}]
|
||
],
|
||
page: {
|
||
layout: ['count', 'prev', 'page', 'next', 'skip'] //自定义分页布局
|
||
}, //是否开启分页
|
||
id:'Goods'
|
||
});
|
||
|
||
table.on('tool(demo)', function (obj) {
|
||
if (obj.event === 'choose') { //选择商品
|
||
goods = obj.data;
|
||
layer.close(layIndex);
|
||
}
|
||
});
|
||
$('#search').click(function () {
|
||
table.reload('Goods', {
|
||
page: {
|
||
curr: 1, //重新从第 1 页开始
|
||
},
|
||
where: {
|
||
keyword: $('.searchInput').val(),
|
||
}
|
||
});
|
||
})
|
||
},end:function () {
|
||
if(JSON.stringify(goods)!=JSON.stringify({})){
|
||
$("input[data-name-index='"+index+"']").val(goods.goods_name);
|
||
console.log($(".hidden[data-id-index='"+index+"']"))
|
||
$(".hidden[data-id-index='"+index+"']").val(goods.id);
|
||
}
|
||
}
|
||
})
|
||
})
|
||
|
||
})
|
||
$("input[name='magic_type']").on('click',function () {
|
||
if($(this).val()==1){
|
||
$('.small_img').show();
|
||
}else {
|
||
$('.small_img').hide();
|
||
}
|
||
})
|
||
$("select[name='type_url']").on('change',function () {
|
||
if($("select[name='type_url']>option:selected").val()==0){
|
||
$('.other_url').show();
|
||
$('.link_id').hide();
|
||
}else {
|
||
$('.other_url').hide();
|
||
if($("select[name='type_url']>option:selected").attr('data-type')==1){
|
||
$('.link_id').show();
|
||
}else {
|
||
$('.link_id').hide();
|
||
}
|
||
}
|
||
})
|
||
$(".select").on('change',function () {
|
||
if($(this).children('option:selected').val()==0){
|
||
$(this).next().hide();
|
||
$(this).next().next().show();
|
||
}else {
|
||
$(this).next().next().hide();
|
||
if($(this).find('option:selected').attr('data-type')==1){
|
||
$(this).next().show();
|
||
}else {
|
||
$(this).next().hide();
|
||
}
|
||
}
|
||
})
|
||
$("input[type='file']").on('change', function () {
|
||
if (this.files.length) {
|
||
var that = this;
|
||
var imgObj = this.files[0];
|
||
var imgType = ['image/jpeg', 'image/jpg', 'image/png'];
|
||
if (jQuery.inArray(imgObj.type, imgType) != -1) {
|
||
//是图片
|
||
var reader = new FileReader();
|
||
reader.readAsDataURL(imgObj);
|
||
reader.onload = function () {
|
||
$(that).next().attr('src', this.result);
|
||
$(that).next().show();
|
||
}
|
||
}
|
||
}
|
||
})
|
||
layui.use(['layer'],function () {
|
||
$('.save').click(function () {
|
||
if(!$("input[name='magic_title']").val().trim()){
|
||
showTips('请输入魔方标题');
|
||
return;
|
||
}
|
||
if($("select[name='type_url']").val()==0){
|
||
//其他链接
|
||
if(!$("input[name='other_url']").val().trim()){
|
||
showTips('请填写链接地址');
|
||
return;
|
||
}
|
||
}else {
|
||
if($("select[name='type_url']>option:selected").attr('data-type')==1){
|
||
//需要填写关联id
|
||
if(!$("input[name='link_id']").val().trim()){
|
||
showTips('请选择主图的商品');
|
||
return;
|
||
}
|
||
}
|
||
}
|
||
if($("input[name='magic_type']:checked").val()==1){
|
||
//添加小图
|
||
for(var i=1;i<4;i++){
|
||
if($("select[name='type_url"+i+"']").val()==0){
|
||
if(!$("input[name='other_url"+i+"']").val()){
|
||
showTips('请输入小图'+i+'的链接',1500);
|
||
return;
|
||
}
|
||
}else {
|
||
if($("select[name='type_url"+i+"']").find('option:selected').attr('data-type')==1){
|
||
if(!$("input[name='link_id"+i+"']").val()){
|
||
showTips('请选择小图'+i+'的商品',1500);
|
||
return;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
}
|
||
var fd = new FormData(document.getElementById('form'));
|
||
$.ajax({
|
||
url:"{:U('doEditMagic')}",
|
||
type: "POST",
|
||
data: fd,
|
||
dataType: 'JSON',
|
||
cache: false, // 不缓存
|
||
processData: false, // jQuery不要去处理发送的数据
|
||
contentType: false, // jQuery不要去设置Content-Type请求头
|
||
success: function (res) {
|
||
if (res.status == 1) {
|
||
top.layer.msg(res.msg,{time:1500},function () {
|
||
var index = parent.layer.getFrameIndex(window.name);
|
||
parent.layer.close(index);
|
||
});
|
||
} else {
|
||
showTips(res.msg,1500);
|
||
}
|
||
}
|
||
})
|
||
})
|
||
})
|
||
|
||
</script>
|
||
</html> |