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

商家端优化OSS资源管理

master
15386982806 2024-02-02 18:09:29 +08:00
parent 6c1c47de1d
commit 77ad146e24
13 changed files with 1424 additions and 32 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -102,7 +102,7 @@
<h4>商品规格及图片</h4>
<div class="form-item-view">
<FormItem class="form-item-view-el required" label="主图" prop="goodsGalleryFiles">
<div style="display: flex; flex-wrap: flex-start">
<div style="display: flex; flex-wrap: wrap;">
<vuedraggable :animation="200" :list="baseInfoForm.goodsGalleryFiles">
<div v-for="(item, __index) in baseInfoForm.goodsGalleryFiles" :key="__index"
class="demo-upload-list">
@ -110,27 +110,29 @@
<img :src="item"/>
<div class="demo-upload-list-cover">
<div>
<Icon size="30" type="md-search" @click.native="handleViewGoodsPicture(item.url)"></Icon>
<Icon size="30" type="md-search" @click.native="handleViewGoodsPicture(item)"></Icon>
<Icon size="30" type="md-trash" @click.native="handleRemoveGoodsPicture(item)"></Icon>
</div>
</div>
</template>
</div>
</vuedraggable>
<Upload ref="upload"
:action="uploadFileUrl" :before-upload="handleBeforeUploadGoodsPicture"
:format="['jpg', 'jpeg', 'png', 'webp']"
:headers="{ ...accessToken }"
:max-size="2048" :on-error="() => { $Spin.hide(); }" :on-exceeded-size="handleMaxSize"
:on-format-error="handleFormatError" :on-progress="() => { $Spin.show(); }"
:on-success="handleSuccessGoodsPicture" :show-upload-list="false" multiple
style="margin-left: 10px"
type="drag">
<div style="width: 148px; height: 148px; line-height: 148px">
<Icon size="20" type="md-add"></Icon>
</div>
</Upload>
<!--<Upload ref="upload"-->
<!--:action="uploadFileUrl" :before-upload="handleBeforeUploadGoodsPicture"-->
<!--:format="['jpg', 'jpeg', 'png', 'webp']"-->
<!--:headers="{ ...accessToken }"-->
<!--:max-size="2048" :on-error="() => { $Spin.hide(); }" :on-exceeded-size="handleMaxSize"-->
<!--:on-format-error="handleFormatError" :on-progress="() => { $Spin.show(); }"-->
<!--:on-success="handleSuccessGoodsPicture" :show-upload-list="false" multiple-->
<!--style="margin-left: 10px"-->
<!--type="drag">-->
<!--<div style="width: 148px; height: 148px; line-height: 148px">-->
<!--<Icon size="20" type="md-add"></Icon>-->
<!--</div>-->
<!--</Upload>-->
</div>
<div style="width: 100%;display: flex;justify-content: start;margin-top: 10px;">
<Button @click="handleCLickImg('goodsGalleryFiles')" type="primary">上传图片</Button>
</div>
<Modal v-model="goodsPictureVisible" title="View Image">
<img v-if="goodsPictureVisible" :src="previewGoodsPicture" style="width: 100%"/>
@ -474,7 +476,7 @@
<!--<ossManage @callback="callbackSelected" ref="ossManage" />-->
<!--</Modal>-->
<Modal v-model="picModalFlag" width="1200px" @on-ok="confirmUrls">
<ossManage ref="ossManage" @callback="callbackSelected" @selected="(list)=>{ selectedImage = list}"/>
<ossManage ref="ossManage" :isComponent="true" @callback="callbackSelected" @selected="(list)=>{ selectedImage = list}"/>
</Modal>
</div>
@ -490,7 +492,7 @@ 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";
import ossManage from "@/views/shop/ossManages";
export default {
@ -745,8 +747,9 @@ export default {
if (val && this.selectedFormBtnName == 'selectedSkuImages') {
this.selectedSku.images.push(val);
} else {
this.baseInfoForm[this.selectedFormBtnName].push(val);
this.baseInfoForm[this.selectedFormBtnName].push(val.url);
}
},
confirmUrls() {
if (this.selectedImage && this.selectedFormBtnName == 'selectedSkuImages') {

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

@ -57,7 +57,7 @@
</Modal>
<Modal width="1000" v-model="showOssManager" @on-ok="confirmUrls">
<OssManage ref="ossManage" @selected="(list)=>{ selectedImage = list}" @callback="handleCallback" />
<OssManage ref="ossManage" :isComponent="true" @selected="(list)=>{ selectedImage = list}" @callback="handleCallback" />
</Modal>
</div>
</template>

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

@ -57,7 +57,7 @@
</Modal>
<Modal width="1200px" v-model="picModalFlag" @on-ok="confirmUrls">
<ossManage @callback="callbackSelected" @selected="(list)=>{ selectedImage = list}" ref="ossManage" />
<ossManage @callback="callbackSelected" :isComponent="true" @selected="(list)=>{ selectedImage = list}" ref="ossManage" />
</Modal>
</div>
</template>
@ -65,7 +65,7 @@
<script>
import { uploadFile } from "@/libs/axios";
import vuedraggable from "vuedraggable";
import ossManage from "@/views/shop/ossManage";
import ossManage from "@/views/shop/ossManages";
export default {
name: "uploadPicThumb",
components: {

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

@ -100,7 +100,7 @@
import changeSize from "../directives/changeSize";
import dragItem from "../directives/dragItem";
// import ossManage from "@/views/sys/oss-manage/ossManage";
import ossManage from "@/views/shop/ossManage";
import ossManage from "@/views/shop/ossManages";
export default {
name: "Zone",

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

@ -231,7 +231,7 @@ 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/shop/ossManage";
import ossManage from "@/views/shop/ossManages";
export default {
name: "modelFormItem",

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

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

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

@ -85,14 +85,14 @@
></liliDialog>
<!-- 选择图片 -->
<Modal width="1200px" v-model="picModelFlag" footer-hide>
<ossManage @callback="callbackSelected" ref="ossManage" />
<ossManage @callback="callbackSelected" :isComponent="true" ref="ossManage" />
</Modal>
</div>
</template>
<script>
// import ossManage from "@/views/sys/oss-manage/ossManage";
import ossManage from "@/views/shop/ossManage";
import ossManage from "@/views/shop/ossManages";
export default {
name: "modelCarousel",
props: ["data"],

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

@ -175,7 +175,7 @@
></liliDialog>
<!-- 选择图片 -->
<Modal width="1200px" v-model="picModelFlag" footer-hide>
<ossManage @callback="callbackSelected" ref="ossManage" />
<ossManage @callback="callbackSelected" :isComponent="true" ref="ossManage" />
</Modal>
</div>
</template>

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

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

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

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

263
seller/src/views/shop/ossManage.scss Normal file
View File

@ -0,0 +1,263 @@
.search {
.oss-operation {
margin-bottom: 2vh;
display: flex;
align-items: center;
justify-content: space-between;
width: 100%;
button {
margin-right: 5px;
}
}
}
.none {
display: none;
}
.oss-wrapper {
display: flex;
flex-wrap: wrap;
position: relative;
}
.oss-card {
margin: 10px 20px 10px 0;
width: 290px;
:hover {
.content .other .name {
color: #1890ff;
transition: color .3s;
}
}
cursor: pointer;
.ivu-card-body {
padding: 0;
}
.content {
display: flex;
flex-direction: column;
:hover {
.play {
transition: opacity .3s;
opacity: 1 !important;
}
}
.img {
height: 135px;
object-fit: cover;
}
.video {
height: 135px;
position: relative;
.cover {
height: 100%;
width: 100%;
object-fit: fill;
}
.play {
position: absolute;
top: 43px;
left: 117px;
height: 50px;
width: 50px;
opacity: 0.8;
}
}
.other {
padding: 16px;
height: 135px;
.name {
font-size: 16px;
text-overflow: ellipsis;
overflow: hidden;
white-space: nowrap;
color: rgba(0, 0, 0, .85);
font-weight: 500;
margin-bottom: 4px;
}
.key {
overflow: hidden;
text-overflow: ellipsis;
height: 45px;
word-break: break-all;
color: rgba(0, 0, 0, .45);
}
.info {
font-size: 12px;
color: rgba(0, 0, 0, .45);
overflow: hidden;
text-overflow: ellipsis;
height: 36px;
word-break: break-all;
}
}
.actions {
display: flex;
align-items: center;
height: 50px;
background: #f7f9fa;
border-top: 1px solid #e8e8e8;
i:hover {
color: #1890ff;
}
.btn {
display: flex;
justify-content: center;
width: 33.33%;
border-right: 1px solid #e8e8e8;
}
.btn-no {
display: flex;
justify-content: center;
width: 33.33%;
}
}
}
}
.oss-manage-box {
.file-list {
height: 100%;
box-sizing: border-box;
border-right: 1px solid #e5e6eb;
padding: 16px 0 24px;
}
.pic-list {
height: 100%;
box-sizing: border-box;
padding: 0 0 24px 0;
}
.img-box {
width: 100%;
display: flex;
flex-wrap: wrap;
align-items: flex-start;
justify-content: flex-start;
align-content: flex-start;
margin-top: 20px;
.img-item {
width: 120px;
height: 158px;
box-sizing: border-box;
margin: 0 13px 8px;
position: relative;
.card {
width: 120px;
height: 120px;
border-radius: 8px;
border: 2px solid transparent;
overflow: hidden;
box-sizing: border-box;
position: relative;
img {
width: 100%;
height: 100%;
}
.checkbox {
position: absolute;
top: 10px;
right: 10px;
z-index: 1000;
}
.preview {
width: 100%;
height: 26px;
background-color: #ffffff;
text-align: center;
line-height: 30px;
color: #666666;
position: absolute;
left: 0;
bottom: 0;
display: flex;
flex-wrap: nowrap;
> div {
width: 100%;
flex: 1;
}
}
}
.card:hover,
.custom-checkbox-card-checked {
border: 2px solid #ff5c58;
}
.text {
width: 120px;
height: 36px;
cursor: pointer;
color: #252931;
font-size: 14px;
line-height: 36px;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
text-align: center;
-webkit-line-clamp: 1;
-webkit-box-orient: vertical;
}
}
}
.page-box {
display: flex;
justify-content: flex-end;
margin-top: 20px;
}
.pagination-box {
display: flex;
flex-direction: row-reverse;
}
/* Checkbox默认的样式 */
.check-box {
.ivu-checkbox {
position: absolute;
right: 10px;
top: 10px;
z-index: 100;
}
}
/* 覆盖iView默认的Checkbox样式 */
.ivu-checkbox-wrapper {
/*font-size: 16px; !* 修改字体大小 *!*/
/*color: #495060; !* 修改文本颜色 *!*/
/* 添加其他需要的样式 */
}
.ivu-checkbox-inner {
/*width: 20px; !* 修改选框大小 *!*/
/*height: 20px;*/
/*border-color: #dcdee2; !* 修改边框颜色 *!*/
/* 添加其他需要的样式 */
}
/* 当Checkbox被选中时的样式 */
.ivu-checkbox-checked .ivu-checkbox-inner {
/*background-color: #2db7f5; !* 修改选中时的背景颜色 *!*/
}
/* 当Checkbox不可用时的样式 */
.ivu-checkbox-disabled .ivu-checkbox-inner {
/*background-color: #e9e9e9; !* 修改禁用状态下的背景颜色 *!*/
}
.demo-tree-render .ivu-tree-title{
width: 94%;
}
}

1126
seller/src/views/shop/ossManages.vue Normal file
View File

File diff suppressed because it is too large Load Diff

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

@ -221,13 +221,13 @@
></liliDialog>
<hotzone ref="hotzone" @changeZone="changeZone"></hotzone>
<Modal width="1200px" v-model="picModelFlag">
<ossManage @callback="callbackSelected" ref="ossManage" />
<ossManage @callback="callbackSelected" :isComponent="true" ref="ossManage" />
</Modal>
</div>
</template>
<script>
// import ossManage from "@/views/sys/oss-manage/ossManage";
import ossManage from "@/views/shop/ossManage";
import ossManage from "@/views/shop/ossManages";
import hotzone from "@/views/shop/hotzone";
import { modelData } from "./config";
import ways from "@/views/lili-dialog/wap.js"; // 选择链接的类型