429 lines
22 KiB
HTML
429 lines
22 KiB
HTML
{include file="Public:header3"/}
|
||
|
||
<body>
|
||
<div class="layui-fluid" style="padding-top: 15px;">
|
||
<div class="layui-card">
|
||
<div class="layui-form layui-card-header layuiadmin-card-header-auto" style="height: 84px;">
|
||
<div class="layui-form-item">
|
||
<div class="layui-inline">
|
||
<div class="layui-input-inline" style="width: 300px;margin-left: 0px">
|
||
<input type="text" name="name" id="name" placeholder="请输入商品名称" autocomplete="off"
|
||
class="layui-input">
|
||
</div>
|
||
</div>
|
||
<div class="layui-inline">
|
||
<div class="layui-input-inline" style="width: 180px;margin-left: 0px">
|
||
<select name="status" id="status" style="width:100%">
|
||
<option value="">--请选择状态--</option>
|
||
<option value="1">启用</option>
|
||
<option value="0">禁用</option>
|
||
</select>
|
||
</div>
|
||
</div>
|
||
<div class="layui-inline">
|
||
<button class="layui-btn layuiadmin-btn-useradmin" id="searchBtn">
|
||
<i class="layui-icon layui-icon-search layuiadmin-button-btn"></i>
|
||
</button>
|
||
<button class="layui-btn" id="addBtn">添加钻石商品</button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="layui-card-body">
|
||
<table id="diamondTable" lay-filter="diamondTable"></table>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 商品状态模板 -->
|
||
<script type="text/html" id="statusTpl">
|
||
<input type="checkbox" name="status" lay-skin="switch" lay-filter="statusSwitch" lay-text="启用|禁用" value="{{d.id}}" {{# if(d.status == 1){ }}checked{{# } }}>
|
||
</script>
|
||
|
||
<!-- 是否首充模板 -->
|
||
<script type="text/html" id="isFirstTpl">
|
||
{{# if(d.is_first == 1){ }}
|
||
<button class="layui-btn layui-btn-warm layui-btn-radius layui-btn-sm">是</button>
|
||
{{# } else { }}
|
||
<button class="layui-btn layui-btn-primary layui-btn-radius layui-btn-sm">否</button>
|
||
{{# } }}
|
||
</script>
|
||
|
||
<!-- 图片模板 -->
|
||
<script type="text/html" id="imageTpl">
|
||
{{# if(d.normal_image){ }}
|
||
<img src="{{d.normal_image}}" style="max-width: 80px; max-height: 80px;">
|
||
{{# } }}
|
||
</script>
|
||
|
||
<!-- 操作栏模板 -->
|
||
<script type="text/html" id="toolbarTpl">
|
||
<a style="text-decoration:none" title="编辑" lay-event="edit" class="layui-btn layui-btn-normal layui-btn-xs">
|
||
<i class="layui-icon layui-icon-edit"></i>编辑
|
||
</a>
|
||
<a style="text-decoration:none" lay-event="delete" class="layui-btn layui-btn-danger layui-btn-xs">
|
||
<i class="layui-icon layui-icon-delete"></i>删除
|
||
</a>
|
||
</script>
|
||
|
||
<!-- 添加/编辑表单模板 -->
|
||
<script type="text/html" id="formTpl">
|
||
<form class="layui-form" lay-filter="diamondForm" id="diamondForm" style="padding: 20px;">
|
||
<input type="hidden" name="id" value="{{d.id}}">
|
||
<!-- 第一行：商品名称、商品ID -->
|
||
<div class="layui-form-item">
|
||
<label class="layui-form-label">商品名称</label>
|
||
<div class="layui-input-inline">
|
||
<input type="text" name="name" value="{{d.name}}" placeholder="请输入商品名称" class="layui-input">
|
||
</div>
|
||
<label class="layui-form-label">商品编号</label>
|
||
<div class="layui-input-inline">
|
||
<input type="text" name="products_id" value="{{d.products_id}}" placeholder="请输入商品ID" class="layui-input">
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 第二行：商品类型、价格 -->
|
||
<div class="layui-form-item">
|
||
<label class="layui-form-label">商品类型</label>
|
||
<div class="layui-input-inline">
|
||
<select name="products_type" class="layui-input">
|
||
<option value="1" {{# if(d.products_type == '1' || !d.products_type){ }}selected{{# } }}>钻石商城</option>
|
||
</select>
|
||
</div>
|
||
<label class="layui-form-label">价格</label>
|
||
<div class="layui-input-inline">
|
||
<input type="text" name="price" value="{{d.price}}" placeholder="请输入价格" class="layui-input">
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 第三行：基础钻石（单独一行） -->
|
||
<div class="layui-form-item">
|
||
<label class="layui-form-label">赠送货币</label>
|
||
<div class="layui-input-inline" style="width: 80%;">
|
||
<!-- <input type="text" name="base_reward" value="{{d.base_reward}}" placeholder="请输入基础钻石数量" class="layui-input"> -->
|
||
<div id="base_reward_container" style="width: 100%;"></div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 第四行：非首充展示图、非首充选中图 -->
|
||
<div class="layui-form-item">
|
||
<label class="layui-form-label">非首充展示图</label>
|
||
<div class="layui-input-inline">
|
||
<input type="hidden" name="normal_image" value="{{d.normal_image}}" class="layui-input">
|
||
<img style="float:left;width:120px;height:171.53rpx;cursor:pointer;" class="upload-image" id="normal_image_preview" data-target="normal_image" src="{{d.normal_image || '/static/image/upload.jpg'}}">
|
||
</div>
|
||
<label class="layui-form-label">非首充选中图</label>
|
||
<div class="layui-input-inline">
|
||
<input type="hidden" name="normal_select_image" value="{{d.normal_select_image}}" class="layui-input">
|
||
<img style="float:left;width:120px;height:171.53rpx;cursor:pointer;" class="upload-image" id="normal_select_image_preview" data-target="normal_select_image" src="{{d.normal_select_image || '/static/image/upload.jpg'}}">
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 第五行：是否首充（单独一行） -->
|
||
<div class="layui-form-item">
|
||
<label class="layui-form-label">是否首充</label>
|
||
<div class="layui-input-inline">
|
||
<input type="radio" name="is_first" value="1" title="是" lay-filter="is_first" {{# if(d.is_first == 1 || d.id === undefined){ }}checked{{# } }}>
|
||
<input type="radio" name="is_first" value="0" title="否" lay-filter="is_first" {{# if(d.is_first == 0 && d.id !== undefined){ }}checked{{# } }}>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 第六行：首充赠送金额（条件显示，单独一行） -->
|
||
<div class="first-charge-fields layui-form-item" style="{{# if(d.is_first != 1){ }}display: none;{{# } }}">
|
||
<label class="layui-form-label" >首充额外赠送货币</label>
|
||
<div class="layui-input-inline" style="width: 80%;">
|
||
<div id="first_bonus_reward_container" style="width: 100%;"></div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 第七行：首充展示图、首充选中图（条件显示） -->
|
||
<div class="first-charge-fields layui-form-item" style="{{# if(d.is_first != 1){ }}display: none;{{# } }}">
|
||
<label class="layui-form-label">首充展示图</label>
|
||
<div class="layui-input-inline">
|
||
<input type="hidden" name="first_charge_image" value="{{d.first_charge_image}}" class="layui-input">
|
||
<img style="float:left;width:120px;height:171.53rpx;cursor:pointer;" class="upload-image" id="first_charge_image_preview" data-target="first_charge_image" src="{{d.first_charge_image || '/static/image/upload.jpg'}}">
|
||
</div>
|
||
<label class="layui-form-label">首充选中图</label>
|
||
<div class="layui-input-inline">
|
||
<input type="hidden" name="first_select_charge_image" value="{{d.first_select_charge_image}}" class="layui-input">
|
||
<img style="float:left;width:120px;height:171.53rpx;cursor:pointer;" class="upload-image" id="first_select_charge_image_preview" data-target="first_select_charge_image" src="{{d.first_select_charge_image || '/static/image/upload.jpg'}}">
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 第八行：排序值、状态 -->
|
||
<div class="layui-form-item">
|
||
<label class="layui-form-label">排序值</label>
|
||
<div class="layui-input-inline">
|
||
<input type="text" name="sort_order" value="{{d.sort_order}}" placeholder="请输入排序值" class="layui-input">
|
||
</div>
|
||
<label class="layui-form-label">状态</label>
|
||
<div class="layui-input-inline">
|
||
<input type="radio" name="status" value="1" title="启用" {{# if(d.status == 1 || d.id === undefined){ }}checked{{# } }}>
|
||
<input type="radio" name="status" value="0" title="禁用" {{# if(d.status == 0 && d.id !== undefined){ }}checked{{# } }}>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="layui-form-item" style="text-align: center;">
|
||
<div class="layui-input-block" style="margin-left: 0;">
|
||
<button class="layui-btn" lay-submit lay-filter="diamondFormSubmit">立即提交</button>
|
||
<button type="button" class="layui-btn layui-btn-primary closeBtn">关闭</button>
|
||
</div>
|
||
</div>
|
||
</form>
|
||
</script>
|
||
|
||
{include file="Public:footer3"/}
|
||
<script type="text/javascript">
|
||
layui.use(['layer', 'table', 'form', 'upload'], function () {
|
||
var table = layui.table;
|
||
var layer = layui.layer;
|
||
var form = layui.form;
|
||
var upload = layui.upload;
|
||
var laytpl = layui.laytpl;
|
||
// 初始化表格
|
||
table.render({
|
||
elem: '#diamondTable',
|
||
url: '{:url("/admin/diamond")}',
|
||
height: 'full-120',
|
||
lineStyle: 'height:100px',
|
||
cols: [[
|
||
{ field: 'id', title: 'ID', width: 80, sort: true },
|
||
{ field: 'name', title: '商品名称', width: 150 },
|
||
{ field: 'products_id', title: '商品ID', width: 150 },
|
||
// { field: 'base_reward', title: '基础钻石数量', width: 120 },
|
||
{ field: 'price', title: '价格(元)', width: 100 },
|
||
{ field: 'is_first', title: '是否有首充', width: 100, templet: '#isFirstTpl' },
|
||
{ field: 'normal_image', title: '展示图', width: 120, templet: '#imageTpl' },
|
||
{ field: 'sort_order', title: '排序', width: 80 },
|
||
{ field: 'status', title: '状态', width: 120, templet: '#statusTpl' },
|
||
{ field: 'created_at', title: '创建时间', width: 160 },
|
||
{ field: 'updated_at', title: '更新时间', width: 160 },
|
||
{ fixed: 'right', title: '操作', toolbar: '#toolbarTpl', width: 150 }
|
||
]],
|
||
page: true,
|
||
limit: 15,
|
||
skin: 'line'
|
||
});
|
||
|
||
// 搜索按钮点击事件
|
||
$('#searchBtn').on('click', function () {
|
||
var name = $('#name').val();
|
||
var status = $('#status').val();
|
||
|
||
// 重载表格
|
||
table.reload('diamondTable', {
|
||
where: {
|
||
name: name,
|
||
status: status
|
||
},
|
||
page: {
|
||
curr: 1
|
||
}
|
||
});
|
||
});
|
||
var base_reward_instance = null;
|
||
|
||
var first_bonus_reward_instance = null;
|
||
// 添加按钮点击事件
|
||
$('#addBtn').on('click', function () {
|
||
// 获取当前最大排序值
|
||
$.get('{:url("/admin/diamond_get_max_sort")}', function(res) {
|
||
const maxSort = res.data || 0;
|
||
console.log(maxSort);
|
||
|
||
layer.open({
|
||
type: 1,
|
||
title: '添加钻石商品',
|
||
area: ['800px', '90%'],
|
||
content: laytpl($('#formTpl').html()).render({ d: {sort_order: maxSort + 1} }),
|
||
success: function (layero, index) {
|
||
form.render();
|
||
initUpload();
|
||
// 页面加载时初始化奖励信息区域
|
||
base_reward_instance = initRewardInfo('base_reward_container', null, 'base_reward');
|
||
console.log(base_reward_instance);
|
||
|
||
first_bonus_reward_instance = initRewardInfo('first_bonus_reward_container', null, 'first_bonus_reward');
|
||
|
||
// 监听关闭按钮点击事件
|
||
$('.closeBtn').on('click', function() {
|
||
layer.closeAll('page');
|
||
});
|
||
|
||
// 监听是否首充单选框变化
|
||
form.on('radio(is_first)', function (data) {
|
||
var value = data.value;
|
||
if (value == 1) {
|
||
$(data.elem).closest('.layui-form').find('.first-charge-fields').show();
|
||
} else {
|
||
$(data.elem).closest('.layui-form').find('.first-charge-fields').hide();
|
||
}
|
||
});
|
||
form.val('diamondForm', {sort_order: maxSort + 1});
|
||
|
||
// 默认显示首充字段
|
||
$('.first-charge-fields').show();
|
||
form.render();
|
||
}
|
||
});
|
||
});
|
||
});
|
||
|
||
// 监听工具条
|
||
table.on('tool(diamondTable)', function (obj) {
|
||
var data = obj.data;
|
||
var layEvent = obj.event;
|
||
|
||
if (layEvent === 'edit') {
|
||
// 编辑
|
||
layer.open({
|
||
type: 1,
|
||
title: '编辑钻石商品',
|
||
area: ['800px', '90%'],
|
||
content: laytpl($('#formTpl').html()).render({ d: data }),
|
||
success: function (layero, index) {
|
||
form.render();
|
||
initUpload();
|
||
console.log(data);
|
||
|
||
// 页面加载时初始化奖励信息区域
|
||
base_reward_instance = initRewardInfo('base_reward_container', data.base_reward, 'base_reward');
|
||
console.log(base_reward_instance);
|
||
|
||
first_bonus_reward_instance = initRewardInfo('first_bonus_reward_container', data.first_bonus_reward, 'first_bonus_reward');
|
||
|
||
form.val('diamondForm', data);
|
||
|
||
// 监听关闭按钮点击事件
|
||
$('.closeBtn').on('click', function() {
|
||
layer.closeAll('page');
|
||
});
|
||
|
||
// 监听是否首充单选框变化
|
||
form.on('radio(is_first)', function (data) {
|
||
var value = data.value;
|
||
if (value == 1) {
|
||
$(data.elem).closest('.layui-form').find('.first-charge-fields').show();
|
||
} else {
|
||
$(data.elem).closest('.layui-form').find('.first-charge-fields').hide();
|
||
}
|
||
});
|
||
if(data.is_first==1){
|
||
$('.first-charge-fields').show();
|
||
}else{
|
||
$('.first-charge-fields').hide();
|
||
}
|
||
form.render();
|
||
$('#normal_image_preview').attr('src', data.normal_image);
|
||
if (data.first_charge_image != null && data.first_charge_image != "") {
|
||
$('#first_charge_image_preview').attr('src', data.first_charge_image);
|
||
}
|
||
$('#normal_select_image_preview').attr('src', data.normal_select_image);
|
||
if (data.first_select_charge_image != null && data.first_select_charge_image != "") {
|
||
$('#first_select_charge_image_preview').attr('src', data.first_select_charge_image);
|
||
}
|
||
}
|
||
});
|
||
} else if (layEvent === 'delete') {
|
||
// 删除
|
||
layer.confirm('确定要删除该商品吗？', { icon: 3, title: '提示' }, function (index) {
|
||
$.ajax({
|
||
url: '{:url("/admin/diamond_del")}',
|
||
type: 'post',
|
||
data: { id: data.id },
|
||
success: function (res) {
|
||
if (res.status === 1) {
|
||
layer.msg(res.msg, { icon: 1, time: 1000 }, function () {
|
||
table.reload('diamondTable');
|
||
});
|
||
} else {
|
||
layer.msg(res.msg, { icon: 2, time: 1500 });
|
||
}
|
||
}
|
||
});
|
||
layer.close(index);
|
||
});
|
||
}
|
||
});
|
||
|
||
// 监听表单提交
|
||
form.on('submit(diamondFormSubmit)', function (data) {
|
||
(async () => {
|
||
var load = layer.load(2);
|
||
console.log(data);
|
||
var url = data.field.id ? '{:url("/admin/diamond_edit")}' : '{:url("/admin/diamond_add")}';
|
||
await rewardInstances[base_reward_instance].processRewardIdData("PRODUCT");
|
||
await rewardInstances[first_bonus_reward_instance].processRewardIdData("PRODUCT");
|
||
var formData = $("#diamondForm").serialize();
|
||
console.log(formData);
|
||
$.post(url, formData, function (res) {
|
||
layer.close(load);
|
||
if (res.status === 1) {
|
||
layer.msg(res.msg, { icon: 1, time: 1000 }, function () {
|
||
layer.closeAll('page');
|
||
table.reload('diamondTable');
|
||
});
|
||
} else {
|
||
layer.msg(res.msg, { icon: 2, anim: 6, time: 1500 });
|
||
}
|
||
});
|
||
})();
|
||
return false;
|
||
});
|
||
|
||
// 监听状态开关切换
|
||
form.on('switch(statusSwitch)', function(obj){
|
||
var id = this.value;
|
||
var status = obj.elem.checked ? 1 : 0;
|
||
|
||
$.ajax({
|
||
url: '{:url("/admin/diamond_status")}',
|
||
type: 'post',
|
||
data: { id: id, status: status },
|
||
success: function(res) {
|
||
if (res.status === 1) {
|
||
layer.msg(res.msg, { icon: 1, time: 1000 });
|
||
} else {
|
||
// 如果修改失败，将开关状态切换回去
|
||
obj.elem.checked = status === 0 ? true : false;
|
||
form.render('checkbox');
|
||
layer.msg(res.msg, { icon: 2, time: 1500 });
|
||
}
|
||
},
|
||
error: function() {
|
||
// 如果请求出错，将开关状态切换回去
|
||
obj.elem.checked = status === 0 ? true : false;
|
||
form.render('checkbox');
|
||
layer.msg('操作失败，请重试', { icon: 2, time: 1500 });
|
||
}
|
||
});
|
||
});
|
||
|
||
// 初始化图片上传
|
||
function initUpload() {
|
||
$('.upload-image').each(function () {
|
||
var targetInput = $(this).data('target');
|
||
var previewImg = this;
|
||
|
||
upload.render({
|
||
elem: this,
|
||
url: '{:url("/admin/picture")}',
|
||
accept: 'images',
|
||
acceptMime: 'image/*',
|
||
done: function (res) {
|
||
if (res.status === 1) {
|
||
$('input[name="' + targetInput + '"]').val(res.data.imgurl);
|
||
$(previewImg).attr('src', res.data.imgurl);
|
||
layer.msg('上传成功', { icon: 1 });
|
||
} else {
|
||
layer.msg(res.msg, { icon: 2, anim: 6 });
|
||
}
|
||
}
|
||
});
|
||
});
|
||
}
|
||
});
|
||
</script>
|
||
</body>
|
||
|
||
</html> |