mirror of
https://codeup.aliyun.com/67762337eccfc218f6110e0e/vue/fe-student.git
synced 2025-12-12 12:26:49 +08:00
init
This commit is contained in:
yuping
@@ -15,38 +15,38 @@
|
||||
<div class="title">
|
||||
<div class="titleL">{{ i.chapterName }}</div>
|
||||
<div class="titleR" :style="{ display: 'flex' }">
|
||||
<img src="../../assets/image/pathdetails/circle.png" />
|
||||
<img src="../../assets/image/pathdetails/circle.png"/>
|
||||
<div class="titleRT">进行中</div>
|
||||
</div>
|
||||
<div
|
||||
class="titleR"
|
||||
:style="{ display: i.status === 2 ? 'flex' : 'none' }"
|
||||
class="titleR"
|
||||
:style="{ display: i.status === 2 ? 'flex' : 'none' }"
|
||||
>
|
||||
<img src="../../assets/image/pathdetails/circle2.png" />
|
||||
<img src="../../assets/image/pathdetails/circle2.png"/>
|
||||
<div class="titleRT" style="color: rgba(102, 102, 102, 1)">
|
||||
未开始
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
class="course"
|
||||
v-for="(value, index) in i.taskProcessList"
|
||||
:key="index"
|
||||
class="course"
|
||||
v-for="(value, index) in i.taskProcessList"
|
||||
:key="index"
|
||||
>
|
||||
<div>
|
||||
<div class="coursename">{{ value.name }}</div>
|
||||
<div class="coursetag">
|
||||
<div
|
||||
class="tag1"
|
||||
style="margin-right: 11px; margin-top: 16px"
|
||||
v-if="value.flag"
|
||||
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"
|
||||
class="tag2"
|
||||
style="margin-right: 11px; margin-top: 16px"
|
||||
v-if="!value.flag"
|
||||
>
|
||||
选修
|
||||
</div>
|
||||
@@ -64,17 +64,17 @@
|
||||
<!-- </div>-->
|
||||
</div>
|
||||
<div
|
||||
class="progressBox"
|
||||
:style="{ display: value.status === 1 ? 'block' : 'none' }"
|
||||
class="progressBox"
|
||||
:style="{ display: value.status === 1 ? 'block' : 'none' }"
|
||||
>
|
||||
<div>当前进度</div>
|
||||
<div class="progress">
|
||||
<div style="width: 291px">
|
||||
<el-progress
|
||||
:percentage="value.currentRatio"
|
||||
:show-text="false"
|
||||
:stroke-width="8"
|
||||
:color="
|
||||
:percentage="value.currentRatio"
|
||||
:show-text="false"
|
||||
:stroke-width="8"
|
||||
:color="
|
||||
{
|
||||
0: 'rgba(238, 112, 108, 1)',
|
||||
1: 'rgba(255, 151, 38, 1)',
|
||||
@@ -87,13 +87,13 @@
|
||||
/>
|
||||
</div>
|
||||
<div
|
||||
style="
|
||||
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,18 +110,18 @@
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
class="goclass"
|
||||
:style="{
|
||||
class="goclass"
|
||||
:style="{
|
||||
background: `${types.path[value.type] ? '#2478ff' : '#999'}`,
|
||||
}"
|
||||
@click="toFinish(value)"
|
||||
@click="toFinish(value,i.name)"
|
||||
>
|
||||
{{
|
||||
value.status === 1
|
||||
? "已完成"
|
||||
: types.path[value.type]
|
||||
? types.toName[value.type]
|
||||
: "未开放"
|
||||
? "已完成"
|
||||
: types.path[value.type]
|
||||
? types.toName[value.type]
|
||||
: "未开放"
|
||||
}}
|
||||
</div>
|
||||
<!-- <div :style="{ display: value.status === 1 ? 'block' : 'none' }">-->
|
||||
@@ -151,29 +151,29 @@
|
||||
<div class="notice">
|
||||
请各位选课的同学提前阅读本课程的
|
||||
“教学大纲与计划”“课程考核要求”与“学习要求”
|
||||
，并按给定的中学化学教学主题分好小组 <br />
|
||||
每位同学在网上学习的活动轨迹都会自动被系统记录将作为大家个人线上参与的评价依据；<br />
|
||||
，并按给定的中学化学教学主题分好小组 <br/>
|
||||
每位同学在网上学习的活动轨迹都会自动被系统记录将作为大家个人线上参与的评价依据；<br/>
|
||||
请大家务必在规定的时间内提交作业，否则会被系统自动记录为“迟交”或“未交”则会影响线上参与的平时成
|
||||
绩；<br />
|
||||
绩；<br/>
|
||||
</div>
|
||||
</el-tab-pane>
|
||||
<el-tab-pane label="共享文档" name="second">
|
||||
<div style="padding: 19px 30px 17px 28px">
|
||||
<div
|
||||
v-for="(value, index) in sharedoc"
|
||||
:key="index"
|
||||
style="
|
||||
v-for="(value, index) in sharedoc"
|
||||
:key="index"
|
||||
style="
|
||||
display: flex;
|
||||
align-items: center;
|
||||
margin-bottom: 15px;
|
||||
"
|
||||
>
|
||||
<img :src="value.img" style="width: 22px; height: 26px" />
|
||||
<img :src="value.img" style="width: 22px; height: 26px"/>
|
||||
<div class="sharedocname">{{ value.name }}</div>
|
||||
<div class="download">
|
||||
<img
|
||||
src="../../assets/image/download.png"
|
||||
style="width: 16px; height: 15px"
|
||||
src="../../assets/image/download.png"
|
||||
style="width: 16px; height: 15px"
|
||||
/>
|
||||
<div style="margin-left: 7px">下载</div>
|
||||
</div>
|
||||
@@ -188,25 +188,25 @@
|
||||
<div class="info">
|
||||
<div class="title">
|
||||
<img
|
||||
style="width: 21px; height: 20px"
|
||||
src="../../assets/image/pathdetails/info.png"
|
||||
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)' }"
|
||||
class="teacheritem"
|
||||
:style="{ 'border-bottom': '1px solid rgba(56, 125, 247, 0.2)' }"
|
||||
>
|
||||
<img class="peopleimg" :src="userAvatar" />
|
||||
<img class="peopleimg" :src="userAvatar"/>
|
||||
<div style="margin-left: 17px">
|
||||
<div class="teacherName">
|
||||
<div style="margin-right: 5px">
|
||||
{{ data.userInfoBo?.userName }}
|
||||
</div>
|
||||
<div v-for="(item, key) in data.userInfoBo?.medal" :key="key">
|
||||
<img class="teacherMedal" :src="item" />
|
||||
<img class="teacherMedal" :src="item"/>
|
||||
</div>
|
||||
</div>
|
||||
<div class="introduce">{{ data.userInfoBo?.introduce }}</div>
|
||||
@@ -216,8 +216,8 @@
|
||||
<div class="info" style="padding-top: 20px">
|
||||
<div class="title">
|
||||
<img
|
||||
style="width: 18px; height: 17px"
|
||||
src="../../assets/image/pathdetails/study.png"
|
||||
style="width: 18px; height: 17px"
|
||||
src="../../assets/image/pathdetails/study.png"
|
||||
/>
|
||||
<div class="text" style="margin-left: 9px">学习进度</div>
|
||||
<div class="box"></div>
|
||||
@@ -232,14 +232,14 @@
|
||||
<div class="progress">
|
||||
<div style="width: 291px">
|
||||
<el-progress
|
||||
:percentage="
|
||||
:percentage="
|
||||
parseInt(
|
||||
(data.currentChapterCnt / data.totalChapterCnt) * 100
|
||||
)
|
||||
"
|
||||
:show-text="false"
|
||||
:stroke-width="8"
|
||||
:color="
|
||||
:show-text="false"
|
||||
:stroke-width="8"
|
||||
:color="
|
||||
{
|
||||
0: 'rgba(238, 112, 108, 1)',
|
||||
1: 'rgba(255, 151, 38, 1)',
|
||||
@@ -256,8 +256,8 @@
|
||||
/>
|
||||
</div>
|
||||
<div
|
||||
style="font-size: 14px; font-weight: 500; margin-left: 10px"
|
||||
:style="{
|
||||
style="font-size: 14px; font-weight: 500; margin-left: 10px"
|
||||
:style="{
|
||||
color: {
|
||||
0: 'rgba(238, 112, 108, 1)',
|
||||
1: 'rgba(255, 151, 38, 1)',
|
||||
@@ -272,7 +272,7 @@
|
||||
>
|
||||
{{
|
||||
parseInt(
|
||||
(data.currentChapterCnt / data.totalChapterCnt) * 100
|
||||
(data.currentChapterCnt / data.totalChapterCnt) * 100
|
||||
)
|
||||
}}%
|
||||
</div>
|
||||
@@ -285,12 +285,12 @@
|
||||
<div class="progress">
|
||||
<div style="width: 291px">
|
||||
<el-progress
|
||||
:percentage="
|
||||
:percentage="
|
||||
parseInt((data.currentReqCnt / data.totalReqCnt) * 100)
|
||||
"
|
||||
:show-text="false"
|
||||
:stroke-width="8"
|
||||
:color="
|
||||
:show-text="false"
|
||||
:stroke-width="8"
|
||||
:color="
|
||||
{
|
||||
0: 'rgba(238, 112, 108, 1)',
|
||||
1: 'rgba(255, 151, 38, 1)',
|
||||
@@ -303,13 +303,13 @@
|
||||
/>
|
||||
</div>
|
||||
<div
|
||||
style="
|
||||
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)',
|
||||
@@ -337,7 +337,7 @@
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { computed, reactive, ref, watch } from "vue";
|
||||
import {computed, reactive, ref, watch} from "vue";
|
||||
import word from "@/assets/image/file/word.png";
|
||||
import ppt from "@/assets/image/file/ppt.png";
|
||||
import pdf from "@/assets/image/file/pdf.png";
|
||||
@@ -347,208 +347,27 @@ import medal1 from "@/assets/image/medal/medal1.png";
|
||||
import medal2 from "@/assets/image/medal/medal2.png";
|
||||
import medal3 from "@/assets/image/medal/medal3.png";
|
||||
import img from "@/assets/image/uploadimg.png";
|
||||
import { boeRequest, useRequest, request } from "@/api/request";
|
||||
import { ROUTER_PROCESS, LINK_DETAILS } from "@/api/api";
|
||||
import { useRoute, useRouter } from "vue-router";
|
||||
import { ElMessage } from "element-plus";
|
||||
import { useUserInfo } from "@/api/utils";
|
||||
import {boeRequest, useRequest, request} from "@/api/request";
|
||||
import {ROUTER_PROCESS, LINK_DETAILS} from "@/api/api";
|
||||
import {useRoute, useRouter} from "vue-router";
|
||||
import {ElMessage} from "element-plus";
|
||||
import {useUserInfo} from "@/api/utils";
|
||||
|
||||
const {
|
||||
query: { routerId },
|
||||
query: {routerId},
|
||||
} = useRoute();
|
||||
const router = useRouter();
|
||||
const { data } = useRequest(ROUTER_PROCESS, { routerId });
|
||||
const { avatar: userAvatar } = useUserInfo(
|
||||
computed(() => data.value?.userInfoBo?.userId)
|
||||
const {data} = useRequest(ROUTER_PROCESS, {routerId});
|
||||
const {avatar: userAvatar} = useUserInfo(
|
||||
computed(() => data.value?.userInfoBo?.userId)
|
||||
);
|
||||
|
||||
const state = reactive({
|
||||
course: [
|
||||
{
|
||||
state: 1, //1：进行中 2：未开始
|
||||
title: "序：产品经理从初级到中级",
|
||||
courseItem: [
|
||||
{
|
||||
id: 1,
|
||||
name: "人工智能启蒙就讲解（上）",
|
||||
tag: [
|
||||
{
|
||||
classify: 1, //1：必修 2：选修 3：在线、测评等 4：标签
|
||||
name: "必修",
|
||||
},
|
||||
{
|
||||
classify: 3,
|
||||
name: "在线",
|
||||
},
|
||||
{
|
||||
classify: 4,
|
||||
name: "#通用力",
|
||||
},
|
||||
{
|
||||
classify: 4,
|
||||
name: "#前沿趋势",
|
||||
},
|
||||
],
|
||||
progress: 90,
|
||||
},
|
||||
{
|
||||
id: 1,
|
||||
name: "人工智能启蒙就讲解（下）",
|
||||
tag: [
|
||||
{
|
||||
classify: 2,
|
||||
name: "选修",
|
||||
},
|
||||
{
|
||||
classify: 3,
|
||||
name: "测评",
|
||||
},
|
||||
{
|
||||
classify: 4,
|
||||
name: "#通用力",
|
||||
},
|
||||
{
|
||||
classify: 4,
|
||||
name: "#前沿趋势",
|
||||
},
|
||||
],
|
||||
progress: 0,
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
state: 2, //1：进行中 2：未开始
|
||||
title: "第一讲：中级产品经理的思考逻辑",
|
||||
courseItem: [
|
||||
{
|
||||
id: 1,
|
||||
name: "趣味课前小测 - MBTI测试：你适合做哪个方向？",
|
||||
tag: [
|
||||
{
|
||||
classify: 1, //1：必修 2：选修 3：在线、测评等 4：标签
|
||||
name: "必修",
|
||||
},
|
||||
{
|
||||
classify: 3,
|
||||
name: "测评",
|
||||
},
|
||||
],
|
||||
progress: 48,
|
||||
},
|
||||
{
|
||||
id: 1,
|
||||
name: "趣味课前小测 - MBTI测试：你适合做哪个方向？",
|
||||
tag: [
|
||||
{
|
||||
classify: 2,
|
||||
name: "选修",
|
||||
},
|
||||
{
|
||||
classify: 3,
|
||||
name: "外部链接",
|
||||
},
|
||||
],
|
||||
progress: 0,
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
state: 2, //1：进行中 2：未开始
|
||||
title: "第二讲：模块化产品展示",
|
||||
courseItem: [
|
||||
{
|
||||
id: 1,
|
||||
name: "模块化产品展示相关案例与展示：如何自由组合你的思考？",
|
||||
tag: [
|
||||
{
|
||||
classify: 1, //1：必修 2：选修 3：在线、测评等 4：标签
|
||||
name: "必修",
|
||||
},
|
||||
{
|
||||
classify: 3,
|
||||
name: "测评",
|
||||
},
|
||||
],
|
||||
progress: 48,
|
||||
},
|
||||
{
|
||||
id: 1,
|
||||
name: "社交产品如何做好模块化处理？",
|
||||
tag: [
|
||||
{
|
||||
classify: 2,
|
||||
name: "选修",
|
||||
},
|
||||
{
|
||||
classify: 3,
|
||||
name: "作业",
|
||||
},
|
||||
],
|
||||
progress: 0,
|
||||
},
|
||||
{
|
||||
id: 1,
|
||||
name: "微信与Telegram哪个平台的功能模块化做的最好？",
|
||||
tag: [
|
||||
{
|
||||
classify: 2,
|
||||
name: "选修",
|
||||
},
|
||||
{
|
||||
classify: 3,
|
||||
name: "辩论",
|
||||
},
|
||||
],
|
||||
progress: 0,
|
||||
},
|
||||
],
|
||||
},
|
||||
],
|
||||
sharedoc: [
|
||||
{
|
||||
id: 1,
|
||||
name: "项目参考文档.doc",
|
||||
img: word,
|
||||
},
|
||||
{
|
||||
id: 2,
|
||||
name: "人工智能启蒙讲解讲义.pptx",
|
||||
img: ppt,
|
||||
},
|
||||
{
|
||||
id: 3,
|
||||
name: "中级产品经理必备工具.pdf",
|
||||
img: pdf,
|
||||
},
|
||||
{
|
||||
id: 4,
|
||||
name: "Python学习入门讲义.zip",
|
||||
img: zip,
|
||||
},
|
||||
{
|
||||
id: 5,
|
||||
name: "Axure RP10更新内容.md",
|
||||
img: md,
|
||||
},
|
||||
],
|
||||
teacher: [
|
||||
{
|
||||
id: 1,
|
||||
name: "王星天（显示事业）",
|
||||
introduce: "教师是学生的镜子,学生是老师的影子。",
|
||||
peopleimg: img,
|
||||
medal: [medal1, medal2, medal3],
|
||||
},
|
||||
],
|
||||
});
|
||||
const activeName = ref("first");
|
||||
const totalprogress = ref(30);
|
||||
const compulsoryprogress = ref(10);
|
||||
|
||||
const handleClick = (tab, event) => {
|
||||
console.log(tab, event);
|
||||
};
|
||||
const path = { 1: "path" };
|
||||
const path = {1: "path"};
|
||||
|
||||
const types = ref({
|
||||
typeName: {
|
||||
@@ -601,7 +420,7 @@ const types = ref({
|
||||
},
|
||||
});
|
||||
|
||||
function toFinish(d) {
|
||||
function toFinish(d, sName) {
|
||||
console.log("ddd", d);
|
||||
if (!types.value.path[d.type]) {
|
||||
ElMessage.error("暂时未开放");
|
||||
@@ -615,16 +434,16 @@ function toFinish(d) {
|
||||
url = types.value.path[d.type][0] + d.targetId;
|
||||
}
|
||||
import.meta.env.DEV
|
||||
? (window.location.href = url)
|
||||
: (window.parent.location.href = url);
|
||||
? (window.location.href = url)
|
||||
: (window.parent.location.href = url);
|
||||
return;
|
||||
}
|
||||
if (types.value.path[d.type] && types.value.path[d.type].startsWith("http")) {
|
||||
//配置文件
|
||||
const url = types.value.path[d.type] + d.targetId;
|
||||
import.meta.env.DEV
|
||||
? (window.location.href = url)
|
||||
: (window.parent.location.href = url);
|
||||
? (window.location.href = url)
|
||||
: (window.parent.location.href = url);
|
||||
return;
|
||||
}
|
||||
if (d.type === 7) {
|
||||
@@ -634,15 +453,15 @@ function toFinish(d) {
|
||||
if (res.code === 200) {
|
||||
const url = res.data.linkAddress;
|
||||
import.meta.env.DEV
|
||||
? (window.location.href = url)
|
||||
: (window.parent.location.href = url);
|
||||
? (window.location.href = url)
|
||||
: (window.parent.location.href = url);
|
||||
}
|
||||
});
|
||||
return;
|
||||
}
|
||||
router.push({
|
||||
path: types.value.path[d.type],
|
||||
query: { id: d.routerTaskId, type: 1, courseId: d.courseId },
|
||||
query: {id: d.routerTaskId, type: 1, courseId: d.courseId, pName: data.name, sName},
|
||||
});
|
||||
}
|
||||
</script>
|
||||
|
||||
Reference in New Issue
Block a user