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>
      <uni-collapse>
        <uni-collapse-item title="理论学习">
          <uni-list>
            <div
              class="list-wrapper"
              v-for="(item, index) in theoryLearnList"
              :key="index"
              @click="toggleTheoryLearn(item.id)"
            >
              <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.time }}</div>
                </div>
                <div class="note">{{ item.title }}</div>
              </div>
              <div class="right-content">
                <div class="progress">
                  <u-line-progress :percentage="item.percent" :showText="false" activeColor="#579AF8" height="8" />
                </div>
                <div>{{ item.percent }}%</div>
              </div>
            </div>
          </uni-list>
        </uni-collapse-item>
        <uni-collapse-item title="理论练习">
          <uni-list>
            <div
              class="list-wrapper"
              v-for="(item, index) in theoryPracList"
              :key="index"
              @click="toggleTheoryPrac(item.id)"
            >
              <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">{{ item.title }}</div>
              </div>
              <div class="right-content">{{ item.ifExam ? '已练习' : '未练习' }}</div>
            </div>
          </uni-list>
        </uni-collapse-item>
        <uni-collapse-item title="理论模拟考试">
          <uni-list>
            <div
              class="list-wrapper"
              v-for="(item, index) in theoryExamList"
              :key="index"
              @click="toggleTheoryExam(item.id)"
            >
              <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.time }}</div>
                </div>
                <div class="note">{{ item.title }}</div>
              </div>
              <div class="right-content">{{ item.ifExam ? '已完成' : '未完成' }}</div>
            </div>
          </uni-list>
        </uni-collapse-item>
        <uni-collapse-item title="实操题目练习">
          <uni-list>
            <uni-list-item title="练习" note="高压电取证理论学习" showArrow></uni-list-item>
          </uni-list>
        </uni-collapse-item>
      </uni-collapse>
    </view>
    <view class="comment-area">
      <h2 style="margin-bottom: 15rpx">最新评论 ({{ commentList.length }})</h2>
      <view class="write-cmt">
        <!-- <uni-icons style="color: #9b9b9b; margin-right: 1vw" type="compose" size="12"></uni-icons>
        写评论 -->
        <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 { studyWorkAll } from '@/api/eduApp'
import config from 'config'

export default {
  data() {
    return {
      projId: '',
      starRate: 4,
      name: '',
      createUserName: '',
      listStageContentNum: 0,
      eligibility: '',
      learnIconObj: { color: '#1A63AC', size: '18', type: 'calendar' },
      pracIconObj: { color: '#38B022', size: '18', type: 'compose' },
      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: '我着火了我着火了我着火了我着火了我着火了我着火了我着火了我着火了我着火了我着火了我着火了我着火了我着火了我着火了我着火了我着火了我着火了我着火了我着火了我着火了我着火了我着火了'
        }
      ]
    }
  },
  onLoad(params) {
    this.projId = params.id
    console.log('🚀 ~ onLoad ~ this.projId:', this.projId, config)
    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: 'Bearer' + uni.getStorageSync('App-Token')
      //   },
      //   dataType: 'json',
      //   success: res => {
      //     console.log('🚀 ~ getStudyWorkAll ~ res:', res)
      //   }
      // })

      const res = await studyWorkAll(params)
      this.name = res.name
      this.createUserName = res.createUserName
      this.listStageContentNum = res.listStageContentNum
      this.eligibility = res.eligibility

      console.log('🚀 ~ getStudyWorkAll ~ res:', res)
    },
    toggleTheoryLearn(id) {
      console.log(id)
      uni.navigateTo({
        url: '/pages/YNEduApp/learn/learn?id=' + id
      })
    },
    toggleTheoryPrac(id) {
      console.log(id)
      uni.navigateTo({
        url: '/pages/YNEduApp/prac/pracDetail?id=' + id
      })

      uni.removeStorageSync('from')
      uni.setStorageSync('from', '/pages/YNEduApp/learnProj/learnProjDetail')
    },
    toggleTheoryExam(id) {
      console.log(id)
      uni.navigateTo({
        url: '/pages/YNEduApp/exam/beforeExam?id=' + id
      })
      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;
    }

    .list-wrapper {
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: 20px 10px;
      border-bottom: 1px solid #f0f0f0;
      font-size: 12px;
      color: #b0b0b0;
      .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>