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

<template>
  <div :class="classes">
    <div class="stdno-empty" v-if="data.examNumberStyle === 'PASTE'">
      <p class="">粘贴条形码区</p>
    </div>
    <div class="stdno-auto" v-if="data.examNumberStyle === 'PRINT'">
      <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 examNumberDigit"
            :key="n"
            :style="columnStyles"
          ></div>
        </div>
      </div>
      <div class="stdno-fill-body">
        <div
          class="stdno-fill-list"
          v-for="n in examNumberDigit"
          :key="n"
          :style="columnStyles"
        >
          <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 {
      examNumberDigit: this.data["examNumberDigit"] || 13,
      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"];
    },
    columnStyles() {
      return {
        width: (100 / this.examNumberDigit).toFixed(2) + "%"
      };
    }
  },
  methods: {}
};
</script>