462 lines
13 KiB
Vue
462 lines
13 KiB
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>
|