mirror of
https://codeup.aliyun.com/67762337eccfc218f6110e0e/vue/learning-system-mobile.git
synced 2025-12-11 03:46:47 +08:00
修改显示方式
This commit is contained in:
zhangsir
@@ -117,6 +117,15 @@
|
|||||||
}
|
}
|
||||||
|
|
||||||
}
|
}
|
||||||
|
,{
|
||||||
|
"path" : "pages/learnPath/growPage",
|
||||||
|
"style" :
|
||||||
|
{
|
||||||
|
"navigationBarTitleText": "",
|
||||||
|
"enablePullDownRefresh": false
|
||||||
|
}
|
||||||
|
|
||||||
|
}
|
||||||
],
|
],
|
||||||
"globalStyle": {
|
"globalStyle": {
|
||||||
"navigationBarTextStyle": "black",
|
"navigationBarTextStyle": "black",
|
||||||
|
|||||||
591
pages/learnPath/growPage.vue
Normal file
591
pages/learnPath/growPage.vue
Normal file
@@ -0,0 +1,591 @@
|
|||||||
|
<template>
|
||||||
|
<view>
|
||||||
|
<view class="learn" v-if="Object.keys(detailData).length">
|
||||||
|
<view class="learn_header">
|
||||||
|
<view class="learn_left">
|
||||||
|
<text class="text">我的成长路径</text>
|
||||||
|
<image @click="contentOn" src="../../static/images/learnpath/why.png" class="image"></image>
|
||||||
|
<view class="up_content" v-show="upContent">
|
||||||
|
<view class="text">根据您的归属组织、您所在岗位、职级，已为您自动匹配“{{detailData.growName || ''}}”，抓紧时间学习吧～</view>
|
||||||
|
<image @click="contentOut" class="down" src="../../static/images/learnpath/down.png" mode=""></image>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
<view class="learn_right">
|
||||||
|
<text class="text">什么是成长路径</text>
|
||||||
|
<image @click="onLearnModal" class="image" src="../../static/images/learnpath/whyWhite.png" mode=""></image>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
<view class="line"></view>
|
||||||
|
<view class="learn_body">
|
||||||
|
<view class="body_job">
|
||||||
|
<view class="name">{{detailData.growName || ''}}</view>
|
||||||
|
<view class="job">
|
||||||
|
<view class="text_name">{{detailData.organizationName || ''}}</view>
|
||||||
|
<text> 学习状态：<text :style="{color: ['#FFD500','#9FFF84','#FFFFFF '][detailData.studyStatus]}">{{detailData.studyStatus==0?'未开始':detailData.studyStatus==1?'已完成':'进行中'}}</text></text>
|
||||||
|
</view>
|
||||||
|
<!-- <view class="plan_item">
|
||||||
|
<image class="image" src="../../static/images/learnpath/file.png" mode=""></image>
|
||||||
|
<text class="text" @click="planDown = true">共享文档</text>
|
||||||
|
<view class="plan_down" v-show="planDown">
|
||||||
|
<image @click="planDown = false" class="down" src="../../static/images/learnpath/down.png" mode=""></image>
|
||||||
|
<view class="header">
|
||||||
|
共享文档
|
||||||
|
</view>
|
||||||
|
<view class="body">
|
||||||
|
<view class="left">
|
||||||
|
<image class="img" src="" mode=""></image>
|
||||||
|
<text class="text">人工智能启蒙讲解讲义.pptx</text>
|
||||||
|
</view>
|
||||||
|
<view class="right">
|
||||||
|
下载
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
</view> -->
|
||||||
|
</view>
|
||||||
|
<view class="body_item" v-if="detailData.remark">
|
||||||
|
<view class="body_top">
|
||||||
|
<image class="img" src="../../static/images/learnpath/explain.png" mode=""></image>
|
||||||
|
<text class="text">说明</text>
|
||||||
|
</view>
|
||||||
|
<view class="body_down">
|
||||||
|
<view class="text_ele">
|
||||||
|
{{detailData.remark || ''}}
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
<view class="body_item">
|
||||||
|
<view class="body_top">
|
||||||
|
<image class="img" src="../../static/images/learnpath/plan.png" mode=""></image>
|
||||||
|
<text class="text">学习进度</text>
|
||||||
|
</view>
|
||||||
|
<view class="body_plan">
|
||||||
|
<view class="plan_left">
|
||||||
|
<view class="left">
|
||||||
|
<view style="margin-bottom: 24rpx;">总任务：</view>
|
||||||
|
<view>当前任务：</view>
|
||||||
|
</view>
|
||||||
|
<view class="right">
|
||||||
|
<view class="text" style="margin-bottom: 24rpx;">{{detailData.taskNum}}门</view>
|
||||||
|
<view class="text">{{detailData.currentTaskName}}</view>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
<view class="plan_right">
|
||||||
|
<!-- <view>总进度</view>
|
||||||
|
<view>{{Number(((detailData.overallCompletionRate || 0)*100).toFixed(2))}}%</view>
|
||||||
|
<view class="line">
|
||||||
|
<u-line-progress :percentage="Number(((detailData.overallCompletionRate || 0)*100).toFixed(2))" activeColor="#387DF7"></u-line-progress>
|
||||||
|
</view> -->
|
||||||
|
<view class="semi-circle-progress">
|
||||||
|
<view class="progress-bar">
|
||||||
|
<view class="item">
|
||||||
|
<view class="pro">{{Number(((detailData.overallCompletionRate || 0)*100).toFixed(2))}}%</view>
|
||||||
|
<view class="text">总进度</view>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
<view class="pro_line" :style="{ '--progress': (100-Number(((detailData.overallCompletionRate || 0)*100).toFixed(2))) + '%' }"></view>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
<view class="go_learn" @click="goLearn(detailData)">
|
||||||
|
{{detailData.overallCompletionRate==0?'开始学习':detailData.overallCompletionRate==1?'回顾':'继续学习'}}
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
<view class="learn" v-else>
|
||||||
|
<u-empty
|
||||||
|
mode="data"
|
||||||
|
icon="http://cdn.uviewui.com/uview/empty/data.png"
|
||||||
|
style="height: 75vh;"
|
||||||
|
>
|
||||||
|
</u-empty>
|
||||||
|
</view>
|
||||||
|
<u-modal :show="learnModal" :showConfirmButton="false" width="200px">
|
||||||
|
<view class="item_modal">
|
||||||
|
<view class="item_title">
|
||||||
|
成长路径说明
|
||||||
|
</view>
|
||||||
|
<view class="item_text">
|
||||||
|
本功能针对学员所在组织、岗位、职级自动匹配成长路径，完成本路径方可晋升
|
||||||
|
</view>
|
||||||
|
<view class="item_btn" @click="learnModal = false">
|
||||||
|
我已阅读
|
||||||
|
</view>
|
||||||
|
<view class="item_check">
|
||||||
|
<u-checkbox-group>
|
||||||
|
<u-checkbox v-model="checked" :checked="isChecked" shape="square" label="下次进入不在弹窗" @change="checkedBox"></u-checkbox>
|
||||||
|
</u-checkbox-group>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
</u-modal>
|
||||||
|
</view>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
import { mapGetters } from 'vuex'
|
||||||
|
import { getList } from "@/api/modules/growth.js"
|
||||||
|
export default {
|
||||||
|
computed: {
|
||||||
|
...mapGetters(['userInfo'])
|
||||||
|
},
|
||||||
|
data() {
|
||||||
|
return {
|
||||||
|
detailData: {},
|
||||||
|
planDown: false,
|
||||||
|
upContent: false,
|
||||||
|
checked: null,
|
||||||
|
isChecked: false,
|
||||||
|
learnModal: false,
|
||||||
|
}
|
||||||
|
},
|
||||||
|
watch: {
|
||||||
|
checked(){
|
||||||
|
this.outLearnModal()
|
||||||
|
}
|
||||||
|
},
|
||||||
|
onShow() {
|
||||||
|
getList(this.userInfo.aid).then(res=>{
|
||||||
|
if(res.code == 200 ){
|
||||||
|
this.detailData = res.data
|
||||||
|
if(Object.keys(this.detailData).length&&localStorage.getItem("checkedTrue")!=null){
|
||||||
|
this.learnModal = localStorage.getItem("checkedTrue") === "true"
|
||||||
|
this.isChecked = localStorage.getItem("checkedTrue") === "false"
|
||||||
|
console.log(this.learnModal,this.isChecked)
|
||||||
|
}else{
|
||||||
|
this.learnModal = true
|
||||||
|
}
|
||||||
|
}
|
||||||
|
})
|
||||||
|
},
|
||||||
|
methods: {
|
||||||
|
goLearn() {
|
||||||
|
uni.navigateTo({
|
||||||
|
url: '/pages/learnPath/learnPath?growId='+this.detailData.growId+'&name='+this.detailData.growName + '&isAllPath=' + true
|
||||||
|
|
||||||
|
});
|
||||||
|
},
|
||||||
|
contentOn() {
|
||||||
|
this.upContent = true
|
||||||
|
},
|
||||||
|
contentOut() {
|
||||||
|
this.upContent = false
|
||||||
|
},
|
||||||
|
onLearnModal() {
|
||||||
|
this.learnModal = true
|
||||||
|
this.isChecked = localStorage.getItem("checkedTrue") === "false"
|
||||||
|
},
|
||||||
|
checkedBox(value){
|
||||||
|
this.checked = value
|
||||||
|
},
|
||||||
|
outLearnModal() {
|
||||||
|
// this.learnModal = false
|
||||||
|
localStorage.setItem("checkedTrue",!this.checked)
|
||||||
|
},
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style lang="scss" scoped>
|
||||||
|
/deep/ .u-modal{
|
||||||
|
width: 288px !important;
|
||||||
|
border-radius: 28upx;
|
||||||
|
}
|
||||||
|
/deep/ .u-modal__content{
|
||||||
|
text-align: center;
|
||||||
|
font-size: 36upx;
|
||||||
|
font-weight: 600;
|
||||||
|
color: #333333;
|
||||||
|
padding: 33px 25px 33px 25px;
|
||||||
|
background: linear-gradient( 180deg, #E8ECFF 0%, #FFFFFF 100%);
|
||||||
|
}
|
||||||
|
.item_modal{
|
||||||
|
|
||||||
|
.item_title{
|
||||||
|
margin: 0 auto;
|
||||||
|
margin-top: -22rpx;
|
||||||
|
height: 50rpx;
|
||||||
|
font-weight: 500;
|
||||||
|
font-size: 36rpx;
|
||||||
|
color: #333333;
|
||||||
|
line-height: 50rpx;
|
||||||
|
margin-bottom: 38rpx;
|
||||||
|
}
|
||||||
|
.item_text{
|
||||||
|
height: 96rpx;
|
||||||
|
font-weight: 400;
|
||||||
|
font-size: 26rpx;
|
||||||
|
color: #333333;
|
||||||
|
line-height: 48rpx;
|
||||||
|
margin-bottom: 40rpx;
|
||||||
|
}
|
||||||
|
.item_btn{
|
||||||
|
width: 220rpx;
|
||||||
|
height: 68rpx;
|
||||||
|
background: linear-gradient( 90deg, #5390FD 0%, #3162FA 100%);
|
||||||
|
border-radius: 8rpx;
|
||||||
|
margin: 0 auto;
|
||||||
|
text-align: center;
|
||||||
|
line-height: 68rpx;
|
||||||
|
font-weight: 400;
|
||||||
|
font-size: 28rpx;
|
||||||
|
color: #FFFFFF;
|
||||||
|
margin-bottom: 56rpx;
|
||||||
|
}
|
||||||
|
.item_check{
|
||||||
|
font-weight: 400;
|
||||||
|
font-size: 28rpx;
|
||||||
|
color: #666666;
|
||||||
|
line-height: 28rpx;
|
||||||
|
margin-bottom: -14rpx;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.learn{
|
||||||
|
height: 80vh;
|
||||||
|
.line{
|
||||||
|
width: 100%;
|
||||||
|
height: 20rpx;
|
||||||
|
background: #F9F9F9;
|
||||||
|
}
|
||||||
|
.learn_header{
|
||||||
|
display: flex;
|
||||||
|
justify-content: space-between;
|
||||||
|
align-items: center;
|
||||||
|
margin-top: 20rpx;
|
||||||
|
margin-bottom: 30rpx;
|
||||||
|
.learn_left{
|
||||||
|
position: relative;
|
||||||
|
margin-left: 36rpx;
|
||||||
|
.text{
|
||||||
|
width: 192rpx;
|
||||||
|
height: 44rpx;
|
||||||
|
font-weight: 600;
|
||||||
|
font-size: 32rpx;
|
||||||
|
color: #333333;
|
||||||
|
line-height: 44rpx;
|
||||||
|
text-align: left;
|
||||||
|
margin-right: 14rpx;
|
||||||
|
vertical-align: middle;
|
||||||
|
}
|
||||||
|
.image{
|
||||||
|
width: 32rpx;
|
||||||
|
height: 32rpx;
|
||||||
|
vertical-align: middle;
|
||||||
|
}
|
||||||
|
.up_content{
|
||||||
|
width: 712rpx;
|
||||||
|
height: 264rpx;
|
||||||
|
background: url("../../static/images/learnpath/downImg.png") no-repeat;
|
||||||
|
background-size: 100%;
|
||||||
|
position: absolute;
|
||||||
|
top: 20rpx;
|
||||||
|
left: -50rpx;
|
||||||
|
z-index: 600;
|
||||||
|
.text{
|
||||||
|
width: 488rpx;
|
||||||
|
height: 120rpx;
|
||||||
|
font-weight: 400;
|
||||||
|
font-size: 24rpx;
|
||||||
|
color: #333333;
|
||||||
|
line-height: 40rpx;
|
||||||
|
margin: 74rpx 152rpx 70rpx 72rpx;
|
||||||
|
overflow: hidden;
|
||||||
|
word-break:break-all;
|
||||||
|
text-overflow: ellipsis;
|
||||||
|
-webkit-box-orient: vertical;
|
||||||
|
display: -webkit-box;
|
||||||
|
overflow: hidden;
|
||||||
|
text-overflow: ellipsis;
|
||||||
|
-webkit-line-clamp: 3;
|
||||||
|
}
|
||||||
|
.down{
|
||||||
|
width: 42rpx;
|
||||||
|
height: 42rpx;
|
||||||
|
position: absolute;
|
||||||
|
right: 52rpx;
|
||||||
|
top: 64rpx;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.learn_right{
|
||||||
|
width: 300rpx;
|
||||||
|
height: 54rpx;
|
||||||
|
background: #387DF7;
|
||||||
|
box-shadow: 2rpx 4rpx 16rpx 0rpx rgba(56,125,247,0.34);
|
||||||
|
border-radius: 40rpx;
|
||||||
|
margin-right: 20rpx;
|
||||||
|
display: flex;
|
||||||
|
justify-content: center;
|
||||||
|
align-items: center;
|
||||||
|
.text{
|
||||||
|
height: 40rpx;
|
||||||
|
font-weight: 400;
|
||||||
|
font-size: 28rpx;
|
||||||
|
color: #FFFFFF;
|
||||||
|
line-height: 40rpx;
|
||||||
|
margin-right: 14rpx;
|
||||||
|
vertical-align: middle;
|
||||||
|
}
|
||||||
|
.image{
|
||||||
|
width: 40rpx;
|
||||||
|
height: 40rpx;
|
||||||
|
vertical-align: middle;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.learn_body{
|
||||||
|
.body_job{
|
||||||
|
background: linear-gradient( 180deg, #3161FA 0%, #5195FF 100%);
|
||||||
|
border-radius: 8rpx;
|
||||||
|
border: 2rpx solid #E4EDFE;
|
||||||
|
margin: 24rpx 28rpx 40rpx 30rpx;
|
||||||
|
padding: 40rpx 28rpx 32rpx 40rpx;
|
||||||
|
position: relative;
|
||||||
|
.name{
|
||||||
|
// height: 44rpx;
|
||||||
|
font-weight: 600;
|
||||||
|
font-size: 32rpx;
|
||||||
|
color: #FFFFFF;
|
||||||
|
line-height: 44rpx;
|
||||||
|
margin-bottom: 20rpx;
|
||||||
|
overflow: hidden;
|
||||||
|
white-space: nowrap;
|
||||||
|
text-overflow: ellipsis;
|
||||||
|
}
|
||||||
|
.job{
|
||||||
|
// height: 40rpx;
|
||||||
|
flex-wrap: wrap;
|
||||||
|
font-weight: 400;
|
||||||
|
font-size: 28rpx;
|
||||||
|
color: #FFFFFF;
|
||||||
|
line-height: 40rpx;
|
||||||
|
display: flex;
|
||||||
|
justify-content: space-between;
|
||||||
|
.text_name{
|
||||||
|
width: 360rpx;
|
||||||
|
overflow: hidden;
|
||||||
|
white-space: nowrap;
|
||||||
|
text-overflow: ellipsis;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.plan_item{
|
||||||
|
position: absolute;
|
||||||
|
top: 216rpx;
|
||||||
|
right: 0;
|
||||||
|
.image{
|
||||||
|
width: 42rpx;
|
||||||
|
height: 36rpx;
|
||||||
|
margin-right: 20rpx;
|
||||||
|
vertical-align: middle;
|
||||||
|
}
|
||||||
|
.text{
|
||||||
|
height: 44rpx;
|
||||||
|
font-weight: 600;
|
||||||
|
font-size: 32rpx;
|
||||||
|
color: #409EFF;
|
||||||
|
line-height: 44rpx;
|
||||||
|
vertical-align: middle;
|
||||||
|
}
|
||||||
|
.plan_down{
|
||||||
|
position: absolute;
|
||||||
|
z-index: 900;
|
||||||
|
right: -44rpx;
|
||||||
|
top: 26rpx;
|
||||||
|
width: 780rpx;
|
||||||
|
max-height: 756rpx;
|
||||||
|
background: url("../../static/images/learnpath/downppt.png") no-repeat;
|
||||||
|
background-size: 100%;
|
||||||
|
margin-bottom: 36rpx;
|
||||||
|
padding-bottom: 36rpx;
|
||||||
|
.down{
|
||||||
|
width: 52rpx;
|
||||||
|
height: 52rpx;
|
||||||
|
position: absolute;
|
||||||
|
top: 60rpx;
|
||||||
|
right: 66rpx;
|
||||||
|
}
|
||||||
|
.header{
|
||||||
|
margin: 0 auto;
|
||||||
|
margin-top: 80rpx;
|
||||||
|
width: 144rpx;
|
||||||
|
height: 56rpx;
|
||||||
|
font-weight: 600;
|
||||||
|
font-size: 36rpx;
|
||||||
|
color: #202020;
|
||||||
|
line-height: 56rpx;
|
||||||
|
margin-bottom: 22rpx;
|
||||||
|
}
|
||||||
|
.body{
|
||||||
|
display: flex;
|
||||||
|
justify-content: space-between;
|
||||||
|
.left{
|
||||||
|
margin-left: 80rpx;
|
||||||
|
.img{
|
||||||
|
width: 40rpx;
|
||||||
|
height: 40rpx;
|
||||||
|
margin-right: 24rpx;
|
||||||
|
}
|
||||||
|
.text{
|
||||||
|
height: 40rpx;
|
||||||
|
font-weight: 400;
|
||||||
|
font-size: 28rpx;
|
||||||
|
color: #666666;
|
||||||
|
line-height: 40rpx;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.right{
|
||||||
|
text-align: center;
|
||||||
|
width: 140rpx;
|
||||||
|
height: 56rpx;
|
||||||
|
line-height: 56rpx;
|
||||||
|
border-radius: 8rpx;
|
||||||
|
border: 2rpx solid #387DF7;
|
||||||
|
font-weight: 400;
|
||||||
|
font-size: 28rpx;
|
||||||
|
color: #387DF7;
|
||||||
|
margin-right: 80rpx;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.body_item{
|
||||||
|
margin-bottom: 30rpx;
|
||||||
|
margin-left: 34rpx;
|
||||||
|
.body_top{
|
||||||
|
.img{
|
||||||
|
width: 32rpx;
|
||||||
|
height: 32rpx;
|
||||||
|
vertical-align: middle;
|
||||||
|
margin-right: 20rpx;
|
||||||
|
}
|
||||||
|
.text{
|
||||||
|
height: 44rpx;
|
||||||
|
font-weight: 600;
|
||||||
|
font-size: 32rpx;
|
||||||
|
color: #333333;
|
||||||
|
line-height: 44rpx;
|
||||||
|
vertical-align: middle;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.body_down{
|
||||||
|
margin: 24rpx 30rpx 30rpx 28rpx;
|
||||||
|
padding: 22rpx 38rpx 26rpx 40rpx;
|
||||||
|
max-height: 328rpx;
|
||||||
|
background: #F7F7F7;
|
||||||
|
border-radius: 8rpx;
|
||||||
|
font-weight: 400;
|
||||||
|
font-size: 28rpx;
|
||||||
|
text-align: left;
|
||||||
|
.text_ele{
|
||||||
|
overflow: hidden;
|
||||||
|
word-break:break-all;
|
||||||
|
text-overflow: ellipsis;
|
||||||
|
-webkit-box-orient: vertical;
|
||||||
|
display: -webkit-box;
|
||||||
|
overflow: hidden;
|
||||||
|
text-overflow: ellipsis;
|
||||||
|
-webkit-line-clamp: 6;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.body_plan{
|
||||||
|
margin: 32rpx 30rpx 30rpx 28rpx;
|
||||||
|
height: 228rpx;
|
||||||
|
background: linear-gradient( 186deg, #E5EDFB 0%, #F7F9FC 100%);
|
||||||
|
border-radius: 8rpx;
|
||||||
|
display: flex;
|
||||||
|
.plan_left{
|
||||||
|
margin: 62rpx 70rpx 60rpx 48rpx;
|
||||||
|
display: flex;
|
||||||
|
.left{
|
||||||
|
height: 40rpx;
|
||||||
|
font-weight: 400;
|
||||||
|
font-size: 28rpx;
|
||||||
|
color: #848593;
|
||||||
|
line-height: 40rpx;
|
||||||
|
margin-right: 12rpx;
|
||||||
|
}
|
||||||
|
.right{
|
||||||
|
height: 42rpx;
|
||||||
|
font-weight: 600;
|
||||||
|
font-size: 30rpx;
|
||||||
|
color: #3B3C4A;
|
||||||
|
line-height: 42rpx;
|
||||||
|
.text{
|
||||||
|
width: 122rpx;
|
||||||
|
overflow: hidden;
|
||||||
|
white-space: nowrap;
|
||||||
|
text-overflow: ellipsis;
|
||||||
|
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.plan_right{
|
||||||
|
margin-right: -50px;
|
||||||
|
.semi-circle-progress {
|
||||||
|
width: 340rpx;
|
||||||
|
height: 120rpx;
|
||||||
|
position: relative;
|
||||||
|
overflow: hidden;
|
||||||
|
}
|
||||||
|
.progress-bar{
|
||||||
|
width: 50%;
|
||||||
|
height: 150%;
|
||||||
|
border-radius: 50%;
|
||||||
|
border: 24rpx solid #DFDFE4 ;
|
||||||
|
display: flex;
|
||||||
|
justify-content: center;
|
||||||
|
.item{
|
||||||
|
margin-top: 16rpx;
|
||||||
|
text-align: center;
|
||||||
|
.pro{
|
||||||
|
font-weight: 600;
|
||||||
|
font-size: 36rpx;
|
||||||
|
color: #2E72F2;
|
||||||
|
}
|
||||||
|
.text{
|
||||||
|
font-weight: 400;
|
||||||
|
font-size: 28rpx;
|
||||||
|
color: #A7ACBA;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.pro_line{
|
||||||
|
width: 50%;
|
||||||
|
height: 150%;
|
||||||
|
border-radius: 50%;
|
||||||
|
border: 24rpx solid #2E72F2;
|
||||||
|
position: absolute;
|
||||||
|
top: 0;
|
||||||
|
clip-path: inset(0 0 0 var(--progress));
|
||||||
|
// clip-path: inset(0 0 0 50%);
|
||||||
|
transform: rotate(180deg);
|
||||||
|
}
|
||||||
|
// display: flex;
|
||||||
|
// justify-content: center;
|
||||||
|
// align-items: center;
|
||||||
|
margin-top: 46rpx;
|
||||||
|
.line{
|
||||||
|
width: 184rpx;
|
||||||
|
height: 1rpx;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.go_learn{
|
||||||
|
width: 472rpx;
|
||||||
|
height: 96rpx;
|
||||||
|
background: linear-gradient( 112deg, #5491FD 0%, #2A58FA 100%);
|
||||||
|
border-radius: 48rpx;
|
||||||
|
font-weight: 500;
|
||||||
|
font-size: 28rpx;
|
||||||
|
color: #FFFFFF;
|
||||||
|
line-height: 40rpx;
|
||||||
|
margin: 0 auto;
|
||||||
|
line-height: 96rpx;
|
||||||
|
text-align: center;
|
||||||
|
margin-bottom: 22rpx;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</style>
|
||||||
@@ -6,6 +6,10 @@
|
|||||||
<u-search :clearabled="true" @search="loadBoeData(true)" @clear="loadBoeData(true)"
|
<u-search :clearabled="true" @search="loadBoeData(true)" @clear="loadBoeData(true)"
|
||||||
placeholder="搜索关键字" v-model="loadkeyword" :showAction="false" shape="square" bgColor="##F2F5F7">
|
placeholder="搜索关键字" v-model="loadkeyword" :showAction="false" shape="square" bgColor="##F2F5F7">
|
||||||
</u-search>
|
</u-search>
|
||||||
|
<view class="textbtns" @click="()=>{showSearch = true;firstType = 0;endType = 0;boeStatus = '';typeListData=''}">
|
||||||
|
<text>筛选</text>
|
||||||
|
<!-- <u-icon style="margin-left: 18upx;" name="arrow-down"></u-icon> -->
|
||||||
|
</view>
|
||||||
</view>
|
</view>
|
||||||
<view class="searchView" v-show="tabIndex===1">
|
<view class="searchView" v-show="tabIndex===1">
|
||||||
<u-search :clearabled="true" @search="searchData()" @clear="searchData()"
|
<u-search :clearabled="true" @search="searchData()" @clear="searchData()"
|
||||||
@@ -15,18 +19,18 @@
|
|||||||
</view>
|
</view>
|
||||||
<view class="tabbar" style="position: relative;padding-bottom: 20upx;">
|
<view class="tabbar" style="position: relative;padding-bottom: 20upx;">
|
||||||
<view class="tabbar-item" style="text-align: right;margin-right: 26upx;margin-left: 42upx;" @click="clicktab(0)" :class="{'active':tabIndex===0}">
|
<view class="tabbar-item" style="text-align: right;margin-right: 26upx;margin-left: 42upx;" @click="clicktab(0)" :class="{'active':tabIndex===0}">
|
||||||
<u-badge :type="type" max="99" :value="value" class="tabber-co"></u-badge>学习任务
|
<u-badge :type="type" max="99" :value="value" class="tabber-co"></u-badge>我的必修
|
||||||
<view class="border-bottom-one"></view>
|
<view class="border-bottom-one"></view>
|
||||||
</view>
|
</view>
|
||||||
<view class="tabbar-item" style="text-align: left;margin-left: 26upx;" @click="clicktab(1)" :class="{'active':tabIndex===1}">
|
<view class="tabbar-item" style="text-align: left;margin-left: 26upx;" @click="clicktab(1)" :class="{'active':tabIndex===1}">
|
||||||
我报名的<view class="border-bottom-two"></view>
|
我的选修<view class="border-bottom-two"></view>
|
||||||
</view>
|
</view>
|
||||||
<view class="tabbar-item" style="text-align: left;margin-left: 52upx;" @click="clicktab(2)" :class="{'active':tabIndex===2}">
|
<!-- <view class="tabbar-item" style="text-align: left;margin-left: 52upx;" @click="clicktab(2)" :class="{'active':tabIndex===2}">
|
||||||
成长路径<view class="border-bottom-two"></view>
|
成长路径<view class="border-bottom-two"></view>
|
||||||
</view>
|
</view> -->
|
||||||
</view>
|
</view>
|
||||||
<!-- 筛选状态 -->
|
<!-- 筛选状态 -->
|
||||||
<view class="addition" v-show="tabIndex===0">
|
<!-- <view class="addition" v-show="tabIndex===0">
|
||||||
<view class="textbtn" style="color:#666;font-size: 28upx;" @click="statusSelectShow = !statusSelectShow">
|
<view class="textbtn" style="color:#666;font-size: 28upx;" @click="statusSelectShow = !statusSelectShow">
|
||||||
<text>筛选</text>
|
<text>筛选</text>
|
||||||
<u-icon style="margin-left: 18upx;" name="arrow-down"></u-icon>
|
<u-icon style="margin-left: 18upx;" name="arrow-down"></u-icon>
|
||||||
@@ -36,7 +40,7 @@
|
|||||||
{{status.name}}
|
{{status.name}}
|
||||||
</view>
|
</view>
|
||||||
</view>
|
</view>
|
||||||
</view>
|
</view> -->
|
||||||
<view class="addition" v-show="tabIndex===1">
|
<view class="addition" v-show="tabIndex===1">
|
||||||
<view class="textbtn" style="color:#666;font-size: 28upx;" @click="statusSelectShow = !statusSelectShow">
|
<view class="textbtn" style="color:#666;font-size: 28upx;" @click="statusSelectShow = !statusSelectShow">
|
||||||
<text>筛选</text>
|
<text>筛选</text>
|
||||||
@@ -126,7 +130,7 @@
|
|||||||
<uni-load-more :status="studyLoadStatus"></uni-load-more>
|
<uni-load-more :status="studyLoadStatus"></uni-load-more>
|
||||||
</view>
|
</view>
|
||||||
</view>
|
</view>
|
||||||
<view class="learn" v-show="tabIndex===2" v-if="Object.keys(detailData).length">
|
<!-- <view class="learn" v-show="tabIndex===2" v-if="Object.keys(detailData).length">
|
||||||
<view class="learn_header">
|
<view class="learn_header">
|
||||||
<view class="learn_left">
|
<view class="learn_left">
|
||||||
<text class="text">我的成长路径</text>
|
<text class="text">我的成长路径</text>
|
||||||
@@ -149,7 +153,7 @@
|
|||||||
<view class="text_name">{{detailData.organizationName || ''}}</view>
|
<view class="text_name">{{detailData.organizationName || ''}}</view>
|
||||||
<text> 学习状态：<text :style="{color: ['#FFD500','#9FFF84','#FFFFFF '][detailData.studyStatus]}">{{detailData.studyStatus==0?'未开始':detailData.studyStatus==1?'已完成':'进行中'}}</text></text>
|
<text> 学习状态：<text :style="{color: ['#FFD500','#9FFF84','#FFFFFF '][detailData.studyStatus]}">{{detailData.studyStatus==0?'未开始':detailData.studyStatus==1?'已完成':'进行中'}}</text></text>
|
||||||
</view>
|
</view>
|
||||||
<!-- <view class="plan_item">
|
<view class="plan_item">
|
||||||
<image class="image" src="../../static/images/learnpath/file.png" mode=""></image>
|
<image class="image" src="../../static/images/learnpath/file.png" mode=""></image>
|
||||||
<text class="text" @click="planDown = true">共享文档</text>
|
<text class="text" @click="planDown = true">共享文档</text>
|
||||||
<view class="plan_down" v-show="planDown">
|
<view class="plan_down" v-show="planDown">
|
||||||
@@ -167,7 +171,7 @@
|
|||||||
</view>
|
</view>
|
||||||
</view>
|
</view>
|
||||||
</view>
|
</view>
|
||||||
</view> -->
|
</view>
|
||||||
</view>
|
</view>
|
||||||
<view class="body_item" v-if="detailData.remark">
|
<view class="body_item" v-if="detailData.remark">
|
||||||
<view class="body_top">
|
<view class="body_top">
|
||||||
@@ -197,11 +201,11 @@
|
|||||||
</view>
|
</view>
|
||||||
</view>
|
</view>
|
||||||
<view class="plan_right">
|
<view class="plan_right">
|
||||||
<!-- <view>总进度</view>
|
<view>总进度</view>
|
||||||
<view>{{Number(((detailData.overallCompletionRate || 0)*100).toFixed(2))}}%</view>
|
<view>{{Number(((detailData.overallCompletionRate || 0)*100).toFixed(2))}}%</view>
|
||||||
<view class="line">
|
<view class="line">
|
||||||
<u-line-progress :percentage="Number(((detailData.overallCompletionRate || 0)*100).toFixed(2))" activeColor="#387DF7"></u-line-progress>
|
<u-line-progress :percentage="Number(((detailData.overallCompletionRate || 0)*100).toFixed(2))" activeColor="#387DF7"></u-line-progress>
|
||||||
</view> -->
|
</view>
|
||||||
<view class="semi-circle-progress">
|
<view class="semi-circle-progress">
|
||||||
<view class="progress-bar">
|
<view class="progress-bar">
|
||||||
<view class="item">
|
<view class="item">
|
||||||
@@ -218,15 +222,15 @@
|
|||||||
{{detailData.overallCompletionRate==0?'开始学习':detailData.overallCompletionRate==1?'回顾':'继续学习'}}
|
{{detailData.overallCompletionRate==0?'开始学习':detailData.overallCompletionRate==1?'回顾':'继续学习'}}
|
||||||
</view>
|
</view>
|
||||||
</view>
|
</view>
|
||||||
</view>
|
</view> -->
|
||||||
<view class="learn" v-show="tabIndex===2" v-else>
|
<!-- <view class="learn" v-show="tabIndex===2" v-else>
|
||||||
<u-empty
|
<u-empty
|
||||||
mode="data"
|
mode="data"
|
||||||
icon="http://cdn.uviewui.com/uview/empty/data.png"
|
icon="http://cdn.uviewui.com/uview/empty/data.png"
|
||||||
style="height: 75vh;"
|
style="height: 75vh;"
|
||||||
>
|
>
|
||||||
</u-empty>
|
</u-empty>
|
||||||
</view>
|
</view> -->
|
||||||
<u-modal :show="studyResetShow" :showCancelButton="true" @cancel="cancelResetStudy" @confirm="resetStudy" ref="uModal" :asyncClose="true">
|
<u-modal :show="studyResetShow" :showCancelButton="true" @cancel="cancelResetStudy" @confirm="resetStudy" ref="uModal" :asyncClose="true">
|
||||||
您确定要重新学习吗？
|
您确定要重新学习吗？
|
||||||
</u-modal>
|
</u-modal>
|
||||||
@@ -294,6 +298,40 @@
|
|||||||
</view>
|
</view>
|
||||||
</view>
|
</view>
|
||||||
</u-modal>
|
</u-modal>
|
||||||
|
<u-popup :show="showSearch" mode="top" @close="close" @open="open">
|
||||||
|
<view class="popup_item">
|
||||||
|
<u-icon @click="showSearch = false" style="width: 30rpx;height: 30rpx;position: absolute;left: 20rpx;top: 40rpx;" name="arrow-left"></u-icon>
|
||||||
|
<view class="searchView" style="margin-left: 70rpx;" v-show="tabIndex===0">
|
||||||
|
<u-search :clearabled="true" @search="loadBoeData(true)" @clear="loadBoeData(true)"
|
||||||
|
placeholder="搜索关键字" v-model="loadkeyword" :showAction="false" shape="square" bgColor="##F2F5F7">
|
||||||
|
</u-search>
|
||||||
|
</view>
|
||||||
|
<view class="item">
|
||||||
|
<view class="title">类型</view>
|
||||||
|
<view class="list">
|
||||||
|
<view :class="firstType == index? 'active_btn': ''" @click="activeItem(item)" class="btn" v-for="(item,index) in typeData" :key="index">
|
||||||
|
{{item.name}}
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
<view class="item">
|
||||||
|
<view class="title">状态</view>
|
||||||
|
<view class="list">
|
||||||
|
<view :class="endType == index? 'active_btn': ''" @click="activeItemTwo(item)" class="btn" v-for="(item,index) in statusData" :key="index">
|
||||||
|
{{item.name}}
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
<view class="footer">
|
||||||
|
<view class="btn left" @click="showSearch = false">
|
||||||
|
取消
|
||||||
|
</view>
|
||||||
|
<view class="btn right" @click="loadBoeData(true)">
|
||||||
|
确定
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
</u-popup>
|
||||||
</view>
|
</view>
|
||||||
</template>
|
</template>
|
||||||
<script>
|
<script>
|
||||||
@@ -311,6 +349,23 @@
|
|||||||
},
|
},
|
||||||
data() {
|
data() {
|
||||||
return {
|
return {
|
||||||
|
firstType: 0,
|
||||||
|
endType: 0,
|
||||||
|
typeListData: '',
|
||||||
|
typeData: [
|
||||||
|
{name: '全部',value: 1},
|
||||||
|
{name: '领导力必修',value: 2},
|
||||||
|
{name: '专业力必修',value: 3},
|
||||||
|
{name: '定制化学习',value: 4},
|
||||||
|
// {name: '通用力学习',value: 5},
|
||||||
|
],
|
||||||
|
statusData: [
|
||||||
|
{name: '全部',value: 1},
|
||||||
|
{name: '未开始',value: 2},
|
||||||
|
{name: '进行中',value: 3},
|
||||||
|
{name: '已完成',value: 4},
|
||||||
|
],
|
||||||
|
showSearch: false,
|
||||||
detailData: {},
|
detailData: {},
|
||||||
planDown: false,
|
planDown: false,
|
||||||
upContent: false,
|
upContent: false,
|
||||||
@@ -420,6 +475,18 @@
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
});
|
});
|
||||||
|
getList(this.userInfo.aid).then(res=>{
|
||||||
|
if(res.code == 200 ){
|
||||||
|
this.detailData = res.data
|
||||||
|
if(Object.keys(this.detailData).length){
|
||||||
|
if(res.data.studyStatus == 1){
|
||||||
|
this.detailData.studyStatus = 2
|
||||||
|
}else if(res.data.studyStatus == 2){
|
||||||
|
this.detailData.studyStatus = 1
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
})
|
||||||
},
|
},
|
||||||
onPullDownRefresh() {
|
onPullDownRefresh() {
|
||||||
this.onReachBottom();
|
this.onReachBottom();
|
||||||
@@ -450,6 +517,14 @@
|
|||||||
}
|
}
|
||||||
},
|
},
|
||||||
methods: {
|
methods: {
|
||||||
|
activeItem(item){
|
||||||
|
this.firstType = item.value - 1
|
||||||
|
this.typeListData = item.value - 2
|
||||||
|
},
|
||||||
|
activeItemTwo(item){
|
||||||
|
this.endType = item.value - 1
|
||||||
|
this.boeStatus = item.value - 2
|
||||||
|
},
|
||||||
goLearn() {
|
goLearn() {
|
||||||
uni.navigateTo({
|
uni.navigateTo({
|
||||||
url: '/pages/learnPath/learnPath?growId='+this.detailData.growId+'&name='+this.detailData.growName + '&isAllPath=' + true
|
url: '/pages/learnPath/learnPath?growId='+this.detailData.growId+'&name='+this.detailData.growName + '&isAllPath=' + true
|
||||||
@@ -645,6 +720,12 @@
|
|||||||
},
|
},
|
||||||
// 学习任务跳转详情
|
// 学习任务跳转详情
|
||||||
loaddetail(task) {
|
loaddetail(task) {
|
||||||
|
if('growId' in task){
|
||||||
|
uni.navigateTo({
|
||||||
|
url:'/pages/learnPath/growPage'
|
||||||
|
})
|
||||||
|
return
|
||||||
|
}
|
||||||
// uni.navigateTo({
|
// uni.navigateTo({
|
||||||
// url: '/pages/study/loaddetail?id=' + task.cmtask_id
|
// url: '/pages/study/loaddetail?id=' + task.cmtask_id
|
||||||
// });
|
// });
|
||||||
@@ -673,6 +754,10 @@
|
|||||||
},
|
},
|
||||||
|
|
||||||
loadBoeData(flag) {
|
loadBoeData(flag) {
|
||||||
|
if(this.boeStatus == -1){
|
||||||
|
this.boeStatus = ''
|
||||||
|
}
|
||||||
|
this.showSearch = false
|
||||||
if (flag) {
|
if (flag) {
|
||||||
this.taskPageIndex = 1; //回到首页
|
this.taskPageIndex = 1; //回到首页
|
||||||
this.couresList = [];
|
this.couresList = [];
|
||||||
@@ -683,10 +768,23 @@
|
|||||||
pageSize: this.taskPageSize,
|
pageSize: this.taskPageSize,
|
||||||
cmtask_user_status: this.boeStatus,
|
cmtask_user_status: this.boeStatus,
|
||||||
cmtask_name: this.loadkeyword,
|
cmtask_name: this.loadkeyword,
|
||||||
|
type: this.typeListData
|
||||||
}
|
}
|
||||||
if (this.cmtask_name) {
|
if (this.cmtask_name) {
|
||||||
params.cmtask_name = this.keyWord;
|
params.cmtask_name = this.keyWord;
|
||||||
}
|
}
|
||||||
|
if(this.typeListData == 1){
|
||||||
|
if(Object.keys(this.detailData).length){
|
||||||
|
if(this.boeStatus === '' || this.boeStatus == this.detailData.studyStatus){
|
||||||
|
this.detailData.cmtask_name = this.detailData.growName
|
||||||
|
this.detailData.cmtask_user_status = this.detailData.studyStatus
|
||||||
|
this.couresList.push(this.detailData)
|
||||||
|
}
|
||||||
|
}
|
||||||
|
this.taskHasMore = true;
|
||||||
|
this.loadStatus='noMore';
|
||||||
|
return
|
||||||
|
}
|
||||||
|
|
||||||
apiManage.userTaskList(params).then(res => {
|
apiManage.userTaskList(params).then(res => {
|
||||||
if(res.code==200){
|
if(res.code==200){
|
||||||
@@ -924,6 +1022,57 @@
|
|||||||
padding: 33px 25px 33px 25px;
|
padding: 33px 25px 33px 25px;
|
||||||
background: linear-gradient( 180deg, #E8ECFF 0%, #FFFFFF 100%);
|
background: linear-gradient( 180deg, #E8ECFF 0%, #FFFFFF 100%);
|
||||||
}
|
}
|
||||||
|
.popup_item{
|
||||||
|
padding-top: 20rpx;
|
||||||
|
.item{
|
||||||
|
margin-top: 60rpx;
|
||||||
|
.title{
|
||||||
|
margin-bottom: 30rpx;
|
||||||
|
margin-left: 30rpx;
|
||||||
|
}
|
||||||
|
.list{
|
||||||
|
display: flex;
|
||||||
|
margin: 0 20rpx 0 20rpx ;
|
||||||
|
justify-content: space-between;
|
||||||
|
align-items: center;
|
||||||
|
.btn{
|
||||||
|
width: 130rpx;
|
||||||
|
height: 60rpx;
|
||||||
|
font-size: 10px;
|
||||||
|
text-align: center;
|
||||||
|
line-height: 60rpx;
|
||||||
|
border-radius: 5px;
|
||||||
|
background-color: #F9F9F9;
|
||||||
|
color: #A7ACBA;
|
||||||
|
}
|
||||||
|
.active_btn{
|
||||||
|
background-color: #3162FA;
|
||||||
|
color: #ffffff;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.footer{
|
||||||
|
width: 100%;
|
||||||
|
margin-top: 100rpx;
|
||||||
|
display: flex;
|
||||||
|
.btn{
|
||||||
|
width: 50%;
|
||||||
|
height: 60rpx;
|
||||||
|
line-height: 60rpx;
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
.left{
|
||||||
|
color: #000000;
|
||||||
|
background-color: #fff;
|
||||||
|
border-top: 1px solid #A7ACBA;
|
||||||
|
}
|
||||||
|
.right{
|
||||||
|
color: #ffffff;
|
||||||
|
background-color: #3161FA;
|
||||||
|
border-top: 1px solid #3161FA;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
.item_modal{
|
.item_modal{
|
||||||
|
|
||||||
.item_title{
|
.item_title{
|
||||||
@@ -1371,6 +1520,7 @@
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
.searchView {
|
.searchView {
|
||||||
|
position: relative;
|
||||||
margin-left: 32upx;
|
margin-left: 32upx;
|
||||||
line-height: 62upx;
|
line-height: 62upx;
|
||||||
height: 72upx;
|
height: 72upx;
|
||||||
@@ -1382,6 +1532,10 @@
|
|||||||
width: 195px;
|
width: 195px;
|
||||||
border-radius: 76upx !important;
|
border-radius: 76upx !important;
|
||||||
}
|
}
|
||||||
|
.textbtns{
|
||||||
|
position: absolute;
|
||||||
|
right: -42px;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
.course-aut{
|
.course-aut{
|
||||||
font-size: 24upx;
|
font-size: 24upx;
|
||||||
@@ -1678,6 +1832,7 @@
|
|||||||
height: 50px;
|
height: 50px;
|
||||||
line-height: 50px;
|
line-height: 50px;
|
||||||
display: flex;
|
display: flex;
|
||||||
|
justify-content: center;
|
||||||
color: #666;
|
color: #666;
|
||||||
font-size: 32upx;
|
font-size: 32upx;
|
||||||
.tabbar-item {
|
.tabbar-item {
|
||||||
|
|||||||
Reference in New Issue
Block a user