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

商家端图片上传采用素材管理上传

master
15386982806 2024-01-09 16:39:52 +08:00
parent b1f9c0adf2
commit 92b61a203f
14 changed files with 197 additions and 83 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

106
seller/src/views/goods/goods-seller/goodsOperationSec.vue
View File

@ -1,7 +1,7 @@
<template> <template>
<div> <div>
<Modal title="预览图片" v-model="visible"> <Modal title="预览图片" v-model="visible">
<img :src="previewImage" v-if="visible" style="width: 100%"> <img :src="previewPicture" v-if="visible" style="width: 100%">
</Modal> </Modal>
<div class="content-goods-publish"> <div class="content-goods-publish">
<Form ref="baseInfoForm" :label-width="120" :model="baseInfoForm" :rules="baseInfoFormRule"> <Form ref="baseInfoForm" :label-width="120" :model="baseInfoForm" :rules="baseInfoFormRule">
@ -113,15 +113,17 @@
</template> </template>
</div> </div>
</vuedraggable> </vuedraggable>
<div style="width: 148px; height: 148px; line-height: 148px;border: 1px dashed #dcdee2;" @click="handleCLickImg('goodsGalleryFiles')">
<Upload ref="upload" :action="uploadFileUrl" :before-upload="handleBeforeUploadGoodsPicture" <Icon size="20" type="md-add"></Icon>
:format="['jpg', 'jpeg', 'png']" :headers="{ ...accessToken }" :max-size="2048" </div>
:on-exceeded-size="handleMaxSize" :on-format-error="handleFormatError" <!--<Upload ref="upload" :action="uploadFileUrl" :before-upload="handleBeforeUploadGoodsPicture"-->
:on-success="handleSuccessGoodsPicture" :show-upload-list="false" multiple type="drag"> <!--:format="['jpg', 'jpeg', 'png']" :headers="{ ...accessToken }" :max-size="2048"-->
<div style="width: 148px; height: 148px; line-height: 148px"> <!--:on-exceeded-size="handleMaxSize" :on-format-error="handleFormatError"-->
<Icon size="20" type="md-add"></Icon> <!--:on-success="handleSuccessGoodsPicture" :show-upload-list="false" multiple type="drag">-->
</div> <!--<div style="width: 148px; height: 148px; line-height: 148px">-->
</Upload> <!--<Icon size="20" type="md-add"></Icon>-->
<!--</div>-->
<!--</Upload>-->
</div> </div>
<Modal v-model="goodsPictureVisible" title="View Image"> <Modal v-model="goodsPictureVisible" title="View Image">
<img v-if="goodsPictureVisible" :src="previewGoodsPicture" style="width: 100%" /> <img v-if="goodsPictureVisible" :src="previewGoodsPicture" style="width: 100%" />
@ -264,26 +266,33 @@
<img v-if="previewPicture !== ''" :src="previewPicture" /> <img v-if="previewPicture !== ''" :src="previewPicture" />
</div> </div>
<Divider /> <Divider />
<vuedraggable :animation="200" :list="selectedSku.images" style="display: inline-block"> <div style="display: flex;align-items: flex-start;">
<div v-for="(img, __index) in selectedSku.images" :key="__index" class="sku-upload-list"> <vuedraggable :animation="200" :list="selectedSku.images" style="display: inline-block">
<template> <div v-for="(img, __index) in selectedSku.images" :key="__index" class="sku-upload-list">
<img :src="img.url" /> <template>
<div class="sku-upload-list-cover"> <img :src="img.url" />
<Icon type="md-search" @click="handleView(img.url)"></Icon> <div class="sku-upload-list-cover">
<Icon type="md-trash" @click="handleRemove(img, __index)"></Icon> <Icon type="md-search" @click="handleView(img.url)"></Icon>
</div> <Icon type="md-trash" @click="handleRemove(img, __index)"></Icon>
</template> </div>
</template>
</div>
</vuedraggable>
<div style="display: inline-block; width: 60px; height: 60px;border: 1px dashed #dcdee2;border-radius: 4px;" @click="handleCLickImg('selectedSkuImages')">
<div>
<Icon size="55" type="ios-camera"></Icon>
</div>
</div> </div>
</vuedraggable> </div>
<Upload ref="uploadSku" :action="uploadFileUrl" :before-upload="handleBeforeUpload" <!--<Upload ref="uploadSku" :action="uploadFileUrl" :before-upload="handleBeforeUpload"-->
:format="['jpg', 'jpeg', 'png']" :headers="{ ...accessToken }" :max-size="2048" <!--:format="['jpg', 'jpeg', 'png']" :headers="{ ...accessToken }" :max-size="2048"-->
:on-exceeded-size="handleMaxSize" :on-format-error="handleFormatError" <!--:on-exceeded-size="handleMaxSize" :on-format-error="handleFormatError"-->
:on-success="handleSuccess" :show-upload-list="false" multiple <!--:on-success="handleSuccess" :show-upload-list="false" multiple-->
style="display: inline-block; width: 58px" type="drag"> <!--style="display: inline-block; width: 58px" type="drag">-->
<div> <!--<div>-->
<Icon size="55" type="ios-camera"></Icon> <!--<Icon size="55" type="ios-camera"></Icon>-->
</div> <!--</div>-->
</Upload> <!--</Upload>-->
</Modal> </Modal>
</template> </template>
</Table> </Table>
@ -419,6 +428,14 @@
</div> </div>
</Modal> </Modal>
<!--<Modal width="1200px" v-model="picModalFlag">-->
<!--<ossManage @callback="callbackSelected" ref="ossManage" />-->
<!--</Modal>-->
<Modal width="1200px" v-model="picModalFlag" @on-ok="confirmUrls">
<ossManage @callback="callbackSelected" @selected="(list)=>{ selectedImage = list}" ref="ossManage" />
</Modal>
</div> </div>
</template> </template>
<script> <script>
@ -431,12 +448,16 @@ import tinymec from "@/views/lili-components/editor/index.vue";
import { uploadFile } from "@/libs/axios"; import { uploadFile } from "@/libs/axios";
import { regular } from "@/utils"; import { regular } from "@/utils";
import DPlayer from 'dplayer'; import DPlayer from 'dplayer';
// import ossManage from "@/views/sys/oss-manage/ossManage";
import ossManage from "@/views/shop/ossManage";
export default { export default {
name: "goodsOperationSec", name: "goodsOperationSec",
components: { components: {
editor: tinymec, editor: tinymec,
vuedraggable, vuedraggable,
ossManage
}, },
props: { props: {
firstData: { firstData: {
@ -621,6 +642,9 @@ export default {
"specId", "specId",
"specValueId", "specValueId",
], ],
picModalFlag: false, // 图片选择器
selectedFormBtnName: "", // 点击图片绑定form
selectedImage: [],
}; };
}, },
watch: { watch: {
@ -632,6 +656,29 @@ export default {
} }
}, },
methods: { methods: {
// 选择图片modal
handleCLickImg(val, index) {
this.$refs.ossManage.selectImage = true;
this.picModalFlag = true;
this.selectedFormBtnName = val;
// this.picIndex = index;
},
// 图片选择后回调
callbackSelected(val) {
this.picModalFlag = false;
if (val && this.selectedFormBtnName == 'selectedSkuImages') {
this.selectedSku.images.push(val);
} else {
this.baseInfoForm[this.selectedFormBtnName].push(val);
}
},
confirmUrls(){
if (this.selectedImage && this.selectedFormBtnName == 'selectedSkuImages') {
this.selectedSku.images = [...this.selectedSku.images, ...this.selectedImage];
} else {
this.baseInfoForm[this.selectedFormBtnName] = [...this.baseInfoForm[this.selectedFormBtnName], ...this.selectedImage];
}
},
// 局部刷新 // 局部刷新
refresh(v){ refresh(v){
if( v == 'template'){ if( v == 'template'){
@ -728,7 +775,6 @@ export default {
}, },
}); });
} }
console.log('初始化操作')
}, },
pre() { pre() {
// 上一步 // 上一步

12
seller/src/views/lili-components/editor/upload-image.vue
View File

@ -27,7 +27,7 @@
<Icon <Icon
size="30" size="30"
type="md-trash" type="md-trash"
@click.native="handleRemoveGoodsPicture(item)" @click.native="handleRemoveGoodsPicture(__index)"
></Icon> ></Icon>
</div> </div>
</div> </div>
@ -64,8 +64,8 @@
<script> <script>
import vuedraggable from "vuedraggable"; import vuedraggable from "vuedraggable";
import {uploadFile} from "@/libs/axios"; import {uploadFile} from "@/libs/axios";
import OssManage from "@/views/sys/oss-manage/ossManage"; // import OssManage from "@/views/sys/oss-manage/ossManage";
import OssManage from "@/views/shop/ossManage";
export default { export default {
name: "upload-image", name: "upload-image",
components: { components: {
@ -89,7 +89,7 @@ export default {
}, },
methods: { methods: {
handleClickUploadImage(){ handleClickUploadImage(){
this.show = true this.show = true;
}, },
// 回调给父级 // 回调给父级
callback() { callback() {
@ -98,7 +98,7 @@ export default {
this.$emit('callback',formatImages) this.$emit('callback',formatImages)
}, },
// 移除商品图片 // 移除商品图片
handleRemoveGoodsPicture(file) { handleRemoveGoodsPicture(__index) {
this.images.splice(__index, 1); this.images.splice(__index, 1);
}, },
// 图片大小不正确 // 图片大小不正确
@ -134,7 +134,7 @@ export default {
}, },
// 从资源库中导入图片 // 从资源库中导入图片
importOSS(){ importOSS(){
this.showOssManager = true this.showOssManager = true;
this.$refs.ossManage.selectImage = true; this.$refs.ossManage.selectImage = true;
} }
} }

81
seller/src/views/my-components/lili/upload-pic-thumb.vue
View File

@ -22,28 +22,32 @@
</div> </div>
</div> </div>
</vuedraggable> </vuedraggable>
<Upload <div style="display: inline-block; width: 60px; height: 60px;border: 1px dashed #dcdee2;border-radius: 4px;line-height: 60px;text-align: center;"
:disabled="disable" @click="handleCLickImg('uploadList')">
ref="upload" <Icon size="20" type="md-camera"></Icon>
:multiple="multiple" </div>
:show-upload-list="false" <!--<Upload-->
:on-success="handleSuccess" <!--:disabled="disable"-->
:on-error="handleError" <!--ref="upload"-->
:format="['jpg','jpeg','png','gif']" <!--:multiple="multiple"-->
:max-size="1024" <!--:show-upload-list="false"-->
:on-format-error="handleFormatError" <!--:on-success="handleSuccess"-->
:on-exceeded-size="handleMaxSize" <!--:on-error="handleError"-->
:before-upload="handleBeforeUpload" <!--:format="['jpg','jpeg','png','gif']"-->
type="drag" <!--:max-size="1024"-->
:action="uploadFileUrl" <!--:on-format-error="handleFormatError"-->
:headers="accessToken" <!--:on-exceeded-size="handleMaxSize"-->
style="display: inline-block;width:58px;" <!--:before-upload="handleBeforeUpload"-->
v-if="!isView" <!--type="drag"-->
> <!--:action="uploadFileUrl"-->
<div style="width: 58px;height:58px;line-height: 58px;"> <!--:headers="accessToken"-->
<Icon type="md-camera" size="20"></Icon> <!--style="display: inline-block;width:58px;"-->
</div> <!--v-if="!isView"-->
</Upload> <!--&gt;-->
<!--<div style="width: 58px;height:58px;line-height: 58px;">-->
<!--<Icon type="md-camera" size="20"></Icon>-->
<!--</div>-->
<!--</Upload>-->
</div> </div>
<Modal title="图片预览" v-model="viewImage" :styles="{top: '30px'}" draggable> <Modal title="图片预览" v-model="viewImage" :styles="{top: '30px'}" draggable>
<img :src="imgUrl" alt="无效的图片链接" style="width: 100%;margin: 0 auto;display: block;" /> <img :src="imgUrl" alt="无效的图片链接" style="width: 100%;margin: 0 auto;display: block;" />
@ -51,16 +55,22 @@
<Button @click="viewImage=false">关闭</Button> <Button @click="viewImage=false">关闭</Button>
</div> </div>
</Modal> </Modal>
<Modal width="1200px" v-model="picModalFlag" @on-ok="confirmUrls">
<ossManage @callback="callbackSelected" @selected="(list)=>{ selectedImage = list}" ref="ossManage" />
</Modal>
</div> </div>
</template> </template>
<script> <script>
import { uploadFile } from "@/libs/axios"; import { uploadFile } from "@/libs/axios";
import vuedraggable from "vuedraggable"; import vuedraggable from "vuedraggable";
import ossManage from "@/views/shop/ossManage";
export default { export default {
name: "uploadPicThumb", name: "uploadPicThumb",
components: { components: {
vuedraggable vuedraggable,
ossManage
}, },
props: { props: {
value: { // 默认值 value: { // 默认值
@ -97,10 +107,33 @@ export default {
uploadFileUrl: uploadFile, // 上传文件 uploadFileUrl: uploadFile, // 上传文件
uploadList: [], // 上传文件列表 uploadList: [], // 上传文件列表
viewImage: false, // 是否预览图片 viewImage: false, // 是否预览图片
imgUrl: "" // 图片地址 imgUrl: "", // 图片地址
picModalFlag: false, // 图片选择器
selectedFormBtnName: "", // 点击图片绑定form
selectedImage: [],
}; };
}, },
methods: { methods: {
// 选择图片modal
handleCLickImg(val, index) {
this.$refs.ossManage.selectImage = true;
this.picModalFlag = true;
this.selectedFormBtnName = val;
},
// 图片选择后回调
callbackSelected(val) {
this.picModalFlag = false;
if (!this.multiple && this.uploadList && this.uploadList.length > 0) {
// 删除第一张
this.uploadList.splice(0, 1);
}
this.uploadList.push(val);
// 返回组件值
this.returnValue();
},
confirmUrls(){
},
onEnd() { onEnd() {
this.returnValue(); this.returnValue();
}, },

3
seller/src/views/shop/hotzone/components/Zone.vue
View File

@ -99,7 +99,8 @@
<script> <script>
import changeSize from "../directives/changeSize"; import changeSize from "../directives/changeSize";
import dragItem from "../directives/dragItem"; import dragItem from "../directives/dragItem";
import ossManage from "@/views/sys/oss-manage/ossManage"; // import ossManage from "@/views/sys/oss-manage/ossManage";
import ossManage from "@/views/shop/ossManage";
export default { export default {
name: "Zone", name: "Zone",

3
seller/src/views/shop/modelForm.vue
View File

@ -161,7 +161,8 @@
<script> <script>
import Draggable from "vuedraggable"; import Draggable from "vuedraggable";
import ModelFormItem from "./modelFormItem.vue"; import ModelFormItem from "./modelFormItem.vue";
import ossManage from "@/views/sys/oss-manage/ossManage"; // import ossManage from "@/views/sys/oss-manage/ossManage";
import ossManage from "@/views/shop/ossManage";
export default { export default {
name: "modelForm", name: "modelForm",
components: { components: {

13
seller/src/views/shop/modelFormItem.vue
View File

@ -204,9 +204,7 @@
> >
</div> </div>
<div> <div>
选择图片：<Button size="small" type="primary" @click="handleSelectImg" 选择图片：<Button size="small" type="primary" @click="handleSelectImg">选择图片</Button>&nbsp;
>选择图片</Button
>&nbsp;
</div> </div>
</div> </div>
</Modal> </Modal>
@ -218,11 +216,7 @@
></liliDialog> ></liliDialog>
<!-- 选择图片 --> <!-- 选择图片 -->
<Modal width="1200px" v-model="picModelFlag" footer-hide> <Modal width="1200px" v-model="picModelFlag" footer-hide>
<ossManage <ossManage @callback="callbackSelected" :isComponent="true" ref="ossManage"/>
@callback="callbackSelected"
:isComponent="true"
ref="ossManage"
/>
</Modal> </Modal>
</div> </div>
</template> </template>
@ -236,7 +230,8 @@ import NewGoodsSort from "./modelList/newGoodsSort.vue";
import Recommend from "./modelList/recommend.vue"; import Recommend from "./modelList/recommend.vue";
import NotEnough from "./modelList/notEnough.vue"; import NotEnough from "./modelList/notEnough.vue";
import Seckill from "./modelList/seckill.vue"; import Seckill from "./modelList/seckill.vue";
import ossManage from "@/views/sys/oss-manage/ossManage"; // import ossManage from "@/views/sys/oss-manage/ossManage";
import ossManage from "@/views/shop/ossManage";
export default { export default {
name: "modelFormItem", name: "modelFormItem",

3
seller/src/views/shop/modelList/carousel.vue
View File

@ -120,7 +120,8 @@
</template> </template>
<script> <script>
import ossManage from "@/views/sys/oss-manage/ossManage"; // import ossManage from "@/views/sys/oss-manage/ossManage";
import ossManage from "@/views/shop/ossManage";
export default { export default {
name: "modelCarousel", name: "modelCarousel",
props: ["data"], props: ["data"],

3
seller/src/views/shop/modelList/carousel1.vue
View File

@ -91,7 +91,8 @@
</template> </template>
<script> <script>
import ossManage from "@/views/sys/oss-manage/ossManage"; // import ossManage from "@/views/sys/oss-manage/ossManage";
import ossManage from "@/views/shop/ossManage";
export default { export default {
name: "modelCarousel", name: "modelCarousel",
props: ["data"], props: ["data"],

3
seller/src/views/shop/modelList/carousel2.vue
View File

@ -181,7 +181,8 @@
</template> </template>
<script> <script>
import ossManage from "@/views/sys/oss-manage/ossManage"; // import ossManage from "@/views/sys/oss-manage/ossManage";
import ossManage from "@/views/shop/ossManage";
export default { export default {
name: "modelCarousel", name: "modelCarousel",
props: ["data"], props: ["data"],

3
seller/src/views/shop/modelList/firstPageAdvert.vue
View File

@ -63,7 +63,8 @@
</div> </div>
</template> </template>
<script> <script>
import ossManage from "@/views/sys/oss-manage/ossManage"; // import ossManage from "@/views/sys/oss-manage/ossManage";
import ossManage from "@/views/shop/ossManage";
export default { export default {
props:{ props:{
data: { data: {

3
seller/src/views/shop/modelList/newGoodsSort.vue
View File

@ -139,7 +139,8 @@
</div> </div>
</template> </template>
<script> <script>
import ossManage from "@/views/sys/oss-manage/ossManage"; // import ossManage from "@/views/sys/oss-manage/ossManage";
import ossManage from "@/views/shop/ossManage";
export default { export default {
props:{ props:{
data:{ data:{

5
seller/src/views/shop/modelList/recommend.vue
View File

@ -205,7 +205,8 @@
</div> </div>
</template> </template>
<script> <script>
import ossManage from "@/views/sys/oss-manage/ossManage"; // import ossManage from "@/views/sys/oss-manage/ossManage";
import ossManage from "@/views/shop/ossManage";
export default { export default {
props: { props: {
data: { data: {
@ -415,4 +416,4 @@ export default {
align-items: start; align-items: start;
padding: 0 30px; padding: 0 30px;
} }
</style> </style>

39
seller/src/views/shop/ossManage.vue
View File

@ -281,6 +281,18 @@
} }
}, },
}, },
{title: "文件类型", key: "fileType", width: 115, className: this.selectImage == true ? "none" : "",},
{
title: "文件大小",
key: "fileSize",
width: 115,
sortable: true,
className: this.selectImage == true ? "none" : "",
render: (h, params) => {
let m = ((params.row.fileSize * 1.0) / (1024 * 1024)).toFixed(2) + " MB";
return h("span", m);
},
},
{ {
title: "上传者", title: "上传者",
key: "createBy", key: "createBy",
@ -304,7 +316,7 @@
key: "action", key: "action",
align: "center", align: "center",
fixed: "right", fixed: "right",
width: 300, width: 150,
render: (h, params) => { render: (h, params) => {
return h("div", [ return h("div", [
h("Button", { h("Button", {
@ -338,12 +350,25 @@
directoryName: [{required: true, message: "请输入分组名称", trigger: "blur",},], directoryName: [{required: true, message: "请输入分组名称", trigger: "blur",},],
id: [{required: true, message: "请选择分组", trigger: "blur", type: "array",},], id: [{required: true, message: "请选择分组", trigger: "blur", type: "array",},],
}, },
selectImage: false, //是否是选择
} }
}, },
props:{ props: {
isComponent:{ isComponent: {
default: false, default: false,
type:Boolean type: Boolean,
},
choose: {
type: String,
default: ""
}
},
watch: {
selectImage(val) {
if (val && !this.data.length) this.init();
},
choose(val) {
if (val) this.selectImage = val
} }
}, },
mounted() { mounted() {
@ -657,6 +682,12 @@
} }
return arr; return arr;
}, },
/**
* 选择
*/
selectedParams(val) {
this.$emit("callback", val);
},
} }
} }
</script> </script>

3
seller/src/views/shop/wap/decorate.vue
View File

@ -226,7 +226,8 @@
</div> </div>
</template> </template>
<script> <script>
import ossManage from "@/views/sys/oss-manage/ossManage"; // import ossManage from "@/views/sys/oss-manage/ossManage";
import ossManage from "@/views/shop/ossManage";
import hotzone from "@/views/shop/hotzone"; import hotzone from "@/views/shop/hotzone";
import { modelData } from "./config"; import { modelData } from "./config";
import ways from "@/views/lili-dialog/wap.js"; // 选择链接的类型 import ways from "@/views/lili-dialog/wap.js"; // 选择链接的类型