mteacher/src/views/massMessage/selectGroup.vue

<template>
  <div class="selectGroup">
    <m-search @onSearch="onSearch" />

    <div class="group_section">
      <van-list
        v-model="loading"
        v-if="dataShow"
        :finished="finished"
        finished-text=" "
        :immediate-check="false"
        @load="getList"
      >
        <van-checkbox-group v-model="groupIds">
          <van-cell
            v-for="(item, index) in list"
            :key="index"
            @click="onCheckbox(item)"
          >
            <template #icon>
              <van-checkbox :name="item.id"></van-checkbox>
              <!-- TRAINING MUSIC  VIP/COMM -->
              <img
                v-if="item.type === 'MUSIC'"
                src="./images/icon_music.png"
                class="group_icon"
              />
              <img
                v-if="item.type === 'TRAINING'"
                src="./images/icon_xly.png"
                class="group_icon"
              />
              <img
                v-if="item.type === 'VIP' || item.type === 'COMM'"
                src="./images/icon_vip.png"
                class="group_icon"
              />
            </template>
            <div class="group_content">
              <div class="group_title van-ellipsis">{{ item.name }}</div>
              <div class="group_desc van-ellipsis">
                {{ item.memo }}(共{{ item.memberNum || 0 }}人)
              </div>
            </div>
          </van-cell>
        </van-checkbox-group>
      </van-list>
      <m-empty v-else msg="暂无数据" />
    </div>
    <div class="btn-group">
      <van-button type="primary" @click="onSubmit" round block>
        确认
      </van-button>
    </div>
  </div>
</template>

<script>
import MEmpty from "@/components/MEmpty";
import { queryGroupPage1 } from "./api";
import MSearch from "@/components/Search";
export default {
  name: "selectGroup",
  props: {
    selectIds: {
      type: Array,
      default() {
        return [];
      },
    },
  },
  components: {
    MSearch,
    MEmpty,
  },
  data() {
    return {
      list: [],
      groupIds: [],
      loading: false,
      finished: false,
      params: {
        search: "",
        active: 0,
        page: 1,
        rows: 20,
      },
      dataShow: true,
    };
  },
  mounted() {
    // 初始化选择的群组
    this.groupIds = [...this.selectIds];
    this.getList();
  },
  methods: {
    onSearch(val) {
      this.dataShow = true;
      this.loading = false;
      this.finished = false;
      this.params.search = val;
      this.params.page = 1;
      this.list = [];
      this.getList();
    },
    onSubmit() {
      // 确定选择的群组
      console.log(this.groupIds);
      this.$emit("onSubmit", this.groupIds);
    },
    onCheckbox(item) {
      const index = this.groupIds.indexOf(item.id);
      if (index > -1) {
        this.groupIds.splice(index, 1);
      } else {
        this.groupIds.push(item.id);
      }
    },
    async getList() {
      try {
        const params = this.params;
        const res = await queryGroupPage1(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>
.group_section {
  height: 65vh;
  overflow: auto;
}
.group_icon {
  width: 0.42rem;
  height: 0.42rem;
  margin-right: 0.15rem;
  margin-left: 0.15rem;
}
.btn-group {
  padding: 0.1rem 0.14rem;
}
</style>