mteacher/src/views/studentList/index.vue

<template>
  <div class="studentList">
    <van-sticky>
      <Search @onSearch="onSearch" />
      <van-dropdown-menu active-color="#01C1B5">
        <van-dropdown-item
          v-model="value1"
          :options="option1"
          @change="onChange"
        />
        <van-dropdown-item
          v-model="value2"
          :options="option2"
          @change="onChange"
        />
        <van-dropdown-item
          v-model="value3"
          :options="option3"
          @change="onChange"
        />
      </van-dropdown-menu>
    </van-sticky>

    <van-list
      v-model="loading"
      v-if="dataShow"
      :finished="finished"
      :immediate-check="false"
      finished-text="- 没有更多内容 -"
      @load="getStudent"
    >
      <van-cell-group
        inset
        style="margin-top: 0.1rem"
        v-for="(item, index) in dataList"
        :key="index"
        @click="onDetail(item)"
      >
        <van-cell is-link center>
          <template #icon>
            <van-image class="studentLogo" :src="item.avatar || iconStudent" />
          </template>
          <template #title>
            <div style="display: flex; align-items: center; font-size: 0.16rem">
              {{ item.username }}
              <img
                v-if="item.memberRankSettingId > 0"
                style="width: 16px; height: 16px; margin-left: 3px"
                src="./images/icon_member.png"
                alt=""
              />
            </div>
          </template>
          <template #label>
            {{ item.subjectName }}
          </template>
        </van-cell>
      </van-cell-group>
    </van-list>
    <m-empty class="empty" v-else />
  </div>
</template>

<script>
import MEmpty from "@/components/MEmpty";
import Search from "@/components/Search";
import { findSubSubjects } from "@/api/teacher";
import { queryStudentList, queryOrganList } from "./api";
export default {
  name: "studentList",
  components: {
    MEmpty,
    Search,
  },
  data() {
    return {
      iconStudent: require("@/assets/images/icon_student.png"),
      value1: "",
      value2: "",
      value3: "",
      option1: [{ text: "全部分部", value: "" }],
      option2: [{ text: "全部声部", value: "" }],
      option3: [
        { text: "全部学员", value: "" },
        { text: "会员", value: "1" },
        { text: "非会员", value: "0" },
        { text: "未生效会员", value: "2" },
      ],
      loading: false,
      finished: false,
      params: {
        search: null,
        page: 1,
        rows: 20,
      },
      dataShow: true, // 是否有数据
      dataList: [],
    };
  },
  mounted() {
    document.title = "学员列表";
    this.__init();
    this.getStudent();
  },
  methods: {
    onDetail(item) {
      this.$router.push({
        path: "/studentDetail",
        query: {
          id: item.userId,
          avatar: item.avatar,
          username: item.username,
          subjectName: item.subjectName,
          phone: item.parentsPhone,
          organName: item.organName,
          currentGrade: item.currentGrade,
          currentClass: item.currentClass,
          memberRankSettingId: item.memberRankSettingId,
          membershipDay: item.membershipDay,
        },
      });
    },
    async getStudent() {
      let params = this.params;
      params.search = params.search ? params.search : null;
      params.organId = this.value1;
      params.subjectId = this.value2;
      params.hasMember = this.value3;
      try {
        let studentList = await queryStudentList(params);
        let result = studentList.data;
        this.loading = false;
        // 重点这句，判断是不是重复请求了
        if (this.dataList.length > 0 && result.pageNo == 1) {
          return;
        }
        params.page = result.pageNo;
        this.dataList = this.dataList.concat(result.rows);
        if (params.page >= result.totalPage) {
          this.finished = true;
        }
        this.params.page++;
        // 判断是否有数据
        if (this.dataList.length <= 0) {
          this.dataShow = false;
        }
      } catch {
        //
        this.finished = true;
        this.dataShow = false;
      }
    },
    onChange() {
      this.params.page = 1;
      this.dataShow = true;
      this.loading = true;
      this.dataList = [];
      this.finished = false;
      this.getStudent();
    },
    async __init() {
      try {
        let organList = await queryOrganList();
        let result = organList.data || [];
        result.forEach((item) => {
          this.option1.push({
            text: item.value,
            value: item.key,
          });
        });

        // 声部列表
        await findSubSubjects().then((res) => {
          let result = res.data;
          if (result.code == 200 && result.data.length > 0) {
            let tempArr = [];
            result.data.forEach((item) => {
              item.value = item.id;
              item.text = item.name;
              tempArr.push(item);
            });
            this.option2.push(...tempArr);
          } else {
            this.$toast("暂无科目列表");
          }
        });
      } catch {
        //
      }
    },
    onSearch(val) {
      this.params.search = val;
      this.onChange();
    },
  },
};
</script>

<style lang="less" scoped>
.studentList {
  min-height: 100vh;
}
.studentLogo {
  width: 0.48rem;
  height: 0.48rem;
  border-radius: 50%;
  margin-right: 10px;
  overflow: hidden;
}
</style>