修改页面

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

@@ -7,14 +7,17 @@
     cursor: pointer;
     position: relative;
   }
+
   .pictureDialog .webSliderDiv .web_imgUrl {
     width: 100%;
     height: 100%;
   }
-  .pictureDialog .webSliderDiv .el-upload{
-      width:100%;
-      height:100%;
+
+  .pictureDialog .webSliderDiv .el-upload {
+    width: 100%;
+    height: 100%;
   }
+
   .pictureDialog .webSliderDiv .addIconDiv {
     position: absolute;
     width: 100%;
@@ -25,28 +28,34 @@
     align-items: center;
     justify-content: center;
   }
+
   .pictureDialog .webSliderDiv i {
     font-size: 50px;
     color: #d1d1d1;
     cursor: pointer;
   }
+
   .pictureDialog .webSliderDiv .addIconDiv:hover {
     background: rgba(0, 0, 0, 0.5);
     color: #fff;
   }
-  .pictureDialog .webSliderDiv >div{
-    height:100%;
+
+  .pictureDialog .webSliderDiv>div {
+    height: 100%;
   }
-  .pictureDialog .myWebDiv{
-    width:175px!important;
+
+  .pictureDialog .myWebDiv {
+    width: 175px !important;
     overflow: hidden;
   }
-  .pictureDialog .webImg_radius{
-    width:310px!important;
-    height:310px!important;
-    border-radius:50%;
+
+  .pictureDialog .webImg_radius {
+    width: 310px !important;
+    height: 310px !important;
+    border-radius: 50%;
     overflow: hidden;
   }
+
 </style>
 <template>
   <div class="pictureDialog">
@@ -57,7 +66,7 @@
       <el-form-item label="副標題">
         <el-input type="text" v-model="plugData.SubTitle"></el-input>
       </el-form-item>
-      <template v-if="plugData.Type==1||plugData.Type==2||plugData.Type==3||plugData.Type==4">
+      <template v-if="plugData.Type==1||plugData.Type==2||plugData.Type==3">
         <el-row v-for="(item,index) in plugData.Details" :key="index" style="margin-bottom:20px;">
           <el-col :span="10">
             <div class="webSliderDiv" @click="clickIndex=index">
@@ -78,7 +87,7 @@
           <el-col :span="14">
             <el-row>
               <el-col :span="24">
-                <el-form-item label="行程名稱 1">
+                <el-form-item :label="'行程名稱'+' '+(index+1)">
                   <el-input type="text" v-model="item.TripTitle"></el-input>
                 </el-form-item>
               </el-col>
@@ -142,18 +151,25 @@
         </el-row>
       </template>
       <template v-if="plugData.Type==4">
+        <el-row v-for="(item,index) in plugData.Details" :key="index" style="margin-bottom:20px;">
+          <el-col :span="10">
+            <div class="webSliderDiv">
+                <img v-if="item.ImageUrl" :src="item.ImageUrl" class="web_imgUrl" alt="" />
+            </div>
+            <div style="margin-top:5px;">圖片尺寸請上傳：800x530，檔案請小於3M</div>
+          </el-col>
+          <el-col :span="14">
             <el-row>
               <el-col :span="24">
                 <el-form-item>
-              <span>文字版位設定</span>
+                  <el-button type="primary" size="small" @click="isShowTripDailog=true,checkIndex=index">选择行程
+                  </el-button>
                 </el-form-item>
               </el-col>
             </el-row>
-        <el-row>
-          <el-col :span="12" v-for="(item,index) in plugData.Details" :key="index">
             <el-row>
               <el-col :span="24">
-                <el-form-item :label="'行程名稱'+(index+1)">
+                <el-form-item :label="'行程名稱'+' '+(index+1)">
                   <el-input type="text" v-model="item.TripTitle2"></el-input>
                 </el-form-item>
               </el-col>
@@ -208,16 +224,32 @@
         </el-row>
       </template>
     </el-form>
+
+    <el-dialog title="选择行程" :visible.sync="isShowTripDailog" width="1000px" append-to-body>
+      <!-- 行程选中 -->
+      <chooseTrip ref="chooseTrip" :IsMultiple="false"></chooseTrip>
+      <span slot="footer" class="dialog-footer">
+        <el-button @click="isShowTripDailog = false" size="small">取 消</el-button>
+        <el-button type="danger" size="small" @click="getChooseTripData()">确 定</el-button>
+      </span>
+    </el-dialog>
+
   </div>
 </template>
 <script>
+  import chooseTrip from "../plug-in/choose_trip.vue"
   export default {
     props: ["plugData"],
     data() {
       return {
-        clickIndex:1
+        clickIndex: 1,
+        checkIndex: 0,
+        isShowTripDailog: false
       };
     },
+    components: {
+      chooseTrip
+    },
     created() {},
     methods: {
       UploadImage(file) {
@@ -230,10 +262,38 @@
           var imgUrl = this.domainManager().ViittoFileUrl + str;
           this.plugData.Details[this.clickIndex].ImageUrl = imgUrl;
         });
+      },
+
+      //获取选择行程数据
+      getChooseTripData() {
+        var tempArray = this.$refs.chooseTrip.getChooseData();
+        this.isShowTripDailog = false;
+        if (tempArray && tempArray.length > 0) {
+          tempArray.forEach(item => {
+            var imgUrl = ""
+            if (item.ImgCover && item.ImgCover.length > 0) {
+              imgUrl = item.ImgCover[0].Url;
+            }
+            var obj = {
+              StartDate: item.StartDate,
+              imgUrl: imgUrl,
+              TCNUM: item.TCNUM,
+              TCID: item.TCID,
+              Title: item.Title,
+              DayNum: item.DayNum,
+              Price: item.B2BPrice,
+            };
+            this.plugData.Details[this.checkIndex].ImageUrl = obj.imgUrl;
+            this.plugData.Details[this.checkIndex].Price2 = obj.Price;
+            this.plugData.Details[this.checkIndex].TripTitle2 = obj.Title;
+
+            this.$refs.chooseTrip.clearData();
+          });
         }
       },
-    mounted() {
+
     },
+    mounted() {},
   };
 
 </script>