mirror of
https://codeup.aliyun.com/67762337eccfc218f6110e0e/vue/fe-student.git
synced 2025-12-07 01:46:46 +08:00
路径
This commit is contained in:
yuping
@@ -11,7 +11,7 @@
|
||||
<!-- 基本信息 -->
|
||||
<div class="bascinfo">
|
||||
<div style="margin-left: 46px">
|
||||
<div class="title">【其他活动】{{ data.planDto?.name }}</div>
|
||||
<div class="title">【面授课】{{ data.planDto?.name }}</div>
|
||||
<div class="time" style="margin-top: 26px">
|
||||
<img width="15px" height="17px" src="../../assets/image/time.png"/>
|
||||
<div style="margin-left: 8px">{{ data.offcourseDto?.publishTime }}</div>
|
||||
@@ -59,7 +59,8 @@
|
||||
:style="{borderBottom: '1px solid rgba(56, 125, 247, 0.2)' }"
|
||||
>
|
||||
<div class="enclosureL">
|
||||
<FileTypeImg v-model="data.planDto.attach.split(',')[index]" :style="{width:'22px',height:'26px',marginLeft:'10px'}"></FileTypeImg>
|
||||
<FileTypeImg v-model="data.planDto.attach.split(',')[index]"
|
||||
:style="{width:'22px',height:'26px',marginLeft:'10px'}"></FileTypeImg>
|
||||
<div style="margin-left: 20px">{{ el }}</div>
|
||||
</div>
|
||||
<div class="download">
|
||||
@@ -131,11 +132,12 @@ import {reactive, toRefs, watch} from "vue";
|
||||
import FileTypeImg from "@/components/FileTypeImg.vue";
|
||||
import {request, useRequest} from "@/api/request";
|
||||
import {STU_OFFCOURSE_DETAIL} from "@/api/api";
|
||||
import {useRouter} from "vue-router";
|
||||
import {useRoute, useRouter} from "vue-router";
|
||||
|
||||
const router = useRouter()
|
||||
const {query: {id, type}} = useRoute()
|
||||
|
||||
const {data} = useRequest(STU_OFFCOURSE_DETAIL, {courseId: 178})
|
||||
const {data} = useRequest(STU_OFFCOURSE_DETAIL, {taskId: id, type})
|
||||
const state = reactive({
|
||||
activeName: "first",
|
||||
enclosure: ''
|
||||
|
||||
@@ -41,20 +41,7 @@
|
||||
<div class="coursetag">
|
||||
<div class="tag1" style="margin-right: 11px; margin-top: 16px">必修</div>
|
||||
<div class="tag3" style="margin-right: 11px; margin-top: 16px">{{
|
||||
{
|
||||
1: '在线',
|
||||
2: '面授',
|
||||
3: '案例',
|
||||
4: '作业',
|
||||
5: '考试',
|
||||
6: '直播',
|
||||
7: '外链',
|
||||
8: '讨论',
|
||||
9: '活动',
|
||||
10: '测评',
|
||||
11: '评估',
|
||||
12: '投票'
|
||||
}[value.type] || ''
|
||||
types.typeName[value.type] || ''
|
||||
}}
|
||||
</div>
|
||||
|
||||
@@ -114,12 +101,15 @@
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="goclass" @click="toFinish(value)">
|
||||
{{
|
||||
types.toName[value.type] || ''
|
||||
}}
|
||||
</div>
|
||||
<div :style="{ display: value.status === 1 ? 'block' : 'none' }">
|
||||
<div
|
||||
class="goclass"
|
||||
:style="{ display: value.currentRatio === 0 ? 'none' : 'flex' }"
|
||||
>
|
||||
去上课
|
||||
:style="{ display: value.currentRatio === 0 ? 'none' : 'flex' }">去上课
|
||||
</div>
|
||||
<img
|
||||
style="width: 76px; height: 76px; margin-right: 61px"
|
||||
@@ -188,25 +178,18 @@
|
||||
</div>
|
||||
<!-- todo #路径详情 个人信息缺少img和介绍-->
|
||||
<div
|
||||
v-for="(el, index) in [data.userInfoBo]"
|
||||
:key="el.userId"
|
||||
class="teacheritem"
|
||||
:style="{
|
||||
'border-bottom':
|
||||
index === teacher.length - 1
|
||||
? null
|
||||
: '1px solid rgba(56, 125, 247, 0.2)',
|
||||
}"
|
||||
:style="{'border-bottom': '1px solid rgba(56, 125, 247, 0.2)'}"
|
||||
>
|
||||
<img class="peopleimg" :src="el.peopleimg"/>
|
||||
<img class="peopleimg" :src="data.userInfoBo?.peopleimg"/>
|
||||
<div style="margin-left: 17px">
|
||||
<div class="teacherName">
|
||||
<div style="margin-right: 5px">{{ el.userName }}</div>
|
||||
<div v-for="(item, key) in el.medal" :key="key">
|
||||
<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"/>
|
||||
</div>
|
||||
</div>
|
||||
<div class="introduce">{{ el.introduce }}</div>
|
||||
<div class="introduce">{{ data.userInfoBo?.introduce }}</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@@ -320,8 +303,8 @@
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import {reactive, toRefs} from "vue";
|
||||
<script setup>
|
||||
import {reactive, ref} 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'
|
||||
@@ -333,209 +316,256 @@ import medal3 from '@/assets/image/medal/medal3.png'
|
||||
import img from '@/assets/image/uploadimg.png'
|
||||
import {useRequest} from "@/api/request";
|
||||
import {ROUTER_PROCESS} from "@/api/api";
|
||||
import {useRoute} from "vue-router";
|
||||
import {useRoute, useRouter} from "vue-router";
|
||||
|
||||
export default {
|
||||
name: "PathDetails",
|
||||
setup() {
|
||||
const {query:{routerId}} = useRoute()
|
||||
const {data} = useRequest(ROUTER_PROCESS, {routerId})
|
||||
const state = reactive({
|
||||
activeName: "first",
|
||||
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: [
|
||||
|
||||
const {query: {routerId}} = useRoute()
|
||||
const router = useRouter()
|
||||
const {data} = useRequest(ROUTER_PROCESS, {routerId})
|
||||
const state = reactive({
|
||||
course: [
|
||||
{
|
||||
state: 1, //1：进行中 2：未开始
|
||||
title: "序：产品经理从初级到中级",
|
||||
courseItem: [
|
||||
{
|
||||
id: 1,
|
||||
name: "项目参考文档.doc",
|
||||
img: word,
|
||||
name: "人工智能启蒙就讲解（上）",
|
||||
tag: [
|
||||
{
|
||||
classify: 1, //1：必修 2：选修 3：在线、测评等 4：标签
|
||||
name: "必修",
|
||||
},
|
||||
{
|
||||
classify: 3,
|
||||
name: "在线",
|
||||
},
|
||||
{
|
||||
classify: 4,
|
||||
name: "#通用力",
|
||||
},
|
||||
{
|
||||
classify: 4,
|
||||
name: "#前沿趋势",
|
||||
},
|
||||
],
|
||||
progress: 90,
|
||||
},
|
||||
{
|
||||
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,
|
||||
name: "人工智能启蒙就讲解（下）",
|
||||
tag: [
|
||||
{
|
||||
classify: 2,
|
||||
name: "选修",
|
||||
},
|
||||
{
|
||||
classify: 3,
|
||||
name: "测评",
|
||||
},
|
||||
{
|
||||
classify: 4,
|
||||
name: "#通用力",
|
||||
},
|
||||
{
|
||||
classify: 4,
|
||||
name: "#前沿趋势",
|
||||
},
|
||||
],
|
||||
progress: 0,
|
||||
},
|
||||
],
|
||||
totalprogress: 30, //总进度
|
||||
compulsoryprogress: 10, //必修进度
|
||||
});
|
||||
const handleClick = (tab, event) => {
|
||||
console.log(tab, event);
|
||||
};
|
||||
return {
|
||||
...toRefs(state),
|
||||
handleClick,
|
||||
data,
|
||||
};
|
||||
},
|
||||
},
|
||||
{
|
||||
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 types = ref({
|
||||
typeName: {
|
||||
1: '在线',
|
||||
2: '面授',
|
||||
3: '案例',
|
||||
4: '作业',
|
||||
5: '考试',
|
||||
6: '直播',
|
||||
7: '外链',
|
||||
8: '讨论',
|
||||
9: '活动',
|
||||
10: '测评',
|
||||
11: '评估',
|
||||
12: '投票',
|
||||
13: '项目',
|
||||
},
|
||||
toName: {
|
||||
1: '去上课',
|
||||
2: '去上课',
|
||||
3: '案例',
|
||||
4: '去完成',
|
||||
5: '去完成',
|
||||
6: '去签到',
|
||||
7: '外链',
|
||||
8: '去讨论',
|
||||
9: '去完成',
|
||||
10: '去完成',
|
||||
11: '去完成',
|
||||
12: '去投票',
|
||||
13: '去完成',
|
||||
},
|
||||
path: {
|
||||
1: '去上课',
|
||||
2: '/faceteach',
|
||||
3: '案例',
|
||||
4: '去完成',
|
||||
5: '去完成',
|
||||
6: '去签到',
|
||||
7: '外链',
|
||||
8: '去讨论',
|
||||
9: '去完成',
|
||||
10: '去完成',
|
||||
11: '去完成',
|
||||
12: '去投票',
|
||||
13: '去完成'
|
||||
}
|
||||
})
|
||||
|
||||
function toFinish(d) {
|
||||
router.push({path: types.value.path[d.type], query: {id: d.routerTaskId, type: 1}})
|
||||
}
|
||||
|
||||
</script>
|
||||
|
||||
<!-- Add "scoped" attribute to limit CSS to this component only -->
|
||||
|
||||
Reference in New Issue
Block a user