teachcloud-print-web/src/modules/card/components/elementEdit/cardHeadSpin/HeadStdno.vue

<template>
  <div :class="classes">
    <div class="stdno-empty" v-if="data.examNumberType === 'empty'">
      <p class="">黏贴条形码区</p>
    </div>
    <div class="stdno-auto" v-if="data.examNumberType === 'auto'">
      <div class="stdno-auto-barcode">
        <img
          :src="examNumberBarcodeSrc"
          alt="条形码"
          v-if="examNumberBarcodeSrc"
        />
        <img src="@/assets/images/barcode-sample.png" alt="条形码" v-else />
      </div>
    </div>
    <div class="stdno-fill" v-if="data.examNumberType === 'fill'">
      <div class="stdno-fill-head">
        <h5>准考证号</h5>
        <div class="stdno-fill-rect">
          <div class="stdno-fill-number" v-for="n in 13" :key="n"></div>
        </div>
      </div>
      <div class="stdno-fill-body">
        <div class="stdno-fill-list" v-for="n in 13" :key="n">
          <div class="stdno-fill-option" v-for="m in 10" :key="m">
            {{ m - 1 }}
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: "head-stdno",
  props: {
    data: {
      type: Object
    }
  },
  data() {
    return {
      examNumberBarcodeSrc:
        this.data["fieldInfos"] && this.data["fieldInfos"]["examNumber"]
    };
  },
  computed: {
    classes() {
      return [
        "head-stdno",
        "card-head-body-spin",
        { "card-head-body-spin-dash": this.data.examNumberType !== "fill" }
      ];
    }
  },
  mounted() {},
  methods: {}
};
</script>