<template>
<view>
<cu-custom ref="cuCustom" bgColor="bg-gradual-blueness" :isBack="true" :isRingt="true" :backUrl="backUrl">
<block slot="backText">返回</block>
<block slot="content">我的任务</block>
</cu-custom>
<scroll-view scroll-x class="bg-white nav">
<view class="flex text-center">
<view class="cu-item flex-sub" :class="index==TabCur?'text-orange cur':''"
v-for="(item,index) in tabNav" :key="index" @tap="tabSelect" :data-id="index">
{{tabNav[index]}}
</view>
</view>
</scroll-view>
<block>
<view v-if="TabCur==1" class="tasks-bg">
<view class="tasks-content">
<view class="tasks-top">
<view class="tasks-nr">
<view>
{{JOINNUM}}次
</view>
<view>
参加考试
</view>
</view>
<view class="tasks-nr">
<view>
{{PASSNUM}}次
</view>
<view>
合格
</view>
</view>
<view class="tasks-nr">
<view>
{{NOPASSNUM}}次
</view>
<view>
不合格
</view>
</view>
</view>
</view>
<view class="stripes"></view>
</view>
<mescroll-body ref="mescrollRef" @init="mescrollInit" @down="downCallback" @up="upCallback" :down="downOption" :up="upOption">
<view class="tasks-warp" v-if="TabCur==0 && taskList.length>0" v-for="(item,index) in taskList" :key="item.STUDYTASK_ID">
<view class="tasks-item">
<view class="title">
任务名称：{{item.STUDY_NAME}}
</view>
<view class="tasks-state">
培训行业类型：{{item.TRAINTYPENAME}}
</view>
<view class="tasks-state">
岗位培训类型：{{item.POSTTYPENAME}}
</view>
<view class="tasks-state">
培训时间：{{item.PEIXUE_START_TIME}}至{{item.PEIXUE_END_TIME}}
</view>
<view class="tasks-state">
任务状态：{{item.TASKSTATENAME}}
</view>
<view v-if="item.STAGESTEP === '1'" class="flex">
<view class="tasks-time">
{{ item.LASTTIME }}
</view>
</view>
<view v-else-if="item.STAGESTEP === '2'" class="flex">
<view class="tasks-time">
剩余：{{ item.LASTTIME }}
</view>
<view class="">
<button class="cu-btn bg-orange round sm" @click="$noMultipleClicks(goToMyStudy, item)">立即学习</button>
</view>
</view>
</view>
</view>
<view class="tasks-warp" v-if="TabCur==1 && scoreList.length>0" v-for="(item,index) in scoreList" :key="item.STAGESTUDENTRELATION_ID">
<view class="tasks-item">
<view class="title">
任务名称：{{item.STUDY_NAME}}
</view>
<view class="tasks-state">
考试试卷：{{item.EXAMNAME}}
</view>
<view class="tasks-state">
考试结果：
<text v-if=" Number(item.PASSSCORE) <= Number(item.STAGEEXAMSCORE)">已通过</text>
<text v-else-if="Number(item.PASSSCORE) > Number(item.STAGEEXAMSCORE)">未通过</text>
<text v-else-if="item.STAGEEXAMSTATE=='4'">未参加</text>
</view>
<view class="flex">
<view class="tasks-state">
考试成绩：
<text v-if="item.STAGEEXAMSTATE=='4'">-</text>
<text v-else>{{item.STAGEEXAMSCORE}}分</text>
</view>
<view class="">
<button class="cu-btn round bg-orange sm" @click="$noMultipleClicks(goToMyExamResult, item)">考试详情</button>
</view>
</view>
</view>
</view>
<view class="tasks-warp" v-if="TabCur==2 && tempList.length>0" v-for="(item,index) in tempList" :key="item.TEMPSTUDY_ID">
<view class="tasks-item">
<view class="title">
任务名称：{{item.NAME}}
</view>
<view class="tasks-state">
课件类型：{{item.COURSEWARE_TYPE == 1 ? '视频课件':'资料课件'}}
</view>
<view class="flex">
<view class="tasks-state">
状态：
<text v-if="item.STUDY_STATUS=='0'">未学习</text>
<text v-else-if="item.STUDY_STATUS=='1'">已学习</text>
</view>
<view class="">
<button class="cu-btn round bg-orange sm" @click="$noMultipleClicks(goToMyTemp, item)">立即学习</button>
</view>
</view>
</view>
</view>
<view v-if="(TabCur==0 &&taskList.length<1) || (TabCur==1 &&scoreList.length < 1) || (TabCur==2 &&tempList.length < 1)" class="dy-null">
<view class="dy-null-img">
<image src="../../../static/null.png" mode=""></image>
</view>
<view class="dy-null-title">
暂无数据
</view>
</view>
<view class="cu-tabbar-height"></view>
</mescroll-body>
</block>
<view class="cu-modal" :class="modalName=='Modal'?'show':''">
<writing-board @confirm="subCanvas" @cancel="hideModal"></writing-board>
</view>
</view>
</template>
<script>
import {
basePath,baseImgPath,corpinfoId,loginSession,loginUser
} from '@/common/tool.js';
import MescrollMixin from "@/components/mescroll-uni/mescroll-mixins.js"
import writingBoard from "@/components/writing-board/writing-board.vue"
export default {
mixins: [MescrollMixin], // 使用mixin
components: {
writingBoard
},
data() {
return {
baseImgPath: baseImgPath,
CustomBar: this.CustomBar,
backUrl: '/pages/application/onlinexxks/home',
sTop: 0,
totalHeight: 0,
downOption: {
use: true,
auto: false
},
upOption: {
use: true,
auto: false,
noMoreSize: 1,
textNoMore: '--已经没有更多了--'
},
scrollLeft: 0,
taskList: [], //任务列表返回数据
scoreList: [], //成绩列表返回数据F
tempList:[],//临时学习数据
page: 1, //分页参数--页数
rows: 10, //分页参数--每页数据条数
totalCount: 0, //分页参数--初始化页数
isEnd: false, //防止多次刷新
totalPage: 0, //分页参数--分页数量
noClick: true,
TabCur: 0,
tabNav: ['课程列表', '成绩查询','临时学习'],
JOINNUM: 0,
PASSNUM: 0,
NOPASSNUM: 0,
STAGESTUDENTRELATION_ID: '',
modalName: null,
imgList: []
};
},
onLoad() {
//页面显示或从后台跳回小程序时显示此页面时触发，从跳转页面返回时触发，不能传递参数
var _this = this
_this.background = require('@/common/background.json')
_this.showCount = -1
_this.currentPage = 1
_this.isEnd = false
_this.getTaskInit()
loginSession();
},
onShow() {
},
beforeDestroy() {
// 清除定时器
this.taskList.forEach((ele) => {
if (ele.countDown) {
clearInterval(ele.countDown)
ele.countDown = null
}
})
},
methods: {
tabSelect(e) {
this.TabCur = e.currentTarget.dataset.id;
this.scrollLeft = (e.currentTarget.dataset.id - 1) * 60
if (this.TabCur == 0) {
this.scoreList = []
this.getTaskInit()
} else if (this.TabCur == 1){
// 清除定时器
this.taskList.forEach((ele) => {
if (ele.countDown) {
clearInterval(ele.countDown)
ele.countDown = null
}
})
this.taskList = []
this.getScoreInit()
} else if (this.TabCur == 2){
// 清除定时器
this.taskList.forEach((ele) => {
if (ele.countDown) {
clearInterval(ele.countDown)
ele.countDown = null
}
})
this.taskList = []
this.getTempInit()
}
},
//重置分页
initPageData() {
var _this = this;
_this.showCount = -1;
_this.currentPage = 1;
_this.isEnd = false;
},
//翻页
turnPage() {
var _this = this;
_this.showCount = -1;
_this.currentPage = _this.currentPage + 1;
_this.isEnd = false;
},
//跳转事件
downCallback(page) { //搜索按钮事件
var _this = this;
if (_this.TabCur==0) {
_this.getTaskQuery(page)
} else if (_this.TabCur==1){
_this.getScoreQuery(page)
} else if (_this.TabCur==2){
_this.getTempQuery(page)
}
},
// 滑动到底方法
upCallback(page) {
var _this = this;
if (_this.TabCur==0) {
_this.scrolltolowerTask(page)
} else if (_this.TabCur==1){
_this.scrolltolowerScore(page)
}else if (_this.TabCur==2){
_this.scrolltolowerTemp(page)
}
},
//切换选项卡初始化任务列表
getTaskInit() { //搜索按钮事件
var _this = this
_this.initPageData()
_this.taskList = []
_this.getTaskData();
},
//下拉刷新任务列表
getTaskQuery(page) {
var _this = this;
_this.initPageData()
_this.taskList = [];
_this.getTaskData();
},
// 上滑加载更多
scrolltolowerTask(page) {
var _this = this;
_this.turnPage()
if (_this.totalPage >= _this.currentPage) {
_this.getTaskData(); //开始分页查询
}
},
getTaskData() {
var _this = this;
_this.JOINNUM = 0
_this.PASSNUM = 0
_this.NOPASSNUM = 0
if (_this.isEnd) {
return
} else {
_this.isEnd = true;
}
uni.showLoading({
title: "加载中..."
}); //加载中动画
uni.request({
url: basePath + '/app/stagestudentrelation/pageTaskByUser?showCount=' + _this.showCount + '¤tPage=' + _this.currentPage,
method: 'POST',
dataType: 'json',
header: {
'Content-type': 'application/x-www-form-urlencoded'
},
data: {
tm: new Date().getTime(),
CORPINFO_ID:loginUser.CORPINFO_ID,
USER_ID:loginUser.USER_ID,
},
success: (res) => {
uni.hideLoading(); //结束加载中动画
if (res.data != null) {
_this.totalPage = res.data.page.totalPage
// 从后端获取的数据，将这一步骤放到异步获取后端数据的地方，对后端返回的数据进行处理
res.data.varList.forEach((ele) => {
// 调用定时器传递
_this.timeInterval(ele)
// 如果数据不更新的话，增加下面代码
// res.data.varList.splice(1, 0)
})
// 从后端获取的数据，将这一步骤放到异步获取后端数据的地方，对后端返回的数据进行处理
if (_this.taskList.length == 0) {
_this.taskList = res.data.varList;
} else {
if (res.data.varList != null) {
_this.list2 = res.data.varList;
_this.taskList = _this.taskList.concat(_this.list2);
}
}
_this.mescroll.endSuccess(res.data.varList.length, (res.data.page.totalPage > res.data.page.currentPage))
_this.mescroll.endUpScroll(res.data.page.totalPage == res.data.page.currentPage)
}
},
fail: () => {
// 请求失败,隐藏加载状态
_this.mescroll.endErr()
}
})
},
// 倒计时定时器
timeInterval(row) {
var nowDate = new Date().getTime()
const beginTime = new Date(row.PEIXUE_START_TIME.replace(/-/g,'/')).getTime()
const endTime = new Date(row.PEIXUE_END_TIME.replace(/-/g,'/') + " 23:59:59").getTime()
if (nowDate > endTime || row.STATE == 2) {
this.$set(row, 'TASKSTATENAME', '已结束')
this.$set(row, 'STAGESTEP', '3')
} else {
if (beginTime <= nowDate && nowDate <= endTime && (row.STAGEEXAMSTATE == '3' || row.STAGEEXAMSTATE == '4')) {
this.$set(row, 'TASKSTATENAME', '已结束')
this.$set(row, 'STAGESTEP', '3')
}else {
// 绑定定时器
row.countDown = setInterval(() => {
nowDate = new Date().getTime()
if (beginTime - nowDate > 0) {
// 对每行的剩余时间进行设置
row.lastTime = beginTime - nowDate
row.stagestep = '1' // 未考试
this.$set(row, 'TASKSTATENAME', '未开始')
this.$set(row, 'LASTTIME', this.timeFormat(row.lastTime))
this.$set(row, 'STAGESTEP', row.stagestep)
// if((beginTime-nowDate) == 5000) {
// uni.showModal({
// title: '',
// content: '<<'+row.EXAMNAME+'>>离开考时间还有五分钟！',
// showCancel: false,
// confirmText: '确定',
// success: res => {}
// })
// }
} else if (beginTime <= nowDate && nowDate <= endTime) {
row.lastTime = endTime - nowDate
row.stagestep = '2' // 已开考
this.$set(row, 'TASKSTATENAME', '进行中')
this.$set(row, 'LASTTIME', this.timeFormat(row.lastTime))
this.$set(row, 'STAGESTEP', row.stagestep)
if (row.STATE == 0){
row.STATE = 1
this.updateTaskState(row)
}
} else {
row.stagestep = '3' // 已结束
this.$set(row, 'TASKSTATENAME', '已结束')
this.$set(row, 'STAGESTEP', row.stagestep)
if (row.STAGEEXAMSTATE == '1' || row.STAGEEXAMSTATE == '2') { // 到时后自动更新学员状态为未参加考试
uni.request({
url: basePath + '/app/stagestudentrelation/updateStudentState',
method: 'POST',
dataType: 'json',
header: {
'Content-type': 'application/x-www-form-urlencoded'
},
data: {
USERNAME: loginUser.USERNAME,
// TYPE: '3',
STAGEEXAMSTATE: '4',
STAGESTUDENTRELATION_ID: row.STAGESTUDENTRELATION_ID,
CORPINFO_ID:loginUser.CORPINFO_ID,
USER_ID:loginUser.USER_ID,
},
success: (res) => {}
})
}
if (row.STATE != 2){
row.STATE = 2
this.updateTaskState(row)
}
// 清除定时器
if(row.countDown) {
clearInterval(row.countDown)
row.countDown = null
}
}
}, 1000)
}
}
},
updateTaskState(item){
uni.request({
url: basePath + '/app/studytask/updateTaskState',
method: 'POST',
dataType: 'json',
header: {
'Content-type': 'application/x-www-form-urlencoded'
},
data: {
STUDYTASK_ID: item.STUDYTASK_ID,
STATE: item.STATE,
USERNAME: loginUser.USERNAME,
CORPINFO_ID:loginUser.CORPINFO_ID,
USER_ID:loginUser.USER_ID,
},
success: (res) => {}
})
},
// 剩余时间格式化
timeFormat(times) {
if (times > 0) {
const days = this.addZero(
Math.floor(times / 1000 / 60 / 60 / 24)
) // 天
const hours = this.addZero(
Math.floor((times / 1000 / 60 / 60) % 24)
) // 时
const minutes = this.addZero(
Math.floor((times / 1000 / 60) % 60)
) // 分
const seconds = this.addZero(Math.floor((times / 1000) % 60)) // 秒
var html = days !== '00' ? days + '天' : ''
html += hours !== '00' ? hours + '小时' : ''
html += minutes !== '00' ? minutes + '分钟' : ''
html += seconds + '秒'
return html
} else {
return '已超时'
}
},
// 个位补零
addZero(d) {
return parseInt(d) < 10 ? '0' + d : d
},
goToMyStudy(item) {
if (item.STAGEEXAMSTATE == '1') {
this.STAGESTUDENTRELATION_ID = item.STAGESTUDENTRELATION_ID
this.modalName = 'Modal'
} else {
uni.redirectTo({
url: '/pages/application/onlinexxks/my-study?STAGESTUDENTRELATION_ID=' + item.STAGESTUDENTRELATION_ID
})
}
},
/*
*手写板
*/
hideModal(e) {
this.modalName = null
},
//完成
subCanvas(e) {
console.info(e)
this.imgList.splice(0,this.imgList.length)
this.imgList.push(e)
console.info(this.imgList)
this.saveSign()
this.hideModal()
},
saveSign(){
var _this = this;
uni.uploadFile({
url: basePath+'app/stagestudentrelation/sign',
filePath: _this.imgList[0].filePath,
name: 'FFILE',
formData:{
USERNAME: loginUser.USERNAME,
STAGEEXAMSTATE: '2',
STAGESTUDENTRELATION_ID: _this.STAGESTUDENTRELATION_ID,
CORPINFO_ID: loginUser.CORPINFO_ID,
USER_ID: loginUser.USER_ID,
},
success: (res) => {
console.info(res)
uni.redirectTo({
url: '/pages/application/onlinexxks/my-study?STAGESTUDENTRELATION_ID=' + _this.STAGESTUDENTRELATION_ID
})
}
})
},
/** 成績查詢功能 */
//切换选项卡初始化成績列表
getScoreInit() {
var _this = this;
_this.initPageData()
_this.scoreList = []
_this.getScoreData()
},
//下拉刷新成績列表
getScoreQuery(page) {
var _this = this;
_this.initPageData()
_this.scoreList = []
_this.getScoreData()
},
// 上滑加载更多
scrolltolowerScore(page) {
var _this = this;
_this.turnPage()
if (_this.totalPage >= _this.currentPage) {
_this.getScoreData()
}
},
getScoreData() {
var _this = this;
if (_this.isEnd) {
return
} else {
this.isEnd = true;
}
uni.showLoading({
title: "加载中..."
}); //加载中动画
uni.request({
url: basePath + '/app/stagestudentrelation/pageTaskScoreByUser?showCount=' + _this.showCount + '¤tPage=' + _this.currentPage,
method: 'POST',
dataType: 'json',
header: {
'Content-type': 'application/x-www-form-urlencoded'
},
data: {
tm: new Date().getTime(),
CORPINFO_ID:loginUser.CORPINFO_ID,
USER_ID:loginUser.USER_ID,
},
success: (res) => {
uni.hideLoading(); //结束加载中动画
if (res.data != null) {
_this.totalPage = res.data.page.totalPage
this.JOINNUM = 0
this.PASSNUM = 0
this.NOPASSNUM = 0
res.data.varListAll.forEach((ele) => {
if (ele.STAGEEXAMSTATE == '3' || ele.STAGEEXAMSTATE == '2'){
// if(+(ele.STAGEEXAMSCORE) <= '0'){
// ele.STAGEEXAMSCORE = '0'
// }
if(ele.STAGEEXAMSCORE !== '-1'){
this.JOINNUM ++
}
if (parseInt(ele.STAGEEXAMSCORE) >= parseInt(ele.PASSSCORE)) {
this.PASSNUM++
} else{
this.NOPASSNUM++
}
}
})
// 从后端获取的数据，将这一步骤放到异步获取后端数据的地方，对后端返回的数据进行处理
if (_this.scoreList.length == 0) {
_this.scoreList = res.data.varList;
} else {
if (res.data.varList != null) {
_this.list2 = res.data.varList;
_this.scoreList = _this.scoreList.concat(_this.list2);
}
}
_this.mescroll.endSuccess(res.data.varList.length, (res.data.page.totalPage > res.data.page.currentPage))
_this.mescroll.endUpScroll(res.data.page.totalPage == res.data.page.currentPage)
}
},
fail: () => {
// 请求失败,隐藏加载状态
_this.mescroll.endErr()
}
})
},
goToMyExamResult(item) {
uni.navigateTo({
url: '/pages/application/onlinexxks/my-exam-detail?STUDYTASK_ID=' + item.STUDYTASK_ID + '&STAGEEXAMPAPER_ID=' + item.STAGEEXAMPAPER_ID
})
},
/** 临时学习 */
//切换选项卡初始化成績列表
getTempInit() {
var _this = this;
_this.initPageData()
_this.tempList = []
_this.getTempData()
},
//下拉刷新成績列表
getTempQuery(page) {
var _this = this;
_this.initPageData()
_this.tempList = []
_this.getTempData()
},
// 上滑加载更多
scrolltolowerTemp(page) {
var _this = this;
_this.turnPage()
if (_this.totalPage >= _this.currentPage) {
_this.getTempData()
}
},
getTempData() {
var _this = this;
_this.JOINNUM = 0
_this.PASSNUM = 0
_this.NOPASSNUM = 0
if (_this.isEnd) {
return
} else {
this.isEnd = true;
}
uni.showLoading({
title: "加载中..."
}); //加载中动画
uni.request({
url: basePath + '/app/tempstudy/list?showCount=' + _this.showCount + '¤tPage=' + _this.currentPage,
method: 'POST',
dataType: 'json',
header: {
'Content-type': 'application/x-www-form-urlencoded'
},
data: {
tm: new Date().getTime(),
CORPINFO_ID:loginUser.CORPINFO_ID,
USER_ID:loginUser.USER_ID,
},
success: (res) => {
uni.hideLoading(); //结束加载中动画
if (res.data != null) {
_this.totalPage = res.data.page.totalPage
// 从后端获取的数据，将这一步骤放到异步获取后端数据的地方，对后端返回的数据进行处理
if (_this.tempList.length == 0) {
_this.tempList = res.data.varList;
} else {
if (res.data.varList != null) {
_this.tempList = _this.tempList.concat( res.data.varList);
}
}
_this.mescroll.endSuccess(res.data.varList.length, (res.data.page.totalPage > res.data.page.currentPage))
_this.mescroll.endUpScroll(res.data.page.totalPage == res.data.page.currentPage)
}
},
fail: () => {
// 请求失败,隐藏加载状态
_this.mescroll.endErr()
}
})
},
goToMyTemp(item) {
if(item.COURSEWARE_TYPE == 1){
uni.navigateTo({
url: '/pages/application/onlinexxks/temp-study-video?TEMPSTUDYUSERS_ID=' + item.TEMPSTUDYUSERS_ID + '&COURSEWARE_ID=' + item.COURSEWARE_ID
})
}else{
uni.navigateTo({
url: '/pages/application/onlinexxks/temp-study-data?TEMPSTUDYUSERS_ID=' + item.TEMPSTUDYUSERS_ID + '&COURSEWARE_ID=' + item.COURSEWARE_ID
})
}
}
}
}
</script>