|
@@ -0,0 +1,210 @@
|
|
|
+<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>
|