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">这是标题</h2>
      <span style="font-size: 12px; color: #b0b0b0">合格标准：学习进度完成100%，考试及格一场，练习通过一场</span>
      <view class="user-info">
        <view class="info-lef">
          <view class="avatar">
            <image src="/static/eduImg/avatar.jpg"></image>
            <span style="font-size: 18px">马晓峰</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>6</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>
export default {
  data() {
    return {
      projId: '',
      starRate: 4,
      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(this.projId)
  },
  methods: {
    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>