文件
mashangyoujiu/Application/Retail/View/Goods/goods_set.html

2362 行
101 KiB
HTML
可执行文件

此文件含有模棱两可的 Unicode 字符

此文件含有可能会与其他字符混淆的 Unicode 字符。 如果您是想特意这样的,可以安全地忽略该警告。 使用 Escape 按钮显示他们。

<!DOCTYPE html>
<html>
<!--[1.1.96]-->
<head>
<meta charset="UTF-8">
<title>商品</title>
<link rel="stylesheet" type="text/css" href="__PUBLIC__/layui/css/layui.css"/>
<link rel="stylesheet" type="text/css" href="__PUBLIC__/Retail/css/goodsList.css"/>
<style>
[v-cloak] {
display: none;
}
.layui-input-inline > span {
min-width: 66px;
}
.gA_inner02 {
margin-right: 0px;
}
.layui-input {
border-color: #bbb;
}
.supplier {
width: 200px;
margin-left: 30px;
height: 30px;
border: 1px solid #ccc;
border-radius: 5px;
}
.layui-form .layui-input-inline > select {
display: none;
}
.layui-form-item {
margin-bottom: 0;
}
.twosynchlist .layui-table-body td .layui-table-cell {
height: 100px;
line-height: 100px;
}
/*多图*/
.file_label {
position: relative;
cursor: pointer;
font-weight: normal;
width: 60px;
height: 60px;
box-sizing: border-box;
display: inline-block;
vertical-align: top;
}
.file_label:before {
display: block;
content: '+';
font-size: 50px;
font-weight: 100;
color: #bbb;
border: 1px solid #bbb;
width: 60px;
height: 60px;
box-sizing: border-box;
text-align: center;
line-height: 56px;
}
.file_label > input, .file_label_box > input, .goods-img-1 > input {
width: 100px;
opacity: 0;
position: absolute;
top: 0;
left: 0;
}
.file_label > img {
position: absolute;
top: 0;
left: 0;
width: 60px;
height: 60px;
box-sizing: border-box;
background-color: white;
border: 1px solid #ddd;
}
.file_label_box > img, .goods-img-1 > img {
position: absolute;
top: 0;
left: 0;
width: 130px;
height: 130px;
background-color: white;
border: 1px solid #ddd;
/*display: none;*/
}
.close {
width: 20px;
height: 20px;
border-radius: 50%;
line-height: 20px;
text-align: center;
background-color: rgba(0, 0, 0, 0.4);
color: white;
position: absolute;
top: -10px;
right: -10px;
cursor: pointer;
display: none;
}
.close::selection {
background-color: transparent;
}
.file_label_box, .goods-img-1 {
position: relative;
display: inline-block;
margin: 0 10px 10px 0;
vertical-align: top;
width: 130px;
height: 130px;
cursor: pointer;
}
.file_label_box:hover > .close {
display: block;
}
.close:hover {
background-color: rgba(0, 0, 0, 0.8);
}
.formWrap {
margin-bottom: 50px;
}
.formWrap:after {
content: '';
display: block;
clear: both;
}
.layui-form-label {
text-align: right;
width: 100px;
padding: 5px 15px;
}
.layui-input-inline .layui-form-label {
width: auto;
}
body, html {
width: 100%;
height: 100%;
position: relative;
}
body {
padding-bottom: 80px;
box-sizing: border-box;
}
#footerbox {
position: fixed;
bottom: 0;
left: 0;
background-color: #F8F8F8;
z-index: 20000000;
width: 100%;
height: 60px;
border-top: 1px solid #eee;
display: flex;
flex-direction: row;
align-items: center;
justify-content: center;
}
input:disabled {
background: #f8f8f8;
}
.gA_inner {
box-sizing: border-box;
padding: 10px 20px;
display: flex;
align-items: flex-start;
}
i {
color: #999;
font-style: normal;
}
.attrInput {
width: 100%;
height: 100%;
border-color: transparent;
background-color: transparent;
box-sizing: border-box;
display: block;
text-align: center;
padding: 0 !important;
}
.attrBtn {
color: #313131;
cursor: pointer;
margin-right: 30px;
background-color: transparent;
}
.attrBtn:hover {
color: #4394ff;
}
.sku-img {
width: 100px;
height: 100px;
}
.goodsImg {
height: 130px;
}
.input-disabled {
border: none;
outline: none;
}
.input-disabled:disabled {
background-color: transparent;
}
th, td, tr {
padding-left: 0 !important;
padding-right: 0 !important;
text-align: center !important;
}
input:-webkit-autofill, textarea:-webkit-autofill, select:-webkit-autofill {
background-color: transparent !important;
background-image: none !important;
color: rgb(0, 0, 0) !important;
}
.layui-input, .layui-select, .layui-textarea {
height: 30px;
}
.wrap-inline {
line-height: 12px;
margin-top: 5px;
}
.wrap-inline-btn {
color: #4394ff;
cursor: pointer;
}
.layui-form-label > i {
color: red;
padding-right: 4px;
}
.table_title {
width: 100%;
height: 30px;
text-indent: 20px;
line-height: 30px;
border-bottom: 1px solid #e5e5e5;
font-weight: bold;
font-size: 14px;
margin-bottom: 10px;
}
.layui-btn {
height: 30px;
line-height: 30px;
}
.layui-form-item .layui-input-inline {
width: 270px;
}
.keys .layui-form-switch {
margin-top: 4px;
}
.sku-attr-box {
width: calc(100% - 130px);
padding: 10px;
box-sizing: border-box;
border: 1px solid #ddd;
max-width: 900px;
}
.sku-attr-list {
width: 100%;
margin-bottom: 10px;
}
.sku-attr-title {
width: 100%;
background-color: #f8f8f8;
padding: 8px;
box-sizing: border-box;
position: relative;
display: flex;
}
.add-sku-attr, .add-sku-attr-disabled {
background: white;
width: 80px;
text-align: center;
line-height: 30px;
border: 1px solid #ccc;
font-size: 12px;
color: #313131;
margin-right: 20px;
cursor: pointer;
}
.add-sku-attr:hover {
border-color: #4394ff;
color: #4394ff;
}
.add-sku-attr-disabled {
border-color: #eee;
color: #999;
cursor: not-allowed;
}
.add-sku-attr-disabled::selection {
background-color: transparent;
}
.del-sku-attr {
position: absolute;
width: 20px;
height: 20px;
top: 10px;
right: 10px;
border-radius: 50%;
color: white;
background-color: #ccc;
text-align: center;
line-height: 18px;
font-size: 14px;
display: none;
cursor: pointer;
}
.sku-attr-title:hover .del-sku-attr {
display: block;
}
.del-sku-attr:hover {
background-color: #999;
}
.layui-form-radio * {
font-size: 12px;
}
.gA_inner1 {
box-sizing: border-box;
padding: 10px 20px;
display: flex;
align-items: center;
}
.sku-list-name-box {
display: inline-block;
height: 30px;
line-height: 30px;
border: 1px solid #ddd;
position: relative;
padding: 0 20px;
margin: 5px 10px;
color: #666;
cursor: pointer;
overflow: hidden;
}
.del-sku-list {
position: absolute;
width: 20px;
height: 20px;
top: -8px;
right: -8px;
border-radius: 50%;
color: white;
background-color: #ccc;
text-align: center;
line-height: 18px;
font-size: 14px;
display: none;
cursor: pointer;
}
.sku-list-name-box:hover > .del-sku-list {
display: block;
}
.del-sku-list:hover {
background-color: #999;
}
.sku .layui-form-radio {
margin-top: 0;
}
.add-new-sku-box {
position: fixed;
width: 100vw;
height: 100vh;
z-index: 1;
top: 0;
left: 0;
display: flex;
justify-content: center;
align-items: center;
}
.add-new-sku-center {
background-color: white;
padding: 64px 50px 60px;
display: flex;
align-items: center;
justify-content: center;
flex-wrap: nowrap;
border: 1px solid #ddd;
box-shadow: 0 0 5px #ddd;
position: relative;
}
.add-new-sku-input {
height: 32px;
border-radius: 3px;
border: 1px solid #bbb;
padding: 0 10px;
}
.add-new-sku-input:hover {
border-color: #4394ff;
}
.add-new-sku-center::selection, .add-new-sku-sure-btn::selection, .cancel-btn::selection {
background-color: transparent;
}
.add-new-sku-sure-btn {
padding: 8px 15px;
border: 1px solid #bbb;
cursor: pointer;
border-radius: 3px;
color: #313131;
margin-left: 10px;
}
.add-new-sku-sure-btn:hover {
background-color: #f5f5f5;
}
.cancel-btn {
position: absolute;
right: 5px;
top: 5px;
width: 30px;
height: 30px;
text-align: center;
line-height: 30px;
border-radius: 50%;
background-color: rgba(0, 0, 0, 0.2);
color: white;
font-size: 22px;
cursor: pointer;
}
.cancel-btn:hover {
background-color: rgba(0, 0, 0, 0.3);
}
.attrInput:focus {
background-color: white;
}
.attrInput.layui-input {
height: 100%;
}
.check-sku-list {
border-color: #4394ff;
overflow: hidden;
}
.check-sku-list:after {
content: '';
width: 10px;
height: 10px;
background-color: #4394ff;
position: absolute;
top: -5px;
right: -5px;
transform: rotateZ(45deg);
}
.layui-form-radio > i:hover, .layui-form-radioed > i {
color: #4394ff;
}
.search-sku-list-con {
white-space: nowrap;
height: 30px;
display: inline-block;
vertical-align: top;
margin-left: 30px;
}
.search-sku-list {
width: 130px;
height: 30px;
border: 1px solid #ccc;
border-radius: 3px;
padding: 0 5px;
box-sizing: border-box;
}
.search-sku-list::placeholder {
color: #aaa;
}
.search-sku-list:hover {
border-color: #4394ff;
}
.search-sku-list-btn {
padding: 7px;
border: 1px solid #bbb;
border-radius: 5px;
color: #666;
font-size: 12px;
cursor: pointer;
}
.search-sku-list-btn:hover {
color: white;
border-color: #4394ff;
background-color: #4394ff;
}
.search-sku-list-con::selection, .search-sku-list-con > span::selection {
background-color: transparent;
}
.sku-list-del {
border-radius: 5px;
color: #999;
font-size: 12px;
cursor: pointer;
}
.sku-list-del:hover {
color: #666;
text-decoration: #666;
}
.layui-form-checked span, .layui-form-checked:hover span {
background-color: #4394ff;
}
.layui-form-checked, .layui-form-checked:hover {
border-color: #4394ff;
}
.layui-form-onswitch {
background-color: #4394ff;
border-color: #4394ff;
}
.sku-list-name-box::selection {
background-color: transparent;
}
.checkbox-label {
width: 108px;
height: 30px;
line-height: 28px;
font-size: 14px;
color: white;
text-align: center;
align-items: center;
padding-right: 30px;
border: 1px solid #d2d2d2;
background-color: #d2d2d2;
box-sizing: border-box;
border-radius: 3px;
position: relative;
cursor: pointer;
transition: 0.1s;
margin-right: 10px;
}
.checkbox-label:hover {
background-color: #b9b9b9;
border-color: #b9b9b9;
}
.checkbox-label:after {
content: '';
width: 30px;
height: 28px;
background-color: white;
position: absolute;
top: 0;
right: 0;
}
.checkbox-label-checked {
background-color: #4394ff;
border-color: #4394ff;
}
.checkbox-label-checked:hover {
background-color: #4394ff;
border-color: #4394ff;
}
.opacity {
position: absolute;
width: 0;
height: 0;
top: 0;
left: 0;
opacity: 0;
}
.status {
width: 54px;
height: 24px;
border-radius: 13px;
font-size: 12px;
border: 1px solid #ccc;
cursor: pointer;
position: relative;
transition: 0.3s;
}
.isOpen {
background-color: #4394ff;
border-color: #4394ff;
}
.isOpen:before {
content: '开启';
color: white;
position: absolute;
top: 3px;
left: 7px;
}
.isOpen:after {
content: '';
background-color: white;
width: 16px;
height: 16px;
position: absolute;
top: 4px;
left: 34px;
border-radius: 50%;
}
.isClose:before {
content: '关闭';
color: #999;
position: absolute;
top: 3px;
left: 23px;
}
.isClose:after {
content: '';
background-color: #d2d2d2;
width: 16px;
height: 16px;
position: absolute;
top: 4px;
left: 5px;
border-radius: 50%;
}
.wrap-inline-btn:hover {
text-decoration: underline;
}
.close-sku-code-btn {
cursor: pointer;
color: #999;
padding: 5px 8px;
background-color: white;
position: relative;
display: inline-block;
}
.close-sku-code-btn::selection {
background-color: transparent;
}
.close-sku-code-btn:hover {
color: #666;
}
.close-sku-code-btn:active {
color: #999;
transform: scale(0.95);
}
</style>
</head>
<body>
<form id="formSet" v-cloak class="layui-form" enctype="multipart/form-data"
style="display: block;padding: 30px 30px 150px;font-size: 12px;">
<div class="table_title">基本信息</div>
<div class="formWrap">
<div class="gA_inner layui-form-item">
<span class="layui-form-label"><i>*</i>商品类别:</span>
<div class="layui-input-inline" style="width: 190px;">
<select name="person1" id="person1" lay-filter="person1">
<option value="">选择一级分类</option>
<volist name="class_name" id="class_name">
<option value="{$class_name['id']}">{$class_name['class_name']}</option>
</volist>
</select>
</div>
<div class="layui-input-inline class2" style="width: 190px;display: none;">
<select name="person2" id="person2" lay-filter="person2">
<option value="">选择二级分类</option>
</select>
</div>
<div class="layui-input-inline class3" style="width: 190px;display: none;">
<select name="person3" id="person3" lay-filter="person3">
<option value="">选择三级分类</option>
</select>
</div>
</div>
<div class="gA_inner layui-form-item">
<span class="layui-form-label">供货商:</span>
<div class="layui-input-inline" style="width: 190px;">
<select name="supplier_id" id="supplier_id" class="supplier layui-input">
<option value="">--选择供货商--</option>
<volist name="info" id="vo">
<option value="{$vo.id}">{$vo.supplier_name}</option>
</volist>
</select>
</div>
</div>
<div class="gA_inner layui-form-item">
<span class="layui-form-label">标签:</span>
<div class="layui-input-inline" style="width: 190px;">
<select name="label_id" id="label_id" class="supplier layui-input">
<option value="">--选择标签--</option>
<volist name="label" id="vo">
<option value="{$vo.id}">{$vo.label_name}</option>
</volist>
</select>
<div class="wrap-inline">
<i>如开启标签打印,WIFI打印机将会根据标签打印订单</i>
</div>
</div>
</div>
<div class="gA_inner layui-form-item">
<span class="layui-form-label">商品条码:</span>
<div class="layui-input-inline">
<input type="" name="goods_code" id="goods_code" v-model="goodsCode" @input="inputGoodsCode(goodsCode)"
style="display: inline-block;margin-left: 0" class="layui-input"/>
<div class="wrap-inline">
<span class="wrap-inline-btn" id="ckeckgoods">检测条码</span>
<i>无码的商品可以</i>
<span class="wrap-inline-btn" @click="getAutoCode">自动获取条码</span>
</div>
</div>
</div>
<div class="gA_inner layui-form-item">
<span class="layui-form-label"><i>*</i>商品名称:</span>
<div class="layui-input-inline">
<input type="" name="goods_name" id="goods_name" value="" class="layui-input"/>
</div>
</div>
<div class="gA_inner layui-form-item">
<span class="layui-form-label">品牌:</span>
<div class="layui-input-inline">
<input type="" name="goods_brand" id="goods_brand" value="" class="layui-input"/>
</div>
</div>
<div class="gA_inner layui-form-item">
<span class="layui-form-label"><i>*</i>商品货号:</span>
<div class="layui-input-inline">
<input type="" name="good_number" id="auto_num" maxlength="10" v-model="goodsNumber"
@input="inputGoodsNumber(goodsNumber)" class="layui-input"/>
<div class="wrap-inline">
<i style="line-height: 14px;"><strong style="font-size: 12px;color: #666;">称重商品</strong>货号建议长度最大为5,即小于等于99999,大于这个值的货号在电子秤上无法识别&nbsp;&nbsp;</i>
<span class="wrap-inline-btn" @click="getAutoNum">自动获取货号</span>
</div>
</div>
</div>
<div class="gA_inner layui-form-item">
<span class="layui-form-label">PLU秤序号:</span>
<div class="layui-input-inline">
<input type="" name="plu_code" id="plu_code" value=""
style="display: inline-block;margin-left: 0" class="layui-input"
onkeyup="value=this.value.replace(/^[0]|\D/,'')" maxlength="4"/>
<div class="wrap-inline">
<i>称重商品建议都填写,不填写无法一键上传到电子秤(取值范围:1-9999)</i>
</div>
</div>
</div>
<div class="gA_inner layui-form-item">
<span class="layui-form-label">商品库存:</span>
<div class="layui-input-inline">
<input type="" name="goods_num" id="goods_num" onkeyup="value=value.replace(/[^\d.]/g,'')"
class="layui-input"/>
<div class="wrap-inline">
<i>称重商品按照kg作为库存</i>
</div>
</div>
</div>
<div class="gA_inner layui-form-item">
<span class="layui-form-label">单位:</span>
<div class="layui-input-inline">
<input type="" name="company" id="company" value="" placeholder="商品单位" class="layui-input">
</div>
</div>
<div class="gA_inner layui-form-item">
<span class="layui-form-label">规格:</span>
<div class="layui-input-inline">
<input type="" name="specifications" id="specifications" value="" placeholder="商品规格"
class="layui-input"/>
</div>
</div>
<div class="gA_inner layui-form-item">
<span class="layui-form-label">商城排序:</span>
<div class="layui-input-inline">
<input type="" name="goods_order" id="goods_order" onkeyup="value=value.replace(/[^\d.]/g,'')"
class="layui-input"/>
<div class="wrap-inline">
<i>商城默认排序<i style="font-weight: bold;color: #666">正序</i>(默认为1)</i>
</div>
</div>
</div>
<div class="gA_inner layui-form-item">
<span class="layui-form-label">商品产地:</span>
<div class="layui-input-inline">
<input type="text" name="goods_yieldly" lay-verify="goods_yieldly" value="" placeholder="商品产地" autocomplete="off" class="layui-input">
</div>
</div>
<div class="gA_inner layui-form-item">
<span class="layui-form-label">生产日期:</span>
<div class="layui-input-inline">
<input type="text" name="production_date" id="production_date" lay-verify="production_date"
value="" placeholder="生产日期" autocomplete="off" class="layui-input">
</div>
</div>
<div class="gA_inner layui-form-item">
<span class="layui-form-label">保质期:</span>
<div class="layui-input-inline">
<input type="" name="shelf_life" id="shelf_life" value=""
onkeyup="value=value.replace(/[^\d]/g,'')"
class="layui-input" placeholder="商品保质期"/>
<div class="layui-input-block">
<input type="radio" name="shelf_lifer" value="d" title="天">
<input type="radio" name="shelf_lifer" value="m" title="月">
<input type="radio" name="shelf_lifer" value="y" title="年">
<input type="radio" name="shelf_lifer" value="h" title="时">
</div>
</div>
</div>
<div class="gA_inner layui-form-item">
<span class="layui-form-label"><i>*</i>库存超量:</span>
<div class="layui-input-inline">
<input type="" name="more_num" id="more_num" onkeyup="value=value.replace(/[^\d.]/g,'')"
class="layui-input"/>
<div class="wrap-inline">
<i>称重商品超量按照kg作为参考</i>
</div>
</div>
</div>
<div class="gA_inner layui-form-item">
<span class="layui-form-label"><i>*</i>库存预警:</span>
<div class="layui-input-inline">
<input type="" name="less_num" id="less_num" onkeyup="value=value.replace(/[^\d.]/g,'')"
class="layui-input"/>
<div class="wrap-inline">
<i>称重商品预警按照kg作为参考</i>
</div>
</div>
</div>
<div class="gA_inner1 layui-form-item">
<span class="layui-form-label"></span>
<input type="checkbox" name="issellonline" value="1" title="商城出售" class="layui-input"/>
<i>商城出售请注意上传商品图片</i>
</div>
<div class="gA_inner1 layui-form-item">
<span class="layui-form-label"></span>
<input type="checkbox" name="vip_retail_state" id="can_exchange_retail" value="1" title="线下折扣"
class="layui-input"/>
<i>开启线下折扣则表示会员可以折扣购买该商品(店内)</i>
</div>
<div class="gA_inner1 layui-form-item">
<span class="layui-form-label"></span>
<input type="checkbox" name="vip_online_state" id="can_exchange_online" value="1" title="线上折扣"
class="layui-input"/>
<i>开启线上折扣则表示会员可以折扣购买该商品(小程序商城)</i>
</div>
<div class="gA_inner1 layui-form-item">
<span class="layui-form-label"></span>
<input type="checkbox" name="cansplit" id="cansplit" value="1" title="是否拆分"/>
<div class="layui-input-inline" style="width:auto;">
<i>可分成小件商品出售的商品可拆分(具体小件商品和小件商品数量请到拆分商品编辑)
<strong>称重商品无法拆分</strong>
</i>
</div>
</div>
<div class="gA_inner1" id="weightApp">
<span class="layui-form-label"></span>
<div class="checkbox-label" :class="isCanChangeWeight?'checkbox-label-checked':''"
@click="changeWeight">
<span>是否称重</span>
</div>
<input type="text" class="opacity" name="can_exchange_weigh" :value="isCanChangeWeight?'on':'off'"
id="can_exchange_weigh"/>
<i>开启称重则表示此商品会按照购买重量计价(默认为1kg的重量,收银机不支持规格与称重并存,如开启则称重优先,不建议两者同时开启)</i>
</div>
<div class="gA_inner1 layui-form-item">
<span class="layui-form-label"><i>*</i>商品状态:</span>
<div class="layui-input-inline" style="width:auto;">
<input type="radio" name="status" value="0" title="上架" checked="" class="layui-input">
<input type="radio" name="status" value="1" title="下架" class="layui-input">
</div>
</div>
</div>
<div class="table_title">价格</div>
<div class="formWrap">
<div class="gA_inner layui-form-item">
<span class="layui-form-label"><i>*</i>商品进价:</span>
<div class="layui-input-inline ">
<input type="" name="purch_price" id="purch_price" value=""
onkeyup="value=value.replace(/[^\d\.]/g,'')" class="layui-input"/>
</div>
</div>
<div class="gA_inner layui-form-item">
<span class="layui-form-label"><i>*</i>店内零售价:</span>
<div class="layui-input-inline">
<input type="" name="retail_price" id="retail_price" value=""
onkeyup="value=value.replace(/[^\d\.]/g,'')" class="layui-input"/>
</div>
</div>
<div class="gA_inner layui-form-item">
<span class="layui-form-label">店内会员价:</span>
<div class="layui-input-inline">
<input type="text" name="store_mem_price" v-model="store_mem_price" class="layui-input"
:readonly="isOpenShopVipStatus?false:true" onkeyup="value=value.replace(/[^\d\.]/g,'')"/>
</div>
<div class="layui-form-item layui-input-block keys" style="margin-left: 15px;">
<div style="margin-top: 2px;" class="status" :class="isOpenShopVipStatus?'isOpen':'isClose'"
@click="isOpenShopVipStatus=!isOpenShopVipStatus"></div>
<input type="text" class="opacity" name="store_mem_status" :value="isOpenShopVipStatus?1:2">
</div>
</div>
<div class="gA_inner layui-form-item">
<span class="layui-form-label"><i>*</i>商城零售价:</span>
<div class="layui-input-inline">
<input type="" name="online_price" id="online_price" value=""
onkeyup="value=value.replace(/[^\d\.]/g,'')" class="layui-input"/>
</div>
</div>
<div class="gA_inner layui-form-item">
<span class="layui-form-label">商城会员价:</span>
<div class="layui-input-inline">
<input type="text" name="shop_mem_price" v-model="shop_mem_price" class="layui-input"
:readonly="isOpenOnlineVipStatus?false:true" onkeyup="value=value.replace(/[^\d\.]/g,'')"/>
</div>
<div class="layui-form-item layui-input-block keys" style="margin-left: 15px;">
<div style="margin-top: 2px;" class="status" :class="isOpenOnlineVipStatus?'isOpen':'isClose'"
@click="OpenOnlineVipStatus"></div>
<input type="text" class="opacity" name="shop_mem_status" :value="isOpenOnlineVipStatus?1:2">
</div>
</div>
</div>
<div class="table_title">规格</div>
<div class="formWrap">
<div class="gA_inner layui-form-item">
<span class="layui-form-label">是否开启规格:</span>
<div class="layui-input-inline" style="text-align: left;">
<div class="status" :class="isOpenSku?'isOpen':'isClose'" @click="openSku"></div>
<input type="text" class="opacity" name="attribute" :value="isOpenSku?2:1">
<i>规格商品以规格总库存为准(收银机不支持规格与称重并存,如开启则称重优先,不建议两者同时开启)</i>
</div>
</div>
<div class="gA_inner layui-form-item sku" v-if='isOpenSku'>
<span class="layui-form-label">是否自动编码:</span>
<div class="layui-input-inline" style="text-align: left;">
<div style="display: flex;align-items: center;">
<div class="status" :class="isAutoCode&&isOpenSku?'isOpen':'isClose'" @click="autoCode"></div>
<span style="margin-left: 10px" class="search-sku-list-btn" v-if="isAutoCode" @click="doAutoCode">再次编号</span>
</div>
<input type="text" class="opacity" name="attribute" :value="isOpenSku?2:1">
<i>将根据商品条码来自动给规格商品编码(若不填写商品条码,则不会自动编码)</i>
</div>
</div>
<div v-cloak v-if="isOpenSku">
<div class="gA_inner layui-form-item">
<span class="layui-form-label">规格设置:</span>
<div class="sku-attr-box">
<div v-for="(attr,index) in skuAttr" class="sku-attr-list">
<div class="sku-attr-title">
<div style="width: 190px;">
<select :lay-filter="'sku_attr_filter_'+index" class="sku-select" lay-search>
<option :value="'0-'+index+'-0'"
:selected="attr.id==0?'selected':''"></option>
<option v-for="(it,j) in skuAttrList" :value="it.id+'-'+index+'-'+j"
v-if="judge(index,it.id)" :selected="attr.id==it.id?'selected':''">{{it.name}}</option>
</select>
</div>
<div v-if="attr.id!=0" class="search-sku-list-con">
<input class="search-sku-list" v-model="attr.searchSkuListName"
@input="inputSkuListName(index)"
@keyup.enter.exact="sureSearchSkuList(index)" type="text"
placeholder="搜索或添加规格">
<span class="search-sku-list-btn" @click="sureSearchSkuList(index)">添加</span>
</div>
<div class="del-sku-attr" @click="delSkuItem(index)">x</div>
</div>
<div class="sku-list-box">
<div class="sku-list-name-box" v-for="(item,i) in attr.list"
@click="checkSkuList(index,i)" :class="item.checked?'check-sku-list':''">{{item.name}}</div>
</div>
</div>
<div class="sku-attr-list">
<div class="sku-attr-title">
<div v-if="skuAttr.length<4" @click="addSkuAttr" class="add-sku-attr">添加规格属性</div>
<div v-else class="add-sku-attr-disabled">添加规格属性</div>
<div v-if="skuAttr.length<4" @click="addNewSkuAttr" class="add-sku-attr">新增规格属性
</div>
<div v-else class="add-sku-attr-disabled">新增规格属性</div>
</div>
</div>
</div>
</div>
<div class="gA_inner layui-form-item">
<span class="layui-form-label">规格信息:</span>
<div style="width: calc(100% - 130px);max-width: 900px;">
<table class="layui-table">
<colgroup>
<col width="50">
<col v-for="(title,index) in skuAttr" width="80">
<col width="90">
<col width="100">
<col width="50">
<col width="50">
<col width="50">
<col width="50">
<col width="50">
<col width="50">
<col width="50">
<col width="50">
</colgroup>
<thead>
<tr>
<th rowspan="2" style="padding: 0;text-align: center;">序号</th>
<th v-if="skuAttr.length" :colspan="skuAttr.length">规格名称</th>
<th rowspan="2">规格图片</th>
<th>规格条码</th>
<th rowspan="2">进价</th>
<th rowspan="2">零售价</th>
<th rowspan="2">店内会员价</th>
<th rowspan="2">商城价</th>
<th rowspan="2">商城会员价</th>
<th rowspan="2">单件对应库存</th>
<th rowspan="2">库存</th>
<th rowspan="2">操作</th>
</tr>
<tr>
<th v-for="(title,index) in skuAttr">{{title.name}}</th>
<th>
<span class="close-sku-code-btn" @click="closeAllSkuCode">一键清空</span>
</th>
</tr>
</thead>
<tbody id="attrData">
<tr v-for="(list,index) in skuList">
<td style="padding: 0;text-align: center;">{{index+1*1}}</td>
<td v-for="(name,i) in list.name">
<span>{{name}}</span>
</td>
<td>
<label class="file_label">
<input class="skuFileImg" type="file" :name="'sku_img_'+index"
placeholder="选择图片"
accept="image/png,image/jpeg"
value="" @change="fileImage(index)"/>
<img :src="list.goods_img">
</label>
</td>
<td>
<input class="attrInput"
:class="skuIndex==index&&actType=='code'?'layui-input layui-table-edit':''"
@focus="inputFocus(index,'code')" @blur="inputBlur()" type="text"
v-model="list.sku_code">
</td>
<td>
<input class="attrInput"
:class="skuIndex==index&&actType=='purch_price'?'layui-input layui-table-edit':''"
@focus="inputFocus(index,'purch_price')" @blur="inputBlur()" type="text"
@input="priceChange(index,list.purch_price,1)"
v-model="list.purch_price">
</td>
<td>
<input class="attrInput"
:class="skuIndex==index&&actType=='retail_price'?'layui-input layui-table-edit':''"
@focus="inputFocus(index,'retail_price')" @blur="inputBlur()" type="text"
@input="priceChange(index,list.retail_price,2)"
v-model="list.retail_price">
</td>
<td>
<input class="attrInput"
:class="skuIndex==index&&actType=='store_mem_price'?'layui-input layui-table-edit':''"
@focus="inputFocus(index,'store_mem_price')" @blur="inputBlur()" type="text"
@input="priceChange(index,list.store_mem_price,3)"
v-model="list.store_mem_price">
</td>
<td>
<input class="attrInput"
:class="skuIndex==index&&actType=='online_price'?'layui-input layui-table-edit':''"
@focus="inputFocus(index,'online_price')" @blur="inputBlur()" type="text"
@input="priceChange(index,list.online_price,4)"
v-model="list.online_price">
</td>
<td>
<input class="attrInput"
:class="skuIndex==index&&actType=='shop_mem_price'?'layui-input layui-table-edit':''"
@focus="inputFocus(index,'shop_mem_price')" @blur="inputBlur()"
type="text"
@input="priceChange(index,list.shop_mem_price,5)"
v-model="list.shop_mem_price">
</td>
<td>
<input class="attrInput"
:class="skuIndex==index&&actType=='sku_num'?'layui-input layui-table-edit':''"
@focus="inputFocus(index,'sku_num')" @blur="inputBlur()" type="text"
@input="numberChange(index,list.sku_num)"
v-model="list.sku_num">
</td>
<td>
<input class="attrInput"
:class="skuIndex==index&&actType=='goods_num'?'layui-input layui-table-edit':''"
@focus="inputFocus(index,'goods_num')" @blur="inputBlur()" type="text"
oninput="value=this.value.replace(/\D/,'')"
onkeyup="value=this.value.replace(/\D/,'')"
v-model="list.goods_num">
</td>
<td>
<span class="sku-list-del" @click="delSku(index)">删除</span>
</td>
</tr>
<tr v-if="!skuList.length">
<td style="text-align: center;height: 40px;" :colspan="11+skuAttr.length">未选择规格</td>
</tr>
</tbody>
</table>
</div>
</div>
<div class="add-new-sku-box" v-if="showAddNewSkuAttr">
<div class="add-new-sku-center">
<span>规格名称:</span>
<input class="add-new-sku-input" v-model="newSkuName" @input="inputSkuAttrName"
@keyup.enter.exact="sureAddSkuAttr" type="text">
<span @click="sureAddSkuAttr" class="add-new-sku-sure-btn">添加</span>
<div class="cancel-btn" @click="cancelAddSkuAttr">x</div>
</div>
</div>
</div>
</div>
<div class="table_title">图片</div>
<div class="formWrap">
<!--轮播图-->
<div class="gA_inner layui-form-item" style="align-items: flex-start;">
<div class="gA_inner03" style="white-space: nowrap;padding-top: 30px;margin-right: 0">
<span class="layui-form-label">轮播图:</span>
</div>
<div>
<div class="allPics">
<input type="hidden" id="all_pics" name="all_pics" value="1">
<label class="file_label_box">
<input type="file" name="goods_banner_0" index="0" placeholder="选择图片"
accept="image/png,image/jpeg"
value=""/>
<img src="__PUBLIC__/images/add-icon.png">
</label>
</div>
<i style="display: block;white-space: pre-wrap;">建议图片大小 414 x 414(或者更大尺寸的等比例图片)</i>
</div>
</div>
<div class="gA_inner layui-form-item">
<div class="gA_inner03" style="margin-right: 0">
<span class="layui-form-label">商品封面图:</span>
</div>
<div>
<label class="goods-img-1">
<input onchange="changepic(this)" type="file" name="goods_image" index="0" placeholder="选择图片"
accept="image/png,image/jpeg"
value=""/>
<img id="image_upload" src="__PUBLIC__/images/add-icon.png">
</label>
<i style="display: block">建议图片大小190*190(或者更大尺寸的等比例图片)</i>
</div>
</div>
<div class="gA_inner layui-form-item" style="align-items: flex-start;">
<div class="gA_inner03" style="margin-right: 0">
<span class="layui-form-label">图文详情:</span>
</div>
<div>
<textarea id="editor" type="text/plain" style="width:600px;height: 400px;"
name="details"></textarea>
</div>
</div>
</div>
</form>
<div id="footerbox" style="">
<button type="button" id="create" class="layui-btn"
style="background: #1A94E6 !important;color: white !important;">提交
</button>
<button type="button" class="layui-btn layui-btn-primary" id="close">返回上一页</button>
</div>
<div id="checkgoodsalert" style="display: none;">
<form class="layui-form" id="checkgoodsform" lay-filter="checkgoodsform"
style="padding: 20px;box-sizing: border-box;">
<div class="layui-form-item" style="margin-bottom: 10px;">
<label class="layui-form-label">名称</label>
<div class="layui-input-inline">
<input type="text" name="name" placeholder="" autocomplete="off" class="layui-input" readonly>
</div>
</div>
<div class="layui-form-item" style="margin-bottom: 10px;">
<label class="layui-form-label">规格</label>
<div class="layui-input-inline">
<input type="text" name="specification" placeholder="" autocomplete="off" class="layui-input" readonly>
</div>
</div>
<div class="layui-form-item" style="margin-bottom: 10px;">
<label class="layui-form-label">单位</label>
<div class="layui-input-inline">
<input type="text" name="unit" placeholder="" autocomplete="off" class="layui-input" readonly>
</div>
</div>
</form>
</div>
</body>
<script type="text/javascript" charset="utf-8" src="__PUBLIC__/UEditor/ueditor.config.js"></script>
<script type="text/javascript" charset="utf-8" src="__PUBLIC__/UEditor/ueditor.all.js"></script>
<script>
var ue = UE.getEditor('editor');
</script>
<script src="__PUBLIC__/jquery/js/jquery.min.js"></script>
<script type="text/javascript" src="__PUBLIC__/layui-v2.4.3/layui/layui.js"></script>
<script src="__PUBLIC__/vue/js/vue2.5.16.js"></script>
<script type="text/javascript">
var resets = function () {
document.getElementById("formEdit").reset()
}
var layer;
var app = new Vue({
el: '#formSet',
data: function () {
return {
skuList: [],
actType: '',
skuIndex: -1,
skuAttr: [],//已选规格
skuAttrList: [],//所有规格
showAddNewSkuAttr: false,
newSkuName: '',//新建规格
isCanChangeWeight: false,
isOpenSku: false,
isAutoCode: false,
goodsCode: '',
goodsNumber: '',
skuCodeList: [0],
isOpenOnlineVipStatus: false,
isOpenShopVipStatus: false,
shop_mem_price: '',
store_mem_price: ''
}
},
methods: {
OpenOnlineVipStatus: function () {
this.isOpenOnlineVipStatus = !this.isOpenOnlineVipStatus;
},
closeAllSkuCode: function () {
var that = this;
layer.confirm('确认清空所有规格条码吗?', function () {
var skuList = JSON.parse(JSON.stringify(that.skuList));
var count = 0;
for (var i = 0; i < skuList.length; i++) {
skuList[i].sku_code = '';
count++;
}
if (count > 0) {
that.skuList = [];
that.skuList = skuList;
that.skuCodeList = [0];
layer.msg('清除成功', {time: 800});
} else {
layer.msg('暂无可清除条码', {time: 1500});
}
})
},
doAutoCode: function () {
var skuList = JSON.parse(JSON.stringify(this.skuList));
var count = 0;
for (var i = 0; i < skuList.length; i++) {
if (skuList[i].sku_code == '') {
skuList[i].sku_code = this.goodsCode + '-' + (this.skuCodeList[this.skuCodeList.length - 1] + 1);
this.skuCodeList.push(this.skuCodeList[this.skuCodeList.length - 1] + 1);
count++;
}
}
if (count > 0) {
this.skuList = [];
this.skuList = skuList;
layer.msg('编号成功');
}
},
getAutoCode: function () {
var that = this;
$.post("{:U('Mgoods/getAutoGoodsCode')}", function (res) {
if (res.status == 1) {
layer.msg(res.msg, {time: 1000, icon: 1})
that.goodsCode = res.code;
} else {
layer.msg(res.msg, {time: 1000})
}
})
},
getAutoNum: function () {
var that = this;
$.ajax({
url: "{:U('auto_number')}",
type: "POST",
success: function (data) {
if (data.status == 1) {
layer.msg(data.msg, {icon: 1, time: 1000});
that.goodsNumber = data.info
} else {
layer.msg(data.msg, {time: 1000});
}
}
})
},
inputGoodsNumber: function (num) {
this.goodsNumber = num;
},
inputGoodsCode: function (num) {
this.goodsCode = num;
},
autoCode: function () {
if (!String(this.goodsCode).length) {
layer.msg('请先设置商品条码', {time: 1000});
return;
}
this.isAutoCode = !this.isAutoCode;
},
changeWeight: function () {
this.isCanChangeWeight = !this.isCanChangeWeight;
},
openSku: function () {
this.isOpenSku = !this.isOpenSku;
},
addSkuAttr: function () {
var obj = {
list: [],
name: '',
id: 0,
searchSkuListName: '',//新建规格值
}
var that = this;
var skuAttr = JSON.parse(JSON.stringify(this.skuAttr));
skuAttr.push(obj);
this.skuAttr = [];
this.skuAttr = skuAttr;
this.$nextTick(function () {
that.renderFormSku();
that.changeSkuList();
}.bind(this));
},
checkSkuList: function (index, i) {
var skuAttr = JSON.parse(JSON.stringify(this.skuAttr));
skuAttr[index].list[i].checked = !skuAttr[index].list[i].checked;
this.skuAttr = [];
this.skuAttr = skuAttr;
this.$nextTick(function () {
this.addOrDelSkuAttrList(index, i);
}.bind(this));
},
addNewSkuAttr: function () {
this.showAddNewSkuAttr = true;
},
cancelAddSkuAttr: function () {
this.showAddNewSkuAttr = false;
},
inputSkuAttrName: function () {
var name = this.newSkuName;
name = name.replace(',', '');
this.newSkuName = name.replace(' ', '');
},
inputSkuListName: function (index) {
var name = this.skuAttr[index].searchSkuListName;
name = name.replace(',', '');
this.skuAttr[index].searchSkuListName = name.replace(' ', '');
},
sureAddSkuAttr: function () {
//确认添加规格
var that = this;
if (that.newSkuName.length) {
$.post("{:U('Attributes/addSkuAttr_forAddMGoods')}", {
name: that.newSkuName
}, function (res) {
if (res.status == 1) {
var skuAttrList = JSON.parse(JSON.stringify(that.skuAttrList));
var obj = {
id: res.id,
name: that.newSkuName,
list: [],
searchSkuListName: ''
};
skuAttrList.unshift(obj);
that.skuAttrList = [];
that.skuAttrList = skuAttrList;
var skuAttr = JSON.parse(JSON.stringify(that.skuAttr));
skuAttr.push(obj);
that.skuAttr = [];
that.skuAttr = skuAttr;
that.newSkuName = '';
that.showAddNewSkuAttr = false;
that.$nextTick(function () {
that.renderFormSku();
that.changeSkuList();
})
} else {
layer.msg(res.msg, {time: 800})
}
})
} else {
layer.msg('请输入规格名称', {time: 500})
}
},
sureSearchSkuList: function (index) {
if (this.skuAttr[index].searchSkuListName.length) {
var skuAttr = JSON.parse(JSON.stringify(this.skuAttr));
var flag = true;
console.log(skuAttr[index].list)
for (var i = 0; i < skuAttr[index].list.length; i++) {
console.log(skuAttr[index].list[i].checked);
if (skuAttr[index].searchSkuListName == skuAttr[index].list[i].name && !skuAttr[index].list[i].checked) {
skuAttr[index].list[i].checked = true;
skuAttr[index].searchSkuListName = '';
this.skuAttr = [];
this.skuAttr = skuAttr;
this.$nextTick(function () {
this.addOrDelSkuAttrList(index, i);
}.bind(this));
flag = false;
break;
} else if (skuAttr[index].searchSkuListName == skuAttr[index].list[i].name) {
layer.msg('已选择同名的规格', {time: 800});
flag = false;
break;
}
}
if (flag) {
//需要重新添加
var that = this;
$.post("{:U('Attributes/addSkuList_forAddMGoods')}", {
name: skuAttr[index].searchSkuListName,
id: skuAttr[index].id
}, function (res) {
if (res.status == 1) {
var obj = {
id: res.id,
name: skuAttr[index].searchSkuListName,
checked: true
};
skuAttr[index].list.push(obj);
skuAttr[index].searchSkuListName = '';
that.skuAttr = [];
that.skuAttr = skuAttr;
that.$nextTick(function () {
that.addOrDelSkuAttrList(index, skuAttr[index].list.length - 1);
}.bind(this));
} else {
layer.msg(res.msg, {time: 1000});
}
})
}
} else {
layer.msg('请输入名称', {time: 800})
}
},
delSkuItem: function (index) {
this.skuAttr.splice(index, 1);
var that = this;
this.$nextTick(function () {
that.renderFormSku();
that.changeSkuList();
}.bind(this));
},
delSku: function (index) {
this.skuList.splice(index, 1);
},
inputFocus: function (index, code) {
this.skuIndex = index;
this.actType = code;
},
inputBlur: function () {
this.skuIndex = -1;
this.actType = '';
},
numberChange: function (index, val) {
var reg = /[^\d\.]/g;
if (reg.test(val)) {
val = val.replace(/[^\d\.]/g, '');
}
if (val.indexOf('.') < val.length - 4) {
console.log(val);
val.substr(0, val.length - 2);
}
if (parseFloat(val) < 0.001 && parseFloat(val) != 0) {
val = 0.001;
}
this.skuList[index].sku_num = val;
},
priceChange: function (index, val, type) {
var reg = /[^\d\.]/g;
if (reg.test(val)) {
val = val.replace(/[^\d\.]/g, '');
}
if (val.indexOf('.') < val.length - 3) {
console.log(val);
val.substr(0, val.length - 2);
}
switch (type) {
case 1:
this.skuList[index].purch_price = val;
break;
case 2:
this.skuList[index].retail_price = val;
break;
case 3:
this.skuList[index].store_mem_price = val;
break;
case 4:
this.skuList[index].online_price = val;
break;
case 5:
this.skuList[index].vip_online_price = val;
break;
}
},
addOrDelSkuAttrList: function (index, index_1) {
var skuAttr = JSON.parse(JSON.stringify(this.skuAttr));
var skuList = JSON.parse(JSON.stringify(this.skuList));
var purch_price = $("input[name='purch_price']").val();
var online_price = $("input[name='online_price']").val();
var retail_price = $("input[name='retail_price']").val();
if (this.isOpenOnlineVipStatus) {
var vip_online_price = this.shop_mem_price;
}
if (this.isOpenShopVipStatus) {
var store_mem_price = this.store_mem_price;
}
if (skuAttr.length == 1) {
if (skuAttr[0].list[index_1].checked) {
if (this.isAutoCode) {
var sku_code = this.goodsCode + '-' + (this.skuCodeList[this.skuCodeList.length - 1] + 1);
this.skuCodeList.push(this.skuCodeList[this.skuCodeList.length - 1] + 1);
} else {
var sku_code = '';
}
var obj = {
goods_img: "__PUBLIC__/Retail/goods/default.png",
old_img: '',
purch_price: purch_price ? purch_price : '',
online_price: online_price ? online_price : '',
retail_price: retail_price ? retail_price : '',
shop_mem_price: vip_online_price ? vip_online_price : '',
store_mem_price: store_mem_price ? store_mem_price : '',
sku_code: sku_code,
name: [skuAttr[0].list[index_1].name],
id: [skuAttr[0].list[index_1].id],
goods_num: '',
sku_num: 1
};
skuList.push(obj);
} else {
for (var j = skuList.length - 1; j >= 0; j--) {
if (skuList[j].id[0] == skuAttr[0].list[index_1].id) {
skuList.splice(j, 1);
}
}
}
} else if (skuAttr.length == 2) {
if (skuAttr[index].list[index_1].checked) {
var index_2 = index == 1 ? 0 : 1;
for (var i = 0; i < skuAttr[index_2].list.length; i++) {
if (skuAttr[index_2].list[i].checked) {
if (index == 0) {
var name = [skuAttr[index].list[index_1].name, skuAttr[index_2].list[i].name];
var id = [skuAttr[index].list[index_1].id, skuAttr[index_2].list[i].id];
} else {
var name = [skuAttr[index_2].list[i].name, skuAttr[index].list[index_1].name];
var id = [skuAttr[index_2].list[i].id, skuAttr[index].list[index_1].id];
}
if (this.isAutoCode) {
var sku_code = this.goodsCode + '-' + (this.skuCodeList[this.skuCodeList.length - 1] + 1);
this.skuCodeList.push(this.skuCodeList[this.skuCodeList.length - 1] + 1);
} else {
var sku_code = '';
}
var obj = {
goods_img: "__PUBLIC__/Retail/goods/default.png",
old_img: '',
purch_price: purch_price ? purch_price : '',
online_price: online_price ? online_price : '',
retail_price: retail_price ? retail_price : '',
shop_mem_price: vip_online_price ? vip_online_price : '',
store_mem_price: store_mem_price ? store_mem_price : '',
sku_code: sku_code,
name: name,
id: id,
goods_num: '',
sku_num: 1
};
skuList.push(obj);
}
}
} else {
var id = skuAttr[index].list[index_1].id;
for (var j = skuList.length - 1; j >= 0; j--) {
if (skuList[j].id[0] == id || skuList[j].id[1] == id) {
skuList.splice(j, 1);
}
}
}
} else if (skuAttr.length == 3) {
if (skuAttr[index].list[index_1].checked) {
var index_2 = index == 0 ? 1 : 0;
var index_3 = (index == 0 || index == 1) ? 2 : 1;
for (var i = 0; i < skuAttr[index_2].list.length; i++) {
for (var j = 0; j < skuAttr[index_3].list.length; j++) {
if (skuAttr[index_2].list[i].checked && skuAttr[index_3].list[j].checked) {
var name, id;
if (index == 0) {
name = [skuAttr[index].list[index_1].name, skuAttr[index_2].list[i].name, skuAttr[index_3].list[j].name];
id = [skuAttr[index].list[index_1].id, skuAttr[index_2].list[i].id, skuAttr[index_3].list[j].id];
} else if (index == 1) {
name = [skuAttr[index_2].list[i].name, skuAttr[index].list[index_1].name, skuAttr[index_3].list[j].name];
id = [skuAttr[index_2].list[i].id, skuAttr[index].list[index_1].id, skuAttr[index_3].list[j].id];
} else {
name = [skuAttr[index_2].list[i].name, skuAttr[index_3].list[j].name, skuAttr[index].list[index_1].name];
id = [skuAttr[index_2].list[i].id, skuAttr[index_3].list[j].id, skuAttr[index].list[index_1].id];
}
if (this.isAutoCode) {
var sku_code = this.goodsCode + '-' + (this.skuCodeList[this.skuCodeList.length - 1] + 1);
this.skuCodeList.push(this.skuCodeList[this.skuCodeList.length - 1] + 1);
} else {
var sku_code = '';
}
var obj = {
goods_img: "__PUBLIC__/Retail/goods/default.png",
old_img: '',
purch_price: purch_price ? purch_price : '',
online_price: online_price ? online_price : '',
retail_price: retail_price ? retail_price : '',
shop_mem_price: vip_online_price ? vip_online_price : '',
store_mem_price: store_mem_price ? store_mem_price : '',
sku_code: sku_code,
name: name,
id: id,
goods_num: '',
sku_num: 1
};
skuList.push(obj);
}
}
}
} else {
var id = skuAttr[index].list[index_1].id;
var length = skuList.length - 1;
for (var j = length; j >= 0; j--) {
if (skuList[j].id[0] == id || skuList[j].id[1] == id || skuList[j].id[2] == id) {
skuList.splice(j, 1);
}
}
}
} else if (skuAttr.length == 4) {
if (skuAttr[index].list[index_1].checked) {
var index_2 = index == 0 ? 1 : 0;
var index_3 = (index == 0 || index == 1) ? 2 : 1;
var index_4 = (index == 0 || index == 1 || index == 2) ? 3 : 2;
for (var i = 0; i < skuAttr[index_2].list.length; i++) {
for (var j = 0; j < skuAttr[index_3].list.length; j++) {
for (var k = 0; k < skuAttr[index_4].list.length; k++) {
if (skuAttr[index_2].list[i].checked && skuAttr[index_3].list[j].checked && skuAttr[index_4].list[k].checked) {
var name, id;
if (index == 0) {
name = [skuAttr[index].list[index_1].name, skuAttr[index_2].list[i].name, skuAttr[index_3].list[j].name, skuAttr[index_4].list[k].name];
id = [skuAttr[index].list[index_1].id, skuAttr[index_2].list[i].id, skuAttr[index_3].list[j].id, skuAttr[index_4].list[k].id];
} else if (index == 1) {
name = [skuAttr[index_2].list[i].name, skuAttr[index].list[index_1].name, skuAttr[index_3].list[j].name, skuAttr[index_4].list[k].name];
id = [skuAttr[index_2].list[i].id, skuAttr[index].list[index_1].id, skuAttr[index_3].list[j].id, skuAttr[index_4].list[k].id];
} else if (index == 2) {
name = [skuAttr[index_2].list[i].name, skuAttr[index_3].list[j].name, skuAttr[index].list[index_1].name, skuAttr[index_4].list[k].name];
id = [skuAttr[index_2].list[i].id, skuAttr[index_3].list[j].id, skuAttr[index].list[index_1].id, skuAttr[index_4].list[k].id];
} else {
name = [skuAttr[index_2].list[i].name, skuAttr[index_3].list[j].name, skuAttr[index_4].list[k].name, skuAttr[index].list[index_1].name];
id = [skuAttr[index_2].list[i].id, skuAttr[index_3].list[j].id, skuAttr[index_4].list[k].id, skuAttr[index].list[index_1].id];
}
if (this.isAutoCode) {
var sku_code = this.goodsCode + '-' + (this.skuCodeList[this.skuCodeList.length - 1] + 1);
this.skuCodeList.push(this.skuCodeList[this.skuCodeList.length - 1] + 1);
} else {
var sku_code = '';
}
var obj = {
goods_img: "__PUBLIC__/Retail/goods/default.png",
old_img: '',
purch_price: purch_price ? purch_price : '',
online_price: online_price ? online_price : '',
retail_price: retail_price ? retail_price : '',
shop_mem_price: vip_online_price ? vip_online_price : '',
store_mem_price: store_mem_price ? store_mem_price : '',
sku_code: sku_code,
name: name,
id: id,
goods_num: '',
sku_num: 1
};
skuList.push(obj);
}
}
}
}
} else {
var id = skuAttr[index].list[index_1].id;
var length = skuList.length - 1;
for (var j = length; j >= 0; j--) {
if (skuList[j].id[0] == id || skuList[j].id[1] == id || skuList[j].id[2] == id) {
skuList.splice(j, 1);
}
}
}
}
this.skuList = [];
this.skuList = skuList;
},
changeSkuList: function () {
var skuAttr = JSON.parse(JSON.stringify(this.skuAttr));
this.skuCodeList = [0];
var purch_price = $("input[name='purch_price']").val();
var online_price = $("input[name='online_price']").val();
var retail_price = $("input[name='retail_price']").val();
if (this.isOpenOnlineVipStatus) {
var vip_online_price = this.shop_mem_price;
}
if (this.isOpenShopVipStatus) {
var store_mem_price = this.store_mem_price;
}
var skuList = [];
if (skuAttr.length == 1) {
var list = skuAttr[0].list;
for (var i = 0; i < list.length; i++) {
if (list[i].checked) {
console.log(this.skuCodeList)
if (this.isAutoCode) {
var sku_code = this.goodsCode + '-' + (this.skuCodeList[this.skuCodeList.length - 1] + 1);
this.skuCodeList.push(this.skuCodeList[this.skuCodeList.length - 1] + 1);
} else {
var sku_code = '';
}
var obj = {
goods_img: "__PUBLIC__/Retail/goods/default.png",
purch_price: purch_price ? purch_price : '',
online_price: online_price ? online_price : '',
retail_price: retail_price ? retail_price : '',
vip_online_price: vip_online_price ? vip_online_price : '',
store_mem_price: store_mem_price ? store_mem_price : '',
sku_code: sku_code,
name: [list[i].name],
id: [list[i].id],
goods_num: '',
sku_num: 1
};
skuList.push(obj);
}
}
} else if (skuAttr.length == 2) {
var list1 = skuAttr[0].list;
var list2 = skuAttr[1].list;
for (var i = 0; i < list1.length; i++) {
for (var j = 0; j < list2.length; j++) {
if (list1[i].checked && list2[j].checked) {
if (this.isAutoCode) {
var sku_code = this.goodsCode + '-' + (this.skuCodeList[this.skuCodeList.length - 1] + 1);
this.skuCodeList.push(this.skuCodeList[this.skuCodeList.length - 1] + 1);
} else {
var sku_code = '';
}
var obj = {
goods_img: "__PUBLIC__/Retail/goods/default.png",
purch_price: purch_price ? purch_price : '',
online_price: online_price ? online_price : '',
retail_price: retail_price ? retail_price : '',
vip_online_price: vip_online_price ? vip_online_price : '',
store_mem_price: store_mem_price ? store_mem_price : '',
sku_code: sku_code,
name: [list1[i].name, list2[j].name],
id: [list1[i].id, list2[j].id],
goods_num: '',
sku_num: 1
}
skuList.push(obj);
}
}
}
} else if (skuAttr.length == 3) {
var list1 = skuAttr[0].list;
var list2 = skuAttr[1].list;
var list3 = skuAttr[2].list;
for (var i = 0; i < list1.length; i++) {
for (var j = 0; j < list2.length; j++) {
for (var k = 0; k < list3.length; k++) {
if (list1[i].checked && list2[j].checked && list3[k].checked) {
if (this.isAutoCode) {
var sku_code = this.goodsCode + '-' + (this.skuCodeList[this.skuCodeList.length - 1] + 1);
this.skuCodeList.push(this.skuCodeList[this.skuCodeList.length - 1] + 1);
} else {
var sku_code = '';
}
var obj = {
goods_img: "__PUBLIC__/Retail/goods/default.png",
purch_price: purch_price ? purch_price : '',
online_price: online_price ? online_price : '',
retail_price: retail_price ? retail_price : '',
vip_online_price: vip_online_price ? vip_online_price : '',
store_mem_price: store_mem_price ? store_mem_price : '',
sku_code: sku_code,
name: [list1[i].name, list2[j].name, list3[k].name],
id: [list1[i].id, list2[j].id, list3[k].id],
goods_num: '',
sku_num: 1
}
skuList.push(obj);
}
}
}
}
} else if (skuAttr.length == 4) {
var list1 = skuAttr[0].list;
var list2 = skuAttr[1].list;
var list3 = skuAttr[2].list;
var list4 = skuAttr[3].list;
for (var i = 0; i < list1.length; i++) {
for (var j = 0; j < list2.length; j++) {
for (var k = 0; k < list3.length; k++) {
for (var w = 0; w < list4.length; w++) {
if (list1[i].checked && list2[j].checked && list3[k].checked && list4[w].checked) {
if (this.isAutoCode) {
var sku_code = this.goodsCode + '-' + (this.skuCodeList[this.skuCodeList.length - 1] + 1);
this.skuCodeList.push(this.skuCodeList[this.skuCodeList.length - 1] + 1);
} else {
var sku_code = '';
}
var obj = {
goods_img: "__PUBLIC__/Retail/goods/default.png",
purch_price: purch_price ? purch_price : '',
online_price: online_price ? online_price : '',
retail_price: retail_price ? retail_price : '',
shop_mem_price: vip_online_price ? vip_online_price : '',
store_mem_price: store_mem_price ? store_mem_price : '',
sku_code: sku_code,
name: [list1[i].name, list2[j].name, list3[k].name, list4[w].name],
id: [list1[i].id, list2[j].id, list3[k].id, list4[w].id],
goods_num: '',
sku_num: 1
}
skuList.push(obj);
}
}
}
}
}
}
this.skuList = [];
this.skuList = skuList;
// console.log(skuList)
},
fileImage: function (index) {
if (window.event.target.files.length) {
var imgObj = window.event.target.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 () {
app.skuList[index].goods_img = this.result;
}
}
}
},
renderFormSku: function () {
var that = this;
layui.use('form', function () {
var form = layui.form;//高版本建议把括号去掉,有的低版本,需要加()
form.render();
for (let i = 0; i < that.skuAttr.length; i++) {
form.on('select(sku_attr_filter_' + i + ')', function (obj) {
var arr = obj.value.split('-');
var id = parseInt(arr[0]);
var index = parseInt(arr[1]);
var index1 = parseInt(arr[2]);
if (that.skuAttr[index].id != id) {
var sku = that.skuAttr;
if (id == 0) {
sku[index] = {
list: [],
name: '',
id: 0,
searchSkuListName: ''
}
} else {
sku[index] = {
list: JSON.parse(JSON.stringify(that.skuAttrList[index1].list)),
name: that.skuAttrList[index1].name,
id: that.skuAttrList[index1].id,
searchSkuListName: ''
}
}
that.skuAttr = [];
that.skuAttr = sku;
that.$nextTick(function () {
that.renderFormSku();
that.changeSkuList();
}.bind(this));
}
})
}
});
},
judge: function (index, id) {
var flag = true;
for (var i = 0; i < this.skuAttr.length; i++) {
if (this.skuAttr[i].id == id && index != i) {
flag = false;
}
}
return flag;
}
},
created: function () {
var that = this;
$.post("{:U('Attributes/getSkuAttr')}", {}, function (res) {
that.skuAttrList = res.data;
})
}
})
function renderForm() {
layui.use('form', function () {
var form = layui.form;//高版本建议把括号去掉,有的低版本,需要加()
form.render();
});
}
//建立一個可存取到該file的url
function getObjectURL(file) {
var url = null;
// 下面函数执行的效果是一样的,只是需要针对不同的浏览器执行不同的 js 函数而已
if (window.createObjectURL != undefined) { // basic
url = window.createObjectURL(file);
} else if (window.URL != undefined) { // mozilla(firefox)
url = window.URL.createObjectURL(file);
} else if (window.webkitURL != undefined) { // webkit or chrome
url = window.webkitURL.createObjectURL(file);
}
return url;
}
function changepic(obj) {
console.log(obj.files[0]);
var news_src = getObjectURL(obj.files[0]);
$('#image_upload').attr('src', news_src);
}
$('.allPics').on('click', '.close', function () {
$(this).parents('.file_label_box').remove();
})
//多图上传
$('.allPics').on('change', ".file_label_box>input[type='file']", function () {
console.log(this.files)
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).attr('disabled', true)
$(that).parents('.file_label_box').append(`<span class="close">X</span>`);
var index = parseInt($(that).attr('index'));
var input = `<label class="file_label_box">
<input type="file" index="${index + 1}" name="goods_banner_${index + 1}" placeholder="选择图片" accept="image/png,image/jpeg" value=""/>
<img src="__PUBLIC__/images/add-icon.png">
</label>`;
$('.allPics').append(input);
$('#all_pics').val(parseInt($('#all_pics').val()) + 1);
$(that).attr('disabled', true);
}
}
}
})
layui.use(['table', 'form', 'upload', 'layer', 'laydate'], function () {
var table = layui.table;
var form = layui.form;
layer = layui.layer;
var laydate = layui.laydate; // 日期
//日期
laydate.render({
elem: '#production_date'
});
//重置表单
var reset = function () {
document.getElementById("formSet").reset()
}
var class1_val = '';
var class2_val = '';
form.on('select(person1)', function (data) {
if (class1_val == data.value) {
return;
}
class1_val = data.value;
class2_val = '';
if (data.value == '') {
$('.class2').hide();
$('.class3').hide();
$('#person2').html("<option value=''>选择二级分类</option>");
$('#person3').html("<option value=''>选择三级分类</option>");
renderForm();
} else {
$('.class3').hide();
$('#person2').html("<option value=''>选择二级分类</option>");
$('#person3').html("<option value=''>选择三级分类</option>");
$.post("{:U('Sale/getChildClass')}", {
id: data.value,
type: 2
}, function (res) {
if (res.status == 1) {
for (var i = 0; i < res.data.length; i++) {
var child = `<option value="${res.data[i].id}">${res.data[i].class_name}</option>`;
$('#person2').append(child);
}
$('.class2').fadeIn();
$('#person3').html("<option value=''>选择三级分类</option>");
renderForm();
} else {
$('.class2').hide();
renderForm();
}
})
}
});
form.on('select(person2)', function (data) {
if (class2_val == data.value) {
return;
}
class2_val = data.value;
if (data.value == '') {
$('.class3').hide();
$('#person3>option').remove();
$('#person3').append("<option value=''>选择三级分类</option>");
renderForm();
} else {
$('#person3').html("<option value=''>选择三级分类</option>");
$.post("{:U('Sale/getChildClass')}", {
id: data.value,
type: 3
}, function (res) {
if (res.status == 1) {
for (var i = 0; i < res.data.length; i++) {
var child = `<option value="${res.data[i].id}">${res.data[i].class_name}</option>`;
$('#person3').append(child);
}
$('.class3').fadeIn();
renderForm();
} else {
$('.class3').hide();
renderForm();
}
})
}
});
// 新增商品
$("#create").click(function () {
if ($('#person1').val() == 0 || !$('#person1').val()) {
layer.msg('请选择分类', {time: 1000});
return;
} else if (($('#person2').val() == 0 || !$('#person2').val()) && $('#person2>option').length > 1) {
layer.msg('请选择二级分类', {time: 1000});
return;
} else if (($('#person3').val() == 0 || !$('#person3').val()) && $('#person3>option').length > 1) {
layer.msg('请选择三级分类', {time: 1000});
return;
}
var auto_num = $("#auto_num").val();
var goods_name = $("#goods_name").val();
var goods_num = $("#goods_num").val();
var purch_price = $("#purch_price").val();
var production_date = $("#production_date").val();
var shelf_life = $("#shelf_life").val();
var retail_price = $("#retail_price").val();
var online_price = $("#online_price").val();
var more_num = $("#more_num").val();
var less_num = $("#less_num").val();
var goods_code = $("#goods_code").val();
if (goods_code && goods_code.length >= 18) {
top.layer.msg("商品条码长度不得大于17位", {time: 1000});
return false;
}
auto_num = Trim(auto_num);
if (auto_num == '') {
top.layer.msg("请输入货号", {time: 1000});
return false;
}
goods_name = Trim(goods_name);
if (goods_name == '') {
layer.msg("请输入商品名称", {time: 1000});
return false;
}
goods_num = Trim(goods_num);
if ($("input[name='attribute']:checked").val() == 1 && goods_num == '') {
layer.msg("请输入库存", {time: 1000});
return false;
}
purch_price = Trim(purch_price);
if (purch_price == '') {
layer.msg("请输入进价", {time: 1000});
return false;
}
more_num = Trim(more_num);
if (more_num == '') {
layer.msg("请输入库存超量", {time: 1000});
return false;
}
less_num = Trim(less_num);
if (less_num == '') {
layer.msg("请输入库存预警", {time: 1000});
return false;
}
production_date = Trim(production_date);
if (production_date) {
var reg = /^\d{4}-[0|1]\d-[0|1|2|3]\d$/;
var art = reg.test(production_date);
if (art == false) {
layer.msg("生产日期格式错误", {time: 1000});
return false;
}
}
shelf_life = Trim(shelf_life);
if (shelf_life && !production_date) {
layer.msg("请选择生产日期", {time: 1000});
return false;
}
retail_price = Trim(retail_price);
if (retail_price == '') {
layer.msg("请输入店内零售价", {time: 1000});
return false;
}
online_price = Trim(online_price);
if (online_price == '') {
layer.msg("请输入商城零售价", {time: 1000});
return false;
}
// 商城会员价格
if (app.isOpenOnlineVipStatus && !app.isOpenSku) {
var shop_mem_price = app.shop_mem_price;
if (!shop_mem_price || !parseFloat(shop_mem_price) || parseFloat(shop_mem_price) < 0.01) {
layer.msg("请输入商城会员价", {time: 1000});
return false;
}
}
// 店内会员价格
if (app.isOpenShopVipStatus && !app.isOpenSku) {
var store_mem_price = app.store_mem_price;
if (!store_mem_price || !parseFloat(store_mem_price) || parseFloat(store_mem_price) < 0.01) {
layer.msg("请输入店内会员价", {time: 1000});
return false;
}
}
if (app.isOpenSku && app.skuList.length) {
for (var i = 0; i < app.skuList.length; i++) {
if (!app.skuList[i].purch_price || !app.skuList[i].retail_price || !app.skuList[i].online_price || (!app.skuList[i].shop_mem_price && app.isOpenOnlineVipStatus)) {
layer.msg('请完善第' + (i + 1) + '个规格价格');
return;
}
if (!app.skuList[i].goods_num && app.skuList[i].goods_num != 0 || (parseInt(app.skuList[i].goods_num) != app.skuList[i].goods_num)) {
layer.msg('请完善第' + (i + 1) + '个规格库存');
return;
}
if (!app.skuList[i].sku_code && app.skuList[i].sku_code.length >= 18) {
top.layer.msg("第" + (i + 1) + "个规格规格长度不得大于17位", {time: 1000});
return false;
}
if (app.isOpenOnlineVipStatus && (!parseFloat(app.skuList[i].shop_mem_price) || parseFloat(app.skuList[i].shop_mem_price) < 0.01)) {
top.layer.msg("第" + (i + 1) + "个规格商城会员价有误", {time: 1000});
return false;
} else if (app.isOpenOnlineVipStatus && parseFloat(app.skuList[i].shop_mem_price) > parseFloat(app.skuList[i].online_price)) {
top.layer.msg("第" + (i + 1) + "个规格商城会员价不得大于商城价", {time: 1000});
return false;
}
if (app.isOpenShopVipStatus && (!parseFloat(app.skuList[i].store_mem_price) || parseFloat(app.skuList[i].store_mem_price) < 0.01)) {
top.layer.msg("第" + (i + 1) + "个规格店内会员价有误", {time: 1000});
return false;
} else if (app.isOpenShopVipStatus && parseFloat(app.skuList[i].store_mem_price) > parseFloat(app.skuList[i].retail_price)) {
top.layer.msg("第" + (i + 1) + "个规格店内会员价不得大于店内价", {time: 1000});
return false;
}
}
} else if (app.isOpenSku) {
layer.msg('请选择商品规格');
return;
}
$("input[type='file']").attr('disabled', false);
var formData = new FormData(document.getElementById('formSet'));
if (app.isOpenSku) {
formData.append('skuList', JSON.stringify(app.skuList));
}
layer.confirm('商品添加请注意更新数据', function () {
var index = layer.load();
$.ajax({
url: "{:U('addGoods')}", //图片上传出来的url,返回的是图片上传后的路径,http格式
data: formData,
type: "POST",
cache: false,
contentType: false,
processData: false,
dataType: "json",
success: function (data) {
layer.close(index);
if (data.status == 1) {
layer.msg(data.msg, {
icon: 1,
time: 1000 //1秒关闭(如果不配置,默认是3秒)
}, function () {
location.reload();
window.scrollTo(0,0);
});
} else {
layer.msg(data.msg, {icon: 2});
}
}
});
})
});
$("#close").click(function () {
var index = parent.layer.getFrameIndex(window.name); //先得到当前iframe层的索引
parent.layer.close(index); //再执行关闭
})
// 检测商品
$('#ckeckgoods').click(function () {
var code = $('#goods_code').val();
if (!code) {
layer.msg('请先输入商品条码', {time: 1000})
} else {
$.ajax({
url: "{:U('Retail/Goods/checkgoods')}",
data: {code: code},
type: "post",
success: function (res) {
console.log(res);
if (res.status == 1) {
layer.open({
type: 1,
title: "商品库信息",
content: $('#checkgoodsalert'), //这里content是一个普通的String
area: "500px",
success: function () {
form.val("checkgoodsform", res.data)
},
btn: ['确定使用', '取消'],
btnAlign: 'c',
yes: function (index, layero) {
//do something
$('#goods_name').val(res.data.name);
if (res.data.unit) {
$('#company').val(res.data.unit);
}
if (res.data.specification) {
$('#specifications').val(res.data.specification)
}
layer.close(index); //如果设定了yes回调,需进行手工关闭
}
});
} else {
layer.msg('商品库中暂无此商品', {time: 1500});
}
}, error: function (error) {
layer.alert('错误:' + JSON.stringify(error));
}
})
}
})
})
$('#demo2').on('click', '.delthis', function (e) {
var e = window.event || e;
$(e.target).parent().remove();
})
$('.imgdel').click(function () {
$(this).hidden();
})
$("#addimage").click(function () {
$('#form').submit();
})
function Trim(str) {
str = str + "";
return str.replace(/(^\s*)|(\s*$)/g, "");
}
</script>
</html>