商家端优化OSS资源管理

seller/src/views/goods/goods-seller/goodsOperationSec.vue

@@ -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"-->
-                <Upload ref="upload"
+                        <!--:action="uploadFileUrl" :before-upload="handleBeforeUploadGoodsPicture"-->
-                        :action="uploadFileUrl" :before-upload="handleBeforeUploadGoodsPicture"
+                        <!--:format="['jpg', 'jpeg', 'png', 'webp']"-->
-                        :format="['jpg', 'jpeg', 'png', 'webp']"
+                        <!--:headers="{ ...accessToken }"-->
-                        :headers="{ ...accessToken }"
+                        <!--:max-size="2048" :on-error="() => { $Spin.hide(); }" :on-exceeded-size="handleMaxSize"-->
-                        :max-size="2048" :on-error="() => { $Spin.hide(); }" :on-exceeded-size="handleMaxSize"
+                        <!--:on-format-error="handleFormatError" :on-progress="() => { $Spin.show(); }"-->
-                        :on-format-error="handleFormatError" :on-progress="() => { $Spin.show(); }"
+                        <!--:on-success="handleSuccessGoodsPicture" :show-upload-list="false" multiple-->
-                        :on-success="handleSuccessGoodsPicture" :show-upload-list="false" multiple
+                        <!--style="margin-left: 10px"-->
-                        style="margin-left: 10px"
+                        <!--type="drag">-->
-                        type="drag">
+                  <!--<div style="width: 148px; height: 148px; line-height: 148px">-->
-                  <div style="width: 148px; height: 148px; line-height: 148px">
+                    <!--<Icon size="20" type="md-add"></Icon>-->
-                    <Icon size="20" type="md-add"></Icon>
+                  <!--</div>-->
+                <!--</Upload>-->
               </div>
-                </Upload>
+              <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') {

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

@@ -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>

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

@@ -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: {

seller/src/views/shop/hotzone/components/Zone.vue

@@ -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",

seller/src/views/shop/modelFormItem.vue

@@ -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",

seller/src/views/shop/modelList/carousel.vue

@@ -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"],

seller/src/views/shop/modelList/carousel1.vue

@@ -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"],

seller/src/views/shop/modelList/carousel2.vue

@@ -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>

seller/src/views/shop/modelList/newGoodsSort.vue

@@ -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:{

seller/src/views/shop/modelList/recommend.vue

@@ -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: {

seller/src/views/shop/ossManage.scss

@@ -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%;
+  }
+}
+

seller/src/views/shop/wap/decorate.vue

@@ -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"; // 选择链接的类型