<template> <div class="goods-parameter"> <p class="tip-p"> <el-link class="edit-type-span el-icon-search" type="primary" :underline="false" @click="viewPriceExp">查看各类价格说明 </el-link> <span class="tip-span">所有商品价格均为含税价,必须开具发票</span> </p> <div v-show="(!orgGoodsPam.pamTableList || orgGoodsPam.pamTableList.length === 0)"> <el-table border size="small" :data="singleSpecTable" style="width: 80%;margin-right:10%;" > <el-table-column align="center" prop="js_price" label="协议价"> <template slot-scope="scope"> <el-input size="mini" style="width:90%" v-model="scope.row.js_price" placeholder="请输入协议价"></el-input> </template> </el-table-column> <el-table-column align="center" prop="sl_price" label="结算价"> <template slot-scope="scope"> <span class="sl-price-span-input">{{ scope.row.sl_price = scope.row.js_price ? scope.row.js_price : '' }}</span> </template> </el-table-column> <el-table-column align="center" prop="price" label="指导价"> <template slot-scope="scope"> <el-input size="mini" style="width:90%" v-model="scope.row.price" placeholder="请输入指导价"></el-input> </template> </el-table-column> <el-table-column align="center" prop="sc_price" label="市场价"> <template slot-scope="scope"> <el-input size="mini" style="width:90%" v-model="scope.row.sc_price" placeholder="请输入市场价"></el-input> </template> </el-table-column> <el-table-column align="center" prop="stock" label="库存量"> <template slot-scope="scope"> <el-input size="mini" style="width:90%" v-model="scope.row.stock" placeholder="请输入库存量"></el-input> </template> </el-table-column> <el-table-column align="center" prop="weight" label="重量"> <template slot-scope="scope"> <el-input size="mini" style="width:90%" v-model="scope.row.weight" placeholder="请输入重量"></el-input> </template> </el-table-column> <!-- <el-table-column align="center" prop="imgs9" label="图片">--> <!-- <template slot-scope="scope">--> <!-- <!–----------–>--> <!-- <el-upload--> <!-- action="/"--> <!-- class="uploadData50"--> <!-- list-type="picture-card"--> <!-- :limit="5"--> <!-- :on-exceed="limit5"--> <!-- :file-list="singleSpecImgList"--> <!-- :http-request="(file)=> { return upLoadSingleSpecImg(file,scope.row) }"--> <!-- :on-remove=" (file) => { return removeSingleSpeImg(file,scope.row)}"--> <!-- ></el-upload>--> <!-- <!–----------–>--> <!-- </template>--> <!-- </el-table-column>--> </el-table> </div> <div v-show="orgGoodsPam.pamTableList.length > 0" v-for="(item,index) in orgGoodsPam.pamTableList" :key="index" class="single-spe-con"> <p style="margin: 10px 0;color: #333;font-size: 14px;font-weight: 400;"> <span v-show="orgGoodsPam.pamNameList.length === 1"> {{ orgGoodsPam.pamNameList[0].spec_name }} <span>:</span>{{ orgGoodsPam.pamDataList[index]}} </span> <span v-show="orgGoodsPam.pamNameList.length > 1"> <span v-for="(itemv,indexv) in orgGoodsPam.pamNameList" style="margin-right:20px;"> {{ orgGoodsPam.pamNameList[indexv].spec_name }} <span>:</span>{{ orgGoodsPam.pamDataList[index][indexv]}} </span> </span> </p> <el-table border size="small" :data="item" style="width: 80%" > <el-table-column align="center" prop="js_price" label="协议价"> <template slot-scope="scope"> <el-input size="mini" style="width:90%" v-model="scope.row.js_price" placeholder="请输入协议价"></el-input> </template> </el-table-column> <el-table-column align="center" prop="sl_price" label="结算价"> <template slot-scope="scope"> <!-- <el-input size="mini" style="width:90%" v-model="scope.row.hh2" :disabled="true" placeholder="根据结算价自动计算"></el-input>--> <span class="sl-price-span-input">{{ scope.row.sl_price = scope.row.js_price ? scope.row.js_price : '' }}</span> </template> </el-table-column> <el-table-column align="center" prop="price" label="指导价"> <template slot-scope="scope"> <el-input size="mini" style="width:90%" v-model="scope.row.price" placeholder="请输入指导价"></el-input> </template> </el-table-column> <el-table-column align="center" prop="sc_price" label="市场价"> <template slot-scope="scope"> <el-input size="mini" style="width:90%" v-model="scope.row.sc_price" placeholder="请输入市场价"></el-input> </template> </el-table-column> <el-table-column align="center" prop="stock" label="库存量"> <template slot-scope="scope"> <el-input size="mini" style="width:90%" v-model="scope.row.stock" placeholder="请输入库存量"></el-input> </template> </el-table-column> <el-table-column align="center" prop="weight" label="重量"> <template slot-scope="scope"> <el-input size="mini" style="width:90%" v-model="scope.row.weight" placeholder="请输入重量"></el-input> </template> </el-table-column> <el-table-column align="center" prop="thumb" label="图片"> <template slot-scope="scope"> <span v-show="!scope.row.thumb" class="span-img" @click="upPreSpeImg(index,scope.row)" ></span> <span v-show="scope.row.thumb" class="span-img-con"> <img class="spec-img" :src="scope.row.thumb" alt="" @click="changeSpeImg(index,scope.row)" /> <span class="span-img-del el-icon-delete del-span-block" @click="delSingleSpecImg(index,scope.row)"></span> </span> <input type="file" style="display: none;" :ref=" 'hxz' + index " accept="image/*" @change="changeIMG(index,scope.row)"> </template> </el-table-column> </el-table> </div> <!-- 查看各类价格说明 --> <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 { UploadImg } from '@/api/module/goods'; export default { name: 'goodsparameter', props: { parameterdata: { type: Object, required: true } }, data() { return { orgGoodsPam: {}, preTableTitle: [], isHoverSpeImg: false, /** 无规格 数据 */ singleSpecTable: [ { js_price: '', // 协议价 sl_price: '', // 结算价 price: '', // 指导价 sc_price: '', // 市场价 stock: '', // 库存 weight: '', // 重量 g } ], singleSpecImgList: [], isViewPriceExp: false } // return end }, watch:{ 'parameterdata': function(val) { //debugger this.orgGoodsPam = val; //console.log("监听",this.orgGoodsPam); }, }, created() { //this.orgGoodsPam = this.parameterdata; }, mounted() { if(this.parameterdata.pamTableList && this.parameterdata.pamTableList.length > 0) { this.orgGoodsPam = this.parameterdata; }else { if( this.parameterdata.singleSpecTable.length === 1 ) { this.singleSpecTable = this.parameterdata.singleSpecTable } } }, methods: { /** 初始化 商品售价 数据 */ initInfo() { this.orgGoodsPam = {}; //this.singleSpecTable = }, // 查看各类价格说明 viewPriceExp() { this.isViewPriceExp = true; }, // ------ 无规格,上传图片相关 ------ limit5() { this.$message({type: 'warning',message: '只能上传5张图片'}); }, // 上传 无规格组合 的图片 upLoadSingleSpecImg(param) { this.getBase64(param.file).then((res) => { let result = res.split(","); this.Base64img = result[1]; let data = {"img_data": this.Base64img} UploadImg(data).then(res => { if (res && res.code == 1) { this.singleSpecImgList.push({ url: res.data.image_url }); this.singleSpecTable[0].imgs9 = []; this.singleSpecImgList.forEach(item=> { this.singleSpecTable[0].imgs9.push(item.url) }) this.$message({ message:'上传成功',type:'success'}); }else { this.singleSpecImgList = []; this.$message({ message:'上传失败,请重新上传',type:'error'}); } }) }); }, // 删除 无规格组合 的图片 removeSingleSpeImg(file) { if(file.status === "success") { for(let i = 0; i < this.singleSpecImgList.length; i++) { if(file.uid === this.singleSpecImgList[i].uid) { this.singleSpecImgList.splice(i,1); this.singleSpecTable[0].imgs9.splice(i,1); } } this.$message({ type: 'success', message: '删除成功!' }); } }, /** 规格组合 上传图片 */ // 上传图片 upPreSpeImg(index, row) { let domRef = "hxz" + index; //console.log(domRef,this.$refs[domRef][0]); this.$refs[domRef][0].value = ''; this.$refs[domRef][0].click(); }, // 更换 某一个规格的图片 changeSpeImg(index, row) { this.upPreSpeImg(index,row); }, // 真正的上传图片方法,原生input changeIMG(index, row) { let curRow = row; let inputDom = "hxz" + index; let file = this.$refs[inputDom][0].files[0]; if( file.size > 1024 * 1024 * 3 ) { this.$message({ type: 'error',message: '规格图片不能大于 3 M'}); return; } this.getBase64(file).then((res) => { let result = res.split(","); this.Base64img = result[1]; let data = {"img_data": this.Base64img} UploadImg(data).then(res => { // this.loading = false; if (res && res.code == 1) { curRow.thumb = res.data.image_url; // this.singleSpecImgList.push({'url': res.data.image_url}) this.$message({ message:'上传成功',type:'success'}); }else { this.$message({ message:'上传失败,请重新上传',type:'error'}); } }) }); }, /**如果保存失败,将乘以100的价格还原 * 当多规格数据时候,才调用 * */ priceReduce() { // debugger if(this.parameterdata.pamTableList && this.parameterdata.pamTableList.length > 0) { this.parameterdata.pamTableList.forEach((item)=> { if(item[0].js_price) { item[0].js_price = item[0].js_price / 100; } if(item[0].price) { item[0].price = item[0].price / 100; } if(item[0].sc_price) { item[0].sc_price = item[0].sc_price / 100; } if(item[0].sl_price) { item[0].sl_price = item[0].sl_price / 100; } }) } // else { // if(this.singleSpecTable[0].js_price) { // this.singleSpecTable[0].js_price = this.singleSpecTable[0].js_price / 100 // } // if(this.singleSpecTable[0].price) { // this.singleSpecTable[0].price = this.singleSpecTable[0].price / 100 // } // if(this.singleSpecTable[0].sc_price) { // this.singleSpecTable[0].sc_price = this.singleSpecTable[0].sc_price / 100 // } // if(this.singleSpecTable[0].sl_price) { // this.singleSpecTable[0].sl_price = this.singleSpecTable[0].sl_price / 100 // } // } }, // 删除 单个规格的图片 delSingleSpecImg(index,row) { if( row.thumb ) { row.thumb = ''; this.$message({type: 'success',message: '删除成功'}); } }, speImgHover(index,row) { this.isHoverSpeImg = true; }, speImgLeave(index, row) { this.isHoverSpeImg = false; }, // -- 通用 方法 -- // 图片转换为 base64 getBase64(file) { return new Promise(function (resolve, reject) { let reader = new FileReader(); let imgResult = ""; reader.readAsDataURL(file); reader.onload = function () { imgResult = reader.result; }; reader.onerror = function (error) { reject(error); }; reader.onloadend = function () { resolve(imgResult); }; }); }, } // methods end } </script> <style lang="scss" type="text/stylus" scoped> .span-img { margin: 0; padding: 0; display : inline-block; width:50px; height:50px; position: relative; top:4px; cursor: pointer; border-radius: 6px; border: 1px dashed #c0ccda; background-color : #fbfdff; } .span-img:hover { border: 1px dashed #1890ff; } .spec-img { width: 100%; height: 100%; border-radius: 6px; cursor: pointer; position: relative; border: none; } .span-img-con { margin: 0; padding: 0; display : inline-block; width:50px; height:50px; position: relative; top:4px; cursor: pointer; border-radius: 6px; border: 1px solid #c0ccda; } .span-img-del { position: absolute; display : inline-block; width: 18px; height: 18px; font-size: 18px; color: #333; line-height : 18px; top: 50%; left: 50%; margin-top: -9px; margin-left: -9px; } .del-span-block { display : none; } .span-img-del:hover { color: #F56C6C; } .span-img-con:hover > .del-span-block { display : block; } p { margin: 0; padding: 0; } .tip-p { margin: 0 0 20px 0; } .goods-parameter { padding: 20px; } .edit-type-span { display: inline-block; cursor: pointer; margin: 0 20px; } .single-spe-con { margin: 25px 0; } .sl-price-span-input { display: inline-block; width: 90%; height: 28px; padding: 0 15px; line-height : 28px; border-radius : 4px; border : 1px solid #DCDFE6; vertical-align : bottom; } /* 一般提示性文字 */ .tip-span { color: #909399; font-size: 12px; } .pre-price-tip { color: #F56C6C; font-size: 12px; } // 上传图片样式 .uploadData50 { display: inline-block; /deep/ .el-upload--picture-card { width: 50px; height: 50px; } /deep/ .el-upload { width: 50px; height: 50px; line-height: 50px; } /deep/ .el-upload-list--picture-card .el-upload-list__item { width: 50px; height: 50px; line-height: 50px; } /deep/ .el-upload-list--picture-card .el-upload-list__item-thumbnail { width: 50px; height: 50px; line-height: 50px; } /deep/ .avatar { width: 50px; height: 50px; } } </style>