增加

src/components/WebSet/WebSiteEdit.vue

@@ -210,6 +210,9 @@
       <picturedialog v-if="currentEditItem.Id=='white_label_picture'" :plugData="currentEditItemData"></picturedialog>
       <!-- 二维码 -->
       <qrcodedialog v-if="currentEditItem.Id=='white_label_qrcode'" :plugData="currentEditItemData"></qrcodedialog>
+      <!-- 背景图 -->
+      <backgrounddialog v-if="currentEditItem.Id=='white_label_background_article'" :plugData="currentEditItemData"></backgrounddialog>
+      
       <span slot="footer" class="dialog-footer">
         <el-button @click="isShowDialog = false" size="small">取 消</el-button>
         <el-button type="danger" size="small" @click="setSubPlugData()">确 定</el-button>
@@ -222,6 +225,7 @@
   import sliderdialog from "../WebSet/plug-in/slider_dialog.vue"
   import picturedialog from "../WebSet/plug-in/picture_dialog.vue"
   import qrcodedialog from "../WebSet/plug-in/qrcode_dialog.vue"
+  import backgrounddialog from "../WebSet/plug-in/background_dialog.vue"
   export default {
     data() {
       return {
@@ -245,7 +249,8 @@
       plugvideodialog,
       sliderdialog,
       picturedialog,
-      qrcodedialog
+      qrcodedialog,
+      backgrounddialog
     },
     methods: {
       //显示弹窗

src/components/WebSet/plug-in/background_dialog.vue

+<style>
+  .Webset_background .webSliderDiv {
+    line-height: 0;
+    height: 536px;
+    border: 1px solid #ccc;
+    cursor: pointer;
+    position: relative;
+  }
+
+  .Webset_background .webSliderDiv .web_imgUrl {
+    width: 100%;
+    height: 100%;
+  }
+
+  .Webset_background .webSliderDiv .el-upload {
+    width: 100%;
+    height: 100%;
+  }
+
+  .Webset_background .webSliderDiv .addIconDiv {
+    position: absolute;
+    width: 100%;
+    height: 100%;
+    top: 0;
+    background-color: transparent;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+  }
+
+  .Webset_background .webSliderDiv i {
+    font-size: 50px;
+    color: #d1d1d1;
+    cursor: pointer;
+  }
+
+  .Webset_background .webSliderDiv .addIconDiv:hover {
+    background: rgba(0, 0, 0, 0.5);
+    color: #fff;
+  }
+
+  .Webset_background .webSliderDiv>div {
+    height: 100%;
+  }
+
+</style>
+<template>
+  <div class="Webset_background">
+    <el-form label-width="80px">
+      <el-row>
+        <el-col :span="24">
+          <el-form-item label="標題">
+            <el-input type="text" v-model="plugData.Title"></el-input>
+          </el-form-item>
+        </el-col>
+      </el-row>
+      <el-row>
+        <el-col :span="24">
+          <el-form-item label="描述">
+            <el-input type="textarea" v-model="plugData.Describe" :rows="4"></el-input>
+          </el-form-item>
+        </el-col>
+      </el-row>
+      <el-row>
+        <el-col :span="24">
+          <el-form-item>
+            <div class="webSliderDiv">
+              <el-upload :http-request="UploadImage" :multiple="true" accept="image/jpeg,image/gif,image/png,image/bmp"
+                :show-file-list="false" action="">
+                <img v-if="plugData.ImageUrl" :src="plugData.ImageUrl" class="web_imgUrl" alt="" />
+                <div class="addIconDiv">
+                  <i class="web_addImg iconfont icon-img_haha"></i>
+                  <i class="web_delImg iconfont icon-img_delete_small" style="margin-left:10px;"
+                    @click.stop="plugData.ImageUrl=''"></i>
+                </div>
+              </el-upload>
+            </div>
+            <div>圖片尺寸請上傳：1440x900(前台顯示高度隨內容調整)，檔案請小於3M</div>
+          </el-form-item>
+        </el-col>
+      </el-row>
+    </el-form>
+  </div>
+</template>
+<script>
+  export default {
+    props: ["plugData"],
+    data() {
+      return {
+
+      };
+    },
+    created() {},
+    methods: {
+      UploadImage(file) {
+        let newArr = [];
+        newArr.push(file.file);
+        let fileName = file.file.name;
+        var path = "/Upload/WebSite/";
+        this.UploadSelfFileT(path, newArr, x => {
+          var str = x.data.FilePath;
+          var imgUrl = this.domainManager().ViittoFileUrl + str;
+          this.plugData.ImageUrl = imgUrl;
+        });
+      }
+    },
+    mounted() {
+      console.log(this.plugData, 'plugin');
+    },
+  };
+
+</script>