hz/learning-system-mobile
1
0
Fork 0
mirror of https://codeup.aliyun.com/67762337eccfc218f6110e0e/vue/learning-system-mobile.git synced 2025-12-14 13:26:47 +08:00
Code Issues Packages Projects Releases Wiki Activity
Files
458acdd4d1df98ab09f3496024876a4f8328d687
learning-system-mobile/pages/learnPath/learnPath.vue
zhangsir 458acdd4d1 流程实现
2024-06-18 18:49:53 +08:00

477 lines
11 KiB
Vue
Raw Blame History

<template>
<view class="learn_path">
<view class="path_header">
<view class="text">成长路径图</view>
</view>
<view class="path_body">
<view class="body_header">
<view class="left">全岗位路径</view>
<view class="right">
<u-switch size="14" v-model="openDown" @change="change"></u-switch>
<text class="text">高亮显示未完成</text>
</view>
</view>
<view class="body_check">
<view class="left_check">
<view class="left"></view>
<view class="text">必修</view>
</view>
<view class="right_check">
<view class="right"></view>
<view class="text">选修</view>
</view>
</view>
<view class="end_learn">您的学习之旅已结束</view>
<view class="learn">
<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>
<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;
margin-bottom: 38rpx;
.text{
margin-top: 26rpx;
height: 60rpx;
font-weight: 600;
font-size: 44rpx;
color: #FFFFFF;
line-height: 60rpx;
}
}
.path_body{
background: #FFFFFF;
border-radius: 40rpx 40rpx 0rpx 0rpx;
height: 100vh;
.body_header{
display: flex;
justify-content: space-between;
align-items: center;
.left{
width: 204rpx;
height: 52rpx;
line-height: 52rpx;
text-align: center;
background: #387DF7;
border-radius: 26rpx;
font-weight: 500;
font-size: 28rpx;
color: #FFFFFF;
margin-left: 30rpx;
margin-top: 26rpx;
}
.right{
display: flex;
align-items: center;
margin-top: 32rpx;
margin-right: 34rpx;
.text{
height: 40rpx;
font-weight: 500;
font-size: 28rpx;
color: #333333;
line-height: 40rpx;
margin-left: 10rpx;
}
}
}
.body_check{
display: flex;
justify-content: center;
margin-top: 34rpx;
.left_check{
display: flex;
align-items: center;
.left{
width: 32rpx;
height: 32rpx;
background: #34CA2B;
border-radius: 4rpx;
}
.text{
height: 40rpx;
font-weight: 400;
font-size: 28rpx;
color: #333333;
line-height: 40rpx;
margin-left: 18rpx;
}
}
.right_check{
display: flex;
align-items: center;
margin-left: 102rpx;
.right{
width: 32rpx;
height: 32rpx;
background: #FE9C4A;
border-radius: 4rpx;
}
.text{
height: 40rpx;
font-weight: 400;
font-size: 28rpx;
color: #333333;
line-height: 40rpx;
margin-left: 18rpx;
}
}
}
}
.end_learn{
text-align: right;
margin-top: 30rpx;
margin-right: 24rpx;
height: 40rpx;
font-weight: 400;
font-size: 28rpx;
color: #387DF7;
line-height: 40rpx;
margin-bottom: 30rpx;
}
.learn{
width: 616rpx;
height: 952rpx;
background: url("../../static/images/learnpath/7learn.png") no-repeat;
background-size: 100%;
margin-left: 88rpx;
position: relative;
.learn_item{
width: 64rpx;
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;
}
}
}
</style>
Reference in New Issue View Git Blame Copy Permalink