jh-admin/addon/alilife/shop/view/goods/index.html

780 lines
24 KiB
HTML
Raw Blame History

This file contains ambiguous Unicode characters

This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

{extend name="app/shop/view/base.html"/}
{block name="resources"}
<style>
.progress-layer {width:400px;background:#fff;position:fixed;top:50%;left:50%;transform:translate(-50%,-50%);box-shadow:1px 1px 50px rgba(0,0,0,.3);padding:20px 20px;z-index:100;display:none;}
.progress-layer h3 {line-height:1;margin-bottom:15px;text-align:center;font-size:14px;}
.progress-layer .layui-progress-big,.progress-layer .layui-progress-big .layui-progress-bar {height:14px;line-height:14px;}
.progress-layer .layui-progress-text {line-height:14px;}
.goods-info {padding: 5px 0;align-items: center;flex-wrap:unset!important;float: left !important;}
.goods-info .room-name {padding-left: 5px;line-height: 1}
.goods-info img {width:50px;height: 50px;}
.single-filter-box{display: flex; justify-content: space-between;margin-top: 10px;}
.add-good-form .layui-input-block {width: 450px;}
.add-good-form .layui-form-item {position: relative;}
.add-good-form .category-wrap {position: absolute; left: 150px; top: 40px; z-index: 9; background-color: #FFFFFF; border: 1px solid #EEEEEE;}
.add-good-form .category-wrap .category-list {display: flex;}
.add-good-form .category-wrap ul {width: 151px; height: 300px; overflow: auto; background-color: #FFFFFF; border-right: 1px solid #EEEEEE; box-sizing: border-box;}
.add-good-form .category-wrap ul:last-child {border-right: 1px solid #EEEEEE;}
.add-good-form .category-wrap ul li {line-height: 26px; padding: 0 15px; cursor: pointer;}
.add-good-form .category-wrap .category-btn {width: 100%; padding: 10px 15px; box-sizing: border-box; border-top: 1px solid #EEEEEE;}
.layui-layer-page .layui-layer-content {overflow: auto !important; position: relative;}
.goods-category-mask {width: 100%; height: 100%; position: absolute; left: 0; top: 0; z-index: 9;}
.selected-style {color: #FFFFFF;}
.reject-reason {height: 100%;padding-bottom: 20px;}
.reason .layui-layer-content {overflow: unset!important}
</style>
{/block}
{block name="main"}
<div class="layui-collapse tips">
<div class="layui-colla-item">
<h2 class="layui-colla-title">操作提示</h2>
<ul class="layui-colla-content layui-show">
<li>首次添加产品或者新增分类请同步产品分类</li>
{if $shop_info.is_try==1}
<li>您正在使用<span style="color: red;">{$shop_info.group_name}</span><a href="{:addon_url('shop/index/renewExpireTime')}" style="color: #554aff">升级套餐</a></li>
{/if}
</ul>
</div>
</div>
<div class="single-filter-box">
<button href="#" class="layui-btn " onclick="addGood('allcategory',1)">添加实物商品</button>
<button href="#" class="layui-btn layui-bg-orange" onclick="addGood('allcategory',3)">添加虚拟商品</button>
<!-- <button href="#" class="layui-btn layui-bg-blue" onclick="addGood('allcategory',2)">添加租赁商品</button>-->
<button class="layui-btn layui-btn-primary " onclick="sync(1,'allcategory')">同步刷新</button>
<div class="layui-form">
<div class="layui-input-inline">
<input type="hidden" name="type" value="allcategory">
<input type="text" name="keywords" placeholder="商品名称" autocomplete="off" class="layui-input">
<button type="button" class="layui-btn layui-btn-primary" lay-filter="search" lay-submit>
<i class="layui-icon">&#xe615;</i>
</button>
</div>
</div>
</div>
<table id="goods_list" lay-filter="goods_list"></table>
<!-- 直播间信息 -->
<script type="text/html" id="goodsinfo">
<div class='table-title'>
<div class='title-pic'>
<img layer-src src="{{ns.img(d.cover_img)}}">
</div>
<div class='title-content' >
<p class="layui-elip">商品ID{{ d.goods_id}}</p>
<p class="layui-elip">{{ d.goods_name }}</p>
</div>
</div>
</script>
<script type="text/html" id="cat">
<div class="table-btn goods-info" style="position: relative">
<span class="room-name" style="float: right; width: 100%; overflow: hidden; z-index: 1" title="{{ d.cat_name }}">{{ d.cat_name }}</span> | <span class="text-color" style="float:left;z-index: 100; margin-right: 1px;cursor:pointer" onclick="check_cat({{d.out_item_id}},{{d.item_type}})"></span>
</div>
</script>
<script type="text/html" id="reason">
<div class="reject-reason">
{{d.reject_reason}}
</div>
</script>
<!-- 状态修改 -->
<script type="text/html" id="goodsStatus">
<div class="table-btn goods-info" style="position: relative">
<span class="room-name {{# if(d.status==5){ }} text-color {{# } }} " {{# if(d.status!=5){ }}style="color:#808080" {{# } }} title="{{ d.status_name }}">{{ d.status_name }}</span>
</div>
</script>
<!-- 操作 -->
<script type="text/html" id="operation">
<div class="table-btn">
<a class="layui-btn" lay-event="syncrenew">上传价&</a>
{{# if(d.spu_status=='AUDIT_REJECT'||d.spu_status=='FREEZE'){ }}
<a class="layui-btn" lay-event="reason">查看失败原因</a>
{{# } }}
{{# if(d.spu_status=='AVAILABLE'){ }}
<a class="layui-btn" lay-event="dellisting">下架</a>
{{# } }}
{{# if(d.spu_status=='DELISTING'){ }}
<a class="layui-btn" lay-event="listing">上架</a>
{{# } }}
<a class="layui-btn" lay-event="delete">删除</a>
</div>
</script>
<!-- 批量操作 -->
<script type="text/html" id="batchOperation">
<button class="layui-btn layui-btn-primary" lay-event="delete">批量删除</button>
<button class="layui-btn layui-btn-primary" lay-event="listing">批量上架</button>
<button class="layui-btn layui-btn-primary" lay-event="dellisting">批量下架</button>
</script>
<div class="progress-layer">
<h3>正在同步中...</h3>
<div class="layui-progress layui-progress-big" lay-showPercent="true" lay-filter="progress">
<div class="layui-progress-bar layui-bg-blue" lay-percent="0%"></div>
</div>
</div>
{/block}
{block name="script"}
<script type="text/html" id="check_cat">
<div class="goods-category-mask layui-hide"></div>
<div class="layui-form add-good-form">
<div class="layui-form-item">
<label class="layui-form-label mid"><span class="required">*</span></label>
<div class="layui-input-block">
<input type="text" readonly lay-verify="required" autocomplete="off" class="layui-input len-long cate-select" onclick="selectCategory()">
</div>
<p class="word-aux mid">分类必选此分类为调取的分类内容</p>
<div class="category-wrap layui-hide">
<div class="category-list">
<ul class="category-level-1">
{{# if(d.item_type == 1){ }}
{foreach $first_cat_one as $first_k => $first_v}
<li onclick="selectedCategory(this, 2, '{$first_v.cat_id}')" lay-id="{$first_v.cat_id}">{$first_v.cat_name}</li>
{/foreach}
{{# } }}
{{# if(d.item_type == 2){ }}
{foreach $first_cat_two as $first_k => $first_v}
<li onclick="selectedCategory(this, 2, '{$first_v.cat_id}')" lay-id="{$first_v.cat_id}">{$first_v.cat_name}</li>
{/foreach}
{{# } }}
{{# if(d.item_type == 3){ }}
{foreach $first_cat_three as $first_k => $first_v}
<li onclick="selectedCategory(this, 2, '{$first_v.cat_id}')" lay-id="{$first_v.cat_id}">{$first_v.cat_name}</li>
{/foreach}
{{# } }}
</ul>
<ul class="category-level-2 layui-hide"></ul>
<ul class="category-level-3 layui-hide"></ul>
<ul class="category-level-4 layui-hide"></ul>
</div>
<div class="category-btn">
<button class="layui-btn" onclick="saveCate()">确定</button>
</div>
</div>
</div>
<div class="form-row mid">
<button class="layui-btn" lay-submit lay-filter="saveEdit">保存</button>
<button class="layui-btn layui-btn-primary" onclick="closeAddGoodsLayer()">取消</button>
</div>
</div>
</script>
<script type="text/html" id="add_good">
<div class="goods-category-mask layui-hide"></div>
<div class="layui-form add-good-form">
<div class="layui-form-item">
<label class="layui-form-label mid"><span class="required">*</span></label>
<div class="layui-input-block">
<input type="text" readonly lay-verify="required" autocomplete="off" class="layui-input len-long cate-select" onclick="selectCategory()">
</div>
<p class="word-aux mid">分类必选此分类为调取的支付宝分类内容</p>
<div class="category-wrap layui-hide">
<div class="category-list">
<ul class="category-level-1">
{{# if(d.item_type == 1){ }}
{foreach $first_cat_one as $first_k => $first_v}
<li onclick="selectedCategory(this, 2, '{$first_v.cat_id}')" lay-id="{$first_v.cat_id}">{$first_v.cat_name}</li>
{/foreach}
{{# } }}
{{# if(d.item_type == 2){ }}
{foreach $first_cat_two as $first_k => $first_v}
<li onclick="selectedCategory(this, 2, '{$first_v.cat_id}')" lay-id="{$first_v.cat_id}">{$first_v.cat_name}</li>
{/foreach}
{{# } }}
{{# if(d.item_type == 3){ }}
{foreach $first_cat_three as $first_k => $first_v}
<li onclick="selectedCategory(this, 2, '{$first_v.cat_id}')" lay-id="{$first_v.cat_id}">{$first_v.cat_name}</li>
{/foreach}
{{# } }}
</ul>
<ul class="category-level-2 layui-hide"></ul>
<ul class="category-level-3 layui-hide"></ul>
<ul class="category-level-4 layui-hide"></ul>
</div>
<div class="category-btn">
<button class="layui-btn" onclick="saveCate()">确定</button>
</div>
</div>
</div>
<div class="layui-form-item">
<label class="layui-form-label mid"><span class="required">*</span></label>
<div class="layui-input-block">
<button class="layui-btn" onclick="selectGoods()">选择商品</button>
</div>
<p class="word-aux mid">请选择需要关联至商品池的商品</p>
</div>
<div class="layui-form-item">
<label class="layui-form-label mid"></label>
<div class="layui-input-block">
<table class="layui-table" lay-skin="line" lay-size="lg">
<colgroup>
<col width="100%">
</colgroup>
<thead>
<tr>
<th>商品</th>
</tr>
</thead>
<tbody>
<tr><td>暂无商品</td></tr>
</tbody>
</table>
</div>
</div>
<div class="form-row mid">
<button class="layui-btn" lay-submit lay-filter="save">保存</button>
<button class="layui-btn layui-btn-primary" onclick="closeAddGoodsLayer()">取消</button>
</div>
</div>
</script>
<script type="text/html" id="table_goods_list">
{{# layui.each(d, function(index, item) { }}
<tr>
<td>
<div class="table-title">
<div class="title-pic">
{{# if(item.goods_image){ }}
<img layer-src src="{{ns.img(item.goods_image.split(',')[0],'small')}}"/>
{{# } }}
</div>
<div class="title-content">
<a href="javascript:;" class="multi-line-hiding text-color-sub" title="{{item.goods_name}}">{{item.goods_name}}</a>
</div>
</div>
</td>
</tr>
{{# }) }}
</script>
<script type="text/html" id="category_wrap">
{{# if (d.level == 2) { }}
{{# layui.each(d.list, function(index, item) { }}
<li onclick="selectedCategory(this, 3, '{{item.cat_id}}')" lay-id="{{item.cat_id}}">{{item.cat_name}}</li>
{{# }) }}
{{# } else if (d.level == 3) { }}
{{# layui.each(d.list, function(index, item) { }}
<li onclick="selectedCategory(this, 4, '{{item.cat_id}}')" lay-id="{{item.cat_id}}">{{item.cat_name}}</li>
{{# }) }}
{{# } else if (d.level ==4) { }}
{{# layui.each(d.list, function(index, item) { }}
<li onclick="selectThird(this)" lay-id="{{item.cat_id}}">{{item.cat_name}}</li>
{{# }) }}
{{# } }}
</script>
<script>
var form, table, element, laytpl, syncClick = false,
delete_flag = false,
save_flag = false,saveEdit_flag = false,
dellisting_flag = false,
listing_flag = false,
goodsId = [], selectedGoodsId =[], goods_list = [],out_product_id='',
cat_id = 0;
reLoad();
function reLoad() {
layui.use(['form', 'element', 'laytpl'], function () {
form = layui.form;
element = layui.element;
laytpl = layui.laytpl;
table = new Table({
elem: '#goods_list',
url: ns.url("alilife://shop/goods/lists"),
bottomToolbar: "#batchOperation",
cols: [
[{
type: 'checkbox',
unresize: 'false',
width: '3%'
}, {
title: '商品信息',
unresize: 'true',
width: '20%',
templet: "#goodsinfo",
align:'left'
}, {
title: '商品类目',
unresize: 'false',
width: '15%',
templet: "#cat",
align:'left'
}, {
title: '价格',
unresize: 'false',
width: '10%',
field: 'price'
}, {
field: 'goods_stock',
title: '库存',
unresize: 'false',
width: '6%'
}, {
title: '状态',
unresize: 'false',
width: '10%',
templet: function (data) {
let test='售卖中';
switch (data.spu_status) {
case 'AUDIT_REJECT':
test = '审核驳回';
break;
case 'AUDITING':
test = '审核中';
break;
case 'DELISTING':
test = '已下架';
break;
case 'AVAILABLE':
test = '售卖中';
break;
case 'FREEZE':
test = '已冻结';
break;
}
return test;
},
}, {
field: 'create_time',
title: '提交时间',
unresize: 'false',
width: '10%',
},
{
title: '操作',
toolbar: '#operation',
unresize: 'false',
align:'right'
}]
]
});
table.tool(function (obj) {
var data = obj.data;
switch (obj.event) {
case 'delete': //删除
deleteGoods(data.out_item_id,data.api_type);
break;
case 'listing': //上架
listingGoods(data.out_item_id,data.api_type);
break;
case 'dellisting': //下架
dellistingGoods(data.out_item_id,data.api_type);
break;
case 'syncrenew': //删除
syncrenew(data.out_item_id,data.api_type);
break;
case 'reason': //查看失败原因
laytpl($("#reason").html()).render(data, function (html) {
layer.open({
type: 1,
shadeClose: true,
shade: 0.3,
offset: 'auto',
fixed: false,
title: "失败原因",
area: ['450px', 'auto'],
btn: ['退出'],
content: html,
skin: 'reason'
});
});
break;
}
})
/**
* 搜索功能
*/
form.on('submit(search)', function(data) {
table.reload({
page: {
curr: 1
},
where: data.field
});
});
/**
* 保存添加商品
*/
form.on('submit(save)', function (data) {
if (save_flag) return;
save_flag = true;
if (selectedGoodsId == '') {
layer.msg('请选择商品');
}
if (cat_id == '') {
layer.msg('请选择分类');
}
data.field.goods_ids = selectedGoodsId;
data.field.cat_id = cat_id;
data.field.api_type = 'allcategory';
$.ajax({
type: 'POST',
dataType: 'JSON',
url: ns.url("alilife://shop/goods/add"),
data: data.field,
success: function (res) {
save_flag = false;
if (res.code == 0) {
layer.confirm('添加成功', {
title: '操作提示',
btn: ['返回列表', '继续操作'],
yes: function () {
location.href = ns.url("alilife://shop/goods/lists")
},
btn2: function () {
location.reload();
}
});
} else {
layer.msg(res.message);
}
}
})
});
/**
* 保存编辑分类
*/
form.on('submit(saveEdit)', function (data) {
let goods_id = out_product_id;
if (saveEdit_flag) return;
saveEdit_flag = true;
if (goods_id == '') {
layer.msg('请选择商品');
}
data.field.goods_id = goods_id;
data.field.cat_id = cat_id;
data.field.api_type = 'allcategory';
let index = ns.loading('open', '正在上传');
$.ajax({
type: 'POST',
dataType: 'JSON',
url: ns.url("alilife://shop/goods/edit"),
data: data.field,
success: function (res) {
save_flag = false;
layer.close(index);
if (res.code == 0) {
layer.confirm('编辑成功', {
title: '操作提示',
btn: ['返回列表', '继续操作'],
yes: function () {
location.href = ns.url("alilife://shop/goods/lists")
},
btn2: function () {
location.reload();
}
});
} else {
layer.msg(res.message);
}
}
})
});
// 批量操作
table.bottomToolbar(function (obj) {
if (obj.data.length < 1) {
layer.msg('请选择要操作的数据');
return;
}
var id_array = new Array();
for (i in obj.data) id_array.push(obj.data[i].out_item_id);
switch (obj.event) {
case "delete":
deleteGoods(id_array.toString());
break;
case "listing":
listingGoods(id_array.toString());
break;
case "dellisting":
dellistingGoods(id_array.toString());
break;
}
});
});
}
function deleteGoods(goods_ids,api_type){
layer.confirm('是否确定要删除所选商品?', {title: '提示'}, function () {
if (delete_flag) return;
delete_flag = true;
$.ajax({
url: ns.url("alilife://shop/goods/delete"),
data: {out_item_id: goods_ids,api_type},
dataType: 'JSON',
type: 'POST',
success: function (res) {
layer.msg(res.message);
delete_flag = false;
if (res.code == 0) {
table.reload();
}
}
});
});
}
function listingGoods(goods_ids,api_type){
layer.confirm('是否确定要上架所选商品?', {title: '提示'}, function () {
if (listing_flag) return;
listing_flag = true;
$.ajax({
url: ns.url("alilife://shop/goods/listing"),
data: {out_item_id: goods_ids,api_type},
dataType: 'JSON',
type: 'POST',
success: function (res) {
layer.msg(res.message);
listing_flag = false;
if (res.code == 0) {
table.reload();
}
}
});
});
}
function dellistingGoods(goods_ids,api_type){
layer.confirm('是否确定要下架所选商品?', {title: '提示'}, function () {
if (dellisting_flag) return;
dellisting_flag = true;
$.ajax({
url: ns.url("alilife://shop/goods/dellisting"),
data: {out_item_id: goods_ids,api_type},
dataType: 'JSON',
type: 'POST',
success: function (res) {
layer.msg(res.message);
dellisting_flag = false;
if (res.code == 0) {
table.reload();
}
}
});
});
}
// 同步商品
function sync(start,api_type='allcategory') {
if (syncClick) return;
syncClick = true;
var start = start == undefined ? 1 : start;
$.ajax({
url: ns.url("alilife://shop/goods/sync"),
data: {
start: start,
api_type: api_type,
},
dataType: 'JSON',
type: 'POST',
success: function(res) {
syncClick = false;
if (res.code == 0) {
var data = res.data,
next = parseInt(start) + 1;
if (next < data.total_page) {
if (start == 0) {
$(".progress-layer").fadeOut();
}
var progress = (next / data.total_page * 100).toFixed(2);
element.progress('progress', progress + '%');
// 拉取下一页
sync(next,api_type);
} else {
if (!$(".progress-layer").is(':hidden')) $(".progress-layer").fadeOut();
layer.closeAll();
layer.msg('同步成功');
table.reload();
}
} else {
layer.msg(res.message);
}
}
});
}
/**
* 添加商品
*/
function addGood(type,item_type) {
laytpl($("#add_good").html()).render({type,item_type}, function(html) {
add_good_layer = layer.open({
type: 1,
title: '添加商品',
area: ['700px', '500px'],
content: html,
success: function(layero, index) {
form.render();
}
});
})
}
/**
* 修改商品分类
*/
function check_cat(goods_id,item_type){
if(goods_id!=''){
out_product_id = goods_id;
}
laytpl($("#check_cat").html()).render({item_type}, function(html) {
add_good_layer = layer.open({
type: 1,
title: '修改商品分类',
area: ['700px', '500px'],
content: html,
success: function(layero, index) {
form.render();
}
});
})
}
/***
* 同步库存价格
* @param goods_id
*/
function syncrenew(goods_id,api_type){
$.ajax({
type: 'POST',
dataType: 'JSON',
url: ns.url("alilife://shop/goods/syncrenew"),
data: {goods_id,api_type},
success: function(res) {
layer.msg(res.message)
setTimeout(function () {
location.reload();
},1500)
}
});
}
function selectGoods() {
goodsSelect(function(res) {
if (!res.length) return false;
for(var i=0;i<res.length;i++) {
goodsId.push(res[i].goods_id);
res[i].buy_num = 2;
goods_list.push(res[i]);
}
console.log(goods_list)
laytpl($("#table_goods_list").html()).render(goods_list, function(html) {
$(".add-good-form .layui-table tbody").html(html);
})
$("input[name='goods_ids']").val(JSON.stringify(goodsId));
selectedGoodsId = goodsId.toString();
}, selectedGoodsId,{max_num:1,disabled:1});
}
function closeAddGoodsLayer() {
layer.close(add_good_layer);
}
// 选择分类
function selectCategory() {
$(".category-wrap").removeClass("layui-hide");
$(".goods-category-mask").removeClass("layui-hide");
}
$('body').on('click', '.goods-category-mask', function() {
$(".category-wrap").addClass("layui-hide");
$(".goods-category-mask").addClass("layui-hide");
})
function selectThird(event){
cate_level_3_id = $(event).attr('lay-id');
$(event).addClass('selected-style bg-color').siblings('li').removeClass("selected-style bg-color");
}
// 选中分类
function selectedCategory(event, level, id,api_type='allcategory') {
$(event).addClass('selected-style bg-color').siblings('li').removeClass("selected-style bg-color");
$.ajax({
url: ns.url("alilife://shop/category/getCategoryByParent"),
data: {
api_type,
level: level,
pid: id
},
dataType: 'JSON',
type: 'POST',
success: function(res) {
$(".cate-select").val('');
var obj = {};
obj.level = level;
obj.list = res.data;
if (obj.list.length > 0 && obj.level <= 4) {
renderCategory(obj);
}else{
console.log(level)
if(level==2){
$(".category-level-2").addClass("layui-hide");
$(".category-level-2").html();
$(".category-level-3").addClass("layui-hide");
$(".category-level-3").html();
}else if(level==3){
$(".category-level-3").addClass("layui-hide");
$(".category-level-3").html();
$(".category-level-4").addClass("layui-hide");
$(".category-level-4").html();
}
form.render();
}
}
});
}
function renderCategory(data) {
laytpl($("#category_wrap").html()).render(data, function(html) {
if (data.level == 2) {
$(".category-level-2").removeClass("layui-hide");
$(".category-level-2").html(html);
$(".category-level-3").addClass("layui-hide");
$(".category-level-3").html();
} else if (data.level == 3) {
$(".category-level-3").removeClass("layui-hide");
$(".category-level-3").html(html);
$(".category-level-4").addClass("layui-hide");
$(".category-level-4").html();
}else if(data.level == 3){
$(".category-level-4").removeClass("layui-hide");
$(".category-level-4").html(html);
}
form.render();
})
}
function saveCate() {
if (!$('.category-level-1 li.selected-style').length) {
layer.msg('请选择一级分类', {icon: 5, anim: 6});
return false;
}
let test='';
var firstLevel = $('.category-level-1 li.selected-style'),
secondLevel = $('.category-level-2 li.selected-style'),
thirdLevel = $('.category-level-3 li.selected-style'),
fourLevel = $('.category-level-4 li.selected-style');
if(firstLevel.text()){
test=firstLevel.text();
cat_id=firstLevel.attr('lay-id');
}
if(secondLevel.text()){
test += '>'+ secondLevel.text();
cat_id=secondLevel.attr('lay-id');
}
if(thirdLevel.text()){
test += '>'+ thirdLevel.text();
cat_id=thirdLevel.attr('lay-id');
}
if(fourLevel.text()){
test += '>'+ fourLevel.text();
cat_id=fourLevel.attr('lay-id');
}
$(".cate-select").val(test);
$(".category-wrap").addClass("layui-hide");
$(".goods-category-mask").addClass("layui-hide");
}
</script>
{/block}