pbl-teacher-table/src/components/pages/GridList.vue

<template>
  <div class="pb_content g_body">
    <div class="topBg">
      <div class="wordIcon">
        <div class="docImg">
          <img src="../../assets/icon/word/gridIcon.png" alt="" />
        </div>
        <div>思维网格</div>
      </div>
      <div class="searchRoom">
        <div class="firstTop">
          <input
            type="text"
            placeholder="输入房间名称/号码...."
            v-model="roomS"
          />
          <div @click="getRoomList">确定</div>
        </div>
        <div class="lastTop">
          <div class="notice">
            <img src="../../assets/icon/word/notice.png" alt="" />
          </div>
          <div>若找不到房间，输入房间号或名称进行搜索哦！</div>
        </div>
      </div>
      <div class="addOrCreateRoom">
        <div @click="dialogVisible = true">加入房间</div>
        <div
          v-if="tType == '1'"
          @click="
            goTo(
              '/Grid?userid=' +
                userid +
                '&oid=' +
                oid +
                '&cid=' +
                cid +
                '&tType=' +
                tType
            )
          "
        >
          创建房间
        </div>
      </div>
    </div>
    <div class="roomBox">
      <div class="roomDiv" v-for="(r, rIndex) in roomList" :key="rIndex">
        <div class="roomImg">
          <img src="../../assets/icon/word/noImg.png" alt="" />
        </div>
        <div class="roomName">
          <div>{{ r.name ? r.name : "暂无房间名称" }}</div>
          <div>房间号 {{ r.num }}</div>
        </div>
        <div class="enterRoom" @click="enterRoom(r.num)">进入房间</div>
      </div>
      <div v-if="roomList.length == 0" class="noRoom">
        <img src="../../assets/icon/word/noRoom.png" alt="" />
      </div>
    </div>

    <el-dialog
      title="加入房间"
      class="addOrCreateRoom"
      :visible.sync="dialogVisible"
      :append-to-body="true"
      width="500px"
      :before-close="handleClose"
    >
      <div slot="title" class="header-title">
        <div class="title_add_student">加入房间</div>
      </div>
      <div class="addRoom_box">
        <div class="inputBox">
          <el-input
            v-model="goNum"
            placeholder="请输入要加入的房间号"
          ></el-input>
          <div class="room_b">
            备注：输入房间号点击加入房间或点击创建房间直接创建房间
          </div>
          <div class="room_btn">
            <el-button
              class="roomBtn"
              type="primary"
              @click="
                goTo(
                  '/Grid?userid=' +
                    userid +
                    '&oid=' +
                    oid +
                    '&cid=' +
                    cid +
                    '&tType=' +
                    tType +
                    '&goNum=' +
                    goNum
                )
              "
              >加入房间</el-button
            >
            <!-- <el-button class="roomBtn" type="primary" @click="goRoom(goNum)"
              >加入房间</el-button
            >
            <el-button class="roomBtn" type="primary" @click="checkNum"
              >创建房间</el-button
            > -->
          </div>
        </div>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import Clipboard from "clipboard";
import draggable from "vuedraggable";
export default {
  components: {
    //调用组件
    draggable,
  },
  data() {
    return {
      dialogVisible: false,
      goNum: "",
      roomList: [],
      copyText: "",
      userid: this.$route.query.userid,
      oid: this.$route.query.oid,
      cid: this.$route.query.cid,
      tType: this.$route.query.tType,
      roomS: "",
    };
  },
  methods: {
    goTo(path) {
      this.$router.push(path);
    },
    copy() {
      this.copyText =
        this.$refs.inviteT.innerHTML +
        "\n" +
        this.$refs.invite1.innerHTML +
        "\n" +
        this.$refs.invite2.innerHTML +
        "\n" +
        this.$refs.invite3.innerText +
        "\n" +
        this.$refs.invite4.innerHTML;
      var clipboard = new Clipboard(".tag-read");
      clipboard.on("success", (e) => {
        this.$message.success("复制成功");
        console.log("复制成功");
        clipboard.destroy(); // 释放内存
      });
      clipboard.on("error", (e) => {
        console.log("不支持复制,该浏览器不支持自动复制");
        clipboard.destroy(); // 释放内存
      });
    },
    handleClose(done) {
      done();
    },
    getRoomList() {
      let params = {
        uid: this.userid,
        oid: this.oid,
        cid: this.cid,
        cu: "",
        cn: this.roomS,
      };
      this.ajax
        .get(this.$store.state.api + "selectRoomList", params)
        .then((res) => {
          this.roomList = res.data[0];
        })
        .catch((err) => {
          console.error(err);
        });
    },
    enterRoom(num) {
      this.goNum = num;
      this.goTo(
        "/Grid?userid=" +
          this.userid +
          "&oid=" +
          this.oid +
          "&cid=" +
          this.cid +
          "&tType=" +
          this.tType +
          "&goNum=" +
          this.goNum
      );
    },
  },

  created() {
    this.getRoomList();
  },
};
</script>

<style scoped>
.g_body {
  width: 100%;
  height: 100%;
  margin: 0 !important;
  background: #e6eaf0;
}

.topBg {
  background: url("../../assets/icon/word/topBg.png");
  width: 100%;
  object-fit: cover;
  height: 220px;
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  align-items: center;
  justify-content: space-between;
  background-size: 100% 100%;
}

.wordIcon {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  align-items: center;
  margin: 0 0 100px 45px;
}

.docImg {
  width: 40px;
  height: 40px;
}

.docImg > img,
.notice > img,
.roomImg > img,
.noRoom > img {
  width: 100%;
  height: 100%;
}

.notice {
  width: 20px;
  height: 20px;
}

.wordIcon > div:nth-child(2) {
  font-size: 20px;
  color: #fff;
  margin-left: 10px;
}

.addOrCreateRoom {
  margin: 0 45px 100px 0;
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  align-items: center;
}

.addOrCreateRoom > div {
  width: 90px;
  background: #199cfe;
  height: 30px;
  color: #fff;
  border-radius: 5px;
  text-align: center;
  line-height: 30px;
  font-size: 12px;
  cursor: pointer;
}

.addOrCreateRoom > div:nth-child(2) {
  margin-left: 20px;
}

.searchRoom {
  margin-top: 100px;
}

.firstTop {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  align-items: center;
}

.firstTop > input {
  width: 350px;
  height: 40px;
  outline: none;
  border: none;
  border-radius: 5px;
  text-indent: 10px;
}

.firstTop > div {
  width: 65px;
  background: #5e5e5e;
  color: #fff;
  height: 40px;
  text-align: center;
  line-height: 40px;
  border-radius: 5px;
  margin-left: 15px;
  cursor: pointer;
}

.lastTop {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  align-items: center;
  margin-top: 10px;
  color: #fff;
}

.roomBox {
  width: 98%;
  margin: 20px 0 0 20px;
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: flex-start;
  align-items: center;
}

.roomDiv {
  border-radius: 5px;
  background: #fff;
  width: 250px;
  position: relative;
  height: 260px;
  margin: 0 30px 30px 0;
}

.roomNumer {
  position: absolute;
  right: 8px;
  color: #bababa;
  top: 2px;
}

.roomImg {
  width: 250px;
  margin: 0 auto;
}

.roomName {
  display: flex;
  flex-direction: column;
  flex-wrap: nowrap;
  align-items: flex-start;
  padding: 15px 10px;
}

.roomName > div:nth-child(1) {
  font-size: 15px;
}

.roomName > div:nth-child(2) {
  color: #bdbdbd;
  padding-top: 5px;
  font-size: 12px;
}

.enterRoom {
  background: #3e86ff;
  width: 80%;
  text-align: center;
  margin: 0 auto;
  height: 35px;
  line-height: 35px;
  color: #fff;
  border-radius: 3px;
  cursor: pointer;
}

body::-webkit-scrollbar {
  /*滚动条整体样式*/
  width: 6px;
  /*高宽分别对应横竖滚动条的尺寸*/
  height: 6px;
}
.addOrCreateRoom >>> .el-dialog {
  height: 200px;
}
.addOrCreateRoom >>> .el-dialog__header {
  background: #32455b;
  color: #fff;
  height: 40px;
  line-height: 40px;
  padding: 0 0 0 20px;
}
.addOrCreateRoom >>> .el-dialog__headerbtn {
  top: 13px !important;
}
.addOrCreateRoom >>> .el-dialog__body {
  background: #f3f3f3;
  height: 100%;
}
.addRoom_box {
  background: #fff;
  width: 100%;
  height: 100%;
  position: relative;
}
.inputBox {
  padding: 30px 0 0 20px;
}
.inputBox >>> .el-input {
  width: 95% !important;
}
.room_b {
  margin: 10px 0;
}
.room_btn {
  position: absolute;
  bottom: 35px;
  left: 39%;
}
.noRoom {
  margin: 10% auto 0;
}
</style>