合并

src/common/vueFilters.js

@@ -152,3 +152,14 @@ Vue.filter("formatUnit", (value) => {
 });
 
 Vue.filter("coupontypeDetailType", (val) => constant.coupontypeDetail[val]);
+
+// 乐团学员状态
+Vue.filter("musicGroupStudentType", (value) => {
+  let template = {
+    NORMAL: "在读",
+    LEAVE: "请假",
+    QUIT: "退团",
+    APPLY: "报名",
+  };
+  return template[value];
+});

src/router/index.js

@@ -128,18 +128,6 @@ let defaultRouter = [
       weight: 2,
     },
   },
-  // {
-  //   path: "/serviceStudent",
-  //   name: "serviceStudent",
-  //   component: () =>
-  //     import(
-  //       /* webpackChunkName:'serviceStudent' */ "@/views/serviceStudent/index"
-  //     ),
-  //   meta: {
-  //     descrition: "商品销售",
-  //     weight: 2,
-  //   },
-  // },
 ];
 
 defaultRouter = defaultRouter

src/router/teacherRouter.js

@@ -393,6 +393,30 @@ let teacherRouter = [
       weight: 8, // 页面权重
     },
   },
+  {
+    path: "/studentList",
+    name: "studentList",
+    component: () =>
+      import(
+        /* webpackChunkName:'studentList' */ "@/views/studentList/index.vue"
+      ),
+    meta: {
+      descrition: "学生列表",
+      weight: 2,
+    },
+  },
+  {
+    path: "/studentDetail",
+    name: "studentDetail",
+    component: () =>
+      import(
+        /* webpackChunkName:'studentDetail' */ "@/views/studentList/studentDetail.vue"
+      ),
+    meta: {
+      descrition: "学生详情",
+      weight: 2,
+    },
+  },
 ];
 
 export default teacherRouter;

src/views/studentList/api.js

@@ -0,0 +1,41 @@
+import request from "@/helpers/request";
+
+export const queryStudentList = (data) => {
+  return request({
+    url: "/student/queryStudentList",
+    method: "post",
+    data,
+  });
+};
+
+export const queryOrganList = (data) => {
+  return request({
+    url: "/teacher/queryOrganList",
+    method: "get",
+    params: data,
+  });
+};
+
+export const findStudentMusicGroups = (data) => {
+  return request({
+    url: "/student/findStudentMusicGroups",
+    method: "get",
+    params: data,
+  });
+};
+
+// export const queryPageStudent = (data) => {
+//   return request({
+//     url: "/imLiveBroadcastRoom/queryPage",
+//     method: "post",
+//     data,
+//   });
+// };
+
+// export const queryRoomDetail = (data) => {
+//   return request({
+//     url: "/imLiveRoomVideo/queryList",
+//     method: "get",
+//     params: data,
+//   });
+// };

src/views/studentList/index.vue

@@ -0,0 +1,209 @@
+<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() {
+    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>

src/views/studentList/studentDetail.vue

@@ -0,0 +1,152 @@
+<template>
+  <div class="studentDetail">
+    <van-cell-group inset style="margin: 0.1rem 0.12rem">
+      <van-cell center :border="false">
+        <template #icon>
+          <van-image class="studentLogo" :src="avatar || iconStudent" />
+        </template>
+        <template #title>
+          <div style="display: flex; align-items: center; font-size: 0.16rem">
+            {{ username }}
+            <img
+              v-if="memberRankSettingId > 0"
+              style="width: 16px; height: 16px; margin-left: 3px"
+              src="./images/icon_member.png"
+              alt=""
+            />
+          </div>
+        </template>
+        <template #label>
+          {{ subjectName }}
+        </template>
+      </van-cell>
+      <van-cell style="padding-top: 3px; padding-bottom: 15px">
+        <div class="studentMember">
+          <img src="./images/icon_tips.png" />
+          <span>该学员会员有效期剩余： {{ membershipDay }} 天</span>
+        </div>
+      </van-cell>
+    </van-cell-group>
+
+    <div class="title"><i></i>基础信息</div>
+    <van-cell-group inset style="margin: 0.1rem 0.12rem">
+      <van-cell title="学员编号" :value="id"></van-cell>
+      <van-cell title="分部" :value="organName"></van-cell>
+      <van-cell title="手机号" :value="phone"></van-cell>
+      <van-cell title="年级" :value="currentGrade"></van-cell>
+      <van-cell title="班级" :value="currentClass"></van-cell>
+    </van-cell-group>
+
+    <div class="title" v-if="musicGroupList.length > 0"><i></i>乐团信息</div>
+    <van-cell-group inset style="margin: 0.1rem 0.12rem">
+      <van-cell
+        v-for="(item, index) in musicGroupList"
+        :key="index"
+        :title="item.musicGroupName"
+        :label="item.musicGroupId"
+        center
+      >
+        <span :class="item.userMusicGroupStatus">{{
+          item.userMusicGroupStatus | musicGroupStudentType
+        }}</span>
+      </van-cell>
+    </van-cell-group>
+  </div>
+</template>
+
+<script>
+import { findStudentMusicGroups } from "./api";
+export default {
+  data() {
+    const query = this.$route.query;
+    return {
+      iconStudent: require("@/assets/images/icon_student.png"),
+      id: query.id,
+      avatar: query.avatar,
+      username: query.username,
+      subjectName: query.subjectName,
+      phone: query.phone,
+      organName: query.organName,
+      currentGrade: query.currentGrade,
+      currentClass: query.currentClass,
+      memberRankSettingId: query.memberRankSettingId,
+      membershipDay: query.membershipDay,
+      musicGroupList: [],
+    };
+  },
+  async mounted() {
+    try {
+      const res = await findStudentMusicGroups({ userId: this.id });
+      console.log(res);
+      this.musicGroupList = res.data || [];
+    } catch {
+      //
+    }
+  },
+};
+</script>
+
+<style lang="less" scoped>
+.studentDetail {
+  min-height: 100vh;
+  overflow: hidden;
+}
+.studentMember {
+  padding: 6px 8px;
+  background: #fcedd3;
+  border-radius: 0.14rem;
+  display: flex;
+  align-items: center;
+  line-height: 0.18rem;
+  img {
+    width: 18px;
+    height: 18px;
+    margin-right: 5px;
+  }
+}
+.studentLogo {
+  width: 0.48rem;
+  height: 0.48rem;
+  border-radius: 50%;
+  margin-right: 10px;
+  overflow: hidden;
+}
+
+.title {
+  font-size: 0.16rem;
+  font-weight: 500;
+  color: #333333;
+  line-height: 0.22rem;
+  display: flex;
+  align-items: center;
+  margin: 0 0.12rem 0.1rem;
+  i {
+    display: inline-block;
+    width: 4px;
+    height: 14px;
+    background: linear-gradient(180deg, #02e2db 0%, #01c1b5 100%);
+    border-radius: 2px;
+    margin-right: 0.06rem;
+  }
+}
+
+.NORMAL,
+.QUIT,
+.APPLY {
+  background: #efefef;
+  border-radius: 0.06rem;
+  font-size: 0.13rem;
+  color: #999999;
+  line-height: 0.18rem;
+  padding: 0.03rem 0.12rem;
+}
+
+.NORMAL {
+  color: #01c1b5;
+  background: #e5f8f7;
+}
+.APPLY {
+  color: #fa6400;
+  background: #fee1cd;
+}
+</style>