zbAdmin/src/views/circle/detail/index.vue

<template>
  <div class="app-container">
    <div class="circle-change">
      <h3>圈子消息</h3>
      <el-form :inline="true" size="mini" :model="formInline" class="my-form">
        <el-form-item label="">
          <el-select v-model="formInline.region" placeholder="团队">
            <el-option label="区域一" value="shanghai"></el-option>
            <el-option label="区域二" value="beijing"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="">
          <el-select v-model="formInline.region" placeholder="主播">
            <el-option label="区域一" value="shanghai"></el-option>
            <el-option label="区域二" value="beijing"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="">
          <el-select v-model="formInline.region" placeholder="圈子">
            <el-option label="区域一" value="shanghai"></el-option>
            <el-option label="区域二" value="beijing"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="onSubmit">切换</el-button>
        </el-form-item>
      </el-form>
    </div>
    <div class="circle-main">
      <div class="circle-main-header">
        <div class="circle-info">
          <img src="" alt="" />
          <div>
            <h4>独立团专栏</h4>
            <p>这里是介绍这是介绍是的是的</p>
          </div>
        </div>
        <div class="circle-set">
          <div class="set-item-wrap">
            <div class="set-item mb10">
              <label>开放观众发言：</label>
              <el-switch v-model="value1"> </el-switch>
            </div>
            <div class="set-item">
              <label>先审后发：</label>
              <el-switch v-model="value1"> </el-switch>
            </div>
          </div>
          <div class="set-item-wrap">
            <div class="set-item mb10">
              <label>隐藏用户昵称：</label>
              <el-switch v-model="value1"> </el-switch>
            </div>
            <div class="set-item">
              <label>隐藏圈子人数：</label>
              <el-switch v-model="value1"> </el-switch>
            </div>
          </div>
          <el-badge is-dot class="item">
            <img
              class="icon"
              @click="setNotice"
              src="@/assets/images/trumpet.png"
              alt=""
            />
          </el-badge>
          <img
            class="icon"
            src="@/assets/images/data.png"
            alt=""
            @click="$router.push('/circle/data')"
          />
        </div>
      </div>
      <div class="circle-content">
        <div class="circle-interact" v-if="chatType === 1">
          <div class="circle-interact-header">
            <ul class="tabs">
              <li class="active">老师</li>
              <li>全部</li>
              <li>精选</li>
            </ul>
            <el-form
              :inline="true"
              size="mini"
              :model="formInline"
              class="my-form"
            >
              <el-form-item label="">
                <el-input placeholder="请输入内容搜索" />
              </el-form-item>
              <el-form-item>
                <el-button type="primary" @click="onSubmit">搜索</el-button>
              </el-form-item>
            </el-form>
          </div>
          <newsList />
        </div>
        <privateChat v-else @closePrivateChat="() => (chatType = 1)" />
        <div class="circle-user">
          <ul class="tabs">
            <li
              :class="[userTabIndex === 0 ? 'active' : '']"
              @click="userTabIndex = 0"
            >
              用户互动
            </li>
            <li
              :class="[userTabIndex === 1 ? 'active' : '']"
              @click="userTabIndex = 1"
            >
              用户列表
            </li>
            <li
              :class="[userTabIndex === 2 ? 'active' : '']"
              @click="userTabIndex = 2"
            >
              私聊列表
            </li>
            <li :class="[userTabIndex === 3 ? 'active' : '']">禁言列表</li>
          </ul>
          <userLnteractList v-if="userTabIndex === 0" />
          <userList v-if="userTabIndex === 1" />
          <privateList
            v-if="userTabIndex === 2"
            @toPrivateChat="toPrivateChat"
          />
        </div>
      </div>
    </div>
    <div class="quote">
      <div class="quote-content">
        <label>用户：</label>
        <p>萨达鲁大师克拉岛奥德赛拉</p>
        <p>[图片]</p>
      </div>
      <i class="el-icon-close"></i>
    </div>
    <messageSend />
  </div>
</template>
<script>
import newsList from "./components/newsList.vue";
import userLnteractList from "./components/userLnteractList.vue";
import userList from "./components/userList.vue";
import privateList from "./components/privateList";
import messageSend from "./components/messageSend.vue";
import privateChat from "./components/privateChat.vue";
export default {
  components: {
    newsList,
    userLnteractList,
    userList,
    privateList,
    messageSend,
    privateChat
  },
  data() {
    return {
      formInline: {},
      userTabIndex: 0,
      chatType: 1
    };
  },
  methods: {
    setNotice() {
      this.$prompt("", "圈子公告", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        inputType: "textarea",
        inputPlaceholder: "请输入公告内容，500字以内"
      })
        .then(({ value }) => {
          this.$message({
            type: "success",
            message: "你的邮箱是: " + value
          });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "取消输入"
          });
        });
    },
    toPrivateChat() {
      this.chatType = 2;
    }
  }
};
</script>
<style lang="scss" scoped>
.my-form {
  ::v-deep .el-form-item--mini.el-form-item {
    margin-bottom: 0;
  }
}
.circle-change {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 16px;
  h3 {
    margin: 0;
    font-size: 16px;
  }
}
.circle-main-header {
  align-items: center;
  padding: 8px 10px;
  display: flex;
  justify-content: space-between;
  background-color: rgba(134, 134, 134, 0.1);
  margin-bottom: 10px;
  .circle-info {
    display: flex;
    align-items: center;
    img {
      width: 50px;
      height: 50px;
      border-radius: 50%;
      margin-right: 10px;
    }
    h4 {
      margin: 0 0 10px;
      font-size: 14px;
    }
    p {
      font-size: 14px;
      color: #999;
      margin: 0;
    }
  }
  .circle-set {
    display: flex;
    align-items: center;
    .set-item {
      display: flex;
      align-items: center;
      justify-content: end;
      margin-left: 5px;
      &.mb10 {
        margin-bottom: 6px;
      }
      label {
        color: #666;
        font-size: 14px;
      }
    }
    .icon {
      width: 30px;
      height: 30px;
      margin-left: 16px;
      cursor: pointer;
    }
  }
}
.circle-content {
  display: flex;
  background-color: rgba(134, 134, 134, 0.1);
  padding: 0 10px 10px;
  .circle-interact {
    display: flex;
    flex-direction: column;
    flex: 1;
    .circle-interact-header {
      display: flex;
      align-items: center;
      justify-content: space-between;
      .tabs {
        list-style: none;
        display: flex;
        padding: 10px;
        margin: 0;
        li {
          padding: 4px 10px;
          font-size: 14px;
          color: #666;
          cursor: pointer;
          &.active {
            color: #000;
            font-weight: bold;
          }
        }
      }
    }
  }
  .circle-user {
    width: 420px;
    margin-left: 10px;
    .tabs {
      list-style: none;
      display: flex;
      padding: 10px 0;
      margin: 0;
      li {
        flex: 1;
        padding: 4px 10px;
        font-size: 14px;
        color: #666;
        cursor: pointer;
        &.active {
          color: #1990ff;
          font-weight: bold;
        }
      }
    }
  }
}
.quote {
  display: flex;
  justify-content: space-between;
  background: rgba(155, 155, 155, 0.2);
  padding: 10px;
  .quote-content {
    display: flex;
  }
  i {
    cursor: pointer;
  }
}
</style>