增加

src/components/WebSet/WebSiteEdit.vue

@@ -214,6 +214,9 @@
       <!-- 背景图 -->
       <backgrounddialog v-if="currentEditItem.Id=='white_label_background_article'" :plugData="currentEditItemData">
       </backgrounddialog>
+      <!-- 出团表 -->
+      <groupdialog v-if="currentEditItem.Id=='group'" :plugData="currentEditItemData"></groupdialog>
+
       <!-- 段落标题   -->
       <sectiondialog v-if="currentEditItem.Id=='white_label_paragraph_title'" :plugData="currentEditItemData">
       </sectiondialog>
@@ -229,6 +232,10 @@
       <b2blinkdialog v-if="currentEditItem.Id=='b2b_LinkP'" :plugData="currentEditItemData"></b2blinkdialog>
       <!-- 挑选自有行程 图片链接 -->
       <linkpicturedialog v-if="currentEditItem.Id=='b2b_LinkPicture'" :plugData="currentEditItemData"></linkpicturedialog>
+      <!-- 搜寻区块 banner -->
+      <bannerdialog v-if="currentEditItem.Id=='search_b'" :plugData="currentEditItemData"></bannerdialog>
+      <!-- 搜寻区块 轮播淡出 -->
+      <searchfdialog v-if="currentEditItem.Id=='search_sf'" :plugData="currentEditItemData"></searchfdialog>
 
       <span slot="footer" class="dialog-footer">
         <el-button @click="isShowDialog = false" size="small">取 消</el-button>
@@ -249,6 +256,10 @@
   import b2bdialog from "../WebSet/plug-in/b2b_dialog.vue"
   import b2blinkdialog from "../WebSet/plug-in/b2blink_dialog.vue"
   import linkpicturedialog from "../WebSet/plug-in/linkpicture_dialog.vue"
+  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"
+
   export default {
     props: ["templateData"],
     data() {
@@ -276,12 +287,15 @@
       picturedialog,
       qrcodedialog,
       backgrounddialog,
+      groupdialog,
       sectiondialog,
       paragraphLinkdialog,
       imglinkdialog,
       b2bdialog,
       b2blinkdialog,
-      linkpicturedialog
+      linkpicturedialog,
+      bannerdialog,
+      searchfdialog,
     },
     methods: {
       //显示弹窗

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

+<style>
+  .bannerdialog .webSliderDiv {
+    line-height: 0;
+    height: 115px;
+    width:400px;
+    border: 1px solid #ccc;
+    cursor: pointer;
+    position: relative;
+  }
+
+  .bannerdialog .webSliderDiv .web_imgUrl {
+    width: 100%;
+    height: 100%;
+  }
+
+  .bannerdialog .webSliderDiv .el-upload {
+    width: 100%;
+    height: 100%;
+  }
+
+  .bannerdialog .webSliderDiv .addIconDiv {
+    position: absolute;
+    width: 100%;
+    height: 100%;
+    top: 0;
+    background-color: transparent;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+  }
+
+  .bannerdialog .webSliderDiv i {
+    font-size: 50px;
+    color: #d1d1d1;
+    cursor: pointer;
+  }
+
+  .bannerdialog .webSliderDiv .addIconDiv:hover {
+    background: rgba(0, 0, 0, 0.5);
+    color: #fff;
+  }
+
+  .bannerdialog .webSliderDiv>div {
+    height: 100%;
+  }
+.bannerdialog .sectionImg{
+    position:absolute;
+    width:100%;
+    height:100%;
+    background-position: center;
+    background-size: cover;
+  }
+
+</style>
+<template>
+  <div class="bannerdialog">
+    <el-form label-width="80px">
+      <el-form-item label="標題">
+        <el-input type="text" v-model="plugData.Title"></el-input>
+      </el-form-item>
+      <el-form-item label="副標題">
+        <el-input type="text" v-model="plugData.SubTitle"></el-input>
+      </el-form-item>
+      <template v-if="plugData.Type==1">
+        <el-row>
+            <el-col :span="12" v-for="(item,index) in plugData.Details" :key="index">
+            <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>圖片尺寸請上傳：1140x550，前台顯示固定高度550px</div>
+            </el-form-item>
+            </el-col>
+            <el-col :span="12">
+            </el-col>
+        </el-row>
+      </template>
+      <template v-if="plugData.Type==2||plugData.Type==3||plugData.Type==4">
+          <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==2">圖片尺寸請上傳：1440x504，檔案請小於3M</div>
+                    <div v-if="plugData.Type==3">圖片尺寸請上傳：1440x432，檔案請小於3M</div>
+                    <div v-if="plugData.Type==4">圖片尺寸請上傳：1440x432，檔案請小於3M</div>
+                </el-form-item>
+            </el-col>
+            <el-col :span="12">
+                <el-form-item :label="'標題'+' '+(index+1)">
+                    <el-input type="text" v-model="plugData.LinkTitle"></el-input>
+                </el-form-item>
+                <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>

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

+<template>
+  <div class="groupdialog">
+    <el-form label-width="120px">
+      <el-form-item label="標題">
+        <el-input type="text" v-model="plugData.Title"></el-input>
+      </el-form-item>
+      <el-form-item label="行程名稱">
+        <el-select v-model="plugData.QLineId" style="width:100%">
+          <el-option label="不限" :value="0"></el-option>
+          <el-option label="B2B前台菜单" :value="-1">B2B前台菜单</el-option>
+          <el-option label="个人中心菜单" :value="-2">个人中心菜单</el-option>
+        </el-select>
+      </el-form-item>
+      <el-row>
+        <el-col :span="24">
+          <el-table :data="plugData.GroupSelfItems" style="width: 100%">
+            <el-table-column label="出發日" width="180">
+            </el-table-column>
+            <el-table-column label="團號" width="180">
+            </el-table-column>
+            <el-table-column prop="" label="團名">
+            </el-table-column>
+            <el-table-column prop="" label="天數">
+            </el-table-column>
+            <el-table-column prop="" label="價格">
+            </el-table-column>
+            <el-table-column prop="" label="團位狀況">
+            </el-table-column>
+          </el-table>
+        </el-col>
+      </el-row>
+    </el-form>
+  </div>
+</template>
+<script>
+  export default {
+    props: ["plugData"],
+    data() {
+      return {};
+    },
+    created() {},
+    methods: {},
+    mounted() {
+      
+    },
+  };
+
+</script>

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

+<style>
+  .searchfdialog .webSliderDiv {
+    line-height: 0;
+    height: 115px;
+    width: 400px;
+    border: 1px solid #ccc;
+    cursor: pointer;
+    position: relative;
+  }
+
+  .searchfdialog .webSliderDiv .el-upload {
+    width: 100%;
+    height: 100%;
+  }
+
+  .searchfdialog .webSliderDiv .addIconDiv {
+    position: absolute;
+    width: 100%;
+    height: 100%;
+    top: 0;
+    background-color: transparent;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+  }
+
+  .searchfdialog .webSliderDiv i {
+    font-size: 50px;
+    color: #d1d1d1;
+    cursor: pointer;
+  }
+
+  .searchfdialog .webSliderDiv .addIconDiv:hover {
+    background: rgba(0, 0, 0, 0.5);
+    color: #fff;
+  }
+
+  .searchfdialog .webSliderDiv>div {
+    height: 100%;
+  }
+
+  .searchfdialog .sectionImg {
+    position: absolute;
+    width: 100%;
+    height: 100%;
+    background-position: center;
+    background-size: cover;
+  }
+
+</style>
+<template>
+  <div class="searchfdialog">
+    <el-form label-width="80px">
+      <el-form-item label="標題">
+        <el-input type="text" v-model="plugData.Title"></el-input>
+      </el-form-item>
+      <el-form-item label="副標題">
+        <el-input type="text" v-model="plugData.SubTitle"></el-input>
+      </el-form-item>
+      <template>
+        <el-row>
+          <el-col :span="12" v-for="(item,index) in plugData.Details" :key="index">
+            <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>圖片尺寸請上傳：1140x275，前台顯示固定高度275px</div>
+            </el-form-item>
+          </el-col>
+          <el-col :span="12">
+          </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>