<template> <div class="goods-all"> <!-- 选择商品类目 start --> <el-card class="good-all-type" v-if="!isShowGoodsDetails"> <div slot="header" class="clearfix"> <p class="card-header-title"><span class="blue-block-goods"></span>选择商品所属类目</p> </div> <div> <div> <p class="goods-type-tip">为商品设置正确的类目,能让商品快速的被搜索到</p> </div> <div class="goods-type-options"> <!-- <el-cascader-panel v-model="SSQList" :props='props' @change="SSQChange" ref="ssqCascader"></el-cascader-panel>--> <el-cascader-panel v-model="SSQList" :props='propsOptions' @change="SSQChange" ref="ssqCascader"></el-cascader-panel> </div> <el-button type="primary" class="next-step" :disabled="isNextStep" @click="nextStep">下一步</el-button> </div> </el-card> <!-- 选择商品类目 end --> <!-- 添加商品 start --> <div class="box-card good-details-body" v-if="isShowGoodsDetails" v-loading="goodsLoading"> <div class="floor-nav" id="floorNavList"> <ul class="nav-list"> <li class="nav-list-item" :class="{'floor-item-active': isFIActive === index}" v-for="(item, index) in floorNav" :key="item.id" @click="setFloorNavMountClick(index)">{{ item.name }}</li> </ul> </div> <div class="floor-cont" ref="scrollview"> <!-- 商品信息 --> <div class="floor-item"> <div class="floor-item-box"> <p class="card-header-title floor-item-box-title"><span class="blue-block-goods blue-block-goods-title"></span>商品信息</p> <Goodsinfomation ref="goodsInfo" :goodsinfodata='goodsinfodata'/> </div> </div> <!-- 商品规格/价格库存 --> <div class="floor-item"> <div class="floor-item-box"> <p class="card-header-title floor-item-box-title"><span class="blue-block-goods blue-block-goods-title"></span>价格库存 <el-radio-group v-model="radioguide" @change="radiochange" style="padding-left:50px;"> <el-radio :label="1">单规格</el-radio> <el-radio :label="2">多规格</el-radio> </el-radio-group> <el-link class="edit-type-span el-icon-search" type="primary" :underline="false" @click="viewPriceExp"> 查看各类价格说明 </el-link> <span class="tip-span">所有商品价格均为含税价,必须开具发票</span> </p> <GoodsSpecifications v-show="radioguide==2" ref="goodsspecifications" :specificationsdata="specificationsdata" @calcSpeTable="calcSpeTable"/> <!-- <keep-alive>--> <GoodsParameter :key="keyvalue" ref="goodsparameter" :parameterdata="parameterdata"/> <!-- </keep-alive>--> </div> </div> <!-- 商品详情 --> <div class="floor-item"> <div class="floor-item-box"> <p class="card-header-title floor-item-box-title"><span class="blue-block-goods blue-block-goods-title"></span>商品详情</p> <Goodsimg ref="goodsdetailsimg" :description="description"/> </div> </div> <!-- 售后及服务 --> <Goodsaftersale class="floor-item" style="box-shadow:none;" ref="goodsaftersale" :goodsaftersale="goodsaftersale" :option="option" /> <div class="submit-type-con"> <el-radio-group v-model="goodsAllData.submit" size="small"> <el-radio :label="0" border>放入仓库</el-radio> <el-radio :label="1" border>立即上架</el-radio> </el-radio-group> </div> </div> <div class="submit-cont"> <el-button type="primary" style="padding: 10px 30px;" @click="save" v-preventReClick>提 交</el-button> </div> </div> <!-- 添加商品 end --> <!-- 查看各类价格说明 --> <el-dialog title="各类价格说明" :visible.sync="isViewPriceExp" width="40%" center append-to-body > <el-form ref="workOrderForm" size="small" label-width="150px"> <el-form-item label="市场划线价:"> <span>市场原价</span> </el-form-item> <el-form-item label="销售指导价:"> <span>供货场景下,定义为指导售价;销售场景下,定义为您的销售价</span> </el-form-item> <el-form-item label="供货结算价:"> <span>本商品铺货到第三方平台的供货结算价</span> </el-form-item> <el-form-item label="成本核算价:"> <span>指本商品采购进货的成本价,仅自己可见</span> </el-form-item> <!-- <el-form-item>--> <!-- <span class="pre-price-tip">商品价格均为含税价,必须开具发票。请准确填写并更新商品实际库存,超卖导致的虚假及延迟发货会引起用户投诉与平台判罚。</span>--> <!-- </el-form-item>--> </el-form> <span slot="footer" class="dialog-footer"> <el-button @click="isViewPriceExp = false" size="mini">取 消</el-button> </span> </el-dialog> </div> </template> <script> import { NewGetCategory,NewGetCategoryData,addGoods,getGoodsNew,updateGoodsNew } from '@/api/module/goods'; import Goodsinfomation from './components/goodsinfomation'; import GoodsSpecifications from './components/goodsspecifications'; import GoodsParameter from './components/goodsparameter'; import Goodsimg from './components/goodsimg2'; import Goodsaftersale from './components/goodsaftersale'; export default { name: 'Index', components: { Goodsinfomation, GoodsSpecifications, GoodsParameter, Goodsimg, Goodsaftersale, }, data() { return { isViewPriceExp:false, radioguide:1, keyvalue:1, goodsLoading: false, SSQList: [], // 省市区 SSQStr: '', // 省市区 拼接 propsOptions: { expandTrigger: 'click', lazy: true, lazyLoad: this.lazyLoad, value: "id", label: 'title', leaf: 'leaf' }, isNextStep: true, isShowGoodsDetails: false, isFIActive: 0, /**/ floorNav: [ { id: 1, name: '商品信息' }, { id: 2, name: '价格库存' }, { id: 3, name: '商品详情' }, { id: 4, name: '商品属性' }, { id: 5, name: '售后及服务' } ], /* 商品信息 */ goodsinfodata: { // orgGoodsInfoForm: {}, categoryList: [], categoryStr: '' }, /* 价格库存 */ specificationsdata: [], /* 商品售价 */ parameterdata: { isradioguide:1, is_ladder: false, // 单规格,是否开启,阶梯定价 is_ladder_spec: false, // 多规格,是否开启,阶梯定价 singleSpecTable: [], ladder: [ {quantity: 1,money: 0} // 默认一个,处理方便一些 ] }, description: '', /* 售后及服务 */ goodsaftersale: { params:[ { 'title':'', 'value':'' } ],//参数 producing_area_id_list: "", // 产地的idlist producing_area: '', // 产地中文名称 deliver_area_id_list: "", // 发货地的idlist deliver_area: '', // 发货地中文名称 goods_brand: '', // 品牌 brand_id: '', // 品牌、 stags: [], freight_id: 310, delay_compensate: 24, aftersale_time: 7 }, goodsAllData: { submit: 0, }, // 商品所有数据 TIMER: null, option: 0 } // return end }, created() { // option 商品的id //debugger this.option = Number(this.$route.query.goods_id) || 0 if( this.option && this.option !== 0 ) { let data = { goodsId: this.option}; getGoodsNew(data).then(res => { if(res.data) { this.isShowGoodsDetails = true; // 商品信息 this.goodsinfodata = { goods_id: res.data.goods_id, categoryStr: '', // 商品分类 地址拼接 categoryList: [], // 商品分类 id集合的数组 goods_des: res.data.goods_des, // 商品标签 goods_name: res.data.goods_name, // 商品标题 category_id: res.data.category_id, metering_unit: res.data.metering_unit !== 0 ? res.data.metering_unit : "",// 计量单位, 三目兼容老数据 packaging_unit: res.data.packaging_unit !== 0 ? res.data.packaging_unit : "",// 包装单位 conversion_unit: res.data.conversion_unit, // 换算关系 // tax_rate: res.data.tax_rate,// 税率 web_url: res.data.web_url, // 市场参考价链接 group: res.data.group !== 0 ? res.data.group : "", // 商品分组 supplier: res.data.supplier !== 0 ? res.data.supplier : "", // 供应商 storehouse: res.data.storehouse !== 0 ? res.data.storehouse : "", // 仓库 imgs: res.data.imgs, // 商品图片 video:res.data.video, // ssfl: (res.data.category_three_id && res.data.category_three_name) ? res.data.category_three_name : "" } this.goodsinfodata.categoryStr = res.data.category_first_name + '/' + res.data.category_first_name + '/' + res.data.category_three_name; let arr = []; arr[0] = res.data.category_first_id; arr[1] = res.data.category_second_id; arr[2] = res.data.category_three_id; this.goodsinfodata.categoryList = arr; // console.log(260,this.goodsinfodata.producing_area_id_list,this.goodsinfodata.deliver_area_id_list) // 价格库存, 售价由规格决定 if(res.data.specs && res.data.specs.length > 0) { this.specificationsdata = res.data.specs; this.radioguide = 2 this.parameterdata.isradioguide = 2 this.parameterdata.is_ladder = false this.parameterdata.is_ladder_spec = res.data.is_ladder == 1 ? true : false; }else{ this.parameterdata['specs']=[] this.radioguide = 1 this.parameterdata.isradioguide = 1 this.parameterdata.is_ladder = res.data.is_ladder == 1 ? true : false; this.parameterdata.is_ladder_spec = false; } // 商品售价 // 多规格 if(res.data.specs_group && res.data.specs_group.length > 0) { let specs_group = res.data.specs_group res.data.specs_group.forEach((item)=> { item.sc_price = item.sc_price / 100; item.price = item.price / 100; item.js_price = item.js_price / 100; item.prime_cost = item.prime_cost / 100; }) let goodsParametersList = this.cartesian(this.processData(res.data.specs)); for (let index = 0; index < goodsParametersList.length; index++) { for (let i = 0; i < res.data.specs.length; i++) { if(res.data.specs.length>1){ specs_group[index][res.data.specs[i].spec_name] = goodsParametersList[index][i]; } if(res.data.specs.length==1){ specs_group[index][res.data.specs[0].spec_name] = goodsParametersList[index]; } } } this.parameterdata['specs_group'] = specs_group // debugger this.parameterdata['specs'] = res.data.specs; this.parameterdata['shopTypes'] = goodsParametersList }else { // 单规格 this.parameterdata.pamTableList = []; let singleSpecObj = { sc_price: '', // 市场划线价 price: '', // 销售指导价 js_price: '', // 供货结算价 prime_cost: '', // 成本核算价 stock: '', // 库存 stock_warning: '', // 库存预警 weight: '', // 重量 g volume: '', // 体积 goods_code: '', // 编码 bar_code: '', // 条码 } this.parameterdata.singleSpecTable = []; singleSpecObj.sc_price = res.data.sc_price / 100; singleSpecObj.price = res.data.price / 100; singleSpecObj.js_price = res.data.js_price / 100; singleSpecObj.prime_cost = res.data.prime_cost / 100; singleSpecObj.stock = res.data.stock; singleSpecObj.stock_warning = res.data.stock_warning; singleSpecObj.weight = res.data.weight; singleSpecObj.volume = res.data.volume; singleSpecObj.goods_code = res.data.goods_code; singleSpecObj.bar_code = res.data.bar_code; this.parameterdata.singleSpecTable.push(singleSpecObj); // 价格阶梯 if (res.data.ladder.length > 0) { this.parameterdata.ladder = res.data.ladder.map((item)=> { item.money = item.money/100 return item }); } } // 商品详情 this.description = res.data.description; // 商品参数 售后服务 this.goodsaftersale={ producing_area_id_list: "", // 产地的idlist producing_area: res.data.producing_area, // 产地中文名称 deliver_area_id_list: "", // 发货地的idlist deliver_area: res.data.deliver_area, // 发货地中文名称 goods_brand: res.data.goods_brand, // 品牌 brand_id: Number(res.data.brand_id) , // 品牌、 stags:[] } this.goodsaftersale.params = res.data.params?res.data.params:[{'title':'','value':''}]//参数 this.goodsaftersale.out_goods_id = (res.data.out_goods_id == 0) ? '' : res.data.out_goods_id //商品编码 this.goodsaftersale.freight_id = res.data.freight_id; this.goodsaftersale.delay_compensate = res.data.delay_compensate; this.goodsaftersale.aftersale_time = res.data.aftersale_time; let stagArr = []; // 产地 let producing_area_list = res.data.producing_area_list?res.data.producing_area_list:[] if(producing_area_list.length==3){ producing_area_list.pop() } if (Array.isArray(producing_area_list) && producing_area_list.length > 0) { this.goodsaftersale.producing_area_id_list = producing_area_list.map((item)=> { return item.id }); } // 发货地 let deliver_area_list = res.data.deliver_area_list?res.data.deliver_area_list:[] if(deliver_area_list.length==3){ deliver_area_list.pop() } if (Array.isArray(deliver_area_list) && deliver_area_list.length > 0) { this.goodsaftersale.deliver_area_id_list = deliver_area_list.map((item)=> { return item.id }); } // 后台返回数据格式 ‘2,3’或者‘[]’都是字符串,处理兼容一下 debugger if( res.data.stags && !Array.isArray(res.data.stags)) { if( res.data.stags.indexOf(',') > -1 ) { stagArr = res.data.stags.split(','); stagArr.forEach(item => { if (item) { if(Number(item)) { this.goodsaftersale.stags.push(Number(item)); } } }) }else { if(Number(res.data.stags)) { this.goodsaftersale.stags.push( Number(res.data.stags) ) }else { this.goodsaftersale.stags = []; } } }else { this.goodsaftersale.stags = []; } } }); console.log("售后数据:",this.goodsaftersale) }else { this.isShowGoodsDetails = false; } }, mounted() { }, methods: { radiochange(val){ this.parameterdata.isradioguide = this.radioguide this.keyvalue++ }, // 查看各类价格说明 viewPriceExp() { this.isViewPriceExp = true; }, // 规格子组件,传给父组件的数据 calcSpeTable(data) { this.keyvalue++ this.parameterdata = data; }, // 只有点击完最后一级,才会有值 SSQChange() { if(this.SSQList && this.SSQList.length > 0) { this.isNextStep = false }else { this.SSQList = [] this.isNextStep = true } }, lazyLoad(node, resolve) { this.SSQList = []; this.SSQStr = ''; this.getArea(node, resolve); if(this.SSQList && this.SSQList.length > 0) { this.isNextStep = false }else { this.isNextStep = true } }, getArea(node, resolve) { const level = node.level; let limboNode = {}; if(level === 0) { limboNode = {parent_id: 0} } if(level === 1) { limboNode = { parent_id: node.value }; } if(level === 2) { limboNode = { parent_id: node.value }; } NewGetCategoryData(limboNode).then(res => { let result = {}; result = res.data if (level === 0) { result.forEach(item => { item.value = item.id; item.label = item.label; item.children = []; item.leaf = 0; // 可以控制 是否有下级 值为true都不行,必须等于0 }) } if (level === 1) { for(let i = 0; i < res.data.length; i++) { if( limboNode.id === res.data[i].id ) { result = res.data[i].children; break; } } result.forEach(item => { item.value = item.id; item.label = item.label item.children=[]; //这句代码表示当点击最后一级的时候 label后面不会转圈圈 并把相关值赋值到选择器上 item.leaf = 0 }) } if (level === 2) { for(let i = 0; i < res.data.length; i++) { if( limboNode.id === res.data[i].id ) { result = res.data[i].children; break; } } result.forEach(item => { item.value = item.id; item.label = item.label item.leaf = 1; }) } resolve(result) }); }, // 添加商品后,下一步 操作 nextStep() { // 注意数据格式 [1,2,3] 数组,且里面是数字类型 let ssqLabelList = this.$refs['ssqCascader'].getCheckedNodes()[0].pathLabels; this.goodsinfodata.categoryList = this.SSQList; this.goodsinfodata.categoryStr = ssqLabelList[0] + '/' + ssqLabelList[1] + '/' + ssqLabelList[2]; this.isShowGoodsDetails = true; }, // 保存/提交 save() { // 此处变量 有顺序 校验时,电梯至某处 // 商品信息 是否填写完整 let isGoodsInfoMsg = this.$refs['goodsInfo'].validateGoodsInfoForm(); debugger // 价格库存 无需校验 let spggRef = this.$refs.goodsspecifications; let spggData = spggRef.speData; spggRef.upDateDom(); // 商品售价,通过获取的数据,分别进行判断, // 1-单规格和多规格【规格组合】数据进行处理; // 2-单规格和多规格【阶梯定价】数据进行处理 let isGoodsPrice = true; let goodsPriceMsg = ''; let spsjData1 = JSON.parse(JSON.stringify(this.$refs.goodsparameter.singleSpecTable)); let spsjData2 = JSON.parse(JSON.stringify(this.$refs.goodsparameter.parameterdata)); let goodsparameterData = this.$refs.goodsparameter; // 后续可以将spsjData1和spsjData2进行优化掉 // 阶梯定价-控制参数 this.goodsAllData['is_ladder'] = spsjData2.is_ladder ? 1 : 0; if (this.radioguide === 1) { this.goodsAllData.is_ladder = spsjData2.is_ladder ? 1 : 0; } if (this.radioguide === 2) { this.goodsAllData.is_ladder = spsjData2.is_ladder_spec ? 1 : 0; } this.goodsAllData['ladder'] = [] // 阶梯定价数据 let ladder = [] // 多规格【规格组合】数据 -- start --// if ( this.radioguide==2&&spsjData2.specs_group && spsjData2.specs_group.length > 0 ) { for(let i = 0; i < spsjData2.specs_group.length; i++) { let itemObj = spsjData2.specs_group[i][0]; for (let itemKey in itemObj) { // 有多余字段,可能为空,需要对有效字段单独判断 // Number后,有三中情况:0,正数,负数,NaN if( !Number(itemObj['sc_price']) || Number(itemObj['sc_price']) <0 ) { goodsPriceMsg = '[ 商品售价 ]中,市场划线价不能为空,并且只能填大于0的数字' isGoodsPrice = false; break } else if ( !Number(itemObj['price']) || Number(itemObj['price']) <0 ) { goodsPriceMsg = '[ 商品售价 ]中,销售指导价不能为空,并且只能填大于0的数字' isGoodsPrice = false; break } else if( !Number(itemObj['js_price']) || Number(itemObj['js_price']) <0 ) { goodsPriceMsg = '[ 商品售价 ]中,供货结算价不能为空,并且只能填大于0的数字' isGoodsPrice = false; break } else if ( !Number(itemObj['stock']) || Number(itemObj['stock']) <0 ) { goodsPriceMsg = '[ 商品售价 ]中,库存量不能为空,并且只能填大于0的整数' isGoodsPrice = false; break } else { goodsPriceMsg = ''; isGoodsPrice = true; } // 多规格【阶梯定价】数据 -- start --// if (this.goodsAllData.is_ladder) { for(let la = 0; la < spsjData2.specs_group[i][ladder].length; la++) { let ladderItem = spsjData2.specs_group[i][ladder][la] for(let laKey in ladderItem) { if( !Number(ladderItem['quantity']) || Number(ladderItem['quantity']) <0 ) { goodsPriceMsg = '[ 阶梯定价 ]中,商品数量不能为空,并且只能填大于0的整数' isGoodsPrice = false; break; }else if( !Number(ladderItem['money']) || Number(ladderItem['money']) <0 ) { goodsPriceMsg = '[ 阶梯定价 ]中,商品价格不能为空,并且只能填大于0的数字' isGoodsPrice = false; break; }else { goodsPriceMsg = '' isGoodsPrice = true; } } } }else { spsjData2.specs_group[i][ladder] = [] } // 多规格【阶梯定价】数据 -- end --// } if (!isGoodsPrice) { break } } // 多规格【规格组合】数据 -- end --// }else { // 单规格组合数据【规格组合】数据 -- start --// let slingleSpeObj = spsjData1[0]; if ( !Number(slingleSpeObj['sc_price']) || Number(slingleSpeObj['sc_price']) <0 ) { goodsPriceMsg = '[ 商品售价 ]中,市场划线价不能为空,并且只能填大于0的数字' isGoodsPrice = false; } else if ( !Number(slingleSpeObj['price']) || Number(slingleSpeObj['price']) <0 ) { goodsPriceMsg = '[ 商品售价 ]中,销售指导价不能为空,并且只能填大于0的数字' isGoodsPrice = false; } else if ( !Number(slingleSpeObj['js_price']) || Number(slingleSpeObj['js_price']) <0 ) { goodsPriceMsg = '[ 商品售价 ]中,供货结算价不能为空,并且只能填大于0的数字' isGoodsPrice = false; } else if ( !Number(slingleSpeObj['stock']) || Number(slingleSpeObj['stock']) <0 ) { goodsPriceMsg = '[ 商品售价 ]中,库存量不能为空,并且只能填大于0的整数' isGoodsPrice = false; } else { goodsPriceMsg = '' isGoodsPrice = true; } // 单规格【规格组合】数据 -- end --// // 单规格【阶梯定价】数据 -- start --// ladder = goodsparameterData.parameterdata.ladder; if (this.goodsAllData.is_ladder) { if (ladder.length > 0) { for (let la = 0; la < ladder.length; la++) { let ladderItem = ladder[la] for(let laKey in ladderItem) { if( !Number(ladderItem['quantity']) || Number(ladderItem['quantity']) <0 ) { goodsPriceMsg = '[ 阶梯定价 ]中,商品数量不能为空,并且只能填大于0的整数' isGoodsPrice = false; break; }else if( !Number(ladderItem['money']) || Number(ladderItem['money']) <0 ) { goodsPriceMsg = '[ 阶梯定价 ]中,商品价格不能为空,并且只能填大于0的数字' isGoodsPrice = false; break; }else { goodsPriceMsg = '' isGoodsPrice = true; } } } } }else { ladder = [] } // 单规格【阶梯定价】数据 -- end --// } // 商品详情 是否填写完整 // let isGoodsDetailsImgMsg = (this.$refs.goodsdetailsimg.goodsDeForm.description.indexOf('img') > -1) ? true : false; let isGoodsDetailsImgMsg = (this.$refs.goodsdetailsimg.editor.txt.html()) ? true : false // 售后服务 是否填写完整 let isGoodsAfterSaleMsg = this.$refs['goodsaftersale'].validateGoodsAfterSaleForm(); // ----------- 自测用 // 获取 商品信息数据 // let fuck = this.$refs.goodsInfo.goodsInfoForm; // console.log("商品信息:",fuck) // return // ----------- 自测用 if(!isGoodsInfoMsg) { this.$message({type:'error',message:'商品信息未填写完整'}); this.setFloorNavMountClick(0); return } if(!isGoodsPrice) { if ( goodsPriceMsg ) { this.$message({type:'error',message: goodsPriceMsg }); this.setFloorNavMountClick(2); return } } if(!isGoodsDetailsImgMsg) { this.$message({type:'error',message:'商品详情未填写完整'}); this.setFloorNavMountClick(3); return } if(!isGoodsAfterSaleMsg) { this.$message({type:'error',message:'售后及服务未填写完整'}); this.setFloorNavMountClick(4); return } // 所有校验通过,整理数据 // 获取 商品信息数据 let spxxData = this.$refs.goodsInfo.goodsInfoForm; if( spxxData.imgs.length > 7 ) { this.$message({ type: 'warning',message: '商品信息中,商品图片最大数量为7张,请检查' }); this.setFloorNavMountClick(0); return; } // 商品售价,上面已经获取, let spsjData = {}; if(this.radioguide==2 && spsjData2.specs_group && spsjData2.specs_group.length > 0 ) { this.goodsAllData['specs_group'] = spsjData2.specs_group this.goodsAllData['specs'] =spsjData2.specs }else { spsjData = spsjData1[0]; this.goodsAllData['specs_group'] = [] this.goodsAllData['specs'] = [] // 启用,才赋值,否则是空数组 if (this.goodsAllData.is_ladder) { this.goodsAllData.ladder = ladder // 进一步处理金额数据 this.goodsAllData.ladder.map((item)=> { item.money = item.money * 10000 / 100 return item }); } } // 商品详情 数据 // let spxqData = this.$refs.goodsdetailsimg.goodsDeForm; let spxqData = String(this.$refs.goodsdetailsimg.editor.txt.html()) // 售后服务 数据 let ssffData = this.$refs.goodsaftersale.goodsAfterSaleForm; // 品牌处理 goods_brand let brandOptions = this.$refs.goodsaftersale.brandOptions; if (Array.isArray(brandOptions) && brandOptions.length > 0) { for(let bi = 0; bi < brandOptions.length; bi++) { if( Number(ssffData.brand_id) === Number(brandOptions[bi].id) ) { ssffData.goods_brand = brandOptions[bi].brand_cn; break; } } } // 产地 ssffData["producing_area_id"] = ssffData.producing_area_id_list[ssffData.producing_area_id_list.length - 1] // 发货地 ssffData["deliver_area_id"] = ssffData.deliver_area_id_list[ssffData.deliver_area_id_list.length - 1] // 发货地数据处理,预留 // for(let ai = 0; ai < areaOptions.length; ai++) { // if ( Number(ssffData.deliver_area) === Number(areaOptions[ai].id) ) { // ssffData.deliver_area = areaOptions[ai].name; // break; // } // } if (ssffData.delay_compensate == 72) { this.$message({ type: 'warning',message: '发货时长不能超过48小时,请重新编辑' }); return } // 所有数据合并 Object.assign( this.goodsAllData, spxxData, spsjData, ssffData); this.goodsAllData.description = spxqData // 经营类目,服务标签,需要单独处理数据格式 this.goodsAllData.category_id = spxxData.categoryList.slice(-1)[0] ? spxxData.categoryList.slice(-1)[0] : ''; if(this.goodsAllData.stags) { this.goodsAllData.stags = this.goodsAllData.stags.toString(); } // 价格数字需要 乘以100 if(this.goodsAllData.specs_group && this.goodsAllData.specs_group.length > 0) { this.goodsAllData.specs_group.forEach((item)=> { item.sc_price = (Number(item.sc_price) * 1000)/10; item.price = (Number(item.price) * 1000)/10; item.js_price = (Number(item.js_price) * 1000)/10; item.prime_cost = (Number(item.prime_cost) * 1000)/10; item.stock = Number(item.stock); item.stock_warning = Number(item.stock_warning); item.bar_code = Number(item.bar_code); }) delete this.goodsAllData.sc_price; delete this.goodsAllData.price; delete this.goodsAllData.js_price; delete this.goodsAllData.prime_cost; delete this.goodsAllData.stock; delete this.goodsAllData.weight; }else { this.goodsAllData.sc_price = (Number(this.goodsAllData.sc_price) * 1000)/10 this.goodsAllData.price = (Number(this.goodsAllData.price) * 1000)/10 this.goodsAllData.js_price = (Number(this.goodsAllData.js_price) * 1000)/10 this.goodsAllData.prime_cost = (Number(this.goodsAllData.prime_cost) * 1000)/10 this.goodsAllData.stock = Number(this.goodsAllData.stock); this.goodsAllData.stock_warning = Number(this.goodsAllData.stock_warning); this.goodsAllData.bar_code = Number(this.goodsAllData.bar_code); delete this.goodsAllData.specs; delete this.goodsAllData.specs_group; } // 修改 商品id不为 0 if( this.goodsAllData.goods_id ) { // 商品id 为 0 是新增 let goodsStatus = 1; if ( this.goodsAllData.submit === 0 ) { goodsStatus = 2; }else if(this.goodsAllData.submit === 1) { goodsStatus = 3; } updateGoodsNew(this.goodsAllData).then(res=> { //debugger if( res.code === 1 ) { this.$message({type: 'success', message:'编辑成功'}); this.initAllGoodsInfo(); //console.log(600,this.$store.state.tagsView.visitedViews); // 编辑成功,关闭当前路由 this.$store.state.tagsView.visitedViews.splice(this.$store.state.tagsView.visitedViews.findIndex(item => item.path === this.$route.path), 1) this.$router.push({ path: '/system/goods/management', query: { goodsStatus: goodsStatus } }); } else { // 如果保存失败,将价格还原,仅处理 多规格数据 this.$refs.goodsparameter.priceReduce() let msg = res.message ? res.message : '编辑失败' this.$message({type: 'error', message: msg}); } }); }else { //debugger // 新增 商品id 为 0 let goodsStatus = 1; if ( this.goodsAllData.submit === 0 ) { goodsStatus = 2; }else if(this.goodsAllData.submit === 1) { goodsStatus = 3; } addGoods( this.goodsAllData ).then( res=> { if( res.code === 1 ) { this.$message({type: 'success', message:'新增成功'}); this.initAllGoodsInfo(); // 编辑成功,关闭当前路由 this.$store.state.tagsView.visitedViews.splice(this.$store.state.tagsView.visitedViews.findIndex(item => item.path === this.$route.path), 1) this.$router.push({ path: '/system/goods/management', query: { goodsStatus: goodsStatus } }); }else { // 如果保存失败,将价格还原,仅处理 多规格数据 this.$refs.goodsparameter.priceReduce() let msg = res.message ? res.message : '新增失败' this.$message({type: 'error', message: msg}); } }); } }, // 初始化 商品所有数据 initAllGoodsInfo() { // 初始化 商品信息 数据 this.$refs.goodsInfo.initInfo(); // 初始化 价格库存 数据 this.$refs.goodsspecifications.initInfo(); // 初始化 商品售价 数据 this.$refs.goodsparameter.initInfo(); // 初始化 商品详情 数据 this.$refs.goodsdetailsimg.initInfo(); // 初始化 商品售后 数据 this.$refs.goodsaftersale.initInfo(); }, /* 添加商品详细 */ /* 设置楼层导航事件驱动方法* @params Number index 楼层下标 */ setFloorNavMountClick(index) { let _this = this _this.isFIActive = index; clearInterval(_this.TIMER); // 可以通过 floor-cont的父元素,高度减去上下两个div的高度,来准确计算出来了,需要wtach监听,暂时用初步高来计算,一般问题不大 let floor_cont = document.getElementsByClassName('floor-cont')[0]; let floor_item,floor_offsetTop if(index==1||index==2||index==0){ floor_item = document.getElementsByClassName('floor-item') floor_offsetTop = floor_item[index].offsetTop - floor_item[0].offsetTop } if(index==3){ floor_item = this.$refs.goodsaftersale.$refs.paramsvalue.$el floor_offsetTop =floor_item.offsetTop - 90 } if(index==4){ floor_item = this.$refs.goodsaftersale.$refs.salesvalue.$el floor_offsetTop = floor_item.offsetTop - 90 } // 每次点击,对应dom需要滚动的高度 let window_scrollTop = _this.$refs.scrollview.scrollTop // 基本滚动动画配置 let timer = { step: 60, times: 15, FLOOR_OFFSETTOP: 0 }; // floor_cont 可是窗口的 高 let hxz = 0; let resList = []; let list = []; for (let i = 0; i < 6; i++) { if (i == 0 || i == 1 || i == 2) { let floor_item = document.getElementsByClassName('floor-item') list.push(Number(floor_item[i].offsetHeight)); } if (i == 3) { list.push(Number(this.$refs.goodsaftersale.$refs.paramsvalue.$el.offsetHeight)); } if (i == 4) { list.push(Number(this.$refs.goodsaftersale.$refs.salesvalue.$el.offsetHeight)); } } resList = list.slice(index) for (let j = 0; j < resList.length; j++) { hxz += resList[j] } if (hxz > floor_cont.offsetHeight) { timer.FLOOR_OFFSETTOP = floor_offsetTop; } else { timer.FLOOR_OFFSETTOP = floor_cont.scrollHeight - floor_cont.offsetHeight } if (window_scrollTop > floor_offsetTop) { _this.setFloorScrollArrowUp(timer) } else if (window_scrollTop === floor_offsetTop) { return false } else { _this.setFloorScrollArrowDown(timer) } }, /* 设置楼层向上滚动* @params Object timer 定时器配置 */ setFloorScrollArrowUp(timer) { let _this = this clearInterval(_this.TIMER) _this.TIMER = setInterval(() => { const window_scrollTop = _this.$refs.scrollview.scrollTop if (window_scrollTop <= timer.FLOOR_OFFSETTOP) { _this.$refs.scrollview.scrollTop = timer.FLOOR_OFFSETTOP clearInterval(_this.TIMER) } else { _this.$refs.scrollview.scrollTop = window_scrollTop - timer.step } }, timer.times) }, /* 设置楼层向下滚动@params Object timer 定时器配置 */ setFloorScrollArrowDown(timer) { let _this = this clearInterval(_this.TIMER) _this.TIMER = setInterval(() => { const window_scrollTop = _this.$refs.scrollview.scrollTop if (window_scrollTop >= timer.FLOOR_OFFSETTOP) { _this.$refs.scrollview.scrollTop = timer.FLOOR_OFFSETTOP clearInterval(_this.TIMER) } else { _this.$refs.scrollview.scrollTop = window_scrollTop + timer.step } }, timer.times) }, /** 数据处理为,二维数组,供笛卡尔积算法方法使用,对空数据进行过滤 */ processData(list) { let result = []; if (list && list.length > 0) { for (let i = 0; i < list.length; i++) { let childList = []; if(list[i].spec_name) { for(let j = 0; j < list[i].spec_value.length; j++) { if(list[i].spec_value[j].value) { childList.push(list[i].spec_value[j].value); } } } if(childList.length > 0) { result.push(childList); } } } return result; }, /** 笛卡尔积算法 */ cartesian(arr) { if(arr.length < 2) { return arr[0] || []; }else { return [].reduce.call(arr, function(col, set) { let res = []; col.forEach( c => { set.forEach(s => { let t = [].concat(Array.isArray(c) ? c : [c]); t.push(s); res.push(t); }); }); return res }); } } }, // methods end destroyed() { clearInterval(this.TIMER); this.TIMER = null; } // destroyed end } </script> <style scoped lang="scss" type="text/css"> .goods-all { height: 100%; padding: 20px; } .goods-all .good-all-type { height: 100%; overflow: auto; } ::v-deep .goods-all .el-card .el-card__body{ height:100%; overflow: auto; } p { margin: 0; padding: 0; } /* el-card title 样式统一 */ .card-header-title { display: flex; flex-direction: row; justify-content: start; align-items: center; font-size: 18px; color: #333; font-weight: 500; height: 24px; } .blue-block-goods { width: 5px; height: 24px; /*background: #3A84FF;*/ /*margin: 0 7px 0 0;*/ /*border-radius: 2px;*/ } /* el-card title hxz 样式统一 end */ .goods-type-tip { width: 100%; background: #F1F7FD; border: 1px solid #3A84FF; font-size: 14px; font-weight: 400; color: #3A84FF; line-height: 1em; padding: 14px 15px; } .goods-type-options { margin: 25px 0; } /*------------ 联级面板样式重置 start ------------*/ ::v-deep .el-cascader-panel.is-bordered { border: none; } ::v-deep .el-cascader-menu { min-width: 280px; border: none; box-shadow: 0px 4px 9px 1px rgba(51, 51, 51, 0.09); border-radius: 2px; overflow: hidden; } ::v-deep .el-cascader-menu__wrap { width: 280px; height: 500px; overflow: auto; margin: 5px 0!important; } /* 很重要,不要问我为什么 */ ::v-deep .el-scrollbar:hover>.el-scrollbar__bar, ::v-deep .el-scrollbar:active>.el-scrollbar__bar, ::v-deep .el-scrollbar:focus>.el-scrollbar__bar { opacity: 0; } /*------------ 联级面板样式重置 end ---------------*/ .next-step { padding: 10px 25px; margin: 0 auto; display: block; } /* 电梯效果 样式 */ .floor-nav { width: 100%; background-color: #fff; } .floor-nav .nav-list { padding: 0; margin:0; display: flex; justify-content: start; flex-direction: row; border-bottom:1px solid #eee; } .floor-nav .nav-list .nav-list-item { font-size: 16px; font-weight: 400; color: #333333; padding: 15px 25px 15px; //margin: 0 5px; list-style: none; vertical-align: middle; align-self: center; border-bottom: 2px solid #fff; cursor: pointer; } .floor-nav .nav-list .floor-item-active, .floor-nav .nav-list .nav-list-item:hover { color: #3A84FF; font-weight: bold; border-bottom: 2px solid #3A84FF; } .floor-item-box-title { background-color: #fff; height: 45px; } .blue-block-goods-title { margin: 0 20px 0 0; } .good-details-body { height: 100%; } ::v-deep .good-details-body .el-card__body { height: 100%; padding: 15px 0; overflow: hidden; } .floor-cont{ height: calc(100% - 98px); overflow: auto; } .floor-item { padding: 0; margin: 20px 15px 0 0; color: #333; box-shadow: 0 2px 12px 0 rgba(0, 0, 0 ,0.1); } .submit-type-con { height: 60px; width: calc(100% - 15px); background-color: #fff; display: flex; justify-content: center; align-items: center; flex-direction: row; margin-bottom: 20px; border-radius: 4px; } .submit-cont { //width: calc(100% + 40px); width: calc(100% - 27px); background-color: #fff; padding: 12px 0 8px; display: flex; flex-direction: row; justify-content: center; align-items: center; margin-left: 0; border-radius: 4px; box-shadow: 0 -8px 9px 1px rgba(51, 51, 51, 0.06); } .edit-type-span { display: inline-block; cursor: pointer; margin: 0 20px; } .tip-span { color: #909399; font-size: 12px; } </style>