mirror of
https://codeup.aliyun.com/67762337eccfc218f6110e0e/vue/learning-system-mobile.git
synced 2025-12-16 06:16:47 +08:00
流程实现
This commit is contained in:
zhangsir
4
api/modules/growth.js
Normal file
4
api/modules/growth.js
Normal file
@@ -0,0 +1,4 @@
|
||||
import ajax from '@/api/manage/manageAjax.js';
|
||||
export const getList = (params) => ajax.get(`/manageApi/stu/grow/getStuLearnInfo?userId=${params}`);
|
||||
//获取路径图详情
|
||||
export const taskList = (id) => ajax.get(`/manageApi/stu/grow/taskList?growId=${id}`);
|
||||
@@ -23,24 +23,172 @@
|
||||
</view>
|
||||
<view class="end_learn">您的学习之旅已结束</view>
|
||||
<view class="learn">
|
||||
<view class="aaa"></view>
|
||||
<view v-for="(item,index) in dataList" :key="index">
|
||||
<view @click="showPopup(index)" class="learn_item" :style="{
|
||||
backgroundColor: getColor(item.flag, 0),
|
||||
left: getPosition(item.name, index).left + 'rpx',
|
||||
top: getPosition(item.name, index).top + 'rpx'
|
||||
}">
|
||||
<view class="icon">
|
||||
<view class="icon-content" :style="{ background: getColor(item.flag, 1) }">
|
||||
{{item.currentRatio || 0}}%
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="learn_text" :style="{
|
||||
left: getPositionText(item.name, index).left + 'rpx',
|
||||
top: getPositionText(item.name, index).top + 'rpx'
|
||||
}">
|
||||
{{item.title}}
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<u-popup mode="center" v-if="currentItem !== null" :show="currentItem.show" @close="closePopup">
|
||||
<view class="popup_item">
|
||||
<view class="item_name">{{ currentItem.title }}</view>
|
||||
<view class="tabs">
|
||||
<view :class="currentItem.flag == 0 ?'flag':'flag2'">
|
||||
{{currentItem.flag == 0 ? '选修' : '必修'}}
|
||||
</view>
|
||||
<view class="type">{{currentItem.type==5?'考试':currentItem.type==1?'在线':''}}</view>
|
||||
</view>
|
||||
<view class="pregress">
|
||||
<view class="text">学习进度</view>
|
||||
<view class="prp">
|
||||
<u-line-progress :percentage="currentItem.currentRatio" :showText="false" height="5" activeColor="#ff0000">
|
||||
|
||||
</u-line-progress>
|
||||
<!-- <view class="text">{{currentItem.progress || 0}}</view> -->
|
||||
</view>
|
||||
</view>
|
||||
<view class="tea_text">
|
||||
<view>课程讲师: {{currentItem.teacherName}}</view>
|
||||
<view>课程简介: {{currentItem.introduce}}</view>
|
||||
</view>
|
||||
<view class="btn" @click="goStudy(currentItem)">
|
||||
<view class="text">学习中</view>
|
||||
<image class="go" src="@/static/images/go.png" mode=""></image>
|
||||
</view>
|
||||
</view>
|
||||
</u-popup>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { taskList } from "@/api/modules/growth.js"
|
||||
export default {
|
||||
onLoad(options) {
|
||||
this.growId = options.growId
|
||||
this.titleName = options.name
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
growId: '',
|
||||
titleName: '',
|
||||
openDown: false,
|
||||
show: false,
|
||||
colorAttrValue: {
|
||||
0: ['#FFD04B', "#FBA944"],
|
||||
1: ["#b8e3b8", "#8ac84a"],
|
||||
2: ['#FFD04B', '#FBA944']
|
||||
},
|
||||
iconAttrs: {
|
||||
'路径图背景1':{
|
||||
positions: [
|
||||
{left: 524,top: 782},
|
||||
{left: 138,top: 644},
|
||||
{left: -2,top: 506},
|
||||
{left: -8,top: 370},
|
||||
{left: 54,top: 232},
|
||||
{left: 162,top: 84},
|
||||
{left: 344,top: -28},
|
||||
]
|
||||
},
|
||||
},
|
||||
iconAttrsText: {
|
||||
'路径图背景1':{
|
||||
positions: [
|
||||
{left: 112,top: 790},
|
||||
{left: 226,top: 652},
|
||||
{left: 86,top: 514},
|
||||
{left: 80,top: 378},
|
||||
{left: 142,top: 240},
|
||||
{left: 250,top: 92},
|
||||
{left: -22,top: -20},
|
||||
]
|
||||
},
|
||||
'路径图背景全':{
|
||||
positions: [
|
||||
{left: 112,top: 790},
|
||||
{left: 226,top: 652},
|
||||
{left: 86,top: 514},
|
||||
{left: 80,top: 378},
|
||||
{left: 142,top: 240},
|
||||
{left: 250,top: 92},
|
||||
{left: -22,top: -20},
|
||||
]
|
||||
},
|
||||
},
|
||||
dataList: [],
|
||||
currentItem: null,
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
|
||||
taskList(this.growId).then(res=>{
|
||||
console.log(res,'res')
|
||||
if(res.code == 200 ){
|
||||
if(res.data.length <= 7){
|
||||
this.dataList = res.data.map(item=>({
|
||||
title:item.name,
|
||||
...item,
|
||||
name: '路径图背景1',
|
||||
}))
|
||||
}else{
|
||||
this.dataList = res.data.map(item=>({
|
||||
title:item.name,
|
||||
...item,
|
||||
name: '路径图背景全',
|
||||
}))
|
||||
}
|
||||
}
|
||||
})
|
||||
},
|
||||
methods: {
|
||||
|
||||
goStudy(item){
|
||||
console.log(item,'item')
|
||||
if(item.type == 1){
|
||||
console.log(item,'在线')
|
||||
this.$router.push("/course/studyindex?id=" + item.targetId);
|
||||
}else if (item.type == 5) {
|
||||
console.log(item,'考试')
|
||||
this.$router.push("exam/test?id=" + item.targetId);
|
||||
}else{
|
||||
console.log(item,'其他')
|
||||
}
|
||||
},
|
||||
showPopup(index) {
|
||||
// 设置当前选中的数组元素
|
||||
this.currentItem = this.dataList[index];
|
||||
// 显示选中元素对应的弹出层
|
||||
this.currentItem.show = true;
|
||||
},
|
||||
closePopup() {
|
||||
// 关闭当前弹出层时重置状态
|
||||
if (this.currentItem !== null) {
|
||||
this.currentItem.show = false;
|
||||
this.currentItem = null;
|
||||
}
|
||||
},
|
||||
getColor(status, index) {
|
||||
return this.colorAttrValue[status][index]
|
||||
},
|
||||
getPosition(name, index) {
|
||||
return this.iconAttrs[name].positions[index]
|
||||
},
|
||||
getPositionText(name, index) {
|
||||
return this.iconAttrsText[name].positions[index]
|
||||
},
|
||||
}
|
||||
}
|
||||
</script>
|
||||
@@ -48,6 +196,114 @@
|
||||
<style scoped>
|
||||
.learn_path{
|
||||
background: #387DF7;
|
||||
.popup_item{
|
||||
width: 90vw;
|
||||
.item_name{
|
||||
font-weight: 600;
|
||||
font-size: 32rpx;
|
||||
color: #333333;
|
||||
line-height: 44rpx;
|
||||
text-align: left;
|
||||
font-style: normal;
|
||||
margin: 50rpx 0 38rpx 76rpx;
|
||||
}
|
||||
.tabs{
|
||||
display: flex;
|
||||
.flag{
|
||||
width: 156rpx;
|
||||
height: 60rpx;
|
||||
background: #FFF2E8;
|
||||
border-radius: 8rpx;
|
||||
border: 2rpx solid #FE9C4A;
|
||||
margin: 0 24rpx 40rpx 78rpx;
|
||||
text-align: center;
|
||||
line-height: 60rpx;
|
||||
color: #FE9C4A;
|
||||
}
|
||||
.flag2{
|
||||
width: 156rpx;
|
||||
height: 60rpx;
|
||||
background: #F7FFF5;
|
||||
border-radius: 8rpx;
|
||||
border: 2rpx solid #31AF0D;
|
||||
margin: 0 24rpx 40rpx 78rpx;
|
||||
text-align: center;
|
||||
line-height: 60rpx;
|
||||
color: #31AF0D;
|
||||
}
|
||||
.type{
|
||||
width: 156rpx;
|
||||
height: 60rpx;
|
||||
background: #E6EFFF;
|
||||
border-radius: 8rpx;
|
||||
border: 2rpx solid #387DF7;
|
||||
text-align: center;
|
||||
line-height: 60rpx;
|
||||
color: #387DF7;
|
||||
}
|
||||
}
|
||||
.pregress{
|
||||
margin: 0 0 24rpx 78rpx;
|
||||
width: 70%;
|
||||
.text{
|
||||
font-weight: 400;
|
||||
font-size: 28rpx;
|
||||
color: #387DF7;
|
||||
line-height: 40rpx;
|
||||
text-align: left;
|
||||
font-style: normal;
|
||||
margin-bottom: 12rpx;
|
||||
}
|
||||
.prp{
|
||||
display: flex;
|
||||
.text{
|
||||
font-weight: 400;
|
||||
font-size: 28rpx;
|
||||
color: #666666;
|
||||
line-height: 40rpx;
|
||||
text-align: left;
|
||||
font-style: normal;
|
||||
margin-left: 24rpx;
|
||||
}
|
||||
}
|
||||
}
|
||||
.tea_text{
|
||||
margin: 0 0 26rpx 80rpx;
|
||||
font-weight: 400;
|
||||
font-size: 28rpx;
|
||||
color: #333333;
|
||||
line-height: 60rpx;
|
||||
text-align: left;
|
||||
font-style: normal;
|
||||
}
|
||||
.btn{
|
||||
width: 85%;
|
||||
height: 80rpx;
|
||||
background: #387DF7;
|
||||
border-radius: 12rpx;
|
||||
margin: 0 0 44rpx 50rpx;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
position: relative;
|
||||
.text{
|
||||
font-family: PingFangSC, PingFang SC;
|
||||
font-weight: 600;
|
||||
font-size: 28rpx;
|
||||
color: #FFFFFF;
|
||||
line-height: 40rpx;
|
||||
text-align: left;
|
||||
font-style: normal;
|
||||
}
|
||||
.go{
|
||||
position: absolute;
|
||||
top: 20rpx;
|
||||
right: 20rpx;
|
||||
width: 40rpx;
|
||||
height: 40rpx;
|
||||
}
|
||||
}
|
||||
}
|
||||
.path_header{
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
@@ -156,10 +412,64 @@
|
||||
height: 952rpx;
|
||||
background: url("../../static/images/learnpath/7learn.png") no-repeat;
|
||||
background-size: 100%;
|
||||
.aaa{
|
||||
margin-left: 88rpx;
|
||||
position: relative;
|
||||
.learn_item{
|
||||
width: 64rpx;
|
||||
height: 68rpx;
|
||||
background: linear-gradient( 180deg, #66B1FC 0%, #3C82F7 99%);
|
||||
height: 64rpx;
|
||||
position: absolute;
|
||||
border-radius: 50%;
|
||||
&:before {
|
||||
content: "";
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
width: 64rpx;
|
||||
height: 64rpx;
|
||||
clip: rect(16px 64px 32px 16px);
|
||||
background: inherit;
|
||||
transform: rotate(45deg);
|
||||
}
|
||||
|
||||
.icon {
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
width: 50rpx;
|
||||
height: 50rpx;
|
||||
background-color: #fff;
|
||||
border-radius: 50%;
|
||||
transform: translate(-50%, -50%);
|
||||
cursor: pointer;
|
||||
|
||||
.icon-content {
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
font-size: 10px;
|
||||
color: #fff;
|
||||
text-align: center;
|
||||
transform: translate(-50%, -50%);
|
||||
width: 44rpx;
|
||||
height: 44rpx;
|
||||
line-height: 44rpx;
|
||||
background-color: #8bc94b;
|
||||
border-radius: 50%;
|
||||
}
|
||||
}
|
||||
}
|
||||
.learn_text{
|
||||
max-width: 400rpx;
|
||||
height: 56rpx;
|
||||
font-size: 24rpx;
|
||||
line-height: 56rpx;
|
||||
text-align: center;
|
||||
background: linear-gradient( 301deg, #0071FF 0%, #8FC1FF 99%, #3D73ED 100%);
|
||||
border-radius: 160rpx 160rpx 160rpx 16rpx;
|
||||
position: absolute;
|
||||
padding: 0 12rpx 0 20rpx;
|
||||
font-weight: 400;
|
||||
color: #FFFFFF;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@@ -126,13 +126,13 @@
|
||||
<uni-load-more :status="studyLoadStatus"></uni-load-more>
|
||||
</view>
|
||||
</view>
|
||||
<view class="learn" v-show="tabIndex===2">
|
||||
<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">根据您的归属组织、您所在岗位、职级，已为您自动匹配“产品企划岗Band6～7成长路径”，抓紧时间学习吧～</view>
|
||||
<view class="text">根据您的归属组织、您所在岗位、职级，已为您自动匹配“{{detailData.growName || ''}}”，抓紧时间学习吧～</view>
|
||||
<image @click="contentOut" class="down" src="../../static/images/learnpath/down.png" mode=""></image>
|
||||
</view>
|
||||
</view>
|
||||
@@ -144,10 +144,10 @@
|
||||
<view class="line"></view>
|
||||
<view class="learn_body">
|
||||
<view class="body_job">
|
||||
<view class="name">产品企划岗Band6～7成长路径</view>
|
||||
<view class="name">{{detailData.growName || ''}}</view>
|
||||
<view class="job">
|
||||
<text>京东方集团股份有限公司</text>
|
||||
<text> 学习状态：进行中</text>
|
||||
<text>{{detailData.organizationName || ''}}</text>
|
||||
<text> 学习状态：<text :style="{color: ['#FF8336','#31AF0D','#409EFF '][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>
|
||||
@@ -169,14 +169,14 @@
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="body_item">
|
||||
<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>
|
||||
@@ -192,8 +192,8 @@
|
||||
<view>当前任务：</view>
|
||||
</view>
|
||||
<view class="right">
|
||||
<view style="margin-bottom: 24rpx;">10门</view>
|
||||
<view>产品考试</view>
|
||||
<view style="margin-bottom: 24rpx;">{{detailData.taskNum}}门</view>
|
||||
<view>{{detailData.currentTaskName}}</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="plan_right">
|
||||
@@ -201,11 +201,19 @@
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="go_learn" @click="goLearn">
|
||||
开始学习
|
||||
<view class="go_learn" @click="goLearn(detailData)">
|
||||
{{detailData.overallCompletionRate==0?'开始学习':detailData.overallCompletionRate==100?'回顾':'继续学习'}}
|
||||
</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>
|
||||
@@ -283,12 +291,14 @@
|
||||
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 {
|
||||
detailData: {},
|
||||
planDown: false,
|
||||
upContent: false,
|
||||
checked: false,
|
||||
@@ -424,7 +434,8 @@
|
||||
methods: {
|
||||
goLearn() {
|
||||
uni.navigateTo({
|
||||
url: '/pages/learnPath/learnPath'
|
||||
url: '/pages/learnPath/learnPath?growId='+this.detailData.growId+'&name='+this.detailData.growName
|
||||
|
||||
});
|
||||
},
|
||||
contentOn() {
|
||||
@@ -739,6 +750,12 @@
|
||||
if(localStorage.getItem("checkedTrue")!=null){
|
||||
this.learnModal = localStorage.getItem("checkedTrue") === "true"
|
||||
this.isChecked = localStorage.getItem("checkedTrue") === "false"
|
||||
getList(this.userInfo.aid).then(res=>{
|
||||
console.log(res,'res')
|
||||
if(res.code == 200 ){
|
||||
this.detailData = res.data
|
||||
}
|
||||
})
|
||||
}else{
|
||||
this.learnModal = true
|
||||
}
|
||||
|
||||
BIN
static/images/go.png
Normal file
BIN
static/images/go.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 359 B |
Reference in New Issue
Block a user