mteacher/src/views/massMessage/index.vue

<template>
  <div class="massMessage">
    <van-sticky offset-top="0">
      <Header :appHide="true" :isFixed="false">
        <template slot="right">
          <div @click="onCreate">新建</div>
        </template>
      </Header>

      <van-tabs color="#01C1B5" v-model="params.sendFlag" @change="onChange">
        <van-tab :name="0" title="待发送"></van-tab>
        <van-tab :name="1" title="已发送"></van-tab>
      </van-tabs>
    </van-sticky>
    <van-list v-model="loading" v-if="dataShow" :finished="finished" finished-text="- 没有更多了 -" :immediate-check="false" @load="getList">
      <Item v-for="(item, index) in list" :key="index" :item="item" @onDetail="onDetail" />
    </van-list>
    <m-empty v-else msg="暂无数据" />
  </div>
</template>

<script>
import Header from "@/components/header";
import MEmpty from "@/components/MEmpty";
import Item from "./item";
import { imSendGroupMessage } from "./api";
export default {
  name: "massMessage",
  components: { Header, Item, MEmpty },
  data() {
    return {
      list: [],
      loading: false,
      finished: false,
      params: {
        sendFlag: 0,
        page: 1,
        rows: 20,
      },
      dataShow: true,
    };
  },
  mounted() {
    this.getList();
  },
  methods: {
    onCreate() {
      this.$router.push({
        path: "/massOperation",
        query: {
          type: "create",
        },
      });
    },
    onDetail(item) {
      // 未发送的可以编辑
      if (!item.sendFlag) {
        this.$router.push({
          path: "/massOperation",
          query: {
            type: "update",
            id: item.id,
            messageContent: item.messageContent,
            messageType: item.messageType,
            fileName: item.fileName,
            fileSize: item.fileSize,
            fileUrl: item.fileUrl,
            sendTime: item.sendTime,
            sendType: item.sendType,
            targetIds: item.targetIds,
          },
        });
      }
    },
    onChange() {
      this.list = [];
      this.params.page = 1;
      this.dataShow = true;
      this.loading = true;
      this.finished = false;
      this.getList();
    },
    async getList() {
      try {
        const params = this.params;
        const res = await imSendGroupMessage(this.params);
        const result = res.data;
        this.loading = false;
        if (params.page > result.pageNo) {
          return;
        }
        params.page = result.pageNo;
        this.list = this.list.concat(result.rows);
        if (params.page >= result.totalPage) {
          this.finished = true;
        }
        this.params.page++;
        // 判断是否有数据
        if (this.list.length <= 0) {
          this.dataShow = false;
        }
      } catch {
        this.finished = true;
        this.dataShow = false;
      }
    },
  },
};
</script>

<style lang="less" scoped>
.massMessage {
  min-height: 100vh;
}
</style>