525 lines
15 KiB
HTML
525 lines
15 KiB
HTML
{extend name="app/shop/view/base.html"/}
|
||
{block name="resources"}
|
||
<link rel="stylesheet" href="__STATIC__/element-ui/index.css">
|
||
<style>
|
||
.layui-form-item .layui-input-inline.end-time{float: none;}
|
||
.layui-table-body{max-height: 480px !important;}
|
||
.goods-title{display: flex;align-items: center;}
|
||
.goods-title .goods-img{display: flex;align-items: center;justify-content: center;width: 55px;height: 55px;margin-right: 5px;}
|
||
.goods-title .goods-img img{max-height: 100%;max-width: 100%;}
|
||
.goods-title .goods-name{flex: 1;line-height: 1.6;}
|
||
.form-wrap {position: relative;}
|
||
.goods_num {padding-left: 20px;}
|
||
</style>
|
||
{/block}
|
||
{block name="main"}
|
||
<div class="layui-form form-wrap" id="vue">
|
||
<div class="layui-form-item" >
|
||
<label class="layui-form-label"><span class="required">*</span>商品分类：</label>
|
||
<div class="layui-inline" >
|
||
<el-cascader style="width: 300px;" ref="cascader" placeholder="请选择商品分类" v-model="category_id" :props="props" v-if="options" :options="options" filterable @change="handleChange" getCheckedNodes></el-cascader>
|
||
</div>
|
||
<div class="word-aux">首次或分类发生变化请<a href="{addon_url('alilife/shop/category/lists')}">同步分类</a></div>
|
||
</div>
|
||
|
||
<div class="layui-form-item" >
|
||
<label class="layui-form-label"><span class="required">*</span>活动时间：</label>
|
||
<div class="layui-inline">
|
||
<div class="layui-input-inline">
|
||
<input type="text" id="start_time" name="start_time" lay-verify="required" class="layui-input len-mid" autocomplete="off" readonly>
|
||
<i class=" iconrili iconfont calendar"></i>
|
||
</div>
|
||
<span class="layui-form-mid">-</span>
|
||
<div class="layui-input-inline end-time">
|
||
<input type="text" id="end_time" name="end_time" lay-verify="required|time" class="layui-input len-mid" autocomplete="off" readonly>
|
||
<i class=" iconrili iconfont calendar"></i>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="layui-form-item goods_list">
|
||
<label class="layui-form-label">活动商品：</label>
|
||
<div class="layui-input-block">
|
||
<table id="selected_goods_list" lay-filter="selected_goods_list"></table>
|
||
<button class="layui-btn" onclick="addGoods()">选择商品</button>
|
||
<span class="goods_num">已选商品（<span id="goods_num" class="text-color">0</span>）</span>
|
||
</div>
|
||
</div>
|
||
<div class="layui-form-item">
|
||
<label class="layui-form-label">可使用门店</label>
|
||
<div class="layui-input-block">
|
||
<input type="radio" name="select_all_shop" v-model="formData.select_all_shop" value="1" title="全部门店" checked>
|
||
<input type="radio" name="select_all_shop" @click="getStore()" v-model="formData.select_all_shop" value="0" disabled title="部分门店">
|
||
</div>
|
||
</div>
|
||
|
||
<div class="layui-form-item">
|
||
|
||
</div>
|
||
|
||
<div class="layui-form-item">
|
||
|
||
</div>
|
||
|
||
<div class="layui-form-item">
|
||
<label class="layui-form-label "><span class="required">*</span>商家名称</label>
|
||
<div class="layui-input-block">
|
||
<input type="text" name="merchant_name" value="{$shop_info.site_name??''}" lay-verify="required" autocomplete="off" class="layui-input len-long">
|
||
</div>
|
||
</div>
|
||
|
||
<div class="layui-form-item">
|
||
<label class="layui-form-label"><span class="required">*</span>客服电话</label>
|
||
<div class="layui-input-block">
|
||
<input type="text" name="phone_number" value="{$shop_info.contacts_mobile??''}" lay-verify="required" autocomplete="off" class="layui-input len-long">
|
||
</div>
|
||
</div>
|
||
|
||
<div class="layui-form-item layui-form-text">
|
||
<label class="layui-form-label">活动规则说明：</label>
|
||
<div class="layui-input-inline">
|
||
<textarea name="notification" class="layui-textarea len-long" maxlength="300"></textarea>
|
||
</div>
|
||
</div>
|
||
<div class="form-row">
|
||
<button class="layui-btn" lay-submit lay-filter="save">保存</button>
|
||
<button class="layui-btn layui-btn-primary" onclick="back()">返回</button>
|
||
</div>
|
||
<input type="hidden" name="goods_ids" value="" />
|
||
</div>
|
||
{/block}
|
||
{block name="script"}
|
||
<script type="text/html" id="toolbarOperation">
|
||
<button class="layui-btn layui-btn-primary" lay-event="group-price">团购价</button>
|
||
<button class="layui-btn layui-btn-primary" lay-event="purchase-num">最低购买数量</button>
|
||
</script>
|
||
|
||
<script type="text/html" id="groupbuy_price">
|
||
<input type="number" class="layui-input len-input groupbuy-price" value="{{d.groupbuy_price ? d.groupbuy_price : ''}}" lay-verify="group_price" min="0.00" oninput="groupbuyPrice({{ d.goods_id }},event)" onporpertychange="groupbuyPrice({{ d.goods_id }},event)"/>
|
||
</script>
|
||
|
||
<script type="text/html" id="buy_num">
|
||
<input type="number" class="layui-input len-input buy-num" value="{{d.buy_num ? d.buy_num : 2}}" lay-verify="buy_num" min="0.00" oninput="groupbuyBuyNum({{ d.goods_id }},event)" onporpertychange="groupbuyBuyNum({{ d.goods_id }},event)"/>
|
||
</script>
|
||
|
||
<script type="text/html" id="operation">
|
||
<div class="table-btn">
|
||
<a class="layui-btn" onclick="delRow(this,{{d.goods_id}})">删除</a>
|
||
</div>
|
||
</script>
|
||
<script src="STATIC_JS/vue.js"></script>
|
||
<!-- 引入组件库 -->
|
||
<script src="__STATIC__/element-ui/index.js"></script>
|
||
<script>
|
||
var goodsId = [], selectedGoodsId = [], goods_list = [],id=0;
|
||
new Vue({
|
||
el:'#vue',
|
||
data(){
|
||
return {
|
||
formData: {
|
||
select_all_shop:1
|
||
},
|
||
options: '',
|
||
props: {
|
||
value:'cat_id',
|
||
label:'cat_name',
|
||
},
|
||
category_id:'',
|
||
item_type:'',
|
||
item_attr_list:[],
|
||
Template:{
|
||
limit_stock_rule:{
|
||
limit:'', //库存模式 0 1
|
||
num:'', //库存数量
|
||
unit:'', //单位
|
||
is_required:false, //是否必填
|
||
}
|
||
},
|
||
};
|
||
},
|
||
created(){
|
||
this.getCategory();
|
||
let _this=this;
|
||
layui.use(['form', 'laydate','carousel'], function() {
|
||
var form = layui.form,
|
||
laydate = layui.laydate,
|
||
carousel = layui.carousel,
|
||
repeat_flag = false,
|
||
currentDate = new Date(),
|
||
minDate = "";
|
||
currentDate.setDate(currentDate.getDate() + 30);
|
||
carousel.render({
|
||
elem: '#carousel',
|
||
width: '100%',
|
||
arrow: 'always',
|
||
interval: 3500
|
||
});
|
||
form.render();
|
||
renderTable(goods_list); // 初始化表格
|
||
//开始时间
|
||
laydate.render({
|
||
elem: '#start_time', //指定元素
|
||
type: 'datetime',
|
||
value: new Date(),
|
||
done: function(value) {
|
||
minDate = value;
|
||
reRender();
|
||
}
|
||
});
|
||
|
||
//结束时间
|
||
laydate.render({
|
||
elem: '#end_time', //指定元素
|
||
type: 'datetime',
|
||
value: new Date(currentDate)
|
||
});
|
||
|
||
/**
|
||
* 重新渲染结束时间
|
||
* */
|
||
function reRender() {
|
||
$("#end_time").remove();
|
||
$(".end-time").html('<input type="text" id="end_time" name="end_time" placeholder="请输入结束时间" lay-verify="required|time" class="layui-input len-mid" autocomplete="off" readonly> ');
|
||
laydate.render({
|
||
elem: '#end_time',
|
||
type: 'datetime',
|
||
min: minDate
|
||
});
|
||
}
|
||
/**
|
||
* 表单验证
|
||
*/
|
||
form.verify({
|
||
time: function(value) {
|
||
var now_time = (new Date()).getTime();
|
||
var start_time = (new Date($("#start_time").val())).getTime();
|
||
var end_time = (new Date(value)).getTime();
|
||
if (now_time > end_time) {
|
||
return '结束时间不能小于当前时间!'
|
||
}
|
||
if (start_time > end_time) {
|
||
return '结束时间不能小于开始时间!';
|
||
}
|
||
},
|
||
flnum: function(value) {
|
||
var arrMen = value.split(".");
|
||
var val = 0;
|
||
if (arrMen.length == 2) {
|
||
val = arrMen[1];
|
||
}
|
||
if (val.length > 2) {
|
||
return '保留小数点后两位！'
|
||
}
|
||
if (Number(value) < 0){
|
||
return '价格不能小于0！';
|
||
}
|
||
},
|
||
buy_num: function(value,item) {
|
||
var stock = $(item).parents("tr").find(".stock").text();
|
||
if (Number(value) < 1) {
|
||
return '最低购买数量不能小于1！'
|
||
}
|
||
if (Number(value) > stock) {
|
||
return '购买数量不能大于库存数！'
|
||
}
|
||
},
|
||
group_price: function(value, item) {
|
||
var price = $(item).parents("tr").find(".goods-price").text();
|
||
if (parseFloat(value) > parseFloat(price)) {
|
||
return '团购价格不能大于商品价格';
|
||
}
|
||
if (value.trim() == "") {
|
||
return '团购价格不能为空';
|
||
}
|
||
if (parseFloat(value) <= 0) {
|
||
return '团购价格必须大于0';
|
||
}
|
||
var arrMen = value.split(".");
|
||
var val = 0;
|
||
if (arrMen.length == 2) {
|
||
val = arrMen[1];
|
||
}
|
||
if (val.length > 2) {
|
||
return '团购价格最多保留两位小数';
|
||
}
|
||
},
|
||
});
|
||
/**
|
||
* 表单提交
|
||
*/
|
||
form.on('submit(save)', function(data){
|
||
if (!goodsId.length) {
|
||
layer.msg("请选择活动商品！", {icon: 5, anim: 6});
|
||
return;
|
||
}
|
||
data.field.goods_ids = goodsId;
|
||
var goodsListArr = [];
|
||
goods_list.forEach(function(item,index) {
|
||
var goods_detail = {};
|
||
goods_detail.sku_id = item.sku_id;
|
||
goods_detail.goods_id = item.goods_id;
|
||
goods_detail.groupbuy_price = item.groupbuy_price || 0;
|
||
goods_detail.buy_num = item.buy_num || 0;
|
||
goodsListArr.push(goods_detail);
|
||
});
|
||
data.field.goods_list = goodsListArr;
|
||
data.field.cat_id = _this.category_id;
|
||
data.field.item_type = _this.item_type;
|
||
data.field.api_type= '{$api_type}' ;
|
||
data.field.formData =JSON.stringify(_this.formData);
|
||
let index = ns.loading('open', '正在上传');
|
||
$.ajax({
|
||
type: 'POST',
|
||
dataType: 'JSON',
|
||
url: ns.url("alilife://shop/goods/add"),
|
||
data: data.field,
|
||
async: false,
|
||
success: function (res) {
|
||
repeat_flag = false;
|
||
layer.close(index);
|
||
if (res.code == 0) {
|
||
layer.confirm('添加成功', {
|
||
title: '操作提示',
|
||
btn: ['返回列表', '继续添加'],
|
||
closeBtn: 0,
|
||
yes: function () {
|
||
location.href = ns.url("alilife://shop/goods/list");
|
||
},
|
||
btn2: function () {
|
||
location.href = ns.url("alilife/shop/goods/add");
|
||
}
|
||
});
|
||
} else {
|
||
layer.msg(res.message);
|
||
}
|
||
}
|
||
})
|
||
});
|
||
});
|
||
},
|
||
methods: {
|
||
getStore() {
|
||
console.log(4444)
|
||
// $.ajax({
|
||
// url: ns.url("alilife://shop/category/getTemplate"),
|
||
// data: {
|
||
// api_type:'{$api_type}',
|
||
// category_id:nodesInfo.data.cat_id,
|
||
// item_type:nodesInfo.data.cat_type,
|
||
// },
|
||
// dataType: 'JSON',
|
||
// type: 'POST',
|
||
// success: function(res) {
|
||
// let item_attr_list=res.attr.item_attr_list;
|
||
// _this.item_attr_list=item_attr_list;
|
||
// let lists=item_attr_list.map(item=>{
|
||
//
|
||
// console.log(item)
|
||
//
|
||
// })
|
||
//
|
||
// }
|
||
// });
|
||
},
|
||
getCategory(){
|
||
let _this=this;
|
||
$.ajax({
|
||
url: ns.url("alilife://shop/category/getCategory"),
|
||
data: {
|
||
api_type:'{$api_type}',
|
||
},
|
||
dataType: 'JSON',
|
||
type: 'POST',
|
||
success: function(res) {
|
||
_this.options=res;
|
||
}
|
||
});
|
||
},
|
||
handleChange(value,$obs){
|
||
let nodesInfo = this.$refs['cascader'].getCheckedNodes()[0],_this=this;
|
||
console.log('nodesInfo>>>>>',nodesInfo,value)
|
||
_this.category_id=nodesInfo.data.cat_id;
|
||
_this.item_type=nodesInfo.data.cat_type;
|
||
}
|
||
}
|
||
});
|
||
// 表格渲染
|
||
function renderTable(goods_list) {
|
||
//展示已知数据
|
||
table = new Table({
|
||
elem: '#selected_goods_list',
|
||
page: false,
|
||
limit: Number.MAX_VALUE,
|
||
cols: [
|
||
[{
|
||
width: "3%",
|
||
type: 'checkbox',
|
||
unresize: 'false'
|
||
},{
|
||
title: '商品名称',
|
||
width: '26%',
|
||
unresize: 'false',
|
||
templet: function(data) {
|
||
var html = '';
|
||
html += `
|
||
<div class="goods-title">
|
||
<div class="goods-img">
|
||
<img layer-src src="${data.goods_image ? ns.img(data.goods_image.split(",")[0],'small') : ''}" alt="">
|
||
</div>
|
||
<p class="multi-line-hiding goods-name" data-goods_id="${data.goods_id}" title="${data.goods_name}">${data.goods_name}</p>
|
||
</div>
|
||
`;
|
||
return html;
|
||
}
|
||
}, {
|
||
field: 'price',
|
||
title: '商品价格',
|
||
unresize: 'false',
|
||
align: 'right',
|
||
width: '15%',
|
||
templet: function(data) {
|
||
return '<p class="line-hiding" title="'+ data.price +'">￥<span class="goods-price">' + data.price +'</span></p>';
|
||
}
|
||
}, {
|
||
field: 'goods_stock',
|
||
title: '库存',
|
||
unresize: 'false',
|
||
width: '10%',
|
||
templet: function(data) {
|
||
return '<p class="stock">' + data.goods_stock +'</p>';
|
||
}
|
||
}, {
|
||
title: '团购价(元)',
|
||
unresize: 'false',
|
||
width: '13%',
|
||
templet: '#groupbuy_price'
|
||
}, {
|
||
title: '最低购买数量',
|
||
unresize: 'false',
|
||
width: '13%',
|
||
templet: '#buy_num'
|
||
}, {
|
||
title: '操作',
|
||
toolbar: '#operation',
|
||
unresize: 'false',
|
||
align:'right'
|
||
}]
|
||
],
|
||
data: goods_list,
|
||
toolbar: '#toolbarOperation'
|
||
});
|
||
/**
|
||
* 批量操作
|
||
*/
|
||
table.toolbar(function(obj) {
|
||
|
||
if (obj.data.length < 1) {
|
||
layer.msg('请选择要操作的数据');
|
||
return;
|
||
}
|
||
switch (obj.event) {
|
||
case "group-price":
|
||
editInput(0,obj);
|
||
break;
|
||
case "purchase-num":
|
||
editInput(1,obj);
|
||
break;
|
||
}
|
||
});
|
||
}
|
||
|
||
function editInput(textIndex=0,data) {
|
||
var text = [{
|
||
name: '团购价',
|
||
value: 'groupbuy_price'
|
||
},{
|
||
name: '最低购买数量',
|
||
value: 'buy_num'
|
||
}];
|
||
|
||
layer.open({
|
||
type: 1,
|
||
title:"修改"+text[textIndex].name,
|
||
area:['600px'],
|
||
btn:["保存","返回"],
|
||
content: `
|
||
<div class="layui-form-item">
|
||
<label class="layui-form-label"><span class="required">*</span>${text[textIndex].name}：</label>
|
||
<div class="layui-input-block">
|
||
<input type="text" name="bargain_edit_input" lay-verify="required" autocomplete="off" class="layui-input len-mid" placeholder="请输入${text[textIndex].name}">
|
||
</div>
|
||
</div>
|
||
`,
|
||
yes: function(index, layero){
|
||
var val = $("input[name='bargain_edit_input']").val();
|
||
if (!val){
|
||
layer.msg("请输入" + text[textIndex].name);
|
||
return false;
|
||
}
|
||
data.data.forEach(function (item,index) {
|
||
goods_list.forEach(function (skuItem,skuIndex) {
|
||
if (item.goods_id == skuItem.goods_id){
|
||
goods_list[skuIndex][text[textIndex].value] = val;
|
||
}
|
||
})
|
||
});
|
||
renderTable(goods_list);
|
||
layer.closeAll();
|
||
}
|
||
});
|
||
}
|
||
|
||
/**
|
||
* 添加商品
|
||
*/
|
||
function addGoods(){
|
||
goodsSelect(function(res) {
|
||
if (!res.length) return false;
|
||
goodsId = [];
|
||
goods_list = [];
|
||
for(var i=0;i<res.length;i++) {
|
||
goodsId.push(res[i].goods_id);
|
||
res[i].buy_num = 2;
|
||
goods_list.push(res[i]);
|
||
}
|
||
renderTable(goods_list);
|
||
$("input[name='goods_ids']").val(JSON.stringify(goodsId));
|
||
|
||
$("#goods_num").html(goodsId.length);
|
||
|
||
selectedGoodsId = goodsId.toString();
|
||
}, selectedGoodsId);
|
||
goods_list.splice(0,goods_list.length);
|
||
}
|
||
|
||
function delRow(obj,id) {
|
||
for (var i = 0; i < goods_list.length; i++){
|
||
if (goods_list[i].goods_id == parseInt(id)){
|
||
goods_list.splice(i,1);
|
||
}
|
||
}
|
||
|
||
if(goodsId.indexOf(id) != -1) goodsId.splice(goodsId.indexOf(id),1);
|
||
$("#goods_num").html(goodsId.length);
|
||
selectedGoodsId = goodsId.toString();
|
||
$(obj).parents("tr").remove();
|
||
}
|
||
|
||
function groupbuyPrice(index,event) {
|
||
for (var i = 0; i < goods_list.length; i++){
|
||
if (goods_list[i].goods_id == index)
|
||
goods_list[i].groupbuy_price = event.srcElement.value;
|
||
}
|
||
}
|
||
function groupbuyBuyNum(index,event) {
|
||
for (var i = 0; i < goods_list.length; i++){
|
||
if (goods_list[i].goods_id == index)
|
||
goods_list[i].buy_num = event.srcElement.value;
|
||
}
|
||
}
|
||
function back() {
|
||
location.href = ns.url("alilife://shop/goods/lifelists");
|
||
}
|
||
|
||
</script>
|
||
|
||
{/block} |