YNUtdPlatform/pages/YNEduApp/learnProj/learnProjDetail.vue

<template>
	<view class="page">
    <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>
            <uni-list-item
                v-for="(item, index) in theoryLearnList"
                :key="item.id"
                title="课程"
                :note="item.title"
                clickable
                :show-extra-icon="true"
                :extra-icon="learnIconObj"
                :rightText="item.percent + '%'"
                @click="toggleTheoryLearn(item.id)"
            >
<!--              <template v-slot:footer>
                <liu-progressbar
                    :progress="item.percent"
                    color="#000"
                    :height="'20rpx'"
                    bgColor="#1989FA"
                    :textInside="false"
                />
              </template>-->
            </uni-list-item>
          </uni-list>
        </uni-collapse-item>
        <uni-collapse-item title="理论练习">
          <uni-list>
            <uni-list-item
                v-for="(item, index) in theoryPracList"
                :key="item.id"
                title="练习"
                :note="item.title"
                rightText="未练习"
                clickable
                :show-extra-icon="true"
                :extra-icon="pracIconObj"
                @click="toggleTheoryPrac(item.id)"
            ></uni-list-item>
          </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-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>
        写评论
      </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: 5,
        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 },
          { title: '公猪的情绪安抚', id: 142 },
          { title: '母狗的二三情事', id: 143 },
          { title: '公狗的大顶绿帽', id: 144 },
        ],
        commentList: [
          { username: '王二', avatar: '/static/eduImg/avatar.jpg', cont: '写的什么东西' },
          { username: '张三', avatar: '/static/eduImg/avatar.jpg', cont: '我感觉写得挺好' },
          { username: '李四', avatar: '/static/eduImg/avatar.jpg', cont: '+3' },
        ]
			}
		},
		methods: {
      toggleTheoryLearn(id) {
        console.log(id)
      },
      toggleTheoryPrac(id) {
        console.log(id)
      },
		},
    onLoad(params) {
      this.projId = params.id
      console.log(this.projId)
    },
	}
</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;

      }

    }

    .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>