hz/fe-student
1
0
Fork 0
mirror of https://codeup.aliyun.com/67762337eccfc218f6110e0e/vue/fe-student.git synced 2025-12-11 03:46:48 +08:00
Code Issues Packages Projects Releases Wiki Activity

feat:增加项目/学习路径图的简介和关卡说明

Browse Source
This commit is contained in:
wuyx
2022-12-23 15:54:28 +08:00
parent 819c4148b0
commit 70c441e343
2 changed files with 618 additions and 675 deletions
Download Patch File Download Diff File Expand all files Collapse all files

28
src/views/project/ProjectDetails.vue
View File

@@ -2,7 +2,7 @@
<div class="pathdetails" style="padding: 30px">
<!-- 面包屑导航 -->
<div class="crumb">
<div>{{data.name}}</div>
<div>{{ data.name }}</div>
<div style="margin-left: 6px; margin-right: 6px">/</div>
<div style="font-weight: 700">项目详情</div>
@@ -116,7 +116,7 @@
<el-tabs v-model="activeName" @tab-click="handleClick">
<el-tab-pane label="课程公告" name="first">
<div class="notice">
{{ data.remark || "暂无公告" }}
{{ data.notice || "暂无公告" }}
</div>
</el-tab-pane>
<!--
@@ -238,11 +238,7 @@
</div>
<!-- 详细信息 -->
<!-- 弹框提示信息 -->
<el-dialog
title=""
top="347px"
v-model="dialogVisible"
:show-close="false"
<el-dialog title="" top="347px" v-model="dialogVisible" :show-close="false"
style="display:flex;justify-content:center;align-items:center;height: 283px;padding:0;border-radius: 4px;"
width="502px">
<div style="width:288px;color:#333333;font-size: 22px;font-weight: 600;">{{ dialogVisibleTip }}</div>
@@ -375,7 +371,7 @@ const dialogVisibleTip = ref('该任务无法学习，请联系管理员进行
// }
function introductionPro() {
dialogVisibleTip.value =data.value.remark;
dialogVisibleTip.value = data.value.remark;
dialogVisible.value = true;
}
@@ -386,7 +382,7 @@ function toFinish(d, sName, chapterId) {
let date1 = new Date(d.endTime).getTime();
let date2 = new Date().getTime();
if (date1 < date2) {
dialogVisibleTip.value ='当前作业已结束';
dialogVisibleTip.value = '当前作业已结束';
dialogVisible.value = true;
// ElMessage.error("当前作业已结束")
return
@@ -397,7 +393,7 @@ function toFinish(d, sName, chapterId) {
let date1 = new Date(d.endTime).getTime();
let date2 = new Date().getTime();
if (date1 < date2) {
dialogVisibleTip.value ='当前直播已结束';
dialogVisibleTip.value = '当前直播已结束';
dialogVisible.value = true;
return
}
@@ -406,7 +402,7 @@ function toFinish(d, sName, chapterId) {
if (d.type == 5) {
if (d.taskStatus == 1 || d.taskStatus == 2) {
// ElMessage.error("该任务无法学习，请联系管理员进行替换。")
dialogVisibleTip.value ='该任务无法学习，请联系管理员进行替换！';
dialogVisibleTip.value = '该任务无法学习，请联系管理员进行替换！';
dialogVisible.value = true;
return
}
@@ -415,7 +411,7 @@ function toFinish(d, sName, chapterId) {
if (d.type == 11) {
if (d.taskStatus == 1 || d.taskStatus == 2) {
// ElMessage.error("该任务无法学习，请联系管理员进行替换。")
dialogVisibleTip.value ='该任务无法学习，请联系管理员进行替换！';
dialogVisibleTip.value = '该任务无法学习，请联系管理员进行替换！';
dialogVisible.value = true;
return
}
@@ -425,7 +421,7 @@ function toFinish(d, sName, chapterId) {
let date1 = new Date(d.endTime).getTime();
let date2 = new Date().getTime();
if (date1 < date2) {
dialogVisibleTip.value ='当前活动已结束';
dialogVisibleTip.value = '当前活动已结束';
dialogVisible.value = true;
return
}
@@ -434,7 +430,7 @@ function toFinish(d, sName, chapterId) {
if (d.type == 1) {
if (d.taskStatus == 1 || d.taskStatus == 2) {
// ElMessage.error("该任务无法学习，请联系管理员进行替换。")
dialogVisibleTip.value ='该任务无法学习，请联系管理员进行替换！';
dialogVisibleTip.value = '该任务无法学习，请联系管理员进行替换！';
dialogVisible.value = true;
return
}
@@ -443,7 +439,7 @@ function toFinish(d, sName, chapterId) {
if (d.type == 2) {
if (d.taskStatus == 1 || d.taskStatus == 2) {
// ElMessage.error("该任务无法学习，请联系管理员进行替换。")
dialogVisibleTip.value ='该任务无法学习，请联系管理员进行替换！';
dialogVisibleTip.value = '该任务无法学习，请联系管理员进行替换！';
dialogVisible.value = true;
return
}
@@ -492,11 +488,13 @@ function whiteTypes(type) {
.el-dialog__header {
display: none;
}
.crumb {
color: #fff;
display: flex;
font-size: 14px;
line-height: 24px;
.return {
position: absolute;
right: 10%;

157
src/views/roadmap/PathDetails.vue
View File

@@ -16,7 +16,7 @@
<!-- 面包屑导航 -->
<div class="pdname">
{{ userInfo.bandDesc }}
<span @click="introductionPro" style="font-size:14px;color:#fff;margin-left: 33px;cursor: pointer;">简介
<span @click="introductionPro" style="font-size:14px;color:#fff;margin-left: 33px;cursor: pointer;">关卡说明
<span style="position: relative;top:1px;left:-3px;cursor: pointer;">></span>
</span>
</div>
@@ -27,35 +27,22 @@
<div class="title">
<div class="titleL">{{ data.currentStageName }}</div>
<div class="titleR" :style="{ display: 'flex' }">
<img
:src="data.currentChapterCnt?circle:circle2"/>
<div class="titleRT" :style="{color:data.currentChapterCnt?'':'rgba(102, 102, 102, 1)'}">
<img :src="data.currentChapterCnt ? circle : circle2" />
<div class="titleRT" :style="{ color: data.currentChapterCnt ? '' : 'rgba(102, 102, 102, 1)' }">
{{ data.currentChapterCnt ? '进行中' : '未开始' }}
</div>
</div>
</div>
<div
class="course"
v-for="(value, index) in data.taskBoList?.filter(
<div class="course" v-for="(value, index) in data.taskBoList?.filter(
(e) => !whiteTypes(e.type)
)"
:key="index"
>
)" :key="index">
<div style="width: 70%">
<div class="coursename" :title="value.name">{{ value.name }}</div>
<div class="coursetag">
<div
class="tag1"
style="margin-right: 11px; margin-top: 16px"
v-if="value.flag"
>
<div class="tag1" style="margin-right: 11px; margin-top: 16px" v-if="value.flag">
必修
</div>
<div
class="tag2"
style="margin-right: 11px; margin-top: 16px"
v-if="!value.flag"
>
<div class="tag2" style="margin-right: 11px; margin-top: 16px" v-if="!value.flag">
选修
</div>
<div class="tag3" style="margin-right: 11px; margin-top: 16px">
@@ -71,18 +58,11 @@
<!-- {{ item.name }}-->
<!-- </div>-->
</div>
<div
class="progressBox"
:style="{ display: value.type === 1 ? 'block' : 'none' }"
>
<div class="progressBox" :style="{ display: value.type === 1 ? 'block' : 'none' }">
<div>当前进度</div>
<div class="progress">
<div style="width: 291px">
<el-progress
:percentage="value.currentRatio"
:show-text="false"
:stroke-width="8"
:color="
<el-progress :percentage="value.currentRatio" :show-text="false" :stroke-width="8" :color="
{
0: 'rgba(238, 112, 108, 1)',
1: 'rgba(255, 151, 38, 1)',
@@ -91,17 +71,14 @@
4: 'rgba(57, 219, 183, 1)',
5: 'rgba(57, 219, 183, 1)',
}[parseInt(value.currentRatio / 20)]
"
/>
" />
</div>
<div
style="
<div style="
font-size: 14px;
font-weight: 500;
color: #277aff;
margin-left: 10px;
"
:style="{
" :style="{
color: {
0: 'rgba(238, 112, 108, 1)',
1: 'rgba(255, 151, 38, 1)',
@@ -110,20 +87,15 @@
4: 'rgba(57, 219, 183, 1)',
5: 'rgba(57, 219, 183, 1)',
}[parseInt(value.currentRatio / 20)],
}"
>
}">
{{ value.currentRatio }}%
</div>
</div>
</div>
</div>
<div
class="goclass"
:style="{
<div class="goclass" :style="{
background: `${types.path[value.type] ? '#2478ff' : '#999'}`,
}"
@click="toFinish(value)"
>
}" @click="toFinish(value)">
{{
value.status === 1
? "已完成"
@@ -191,19 +163,13 @@
<div class="detailRB">
<div class="info">
<div class="title">
<img
style="width: 21px; height: 20px"
src="../../assets/image/pathdetails/info.png"
/>
<img style="width: 21px; height: 20px" src="../../assets/image/pathdetails/info.png" />
<div class="text" style="margin-left: 7px">个人信息</div>
<div class="box"></div>
</div>
<!-- todo #路径详情 个人信息缺少img和介绍-->
<div
class="teacheritem"
:style="{ 'border-bottom': '1px solid rgba(56, 125, 247, 0.2)' }"
>
<img class="peopleimg" :src="userInfo.avatar"/>
<div class="teacheritem" :style="{ 'border-bottom': '1px solid rgba(56, 125, 247, 0.2)' }">
<img class="peopleimg" :src="userInfo.avatar" />
<div style="margin-left: 17px">
<div class="teacherName">
<div style="margin-right: 5px">
@@ -219,10 +185,7 @@
</div>
<div class="info" style="padding-top: 20px">
<div class="title">
<img
style="width: 18px; height: 17px"
src="../../assets/image/pathdetails/study.png"
/>
<img style="width: 18px; height: 17px" src="../../assets/image/pathdetails/study.png" />
<div class="text" style="margin-left: 9px">学习进度</div>
<div class="box"></div>
</div>
@@ -236,11 +199,8 @@
<div>总进度</div>
<div class="progress">
<div style="width: 291px">
<el-progress
:percentage="parseInt(data.currentChapterCnt/data.totalChapterCnt * 100)"
:show-text="false"
:stroke-width="8"
:color="
<el-progress :percentage="parseInt(data.currentChapterCnt / data.totalChapterCnt * 100)"
:show-text="false" :stroke-width="8" :color="
{
0: 'rgba(238, 112, 108, 1)',
1: 'rgba(255, 151, 38, 1)',
@@ -248,13 +208,10 @@
3: 'rgba(59, 94, 251, 1)',
4: 'rgba(57, 219, 183, 1)',
5: 'rgba(57, 219, 183, 1)',
}[(parseInt(data.currentChapterCnt/data.totalChapterCnt)* 100) / 20]
"
/>
}[(parseInt(data.currentChapterCnt / data.totalChapterCnt) * 100) / 20]
" />
</div>
<div
style="font-size: 14px; font-weight: 500; margin-left: 10px"
:style="{
<div style="font-size: 14px; font-weight: 500; margin-left: 10px" :style="{
color: {
0: 'rgba(238, 112, 108, 1)',
1: 'rgba(255, 151, 38, 1)',
@@ -262,10 +219,9 @@
3: 'rgba(59, 94, 251, 1)',
4: 'rgba(57, 219, 183, 1)',
5: 'rgba(57, 219, 183, 1)',
}[parseInt((data.currentChapterCnt/data.totalChapterCnt * 100) / 20)],
}"
>
{{ parseInt(data.currentChapterCnt/data.totalChapterCnt * 100) }}%
}[parseInt((data.currentChapterCnt / data.totalChapterCnt * 100) / 20)],
}">
{{ parseInt(data.currentChapterCnt / data.totalChapterCnt * 100) }}%
</div>
</div>
</div>
@@ -275,11 +231,8 @@
<div>必修进度</div>
<div class="progress">
<div style="width: 291px">
<el-progress
:percentage="parseInt(data.currentReqCnt/data.totalReqCnt * 100)"
:show-text="false"
:stroke-width="8"
:color="
<el-progress :percentage="parseInt(data.currentReqCnt / data.totalReqCnt * 100)" :show-text="false"
:stroke-width="8" :color="
{
0: 'rgba(238, 112, 108, 1)',
1: 'rgba(255, 151, 38, 1)',
@@ -287,18 +240,15 @@
3: 'rgba(59, 94, 251, 1)',
4: 'rgba(57, 219, 183, 1)',
5: 'rgba(57, 219, 183, 1)',
}[parseInt((data.currentReqCnt/data.totalReqCnt * 100) / 20)]
"
/>
}[parseInt((data.currentReqCnt / data.totalReqCnt * 100) / 20)]
" />
</div>
<div
style="
<div style="
font-size: 14px;
font-weight: 500;
color: #277aff;
margin-left: 10px;
"
:style="{
" :style="{
color: {
0: 'rgba(238, 112, 108, 1)',
1: 'rgba(255, 151, 38, 1)',
@@ -306,10 +256,9 @@
3: 'rgba(59, 94, 251, 1)',
4: 'rgba(57, 219, 183, 1)',
5: 'rgba(57, 219, 183, 1)',
}[parseInt((data.currentReqCnt/data.totalReqCnt * 100) / 20)],
}"
>
{{ parseInt(data.currentReqCnt/data.totalReqCnt * 100) }}%
}[parseInt((data.currentReqCnt / data.totalReqCnt * 100) / 20)],
}">
{{ parseInt(data.currentReqCnt / data.totalReqCnt * 100) }}%
</div>
</div>
</div>
@@ -321,11 +270,7 @@
</div>
<!-- 详细信息 -->
<!-- 弹框提示信息 -->
<el-dialog
title=""
top="347px"
v-model="dialogVisible"
:show-close="false"
<el-dialog title="" top="347px" v-model="dialogVisible" :show-close="false"
style="display:flex;justify-content:center;align-items:center;height: 283px;padding:0;border-radius: 4px;"
width="502px">
<div style="width:288px;color:#333333;font-size: 22px;font-weight: 600;">{{ dialogVisibleTip }}</div>
@@ -338,37 +283,37 @@
</template>
<script setup>
import {computed, reactive, ref, watch} from "vue";
import { computed, reactive, ref, watch } from "vue";
import circle from '../../assets/image/pathdetails/circle.png';
import circle2 from '../../assets/image/pathdetails/circle2.png';
import {boeRequest, useRequest, request} from "@/api/request";
import {ROUTER_PROCESS, LINK_DETAILS, STUDY_RECORD} from "@/api/api";
import {useRoute, useRouter} from "vue-router";
import {ElMessage} from "element-plus";
import { boeRequest, useRequest, request } from "@/api/request";
import { ROUTER_PROCESS, LINK_DETAILS, STUDY_RECORD } from "@/api/api";
import { useRoute, useRouter } from "vue-router";
import { ElMessage } from "element-plus";
import store from "@/store";
const {
query: {routerId, routerName},
query: { routerId, routerName },
} = useRoute();
const router = useRouter();
const returnclick = () => {
router.back();
};
const {data} = useRequest(ROUTER_PROCESS, {routerId});
const { data } = useRequest(ROUTER_PROCESS, { routerId });
const userInfo = computed(() => store.state.userInfo);
console.log('lalalallala', data)
const activeName = ref("first");
const handleClick = (tab, event) => {
console.log(tab, event);
};
const path = {1: "path"};
const path = { 1: "path" };
const dialogVisible = ref(false);
const dialogVisibleTip = ref('');
function introductionPro() {
dialogVisibleTip.value =data.value.remark;
dialogVisibleTip.value = data.value.chapterRemark ? data.value.chapterRemark : '暂无说明';
dialogVisible.value = true;
}
@@ -410,13 +355,13 @@ const types = ref({
4: "/homeworkpage",
5: import.meta.env.VITE_BOE_EXAM_DETAIL_URL, //考试
6: "/livebroadcast",
7: ({courseId}) =>
request(LINK_DETAILS(courseId), {}).then(({data: {linkAddress}}) =>
7: ({ courseId }) =>
request(LINK_DETAILS(courseId), {}).then(({ data: { linkAddress } }) =>
window.open(linkAddress)
), //外联
8: "/discusspage",
9: "/moreactive",
10: ({evaType, targetId}) =>
10: ({ evaType, targetId }) =>
window.open(
(evaType == 0
? import.meta.env.VITE_BOE_TEST_DETAIL_URL
@@ -455,7 +400,7 @@ function toFinish(d) {
type: 1,
courseId: d.courseId,
pName: data.value.name,
sName:data.value.currentStageName,
sName: data.value.currentStageName,
},
});
} else if (typeof types.value.path[d.type] === "function") {