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

<template>
  <div>
    <div class="search">
      <el-input size="mini" placeholder="" />
      <el-button type="primary" size="mini">搜索</el-button>
    </div>
    <dl>
      <dt>
        <div>头像</div>
        <div>uid</div>
        <div>加入时间</div>
        <div>到期时间</div>
        <div>操作</div>
      </dt>
      <dd>
        <div><img src="" alt="" /></div>
        <div>
          <p>1234</p>
          <p>小可爱</p>
        </div>
        <div>
          <p>2012-12-22</p>
        </div>
        <div>
          <p>2012-12-22</p>
        </div>
        <div>
          <div>
            <el-button type="text">私聊</el-button>
          </div>
          <div>
            <el-button type="text">禁言</el-button>
          </div>
        </div>
      </dd>
      <dd>
        <div><img src="" alt="" /></div>
        <div>
          <p>1234</p>
          <p>小可爱</p>
        </div>
        <div>
          <p>2012-12-22</p>
        </div>
        <div>
          <p>2012-12-22</p>
        </div>
        <div>
          <div>
            <el-button type="text">私聊</el-button>
          </div>
          <div>
            <el-button type="text">禁言</el-button>
          </div>
        </div>
      </dd>
    </dl>
  </div>
</template>
<script>
import {
  queryCommentBlackList,
  addCommentBlack,
  removeCommentBlack
} from "@/api/videoLive";
export default {
  methods: {
    setCommentBlack() {
      this.$confirm(`您确定${item.isForbid === 2 ? "禁言" : "取消禁言"}?`, {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      })
        .then(() => {
          if (item.isForbid === 2) {
            addCommentBlack(data).then(res => {
              if (res.code === 0) {
                this.$message({
                  message: "禁言成功",
                  showClose: false,
                  type: "success"
                });
              }
            });
          } else {
            removeCommentBlack({ phone: item.userId }).then(res => {
              if (res.code === 0) {
                this.$message({
                  message: "取消禁言成功",
                  showClose: false,
                  type: "success"
                });
              }
            });
          }
        })
        .catch(() => {});
    },
    async getCommentBlackList() {
      let ret = await CommentBlackList({
        size: 10,
        current: 1
      });
    }
  }
};
</script>
<style lang="scss" scoped>
.search {
  display: flex;
  margin-bottom: 10px;
  .el-input {
    margin-right: 10px;
  }
}
dl {
  list-style: none;
  margin: 0;
  padding: 0;
  background: #fff;
  list-style: none;
  padding: 10px;
  min-height: 500px;
  overflow-y: scroll;
  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;
    }
    & > div:nth-child(1) {
      width: 60px;
    }
    & > div:nth-child(2) {
      width: 100px;
    }
    & > div:nth-child(3) {
      width: 100px;
    }
    & > div:nth-child(4) {
      width: 100px;
    }
    & > div:nth-child(5) {
      flex: 1;
    }
    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%;
    }
  }
}
</style>