This commit is contained in:
yuping
2022-12-13 05:48:36 +08:00
parent b7d6b4c04e
commit 9c9f142d0e
3 changed files with 285 additions and 234 deletions

View File

@@ -14,6 +14,7 @@ export const COMMON_TOKEN = 'https://upload-z2.qiniup.com'
export const ROUTER_CHAPTER_LIST = '/stu/router/chapterList'
export const ROUTER_LIST = '/stu/router/list post'
export const ROUTER_PROCESS = '/stu/router/process'
export const PROJECT_PROCESS = '/stu/project/process'
export const ROUTER_UNCOMPLETE_LIST = '/stu/router/unCompleteTaskList post'
export const TAS_ACTIVITY_DETAIL = '/activity'
export const TASK_ACTIVITY_SIGN = '/activitySubmit/updateActivitySignInStatus post'

View File

@@ -236,13 +236,13 @@ const state = reactive({
const {textarea1} = toRefs(state);
const router = useRouter()
const {query: {id: taskId, type}} = useRoute()
const {query: {courseId:workId,type}} = useRoute()
const {data} = useRequest(TASK_WORK_DETAIL, {taskId, type})
const {data: submitList} = useRequest(TASK_WORK_SUBMIT_LIST, {taskId, type})
const {data} = useRequest(TASK_WORK_DETAIL, {workId})
const {data: submitList} = useRequest(TASK_WORK_SUBMIT_LIST, {workId})
const handleClick = () => {
request(TASK_WORK_COMMIT, {projectOrRouterLogo: type, workUploadContent: textarea1.value, taskId}).then(res => {
request(TASK_WORK_COMMIT, {projectOrRouterLogo: type, workUploadContent: textarea1.value, workId}).then(res => {
submitList.value.unshift(res.data)
})
textarea1.value=''

View File

@@ -16,7 +16,7 @@
<div class="titleL">{{ i.chapterName }}</div>
<div
class="titleR"
:style="{ display: i.status === 1 ? 'flex' : 'none' }"
:style="{ display: 'flex' }"
>
<img src="../../assets/image/pathdetails/circle.png"/>
<div class="titleRT">进行中</div>
@@ -39,15 +39,20 @@
<div>
<div class="coursename">{{ value.name }}</div>
<div class="coursetag">
<!-- todo #路径详情 缺少标签-->
<!-- <div-->
<!-- v-for="(item, key) in value.flag"-->
<!-- :key="key"-->
<!-- :class="{1:'tag1',2:'tag2',3:'tag3',4:'tag4'}[item.type]"-->
<!-- style="margin-right: 11px; margin-top: 16px"-->
<!-- >-->
<!-- {{ item.name }}-->
<!-- </div>-->
<div class="tag1" style="margin-right: 11px; margin-top: 16px">必修</div>
<div class="tag3" style="margin-right: 11px; margin-top: 16px">{{
types.typeName[value.type] || ''
}}
</div>
<!-- <div-->
<!-- v-for="(item, key) in value.flag"-->
<!-- :key="key"-->
<!-- :class="{1:'tag1',2:'tag2',3:'tag3',4:'tag4'}[item.type]"-->
<!-- style="margin-right: 11px; margin-top: 16px"-->
<!-- >-->
<!-- {{ item.name }}-->
<!-- </div>-->
</div>
<div
class="progressBox"
@@ -96,19 +101,22 @@
</div>
</div>
</div>
<div :style="{ display: value.status === 1 ? 'block' : 'none' }">
<div
class="goclass"
:style="{ display: value.currentRatio === 0 ? 'none' : 'flex' }"
>
去上课
</div>
<img
style="width: 76px; height: 76px; margin-right: 61px"
:style="{ display: value.currentRatio === 0 ? 'flex' : 'none' }"
src="../../assets/image/pathdetails/notstarted.png"
/>
<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' }">去上课-->
<!-- </div>-->
<!-- <img-->
<!-- style="width: 76px; height: 76px; margin-right: 61px"-->
<!-- :style="{ display: value.currentRatio === 0 ? 'flex' : 'none' }"-->
<!-- src="../../assets/image/pathdetails/notstarted.png"-->
<!-- />-->
<!-- </div>-->
</div>
</div>
<!-- <div class="tag1">必修</div>
@@ -117,7 +125,7 @@
<div class="tag4">#通用力</div> -->
</div>
<div class="detailR">
<!-- todo #路径详情 课程公告及共享文档缺失-->
<!-- todo #路径详情 课程公告及共享文档缺失-->
<!-- 课程公告及共享文档 -->
<div class="detailRT">
<el-tabs v-model="activeName" @tab-click="handleClick">
@@ -168,27 +176,20 @@
<div class="text" style="margin-left: 7px">个人信息</div>
<div class="box"></div>
</div>
<!-- todo #路径详情 个人信息缺少img和介绍-->
<!-- todo #路径详情 个人信息缺少img和介绍-->
<div
v-for="(el, index) in [data.userInfoBo]"
:key="el.id"
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>
@@ -302,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'
@@ -314,208 +315,257 @@ import medal2 from '@/assets/image/medal/medal2.png'
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 {PROJECT_PROCESS, ROUTER_PROCESS} from "@/api/api";
import {useRoute, useRouter} from "vue-router";
export default {
name: "PathDetails",
setup() {
const {data} = useRequest(ROUTER_PROCESS, {})
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: {projectId}} = useRoute()
const router = useRouter()
const {data} = useRequest(PROJECT_PROCESS, {projectId})
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: '/homeworkpage',
5: '去完成',
6: '/livebroadcast',
7: '外链',
8: '/discusspage',
9: '/moreactive',
10: '/starttest',
11: '/surveydetail',
12: '/ballotpage',
13: '去完成'
}
})
function toFinish(d) {
router.push({path: types.value.path[d.type], query: {id: d.routerTaskId, type: 1, courseId: d.courseId}})
}
</script>
<!-- Add "scoped" attribute to limit CSS to this component only -->