pbl-student-table/src/components/liveRoom.vue

<template>
  <div class="pb_content">
    <div class="pb_content_body">
      <div class="body_student">
        <div class="student_head">
          <div class="box_course">
            <div class="wheel">
              <img
                :src="
                  studentMessage.headportrait != null
                    ? studentMessage.headportrait
                    : tx
                "
                alt=""
              />
            </div>
            <div class="right_box">
              <div class="right_box_title">
                {{ studentMessage.name ? studentMessage.name : "暂无名称" }}
              </div>
              <div class="people">
                <div>
                  <span>班级：</span
                  ><span>{{
                    studentMessage.cname ? studentMessage.cname : "暂无班级"
                  }}</span>
                </div>
                <div style="margin-left: 50px">
                  <span>所属组织：</span
                  ><span>{{
                    studentMessage.sname ? studentMessage.sname : "暂无学校"
                  }}</span>
                </div>
              </div>
              <div>
                <span>手机号码：</span
                ><span>{{
                  studentMessage.phonenumber
                    ? studentMessage.phonenumber
                    : "暂无手机号"
                }}</span>
              </div>
            </div>
          </div>
        </div>
        <div class="student_body">
          <div class="myProject">我的项目</div>
          <div class="project_box">
            <div
              class="three_box_inthis"
              v-for="(item, index) in myCourse"
              :key="index"
            >
              <div
                class="project"
                @click="
                  goTo(
                    '/liveProjectDetail?courseId=' +
                      item.id +
                      '&userid=' +
                      userid +
                      '&oid=' +
                      oid
                  )
                "
              >
                <!-- <img
                  :src="
                    item.cover != null && item.cover != ''
                      ? JSON.parse(item.cover)[0].url
                      : mpj
                  "
                  alt=""
                /> -->
                <img :src="item.poster ? item.poster : mpj" alt="" />
              </div>
              <div class="projct_nav">
                <div style="font-size: 18px">
                  {{ item.name }}
                </div>
                <div>
                  <span style="color: #999">{{ item.time }}</span>
                </div>
              </div>
              <!-- <div class="three_bottom">
                <div
                  @click="
                    goTo(
                      '/liveProjectDetail?courseId=' +
                        item.id +
                        '&userid=' +
                        userid +
                        '&oid=' +
                        oid
                    )
                  "
                >
                  课前预习
                </div>
                <div
                  @click="
                    goTo(
                      '/liveProjectDetail?courseId=' +
                        item.id +
                        '&userid=' +
                        userid +
                        '&oid=' +
                        oid
                    )
                  "
                >
                  开始上课
                </div>
                <div
                  @click="
                    goTo(
                      '/liveProjectDetail?courseId=' +
                        item.id +
                        '&userid=' +
                        userid +
                        '&oid=' +
                        oid
                    )
                  "
                >
                  课后复习
                </div>
              </div> -->
            </div>
          </div>
          <div class="student_page">
            <el-pagination
              background
              layout="prev, pager, next"
              :page-size="10"
              :total="total"
              v-if="page && myCourse.length"
              style="padding-bottom: 20px"
              @current-change="handleCurrentChange"
            ></el-pagination>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      myCourse: [
        // {
        //   cover: [],
        //   courseid: "9a4e8dbe-132e-438e-97db-b07eb01fa04c",
        //   title: "introduce a festival (Final)",
        //   chapters: [],
        //   createTime: this.getNowTime(),
        // },
      ],
      studentMessage: [],
      tx: require("../assets/avatar.png"),
      mpj: require("../assets/icon/pptImg2.png"),
      userid: this.$route.query.userid,
      oid: this.$route.query.oid,
      classid: this.$route.query.classid,
      loading: "",
      page: 1,
      total: 0,
    };
  },
  methods: {
    goTo(path) {
      this.$router.push(path);
    },
    getNowTime() {
      const yy = new Date().getFullYear();
      const MM =
        new Date().getMonth() + 1 < 10
          ? "0" + (new Date().getMonth() + 1)
          : new Date().getMonth() + 1;
      const dd =
        new Date().getDate() < 10
          ? "0" + new Date().getDate()
          : new Date().getDate();
      const HH =
        new Date().getHours() < 10
          ? "0" + new Date().getHours()
          : new Date().getHours();
      const mm =
        new Date().getMinutes() < 10
          ? "0" + new Date().getMinutes()
          : new Date().getMinutes();
      const ss =
        new Date().getSeconds() < 10
          ? "0" + new Date().getSeconds()
          : new Date().getSeconds();
      return yy + "-" + MM + "-" + dd + " " + HH + ":" + mm + ":" + ss;
    },
    selectSDetail() {
      let params = {
        uid: this.userid,
      };
      this.ajax
        .get(this.$store.state.api + "selectSDetail", params)
        .then((res) => {
          this.studentMessage = res.data[0][0];
        })
        .catch((err) => {
          this.isLoading = false;
          console.error(err);
        });
    },
    handleCurrentChange(val) {
      // console.log(`当前页: ${val}`);
      this.page = val;
      this.getData();
    },
    getData() {
      if (!this.loading) {
        this.loading = this.openLoading(document.querySelector(".project_box"));
      }

      let params = {
        oid: this.oid,
        cid: this.classid,
        page: this.page,
      };
      this.ajax
        .get(this.$store.state.api + "getRealTimeClassStu", params)
        .then((res) => {
          this.loading.close();
          this.loading = "";
          this.total = res.data[0].length > 0 ? res.data[0][0].num : 0;
          this.myCourse = res.data[0];
        })
        .catch((err) => {
          this.loading.close();
          this.loading = "";
          console.error(err);
        });
    },
  },
  created() {
    this.selectSDetail();
    this.page = 1;
    this.getData();
    document.scrollingElement.scrollTop = 0;
  },
};
</script>

<style scoped>
.body_student {
  margin: 0px auto;
  width: 98%;
  height: 100%;
}
.student_head {
  width: 100%;
  margin: 0 auto;
  height: 30%;
  background-image: linear-gradient(90deg, #30c499, #75ceba);
  color: #fff;
}
.wheel > img,
.project > img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}
.box_course {
  display: flex;
  padding: 35px 0 25px 60px;
  align-items: center;
}
.wheel {
  width: 210px;
}
.right_box {
  display: flex;
  flex-direction: column;
  margin-left: 30px;
  /* justify-content: space-around; */
}
.right_box_title {
  font-size: 23px;
}
.people {
  display: flex;
  margin: 30px 0 20px 0px;
}
.student_body {
  width: 100%;
  margin: 0 auto;
  background: #fff;
  margin-top: 20px;
  padding: 0 0 20px;
  min-height: 1000px;
}
.project {
  width: 100%;
  height: 150px;
  overflow: hidden;
  cursor: pointer;
}
.project_box {
  display: flex;
  width: 100%;
  flex-direction: row;
  flex-wrap: wrap;
}
.three_box_inthis {
  display: flex;
  width: 300px;
  flex-direction: column;
  align-items: flex-start;
  border: 1px solid #ccc;
  margin: 15px;
}
.projct_nav {
  padding-left: 5px;
  display: flex;
  flex-direction: column;
  flex-wrap: nowrap;
  justify-content: space-around;
  width: 100%;
  box-sizing: border-box;
}

.projct_nav > div:nth-child(1) {
  cursor: pointer;
}

.projct_nav > div {
  margin-bottom: 5px;
}

.myProject {
  padding: 20px 20px 10px 0;
  border-bottom: 1px solid #ccc;
  margin-left: 20px;
  width: 95%;
}

.three_bottom {
  display: flex;
  flex-direction: row;
  justify-content: space-around;
  height: 40px;
  align-items: center;
  background: #f5f4f4;
  font-size: 14px;
  width: 100%;
  margin-bottom: 0;
}
.three_bottom > div {
  cursor: pointer;
}
</style>