mteacher/src/views/service/ServiceList.vue

<template>
  <div>
    <van-sticky>
      <m-header :backUrl="backUrl" :isFixed="false"> </m-header>
      <search @onSearch="onSearch" placeholder="请输入乐团名称" />
    </van-sticky>
    <van-list
      class="teamList"
      v-model="loading"
      v-if="dataShow"
      key="data"
      :finished="finished"
      :immediate-check="false"
      finished-text="- 没有更多内容 -"
      @load="getTeamList"
    >
      <van-cell
        :title="item.name"
        is-link
        v-for="item in dataList"
        :key="item.id"
        @click="gotoDetail(item)"
      >
        <template #default>
          <div>
            <p>乐保生效人数:{{ item.hasInstrumentNum || 0 }}</p>
            <p>乐团在读人数:{{ item.payNum || 0 }}</p>
          </div>
        </template>
      </van-cell>
    </van-list>
    <m-empty class="empty" v-else key="data" />
  </div>
</template>
<script>
import MHeader from "@/components/MHeader";
import search from "@/components/Search";
import MEmpty from "@/components/MEmpty";
import { repairTeamQueryPage } from "./api";
export default {
  components: {
    MHeader,
    search,
    MEmpty,
  },
  data() {
    return {
      backUrl: {
        status: true,
        path: "/home",
      },
      dataShow: true,
      loading: false,
      finished: false,
      params: {
        musicGroupName: null,
        page: 1,
        rows: 20,
      },
      dataList: [],
    };
  },
  mounted() {
    this.getTeamList();
  },

  methods: {
    onSearch(val) {
      this.params.musicGroupName = val;
      this.params.page = 1;
      this.dataList = [];
      this.dataShow = true;
      this.loading = true;
      this.finished = false;
      this.getTeamList();
    },
    async getTeamList() {
      let params = this.params;
      params.search = params.musicGroupName ? params.musicGroupName : null;
      let teamList = null;
      // if (this.type == 'sale') {
      // 	studentList = await queryEduStudents(params)
      // } else {
      teamList = await repairTeamQueryPage(params);
      // }
      let result = teamList.data;
      this.loading = false;
      if (result.code == 200) {
        // 重点这句，判断是不是重复请求了
        if (this.dataList.length > 0 && result.data.pageNo == 1) {
          return;
        }
        params.page = result.data.pageNo;
        this.dataList = this.dataList.concat(result.data.rows);
        if (params.page >= result.data.totalPage) {
          this.finished = true;
        }
        this.params.page++;
      } else {
        this.finished = true;
      }
      // 判断是否有数据
      if (this.dataList.length <= 0) {
        this.dataShow = false;
      }
    },
    gotoDetail(row) {
      this.$router.push({
        path: "/teamStudentList",
        query: { musicGroupId: row.id },
      });
    },
  },
};
</script>
<style lang="less" scoped>
.cellDetail {
  text-align: right;
}
.teamList {
  /deep/.van-cell {
    display: flex;
    align-items: center;
  }
}
</style>