index.vue

<template>
  <div class="preview-container">
    <el-tabs v-if="formConfig.formKey" type="card">
      <el-tab-pane>
        <span slot="label"
          ><i class="el-icon-mobile" />
          手机
        </span>
        <div class="preview-layer">
          <div class="preview-bg" />
          <div class="preview-phone">
            <iframe
              id="preview-html"
              :src="mobilePreviewUrl"
              class="preview-html"
              frameborder="0"
              name="preview-html"
              scrolling="auto"
            />
          </div>
        </div>
        <div v-if="mobilePreviewUrl && previewQrcode" class="qrcode-view">
          <p style="font-weight: bold; font-size: 16px">手机扫码预览</p>
          <p class="tips-text">* 预览仅查看效果，无法提交数据</p>
          <p>
            <vue-qr
              v-if="mobilePreviewUrl && previewQrcode"
              :size="134"
              style="border-radius: 10px"
              :text="mobilePreviewUrl"
            />
          </p>
        </div>
      </el-tab-pane>
      <el-tab-pane>
        <span slot="label"
          ><i class="el-icon-monitor" />
          电脑
        </span>
        <el-scrollbar style="height: 77vh; overflow-x: hidden !important">
          <biz-project-form v-if="formConfig.formKey" :form-config="formConfig" />
        </el-scrollbar>
      </el-tab-pane>
    </el-tabs>
  </div>
</template>

<script>
import { BizProjectForm } from 'tduck-form-generator'
import 'tduck-form-generator/dist/TduckForm.css'
import VueQr from 'vue-qr'
import mixin from '../TduckFormMixin'

export default {
  name: 'PreView',
  components: {
    BizProjectForm,
    VueQr
  },
  mixins: [mixin],
  props: {
    previewQrcode: null
  },
  data() {
    return {
      formKey: null,
      mobilePreviewUrl: '',
      formConfig: {
        formKey: '',
        showBtns: true
      }
    }
  },
  mounted() {
    this.formKey = this.$route.query.key
    let url = window.location.protocol + '//' + window.location.host
    // 支持二级目录访问
    let publicPath = process.env.BASE_URL || '/'
    let modeSign = this.$router.mode == 'hash' ? '#' : ''
    this.mobilePreviewUrl = `${url}${publicPath}${modeSign}/project/form/view?key=${this.formKey}`
    this.$set(this.formConfig, 'formKey', this.formKey)
  }
}
</script>

<style lang="scss" scoped>
.tips-text {
  margin-top: 10px;
  margin-bottom: 10px;
}
.preview-container {
  margin: 0;
  padding-top: 30px;
  height: 100vh;
  overflow: hidden !important;
  background-color: var(--color-bg);
}

::v-deep .el-tabs--card > .el-tabs__header .el-tabs__nav {
  border: 1px solid #e4e7ed !important;
  border-radius: 10px;
  background-color: white;
}

::v-deep .el-tabs__header {
  width: 300px;
  margin: 0 auto;
  border: none;
}

::v-deep .el-dialog__body {
  max-height: calc(100vh - 200px) !important;
}

::v-deep .el-tabs--card > .el-tabs__header .el-tabs__item {
  background-color: transparent;
  //border: 1px solid white;
}

::v-deep .project-form {
  padding: 20px;
}

::v-deep .project-form-wrapper {
  background-color: transparent;
}

div.preview-layer {
  width: 500px;
  height: 100%;
  margin: 10px auto;
  right: 0;
  text-align: center;
}

div.preview-layer .preview-bg {
  width: 500px;
  height: 100%;
  margin: 20px auto;
  z-index: 999;
  opacity: 0.7;
}

div.preview-layer .preview-phone {
  width: 372px;
  height: 744px;
  background: url('~@/assets/images/appearset_bgc_big.png');
  background-size: 372px 744px;
  z-index: 1000;
}

.qrcode-view {
  position: absolute;
  top: 20px;
  right: 260px;

  p {
    text-align: center;
    font-size: 12px;
    color: #303133;
  }
}

.preview-html {
  width: 345px !important;
  height: 568px !important;
  margin: 74px 0 0;
  border-radius: 5px;
  outline: none;
  background-color: #fff;
  border-width: 2px;
  border-style: inset;
  border-color: initial;
  border-image: initial;
  border-top-width: 0;
  border-right-width: 0;
  border-bottom-width: 0;
  border-left-width: 0;
}
</style>