teachcloud-print-web/card/elements/card-head/cardHeadSpin/HeadStdno.vue

<template>
  <div :class="classes">
    <div class="stdno-empty" v-if="data.examNumberStyle === 'empty'">
      <p class="">粘贴条形码区</p>
    </div>
    <div class="stdno-auto" v-if="data.examNumberStyle === 'auto'">
      <div class="stdno-auto-barcode">
        <img :src="examNumberBarcodeSrc" v-if="examNumberBarcodeSrc" />
        <img src="../../../assets/images/barcode-sample-notext.png" v-else />
        <p>{{ examNumberBarcodeName || "123456789" }}</p>
      </div>
    </div>
    <div class="stdno-fill" v-if="data.examNumberStyle === '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">
            <i>{{ m - 1 }}</i>
          </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"],
      examNumberBarcodeName:
        this.data["fieldInfos"] && this.data["fieldInfos"]["examNumberStr"]
    };
  },
  computed: {
    classes() {
      return ["head-stdno", "card-head-body-spin"];
    }
  },
  mounted() {},
  methods: {}
};
</script>