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

<template>
  <div class="list-wrap">
    <div class="search">
      <el-input v-model="userName" size="mini" placeholder="请输入用户昵称" />
      <el-button type="primary" size="mini" @click="searchMsg">搜索</el-button>
    </div>
    <dl
      v-infinite-scroll="getList"
      infinite-scroll-disabled="disabled"
      infinite-scroll-immediate="false"
    >
      <dt>
        <div>头像</div>
        <div>uid</div>
        <div>加入时间</div>
        <div>到期时间</div>
        <div>操作</div>
      </dt>
      <dd v-for="(item, index) in list" :key="item.id">
        <div><img src="" alt="" /></div>
        <div>
          <!-- <p>{{ item.phone }}</p> -->
          <p>{{ item.userName }}</p>
        </div>
        <div>
          <p>数据缺失</p>
        </div>
        <div>
          <p>数据缺失</p>
        </div>
        <div>
          <div>
            <el-link type="success" :underline="false">私聊</el-link>
          </div>
          <div>
            <el-link v-if="type === 1" type="success" :underline="false"
              >根据用户的禁言状态来显示禁言还是取消禁言</el-link
            >
            <el-link
              v-else-if="type === 2"
              type="success"
              :underline="false"
              @click="setCommentBlack(2, item)"
              >取消禁言</el-link
            >
          </div>
        </div>
      </dd>
    </dl>
    <p v-if="loading" class="load-tip">加载中...</p>
    <p v-if="!hasNext" class="load-tip">没有更多了...</p>
    <p v-else-if="!loading && hasNext" class="load-tip">下拉加载更多...</p>
  </div>
</template>
<script>
import {
  queryCommentBlackList,
  addCommentBlack,
  removeCommentBlack
} from "@/api/videoLive";
export default {
  props: {
    groupId: {
      type: Number
    },
    type: {
      type: Number,
      default: 1 // 1：用户列表  2：禁言列表
    },
    modifyStateObj: {
      // 修改了状态的对象
      type: Object
    }
  },
  data() {
    return {
      loading: true,
      hasNext: true,
      userName: "",
      list: []
    };
  },
  watch: {
    groupId() {
      this.userName = "";
      this.searchMsg();
    },
    modifyStateObj(value) {
      debugger;
      if (value.modifyType === 2 && value.isForbidden === 2) {
        this.list = this.list.filter(citem => value.userId !== citem.phone);
        !this.list.lenght && this.searchMsg();
      }
    }
  },
  methods: {
    setCommentBlack(type, item) {
      if (type === 1) {
        // 禁言
      } else {
        // 取消禁言
        this.$confirm(`您确定取消禁言?`, {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning"
        })
          .then(() => {
            removeCommentBlack({
              userPhone: item.phone,
              productId: item.productId,
              productType: 41 // 41 交易圈
            }).then(res => {
              if (res.code === 0) {
                this.$message({
                  message: "取消禁言成功",
                  showClose: false,
                  type: "success"
                });
                this.list = this.list.filter(
                  citem => item.phone !== citem.phone
                );
                !this.list.lenght && this.searchMsg();
                this.$emit("modifyStateCallback", {
                  userId: item.phone,
                  isForbidden: 2,
                  modifyType: 2
                });
              }
            });
          })
          .catch(() => {});
      }
    },
    async getList() {
      if (this.type === 2) {
        this.loading = true;
        const ret = await queryCommentBlackList({
          size: 10,
          current: 1,
          productId: this.groupId,
          userName: this.userName,
          productType: 41,
          status: 0,
          userType: 3 // 作为何种角色访问 1:投顾 2:运营(非投顾) 3:忽略数据权限
        }).catch(() => {
          this.loading = false;
        });
        if (ret && ret.code === 0) {
          this.list = ret.data.list;
          this.hasNext = ret.data.hasNext;
        }
        this.loading = false;
      }
    },
    searchMsg() {
      this.list = [];
      this.getList();
    },
    toPrivateChat(item) {
      this.$emit("toPrivateChat", item);
    }
  }
};
</script>
<style lang="scss" scoped>
.list-wrap {
  height: 600px;
  overflow-y: scroll;
  background: #fff;
}
.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>