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

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

@ -27,7 +27,7 @@
<Icon
size="30"
type="md-trash"
@click.native="handleRemoveGoodsPicture(item)"
@click.native="handleRemoveGoodsPicture(__index)"
></Icon>
</div>
</div>
@ -64,8 +64,8 @@
<script>
import vuedraggable from "vuedraggable";
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 {
name: "upload-image",
components: {
@ -89,7 +89,7 @@ export default {
},
methods: {
handleClickUploadImage(){
this.show = true
this.show = true;
},
// 回调给父级
callback() {
@ -98,7 +98,7 @@ export default {
this.$emit('callback',formatImages)
},
// 移除商品图片
handleRemoveGoodsPicture(file) {
handleRemoveGoodsPicture(__index) {
this.images.splice(__index, 1);
},
// 图片大小不正确
@ -134,7 +134,7 @@ export default {
},
// 从资源库中导入图片
importOSS(){
this.showOssManager = true
this.showOssManager = 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>
</vuedraggable>
<Upload
:disabled="disable"
ref="upload"
:multiple="multiple"
:show-upload-list="false"
:on-success="handleSuccess"
:on-error="handleError"
:format="['jpg','jpeg','png','gif']"
:max-size="1024"
:on-format-error="handleFormatError"
:on-exceeded-size="handleMaxSize"
:before-upload="handleBeforeUpload"
type="drag"
:action="uploadFileUrl"
:headers="accessToken"
style="display: inline-block;width:58px;"
v-if="!isView"
>
<div style="width: 58px;height:58px;line-height: 58px;">
<Icon type="md-camera" size="20"></Icon>
</div>
</Upload>
<div style="display: inline-block; width: 60px; height: 60px;border: 1px dashed #dcdee2;border-radius: 4px;line-height: 60px;text-align: center;"
@click="handleCLickImg('uploadList')">
<Icon size="20" type="md-camera"></Icon>
</div>
<!--<Upload-->
<!--:disabled="disable"-->
<!--ref="upload"-->
<!--:multiple="multiple"-->
<!--:show-upload-list="false"-->
<!--:on-success="handleSuccess"-->
<!--:on-error="handleError"-->
<!--:format="['jpg','jpeg','png','gif']"-->
<!--:max-size="1024"-->
<!--:on-format-error="handleFormatError"-->
<!--:on-exceeded-size="handleMaxSize"-->
<!--:before-upload="handleBeforeUpload"-->
<!--type="drag"-->
<!--:action="uploadFileUrl"-->
<!--:headers="accessToken"-->
<!--style="display: inline-block;width:58px;"-->
<!--v-if="!isView"-->
<!--&gt;-->
<!--<div style="width: 58px;height:58px;line-height: 58px;">-->
<!--<Icon type="md-camera" size="20"></Icon>-->
<!--</div>-->
<!--</Upload>-->
</div>
<Modal title="图片预览" v-model="viewImage" :styles="{top: '30px'}" draggable>
<img :src="imgUrl" alt="无效的图片链接" style="width: 100%;margin: 0 auto;display: block;" />
@ -51,16 +55,22 @@
<Button @click="viewImage=false">关闭</Button>
</div>
</Modal>
<Modal width="1200px" v-model="picModalFlag" @on-ok="confirmUrls">
<ossManage @callback="callbackSelected" @selected="(list)=>{ selectedImage = list}" ref="ossManage" />
</Modal>
</div>
</template>
<script>
import { uploadFile } from "@/libs/axios";
import vuedraggable from "vuedraggable";
import ossManage from "@/views/shop/ossManage";
export default {
name: "uploadPicThumb",
components: {
vuedraggable
vuedraggable,
ossManage
},
props: {
value: { // 默认值
@ -97,10 +107,33 @@ export default {
uploadFileUrl: uploadFile, // 上传文件
uploadList: [], // 上传文件列表
viewImage: false, // 是否预览图片
imgUrl: "" // 图片地址
imgUrl: "", // 图片地址
picModalFlag: false, // 图片选择器
selectedFormBtnName: "", // 点击图片绑定form
selectedImage: [],
};
},
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() {
this.returnValue();
},

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

@ -99,7 +99,8 @@
<script>
import changeSize from "../directives/changeSize";
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 {
name: "Zone",

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

@ -161,7 +161,8 @@
<script>
import Draggable from "vuedraggable";
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 {
name: "modelForm",
components: {

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

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

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

@ -120,7 +120,8 @@
</template>
<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 {
name: "modelCarousel",
props: ["data"],

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

@ -91,7 +91,8 @@
</template>
<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 {
name: "modelCarousel",
props: ["data"],

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

@ -181,7 +181,8 @@
</template>
<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 {
name: "modelCarousel",
props: ["data"],

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

@ -63,7 +63,8 @@
</div>
</template>
<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 {
props:{
data: {

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

@ -139,7 +139,8 @@
</div>
</template>
<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 {
props:{
data:{

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

@ -205,7 +205,8 @@
</div>
</template>
<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 {
props: {
data: {
@ -415,4 +416,4 @@ export default {
align-items: start;
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: "上传者",
key: "createBy",
@ -304,7 +316,7 @@
key: "action",
align: "center",
fixed: "right",
width: 300,
width: 150,
render: (h, params) => {
return h("div", [
h("Button", {
@ -338,12 +350,25 @@
directoryName: [{required: true, message: "请输入分组名称", trigger: "blur",},],
id: [{required: true, message: "请选择分组", trigger: "blur", type: "array",},],
},
selectImage: false, //是否是选择
}
},
props:{
isComponent:{
props: {
isComponent: {
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() {
@ -657,6 +682,12 @@
}
return arr;
},
/**
* 选择
*/
selectedParams(val) {
this.$emit("callback", val);
},
}
}
</script>

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

@ -226,7 +226,8 @@
</div>
</template>
<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 { modelData } from "./config";
import ways from "@/views/lili-dialog/wap.js"; // 选择链接的类型