YNUtdPlatform/pages/YNEduApp/learnProj/learnProjDetail.vue

<template>
  <view class="page">
    <u-navbar title="学习项目" @leftClick="leftClick" placeholder />
    <view class="proj-cont">
      <h2 style="margin-bottom: 15rpx">{{ name }}</h2>
      <span style="font-size: 12px; color: #b0b0b0">合格标准：{{ eligibility }}</span>
      <view class="user-info">
        <view class="info-lef">
          <view class="avatar">
            <!-- <image src="/static/eduImg/avatar.jpg"></image> -->
            <span style="font-size: 18px">{{ createUserName }}</span>
          </view>
          <!-- <view style="display: flex; align-items: center">
            <l-starRate v-model="starRate" :disabled="true" style="margin-right: 1vw"></l-starRate>
            <span style="color: #ffca3e">{{ starRate }}.0</span>
          </view> -->
        </view>
        <view class="info-rig">
          <view class="rig-up">
            <view>
              培训内容
              <span>{{ listStageContentNum }}</span>
            </view>
            <!-- <view style="margin-left: 2vw">
              观看记录
              <span>28</span>
              <uni-icons style="color: #b0b0b0" type="right" size="12"></uni-icons>
            </view> -->
          </view>
          <!-- <view class="rig-dn">
            去评分
            <uni-icons style="color: #b0b0b0" type="right" size="12"></uni-icons>
          </view> -->
        </view>
      </view>
      <!-- <view class="tip">已开启进度同步，其他途径的学习进度已自动同步</view> -->
      <u-collapse>
        <div v-for="(stageItem, stageIndex) in listStage" :key="stageIndex" :title="stageItem.stageName">
          {{ stageItem.stageName }}
          <div v-for="(content, conIndex) in stageItem.listStageContent" :key="conIndex">
            <u-collapse-item title="素材" v-if="content.stageType == 1">
              <uni-list>
                <div
                  class="list-wrapper"
                  v-for="(item, index) in content.studyList"
                  :key="index"
                  @click="toggleTheoryLearn(item, content)"
                >
                  <div class="left-content">
                    <div class="title">
                      <u-icon name="/static/images/课程.png" size="15" />
                      <div style="margin: 0 15px 0 3px">素材</div>
                      <div>{{ item.totalTime }}</div>
                    </div>
                    <div class="note">{{ item.studyName }}</div>
                  </div>
                  <div class="right-content">
                    <div class="progress">
                      <u-line-progress :percentage="item.studyPercentage" :showText="false" activeColor="#579AF8" height="8" />
                    </div>
                    <div>{{ item.studyPercentage || 0 }}%</div>
                  </div>
                </div>
              </uni-list>
            </u-collapse-item>
            <u-collapse-item title="课程" v-if="content.stageType == 2">
              <uni-list>
                <div
                  class="list-wrapper"
                  v-for="(item, index) in content.studyList"
                  :key="index"
                >
                  <div class="left-content">
                    <div class="title">
                      <u-icon name="/static/images/课程.png" size="15" />
                      <div style="margin: 0 15px 0 3px">课程</div>
                      <div>{{ item.totalTime }}</div>
                    </div>
                    <div class="note">{{ item.studyName }}</div>
                  </div>
                  <div class="right-content">
                    <div class="progress">
                      <u-line-progress :percentage="item.studyPercentage" :showText="false" activeColor="#579AF8" height="8" />
                    </div>
                    <div>{{ item.studyPercentage || 0 }}%</div>
                  </div>
                </div>
              </uni-list>
            </u-collapse-item>

            <u-collapse-item title="练习" v-if="content.stageType == 3">
              <uni-list>
                <div class="list-wrapper" @click="toggleTheoryPrac(content)">
                  <div class="left-content">
                    <div class="title">
                      <u-icon name="/static/images/练习.png" size="15" />
                      <div style="margin: 0 15px 0 3px">练习</div>
                    </div>
                    <div class="note">{{ content.studyName }}</div>
                  </div>
                  <div class="right-content">
                    {{ content.practiceMsg && content.practiceMsg.recordId != null ? '未开始' : '已练习' }}
                  </div>
                </div>
              </uni-list>
            </u-collapse-item>

            <u-collapse-item title="考试" v-if="content.stageType == 4">
              <uni-list>
                <div class="list-wrapper" @click="toggleTheoryExam(content)">
                  <div class="left-content">
                    <div class="title">
                      <u-icon name="/static/images/考试.png" size="15" />
                      <div style="margin: 0 15px 0 3px">考试</div>
                      <div>{{ content.responseTime }}</div>
                    </div>
                    <div class="note">{{ content.name }}</div>
                  </div>
                  <div class="right-content">
                    {{ content.examMsg && content.examMsg.examNum != null ? '重考' : '未开始' }}
                  </div>
                </div>
              </uni-list>
            </u-collapse-item>
          </div>
        </div>
      </u-collapse>
    </view>
    <!-- <view class="comment-area">
      <h2 style="margin-bottom: 15rpx">最新评论 ({{ commentList.length }})</h2>
      <view class="write-cmt">
        <u--input
          ref="uInput"
          placeholder="写评论"
          prefixIcon="edit-pen"
          prefixIconStyle="font-size: 18px;color: #c0c4cc"
          placeholderStyle="font-size: 13px;color: #c0c4cc"
          border="none"
          maxlength="999"
          clearable
        />
      </view>
      <view class="cmts" v-for="(item, index) in commentList" :key="index">
        <view class="cmt-up">
          <image :src="item.avatar"></image>
          <span>{{ item.username }}</span>
        </view>
        <view class="cmt-dn">
          {{ item.cont }}
        </view>
      </view>
    </view> -->
    <!-- <view class="btm-sticky">
      <view class="icons">
        <view>
          <uni-icons style="color: #1989fa; margin-right: 1vw" type="chat-filled" size="24"></uni-icons>
          <span>23</span>
        </view>
        <view>
          <uni-icons style="color: #1989fa; margin-right: 1vw" type="hand-up-filled" size="24"></uni-icons>
          <span>12</span>
        </view>
      </view>
      <view class="learn-btn">继续学习</view>
    </view> -->
  </view>
</template>

<script>
import { getToken, getUserId } from '@/utils/auth'
import config from 'config'

export default {
  data() {
    return {
      projId: '',
      studyId: '', // 学习id
      starRate: 4,
      name: '',
      createUserName: '',
      listStageContentNum: 0,
      eligibility: '',
      learnIconObj: { color: '#1A63AC', size: '18', type: 'calendar' },
      pracIconObj: { color: '#38B022', size: '18', type: 'compose' },
      listStage: []
      // theoryLearnList: [
      //   { title: '高压电', id: 121, percent: 86 },
      //   { title: '氨基酸', id: 122, percent: 42 },
      //   { title: '维他命', id: 123, percent: 66 },
      //   { title: '电功率', id: 124, percent: 13 }
      // ],
      // theoryPracList: [
      //   { title: '物理练习', id: 141, ifPrac: false },
      //   { title: '魔法练习', id: 142, ifPrac: true },
      //   { title: '近战练习', id: 143, ifPrac: true },
      //   { title: '远程练习', id: 144, ifPrac: false }
      // ],
      // theoryExamList: [
      //   { title: '物理考试', id: 161, ifExam: false, time: '00:34:21' },
      //   { title: '魔法考试', id: 162, ifExam: true, time: '00:34:21' },
      //   { title: '近战考试', id: 163, ifExam: true, time: '00:34:21' },
      //   { title: '远程考试', id: 164, ifExam: false, time: '00:34:21' }
      // ],
      // commentList: [
      //   { username: '王二', avatar: '/static/eduImg/avatar.jpg', cont: '写的什么东西' },
      //   { username: '张三', avatar: '/static/eduImg/avatar.jpg', cont: '我感觉写得挺好' },
      //   { username: '李四', avatar: '/static/eduImg/avatar.jpg', cont: '+3' },
      //   {
      //     username: '孙笑川',
      //     avatar: '/static/eduImg/avatar.jpg',
      //     cont: '我着火了我着火了我着火了我着火了我着火了我着火了我着火了我着火了我着火了我着火了我着火了我着火了我着火了我着火了我着火了我着火了我着火了我着火了我着火了我着火了我着火了我着火了'
      //   }
      // ]
    }
  },
  onShow() {
    console.log('🚀 ~ onShow ~ ')
    // 刷新页面
    this.getStudyWorkAll()
  },
  onLoad(params) {
    this.projId = params.id
    console.log('🚀 ~ onLoad ~ this.projId:', this.projId)
    // console.log('Userid', getUserId())
    this.getStudyWorkAll()
  },
  methods: {
    // 获取学习项目详情
    async getStudyWorkAll() {
      let params = { userId: '31', id: this.projId, type: '1' }
      uni.request({
        method: 'post',
        url: config.bmwUrl + '/studyWork/StudyWorkAll',
        data: params,
        header: {
          'Content-Type': 'application/x-www-form-urlencoded',
          Authorization: getToken()
        },
        dataType: 'json',
        success: res => {
          console.log('🚀 ~ getStudyWorkAll ~ res:', res)
          this.studyId = res.data.id
          this.name = res.data.name
          this.createUserName = res.data.createUserName
          this.listStageContentNum = res.data.listStageContentNum
          this.eligibility = res.data.eligibility
          this.listStage = res.data.listStage
        }
      })
    },
    // 跳转素材
    toggleTheoryLearn(item, content) {
      console.log('🚀 ~ toggleTheoryLearn ~ content:',item, content)
      const params = {
        userId: uni.getStorageSync('userId'), // 用户id
        studyId: this.studyId, // 学习id
        stageId: content.stageId, // 阶段id
        stageContentId: content.id, // 阶段内容id
        stageType: content.stageType, // 阶段类型
        studyCourseId: content.forgeId || '',
        sourceId: item.id, // 素材id
        path: item.path, // 视频路径
        studyDuration: item.studyDuration || 0, // 学习时长
        allStudyDuration: item.allStudyDuration, // 总时长
      }
      console.log('🚀 ~ toggleTheoryLearn ~ params:', params)
      uni.navigateTo({
        url: '/pages/YNEduApp/learn/learn?params=' + JSON.stringify(params)
      })
    },
    // 跳转-课程
    toggleTheoryCourse(item) {
      console.log('🚀 ~ toggleTheoryCourse ~ item:', item)
    },
    // 跳转练习
    toggleTheoryPrac(item) {
      const params = {
        practiceId: item.practiceMsg.id, // 练习id
        title: item.practiceMsg.name,
        name: item.practiceMsg.name,
        studyId: this.studyId, // 学习id
      }
      uni.navigateTo({
        url: '/pages/YNEduApp/prac/pracDetail?params=' + JSON.stringify(params)
      })

      uni.removeStorageSync('from')
      uni.setStorageSync('from', '/pages/YNEduApp/learnProj/learnProjDetail')
    },
    // 跳转考试
    toggleTheoryExam(item) {
      console.log('🚀 ~ toggleTheoryExam ~ item:', item)
      const params = {
        id: item.examMsg.id, // 考试id
        cutNum: item.examMsg.isCut, // 切屏次数
        examNum: item.examMsg.examNum, // 考试次数
        examCount: item.examMsg.examCount, // 1: 不限次 2: 及格终止 3: 自定义
        examCustom: item.examMsg.examCustom, // 自定义次数
        studyId: this.studyId, // 学习id
        responseTime: item.examMsg.responseTime // 考试时长
      }
      console.log('🚀 ~ toggleTheoryExam ~ params:', params)
      uni.navigateTo({
        url: '/pages/YNEduApp/exam/beforeExam?params=' + JSON.stringify(params)
      })
      uni.removeStorageSync('from')
      uni.setStorageSync('from', '/pages/YNEduApp/learnProj/learnProjDetail')
    },
    leftClick() {
      uni.navigateTo({
        url: '/pages/YNEduApp/learnProj/learnProj'
      })
    }
  }
}
</script>

<style lang="scss">
.page {
  width: 100vw;
  background-color: #f8f8f8;
  box-sizing: border-box;
  padding: 5vw;
  position: relative;

  .proj-cont {
    width: 100%;
    box-sizing: border-box;
    padding: 30rpx 20rpx;
    background-color: #fff;
    border-radius: 20rpx;
    display: flex;
    flex-direction: column;
    box-shadow: #f4f4f4 2px 2px;

    .user-info {
      width: 100%;
      height: 8vh;
      display: flex;
      margin-top: 2vh;

      .info-lef {
        width: 35%;
        height: 100%;
        display: flex;
        flex-direction: column;
        justify-content: space-around;

        .avatar {
          width: 100%;
          display: flex;
          align-items: center;

          image {
            width: 60rpx;
            height: 60rpx;
            border-radius: 50%;
            margin-right: 1.5vw;
          }
        }
      }

      .info-rig {
        flex: 1;
        display: flex;
        flex-direction: column;
        justify-content: space-around;
        box-sizing: border-box;
        color: #b0b0b0;

        .rig-up {
          display: flex;
          align-items: center;

          view {
            span {
              padding: 0 1vw;
            }
          }
        }
      }
    }

    .tip {
      width: 100%;
      margin: 2vh auto;
      background-color: #f7f7f7;
      font-size: 12px;
      color: #9b9b9b;
      display: flex;
      justify-content: center;
      align-items: center;
      box-sizing: border-box;
      padding: 25rpx 15rpx;
    }
    .collapse-item {
      /* height: 400px; */
      overflow: auto;
    }

    .list-wrapper {
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: 20px 10px;
      border-bottom: 1px solid #f0f0f0;
      font-size: 12px;
      color: #b0b0b0;
      /* height: 400px; */
      overflow: auto;
      .left-content {
        .title {
          display: flex;
          align-items: center;
        }
        .note {
          margin-top: 10px;
          font-size: 14px;
          color: #333;
        }
      }
      .right-content {
        display: flex;
        align-items: center;
        .progress {
          width: 100px;
          margin-right: 5px;
        }
      }
    }
  }

  .comment-area {
    width: 100%;
    box-sizing: border-box;
    margin: 1vh auto;
    padding: 30rpx 20rpx 5vh 20rpx;
    background-color: #fff;
    border-radius: 20rpx;
    display: flex;
    flex-direction: column;
    box-shadow: #f4f4f4 2px 2px;

    .write-cmt {
      width: 100%;
      margin: 2vh auto;
      background-color: #f7f7f7;
      font-size: 12px;
      color: #9b9b9b;
      display: flex;
      align-items: center;
      box-sizing: border-box;
      padding: 15rpx;
    }

    .cmts {
      width: 100%;
      display: flex;
      flex-direction: column;
      margin-bottom: 2vh;

      .cmt-up {
        display: flex;
        align-items: center;
        font-weight: bold;

        image {
          width: 60rpx;
          height: 60rpx;
          border-radius: 50%;
          margin-right: 2vw;
        }
      }

      .cmt-dn {
        box-sizing: border-box;
        padding-left: calc(60rpx + 2vw);
      }
    }
  }

  .btm-sticky {
    position: fixed;
    left: 0;
    bottom: 0;
    width: 100%;
    height: 8vh;
    background-color: #fff;
    border-top: 1px solid #d8d8d8;
    display: flex;
    justify-content: space-between;
    align-items: center;
    box-sizing: border-box;
    padding: 0 5vw;

    .icons {
      width: 40%;
      display: flex;
      justify-content: space-between;

      view {
        display: flex;
        align-items: center;

        span {
          font-size: 16px;
          color: #1a89fa;
          font-weight: bold;
        }
      }
    }

    .learn-btn {
      width: 30%;
      height: 60%;
      background-color: #1a89fa;
      color: #fff;
      display: flex;
      justify-content: center;
      align-items: center;
      font-size: 14px;
      border-radius: 50rpx;
    }
  }
}
</style>