pbl-app/src/views/courseDetail/index.vue

<template>
  <div>
    <head-bar @back="back" v-if="routeType == 0">
      <template #title>
        <div class="navTitle">课程详情</div>
      </template>
    </head-bar>
    <div class="head-container" v-if="routeType == 1">
      <div class="head-box">
        <div class="navTitle">课程详情</div>
      </div>
    </div>
    <div class="courseBoxMes">
      <course-message
        :cDetail="courseDetail"
        :cInfo="chapInfo"
        :rwLength="rw"
        :cType="courseType"
        :cJson="courseTypeJson"
        :tName="Tname"
      ></course-message>
      <course-chap :chInfo="chapInfo" :brief="courseDetail.brief" @goCourse="goToStudy"></course-chap>
    </div>
    <div class="studyCss">
      <div style="stuButton" @click="goToStudy">点击学习</div>
    </div>
  </div>
</template>

<script>
import { getCourseDetail } from '@/api/courseDetail'
import headBar from '@/components/headBar.vue'
import courseMessage from './components/courseMessage.vue'
import courseChap from './components/courseChap.vue'
export default {
  components: {
    headBar,
    courseMessage,
    courseChap
  },
  data() {
    return {
      courseid: this.$route.query.courseid,
      courseDetail: {},
      routeType: 0,
      courseTypeJson: {},
      chapInfo: [],
      courseType: [],
      Tname: [],
      rw: 0
    }
  },
  methods: {
    back() {
      this.$router.push({ path: '/home' })
    },
    goToStudy() {
      // eslint-disable-next-line object-curly-spacing
      this.$router.push({ path: '/course', query: { courseid: this.courseid } })
    },
    getCourse() {
      const params = {
        courseId: this.courseid
      }
      getCourseDetail(params)
        .then(res => {
          this.courseDetail = res[0][0]
          var a = res[0]
          var b = res[1]
          var c = res[2]
          for (var i = 0; i < b.length; i++) {
            for (var j = 0; j < a.length; j++) {
              if (b[i].id === a[j].pid) {
                if (!this.courseTypeJson[b[i].name]) {
                  this.courseType.push(b[i].name)
                  this.courseTypeJson[b[i].name] = []
                }
                this.courseTypeJson[b[i].name].push(a[j].name)
              }
            }
          }
          this.Tname = []
          for (var k = 0; k < c.length; k++) {
            this.Tname.push(c[k].name)
          }
          this.chapInfo = JSON.parse(this.courseDetail.chapters)
          for (var z = 0; z < this.chapInfo.length; z++) {
            this.rw += this.chapInfo[z].chapterInfo[0].taskJson.length
          }
        })
        .catch(err => {
          console.error(err)
        })
    }
  },
  mounted() {
    console.log('type', this.$route.query)
    if (this.$route.query.urlType) {
      sessionStorage .setItem('urlType', this.$route.query.urlType)
    }

    this.routeType = sessionStorage .getItem('urlType')
    // console.log('hahahha',!localStorage.getItem('urlType'));
    // console.log('kakakaka', this.$store.getters.shareCourseId)
    // if (localStorage.getItem('urlType') == 1) {
    //   this.routeType = 1
    // } else {
    //   this.routeType = 0
    // }
    this.getCourse()
  }
}
</script>

<style lang="scss" scoped>
.courseBoxMes {
  height: 100vh;
  overflow: auto;
  padding: 0 0 60px;
  box-sizing: border-box;
}
.head-container {
  height: 55px;
  width: 100%;
  background-image: url(../../assets/images/course/head-back.png);
  position: fixed;
  top: 0;
  .back {
    width: 0.3rem;
    height: 0.3rem;
    border-top: 2px solid #fff;
    border-left: 2px solid #fff;
    position: absolute;
    transform: rotate(-45deg) translateY(-50%);
    top: 47%;
    left: 0.8rem;
    cursor: pointer;
  }
  .head-box {
    padding: 0 1.5rem;
    display: flex;
    width: 100%;
    height: 100%;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
  }
}
.navTitle {
  font-size: 16px;
  color: #fff;
}
.studyCss {
  height: 60px;
  border-top: 1px solid #dddddd;
  position: fixed;
  width: 100%;
  bottom: 0;
  background: #fff;
  > div {
    width: 90%;
    height: 40px;
    margin: 10px auto;
    text-align: center;
    color: #fff;
    background-image: linear-gradient(90deg, #477cd7, #65b9fc);
    line-height: 40px;
    border-radius: 10px;
  }
}
</style>