zbAdmin/src/views/circle/data/components/studentList.vue

<template>
  <div class="module-content">
    <h4>学员列表</h4>
    <div class="table-area">
      <el-form
        :inline="true"
        size="mini"
        :model="formInline"
        class="demo-form-inline"
      >
        <el-form-item label="">
          <el-input
            v-model="formInline.userId"
            placeholder="请输入id"
            clearable
          />
        </el-form-item>
        <el-form-item label="">
          <el-input
            v-model="formInline.nickName"
            placeholder="请输入昵称"
            clearable
          />
        </el-form-item>
        <el-form-item label="">
          <el-select
            v-model="formInline.isOnline"
            placeholder="选择在线状态"
            clearable
          >
            <el-option label="在线" value="1" />
            <el-option label="不在线" value="2" />
          </el-select>
        </el-form-item>
        <el-form-item label="">
          <el-select
            v-model="formInline.isForbidden"
            placeholder="选择禁言状态"
            clearable
          >
            <el-option
              v-for="(value, key) in commentBlackStatusOption"
              :key="key"
              :label="value"
              :value="key"
            />
            <!-- <el-option label="未禁言" value="2" /> -->
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="onSubmit">搜索</el-button>
        </el-form-item>
      </el-form>
      <el-table :data="tableData" style="width: 100%">
        <el-table-column prop="date" label="头像" width="180">
          <template slot-scope="scope">
            <img
              :src="scope.row.headPicUrl"
              style="max-width: 50x;max-height: 50px;"
              alt=""
              srcset=""
            />
          </template>
        </el-table-column>
        <el-table-column prop="userId" label="uid" width="180" />
        <el-table-column prop="joinTime" label="加入时间" />
        <el-table-column prop="expireTime" label="到期时间" />
        <el-table-column prop="" label="状态">
          <template slot-scope="scope">
            {{ customerStatusOption[scope.row.customerStatus] }}
          </template>
        </el-table-column>
        <el-table-column prop="address" label="禁言状态">
          <template slot-scope="scope">
            {{ commentBlackStatusOption[scope.row.isForbidden] }}
          </template>
        </el-table-column>
        <el-table-column fixed="right" label="操作" width="100">
          <template slot-scope="scope">
            <el-button type="text" size="small"> 私聊</el-button>
            <el-button type="text" size="small">{{
              scope.row.isForbidden === 2 ? "禁言" : "取消禁言"
            }}</el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <div class="pagination-wrap">
      <!-- 分页器 -->
      <el-pagination
        style="margin-top: 50px;"
        :current-page="formInline.current"
        :page-sizes="[10, 20, 30, 40]"
        :page-size="formInline.size"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total"
        @size-change="sizeChange"
        @current-change="pageChange"
      />
    </div>
    <forbidSpeak
      ref="forbidSpeakRef"
      :product-type="41"
      :product-id="formInline.groupId"
      :scope="2"
      @callback="forbidSpeakCallback"
    />
  </div>
</template>
<script>
import { removeCommentBlack } from "@/api/videoLive";
import { getListCustomer } from "@/api/circle";
import forbidSpeak from "../../components/forbidSpeak.vue";
export default {
  components: { forbidSpeak },
  data() {
    return {
      commentBlackStatusOption: {
        1: "禁言中",
        2: "未禁言"
      },
      customerStatusOption: {
        1: "在期",
        2: "已到期",
        3: "即将到期",
        4: "新学员"
      },
      formInline: {
        groupId: this.$route.query.id,
        userId: "",
        nickName: "",
        isOnline: "",
        isForbidden: "",
        size: 10,
        current: 1
      },
      tableData: [],
      total: 0,
      clickItem: {}
    };
  },
  methods: {
    onSubmit() {
      this.formInline.current = 1;
      this.getListCustomer();
    },
    // 分页器
    sizeChange(e) {
      this.formInline.current = 1;
      this.size = e;
      this.getListCustomer();
    },
    pageChange(e) {
      this.formInline.current = e;
      this.getListCustomer();
    },
    async getListCustomer() {
      const ret = await getListCustomer(this.formInline);
      if (ret && ret.code === 0) {
        this.tableData = ret.data.list;
        this.total = ret.data.total;
      }
    },
    prohibition(item) {
      if (item.isForbidden === 1) {
        this.$confirm(`您确定取消禁言?`, {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning"
        })
          .then(() => {
            removeCommentBlack({
              userPhone: item.userId,
              productId: this.formInline.groupId,
              productType: 41
            }).then(res => {
              if (res.code === 0) {
                this.$message({
                  message: "取消禁言成功",
                  showClose: false,
                  type: "success"
                });
                this.msgUserIdsObj[item.userId].forEach(item => {
                  item.isForbidden = 2;
                });
                this.modifyStateCallback({
                  userId: item.userId,
                  isForbidden: 2,
                  modifyType: 2
                });
              }
            });
          })
          .catch(() => {});
      } else {
        this.clickItem = item;
        const forbidSpeakRef = this.$refs.forbidSpeakRef;
        forbidSpeakRef.dialogFormVisible = true;
        forbidSpeakRef.formProhibition.userName = item.nickName;
        forbidSpeakRef.formProhibition.phone = item.userId;
        forbidSpeakRef.formProhibition.content = "";
      }
    },
    forbidSpeakCallback(userId) {
      this.clickItem[userId].forEach(item => {
        item.isForbidden = 1;
      });
    }
  }
};
</script>
<style lang="scss" scoped>
.module-content {
  margin-bottom: 20px;
  h4 {
    margin: 0;
    font-size: 18px;
  }
}
.table-area {
  padding: 20px;
}
.pagination-wrap {
  display: flex;
  justify-content: flex-end;
}
</style>