mirror of
https://codeup.aliyun.com/67762337eccfc218f6110e0e/vue/learning-system-mobile.git
synced 2025-12-11 11:56:47 +08:00
2083 lines
52 KiB
Vue
2083 lines
52 KiB
Vue
<template>
|
||
<view style="background-color: #fff;">
|
||
<view class="listbox-top" style="background-color: #fff;">
|
||
|
||
<view class="searchView" style="margin-right: 200rpx;" 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>
|
||
<!-- firstType = 0;endType = 0;boeStatus = '';typeListData='' -->
|
||
<view class="textbtns" @click="()=>{showSearch = true;}">
|
||
<text>筛选</text>
|
||
<image style="width: 26rpx;height: 26rpx;margin-left: 10rpx;" src="../../static/images/search.png"></image>
|
||
</view>
|
||
</view>
|
||
<view class="searchView" v-show="tabIndex===1">
|
||
<u-search :clearabled="true" @search="searchData()" @clear="searchData()"
|
||
placeholder="搜索关键字" v-model="autonomy.keyword" :showAction="false" shape="square" bgColor="##F2F5F7">
|
||
</u-search>
|
||
</view>
|
||
</view>
|
||
<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}">
|
||
<u-badge :type="type" max="99" :value="value" class="tabber-co"></u-badge>我的必修
|
||
<view class="border-bottom-one"></view>
|
||
</view>
|
||
<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>
|
||
<!-- <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> -->
|
||
</view>
|
||
<!-- 筛选状态 -->
|
||
<!-- <view class="addition" v-show="tabIndex===0">
|
||
<view class="textbtn" style="color:#666;font-size: 28upx;" @click="statusSelectShow = !statusSelectShow">
|
||
<text>筛选</text>
|
||
<u-icon style="margin-left: 18upx;" name="arrow-down"></u-icon>
|
||
</view>
|
||
<view class="sea-show" v-show="statusSelectShow">
|
||
<view v-for="(status,index) in statustList" :key="index" :class="[boeStatus === status.value? 'sea-active':'','sea-index']" @click="taskStatus(status.value)">
|
||
{{status.name}}
|
||
</view>
|
||
</view>
|
||
</view> -->
|
||
<view class="addition" v-show="tabIndex===1">
|
||
<view class="textbtn" style="color:#666;font-size: 28upx;" @click="statusSelectShow = !statusSelectShow">
|
||
<text>筛选</text>
|
||
<u-icon style="margin-left: 18upx;" name="arrow-down"></u-icon>
|
||
</view>
|
||
<view class="sea-show" v-show="statusSelectShow">
|
||
<view v-for="(status,index) in autonomyStatustList" :key="index" :class="[Applistatus === status.value? 'sea-active':'','sea-index']" @click="autonomyStatus(status.value)">
|
||
{{status.name}}
|
||
</view>
|
||
</view>
|
||
</view>
|
||
<!-- 学习任务 -->
|
||
<view class="listbox" v-show="tabIndex===0">
|
||
|
||
<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="course content" v-for="(task,idx) in couresList" :key="idx" @click="loaddetail(task)">
|
||
<view class="course-info">
|
||
<view class="course-info-left">
|
||
<course-image :course="task" width="256upx" height="148upx"></course-image>
|
||
<view class="text">{{task.cmtask_type != 4 ?task.cmtask_type == 5?'专业力必修':'定制化学习':'领导力必修'}}</view>
|
||
<view class="course-text">
|
||
<view class="course-title one-line-ellipsis" style="margin-bottom: auto"><text
|
||
style="font-size: 32upx; font-weight: 500;" v-html="task.cmtask_name"></text>
|
||
</view>
|
||
<view class="task-bottom">
|
||
<!-- <view class="course-aut">
|
||
<author-info :avatar="task.avatar" :name="task.authorName" :info="task.orgInfo" :sex="task.sex"></author-info>
|
||
</view> -->
|
||
<view class="coures-staus">
|
||
<text v-if="task.cmtask_user_status == 0">未开始</text>
|
||
<text v-if="task.cmtask_user_status == 1">进行中</text>
|
||
<text v-if="task.cmtask_user_status == 2">已完成</text>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
<view style="margin-top: 60upx;">
|
||
<uni-load-more :status="loadStatus"></uni-load-more>
|
||
</view>
|
||
</view>
|
||
<!-- 自主学习 -->
|
||
<view class="listbox" v-show="tabIndex===1">
|
||
<view v-if="studyList.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 == 30">线下课</text>
|
||
<text class="uc-course-type-text" v-if="c.courseType == 40" >学习项目</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>
|
||
<view class="rowbtn" >
|
||
<!-- <image @click.native.stop="removecour(c)" style="width: 100%;height: 100%;position: relative"
|
||
src="../../static/images/icon/more.png" alt="">
|
||
<view class="delcoures" v-show="c.delcour" @click.native.stop="rowbtn(c)">
|
||
<u-icon style="line-height: 90upx;" name="trash" label="删除课程"></u-icon>
|
||
</view> -->
|
||
</view>
|
||
<view class="coures-bottom coures-midd">
|
||
<view v-if="c.teacherName" class="course-author">
|
||
{{c.teacherName}}
|
||
</view>
|
||
<view class="coures-staus">
|
||
<text v-html="displayWord(c)"></text>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
<!-- 用了display:none隐藏，后期不需要删除 -->
|
||
<view style="margin-top: 60upx;">
|
||
<uni-load-more :status="studyLoadStatus"></uni-load-more>
|
||
</view>
|
||
</view>
|
||
<!-- <view class="learn" v-show="tabIndex===2" 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-show="tabIndex===2" v-else>
|
||
<u-empty
|
||
mode="data"
|
||
icon="http://cdn.uviewui.com/uview/empty/data.png"
|
||
style="height: 75vh;"
|
||
>
|
||
</u-empty>
|
||
</view> -->
|
||
<u-modal :show="studyResetShow" :showCancelButton="true" @cancel="cancelResetStudy" @confirm="resetStudy" ref="uModal" :asyncClose="true">
|
||
您确定要重新学习吗？
|
||
</u-modal>
|
||
<u-modal :show="btnsShow" @confirm="del()" @cancel="closeBtns()" :showCancelButton="true" confirmText="删除" ref="uModal" content='您确认要删除此课程吗'></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> -->
|
||
<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>
|
||
<u-popup :show="showSearch" mode="top">
|
||
<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>
|
||
</template>
|
||
<script>
|
||
import apicourseStudy from "../../api/modules/courseStudy.js"
|
||
import apiCoursePortal from '@/api/modules/coursePortal.js'
|
||
import apiBoeCourse from '@/api/boe/course.js';
|
||
import apiManage from '@/api/manage/manage.js';
|
||
import { formatDate } from '@/utils/tools.js';
|
||
import apiUser from '@/api/system/user.js'
|
||
import { mapGetters } from 'vuex'
|
||
import { getList } from "@/api/modules/growth.js"
|
||
export default {
|
||
computed: {
|
||
...mapGetters(['userInfo', 'isOneStady'])
|
||
},
|
||
data() {
|
||
return {
|
||
firstType: 0,
|
||
endType: 0,
|
||
typeListData: '',
|
||
typeData: [
|
||
{name: '全部',value: 1,data:''},
|
||
{name: '领导力必修',value: 2,data:0},
|
||
{name: '专业力必修',value: 3,data:2},
|
||
{name: '定制化学习',value: 4,data:1},
|
||
// {name: '通用力学习',value: 5},
|
||
],
|
||
statusData: [
|
||
{name: '全部',value: 1},
|
||
{name: '未开始',value: 2},
|
||
{name: '进行中',value: 3},
|
||
{name: '已完成',value: 4},
|
||
],
|
||
showSearch: false,
|
||
detailData: {},
|
||
planDown: false,
|
||
upContent: false,
|
||
checked: false,
|
||
isChecked: false,
|
||
learnModal: false,
|
||
Applistatus:'',
|
||
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: '',
|
||
hisclassType: '',
|
||
historyList: '',
|
||
studyList: [],
|
||
studyPageIndex:1,
|
||
studyPageSize:10,
|
||
studyPages:1,
|
||
studyCount:0,
|
||
studyLoadStatus:'more',
|
||
studyData: [], //自主学习备份数据
|
||
type: "error",
|
||
value: 0,
|
||
tabIndex: 0, //当前tab索引
|
||
loadStatus: 'more', //more,loading,noMore
|
||
studyResetShow: false,
|
||
statusBtnName: '状态',
|
||
statusSelectShow: false,
|
||
statusSelecShow: false,
|
||
loadstatus: '',
|
||
statustList: [
|
||
{name: '全部',value: ''},
|
||
{name: '未开始',value: 0},
|
||
{name: '进行中',value: 1},
|
||
{name: '已完成',value: 2}
|
||
],
|
||
autonomyStatustList: [
|
||
{name: '全部',value: ''},
|
||
{name: '未开始',value: 0},
|
||
{name: '进行中',value: 1},
|
||
{name: '已完成',value: 2}
|
||
],
|
||
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() {
|
||
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;
|
||
}
|
||
})
|
||
},
|
||
mounted() {
|
||
window.addEventListener('click',this.reSetList);
|
||
apiManage.getTaskNum().then(res => {
|
||
if(res.code==200){
|
||
this.value=res.data.todoTaskCounts;
|
||
if(this.value>0){
|
||
this.loadBoeData(true);
|
||
}else{
|
||
this.tabIndex = 1;//切换到我报名的
|
||
this.getLearning(true);
|
||
}
|
||
}
|
||
});
|
||
// 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
|
||
// }
|
||
// this.detailData.cmtask_name = this.detailData.growName
|
||
// this.detailData.cmtask_user_status = this.detailData.studyStatus
|
||
// }
|
||
// }
|
||
// })
|
||
},
|
||
onPullDownRefresh() {
|
||
this.onReachBottom();
|
||
},
|
||
onReachBottom() {
|
||
this.loadStatus = 'loading'; //more,loading,noMore
|
||
let $this = this;
|
||
if (this.tabIndex == 0) {
|
||
if (this.taskHasMore) {
|
||
this.taskPageIndex++;
|
||
this.loadBoeData(false);
|
||
}
|
||
}else if(this.tabIndex == 1){
|
||
if(this.studyPageIndex<this.studyPages){
|
||
this.studyPageIndex++;
|
||
this.getLearning(false);
|
||
}else{
|
||
|
||
}
|
||
}
|
||
setTimeout(function() {
|
||
$this.loadStatus = 'noMore';
|
||
}, 500);
|
||
},
|
||
watch: {
|
||
checked(){
|
||
this.outLearnModal()
|
||
}
|
||
},
|
||
methods: {
|
||
activeItem(item){
|
||
this.firstType = item.value - 1
|
||
this.typeListData = item.data
|
||
},
|
||
activeItemTwo(item){
|
||
this.endType = item.value - 1
|
||
this.boeStatus = item.value - 2
|
||
},
|
||
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)
|
||
},
|
||
reSetList() {
|
||
this.studyList.forEach(item=>{
|
||
item.delcour = false;
|
||
})
|
||
},
|
||
removecour(item){
|
||
this.reSetList();
|
||
item.delcour = !item.delcour
|
||
},
|
||
rowbtn(row) {
|
||
this.delData = row;
|
||
this.btnsShow = true;
|
||
},
|
||
del() {
|
||
if (this.delData.source==1) {
|
||
apiBoeCourse.newDelLearning(this.delData.courseId).then(res => {
|
||
if (res.status == 200) {
|
||
this.$refs.articleToast.show({
|
||
message: '删除成功',
|
||
type: 'success'
|
||
});
|
||
var delIndex=-1;
|
||
this.studyList.forEach((item, index) => {
|
||
if (item.id === this.delData.id) {
|
||
delIndex=index;
|
||
}
|
||
})
|
||
if(delIndex>-1){
|
||
this.studyList.splice(delIndex, 1);
|
||
}
|
||
|
||
} else {
|
||
this.$refs.articleToast.show({
|
||
message: '删除失败，请稍后再试',
|
||
type: 'error'
|
||
});
|
||
}
|
||
});
|
||
} else if(this.delData.source==2) {
|
||
apicourseStudy.deleteSignUp(this.delData.id, this.delData.courseId).then(res => {
|
||
this.btnsShow = false;
|
||
if (res.status = 200) {
|
||
this.$refs.articleToast.show({
|
||
message: '删除成功',
|
||
type: 'success'
|
||
});
|
||
var delIndex=-1;
|
||
this.studyList.forEach((item, index) => {
|
||
if (item.id === this.delData.id) {
|
||
delIndex=index;
|
||
}
|
||
})
|
||
if(delIndex>-1){
|
||
this.studyList.splice(delIndex, 1);
|
||
}
|
||
} else {
|
||
this.$refs.articleToast.show({
|
||
message: '删除失败，请稍后再试',
|
||
type: 'error'
|
||
});
|
||
}
|
||
})
|
||
}else if(this.delData.source==3){
|
||
var reqData={ pid:item.courseId, student:item.accountId }
|
||
apiManage.userDeleteStudy(reqData).then(res=>{
|
||
if(res.code==200){
|
||
this.$refs.articleToast.show({message: '删除成功',type: 'success'});
|
||
var delIndex=-1;
|
||
this.studyList.forEach((item, index) => {
|
||
if (item.id === this.delData.id) {
|
||
delIndex=index;
|
||
}
|
||
})
|
||
if(delIndex>-1){
|
||
this.studyList.splice(delIndex, 1);
|
||
}
|
||
}else{
|
||
this.$refs.articleToast.show({message: '删除失败，请稍后再试',type: 'error'});
|
||
}
|
||
})
|
||
}else{
|
||
console.log('不支持的数据来源')
|
||
}
|
||
|
||
},
|
||
|
||
// 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 {
|
||
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.Applistatus = num;
|
||
this.autonomy.status = num;
|
||
this.statusSelectShow = false;
|
||
this.getLearning(true);
|
||
},
|
||
taskStatus(num) {
|
||
this.boeStatus = num;
|
||
this.statusSelectShow = false;
|
||
this.loadBoeData(true);
|
||
},
|
||
closeBtns() {
|
||
this.btnsShow = false;
|
||
},
|
||
searchData() {
|
||
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) {
|
||
// if('growId' in task){
|
||
// uni.navigateTo({
|
||
// url:'/pages/learnPath/growPage'
|
||
// })
|
||
// return
|
||
// }
|
||
// uni.navigateTo({
|
||
// url: '/pages/study/loaddetail?id=' + task.cmtask_id
|
||
// });
|
||
let taskUrl='';
|
||
if(task.cmtask_type==1){ //学习路径图
|
||
let params=encodeURIComponent('routerId='+task.cmtask_id);
|
||
if(this.$config.context=='/mobile-release'){
|
||
taskUrl='/pages/forward?to=/student-h5-release/pathdetails¶ms='+params;
|
||
}else{
|
||
taskUrl='/pages/forward?to=/student-h5/pathdetails¶ms='+params;
|
||
}
|
||
|
||
}else if(task.cmtask_type==2){ //学习项目
|
||
let params=encodeURIComponent('projectId='+task.cmtask_id);
|
||
if(this.$config.context=='/mobile-release'){
|
||
taskUrl='/pages/forward?to=/student-h5-release/projectdetails¶ms='+params;
|
||
}else{
|
||
taskUrl='/pages/forward?to=/student-h5/projectdetails¶ms='+params;
|
||
}
|
||
}else if(task.cmtask_type==3){
|
||
taskUrl='/pages/study/loaddetail?id=' + task.cmtask_id
|
||
}else if(task.cmtask_type==4){
|
||
let params=encodeURIComponent('projectId='+task.cmtask_id);
|
||
if(this.$config.context=='/mobile-release'){
|
||
taskUrl='/pages/forward?to=/student-h5-release/projectdetails¶ms='+params;
|
||
}else{
|
||
taskUrl='/pages/forward?to=/student-h5/projectdetails¶ms='+params;
|
||
}
|
||
}else if(task.cmtask_type==5){
|
||
taskUrl='/pages/learnPath/growPage'
|
||
}
|
||
uni.navigateTo({
|
||
url: taskUrl
|
||
});
|
||
},
|
||
|
||
loadBoeData(flag) {
|
||
if(this.boeStatus == -1){
|
||
this.boeStatus = ''
|
||
}
|
||
this.showSearch = false
|
||
if (flag) {
|
||
this.taskPageIndex = 1; //回到首页
|
||
this.couresList = [];
|
||
}
|
||
this.loadStatus='loading';
|
||
let params = {
|
||
pageNo: this.taskPageIndex,
|
||
pageSize: this.taskPageSize,
|
||
cmtask_user_status: this.boeStatus,
|
||
cmtask_name: this.loadkeyword,
|
||
type: this.typeListData
|
||
}
|
||
if (this.cmtask_name) {
|
||
params.cmtask_name = this.keyWord;
|
||
}
|
||
// if(this.typeListData == 2){
|
||
// if(Object.keys(this.detailData).length){
|
||
// if(this.boeStatus === '' || this.boeStatus == this.detailData.studyStatus){
|
||
// this.couresList.push(this.detailData)
|
||
// }
|
||
// }
|
||
// this.taskHasMore = true;
|
||
// this.loadStatus='noMore';
|
||
// return
|
||
// }
|
||
|
||
apiManage.userTaskList(params).then(res => {
|
||
if(res.code==200){
|
||
res.data.records.forEach(r=>{
|
||
//r.cmtask_imgurl='/upload/static/images/course/courseDefault.png';
|
||
if (r.cmtask_imgurl && r.cmtask_imgurl.startsWith('/upload')) {
|
||
r.cmtask_imgurl = this.$config.fileUrl + r.cmtask_imgurl.substring(7);
|
||
}
|
||
// console.log('aaa='+r.cmtask_imgurl);
|
||
})
|
||
this.taskCount = parseInt(res.data.total);
|
||
this.couresList.push(...res.data.records);
|
||
// if(Object.keys(this.detailData).length&&this.detailData.growName.includes(this.loadkeyword)&&(this.boeStatus===''||this.detailData.studyStatus==this.boeStatus)){
|
||
// this.couresList.unshift(this.detailData)
|
||
// }
|
||
if (this.taskCount > this.taskPageIndex * this.taskPageSize) {
|
||
this.taskHasMore = true;
|
||
this.loadStatus='more';
|
||
} else {
|
||
this.taskHasMore = false;
|
||
this.loadStatus='noMore';
|
||
}
|
||
if(this.couresList.length == 0){
|
||
this.taskHasMore = false;
|
||
this.loadStatus='noMore';
|
||
}
|
||
//检查是否是第一次加载，这里的控制已经移到 初次加载中了
|
||
// if (this.isOne && res.data.records.length == 0) {
|
||
// this.tabIndex = 1;
|
||
// }
|
||
this.isOne = false;
|
||
}else{
|
||
uni.showToast({
|
||
title: '获取任务失败',
|
||
icon: 'none'
|
||
});
|
||
this.taskHasMore = false;
|
||
this.loadStatus='noMore';
|
||
}
|
||
|
||
|
||
}).catch(err => {
|
||
|
||
})
|
||
|
||
},
|
||
loadUserInfos(list, userIds) {
|
||
const noReapetIds = [...new Set(userIds)];
|
||
apiUser.getByIds(noReapetIds).then(res => {
|
||
if (res.status == 200) {
|
||
list.forEach(item => {
|
||
res.result.some(author => {
|
||
if (author.aid == item.sysCreateAid) {
|
||
let { aid, avatar, name, orgInfo, code ,sex} = author;
|
||
item.name = name;
|
||
item.aid = aid;
|
||
item.orgInfo = orgInfo;
|
||
item.code = code;
|
||
item.avatar = avatar;
|
||
item.sex =sex;
|
||
return true;
|
||
}
|
||
return false;
|
||
});
|
||
});
|
||
} else {
|
||
uni.showToast({
|
||
title: '获取数据失败',
|
||
icon: 'none'
|
||
});
|
||
}
|
||
|
||
setTimeout(function() {
|
||
uni.hideLoading();
|
||
}, 100);
|
||
});
|
||
},
|
||
message() {
|
||
uni.navigateTo({
|
||
url: './message'
|
||
})
|
||
},
|
||
clicktab(idx) {
|
||
this.tabIndex = idx;
|
||
if (this.tabIndex == 1 && this.studyList.length == 0) {
|
||
this.getLearning()
|
||
} else if (this.tabIndex == 2) {
|
||
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"
|
||
}else{
|
||
this.learnModal = true
|
||
}
|
||
}
|
||
})
|
||
//this.history()
|
||
} else if (this.tabIndex == 0 && this.couresList.length == 0) {
|
||
this.loadBoeData()
|
||
}
|
||
},
|
||
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(flag) {
|
||
if(flag){
|
||
this.studyPageIndex=1;
|
||
this.studyList=[];
|
||
}
|
||
this.studyLoadStatus='loading'
|
||
uni.showLoading({title: '加载中...' });
|
||
|
||
let lear = {
|
||
pageIndex: this.studyPageIndex, //第几页
|
||
pageSize: this.studyPageSize,
|
||
courseName: this.learkeyword,
|
||
status: this.Applistatus,
|
||
}
|
||
await apicourseStudy.myStudyListFromES(lear).then(res=>{
|
||
if (res.status == 200) {
|
||
let courseIds = [];
|
||
res.result.list.forEach(item=>{
|
||
item.delcour = false;
|
||
item.teachersName = '';
|
||
courseIds.push(item.courseId);
|
||
})
|
||
this.loadCouserTeacher(res.result.list, courseIds);
|
||
this.studyCount=res.result.count;
|
||
this.studyPages=res.result.totalPages;
|
||
if(this.studyPageIndex<this.studyPages){
|
||
this.studyLoadStatus = 'more';
|
||
}else{
|
||
this.studyLoadStatus = 'noMore';
|
||
}
|
||
this.studyList.push(...res.result.list);
|
||
|
||
}else{
|
||
this.loadStatus = 'noMore';
|
||
console.log('查询学习的课程错误'+res.message);
|
||
}
|
||
|
||
})
|
||
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,
|
||
kid:item.ms_timeline_kid
|
||
})
|
||
})
|
||
return list;
|
||
|
||
},
|
||
cancelResetStudy() {
|
||
this.studyResetShow = false;
|
||
},
|
||
resetStudy() {
|
||
this.studyResetShow = false;
|
||
},
|
||
toStudy(citem) {
|
||
if (citem.source==1) {
|
||
uni.navigateTo({
|
||
url: '/pages/study/studydetail?id=' + citem.id + '&type=' + citem.courseType
|
||
});
|
||
}else if (citem.source==2){
|
||
uni.navigateTo({
|
||
url: '/pages/study/courseStudy?studyId=' + citem.id + '&id=' + citem.courseId
|
||
})
|
||
}else if (citem.source==3){
|
||
let params=encodeURIComponent('courseId='+citem.courseId);
|
||
uni.navigateTo({
|
||
url:'/pages/forward?to=/manageApi/stu/project/redirectDetail¶ms='+params
|
||
});
|
||
}else{
|
||
console.log('不支持的数据来源 '+citem.source)
|
||
}
|
||
},
|
||
displayWord(data) {
|
||
if (data.progress == 0) {
|
||
return '未开始'
|
||
} else if (data.progress == 100) {
|
||
return '已完成'
|
||
} else {
|
||
return '进行中'
|
||
}
|
||
}
|
||
}
|
||
}
|
||
</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%);
|
||
}
|
||
.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: 80rpx;
|
||
line-height: 80rpx;
|
||
text-align: center;
|
||
}
|
||
.left{
|
||
color: #000000;
|
||
background-color: #fff;
|
||
border-top: 1px solid #E5EDFB;
|
||
}
|
||
.right{
|
||
color: #ffffff;
|
||
background-color: #3161FA;
|
||
border-top: 1px solid #3161FA;
|
||
}
|
||
}
|
||
}
|
||
.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;
|
||
}
|
||
}
|
||
.delcoures{
|
||
position: absolute;
|
||
width: 180upx;
|
||
top: 40upx;
|
||
right: 0;
|
||
background: #FFFFFF;
|
||
box-shadow: 0px 1px 4px 1px rgba(0,0,0,0.08);
|
||
border-radius: 8upx;
|
||
z-index: 77;
|
||
padding: 30upx 30upx;
|
||
color: #333333;
|
||
}
|
||
.addition {
|
||
position: absolute;
|
||
right: 10upx;
|
||
top: 136upx;
|
||
.textbtn {
|
||
display: flex;
|
||
width: 108upx;
|
||
color: #4f4f4f;
|
||
font-size: 28upx;
|
||
}
|
||
.sea-show {
|
||
width: 130upx;
|
||
position: absolute;
|
||
top: 80upx;
|
||
right: 0;
|
||
background: #FFFFFF;
|
||
box-shadow: 0px 2upx 8upx 4upx rgba(0,0,0,0.07);
|
||
border-radius: 12upx;
|
||
padding: 20upx 60upx;
|
||
z-index: 99;
|
||
.sea-active{
|
||
color: #387DF7 !important;
|
||
}
|
||
.sea-index{
|
||
font-size: 28upx;
|
||
color: #666666;
|
||
line-height: 60upx;
|
||
text-align: center;
|
||
}
|
||
.sea-index:last-child{
|
||
margin-right: 0;
|
||
}
|
||
|
||
}
|
||
}
|
||
.listbox-top {
|
||
height: 92upx;
|
||
padding-top: 28upx;
|
||
background: #fff;
|
||
.top-ten {
|
||
// margin-top: 20upx;
|
||
margin-left: 24upx;
|
||
text-align: center;
|
||
}
|
||
}
|
||
.searchView {
|
||
position: relative;
|
||
margin-left: 32upx;
|
||
line-height: 62upx;
|
||
height: 72upx;
|
||
margin-right: 110upx;
|
||
border-radius: 76upx;
|
||
display: flex;
|
||
background-color: #F2F5F7;
|
||
::v-deep .u-search {
|
||
width: 195px;
|
||
border-radius: 76upx !important;
|
||
}
|
||
.textbtns{
|
||
width: 146rpx;
|
||
position: absolute;
|
||
right: -172rpx;
|
||
top: 4rpx;
|
||
color: #ffffff;
|
||
background-color: #3162FA;
|
||
display: flex;
|
||
justify-content: center;
|
||
align-items: center;
|
||
}
|
||
}
|
||
.course-aut{
|
||
font-size: 24upx;
|
||
color: #333333;
|
||
}
|
||
.task-bottom{
|
||
display: flex;
|
||
}
|
||
|
||
.coures-staus {
|
||
flex: 1;
|
||
font-size: 28upx;
|
||
color: #777980;
|
||
}
|
||
|
||
.big-button {
|
||
text-align: center;
|
||
line-height: 80upx;
|
||
border-top: 1px solid #ebebeb;
|
||
}
|
||
|
||
.coures-midd {
|
||
position: relative;
|
||
display: flex;
|
||
|
||
.course-author {
|
||
margin-right: 30upx;
|
||
font-size: 28upx;
|
||
}
|
||
|
||
.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 {
|
||
color: #679cfc;
|
||
}
|
||
.sea-index {
|
||
font-size: 26rpx;
|
||
// 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;
|
||
display: flex;
|
||
justify-content: center;
|
||
color: #666;
|
||
font-size: 32upx;
|
||
.tabbar-item {
|
||
// flex: 1;
|
||
position: relative;
|
||
.border-bottom-one{
|
||
width: 120upx;
|
||
position: absolute;
|
||
right: 28upx;
|
||
height: 8upx;
|
||
background: #387DF7;
|
||
border-radius: 8upx;
|
||
display: none;
|
||
}
|
||
.border-bottom-two{
|
||
width: 120upx;
|
||
position: absolute;
|
||
left: 22upx;
|
||
height: 8upx;
|
||
background: #387DF7;
|
||
border-radius: 8upx;
|
||
display: none;
|
||
}
|
||
}
|
||
.tabber-co {
|
||
position: absolute;
|
||
right: -30upx;
|
||
margin-top: 20upx;
|
||
}
|
||
.active {
|
||
color: #387DF7;
|
||
font-size: 44upx;
|
||
font-weight: 500;
|
||
.border-bottom-two{
|
||
display: block;
|
||
}
|
||
.border-bottom-one{
|
||
display: block;
|
||
}
|
||
}
|
||
}
|
||
.listbox {
|
||
background-color: #F9f9f9;
|
||
.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;
|
||
}
|
||
}
|
||
|
||
|
||
}
|
||
|
||
.content {
|
||
padding: 20upx 30upx;
|
||
margin-bottom: 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 {
|
||
position: relative;
|
||
display: flex;
|
||
// line-height: 40upx;
|
||
margin-top: 5px;
|
||
align-items: center;
|
||
.text{
|
||
position: absolute;
|
||
bottom: 10px;
|
||
left: 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: 0px 10px 10px 0px;
|
||
}
|
||
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: 140upx;
|
||
margin-top: -6px;
|
||
flex-direction: column;
|
||
justify-content: flex-end;
|
||
|
||
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>
|