增加组件

src/components/WebSet/WebSiteEdit.vue

@@ -236,7 +236,10 @@
       <bannerdialog v-if="currentEditItem.Id=='search_b'" :plugData="currentEditItemData"></bannerdialog>
       <!-- 搜寻区块 轮播淡出 -->
       <searchfdialog v-if="currentEditItem.Id=='search_sf'" :plugData="currentEditItemData"></searchfdialog>
-
+      <!-- 搜寻区块 轮播横 -->
+      <searchsdialog v-if="currentEditItem.Id=='search_s'" :plugData="currentEditItemData"></searchsdialog>
+      <!-- 搜寻区块 其他 -->
+      <searcheldialog v-if="currentEditItem.Id=='search_el'" :plugData="currentEditItemData"></searcheldialog>
       <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>
@@ -259,7 +262,8 @@
   import groupdialog from "../WebSet/plug-in/group_dialog.vue"
   import bannerdialog from "../WebSet/plug-in/banner_dialog.vue"
   import searchfdialog from "../WebSet/plug-in/searchf_dialog.vue"
-
+  import searchsdialog from "../WebSet/plug-in/searchs_dialog.vue"
+  import searcheldialog from "../WebSet/plug-in/searchel_dialog"
   export default {
     props: ["templateData"],
     data() {
@@ -296,6 +300,8 @@
       linkpicturedialog,
       bannerdialog,
       searchfdialog,
+      searchsdialog,
+      searcheldialog
     },
     methods: {
       //显示弹窗

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

+<template>
+  <div class="searcheldialog">
+    <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-form>
+  </div>
+</template>
+<script>
+  export default {
+    props: ["plugData"],
+    data() {
+      return {
+      };
+    },
+    created() {},
+    methods: {
+    },
+    mounted() {
+      
+    },
+  };
+
+</script>

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

+<style>
+  .searchsdialog .webSliderDiv {
+    line-height: 0;
+    height: 115px;
+    width:400px;
+    border: 1px solid #ccc;
+    cursor: pointer;
+    position: relative;
+  }
+  .searchsdialog .webSliderDiv .el-upload {
+    width: 100%;
+    height: 100%;
+  }
+
+  .searchsdialog .webSliderDiv .addIconDiv {
+    position: absolute;
+    width: 100%;
+    height: 100%;
+    top: 0;
+    background-color: transparent;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+  }
+
+  .searchsdialog .webSliderDiv i {
+    font-size: 50px;
+    color: #d1d1d1;
+    cursor: pointer;
+  }
+
+  .searchsdialog .webSliderDiv .addIconDiv:hover {
+    background: rgba(0, 0, 0, 0.5);
+    color: #fff;
+  }
+
+  .searchsdialog .webSliderDiv>div {
+    height: 100%;
+  }
+.searchsdialog .sectionImg{
+    position:absolute;
+    width:100%;
+    height:100%;
+    background-position: center;
+    background-size: cover;
+  }
+
+</style>
+<template>
+  <div class="searchsdialog">
+    <el-form label-width="80px">
+      <el-form-item label="標題">
+        <el-input type="text" v-model="plugData.Title"></el-input>
+      </el-form-item>
+      <template>
+          <el-row v-for="(item,index) in plugData.Details" :key="index">
+            <el-col :span="12">
+                <el-form-item>
+                    <div class="webSliderDiv" @click="checkIndex=index">
+                    <el-upload :http-request="UploadImage" :multiple="true" accept="image/jpeg,image/gif,image/png,image/bmp"
+                        :show-file-list="false" action="">
+                        <div class="sectionImg" :style="{backgroundImage:'url(' + item.ImageUrl + ')'}"></div>
+                        <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="item.ImageUrl=''"></i>
+                        </div>
+                    </el-upload>
+                    </div>
+                    <div v-if="plugData.Type==1">圖片尺寸請上傳：1140x470，前台顯示固定高度470px</div>
+                    <div v-if="plugData.Type==2">圖片尺寸請上傳：1140x313，前台顯示固定高度313px</div>
+                    <div v-if="plugData.Type==3">圖片尺寸請上傳：1140x235，前台顯示固定高度235px</div>
+                </el-form-item>
+            </el-col>
+            <el-col :span="12">
+                <el-form-item label="連結">
+                    <el-input type="text" v-model="plugData.LinkUrl"></el-input>
+                </el-form-item>
+            </el-col>
+        </el-row>
+      </template>
+    </el-form>
+  </div>
+</template>
+<script>
+  export default {
+    props: ["plugData"],
+    data() {
+      return {
+        checkIndex: 1,
+      };
+    },
+    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.Details[this.checkIndex].ImageUrl=imgUrl;
+        });
+      }
+
+    },
+    mounted() {
+      console.log(this.plugData, 'plugData');
+    },
+  };
+
+</script>