pbl-app/src/views/eva/components/classList.vue

<template>
  <div class="classList">
    <!-- 班级名称开始 -->
    <div class="classListTop" @click="spread(claName.id)">
      <div class="claTit">
        <!-- <van-icon size="14px" v-if="claName.count" :name="ico ? 'arrow-left' : 'arrow-down'" /> -->
        <!-- <img v-if="ico" src="../../../assets/images/eva/up.png" />
        <img v-else src="../../../assets/images/eva/down (2).png" /> -->

        <!-- <van-icon size="18px" top="2px" style="margin-right:10px" name="friends" /> -->
        {{ claName.name }}
        <div style="margin-left:10px">({{ claName.count }})</div>
      </div>
      <!-- <div class="moreIcon">
        <van-icon size="14px" v-if="claName.count" :name="ico ? 'arrow-left' : 'arrow-down'" />
      </div> -->
    </div>
    <!-- 班级名称结束 -->

    <!-- 班级同学列表 -->
    <!-- <div v-if="!ico"> -->
    <div class="schoolmates" v-for="(i, index) in stuList" :key="index + 'a'" @click="gotoStudentDetail(i.id)">
      <div class="schoolmateName">{{ i.name }}</div>
    </div>
    <!-- </div> -->
    <!-- 班级同学列表 -->
  </div>
</template>

<script>
import { selectClassStudent } from '@/api/eva'

export default {
  props: {
    claName: {
      type: Object,
      default() {
        return {}
      }
    }
  },
  data() {
    return {
      ico: 1,
      stuList: [],
      classId: ''
    }
  },
  methods: {
    // 班级折叠与展开
    spread(e) {
      console.log(e)
      if (this.ico) {
        selectClassStudent({ cid: e }).then(res => {
          console.log('res', res)
          this.stuList = res[0]
        })
      }
      this.ico = !this.ico
    },
    // 跳转详情页
    gotoStudentDetail(e) {
      // return console.log(e);
      localStorage.setItem('userId', e)
      this.$router.push(`/studentDetail?uid=${e}&cid=${this.claName.id}&cName=${this.claName.name}`)
    }
  }
}
</script>

<style lang="scss" scoped>
.classList {
  box-sizing: border-box;
  // 班级名称
  .classListTop {
    width: 100%;
    height: 40px;
    display: flex;
    box-sizing: border-box;
    justify-content: space-between;
    padding: 0 10px;
    align-items: center;

    .claTit {
      font-size: 14px;
      display: flex;
      align-items: center;
      justify-content: flex-start;
      img {
        width: 15px;
        margin-right: 5px;
      }
    }
    .moreIcon {
      width: 40px;
      text-align: center;
    }
  }

  // 同学列表
  .schoolmates {
    // width: 100%;
    height: 45px;
    background-color: #f7f7f7;
    display: flex;
    // justify-content: space-between;
    // align-items: center;
    // box-sizing: border-box;
    // padding: 0 38px;

    .schoolmateName {
      font-size: 14px;
      display: flex;
    }
  }
}
</style>