Files
learning-system-mobile/pages/study/index.vue
2022-05-30 23:03:25 +08:00

1473 lines
37 KiB
Vue
Raw Blame History

This file contains ambiguous Unicode characters
This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.
<template>
<view>
<view class="tabbar">
<view class="tabbar-item" @click="clicktab(0)" :class="{'active':tabIndex===0}">
<u-badge :type="type" max="99" :value="value" class="tabber-co"></u-badge>
学习任务
</view>
<view class="tabber-item" @click="clicktab(1)" :class="{'active':tabIndex===1}">我报名的</view>
<!-- <view class="tabbar-item" @click="clicktab(2)" :class="{'active':tabIndex===2}">历史记录</view> -->
</view>
<!-- 学习任务 -->
<view class="listbox" v-show="tabIndex===0">
<view class="listbox-top">
<view class="top-ten" style="margin-top: 21px;margin-left: 13px;">
<!-- <u-picker v-model="loadstatus" :show="loadstatusSelecShow" @cancel="loadstatusSelecShow = false"
@confirm="loadchooseStatust" :columns="statustList" keyName="name"></u-picker> -->
<!-- <text class="textbtn" @click="loadstatusSelecShow = !loadstatusSelecShow">状态</text> -->
<text class="textbtn" @click="loadstatusSelecShow=!loadstatusSelecShow">状态</text>
</view>
<view class="searchView">
<u-search :clearabled="true" @search="loadBoeData(true)" @clear="loadBoeData(true)"
placeholder="搜索关键字" v-model="loadkeyword" :showAction="false" shape="square" bgColor="#ffffff">
</u-search>
</view>
</view>
<view class="sea-show" v-show="loadstatusSelecShow">
<text v-for="(item,index) in statustList" :key="index"
:class="[item.value === boeStatus?'sea-active':'','sea-index' ]"
@click="loadchooseStatust(item.value)">{{item.name}}</text>
</view>
<!-- <view class="sea-show" v-show="loadstatusSelecShow">
<text v-for="(item,index) in statustList" :class="[item.value == boeStatus?'sea-active':'','sea-index' ]" @click="loadchooseStatust(item.value)">{{item.name}}</text>
</view> -->
<view class="course content" v-for="(task,idx) in couresList" :key="idx" @click="loaddetail(task)">
<view class="course-info">
<!-- <view class="course-title two-line-ellipsis" style="margin-bottom: 20upx;"><text
style="font-size: 32upx;color: #343434; font-weight: bold;" v-html="task.cmtask_name"></text></view> -->
<view class="course-info-left">
<!-- <img :src="task.cmtask_imgurl" style="width: 152upx;height: 88upx; border-radius: 8upx;"> -->
<!-- <view class="courseimage" style="width: 152rpx;height: 88rpx;"> -->
<course-image :course="task" width="265upx" height="154upx"></course-image>
<!-- </view> -->
<view class="course-text">
<!-- <view class="course">
<u-line-progress inactiveColor="#e2e2e2" :percentage="task.percentage" :showText="false"
height="5" activeColor="#18C6FB"></u-line-progress>
</view> -->
<view class="course-title one-line-ellipsis" style="margin-bottom: auto"><text
style="font-size: 32upx; font-weight: bold;" v-html="task.cmtask_name"></text>
</view>
<view class="course-btn">
<view style="font-size: 24upx;color: #BFBFBF;margin-top: 14upx;margin-bottom: 6upx">
推送时间:
{{task.created_at}}
</view>
<!-- <view class="" style="font-weight: 600;margin-left: 25px;">{{task.percentage}}%</view> -->
</view>
<view class="coures-staus">
<text v-if="task.cmtask_status == 0">未开始</text>
<text v-if="task.cmtask_status == 1">进行中</text>
<text v-if="task.cmtask_status == 2">已完成</text>
</view>
</view>
</view>
</view>
</view>
<view>
<uni-load-more :status="loadStatus"></uni-load-more>
</view>
</view>
<!-- 自主学习 -->
<view class="listbox" v-show="tabIndex===1">
<view class="listbox-top">
<!-- 自主学习状态查询 -->
<!-- <view class="top-ten">
<u-picker v-model="classType" :show="statusSelectShow" @cancel="statusSelectShow = false"
@confirm="chooseStatus" :columns="statustList" keyName="name"></u-picker>
<text class="textbtn" @click="statusSelectShow = true">{{statusBtnName}}</text>
</view> -->
<!-- 自主学习类型查询 -->
<view class="top-ten" style="margin-top: 21px;margin-left: 13px;">
<!-- <u-picker v-model="statust" :show="statusSelecShow" @cancel="statusSelecShow = false"
@confirm="chooseStatust" :columns="typeArray" keyName="name"></u-picker>
<text class="textbtn" @click="statusSelecShow = true">{{statusBtns}}</text> -->
<text class="textbtn" @click="statusSelecShow=!statusSelecShow;autonomyStatusShow=false">类型</text>
<text class="textbtn" style="margin:0 20upx;"
@click="autonomyStatusShow=!autonomyStatusShow;statusSelecShow=false">进度</text>
</view>
<view class="searchView" style="margin-left: 0;">
<u-search :clearabled="true" @search="searchData()" @clear="searchData()" placeholder="搜索关键字"
v-model="autonomy.keyword" :showAction="false" shape="square" bgColor="#ffffff"></u-search>
</view>
</view>
<view class="sea-show" v-show="statusSelecShow">
<text v-for="(item,tidx) in typeArray" :key="tidx"
:class="[item.value == classType ?'sea-active':'','sea-index' ]"
@click="Application(item.value)">{{item.name}}</text>
</view>
<view class="sea-show" v-show="autonomyStatusShow">
<text :class="[autonomy.status == 0?'sea-active':'','sea-index']" @click="autonomyStatus(0)">全部</text>
<text :class="[autonomy.status == 1?'sea-active':'','sea-index']" @click="autonomyStatus(1)">未开始</text>
<text :class="[autonomy.status == 2?'sea-active':'','sea-index']" @click="autonomyStatus(2)">进行中</text>
<text :class="[autonomy.status == 9?'sea-active':'','sea-index']" @click="autonomyStatus(9)">已完成</text>
</view>
<view v-if="studyList.length == 0 && couresList.length == 0 && isOne" class="zan-wu">
您还没有学习课程快去学习吧
</view>
<u-toast ref="articleToast"></u-toast>
<view class="course content" v-for="(c, idxs) in studyList" :key="idxs" @click="toStudy(c)">
<view class="course-info">
<view class="course-info-left">
<view style="position: relative;">
<course-image class="uc-course-type" :course="c" width="265upx" height="154upx">
</course-image>
<text class="uc-course-type-text" v-if="c.courseType == 10">录播</text>
<text class="uc-course-type-text" v-if="c.courseType == 20">录播</text>
<text class="uc-course-type-text" v-if="c.courseType == 'online-course'">录播</text>
<text class="uc-course-type-text" v-if="c.courseType == 'face-course'">线下课</text>
<text v-if="c.courseType == 'project'" class="uc-course-type-text">学习项目</text>
</view>
<view class="course-text" style="justify-content: space-between;position: relative;">
<view class="course-title one-line-ellipsis" style="width: 90%;">
<text style="font-size: 30upx; font-weight: bold;"
v-html="$keywordActiveShow(c.courseName, autonomy.keyword)"></text>
</view>
<view class="coures-midd">
<view class="course-author">
{{c.teacherName}}
</view>
<!-- <view class="coures-button"> -->
<!-- <text class="toStudyText">
<u-icon v-if="c.progress==100" @click.native.stop="toStudy(c)" :size="16" label="回顾"
:bold="true" :labelSize="11" labelColor="#FF8E00" color="#FF8E00" name="reload">
</u-icon>
<u-icon v-else @click.native.stop="toStudy(c)" :size="16" label="播放" :bold="true"
:labelSize="11" labelColor="#FF8E00" color="#FF8E00" name="play-right"></u-icon>
</text> -->
<!-- </view> -->
</view>
<view class="rowbtn">
<image @click.native.stop="rowbtn(c)" style="width: 100%;height: 100%;"
src="../../static/images/icon/more.png" alt="">
</view>
<view class="coures-bottom coures-midd">
<view class="coures-staus">
<text v-html="displayWord(c)"></text>
</view>
<view class="coures-button">
<text class="toStudyText">
<u-icon v-if="c.progress==100" @click.native.stop="toStudy(c)" :size="16"
label="回顾" :bold="true" :labelSize="11" labelColor="#FF8E00" color="#FF8E00"
name="reload">
</u-icon>
<u-icon v-else @click.native.stop="toStudy(c)" :size="16" label="播放"
:bold="true" :labelSize="11" labelColor="#FF8E00" color="#FF8E00"
name="play-right"></u-icon>
</text>
</view>
</view>
</view>
</view>
</view>
</view>
<!-- 用了display:none隐藏后期不需要删除 -->
<view style="display:none" class="course content" v-for="(c, idxs) in studyList" :key="idxs+'value'"
@click="toStudy(c)">
<view class="course-info">
<view class="course-titles" style="display: flex;align-items: center;">
<text class="Recording" v-if="c.courseType == 10">录播</text>
<text class="Recording" v-if="c.courseType == 20">录播</text>
<text v-if="c.courseType == 'online-course'" class="Recording">录播</text>
<text v-if="c.courseType == 'face-course'" class="uc-course-type3">面授</text>
<text v-if="c.courseType == 'project'" class="uc-course-type4">学习项目</text>
<!-- <u-parse :content="c.courseName"></u-parse> -->
<text v-html="$keywordActiveShow(c.courseName, autonomy.keyword)"></text>
</view>
<view class="course-info-left">
<!-- <img src="../../static/temp/course.png" style="width: 131px;height: 73px;"> -->
<view style="width: 152upx;height: 88upx;border-radius: 8px;">
<course-image :course="c" width="152upx" height="88upx"></course-image>
</view>
<view class="course-text">
<view>
<!-- :border-radius="50" -->
<progress :percent="c.progress" stroke-width="5" activeColor="#18C6FB"></progress>
</view>
<view class="course-btn" style="margin-top: 26upx;height:24upx">
<view class="btn-wz" v-if="c.addTime">报名时间:{{ c.addTime }}</view>
</view>
<view class="btn-bai"
style="position: absolute;right: 0;color: #2A2C31;font-size: 36upx;font-weight: 600;">
{{ c.progress }}%
</view>
</view>
</view>
</view>
</view>
<view>
<uni-load-more :status="loadStatus"></uni-load-more>
</view>
</view>
<!-- 历史记录 -->
<view class="listbox" v-if="tabIndex===2">
<view class="listboxtwo-top">
<!-- 历史记录类型查询 -->
<view class="top-ten">
<u-picker v-model="classType" :show="hisstatusSelectShow" @cancel="hisstatusSelectShow = false"
@confirm="hischooseStatus" :columns="typeArray" keyName="name"></u-picker>
<text class="textbtn" @click="hisstatusSelectShow = true">{{hisstatusBtnName}}</text>
</view>
<!-- <view class="top-ten">
<u-picker v-model="statust" :show="statusSelecShow" @cancel="statusSelecShow = false"
@confirm="chooseStatust" :columns="statustArray" keyName="name"></u-picker>
<text class="textbtn" @click="statusSelecShow = true">{{statusBtns}}</text>
</view> -->
<view class="searchView">
<u-search :clearabled="true" @search="history(true)" placeholder="搜索关键字" v-model="hiskeyword"
:showAction="false" shape="square" bgColor="#ffffff"></u-search>
</view>
</view>
<view class="course content" v-for="(c,idx) in historyList.list" :key="idx" @click="choose(c)">
<view class="course-info">
<view class="course-titles">
<text v-if="c.courseType==10">[录播]</text><text v-if="c.courseType==20">[录播]</text>
{{c.courseName}}
</view>
<view class="course-info-left">
<!-- <img src="../../static/temp/course.png" style="width: 131px;height: 73px;"> -->
<course-image :course="c"></course-image>
<view class="course-text">
<view>来源自主学习</view>
<view>完成时间: {{c.created_at}}</view>
</view>
</view>
</view>
</view>
<view>
<uni-load-more :status="loadStatus"></uni-load-more>
</view>
</view>
<u-modal :show="studyResetShow" :showCancelButton="true" @cancel="cancelResetStudy" @confirm="resetStudy"
ref="uModal" :asyncClose="true">
您确定要重新学习吗
</u-modal>
<u-popup :show="btnsShow" @close="closeBtns">
<view>
<view @click="del()" class="big-button" style="color: #db0000;">删除</view>
<view @click="closeBtns()" class="big-button">取消</view>
</view>
</u-popup>
<u-overlay :show="overlayShow && isOneStady === 0">
<view class="warp">
<!-- <view class="rect" @tap.stop></view> -->
<view class="overlay-box">
<view class="box-cen">
<view @click="jupe(lastStudy)" class="course-left">
<text v-if="lastStudy.courseType==10" class="course-type">录播</text>
<text v-if="lastStudy.courseType==20" class="course-type">录播</text>
<text v-if="lastStudy.courseType=='online-course'" class="course-type">录播</text>
<text v-if="lastStudy.courseType=='face-course'" class="course-type">面授班</text>
<text v-if="lastStudy.courseType=='project'" class="course-type">学习项目</text>
<course-image :course="lastStudy" width="164upx" height="102upx"></course-image>
</view>
<view @click="jupe(lastStudy)" class="box-title">
<text>您上次学习到</text>
<text class="title-name">{{lastStudy.courseName}}</text>
</view>
<text class="box-icon" @click="closeShow()">
<u-icon name="close" @click="closeShow()" style="margin-left: 20rpx;"></u-icon>
</text>
</view>
</view>
</view>
</u-overlay>
<u-overlay :show="xuanShow">
<view class="warp xuan">
<view class="xuan-info">
<view class="xuan-close">
<u-icon name="close" @click="xuanClose()" class="xuan-icon"></u-icon>
</view>
<view class="xuan-box">
<image style="width:325px;height: 407px;" src="/static/images/xuan-bg1.png"></image>
</view>
<view class="xuan-btn" @click="xuanClose()">
<image style="width:160px;height: 17px;" src="/static/images/xuan-btn.png"></image>
</view>
</view>
</view>
</u-overlay>
</view>
</template>
<script>
import apicourseStudy from "../../api/modules/courseStudy.js"
import apiCoursePortal from '@/api/modules/coursePortal.js'
import apiBoeCourse from '@/api/boe/course.js';
import {
formatDate
} from '@/utils/tools.js';
import apiUser from '@/api/system/user.js'
import {
mapGetters
} from 'vuex'
export default {
computed: {
...mapGetters(['userInfo', 'isOneStady'])
},
data() {
return {
autonomyStatusShow: false,
delData: {},
btnsShow: false, // 我报名的删除弹出
xuanShow: false,
boeStatus: '',
authorInfo: {},
lastStudy: {},
overlayShow: false,
isOne: true,
isSelect: 0,
autonomy: { // 自主学习 筛选
status: 0,
type: '',
keyword: ''
},
loadstatusSelecShow: false,
loadstatus: '',
loadstatusBtnName: '状态',
hiskeyword: '',
loadkeyword: '',
learkeyword: '',
formatDate,
keyword: '',
couresList: '',
switch: '',
hisswitch: '',
classType: 0,
hisclassType: '',
historyList: '',
studyList: [],
studyData: [], //自主学习备份数据
type: "error",
value: 0,
tabIndex: 0, //当前tab索引
loadStatus: 'more', //more,loading,noMore
curNow: 1,
pageSize: 6,
studyResetShow: false,
statusBtnName: '状态',
stateBtn: '课程',
statusBtn: '类型',
statusBtns: '类型',
loadstatusBtns: '类型',
statusSelectShow: false,
statusSelecShow: false,
hisstatusBtnName: '类型',
hisstatusSelecShow: false,
hisstatusSelectShow: false,
statust: '',
status: '',
loadstatus: '',
typeArray: [{
name: '全部',
value: ''
},
{
name: '录播课',
value: 'online-course'
},
{
name: '线下课',
value: 'face-course'
},
{
name: '学习项目',
value: 'project'
}
],
statustList: [{
name: '全部',
value: ''
},
{
name: '未开始',
value: 0
},
{
name: '进行中',
value: 1
},
{
name: '已完成',
value: 2
}
],
statustArray: [
[{
name: '在线课',
value: 'online-course'
},
{
name: '面授班',
value: 'face-course'
},
{
name: '学习项目',
value: 'project'
}
]
],
windowHeight: 0,
taskPageIndex: 1,
taskPageSize: 10,
taskHasMore: true,
taskCount: 0,
}
},
onShow() {
// this.tabIndex = this.studyTab;
//this.getLearning()
//this.history()
//this.loadBoeData();
//删除cookies
//document.cookie = "mytest=; expires=Thu, 01 Jan 1970 00:00:00 UTC; path=/;";
},
onLoad() {
this.loadBoeData(true);
this.getLearning(); //这里应该是切换时再调用
//检查是否显示弹窗
let curTime = new Date();
curTime = parseInt(curTime.getTime() / 1000);
//console.log(curTime,'curTime');
let hasDlgTime = uni.getStorageSync('user_dlg_temp');
if (hasDlgTime) {
let lastTime = parseInt(hasDlgTime);
//console.log(lastTime,'lastTime2');
if (curTime > (lastTime + 24 * 60 * 60)) {
this.xuanShow = true;
//console.log('显示');
uni.setStorageSync('user_dlg_temp', curTime);
} else {
this.xuanShow = false;
this.showOneStady();
}
} else {
this.xuanShow = true;
uni.setStorageSync('user_dlg_temp', curTime);
}
let $this = this;
uni.getSystemInfo({
success: (res) => {
$this.windowHeight = res.windowHeight;
}
});
uni.onWindowResize((res) => {
if (res.size.windowHeight < $this.windowHeight) {
// $this.tooter = false;
uni.hideTabBar()
} else {
uni.showTabBar()
// $this.tooter = true;
}
})
},
onPullDownRefresh() {
this.onReachBottom();
},
onReachBottom() {
this.loadStatus = 'loading'; //more,loading,noMore
let $this = this;
if (this.tabIndex == 0) {
if (this.taskHasMore) {
this.taskPageSize++;
this.loadBoeData(false);
}
}
setTimeout(function() {
$this.loadStatus = 'noMore';
}, 500);
},
methods: {
rowbtn(row) {
this.delData = row;
this.btnsShow = true;
},
del() {
if (this.delData.isOld) {
apiBoeCourse.delLearning(this.delData.kid).then(res => {
if (res.status == 200) {
this.$message({
type: 'success',
message: '删除成功!'
});
this.studyList.forEach((item, index) => {
if (item.id === this.delData.id) {
this.studyList.splice(index, 1);
}
})
this.studyData.forEach((it, i) => {
if (this.delData.id == it.id) {
this.studyData.splice(i, 1);
}
})
} else {
this.$message({
type: 'error',
message: res.message
});
}
});
} else {
apicourseStudy.deleteSignUp(this.delData.id, this.delData.courseId).then(res => {
this.btnsShow = false;
if (res.status = 200) {
this.$refs.articleToast.show({
message: '删除成功',
type: 'success'
});
this.studyList.forEach((item, index) => {
if (item.id === this.delData.id) {
this.studyList.splice(index, 1);
}
})
this.studyData.forEach((it, i) => {
if (this.delData.id == it.id) {
this.studyData.splice(i, 1);
}
})
} else {
this.$refs.articleToast.show({
message: '删除失败,请稍后再试',
type: 'error'
});
}
})
}
},
showOneStady() {
if (this.isOneStady === 0) {
this.getLastStudy();
}
},
xuanClose() {
this.xuanShow = false;
this.showOneStady();
},
closeShow() {
this.overlayShow = false;
this.$store.dispatch('SetIdentity', 1);
},
jupe(lastStudy) {
if (isNaN(lastStudy.courseType)) {
uni.navigateTo({
url: '/pages/study/studydetail?id=' + lastStudy.courseId + '&type=' + lastStudy.courseType
});
} else {
if (lastStudy.courseType == 10) {
uni.navigateTo({
url: '/pages/resource/microDetail?id=' + lastStudy.courseId
});
} else if (lastStudy.courseType == 20) {
uni.navigateTo({
url: '/pages/resource/courseDetail?id=' + lastStudy.courseId
});
}
}
},
getLastStudy() {
apicourseStudy.lastStudy().then(res => {
if (res.status === 200) {
this.lastStudy = res.result;
if (res.result != '' && res.result.courseId) {
this.overlayShow = true;
}
} else {
this.$message.error(res.message);
}
})
},
autonomyStatus(num) {
// this.isSelect = num;
this.autonomy.status = num;
this.searchData();
},
closeBtns() {
this.btnsShow = false;
},
searchData() {
// this.page.pageIndex = 1;
// this.isListOne = true;
let list = this.studyData;
let type;
let wei;
if (this.autonomy.type == 'online-course') {
type = 20;
wei = 10;
}
if (this.autonomy.type === 0 && this.autonomy.status === 0 && this.autonomy.keyword === '') {
this.studyList = this.studyData;
return;
}
if (this.autonomy.type !== '') {
list = list.filter(item => {
if (item.courseType === this.autonomy.type || type === 20 || wei === 10) {
return item;
}
});
}
if (this.autonomy.status !== 0) {
list = list.filter(item => {
if (item.status == this.autonomy.status) {
return item;
}
});
}
if (this.autonomy.keyword !== '') {
list = list.filter(item => {
return item.courseName.toLowerCase()
.indexOf(this.autonomy.keyword.toLowerCase()) > -1;
});
}
this.studyList = list;
},
// 学习任务跳转详情
loaddetail(task) {
uni.navigateTo({
url: '/pages/study/loaddetail?id=' + task.cmtask_id
});
// window.open(`/loaddetail?id=${task.cmtask_id}`)
},
loadBoeData(flag) {
if (flag) {
this.taskPageIndex = 1; //回到首页
}
let params = {
page: this.taskPageIndex,
size: this.taskPageSize,
cmtask_status: this.boeStatus,
cmtask_name: this.loadkeyword,
}
if (this.cmtask_name) {
params.cmtask_name = this.keyWord;
}
apiBoeCourse.cmtaskList(params).then(res => {
res.result.list.forEach(item => {
let time = this.formatDate(item.created_at * 1000);
item.created_at = time.split(' ')[0];
// item.created_at = this.formatDate(item.created_at*1000);
});
this.couresList = res.result.list;
this.taskCount = res.result.count;
if (this.taskCount > this.taskPageIndex * this.taskPageSize) {
this.taskHasMore = true;
} else {
this.taskHasMore = false;
}
if (this.isOne) {
this.value = res.result.count;
}
if (this.isOne && res.result.list.length == 0) {
this.tabIndex = 1;
}
this.isOne = false;
}).catch(err => {
})
},
message() {
uni.navigateTo({
url: './message'
})
},
clicktab(idx) {
this.tabIndex = idx;
if (this.tabIndex == 1) {
// this.getLearning()
this.searchData();
} else if (this.tabIndex == 2) {
this.history()
} else if (this.tabIndex == 0) {
this.loadBoeData()
}
},
history(flag) {
let hist = {
courseName: this.hiskeyword,
courseType: this.hisclassType,
status: this.status,
isFinish: true
}
if (this.keyWord) {
hist.courseName = this.keyWord;
}
apicourseStudy.myStudyList(
hist
).then(res => {
if (res.status == 200) {
this.historyList = res.result;
}
})
},
loadCouserTeacher(list, ids) { //临时解决方案,单独的查询课程教师
let that = this;
//先查课程关联教师iD
apiCoursePortal.getTeacherByCourseIDs(ids).then(cres => {
if (cres.status == 200) {
let userIds = [];
list.forEach((item, index) => {
cres.result.some(courseTeahcer => {
if (courseTeahcer.courseId == item.courseId) {
if (courseTeahcer.teacherIds) {
// userIds.push(courseTeahcer.teacherIds[0]);
// item.authorInfo.aid=courseTeahcer.teacherIds[0];
item.teacherName = courseTeahcer.names[0];
}
return true;
} else {
return false;
}
})
});
// that.loadCourseAuthorInfo(list,userIds);
}
})
},
async getLearning() {
uni.showLoading({
title: '加载中...'
});
this.loadStatus = 'loading';
// let classType = null;
let data = [];
let lear = {
pageIndex: 1, //第几页
pageSize: 200,
courseName: this.learkeyword,
// courseType: classType,
status: this.status,
}
// if(this.classType == 'online-course' || this.classType == '') {
await apicourseStudy.myStudyList(lear).then(res => {
if (res.status == 200) {
// 我报名的接口
//console.log(res)
let courseIds = [];
res.result.list.forEach(item => {
item.teachersName = '';
item.addTime = item.addTime.split(' ')[0];
courseIds.push(item.courseId);
})
//console.log(courseIds,'courseIds')
this.loadCouserTeacher(res.result.list, courseIds);
data.push(...res.result.list);
}
})
// }
let learData = {
page: 1,
size: 200,
type: this.classType
}
await apiBoeCourse.myLearning(learData).then(res => {
if (res.status == 200) {
let list = this.filterConversion(res.result.dataList);
data.push(...list);
}
})
this.loadStatus = 'noMore';
this.studyList = data;
this.studyData = data;
uni.hideLoading();
},
filterConversion(data) {
let list = [];
data.forEach((item, index) => {
let status = null;
if (item.status == '0') {
status = 1;
} else if (item.status == '1') {
status = 2;
} else if (item.status == '2') {
status = 9;
}
let num = item.completeProgress.replace('%', "");
item.completeProgress = Number(num);
list.push({
courseImage: item.cover[0].url,
courseName: item.title,
teachersName: '',
courseType: item.type,
id: item.id,
isOld: true,
progress: item.completeProgress,
status: status,
})
})
return list;
},
cancelResetStudy() {
this.studyResetShow = false;
},
resetStudy() {
this.studyResetShow = false;
},
toStudy(citem) {
if (isNaN(citem.courseType)) {
uni.navigateTo({
url: '/pages/study/studydetail?id=' + citem.id + '&type=' + citem.courseType
});
} else {
if (citem.courseType == 10) {
uni.navigateTo({
url: '../resource/microDetail?studyId=' + citem.id + '&id=' + citem.courseId
})
} else if (citem.courseType == 20) {
uni.navigateTo({
url: '/pages/study/onlineCourse?studyId=' + citem.id + '&id=' + citem.courseId
})
}
}
},
choose(citem) {
if (citem.courseType == 10) {
uni.navigateTo({
url: '../resource/microDetail?studyId=' + citem.id + '&id=' + citem.courseId
})
} else if (citem.courseType == 20) {
uni.navigateTo({
url: '/pages/study/onlineCourse?studyId=' + citem.id + '&id=' + citem.courseId
})
}
},
// 自主学习选择状态事件
chooseStatus(e) {
this.statusSelectShow = false;
this.statusBtnName = e.value[0].name;
this.autonomy.status = e.value[0].value;
this.searchData();
},
// 自主学习选择类型事件
// chooseStatust(e) {
// this.statusSelecShow = false;
// this.statusBtns = e.value[0].name;
// this.autonomy.type = e.value[0].value;
// // this.learning()
// this.searchData();
// },
// 历史记录选择类型事件
hischooseStatus(e) {
this.hisstatusSelectShow = false;
this.hisstatusBtnName = e.value[0].name;
this.hisswitch = e.value[0].value;
if (this.hisswitch == 10) {
this.hisclassType = 10
this.history()
} else {
this.hisclassType = 20
this.history()
}
},
loadchooseStatust(e) {
// this.loadstatusSelecShow = false;
// this.loadstatusBtnName = e.value[0].name;
this.boeStatus = e;
this.loadBoeData()
},
Application(e) {
this.classType = e;
this.autonomy.type = e;
this.searchData();
// this.getLearning();
},
displayWord(data) {
if (data.progress == 0) {
return '未开始'
} else if (data.progress == 100) {
return '已完成'
} else {
return `已学<text style="color:#FF8E00">${data.progress}%</text>`
}
},
jumpToDetail(data) {
console.log(data, "是佛法和")
}
}
}
</script>
<style lang="scss" scoped>
.coures-staus {
flex: 1;
font-size: 24upx;
color: #777980;
// position: relative;
// /deep/ .toStudyText{
// font-size: 8px;
// background: #EEEEEE;
// padding: 4px 10px;
// border-radius: 40px;
// color: #FF8E00;
// >span{
// display:flex;
// justify-content:center;
// align-items:center;
// }
// }
}
.big-button {
text-align: center;
line-height: 80upx;
border-top: 1px solid #ebebeb;
}
.coures-midd {
position: relative;
display: flex;
.course-author {
// color: #777980;
font-size: 28upx;
flex: 1;
}
.coures-button {
flex: 1;
.toStudyText {
position: absolute;
right: 0;
bottom: 0;
// top: 28px;
padding: 6px 14px;
background-color: #EEEEEE;
border-radius: 40px;
}
}
.course-titles {
font-weight: bold;
font-size: 32upx;
color: #343434;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
margin-bottom: 20upx;
// display: -webkit-box;
// white-space:pre-wrap;
// overflow: hidden;
// text-overflow:ellipsis;
// -webkit-box-orient: vertical;
// -webkit-line-clamp: 1;
// box-sizing: border-box;
}
}
.xuan {
width: 325px;
margin: 0px auto;
padding-top: 130px;
.xuan-info {
height: 480px;
background: #99beff;
position: relative;
.xuan-close {
position: absolute;
right: 10px;
top: 5px;
z-index: 19;
}
.xuan-box {
width: 325px;
height: 407px;
}
.xuan-btn {
margin-top: 10px;
padding-left: 30px;
width: 100%;
height: 40px;
}
}
}
.sea-show {
padding: 20upx 30upx 10upx 30upx;
.sea-active {
border: 1rpx solid #679cfc !important;
color: #679cfc;
}
.sea-index {
font-size: 26rpx;
padding: 6rpx 16rpx;
border: 1rpx solid #ccc;
border-radius: 20rpx;
margin-right: 16rpx;
background-color: #fff;
}
}
.courseimage {
course-image {
border-radius: 8rpx;
}
}
.uni-progress-bar {
border-radius: 5upx;
}
.Micro {
width: 70rpx;
height: 41rpx;
margin-right: 8rpx;
text-align: center;
background-color: #588afc;
color: #fff;
font-weight: normal;
font-size: 24rpx;
line-height: 41rpx;
}
.Recording {
width: 70rpx;
height: 41rpx;
margin-right: 8rpx;
text-align: center;
background-color: #ffb30f;
color: #fff;
font-weight: normal;
font-size: 24rpx;
line-height: 41rpx;
}
.uc-course-type3 {
width: 70rpx;
height: 41rpx;
margin-right: 8rpx;
text-align: center;
background-color: #08a890;
color: #fff;
font-weight: normal;
font-size: 24rpx;
line-height: 41rpx;
}
.uc-course-type4 {
width: 110rpx;
height: 41rpx;
margin-right: 8rpx;
text-align: center;
background-color: #75aefe;
color: #fff;
font-weight: normal;
font-size: 24rpx;
line-height: 41rpx;
}
/deep/ .course-left {
// width: 262upx;
// height: 147upx;
// width: 209upx;
// height: 60px;
// margin-top: 10upx;
position: relative;
uni-image {
border-radius: 8px;
}
.course-type {
position: absolute;
bottom: 8px;
right: 0px;
text-align: center;
line-height: 15px;
background-color: #7f7f7f;
font-size: 10px;
opacity: 0.7;
color: #FFFFFF;
z-index: 88;
padding: 1px 5px;
border-radius: 10px 0px 0px 10px;
}
}
.overlay-box {
position: fixed !important;
// height: 270upx;
// width: 690upx;
width: 718upx;
// margin: auto 30upx;
// margin: 0 auto;
left: 50%;
transform: translate(-50%);
// width: 100%;
background: #ffffff;
border-radius: 20upx;
// margin-top: 124%;
bottom: 120upx;
padding: 30upx 35upx;
box-sizing: border-box;
.box-title {
margin-left: 20upx;
.title-name {
overflow: hidden;
word-break: break-all;
text-overflow: ellipsis;
-webkit-box-orient: vertical;
display: -webkit-box;
overflow: hidden;
text-overflow: ellipsis;
-webkit-line-clamp: 1;
}
uni-text {
color: #343434;
font-size: 32upx;
font-weight: 600;
&:last-of-type {
color: #616161;
font-size: 26upx;
font-weight: 400;
margin-bottom: 6upx;
}
}
// text-align: center;
// .box-icon {
// // float: right;
// color: #eee;
// }
}
.box-cen {
// width:209upx;
// height:118upx;
display: flex;
// margin-top: 43upx;
.box-title {
display: flex;
flex-direction: column;
justify-content: space-between;
}
.box-icon {
width: 30px;
height: 30px;
text-align: right;
margin-left: auto;
//padding: 10rpx;
}
}
.cen-title {
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 1;
overflow: hidden;
}
}
.zan-wu {
text-align: center;
color: #666666;
}
.one-line-ellipsis {
word-break: break-all;
display: -webkit-box;
// white-space:pre-wrap;
overflow: hidden;
// text-overflow:ellipsis;
-webkit-box-orient: vertical;
-webkit-line-clamp: 1;
box-sizing: border-box;
}
.tabbar {
height: 50px;
line-height: 50px;
background: linear-gradient(to bottom, #6ba0fc, #6297fd);
display: flex;
justify-content: space-around;
color: #ffffff;
.tabbar-item {
position: relative;
}
.tabbar-item :nth-child(1) {
text-align: center;
line-height: 20upx;
height: 20upx;
}
.tabber-co {
position: absolute;
right: -30upx;
margin-top: 20upx;
}
.active {
border-bottom: 2px solid #ffffff;
}
}
.listbox {
.course-info-text {
padding: 15upx;
margin-bottom: 15upx;
.isSelect {
margin-right: 15upx;
color: #fff;
padding: 10upx;
background: #75aefe;
border: 1upx solid #669bfc;
font-size: 14upx;
}
.info-text {
margin-right: 15upx;
border: 1upx solid #ccc;
font-size: 14upx;
padding: 10upx;
background-color: #fff;
}
}
.listbox-top {
height: 90upx;
display: flex;
justify-content: space-around;
.top-ten {
// width: 120upx;
// height: 62upx;
margin-top: 20upx;
margin-left: 24upx;
// background-color: #fff;
text-align: center;
// line-height: 62upx;
}
.searchView {
background-color: #fff;
flex: 1;
height: 62upx;
line-height: 62upx;
margin-left: 20upx;
margin-top: 30upx;
border-radius: 8px;
margin-right: 20upx;
display: flex;
.u-search {
width: 195px;
}
}
}
// .listboxtwo-top {
// height: 120upx;
// display: flex;
// justify-content: space-around;
// .top-ten {
// width: 120upx;
// height: 62upx;
// margin-top: 30upx;
// margin-left: 53upx;
// background-color: #fff;
// text-align: center;
// line-height: 62upx;
// border-radius: 8px;
// }
// .searchView {
// background-color: #fff;
// flex: 1;
// height: 62upx;
// line-height: 62upx;
// margin-left: 20upx;
// margin-top: 30upx;
// border-radius: 8px;
// margin-right: 8upx;
// .u-search {
// width: 195px;
// }
// }
// }
}
.content {
padding: 20upx 30upx;
margin-bottom: 10px;
margin-top: 10px;
border-radius: 7upx;
}
.rowbtn {
width: 30upx;
height: 30upx;
position: absolute;
top: 0;
right:-10upx;
// margin-top: 10upx;
// margin-right: 25rpx;
}
.coures-bottom {
display: flex;
}
.course {
// padding: 40upx 30upx;
.course-title {
font-weight: bold;
font-size: 32upx;
.title-text {
color: #000000;
}
}
.course-info {
// display: flex;
// justify-content: space-between;
/deep/ .course-info-left {
display: flex;
// line-height: 40upx;
margin-top: 5px;
align-items: center;
uni-image {
// width: 152upx;
// height: 88upx;
border-radius: 16upx;
}
.uc-course-type-text {
position: absolute;
bottom: 10px;
right: 0;
text-align: center;
line-height: 15px;
background-color: #7f7f7f;
font-size: 10px;
opacity: 0.7;
color: #FFFFFF;
z-index: 88;
padding: 1px 5px;
border-radius: 10px 0px 0px 10px;
}
.course-text {
display: flex;
height: 80px;
margin-top: -6px;
flex-direction: column;
justify-content: flex-end;
// font-size: 28upx;
// color: #777980;
margin-left: 10px;
margin-right: 1px;
width: 100%;
position: relative;
// margin-top: 10upx;
.course-btn {
// margin-top: 30upx;
justify-content: space-between;
display: flex;
margin-bottom: 6upx;
.btn-wz {
font-size: 24upx;
color: #bfbfbf;
}
.btn-bai {
font-weight: 600;
font-size: 36upx;
color: #2a2c31;
}
}
}
}
}
}
.u-progress-content {
display: flex;
align-items: center;
justify-content: center;
}
.u-progress-dot {
width: 16rpx;
height: 16rpx;
border-radius: 50%;
background-color: #fb9126;
}
.u-progress-info {
font-size: 28rpx;
padding-left: 16rpx;
letter-spacing: 2rpx;
}
/deep/.u-line-progress__background {
height: 0px;
}
.textbtn {
background-color: #ffffff;
padding: 16upx 20upx;
color: #666;
border-radius: 8upx;
font-size: 28upx;
}
</style>