80 lines
3.2 KiB
HTML
80 lines
3.2 KiB
HTML
{extend name="base"/}
|
|
{block name="resources"}
|
|
<style>
|
|
.exchange-type{display: inline-block;min-width: 140px;height: 60px;line-height: 60px;border: 1px solid #ededed;border-radius: 4px;margin-right: 10px;position: relative;cursor: pointer;margin-bottom: 15px;}
|
|
.style{display: flex;-webkit-box-align: center;align-items: center;-webkit-box-pack: center;justify-content: center;padding: 0 10px;}
|
|
.style div{width: 50px;height: 16px;}
|
|
.style p{margin-left: 10px;font-size: 12px;color: #333;}
|
|
.preview-style img{margin-right: 64px; margin-bottom: 50px; height: 595px;width: 275px;-webkit-box-shadow: 5px 5px 20px #f5f5f5;box-shadow: 5px 5px 20px #f5f5f5;}
|
|
</style>
|
|
{/block}
|
|
{block name="main"}
|
|
{notempty name="$theme_list"}
|
|
<div class="layui-form form-wrap">
|
|
<div class="layui-form-item">
|
|
<div class="layui-input-block">
|
|
{foreach $theme_list as $k=>$v}
|
|
<div class="exchange-type" data-id="{$v['id']}" data-title="{$v['title']}" data-name="{$v['name']}" data-main-color="{$v['main_color']}" data-aux-color="{$v['aux_color']}">
|
|
<div class="style">
|
|
<div style="background: url('{:img($v['color_img'])}') no-repeat;"></div>
|
|
<p>{$v['title']}</p>
|
|
</div>
|
|
</div>
|
|
{/foreach}
|
|
</div>
|
|
</div>
|
|
<div class="layui-input-block">
|
|
<div class="preview-style">
|
|
{foreach $theme_list as $k=>$v}
|
|
{foreach $v['preview'] as $ck=>$cv}
|
|
<img src="{:img($cv)}" data-name="{$v['name']}" {if $k!=0}style="display:none;"{/if}>
|
|
{/foreach}
|
|
{/foreach}
|
|
</div>
|
|
</div>
|
|
<div class="form-row">
|
|
<input type="hidden" name="style_theme" value="{$style|json_encode}">
|
|
<button class="layui-btn" lay-submit lay-filter="save">保存</button>
|
|
</div>
|
|
</div>
|
|
{/notempty}
|
|
{/block}
|
|
{block name="script"}
|
|
<script>
|
|
var theme = JSON.parse($("input[name='style_theme']").val());
|
|
$(".exchange-type").click(function() {
|
|
$(this).addClass("border-color").siblings("div").removeClass("border-color");
|
|
var obj = {
|
|
id: $(this).attr('data-id'),
|
|
title: $(this).attr('data-title'),
|
|
name: $(this).attr('data-name'),
|
|
main_color: $(this).attr('data-main-color'),
|
|
aux_color: $(this).attr('data-aux-color'),
|
|
};
|
|
$("input[name='style_theme']").val(JSON.stringify(obj));
|
|
$('.preview-style img').hide();
|
|
$('.preview-style img[data-name="' + obj.name + '"]').show();
|
|
});
|
|
$('.exchange-type[data-name="' + theme.name + '"]').click();
|
|
|
|
layui.use('form', function() {
|
|
var form = layui.form, repeat_flag = false; //防重复标识
|
|
form.on('submit(save)', function(data) {
|
|
if (repeat_flag) return;
|
|
repeat_flag = true;
|
|
data.field = JSON.parse(data.field.style_theme);
|
|
$.ajax({
|
|
url: ns.url("shop/diy/style"),
|
|
data: data.field,
|
|
dataType: 'JSON',
|
|
type: 'POST',
|
|
success: function(res) {
|
|
repeat_flag = false;
|
|
layer.msg(res.message);
|
|
}
|
|
});
|
|
|
|
});
|
|
});
|
|
</script>
|
|
{/block} |