zbAdmin/src/views/circle/detail/components/userList.vue

<template>
  <div class="list-wrap">
    <div class="search">
      <el-input
        v-model="params.userName"
        size="mini"
        placeholder="请输入用户昵称"
        clearable
      />
      <el-button type="primary" size="mini" @click="searchMsg">搜索</el-button>
    </div>
    <userItems
      :group-id="groupId"
      :list="list"
      :loading="loading"
      :has-next="hasNext"
      @getList="getList"
      @toPrivateChat="toPrivateChat"
      @modifyStateCallback="modifyStateCallback"
    />
  </div>
</template>
<script>
import { getCustomerList } from "@/api/circle";
import userItems from "./components/userItems.vue";
export default {
  components: {
    userItems
  },
  props: {
    groupId: {
      type: Number,
      default: null
    },
    modifyStateObj: {
      // 修改了状态的对象
      type: Object,
      default: () => {}
    }
  },
  data() {
    return {
      loading: true,
      hasNext: true,
      params: {
        userName: "",
        current: 0,
        id: null,
        size: 10
      },
      list: [],
      userIdsObj: {}
    };
  },
  watch: {
    groupId(value) {
      this.params.id = value;
      this.params.userName = "";
      this.searchMsg();
    },
    modifyStateObj(value) {
      // modifyType: 1审核通过 2禁言操作 isForbidden: 是否被禁言 1是 2否
      if (value.modifyType === 2 && this.userIdsObj[value.userId]) {
        this.userIdsObj[value.userId].isForbidden = value.isForbidden;
      }
    }
  },
  methods: {
    modifyStateCallback(item) {
      this.$emit("modifyStateCallback", item);
    },
    async getList() {
      this.loading = true;
      this.params.current++;
      const ret = await getCustomerList(this.params).catch(() => {
        this.loading = false;
      });

      if (ret && ret.code === 0 && ret.data.list) {
        const list = ret.data.list;
        list.forEach((item, index) => {
          if (this.userIdsObj[item.privateUserId]) {
            list.splice(index, 1);
          } else {
            this.userIdsObj[item.privateUserId] = item;
          }
        });
        this.list = this.list.concat(list);
        this.hasNext = ret.data.list.length === this.params.size;
      }
      this.loading = false;
    },
    searchMsg() {
      this.hasNext = true;
      this.params.current = 0;
      this.userIdsObj = {};
      this.list = [];
      this.getList();
    },
    toPrivateChat(item) {
      this.$emit("toPrivateChat", item);
    }
  }
};
</script>
<style lang="scss" scoped>
.list-wrap {
  height: 600px;
  overflow-y: scroll;
}
.search {
  display: flex;
  margin-bottom: 10px;
  .el-input {
    margin-right: 10px;
  }
}
dl {
  list-style: none;
  margin: 0;
  padding: 0;
  list-style: none;
  padding: 10px;
  dt {
    padding: 10px 0;
  }
  dd {
    margin: 0;
    padding: 0;
  }
  dt,
  dd {
    display: flex;
    border-bottom: 1px dashed #999;
    & > div {
      display: flex;
      // flex-direction: column;
      justify-content: center;
      padding: 6px 0;
      align-items: center;
    }
    & > div:nth-child(1) {
      width: 60px;
    }
    & > div:nth-child(2) {
      flex: 1;
      text-align: center;
    }
    & > div:nth-child(3) {
      width: 100px;
      text-align: center;
    }
    & > div:nth-child(4) {
      width: 100px;
      text-align: center;
    }
    & > div:nth-child(5) {
      display: block;
      width: 60px;
      text-align: right;
      & > div {
        text-align: right;
      }
    }
    p {
      font-size: 14px;
      margin: 0;
      line-height: 16px;
    }
    ::v-deep .el-button--medium {
      padding: 4px 8px;
    }
    img {
      width: 36px;
      height: 36px;
      border-radius: 50%;
    }
  }
}
.load-tip {
  text-align: center;
  line-height: 50px;
}
</style>