zhuce
/
lilishop-ui
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

发布商品，商品图片拖拽改变位置

master
mabo 2021-06-28 18:53:57 +08:00
parent 1e6e7c123c
commit 25176c36fb
2 changed files with 33 additions and 37 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
seller/src/views/goods/goods-seller/addGoods.scss
View File

@ -423,7 +423,7 @@ div.base-info-item {
display:flex;
}
.demo-upload-list-cover div {
margin: 10% 0;
margin-top: 50px;
width: 100%;
> i {

68
seller/src/views/goods/goods-seller/goodsOperation.vue
View File

@ -137,28 +137,34 @@
<Input type="text" v-model="baseInfoForm.cost" placeholder="市场价格" clearable style="width: 260px"/>
</FormItem>
<FormItem class="form-item-view-el required" label="商品图片" prop="goodsGalleryFiles">
<!-- <div class="demo-upload-list" v-for="(item, __index) in baseInfoForm.goodsGalleryFiles" :key="__index">
<template v-if="item.status === 'finished'">
<img :src="item.url"/>
<div class="demo-upload-list-cover">
<div>
<Icon type="ios-eye-outline" @click.native="handleViewGoodsPicture(item.url)"></Icon>
<Icon type="ios-trash-outline" @click.native="handleRemoveGoodsPicture(item)"></Icon>
<vuedraggable
:list="baseInfoForm.goodsGalleryFiles"
:animation="200"
style="display:inline-block;"
ghost-class="thumb-ghost"
>
<div class="demo-upload-list" v-for="(item, __index) in baseInfoForm.goodsGalleryFiles" :key="__index">
<template v-if="item.status === 'finished'">
<img :src="item.url"/>
<div class="demo-upload-list-cover">
<div>
<Icon type="ios-eye-outline" size="30" @click.native="handleViewGoodsPicture(item.url)"></Icon>
<Icon type="ios-trash-outline" size="30" @click.native="handleRemoveGoodsPicture(item)"></Icon>
</div>
<!-- <div>
<Icon type="ios-arrow-dropleft" @click.native="
handleGoodsPicRemoteUp(baseInfoForm.goodsGalleryFiles,__index)"/>
<Icon type="ios-arrow-dropright" @click.native="
handleGoodsPicRemoteDown(baseInfoForm.goodsGalleryFiles,__index)"/>
</div> -->
</div>
<div>
<Icon type="ios-arrow-dropleft" @click.native="
handleGoodsPicRemoteUp(baseInfoForm.goodsGalleryFiles,__index)"/>
<Icon type="ios-arrow-dropright" @click.native="
handleGoodsPicRemoteDown(baseInfoForm.goodsGalleryFiles,__index)"/>
</div>
</div>
</template>
<template v-else>
<Progress v-if="item.showProgress" :percent="item.percentage" hide-info></Progress>
</template>
</div> -->
<!-- <Upload ref="upload" :show-upload-list="false" :default-file-list="baseInfoForm.goodsGalleryFiles"
</template>
<template v-else>
<Progress v-if="item.showProgress" :percent="item.percentage" hide-info></Progress>
</template>
</div>
</vuedraggable>
<Upload ref="upload" :show-upload-list="false" :default-file-list="baseInfoForm.goodsGalleryFiles"
:on-success="handleSuccessGoodsPicture" :format="['jpg', 'jpeg', 'png']"
:on-format-error="handleFormatError" :on-exceeded-size="handleMaxSize"
:before-upload="handleBeforeUploadGoodsPicture" multiple type="drag" :action="uploadFileUrl"
@ -166,8 +172,8 @@
<div style="width: 80px; height: 80px; line-height: 80px">
<Icon type="ios-camera" size="20"></Icon>
</div>
</Upload> -->
<upload-pic-thumb v-model="baseInfoForm.goodsGalleryFiles" :multiple="true"></upload-pic-thumb>
</Upload>
<!-- <upload-pic-thumb v-model="baseInfoForm.goodsGalleryFiles" :multiple="true"></upload-pic-thumb> -->
<Modal title="View Image" v-model="goodsPictureVisible">
<img :src="previewGoodsPicture" v-if="goodsPictureVisible" style="width: 100%"/>
@ -429,18 +435,17 @@
<script>
import {regular} from "@/utils";
import uploadPicThumb from "@/views/my-components/lili/upload-pic-thumb";
import editor from "@/views/my-components/lili/editor";
import * as API_GOODS from "@/api/goods";
import * as API_Shop from "@/api/shops";
import cloneObj from "@/utils/index";
import vuedraggable from "vuedraggable";
export default {
name: "addGoods",
components: {
uploadPicThumb,
editor,
vuedraggable
},
watch: {
selectGoodsType: {
@ -839,7 +844,6 @@ export default {
* @value 参数选项值
*/
selectParams(paramsGroup, groupIndex, params, paramsIndex, value) {
console.log(params.id);
if (!this.baseInfoForm.goodsParamsDTOList[groupIndex]) {
this.baseInfoForm.goodsParamsDTOList[groupIndex] = {
groupId:'',
@ -873,9 +877,8 @@ export default {
// 编辑sku图片
editSkuPicture(row) {
console.log(row);
if (row.images && row.images.length > 0) {
this.previewPicture = row.images[0];
this.previewPicture = row.images[0].url;
}
this.selectedSku = row;
this.showSkuPicture = true;
@ -939,7 +942,6 @@ export default {
});
},
handleBeforeUploadGoodsPicture() {
console.log(this.baseInfoForm);
const check = this.baseInfoForm.goodsGalleryFiles.length < 5;
if (!check) {
this.$Notice.warning({
@ -1141,7 +1143,6 @@ export default {
group.goodsParamsItemDTOList.forEach(param => {
param.groupId = group.groupId
paramsArr.push(param)
console.log(param);
})
})
// 循环参数分组
@ -1155,7 +1156,6 @@ export default {
})
})
});
console.log(this.goodsParams);
} else {
this.baseInfoForm.goodsParamsDTOList = []
}
@ -1306,7 +1306,6 @@ export default {
);
this.skuTableColumn = pushData;
console.log(this.skuTableColumn);
//克隆所有渲染的数据
let cloneTemp = cloneObj(this.skuInfo);
@ -1326,7 +1325,6 @@ export default {
cloneTemp.splice(0, 1);
result = this.specIterator(result, cloneTemp);
this.skuTableData = result;
console.log(this.skuTableData);
}
},
/**
@ -1456,7 +1454,6 @@ export default {
this.GET_GoodData();
return;
}
console.log(this.baseInfoForm);
this.GET_GoodsParams();
/** 1级校验 */
this.loading = true;
@ -1579,7 +1576,6 @@ export default {
}
/** 参数校验 **/
/* Object.keys(this.baseInfoForm.goodsParamsList).forEach((item) => {
console.warn(item.paramName)
});*/
if (this.goodsId) {