mirror of
https://codeup.aliyun.com/67762337eccfc218f6110e0e/vue/fe-student.git
synced 2025-12-10 03:16:47 +08:00
提交
This commit is contained in:
Pengxiansen
390
src/views/growth/growthRoadmap.vue
Normal file
390
src/views/growth/growthRoadmap.vue
Normal file
@@ -0,0 +1,390 @@
|
||||
<template>
|
||||
<div
|
||||
style="
|
||||
background: #0078fc;
|
||||
height: 150px;
|
||||
width: 100%;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
z-index: -9999;
|
||||
"
|
||||
></div>
|
||||
|
||||
<div class="growth-roadmap pathdetails" style="padding: 30px">
|
||||
<div class="pdname">
|
||||
<div>{{ data?.growthName }}</div>
|
||||
<div
|
||||
v-if="data.description"
|
||||
style="font-size: 16px; font-weight: 600; margin-top: 10px"
|
||||
>
|
||||
简介：{{ data.description }}
|
||||
</div>
|
||||
</div>
|
||||
<div class="container">
|
||||
<div class="tabs">
|
||||
<div
|
||||
class="tabs-item"
|
||||
:class="queryParams.type == 1 ? 'active' : ''"
|
||||
@click="tabClick(1)"
|
||||
>
|
||||
<div class="tabs-text">必修</div>
|
||||
<div class="tabs-line"></div>
|
||||
</div>
|
||||
<div
|
||||
class="tabs-item"
|
||||
:class="queryParams.type == 2 ? 'active' : ''"
|
||||
@click="tabClick(2)"
|
||||
>
|
||||
<div class="tabs-text">选修</div>
|
||||
<div class="tabs-line"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div
|
||||
class="path-container"
|
||||
v-loading="loading"
|
||||
:style="stageProcessList.length ? '' : 'height:400px'"
|
||||
>
|
||||
<template v-if="stageProcessList && stageProcessList.length">
|
||||
<div
|
||||
class="path-item"
|
||||
@click="toFinish(item)"
|
||||
v-for="(item, index) of stageProcessList"
|
||||
:key="item.id"
|
||||
>
|
||||
<div class="item-content">
|
||||
<!-- 单数在左 -->
|
||||
|
||||
<div class="item-progress-left">
|
||||
<template v-if="index % 2 === 1">
|
||||
<div
|
||||
class="progress"
|
||||
:style="{
|
||||
width: item.completionStatus === '2' ? '360px' : '224px',
|
||||
background:
|
||||
item.completionStatus === '1' ? '#27A741' : '#ededed',
|
||||
}"
|
||||
>
|
||||
<template v-if="item.completionStatus === '2'">
|
||||
<div
|
||||
:style="{
|
||||
width: `${item.progress}%`,
|
||||
}"
|
||||
class="progress-content"
|
||||
>
|
||||
<div class="rocket">
|
||||
<img
|
||||
style="width: 100%; height: 100%"
|
||||
src="@/assets/image/growth/rocket.png"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<div
|
||||
:style="{
|
||||
width:
|
||||
item.completionStatus === '2' ? '360px' : '224px',
|
||||
color: item.completionStatus === '0' ? '#333' : '#fff',
|
||||
}"
|
||||
class="progress-text"
|
||||
>
|
||||
{{ item.taskName }}
|
||||
</div>
|
||||
</div>
|
||||
<div class="horizontal-line"></div>
|
||||
</template>
|
||||
</div>
|
||||
|
||||
<div class="icon">
|
||||
<template v-if="item.lastStudy">
|
||||
<img
|
||||
style="width: 100%; height: 100%"
|
||||
src="@/assets/image/growth/growth-icon4.png"
|
||||
/>
|
||||
</template>
|
||||
<template v-else-if="item.completionStatus === '1'">
|
||||
<img
|
||||
style="width: 100%; height: 100%"
|
||||
src="@/assets/image/growth/growth-icon1.png"
|
||||
/>
|
||||
</template>
|
||||
<template v-else-if="item.completionStatus === '2'">
|
||||
<img
|
||||
style="width: 100%; height: 100%"
|
||||
src="@/assets/image/growth/growth-icon2.png"
|
||||
/>
|
||||
</template>
|
||||
<template v-else-if="item.completionStatus === '0'">
|
||||
<img
|
||||
style="width: 100%; height: 100%"
|
||||
src="@/assets/image/growth/growth-icon3.png"
|
||||
/>
|
||||
</template>
|
||||
</div>
|
||||
<!-- 双数在右 -->
|
||||
<div class="item-progress-right">
|
||||
<template v-if="index % 2 === 0">
|
||||
<div class="horizontal-line"></div>
|
||||
<div
|
||||
class="progress"
|
||||
:style="{
|
||||
width: item.completionStatus === '2' ? '360px' : '224px',
|
||||
background:
|
||||
item.completionStatus === '1' ? '#27A741' : '#ededed',
|
||||
}"
|
||||
>
|
||||
<template v-if="item.completionStatus === '2'">
|
||||
<div
|
||||
:style="{
|
||||
width: `${item.progress}%`,
|
||||
}"
|
||||
class="progress-content"
|
||||
>
|
||||
<div class="rocket">
|
||||
<img
|
||||
style="width: 100%; height: 100%"
|
||||
src="@/assets/image/growth/rocket.png"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<div
|
||||
:style="{
|
||||
width:
|
||||
item.completionStatus === '2' ? '360px' : '224px',
|
||||
color: item.completionStatus === '0' ? '#333' : '#fff',
|
||||
}"
|
||||
class="progress-text"
|
||||
>
|
||||
{{ item.taskName }}
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
</div>
|
||||
</div>
|
||||
<template v-if="index != stageProcessList.length - 1">
|
||||
<div class="vertical-line">
|
||||
<!-- 虚线不可删除 -->
|
||||
<div></div>
|
||||
</div>
|
||||
</template>
|
||||
</div>
|
||||
</template>
|
||||
<template v-else>
|
||||
<el-empty description="暂无数据" />
|
||||
</template>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { computed, reactive, onMounted, onUnmounted, ref } from "vue";
|
||||
import { useRoute } from "vue-router";
|
||||
import { useRequest, request } from "@/api/request";
|
||||
import { useStore } from "vuex";
|
||||
import {
|
||||
PROFESSIONAL_STUDENT_TASKLIST,
|
||||
PROFESSIONAL_STUDENT_LEARN,
|
||||
} from "@/api/api";
|
||||
const { commit, dispatch, state } = useStore();
|
||||
const userInfo = computed(() => state.userInfo);
|
||||
const data = computed(() => state.growthInfo);
|
||||
const {
|
||||
query: { routerId },
|
||||
} = useRoute();
|
||||
// 查询条件
|
||||
const queryParams = reactive({
|
||||
type: 1,
|
||||
});
|
||||
const tabClick = (type, status) => {
|
||||
// 选修/必修
|
||||
if (type) {
|
||||
queryParams.type = type;
|
||||
}
|
||||
// 任务状态
|
||||
if (status) {
|
||||
queryParams.completionStatus = status;
|
||||
}
|
||||
getList();
|
||||
};
|
||||
|
||||
// 是否加载数据中
|
||||
const loading = ref(false);
|
||||
const getList = () => {
|
||||
loading.value = true;
|
||||
request(PROFESSIONAL_STUDENT_TASKLIST, {
|
||||
growthId: routerId,
|
||||
...queryParams,
|
||||
}).then((res) => {
|
||||
console.log(res);
|
||||
stageProcessList.value = res.data;
|
||||
loading.value = false;
|
||||
});
|
||||
};
|
||||
// 学习任务列表
|
||||
const stageProcessList = ref([]);
|
||||
onMounted(() => {
|
||||
getList();
|
||||
dispatch("getGrowthInfo", { routerId });
|
||||
});
|
||||
|
||||
function toFinish(item) {
|
||||
request(PROFESSIONAL_STUDENT_LEARN, {
|
||||
growthId: routerId,
|
||||
taskId: item.taskId,
|
||||
});
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
.growth-roadmap {
|
||||
box-sizing: border-box;
|
||||
.pdname {
|
||||
font-size: 20px;
|
||||
font-weight: 800;
|
||||
color: #ffffff;
|
||||
margin-top: 17px;
|
||||
}
|
||||
.path-item {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
.item-content {
|
||||
width: 100%;
|
||||
position: relative;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
|
||||
.item-progress-left,
|
||||
.item-progress-right {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
.item-progress-left {
|
||||
.progress {
|
||||
}
|
||||
}
|
||||
.progress {
|
||||
position: relative;
|
||||
height: 30px;
|
||||
border-radius: 20px;
|
||||
.progress-content {
|
||||
position: relative;
|
||||
border-radius: 20px;
|
||||
height: 30px;
|
||||
background: linear-gradient(90deg, #fecd49 0%, #e13915 100%);
|
||||
.rocket {
|
||||
position: absolute;
|
||||
width: 36px;
|
||||
height: 36px;
|
||||
top: -3px;
|
||||
}
|
||||
}
|
||||
.progress-text {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
height: 100%;
|
||||
padding: 0 24px;
|
||||
box-sizing: border-box;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
color: #fff;
|
||||
font-size: 16px;
|
||||
white-space: nowrap; /* 防止文本换行 */
|
||||
overflow: hidden; /* 隐藏溢出的内容 */
|
||||
text-overflow: ellipsis; /* 显示省略符号来代表被修剪的文本 */
|
||||
}
|
||||
}
|
||||
.item-progress-right {
|
||||
.progress {
|
||||
.progress-content {
|
||||
.rocket {
|
||||
right: -18px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.item-progress-left {
|
||||
justify-content: end;
|
||||
.progress {
|
||||
display: flex;
|
||||
justify-content: end;
|
||||
.progress-content {
|
||||
.rocket {
|
||||
left: -18px;
|
||||
transform: scaleX(-1);
|
||||
}
|
||||
}
|
||||
.progress-text {
|
||||
display: flex;
|
||||
justify-content: end;
|
||||
}
|
||||
}
|
||||
}
|
||||
.horizontal-line {
|
||||
height: 1px;
|
||||
width: 100px;
|
||||
border-top: 1px dashed #c5c6ca;
|
||||
}
|
||||
|
||||
.icon {
|
||||
width: 30px;
|
||||
height: 30px;
|
||||
}
|
||||
.item-text {
|
||||
margin-left: 10px;
|
||||
}
|
||||
}
|
||||
.vertical-line {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
width: 20px;
|
||||
height: 64px;
|
||||
div {
|
||||
height: 100%;
|
||||
border-left: 1px dashed #c5c6ca;
|
||||
width: 1px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.container {
|
||||
background: #ffffff;
|
||||
border-radius: 8px;
|
||||
margin-top: 24px;
|
||||
padding-bottom: 30px;
|
||||
}
|
||||
.path-container {
|
||||
padding: 64px 0;
|
||||
}
|
||||
.tabs {
|
||||
padding-top: 24px;
|
||||
box-sizing: border-box;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
.tabs-item {
|
||||
width: 135px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
flex-direction: column;
|
||||
font-size: 18px;
|
||||
font-weight: 700;
|
||||
}
|
||||
.tabs-line {
|
||||
width: 135px;
|
||||
height: 1px;
|
||||
margin-top: 2px;
|
||||
}
|
||||
.active {
|
||||
color: #2478ff;
|
||||
.tabs-line {
|
||||
background-color: #61a4f9;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user