From de89249d3e41455cf2e00455467113e625d5ce6a Mon Sep 17 00:00:00 2001 From: misworga831 Date: Mon, 22 Jan 2024 14:09:00 +0800 Subject: [PATCH] =?UTF-8?q?improved:=20=E4=BC=98=E5=8C=96sku=E7=BC=96?= =?UTF-8?q?=E8=BE=91?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../src/components/goodsDetail/ShowGoods.vue | 12 +- buyer/src/pages/GoodsDetail.vue | 3 + .../views/goods/goods-seller/addGoods.scss | 6 +- .../goods/goods-seller/goodsOperationSec.vue | 539 ++++++++++-------- 4 files changed, 326 insertions(+), 234 deletions(-) diff --git a/buyer/src/components/goodsDetail/ShowGoods.vue b/buyer/src/components/goodsDetail/ShowGoods.vue index 089266aa..fe8d6d15 100644 --- a/buyer/src/components/goodsDetail/ShowGoods.vue +++ b/buyer/src/components/goodsDetail/ShowGoods.vue @@ -5,9 +5,8 @@
-
- - +
+
@@ -19,7 +18,7 @@ v-for="(item, index) in imgList" :key="index" > - +
@@ -581,9 +580,12 @@ export default { swiperGoodsImg() { this.skuDetail.specList.forEach((e) => { if (e.specName === "images") { - this.imgList = e.specImage; + this.imgList = this.skuDetail.goodsGalleryList; } }); + if (!this.imgList) { + this.imgList = [this.skuDetail.original]; + } }, }, diff --git a/buyer/src/pages/GoodsDetail.vue b/buyer/src/pages/GoodsDetail.vue index 218b1cd7..17d70b3e 100644 --- a/buyer/src/pages/GoodsDetail.vue +++ b/buyer/src/pages/GoodsDetail.vue @@ -130,6 +130,9 @@ export default { }); this.categoryBar = cateArr; this.$set(this, "goodsMsg", res.result); + if (!this.goodsMsg.data.intro) { + this.goodsMsg.data.intro = '' + } // 判断是否收藏 if (this.Cookies.getItem("userInfo")) { isStoreCollection("STORE", this.goodsMsg.data.storeId).then((res) => { diff --git a/seller/src/views/goods/goods-seller/addGoods.scss b/seller/src/views/goods/goods-seller/addGoods.scss index 849e8273..499380ab 100644 --- a/seller/src/views/goods/goods-seller/addGoods.scss +++ b/seller/src/views/goods/goods-seller/addGoods.scss @@ -342,18 +342,14 @@ div.base-info-item { } .sku-upload-list { - display: inline-block; - width: 60px; - height: 60px; text-align: center; - line-height: 60px; border: 1px solid transparent; border-radius: 4px; overflow: hidden; background: #fff; position: relative; box-shadow: 0 1px 1px rgba(0, 0, 0, 0.2); - margin-right: 4px; + margin-right: 8px; } .preview-picture { diff --git a/seller/src/views/goods/goods-seller/goodsOperationSec.vue b/seller/src/views/goods/goods-seller/goodsOperationSec.vue index bc78f691..de5901ce 100644 --- a/seller/src/views/goods/goods-seller/goodsOperationSec.vue +++ b/seller/src/views/goods/goods-seller/goodsOperationSec.vue @@ -1,7 +1,7 @@ @@ -98,12 +101,13 @@

商品规格及图片

- +
-
+
-
- -
- - - - - - - - + + +
+ +
+
- + -
-
- 上传视频 -
-
-
- -
- -
- - 已成功上传视频 + +
主图仅支持png，jpg，jpeg格式，宽高至少600*600px，大小2M内，可拖拽调整主图顺序
+ + +
+
+
+
- - - + + +
-
- +
@@ -159,148 +173,167 @@
- + + +
- - 规格项
+ + +
+ - + + + 添加规格图片 +
+
-
+
+
规格值
- + class="sku-item-content-val flex" label="" style="line-height: 32px;"> +
+ + + + + + + +
+
+ +
+ +
+ + +
+ +
+ +
+ + + + -
-
- -
- - +
+ +
  - + +
规格详细
-
+
点击加载sku数据
+
- - - - - + " + @mouseenter="handleMouseEnter">
- kg + @on-change="updateSkuTable(row, 'weight')"> + kg
- + -
@@ -311,11 +344,11 @@

规格描述内容

- + -
- +
+
@@ -325,7 +358,7 @@
+ @on-select-change="selectTree" @on-check-change="changeSelect">
@@ -358,12 +391,13 @@ - + + prop="weight"> - kg + kg

其他信息

@@ -391,13 +425,14 @@
+ v-model="params_panel" :title="paramsGroup.groupName" class="mb_10" style="text-align: left"> {{ paramsGroup.groupName }}

- - @@ -421,7 +457,7 @@

- + @@ -436,10 +472,10 @@ - + - - + +
@@ -451,8 +487,8 @@ import cloneObj from "@/utils/index"; import vuedraggable from "vuedraggable"; import tinymec from "@/views/lili-components/editor/index.vue"; -import { uploadFile } from "@/libs/axios"; -import { regular } from "@/utils"; +import {uploadFile} from "@/libs/axios"; +import {regular} from "@/utils"; import DPlayer from 'dplayer'; // import ossManage from "@/views/sys/oss-manage/ossManage"; import ossManage from "@/views/shop/ossManage"; @@ -489,13 +525,14 @@ export default { }; return { regular, - + openImage: false, + needToloadSku: false, total: 0, goodsVideo: "", showContent: false, listImages: [], + newSkuValues: [], contentImage: "", - visible: false, // 图片预览 previewImage: '', // 预览图片地址 global: 0, accessToken: "", //令牌token @@ -614,9 +651,9 @@ export default { validateError: [], baseInfoFormRule: { goodsName: [regular.REQUIRED, regular.WHITE_SPACE, regular.VARCHAR60], - price: [regular.REQUIRED, { validator: checkPrice }], + price: [regular.REQUIRED, {validator: checkPrice}], sellingPoint: [regular.REQUIRED, regular.VARCHAR60], - goodsUnit: [{ required: true, message: "请选择计量单位" }], + goodsUnit: [{required: true, message: "请选择计量单位"}], name: [regular.REQUIRED, regular.VARCHAR5], value: [regular.REQUIRED, regular.VARCHAR60], templateId: [regular.REQUIRED], @@ -670,6 +707,31 @@ export default { this.selectedFormBtnName = val; // this.picIndex = index; }, + handleLoadingSkuData() { + this.needToloadSku = false + this.renderTableData(this.skuTableData) + }, + changeSkuOpenImage() { + this.skuTableData.forEach(item => { + item.images = [] + }) + if (this.skuInfo.length > 0 && this.skuInfo[0].spec_values.length > 0) { + this.skuInfo[0].spec_values.forEach(item => { + item.images = [] + }) + } + }, + onAddSku(index) { + if (!this.newSkuValues[index]) { + this.$Message.error('请输入规格值') + return + } + this.skuInfo[index].spec_values.push({ + name: this.newSkuValues[index].name, + value: this.newSkuValues[index], + images: this.openImage ? [] : this.baseInfoForm.goodsGalleryFiles + }) + }, // 图片选择后回调 callbackSelected(val) { this.picModalFlag = false; @@ -679,7 +741,7 @@ export default { this.baseInfoForm[this.selectedFormBtnName].push(val); } }, - confirmUrls(){ + confirmUrls() { if (this.selectedImage && this.selectedFormBtnName == 'selectedSkuImages') { this.selectedSku.images = [...this.selectedSku.images, ...this.selectedImage]; } else { @@ -687,13 +749,13 @@ export default { } }, // 局部刷新 - refresh(v){ - if( v == 'template'){ + refresh(v) { + if (v == 'template') { this.GET_ShipTemplate('localRefresh'); - }else if( v == 'goodsUnit'){ + } else if (v == 'goodsUnit') { this.goodsUnitList = [] this.GET_GoodsUnit('localRefresh'); - }else{ + } else { this.getGoodsBrandList('localRefresh'); } }, @@ -742,7 +804,7 @@ export default { ) { this.baseInfoForm.goodsParamsDTOList[groupIndex].goodsParamsItemDTOList[ paramsIndex - ] = { + ] = { paramName: "", paramValue: "", isIndex: "", @@ -753,7 +815,7 @@ export default { } this.baseInfoForm.goodsParamsDTOList[groupIndex].goodsParamsItemDTOList[ paramsIndex - ] = { + ] = { paramName: params.paramName, paramValue: value, isIndex: params.isIndex, @@ -766,7 +828,7 @@ export default { editSkuPicture(row) { this.showContent = false if (row.images && row.images.length > 0) { - this.previewPicture = row.images[0].url; + this.previewPicture = row.images[0]; } this.selectedSku = row; this.showSkuPicture = true; @@ -794,14 +856,8 @@ export default { }, // 移除已选图片 handleRemove(item, index) { - this.selectedSku.images = this.selectedSku.images.filter( - (i) => i.url !== item.url - ); - if (this.selectedSku.images.length > 0 && index === 0) { - this.previewPicture = this.selectedSku.images[0].url; - } else if (this.selectedSku.images.length < 0) { - this.previewPicture = ""; - } + images.splice(index, 1) + this.previewPicture = ""; }, // 查看商品大图 handleViewGoodsPicture(url) { @@ -811,7 +867,7 @@ export default { // 移除商品图片 handleRemoveGoodsPicture(file) { this.baseInfoForm.goodsGalleryFiles = - this.baseInfoForm.goodsGalleryFiles.filter((i) => i.url !== file.url); + this.baseInfoForm.goodsGalleryFiles.filter((i) => i !== file); }, // 更新sku图片 updateSkuPicture() { @@ -820,13 +876,14 @@ export default { this.skuTableData[_index] = this.selectedSku; }, // sku图片上传成功 - handleSuccess(res, file) { + handleSuccess(res, file, images) { + this.$Spin.hide(); if (file.response) { file.url = file.response.result; - if (this.selectedSku.images) { - this.selectedSku.images.push(file); + if (images) { + images.push(file.url); } else { - this.selectedSku.images = [file]; + images = [file.url]; } this.previewPicture = file.url; } @@ -898,7 +955,7 @@ export default { handleSuccessGoodsPicture(res, file) { if (file.response) { file.url = file.response.result; - this.baseInfoForm.goodsGalleryFiles.push(file); + this.baseInfoForm.goodsGalleryFiles.push(file.url); } }, // 图片格式不正确 @@ -937,7 +994,7 @@ export default { this.selectedSku.images !== undefined && this.selectedSku.images.length > 5; if (check) { - this.$Notice.warning({ title: "图片数量不能大于五张" }); + this.$Notice.warning({title: "图片数量不能大于五张"}); return false; } }, @@ -947,12 +1004,12 @@ export default { API_GOODS.getCategoryBrandListDataSeller(this.categoryId).then( (response) => { this.brandList = response; - if(type === 'localRefresh') { + if (type === 'localRefresh') { this.$Message.success("刷新成功"); } } ).catch(() => { - if(type === 'localRefresh') { + if (type === 'localRefresh') { this.$Message.error("刷新失败，请重试"); } }); @@ -967,7 +1024,7 @@ export default { } if (type === 'localRefresh' && res.success) { this.$Message.success("刷新成功"); - } else if(type === 'localRefresh') { + } else if (type === 'localRefresh') { this.$Message.error("刷新失败，请重试"); } }); @@ -1008,7 +1065,7 @@ export default { response.result.recommend ? (response.result.recommend = 1) : (response.result.recommend = 0); - this.baseInfoForm = { ...this.baseInfoForm, ...response.result }; + this.baseInfoForm = {...this.baseInfoForm, ...response.result}; this.baseInfoForm.release = 1; //即使是被放入仓库，修改的时候也会显示会立即发布 this.categoryId = response.result.categoryPath.split(",")[2]; @@ -1018,7 +1075,7 @@ export default { ) { this.baseInfoForm.goodsGalleryFiles = response.result.goodsGalleryList.map((i) => { - return { url: i }; + return i; }); } @@ -1056,7 +1113,7 @@ export default { this.baseInfoForm.categoryPath = cateId.toString(); } this.firstData.goodsType && - (this.baseInfoForm.goodsType = this.firstData.goodsType); + (this.baseInfoForm.goodsType = this.firstData.goodsType); /** 查询商品参数 */ this.GET_GoodsParams(); }, @@ -1074,6 +1131,11 @@ export default { // alertQuantity: e.alertQuantity, weight: e.weight, }; + if (e.goodsGalleryList && e.goodsGalleryList.length >= 1) { + this.openImage = true + } else { + this.openImage = false + } e.specList.forEach((u) => { if (u.specName === "images") { sku.images = u.specImage; @@ -1091,6 +1153,7 @@ export default { id: u.specValueId, name: u.specName, value: u.specValue || "", + images: e.goodsGalleryList || [] }, ], }); @@ -1104,6 +1167,7 @@ export default { id: u.specValueId, name: u.specName, value: u.specValue || "", + images: e.goodsGalleryList || [] }); } if (!sk.spec_id && u.specName === "specId") { @@ -1182,7 +1246,7 @@ export default { } // 写入对象，下标，具体对象 this.$set(this.skuInfo, this.skuInfo.length, { - spec_values: [{ name: "", value: "" }], + spec_values: [{name: "", value: "", images: []}], name: "", }); @@ -1214,19 +1278,19 @@ export default { }, // 正则验证（中文超过10个英文数字超过20个） zz(len, value) { - for(let i=0; i= 10) { this.$Message.error("规格值不能大于10个！"); return; } let beforeLength = item.spec_values.length; - this.$set(item.spec_values, item.spec_values.length, { + let itemValue = { name: item.name, - value: "", - }); + value: this.newSkuValues[$index], + }; + if (this.openImage) { + itemValue.images = [] + } else { + itemValue.images = this.baseInfoForm.goodsGalleryFiles + } + this.$set(item.spec_values, item.spec_values.length, itemValue); if (item.spec_values.length > 1) { let index = beforeLength; let filterSkuInfo = this.skuInfo.filter((i) => i.name !== item.name); @@ -1395,7 +1469,7 @@ export default { index = 1; for (let i = 0; i < totalLength; i++) { let find = cloneObj(this.skuTableData[index - 1]); - find[item.name] = ""; + find[item.name] = this.newSkuValues[$index]; find.id = ""; find.price && (find.price = ""); find.sn && (find.sn = ""); @@ -1410,7 +1484,7 @@ export default { } else { for (let i = 0; i < totalLength; i++) { let find = cloneObj(this.skuTableData[index - 1]); - find[item.name] = ""; + find[item.name] = this.newSkuValues[$index]; find.id = ""; find.price && (find.price = ""); find.sn && (find.sn = ""); @@ -1425,6 +1499,7 @@ export default { } } this.baseInfoForm.regeneratorSkuFlag = true; + this.newSkuValues[$index] = ""; } }, handleClearSku() { @@ -1510,10 +1585,6 @@ export default { title: "货号", slot: "sn", }, - { - title: "图片", - slot: "images", - } ); this.skuTableColumn = pushData; @@ -1734,6 +1805,7 @@ export default { } let skuInfoNames = this.skuInfo.map((n) => n.name); submit.skuList = []; + let containEmptyImage = false; this.skuTableData.map((sku) => { let skuCopy = { cost: 1, @@ -1741,8 +1813,20 @@ export default { quantity: sku.quantity, // alertQuantity: sku.alertQuantity, sn: sku.sn, - images: sku.images, + images: [], }; + if (this.openImage) { + this.skuInfo[0].spec_values.forEach(item => { + if (!item.images || item.images.length === 0) { + containEmptyImage = true; + return; + } + if (item.value === sku[this.skuInfo[0].name]) { + skuCopy.images = item.images + } + }) + + } if (sku.weight) { skuCopy.weight = sku.weight; } @@ -1757,9 +1841,14 @@ export default { } submit.skuList.push(skuCopy); }); + if (containEmptyImage) { + this.$Message.error("开启规格图片，所有规格图片不能为空！"); + this.submitLoading = false; + return; + } if (submit.goodsGalleryFiles.length > 0) { submit.goodsGalleryList = submit.goodsGalleryFiles.map( - (i) => i.url + (i) => i ); } /** 参数校验 **/ @@ -1801,7 +1890,7 @@ export default { this.baseInfoForm.skuList = this.skuTableData; if (this.baseInfoForm.goodsGalleryFiles.length > 0) { this.baseInfoForm.goodsGalleryList = - this.baseInfoForm.goodsGalleryFiles.map((i) => i.url); + this.baseInfoForm.goodsGalleryFiles.map((i) => i); } this.baseInfoForm.categoryName = []; this.baseInfoForm.saveType = "TEMPLATE"; @@ -1843,23 +1932,23 @@ export default { API_GOODS.saveDraftGoods(this.baseInfoForm).then((res) => { if (res.success) { this.$Message.info("保存成功！"); - this.$router.push({ name: "template-goods" }); + this.$router.push({name: "template-goods"}); } }); }, - GET_ShipTemplate(type){ - // 获取物流模板 - API_Shop.getShipTemplate().then((res) => { - if (res.success) { - this.logisticsTemplate = res.result; - } - if (type === 'localRefresh' && res.success) { - this.$Message.success("刷新成功"); - } else if(type === 'localRefresh') { - this.$Message.error("刷新失败，请重试"); - } - }); - } + GET_ShipTemplate(type) { + // 获取物流模板 + API_Shop.getShipTemplate().then((res) => { + if (res.success) { + this.logisticsTemplate = res.result; + } + if (type === 'localRefresh' && res.success) { + this.$Message.success("刷新成功"); + } else if (type === 'localRefresh') { + this.$Message.error("刷新失败，请重试"); + } + }); + } }, mounted() { this.accessToken = { @@ -1933,10 +2022,12 @@ export default { .mb-10 { margin-bottom: 10px; } -.view-video{ + +.view-video { margin: 0 10px; } -.refresh-icon{ + +.refresh-icon { margin-left: 10px; }