msyj-admin-org/src/modules/grading/components/GradeStandardPaper.vue

<template>
  <div class="grade-standard-paper paper-carousel">
    <div class="carousel-title">
      <h3>标准卷</h3>
      <Select v-model="curLevel" @on-change="getPapers">
        <Option
          v-for="(level, gindex) in levels"
          :key="gindex"
          :value="level.id"
          :label="level.code"
        ></Option>
      </Select>
    </div>
    <div class="carousel-body">
      <!-- 换一个轮播组件 -->
      <Carousel
        v-model="curPaperIndex"
        arrow="always"
        dots="none"
        :loop="false"
        ref="Carousel"
      >
        <CarouselItem v-for="(paper, pindex) in papers" :key="pindex">
          <div class="image-view-contain">
            <img :src="paper.thumbSrc" :alt="paper.title" />
          </div>
        </CarouselItem>
      </Carousel>
    </div>
  </div>
</template>

<script>
import { paperList } from "@/api";

export default {
  name: "grade-standard-paper",
  props: {
    levels: {
      type: Array,
      default() {
        return [];
      }
    }
  },
  data() {
    return {
      curLevel: "",
      papers: [],
      curPaperIndex: 0
    };
  },
  mounted() {
    this.initData();
  },
  methods: {
    async getPapers() {
      const datas = {
        level: this.curLevel,
        sort: "secretNumber",
        isSample: true,
        page: 0,
        size: 100
      };
      const data = await paperList(datas);
      this.papers = data.data;
      this.curPaperIndex = 0;
    }
  }
};
</script>