增加

src/components/WebSet/WebSiteEdit.vue

@@ -206,6 +206,10 @@
       <plugvideodialog v-if="currentEditItem.Id=='white_label_video'" :plugData="currentEditItemData"></plugvideodialog>
       <!--轮播图-->
       <sliderdialog v-if="currentEditItem.Id=='white_label_slider'" :plugData="currentEditItemData"></sliderdialog>
+      <!-- 图片 -->
+      <picturedialog v-if="currentEditItem.Id=='white_label_picture'" :plugData="currentEditItemData"></picturedialog>
+      <!-- 二维码 -->
+      <qrcodedialog v-if="currentEditItem.Id=='white_label_qrcode'" :plugData="currentEditItemData"></qrcodedialog>
       <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>
@@ -216,6 +220,8 @@
 <script>
   import plugvideodialog from "../WebSet/plug-in/video_dialog.vue"
   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"
   export default {
     data() {
       return {
@@ -238,6 +244,8 @@
     components: {
       plugvideodialog,
       sliderdialog,
+      picturedialog,
+      qrcodedialog
     },
     methods: {
       //显示弹窗

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

+<style>
+.tour-cover .img {
+    display: block;
+    width: 100%;
+    padding-bottom: 60%;
+    -webkit-background-size: cover;
+    -moz-background-size: cover;
+    -o-background-size: cover;
+    background-size: cover;
+}
+.help-block{
+    display: block;
+    margin-top: 5px;
+    margin-bottom: 10px;
+    color: #737373;
+    font-size:14px;
+}
+</style>
+<template>
+  <div>
+    <el-form label-width="130px">
+      <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>
+      <el-row v-for="(item,index) in plugData.Details" :key="index">
+          <el-col :span="12">
+                            <!-- <div class="webSliderDiv" @click="clickIndex=index">
+                  <el-upload :http-request="UploadImage" :multiple="true"
+                    accept="image/jpeg,image/gif,image/png,image/bmp" :show-file-list="false" action="">
+                    <img v-if="item.LinkImg" :src="item.LinkImg" 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="item.LinkImg=''"></i>
+                    </div>
+                  </el-upload>
+                </div>
+                <div v-if="plugData.Type==1">圖片尺寸請上傳：1440x470，檔案請小於3M。前台顯示固定高度470px</div> -->
+            <div class="webLogoDiv" style="width:100%;height:100px;">
+                <el-upload :http-request="UploadImage" :multiple="true"
+                accept="image/jpeg,image/gif,image/png,image/bmp" :show-file-list="false" action="">
+                <img v-if="item.LinkUrl" :src="item.LinkUrl" class="web_imgUrl" alt="" />
+                <div class="addIconDiv">
+                    <i class="web_addImg iconfont icon-img_haha" style="left:25%;top:33%"></i>
+                </div>
+                </el-upload>
+            </div>
+            <div class="help-block">圖片尺寸請上傳：800x530，檔案請小於3M</div>
+          </el-col>
+          <el-col :span="12">
+              <el-row>
+                  <el-col :span="24">
+                    <el-upload :http-request="UploadImage" :multiple="true" accept="image/jpeg,image/gif,image/png,image/bmp"
+                    :show-file-list="false" action="">
+                        <el-button type="primary" size="small">上傳</el-button>
+                    </el-upload>
+                    <el-button type="danger" size="small">清除</el-button>
+                  </el-col>
+              </el-row>
+              <el-row>
+                <el-col :span="24">
+                    <el-form-item label="行程名稱 1">
+                        <el-input type="text"></el-input>
+                    </el-form-item>
+                </el-col>
+              </el-row>
+              <el-row>
+                <el-col :span="12">
+                    <el-form-item label="價格">
+                        <el-input type="text"></el-input>
+                    </el-form-item>
+                </el-col>
+                <el-col :span="12">
+                    <el-form-item label="天數">
+                        <el-input type="text"></el-input>
+                    </el-form-item>
+                </el-col>
+              </el-row>
+              <el-row>
+                <el-col :span="24">
+                    <el-form-item label="連結網址">
+                        <el-input type="text"></el-input>
+                    </el-form-item>
+                </el-col>
+              </el-row>
+          </el-col>
+      </el-row>
+    </el-form>
+  </div>
+</template>
+<script>
+  export default {
+    props: ["plugData"],
+    data() {
+      return {
+
+      };
+    },
+    created() {},
+    methods: {
+        UploadImage(){
+
+        }
+    },
+    mounted() {
+      console.log(this.plugData,'plugindata');
+    },
+  };
+
+</script>

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

+<style>
+  .webSite_qrcode .webSliderDiv {
+    width: 250px;
+    line-height: 0;
+    height: 250px;
+    border: 1px solid #ccc;
+    cursor: pointer;
+    position: relative;
+  }
+  .webSite_qrcode .webSliderDiv .web_imgUrl {
+    width: 100%;
+    height: 100%;
+  }
+  .webSite_qrcode .webSliderDiv .el-upload{
+      width:100%;
+      height:100%;
+  }
+  .webSite_qrcode .webSliderDiv .addIconDiv {
+    position: absolute;
+    width: 100%;
+    height: 100%;
+    top: 0;
+    background-color: transparent;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+  }
+  .webSite_qrcode .webSliderDiv i {
+    font-size: 50px;
+    color: #d1d1d1;
+    cursor: pointer;
+  }
+  .webSliderDiv .addIconDiv:hover {
+    background: rgba(0, 0, 0, 0.5);
+    color: #fff;
+  }
+
+</style>
+<template>
+  <div class="webSite_qrcode">
+    <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-input type="text" v-model="plugData.Describe"></el-input>
+      </el-form-item>
+      <el-row>
+          <el-col :span="6">
+            <div class="webSliderDiv" @click="clickIndex=1">
+                <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.LinkImg1" :src="plugData.LinkImg1" 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.LinkImg1=''"></i>
+                </div>
+                </el-upload>
+            </div>
+          </el-col>
+          <el-col :span="18">
+              <el-row>
+                <el-col :span="24">
+                    <el-form-item>
+                        <span style="font-size:14px;color:#737373">圖片尺寸請上傳：360x360，檔案請小於3M</span>
+                    </el-form-item>
+                </el-col>
+              </el-row>
+              <el-row>
+                <el-col :span="24">
+                    <el-form-item label="行程名称">
+                        <el-input type="text" v-model="plugData.TripTitle1"></el-input>
+                    </el-form-item>
+                </el-col>
+              </el-row>
+              <el-row>
+                <el-col :span="24">
+                    <el-form-item label="連結網址">
+                        <el-input type="text" v-model="plugData.LinkUrl1"></el-input>
+                    </el-form-item>
+                </el-col>
+              </el-row>
+          </el-col>
+      </el-row>
+      <el-row style="margin-top:20px;">
+          <el-col :span="6">
+            <div class="webSliderDiv" @click="clickIndex=2">
+                <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.LinkImg2" :src="plugData.LinkImg2" 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.LinkImg2=''"></i>
+                </div>
+                </el-upload>
+            </div>
+          </el-col>
+          <el-col :span="18">
+              <el-row>
+                <el-col :span="24">
+                    <el-form-item>
+                        <span style="font-size:14px;color:#737373">圖片尺寸請上傳：360x360，檔案請小於3M</span>
+                    </el-form-item>
+                </el-col>
+              </el-row>
+              <el-row>
+                <el-col :span="24">
+                    <el-form-item label="行程名称">
+                        <el-input type="text" v-model="plugData.TripTitle2"></el-input>
+                    </el-form-item>
+                </el-col>
+              </el-row>
+              <el-row>
+                <el-col :span="24">
+                    <el-form-item label="連結網址">
+                        <el-input type="text" v-model="plugData.LinkUrl2"></el-input>
+                    </el-form-item>
+                </el-col>
+              </el-row>
+          </el-col>
+      </el-row>
+    </el-form>
+  </div>
+</template>
+<script>
+  export default {
+    props: ["plugData"],
+    data() {
+      return {
+          clickIndex: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;
+          if(this.clickIndex==1){
+            this.plugData.LinkImg1 = imgUrl;
+          }else{
+            this.plugData.LinkImg2 = imgUrl;
+          }
+        });
+      }
+    },
+    mounted() {
+    },
+  };
+
+</script>