144 lines
3.9 KiB
Vue
144 lines
3.9 KiB
Vue
<template>
|
|
<view>
|
|
<Navbar title="学习任务" :showHome="true" />
|
|
<div class="content">
|
|
<ProSelect v-if="this.userType != '00'" @selectPro="selectPro" />
|
|
<div class="item" v-for="(item, index) in list" :key="index" @click="handleItem(item)">
|
|
<div class="item-wrapper">
|
|
<u--image :src="item.url" width="80" height="80" radius="5"></u--image>
|
|
<div class="item-content">
|
|
<div class="item-title">{{ item.name }}</div>
|
|
<div class="progress">
|
|
<u-line-progress
|
|
:percentage="item.learningProgress || 0"
|
|
:showText="false"
|
|
activeColor="#1989FA"
|
|
height="10"
|
|
/>
|
|
<div style="margin: 5px 0">学习进度：{{ item.learningProgress || 0 }}%</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="item-time">{{ item.learningDate }}</div>
|
|
</div>
|
|
<div style="height: 30px;"></div>
|
|
<u-divider text="暂无数据" v-if="list.length == 0"></u-divider>
|
|
</div>
|
|
</view>
|
|
</template>
|
|
|
|
<script>
|
|
import { getLearningTaskList } from '@/api/educationTraining'
|
|
import config from '@/config'
|
|
import ProSelect from 'pages/component/Proselect'
|
|
|
|
export default {
|
|
components: { ProSelect },
|
|
data() {
|
|
return {
|
|
// 列表数据
|
|
list: [],
|
|
userType: uni.getStorageSync('userInfo').userType // 用户类型
|
|
}
|
|
},
|
|
onShow() {
|
|
this.$nextTick(() => {
|
|
console.log('onShow-学习任务', this.userType)
|
|
if (this.userType == '00') {
|
|
this.getLearningTaskList()
|
|
} else {
|
|
}
|
|
})
|
|
},
|
|
onLoad() {
|
|
// this.getLearningTaskList()
|
|
},
|
|
methods: {
|
|
// 点击列表项
|
|
handleItem(item) {
|
|
console.log('item', item)
|
|
// learningDate 为学习期限 2021-10-01 ~ 2021-10-31, 不在期限内不可学习
|
|
const startDate = item.learningDate.split(' ~ ')[0]
|
|
const endDate = item.learningDate.split(' ~ ')[1] + ' 23:59:59'
|
|
const now = new Date().getTime()
|
|
if (now < new Date(startDate).getTime() || now > new Date(endDate).getTime()) {
|
|
uni.showToast({
|
|
title: '不在学习期限内',
|
|
icon: 'none'
|
|
})
|
|
return
|
|
}
|
|
const params = {
|
|
id: item.id,
|
|
name: item.name,
|
|
learningDate: item.learningDate
|
|
}
|
|
uni.navigateTo({
|
|
url: '/pages/learningTasks/learningTasksDetails?params=' + JSON.stringify(params)
|
|
})
|
|
},
|
|
// 获取学习任务列表
|
|
async getLearningTaskList(params = { userType: this.userType }) {
|
|
const res = await getLearningTaskList(params)
|
|
console.log('res', res)
|
|
this.list = res.data
|
|
this.list.forEach(item => {
|
|
item.filePath = item.filePath.replace(/\\/g, '/')
|
|
item.url = config.fileUrl2 + item.filePath
|
|
})
|
|
console.log('🚀 ~ getLearningTaskList ~ this.list:', this.list)
|
|
},
|
|
// 选择工程
|
|
selectPro(pro) {
|
|
console.log('🚀 ~ selectPro ~ 选择工程:', pro)
|
|
this.getLearningTaskList({ proId: pro.proId, userType: this.userType })
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style lang="scss" scoped>
|
|
.content {
|
|
padding: 0 20px;
|
|
font-size: 12px;
|
|
word-wrap: break-word; // 自动换行
|
|
word-break: break-all; // 强制换行
|
|
|
|
.item {
|
|
padding: 10px;
|
|
height: 100px;
|
|
background: #f4f9fe;
|
|
border-radius: 5px;
|
|
margin-bottom: 20px;
|
|
display: flex;
|
|
justify-content: space-between;
|
|
flex-direction: column;
|
|
|
|
.item-wrapper {
|
|
display: flex;
|
|
justify-content: flex-start;
|
|
|
|
.item-content {
|
|
width: 49%;
|
|
margin-left: 10px;
|
|
display: flex;
|
|
justify-content: space-between;
|
|
flex-direction: column;
|
|
.item-title {
|
|
font-size: 16px;
|
|
color: #333;
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
white-space: nowrap;
|
|
}
|
|
}
|
|
}
|
|
|
|
.item-time {
|
|
text-align: right;
|
|
color: #676767;
|
|
}
|
|
}
|
|
}
|
|
</style>
|