<template> <div class="goods-info"> <el-form :model="goodsInfoForm" :rules="goodsInfoRules" ref="goodsInfoForm" label-width="150px" class="demo-goodsInfoForm" size="small"> <el-form-item label="商品分类:" prop="categoryStr"> <el-input style="width:420px;" v-model="goodsInfoForm.categoryStr" :disabled="true"></el-input> <!-- <span class="type-text-span">{{ goodsInfoForm.categoryStr }}</span>--> <el-link class="edit-type-span el-icon-edit" type="primary" :underline="false" @click="editType">修改所在类目</el-link> <span class="tip-span">该商品所在类目须支持七天无理由退货</span> </el-form-item> <el-form-item label='商品标题:' prop="goods_name"> <el-input v-model="goodsInfoForm.goods_name" placeholder="请输入商品标题" style="width:420px;"></el-input> <span class="tip-span ml20">商品名称限制在30字以内,不要填写与商品无关的词</span> </el-form-item> <el-form-item label='商品关键词:' prop="goods_des"> <el-input v-model="goodsInfoForm.goods_des" placeholder="请输入商品关键词" style="width:420px;"></el-input> <span class="tip-span ml20">关键词之间 <strong>英文</strong> 用逗号分开,最多可以添加5个</span> </el-form-item> <el-form-item label="商品产地:" prop="producing_area"> <el-select v-model="goodsInfoForm.producing_area" placeholder="请选择商品产地" style="width: 420px;"> <el-option v-for="item in areaOptions" :key="item.id" :label="item.name" :value="item.id" ></el-option> </el-select> </el-form-item> <el-form-item label="商品发货地:" prop="deliver_area"> <el-select v-model="goodsInfoForm.deliver_area" placeholder="请选择商品发货地" style="width: 420px;"> <el-option v-for="item in areaOptions" :key="item.id" :label="item.name" :value="item.id" ></el-option> </el-select> </el-form-item> <el-form-item label='商品单位:' prop="unit"> <el-input v-model="goodsInfoForm.unit" placeholder="请输入商品单位" style="width:420px;"></el-input> <!-- <span class="tip-span ml20">关键词之间用逗号分开,最多可以添加5个</span>--> </el-form-item> <el-form-item label="所属品牌:" prop="goods_brand"> <el-select v-model="goodsInfoForm.goods_brand" placeholder="请选择商品品牌" style="width: 420px;"> <el-option v-for="item in brandOptions" :key="item.id" :label="item.brand_cn" :value="item.id" ></el-option> </el-select> <el-link class="edit-type-span el-icon-plus" type="primary" :underline="false" @click="toBrand">新增品牌</el-link> </el-form-item> <el-form-item label='市场参考价链接:' prop="web_url"> <el-input v-model="goodsInfoForm.web_url" placeholder="请输入京东或者淘宝的商品链接" style="width:420px;"></el-input> </el-form-item> <el-form-item label='商品编码:' prop="out_goods_id"> <el-input v-model="goodsInfoForm.out_goods_id" placeholder="请输入商品编码(非必须)" style="width:420px;"></el-input> </el-form-item> <el-form-item label="商品图片:" prop="imgs"> <span class="tip-span" style="display: block;line-height: 34px;"> <i style="margin: 10px;">{{ goodsImgFileList.length }} / 5</i> 商品图片最多上传5张,默认第一张为主图 <span style="margin-left: 20px;">单张图片需限制在2M以内,可上传png、jpg格式,尺寸要求为800 * 800</span> </span> <el-upload class="upload-img" list-type="picture-card" action="#" :limit="5" :on-exceed="limitImg5" :before-upload="beforeUpGoodsImg" :http-request="uploadGoodsImg" :on-preview="handlePictureCardPreview" :on-remove="handleRemove" :file-list="goodsImgFileList" ><i class="el-icon-plus" /> </el-upload> <el-dialog :visible.sync="goodsImgVisible"> <img width="100%" :src="goodsImgUrlDialog" alt=""> </el-dialog> </el-form-item> </el-form> <!-- 修改 商品分类目录 --> <el-dialog v-loading="loadingSSQ" class="add-workorder-dialog" title="修改商品分类" :visible.sync="editGoodsTypeDialog" :destroy-on-close="true" :before-close="cancelType" width="60%" center > <!-- <p>当前所选类目:<span></span></p>--> <el-cascader-panel v-show="editGoodsTypeDialog" v-model="SSQGoodsList" :props='goodsprops' @change="SSQGoodsChange" ref="ssqGoodsCascader"></el-cascader-panel> <span slot="footer" class="dialog-footer"> <el-button @click="cancelType" size="mini">取 消</el-button> <el-button type="primary" @click="saveType" size="mini">确 定</el-button> </span> </el-dialog> </div> </template> <script> import { GetCategory, GetFreight, UploadImg } from '@/api/module/goods' import { getAreaList } from '@/api/module/retreat/address'; import { getBrandsInf } from '@/api/module/brand/brand' export default { name: 'goods', props: { goodsinfodata: { type: Object, required: true } }, data() { let categoryIdCheck = (rule, value, callback) => { if (this.goodsImgFileList.length < 1) { callback(new Error("请上传商品图片")); } else { callback(); } }; return { //loading: false, // categoryStr: '', goodsInfoDataClone: {}, areaOptions: [], // 地址 省 brandOptions: [], // 商品品牌 goodsInfoForm: { goods_id: 0, categoryStr: '', // 商品分类 地址拼接 categoryList: [], // 商品分类 id集合的数组 goods_des: '', // 关键词 goods_name: '', // 商品标题 category_id: '', producing_area: '', // 产地 deliver_area: '', // 发货地 unit: '', // 单位 goods_brand: '', // 品牌 web_url: '', // 外部链接 out_goods_id: '', // 商品编码 imgs: [] // 商品图片 }, goodsInfoRules: { categoryStr: [{required: true, message: '商品分类不能为空', trigger: 'blur'}], goods_name: [ {required: true, message: '请输入商品名称', trigger: 'blur'}, {min: 3, max: 30, message: '商品标题限制在3字符以上,30个字符以下', trigger: 'blur'} ], goods_des: [{required: true, message: '商品关键词不能为空', trigger: 'blur'}], producing_area:[{required: true, message: '请选择商品产地', trigger: 'change'}], deliver_area: [{required: true, message: '请选择商品发货地', trigger: 'change'}], unit: [{required: true, message: '商品单位不能为空', trigger: 'blur'}], goods_brand: [{required: true, message: '请选择商品品牌', trigger: 'change'}], imgs: [{required: true, message: '请上传商品图片', validator: categoryIdCheck}] }, goodsImgFileList: [], // 商品图片地址 集合list goodsImgVisible: false, // 图片能否预览 goodsImgUrlDialog: '', /* 修改 商品分类 */ loadingSSQ: false, editGoodsTypeDialog: false, SSQGoodsList: [], // 省市区 子组件goods的 goodsprops: { expandTrigger: 'click', lazy: true, lazyLoad: this.lazyLoad, value: "id", label: 'name', leaf: 'leaf' }, } // return end }, components: {}, watch: { // 'goodsImgFileList': { // handler(val, oldVal) { // if(val.length > 0) { // this.goodsInfoForm.imgs = ''; // let imgArr = []; // val.forEach(item => { // imgArr.push(item.url); // }) // this.goodsInfoForm.imgs = imgArr.toString(); // }else if(val.length === 0){ // this.goodsInfoForm.imgs = ''; // } // //console.log(123,this.goodsInfoForm.imgs); // }, // deep: true // } // serviceagsTags: { // handler(val, oldVal) { // this.$set(this.goodsInfoForm, 'serviceagsTags', val) // }, // deep: true // }, }, created() { }, mounted() { //深拷贝一份最开始的数据,为初始化准备 //this.goodsInfoDataClone = this.deepClone(this.goodsinfodata); this.goodsInfoForm = this.goodsinfodata; if( this.goodsInfoForm.imgs.length > 0 ) { this.goodsInfoForm.imgs.forEach( (item )=> { let objImg = { 'url': '' } objImg.url = item; this.goodsImgFileList.push(objImg); }) } //console.log("tup",this.goodsImgFileList) // 获取 省 this.getArea(); // 获取 商品品牌 this.getBrands(); }, methods: { // 获取 省 getArea() { let limboNode = { pid: 0 }; getAreaList(limboNode).then( res=> { if(res.data) { this.areaOptions = res.data; }else { this.areaOptions = []; } }); }, // 获取 商品品牌 getBrands() { getBrandsInf().then( res => { if(res.data) { this.brandOptions = res.data.data; }else { this.brandOptions = []; } }); }, /* 修改 商品分类 类目 */ editType() { this.SSQGoodsList = []; this.editGoodsTypeDialog = true; this.SSQGoodsList = this.goodsInfoForm.categoryList // console.log(222,this.SSQGoodsList); }, lazyLoad(node, resolve) { //debugger this.getSSQArea(node, resolve); }, getSSQArea(node, resolve) { const level = node.level; let limboNode = {}; if(level === 0) { //debugger limboNode = {pid: 0} } if(level === 1) { //debugger limboNode = { pid: node.value }; } if(level === 2) { limboNode = { pid: node.value }; } //this.loadingSSQ = true; getAreaList(limboNode).then(res => { let result = {}; if (level === 0) { result = res.data result.forEach(item => { item.value = item.id; item.label = item.name; item.children=[]; item.leaf = 0; // 可以控制 是否有下级 值为true都不行,必须等于0 }) } if (level === 1) { result = res.data result.forEach(item => { item.value = item.id; item.label = item.name item.children=[]; //这句代码表示当点击最后一级的时候 label后面不会转圈圈 并把相关值赋值到选择器上 item.leaf = 0 }) } if (level === 2) { result = res.data result.forEach(item => { item.value = item.id; item.label = item.name item.leaf = 1; }) } resolve(result) //this.loadingSSQ = false; }); }, SSQGoodsChange(value) { //this.SSQGoodsList = value; }, // 确认 修改 商品分类 saveType() { }, // 取消 修改 商品分类 cancelType() { this.editGoodsTypeDialog = false; }, // 上传 商品图片,限制 9 张 limitImg5() { this.$message({ message: '最多上传5张图片', type: 'warning' }) }, // 上传 商品图片 之前 beforeUpGoodsImg (file) { let isImgSize = (file.size / 1024 / 1024 ) > 2; if(file.type !== "image/png" && file.type !== "image/jpg" && file.type != "image/jpeg") { this.$message({ message: '上传图片格式只支持 jpg / png 格式', type: "warning" }); return false; } if(isImgSize) { this.$message({ message: '上传图片大小不能超过2MB', type: "warning" }); return false; } // 图片宽高尺寸限制 800*800 return new Promise(function(resolve, reject){ let _URL = window.URL || window.webkitURL; let img = new Image(); img.onload = function(){ // 图片是否是正方形 宽高比为 1 file.width = img.width; file.height = img.height; let valid = (img.width === 800) && (img.height === 800); valid ? resolve() : reject(); } img.src = _URL.createObjectURL(file); }).then(()=>{ return file; }, ()=>{ this.$message({ message:'商品图片尺寸必须为800 * 800,请重新选择!', type: 'warning' }); return Promise.reject(); }); }, // 上传 商品图片 uploadGoodsImg(param) { //console.log(327,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=> { let urlObj = {'url': ''}; if(res.data) { urlObj.url = res.data.image_url; this.goodsImgFileList.push(urlObj); this.goodsImgFileList.forEach(item=> { this.goodsInfoForm.imgs.push(item.url) }) this.$message({type:'success',message:'图片上传成功'}); // 只清除一次,不浪费哦 if(this.goodsImgFileList.length === 1) { this.$refs.goodsInfoForm.clearValidate('imgs'); } } }); }); }, // 商品信息 子组件 form表单校验, 在父组件中被调用 validateGoodsInfoForm () { let flag = null this.$refs['goodsInfoForm'].validate(valid => { if (valid) { flag = true } else { flag = false } }) return flag }, // 商品图片 预览 handlePictureCardPreview(file) { this.goodsImgUrlDialog = file.url; this.goodsImgVisible = true; }, // 删除 商品图片 handleRemove(file) { for (let i = 0; i < this.goodsImgFileList.length; i++) { if (file.uid === this.goodsImgFileList[i].uid) { this.goodsImgFileList.splice(i, 1) this.goodsImgFileList.imgs.splice(i, 1); } } if(this.goodsImgFileList.length === 0) { this.$refs.goodsInfoForm.validateField('imgs') }else { this.$refs.goodsInfoForm.clearValidate('imgs'); } }, // 维护品牌 toBrand() { this.$router.push({path: '/system/shop/brand'}); }, // 通用 方法 // 图片转换为 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 scoped> ul { padding: 0; } .goods-info { padding: 15px 0px; margin-top: 18px; } .type-text-span { display: inline-block; width: 420px; /*margin: 0 20px 0;*/ } .edit-type-span { display: inline-block; cursor: pointer; margin: 0 20px; } /* 一般提示性文字 */ .tip-span { color: #909399; font-size: 12px; } /deep/.el-form-item { margin-bottom: 20px; } </style>