模板预览

src/views/tempaltes/edit.vue

@@ -25,7 +25,7 @@
           v-if="loaded"
           v-if="loaded"
           :style="{
           :style="{
       }"
       }"
-          :src="templateData.frameUrl+'?isEdit=1&filmId='+templateData.filmId + '&now=' + Date.now()"
+          :src="templateData.frameUrl+'?isEdit=1&filmId='+templateData.filmId + '&now=' + date"
           frameborder="0"
           frameborder="0"
         ></iframe>
         ></iframe>
       </div>
       </div>
@@ -112,7 +112,8 @@ export default {
         }
         }
       ],
       ],
       deviceChecked: [],
       deviceChecked: [],
-      name: ''
+      name: '',
+      date: Date.now()
     };
     };
   },
   },
   created() {
   created() {
@@ -256,14 +257,17 @@ export default {
       this.message({
       this.message({
         type: 'getList'
         type: 'getList'
       })
       })
-      setTimeout(() => {
-        window.localStorage.setItem('preview', JSON.stringify(this.templateData))
-        let routeData = this.$router.resolve({
-          name: "preview",
-          params: this.$route.query
-        });
-        window.open(routeData.href, "_blank");
-      }, 1000)
+      window.localStorage.setItem('preview', JSON.stringify(this.templateData))
+      this.$router.push({name: "preview"})
+      // setTimeout(() => {
+        
+        
+      //   let routeData = this.$router.resolve({
+      //     name: "preview",
+      //     params: this.$route.query
+      //   });
+      //   window.open(routeData.href, "_blank");
+      // }, 1000)
     },
     },
     toggle(index) {
     toggle(index) {
       this.$refs.checkboxes[index].toggle();
       this.$refs.checkboxes[index].toggle();

src/views/tempaltes/preview.vue

 <template>
 <template>
   <div class="edit-container">
   <div class="edit-container">
+    <NavBar title="预览" left-arrow></NavBar>
     <div class="content">
     <div class="content">
       <div class="content-left">          
       <div class="content-left">          
         <iframe
         <iframe
@@ -14,7 +15,7 @@
 </template>
 </template>
 
 
 <script>
 <script>
-// import NavBar from "@/views/layout/navbar";
+import NavBar from "@/views/layout/navbar";
 export default {
 export default {
   data() {
   data() {
     return {
     return {
@@ -70,7 +71,7 @@ export default {
     }
     }
   },
   },
   components: {
   components: {
-    // NavBar
+    NavBar
   }
   }
 };
 };
 </script>
 </script>
@@ -78,149 +79,21 @@ export default {
 <style lang="scss" scoped>
 <style lang="scss" scoped>
 .edit-container {
 .edit-container {
   .content {
   .content {
+          overflow: hidden;
+
     display: flex;
     display: flex;
     justify-content: space-between;
     justify-content: space-between;
     .content-left {
     .content-left {
+      overflow: hidden;
       flex: 1;
       flex: 1;
       background: #eeeeee;
       background: #eeeeee;
-      height: calc(100vh);
+      height: calc(100vh - 46px);
       box-sizing: border-box;
       box-sizing: border-box;
       text-align: left;
       text-align: left;
-      .content-left-top {
-        display: flex;
-        font-size: 21px;
-        color: #333333;
-        justify-content: space-between;
-        .top-left {
-          display: flex;
-          .left-item {
-            display: flex;
-            align-items: center;
-            margin-right: 68px;
-            .van-icon {
-              margin-right: 5px;
-            }
-          }
-        }
-        .top-right {
-          line-height: 1;
-          .im {
-            color: #fe1515;
-            vertical-align: bottom;
-          }
-          input {
-            border-left: none;
-            border-top: none;
-            border-right: none;
-            padding-left: 5px;
-            border-bottom: 1px solid #dddddd;
-            outline: none;
-            width: 195px;
-            background: none;
-          }
-        }
-      }
+      
       .iframe {
       .iframe {
           width: 100% ;
           width: 100% ;
-          height: 100vh;  
-      }
-    }
-    .content-right {
-      width: 300px;
-      text-align: left;
-      padding: 17px 0 0 20px;
-      font-size: 20px;
-      background: #d0d0d0;
-      height: calc(100vh - 96px);
-      box-sizing: border-box;
-      overflow: auto;
-      .edit-area {
-        input {
-          margin-top: 17px;
-          display: block;
-          height: 39px;
-          padding-left: 8px;
-        }
-      }
-    }
-  }
-  .pub-container {
-    height: 401px;
-    background: rgba(255, 255, 255, 1);
-    box-shadow: 0px -9px 51px 0px rgba(0, 0, 0, 0.14);
-    padding-left: 75px;
-    box-sizing: border-box;
-    .top {
-      display: flex;
-      justify-content: space-between;
-      color: rgba(51, 51, 51, 0.8);
-      font-size: 24px;
-      display: flex;
-      align-items: center;
-      .left {
-        padding-top: 20px;
-        span {
-        }
-        .active {
-          color: #333333;
-          font-weight: bold;
-          font-size: 26px;
-        }
-        .diver {
-          padding: 0 40px;
-          vertical-align: text-top;
-        }
-        .tip {
-          font-size: 21px;
-          padding-left: 65px;
-        }
-      }
-      .right {
-        padding-right: 37px;
-        padding-top: 28px;
-        .btn {
-          font-size: 24px;
-          color: white;
-          padding: 14.5px 39px;
-          background: linear-gradient(
-            91deg,
-            rgba(110, 140, 249, 1) 0%,
-            rgba(94, 161, 251, 1) 100%
-          );
-          border-radius: 3px;
-        }
-      }
-    }
-    .list {
-      padding-top: 60px;
-      .bottom-item {
-        border: 2px solid #b5b5b5;
-        border-radius: 3px;
-        width: 210px;
-        height: 210px;
-        .van-checkbox {
-          justify-content: center;
-          padding-top: 10px;
-        }
-        .img {
-          padding-top: 15px;
-          padding-bottom: 15px;
-          img {
-            width:165px;
-            height:93px;
-          }
-        }
-        .name {
-          font-size: 20px; 
-          color: #333333;
-          font-weight: bold;
-          line-height: 1;
-        }
-        .id {
-          padding-top: 5px;
-          font-size: 15px;
-          color:rgba(51,51,51,0.8);
-        }
+          height: 100%;  
       }
       }
     }
     }
   }
   }