mteacher/src/views/activeProgram/modal/studentList.vue

<template>
  <div>
    <!-- <van-sticky>
            <van-search
            show-action
            shape="round"
            @search="onSearch"
            v-model="params.search"
            placeholder="请输入学生名或手机号"
            >
            <template #action>
                <div @click="onSearch">搜索</div> 
            </template>
            </van-search>
        </van-sticky> -->
    <m-search @onSearch="onSearch" placeholder="请输入学生名或手机号" />
    <div class="paddingB80">
      <van-list
        v-model="loading"
        class="studentContainer"
        v-if="dataShow"
        key="data"
        :finished="finished"
        finished-text="没有更多学生~"
        @load="getStudent"
      >
        <!-- <div class="studentContainer" v-if="dataShow" key="data"> -->
        <van-checkbox-group v-model="checkboxSelect">
          <van-cell-group :border="false">
            <van-cell
              v-for="(item, index) in dataList"
              :key="index"
              @click="onCheckboxSelect(item)"
              class="input-cell"
              value-class="value-times"
              :center="true"
            >
              <template slot="icon">
                <img
                  class="logo"
                  v-if="item.avatar"
                  :src="item.avatar"
                  alt=""
                />
                <img
                  class="logo"
                  v-else
                  src="@/assets/images/icon_student.png"
                  alt=""
                />
              </template>
              <template slot="title">
                {{ item.username }}({{ item.userId }})
              </template>
              <template slot="default">
                <span style="font-size: 0.16rem; color: #1a1a1a"
                  >可排课次数：<span style="color: #01c1b5">{{
                    item.showStudentNum
                  }}</span></span
                >
              </template>
              <template slot="extra">
                <van-checkbox :name="item.userId">
                  <template #icon="props">
                    <img
                      v-if="!item.radioDisabled"
                      class="img-icon"
                      :src="
                        props.checked ? activeButtonIcon : inactiveButtonIcon
                      "
                    />
                  </template>
                </van-checkbox>
              </template>
            </van-cell>
          </van-cell-group>
        </van-checkbox-group>
        <!-- </div> -->
      </van-list>
      <m-empty class="empty" msg="暂无学生" v-else key="data" />
    </div>
    <div class="button-group-popup">
      <span class="btn" @click="onPopupCancel">取消</span>
      <span class="btn primary" @click="onPopupSubmit">确定</span>
    </div>
        <div class="wall"></div>
  </div>
</template>

<script>
import MEmpty from "@/components/MEmpty";
import MSearch from "@/components/MSearch";
import { getActivityStudentCanCourseNum } from "../api";
export default {
  components: {
    MEmpty,
    MSearch,
  },
  // courseTypeIsVip 当前排课的类型，可能是赠送课程
  props: [
    "studentList",
    "activityId",
    "courseTypeIsVip",
    "typeStatus",
    "studentNum",
    "isMusicTheory",
  ],
  data() {
    return {
      params: {
        search: null,
        activityId: this.activityId,
        page: 1,
        rows: 20,
      },
      dataShow: true, // 是否有数据
      dataList: [],
      checkboxSelect: [],
      loading: false, // 下拉刷新状态
      finished: false, // 数据是否加载完成
    };
  },
  watch: {
    studentList(newVal) {
      if (newVal) {
        let tempVal = newVal || [];
        this.checkboxSelect = [];
        tempVal.forEach((item) => {
          this.checkboxSelect.push(item.userId);
        });
      }
    },
  },
  mounted() {
    this.getStudent();
  },
  methods: {
    // 搜索
    onSearch(val) {
      this.params.page = 1;
      this.dataShow = true;
      this.loading = true;
      this.params.search = val ? val : null;
      this.dataList = [];
      this.finished = false;
      this.getStudent();
    },
   getStudent() {
      let params = this.params;
      params.giveFlag = this.typeStatus ? 0 : 1;

      getActivityStudentCanCourseNum(params).then((ress) => {
       
          let res = ress.data
             console.log(res)
        if (res.code == 200) {
          let result = res.data.rows || [];
          let showResult = [];
          this.isLoading = false;
          params.page = res.data.pageNo;
          result.forEach((item) => {
            let showStudentNum = 0;

            if (this.typeStatus) {
              showStudentNum = this.courseTypeIsVip
                ? item.vipNum
                : item.practiceNum;
            } else {
              showStudentNum = this.courseTypeIsVip
                ? item.giveVipNum
                : item.givePracticeNum;
            }
            item.showStudentNum = showStudentNum;
            // 判断次数大于0的学生展示
            if (showStudentNum > 0) {
              showResult.push(item);
            }
          });
        if(res.data.pageNo == 1){
              this.dataList =showResult;
        }else{
              this.dataList = this.dataList.concat(showResult);
        }
        
          console.log(this.dataList.length);
          if (this.dataList.length > 0) {
            this.dataShow = true;
          } else {
            this.dataShow = false;
          }
          if (params.page >= res.data.totalPage) {
            this.finished = true;
          }
          this.params.page++;
        }else {
             this.finished = true;
        }
      });
    },
    onCheckboxSelect(value) {
      if (this.checkboxSelect.includes(value.userId)) {
        this.checkboxSelect.forEach((item, index) => {
          if (item === value.userId) {
            this.checkboxSelect.splice(index, 1);
          }
        });
      } else {
        this.checkboxSelect.push(value.userId);
      }
    },
    onPopupCancel() {
      this.$listeners.close();
    },
    onPopupSubmit() {
      if (this.isMusicTheory) {
        if (
          !(
            this.checkboxSelect.length >= 1 &&
            this.checkboxSelect.length <= this.studentNum
          )
        ) {
          this.$toast(
            `请选择1-${this.studentNum}名学生，当前选择${this.checkboxSelect.length}名`
          );
          return;
        }
      } else {
        if (this.checkboxSelect.length != this.studentNum) {
          this.$toast(
            `请选择学生${this.studentNum}名，当前选择${this.checkboxSelect.length}名`
          );
          return;
        }
      }
      let dataList = this.dataList || [];
      let checkList = [];
      dataList.forEach((item) => {
        if (this.checkboxSelect.includes(item.userId)) {
          checkList.push(item);
        }
      });
      this.$emit("submit", checkList);
    },
  },
};
</script>

<style lang="less" scoped>
@import url("../../../assets/commonLess/variable.less");
.studentContainer {
     height: 4rem;
       overflow-y: scroll;
  padding-top: 0.1rem;
  background-color: #fff;
  /deep/.van-cell__title {
    font-size: 0.16rem;
    color: @mFontColor;
    // flex: 1 auto;
  }

  .logo {
    width: 0.35rem;
    height: 0.35rem;
    margin-right: 0.12rem;
    border-radius: 100%;
  }

  .input-cell {
    padding: 0.12rem 0.16rem 0.2rem;

    .van-checkbox {
      justify-content: flex-end;
    }
  }

  /deep/.van-cell__value {
    height: 0.2rem;
  }

  /deep/.van-checkbox__icon .van-icon {
    border-color: @sFontColor;
  }
  /deep/.van-checkbox__icon--checked .van-icon {
    border-color: #01c1b5;
  }

  .van-tag {
    margin-left: 0.08rem;
  }
}
.value-times {
  display: flex;
  align-items: center;
  justify-content: center;
}
.paddingB80 {
  padding-bottom: 0.8rem;
}
.wall {
  content: "";
  height: 0.62rem;
  position: relative;
}
.button-group-popup {
  position: fixed;
  bottom: 0;
  padding: 0.1rem 0;
  width: 100%;
  text-align: center;
  background-color: #ffffff;
  .btn {
    padding: 0 0.45rem;
    line-height: 0.4rem;
    display: inline-block;
    border: 1px solid @mColor;
    border-radius: 1rem;
    color: @mColor;
    background: #fff;
    font-size: 0.18rem;
    &.primary {
      color: #fff;
      background: @mColor;
    }
  }
  .btn + .btn {
    margin-left: 0.1rem;
  }
}
</style>