teachcloud-print-web/card/components/CardView.vue

<template>
  <div class="card-view">
    <template v-for="(page, pageNo) in pages">
      <div
        :class="[
          'page-box',
          `page-box-${cardConfig.pageSize}`,
          `page-box-${pageNo % 2}`,
          { 'page-box-less': pages.length <= 2 }
        ]"
        :key="pageNo"
      >
        <div
          :class="['page-locators', `page-locators-${page.locators.length}`]"
        >
          <ul
            class="page-locator-group"
            v-for="(locator, iind) in page.locators"
            :key="iind"
          >
            <li
              v-for="(elem, eindex) in locator"
              :key="eindex"
              :id="elem.id"
            ></li>
          </ul>
        </div>
        <!-- inner edit area -->
        <div class="page-main-inner">
          <div
            :class="['page-main', `page-main-${page.columns.length}`]"
            :style="{ margin: `0 -${page.columnGap / 2}px` }"
          >
            <div
              class="page-column"
              v-for="(column, columnNo) in page.columns"
              :key="columnNo"
              :style="{ padding: `0 ${page.columnGap / 2}px` }"
            >
              <div
                class="page-column-main"
                :id="[`column-${pageNo}-${columnNo}`]"
              >
                <div class="page-column-body" v-if="column.elements.length">
                  <topic-element-preview
                    class="page-column-element"
                    v-for="element in column.elements"
                    :key="element.id"
                    :data="element"
                  ></topic-element-preview>
                </div>
                <div class="page-column-body" v-else>
                  <div
                    class="page-column-forbid-area"
                    v-if="cardConfig.showForbidArea"
                  >
                    <p>该区域严禁作答</p>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
        <!-- outer edit area -->
        <div class="page-main-outer">
          <page-number
            type="rect"
            :total="pages.length"
            :current="pageNo + 1"
          ></page-number>
          <page-number
            type="text"
            :total="pages.length"
            :current="pageNo + 1"
          ></page-number>
        </div>
      </div>
    </template>
  </div>
</template>

<script>
import TopicElementPreview from "./TopicElementPreview";
import PageNumber from "./PageNumber";
import previewTemp from "../previewTemp";
import exchangeMixins from "../mixins/exchange";

export default {
  name: "card-view",
  components: { TopicElementPreview, PageNumber },
  mixins: [exchangeMixins],
  props: {
    pages: {
      type: Array,
      default() {
        return [];
      }
    },
    cardConfig: {
      type: Object,
      default() {
        return {};
      }
    }
  },
  methods: {
    getPreviewTemp(htmlContent) {
      return previewTemp(htmlContent);
    }
  }
};
</script>