题卡预览不再暂存数据

card/components/CardDesign.vue

@@ -540,11 +540,11 @@ export default {
       });
     },
     async toPreview() {
-      if (this.isSubmit) return;
-      this.isSubmit = true;
-      const model = await this.getCardJson();
-      const datas = this.getCardData("", model);
-      this.$emit("on-preview", datas);
+      this.$emit("on-preview", {
+        cardConfig: this.cardConfig,
+        pages: this.pages,
+        paperParams: this.paperParams,
+      });
     },
     async toSave() {
       if (!this.checkCardValid()) return;

card/modules/free/components/CardFreeDesign.vue

@@ -359,12 +359,12 @@ export default {
     skPreview() {
       this.toPreview();
     },
-    async toPreview() {
-      if (this.isSubmit) return;
-      this.isSubmit = true;
-      const model = await this.getCardJson();
-      const datas = this.getCardData("", model);
-      this.$emit("on-preview", datas);
+    toPreview() {
+      this.$emit("on-preview", {
+        cardConfig: this.cardConfig,
+        pages: this.pages,
+        paperParams: this.paperParams,
+      });
     },
     async toSave() {
       if (this.isSubmit) return;

src/assets/styles/pages.scss

@@ -852,6 +852,27 @@
     }
   }
 }
+.card-view-dialog {
+  .el-dialog.is-fullscreen {
+    border: none;
+    .el-dialog__header {
+      border: none;
+      background-color: transparent;
+      z-index: 10;
+    }
+    .el-dialog__body {
+      border: none;
+      padding: 0;
+      position: absolute;
+      top: 0;
+      left: 0;
+      bottom: 0;
+      right: 0;
+      overflow: hidden;
+      background-color: #f0f0f0;
+    }
+  }
+}
 // modify-mark-params
 .modify-mark-params {
   .mark-body {

src/modules/card/views/CardEdit.vue

@@ -16,6 +16,23 @@
     <div class="design-preview-frame" v-if="cardPreviewUrl">
       <iframe :src="cardPreviewUrl" frameborder="0"></iframe>
     </div>
+    <!-- card-view-dialog -->
+    <el-dialog
+      class="card-view-dialog"
+      :visible.sync="dialogIsShow"
+      :close-on-click-modal="false"
+      :close-on-press-escape="false"
+      append-to-body
+      fullscreen
+      @closed="dialogClosed"
+    >
+      <iframe
+        v-if="dialogIsShow && cardDialogPreviewUrl"
+        :src="cardDialogPreviewUrl"
+        frameborder="0"
+        :style="dialogFrameStyle"
+      ></iframe>
+    </el-dialog>
   </div>
 </template>
 
@@ -49,6 +66,10 @@ export default {
       cardPreviewUrl: "",
       canSave: false,
       dataReady: false,
+      // card-view-dialog
+      dialogIsShow: false,
+      cardDialogPreviewUrl: "",
+      dialogFrameStyle: {},
     };
   },
   computed: {
@@ -78,8 +99,20 @@ export default {
     // }
     this.initCard();
     this.registWindowSubmit();
+    // card-view
+    this.initFrameStyle();
+    window.addEventListener("resize", this.initFrameStyle);
   },
   methods: {
+    initFrameStyle() {
+      this.dialogFrameStyle = {
+        width: window.innerWidth + "px",
+        height: window.innerHeight + "px",
+        overflow: "auto",
+        border: "none",
+        outline: "none",
+      };
+    },
     async initCard() {
       this.dataReady = false;
       if (this.isEdit) {
@@ -197,18 +230,28 @@ export default {
       if (this.cardId) cardInfo.id = this.cardId;
       return cardInfo;
     },
-    async toPreview(cardModel) {
-      const res = await this.toSave(cardModel);
-      if (!res) return;
-
+    // card preview dialog
+    dialogClosed() {
+      this.cardDialogPreviewUrl = "";
+    },
+    toPreview(cardData) {
+      window.cardData = {
+        ...cardData,
+        createMethod: this.cardCreateMethod,
+        type: this.cardType,
+      };
       const { href } = this.$router.resolve({
         name: "CardPreview",
         params: {
-          cardId: this.cardId,
-          viewType: "view",
+          cardId: 1,
+          viewType: "frame-view",
+        },
+        query: {
+          t: Date.now(),
         },
       });
-      window.open(href);
+      this.cardDialogPreviewUrl = href;
+      this.dialogIsShow = true;
     },
     // save
     async toSave(datas) {
@@ -332,6 +375,7 @@ export default {
   beforeDestroy() {
     this.$ls.remove("cardId");
     this.$ls.remove("prepareTcPCard");
+    window.removeEventListener("resize", this.initFrameStyle);
     delete window.submitCardTemp;
   },
 };

src/modules/card/views/CardPreview.vue

@@ -25,8 +25,9 @@ export default {
   components: { CardView, CardFreeView },
   data() {
     return {
-      isPrint: this.$route.params.viewType !== "view",
-      isFrame: this.$route.params.viewType === "frame",
+      viewType: this.$route.params.viewType,
+      isPrint: "",
+      isFrame: "",
       cardId: this.$route.params.cardId,
       cardCreateMethod: "STANDARD",
       cardType: "CUSTOM",
@@ -50,6 +51,9 @@ export default {
     },
   },
   mounted() {
+    this.isPrint = this.viewType === "frame";
+    this.isFrame = this.viewType === "frame" || this.viewType === "frame-view";
+
     if (this.isFrame) {
       this.initFrame();
     } else {
@@ -92,6 +96,7 @@ export default {
       this.cardConfig = cardConfig;
       this.pages = this.appendFieldInfo(pages, fieldInfos);
 
+      if (this.viewType !== "frame") return;
       this.$nextTick(() => {
         const cardContentTemp = this.$refs.CardView.getPreviewTemp(
           this.$el.outerHTML