|
@@ -21,10 +21,14 @@
|
|
|
<view class="list_item" v-for="item in state.pageList" :key="item.id">
|
|
<view class="list_item" v-for="item in state.pageList" :key="item.id">
|
|
|
<view class="item_img_box">
|
|
<view class="item_img_box">
|
|
|
<image class="item_img" mode="aspectFill" :src="item.videoCoverUrl"></image>
|
|
<image class="item_img" mode="aspectFill" :src="item.videoCoverUrl"></image>
|
|
|
- <view class="remaining_days">剩余{{item.remainingTime}}</view>
|
|
|
|
|
|
|
+ <view v-if="(item.learnStatus == 3 || item.learnStatus == 4 || item.learnStatus == 1) && state.courseType == '0'" :class="['remaining_days',{wait:item.learnStatus == 3,finish:item.learnStatus == 4,overtime:item.learnStatus == 1}]">
|
|
|
|
|
+ <template v-if="item.learnStatus == 3">剩余{{item.remainingTime}}</template>
|
|
|
|
|
+ <template v-if="item.learnStatus == 4">已完成</template>
|
|
|
|
|
+ <template v-if="item.learnStatus == 1">已结束</template>
|
|
|
|
|
+ </view>
|
|
|
<view class="progress"><view class="done" :style="{width:item.progress}"></view></view>
|
|
<view class="progress"><view class="done" :style="{width:item.progress}"></view></view>
|
|
|
</view>
|
|
</view>
|
|
|
- <view class="item_title">2025{{item.courseName}}</view>
|
|
|
|
|
|
|
+ <view class="item_title">{{item.courseName}}</view>
|
|
|
<view class="item_time">
|
|
<view class="item_time">
|
|
|
<image class="img" src="@/static/image/icon/time2x.png"></image>
|
|
<image class="img" src="@/static/image/icon/time2x.png"></image>
|
|
|
<text class="time">{{item.courseStartDatetime}}</text>
|
|
<text class="time">{{item.courseStartDatetime}}</text>
|
|
@@ -52,6 +56,16 @@
|
|
|
const state = reactive({
|
|
const state = reactive({
|
|
|
courseTypeData:[],//顶部查询数据
|
|
courseTypeData:[],//顶部查询数据
|
|
|
filterPickerData: [{
|
|
filterPickerData: [{
|
|
|
|
|
+ valueIndex:0,//默认值索引
|
|
|
|
|
+ defaultValue:'0',//默认值
|
|
|
|
|
+ list:[{
|
|
|
|
|
+ label:'必修任务',
|
|
|
|
|
+ value:'0',
|
|
|
|
|
+ },{
|
|
|
|
|
+ label:'自主研修',
|
|
|
|
|
+ value:'1',
|
|
|
|
|
+ }]
|
|
|
|
|
+ },{
|
|
|
valueIndex:0,//默认值索引
|
|
valueIndex:0,//默认值索引
|
|
|
defaultValue:'',//默认值
|
|
defaultValue:'',//默认值
|
|
|
list:[]
|
|
list:[]
|
|
@@ -59,22 +73,37 @@
|
|
|
valueIndex:0,//默认值索引
|
|
valueIndex:0,//默认值索引
|
|
|
defaultValue:'',//默认值
|
|
defaultValue:'',//默认值
|
|
|
list:[]
|
|
list:[]
|
|
|
- }],
|
|
|
|
|
- tabList: [{
|
|
|
|
|
- label: '最新发布',
|
|
|
|
|
- value: '0'
|
|
|
|
|
|
|
+ }],//必修任务tab
|
|
|
|
|
+ tabList:[],
|
|
|
|
|
+ mustTabList: [{
|
|
|
|
|
+ label: '全部',
|
|
|
|
|
+ value: ''
|
|
|
}, {
|
|
}, {
|
|
|
- label: '播放最多',
|
|
|
|
|
- value: '1'
|
|
|
|
|
|
|
+ label: '待完成',
|
|
|
|
|
+ value: '3'
|
|
|
|
|
+ }, {
|
|
|
|
|
+ label: '已完成',
|
|
|
|
|
+ value: '4'
|
|
|
}, {
|
|
}, {
|
|
|
- label: '关注最多',
|
|
|
|
|
- value: '2'
|
|
|
|
|
|
|
+ label: '已结束',
|
|
|
|
|
+ value: '1'
|
|
|
}],
|
|
}],
|
|
|
|
|
+ selftabList: [{
|
|
|
|
|
+ label: '学习中',
|
|
|
|
|
+ value: '3'
|
|
|
|
|
+ }, {
|
|
|
|
|
+ label: '已完成',
|
|
|
|
|
+ value: '4'
|
|
|
|
|
+ }, {
|
|
|
|
|
+ label: '已关注',
|
|
|
|
|
+ value: '5'
|
|
|
|
|
+ }],//自主研修tab
|
|
|
pageList:[],//列表数据
|
|
pageList:[],//列表数据
|
|
|
queryStr: '',
|
|
queryStr: '',
|
|
|
- courseType: '0',//排序方式,课程中心参数,0-最新发布,1-播放最多,2-关注最多
|
|
|
|
|
- teachCourseTypeClassId: '',//研修专题
|
|
|
|
|
|
|
+ courseType:'0',//默认必修任务
|
|
|
teachCourseTypeId: '',//内容领域
|
|
teachCourseTypeId: '',//内容领域
|
|
|
|
|
+ teachCourseTypeClassId: '',//研修专题
|
|
|
|
|
+ learnStatus: '',//tab选中值
|
|
|
pageSize: 30,
|
|
pageSize: 30,
|
|
|
pageNum: 1,
|
|
pageNum: 1,
|
|
|
scrollTop:0,
|
|
scrollTop:0,
|
|
@@ -85,6 +114,7 @@
|
|
|
loadStatus:'more',//loading状态
|
|
loadStatus:'more',//loading状态
|
|
|
})
|
|
})
|
|
|
onMounted(() => {
|
|
onMounted(() => {
|
|
|
|
|
+ state.tabList = [...state.mustTabList];
|
|
|
getCourseTypeDataList();
|
|
getCourseTypeDataList();
|
|
|
OnLoadData(true);
|
|
OnLoadData(true);
|
|
|
});
|
|
});
|
|
@@ -99,32 +129,27 @@
|
|
|
}];
|
|
}];
|
|
|
const resData = res?.data || [];
|
|
const resData = res?.data || [];
|
|
|
state.courseTypeData = defaultData.concat(resData);
|
|
state.courseTypeData = defaultData.concat(resData);
|
|
|
- //一级条件
|
|
|
|
|
- state.filterPickerData[0].list = state.courseTypeData.map(item=>({
|
|
|
|
|
|
|
+ //内容领域
|
|
|
|
|
+ state.filterPickerData[1].list = state.courseTypeData.map(item=>({
|
|
|
...item,
|
|
...item,
|
|
|
value:item.id
|
|
value:item.id
|
|
|
}))
|
|
}))
|
|
|
- }else{
|
|
|
|
|
- state.courseTypeData = [];
|
|
|
|
|
- state.filterPickerData = [{
|
|
|
|
|
- valueIndex:0,//默认值索引
|
|
|
|
|
- defaultValue:'',//默认值
|
|
|
|
|
- list:[],
|
|
|
|
|
- },{
|
|
|
|
|
- valueIndex:0,
|
|
|
|
|
- defaultValue:'',//默认值
|
|
|
|
|
- list:[],
|
|
|
|
|
- }]
|
|
|
|
|
}
|
|
}
|
|
|
})
|
|
})
|
|
|
}
|
|
}
|
|
|
//切换条件选择器
|
|
//切换条件选择器
|
|
|
const CommonFilterData = (searchWord,filterPicker,tabsSelected,type) => {
|
|
const CommonFilterData = (searchWord,filterPicker,tabsSelected,type) => {
|
|
|
const {valueIndex, index,filterPickerValue} = filterPicker;
|
|
const {valueIndex, index,filterPickerValue} = filterPicker;
|
|
|
|
|
+ state.queryStr = searchWord;
|
|
|
|
|
+ state.courseType = filterPickerValue[0];
|
|
|
|
|
+ state.teachCourseTypeId = filterPickerValue[1];
|
|
|
|
|
+ state.teachCourseTypeClassId = filterPickerValue[2];
|
|
|
|
|
+ state.learnStatus = tabsSelected;
|
|
|
if(type == 'filterPicker'){
|
|
if(type == 'filterPicker'){
|
|
|
- if(index==0){//索引
|
|
|
|
|
- state.filterPickerData[index].valueIndex = valueIndex;//一级条件选中项的索引
|
|
|
|
|
- state.filterPickerData[1].valueIndex = 0;//二级条件选中项的索引
|
|
|
|
|
|
|
+ state.filterPickerData[index].valueIndex = valueIndex;//研修场景、内容领域、研修专题选中项的索引
|
|
|
|
|
+ if(index==1){//切换内容领域选中项
|
|
|
|
|
+ //研修专题默认切换到全部 同时获取研修专题所有选项
|
|
|
|
|
+ state.filterPickerData[2].valueIndex = 0;
|
|
|
const childrenData = state.courseTypeData?.[valueIndex]?.children || [];
|
|
const childrenData = state.courseTypeData?.[valueIndex]?.children || [];
|
|
|
const childrenList = childrenData.map(item=>({
|
|
const childrenList = childrenData.map(item=>({
|
|
|
...item,
|
|
...item,
|
|
@@ -132,20 +157,22 @@
|
|
|
}))
|
|
}))
|
|
|
if(childrenList.length){
|
|
if(childrenList.length){
|
|
|
childrenList.unshift({
|
|
childrenList.unshift({
|
|
|
- label:'内容领域',
|
|
|
|
|
|
|
+ label:'研修专题',
|
|
|
id:'',
|
|
id:'',
|
|
|
value:''
|
|
value:''
|
|
|
})
|
|
})
|
|
|
}
|
|
}
|
|
|
- state.filterPickerData[1].list = childrenList;//二级条件数据
|
|
|
|
|
|
|
+ state.filterPickerData[2].list = childrenList;
|
|
|
}else{
|
|
}else{
|
|
|
- state.filterPickerData[index].valueIndex = valueIndex;//二级条件选中项的索引
|
|
|
|
|
|
|
+ if(index == 0){
|
|
|
|
|
+ state.filterPickerData[1].valueIndex = 0;//内容领域
|
|
|
|
|
+ state.filterPickerData[2].valueIndex = 0;//研修专题
|
|
|
|
|
+ state.filterPickerData[2].list = [];//研修专题选项
|
|
|
|
|
+ state.tabList = valueIndex == 0 ? [...state.mustTabList] : [...state.selftabList];
|
|
|
|
|
+ state.learnStatus = valueIndex == 0 ? '' : '3';
|
|
|
|
|
+ }
|
|
|
}
|
|
}
|
|
|
}
|
|
}
|
|
|
- state.queryStr = searchWord;
|
|
|
|
|
- state.teachCourseTypeId = filterPickerValue[0];
|
|
|
|
|
- state.teachCourseTypeClassId = filterPickerValue[1];
|
|
|
|
|
- state.courseType = tabsSelected;
|
|
|
|
|
OnLoadData(true)
|
|
OnLoadData(true)
|
|
|
}
|
|
}
|
|
|
/*
|
|
/*
|
|
@@ -161,10 +188,10 @@
|
|
|
state.loadStatus = 'loading';
|
|
state.loadStatus = 'loading';
|
|
|
recordPageListData({
|
|
recordPageListData({
|
|
|
queryStr:state.queryStr,
|
|
queryStr:state.queryStr,
|
|
|
|
|
+ courseType:state.courseType,
|
|
|
teachCourseTypeId:state.teachCourseTypeId,
|
|
teachCourseTypeId:state.teachCourseTypeId,
|
|
|
teachCourseTypeClassId:state.teachCourseTypeClassId,
|
|
teachCourseTypeClassId:state.teachCourseTypeClassId,
|
|
|
- courseType:'0',
|
|
|
|
|
- learnStatus:'',
|
|
|
|
|
|
|
+ learnStatus:state.learnStatus,
|
|
|
pageSize:state.pageSize,
|
|
pageSize:state.pageSize,
|
|
|
pageNum:state.pageNum
|
|
pageNum:state.pageNum
|
|
|
}).then(res=>{
|
|
}).then(res=>{
|
|
@@ -255,15 +282,27 @@
|
|
|
position: absolute;
|
|
position: absolute;
|
|
|
top:0;
|
|
top:0;
|
|
|
right: 0;
|
|
right: 0;
|
|
|
- width: 134rpx;
|
|
|
|
|
- height: 48rpx;
|
|
|
|
|
- background-color: #2E64FA;
|
|
|
|
|
border-radius: 0px 8px 0px 8px;
|
|
border-radius: 0px 8px 0px 8px;
|
|
|
font-weight: 400;
|
|
font-weight: 400;
|
|
|
font-size: 28rpx;
|
|
font-size: 28rpx;
|
|
|
color: #FFFFFF;
|
|
color: #FFFFFF;
|
|
|
text-align: center;
|
|
text-align: center;
|
|
|
|
|
+ height: 48rpx;
|
|
|
line-height: 48rpx;
|
|
line-height: 48rpx;
|
|
|
|
|
+ &.wait{
|
|
|
|
|
+ min-width: 134rpx;
|
|
|
|
|
+ padding:0 16rpx;
|
|
|
|
|
+ box-sizing: border-box;
|
|
|
|
|
+ background-color: #2E64FA;
|
|
|
|
|
+ }
|
|
|
|
|
+ &.finish{
|
|
|
|
|
+ width: 116rpx;
|
|
|
|
|
+ background-color: #90CB75;
|
|
|
|
|
+ }
|
|
|
|
|
+ &.overtime{
|
|
|
|
|
+ width: 116rpx;
|
|
|
|
|
+ background-color: #F56C6C;
|
|
|
|
|
+ }
|
|
|
}
|
|
}
|
|
|
.progress{
|
|
.progress{
|
|
|
width: 100%;
|
|
width: 100%;
|