hz/student-h5
1
0
Fork 0
mirror of https://codeup.aliyun.com/67762337eccfc218f6110e0e/vue/student-h5.git synced 2025-12-08 02:16:47 +08:00
Code Issues Packages Projects Releases Wiki Activity

feat:增加文件仓库数据

Browse Source
This commit is contained in:
lixg
2023-02-01 10:01:29 +08:00
parent 84c43b4577
commit bf1fa019d5
8 changed files with 158 additions and 87 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
src/api/api.js
View File

@@ -2,7 +2,7 @@
* @Author: lixg lixg@dongwu-inc.com
* @Date: 2023-01-13 11:42:48
* @LastEditors: lixg lixg@dongwu-inc.com
* @LastEditTime: 2023-01-29 18:02:48
* @LastEditTime: 2023-01-31 17:32:26
* @FilePath: /stu_h5/src/api/api.js
* @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
*/

BIN
src/assets/image/file/file.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 495 B

BIN
src/assets/image/file/pngpic.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 1.0 KiB

28
src/components/ReturnHead.vue
View File

@@ -2,7 +2,7 @@
* @Author: lixg lixg@dongwu-inc.com
* @Date: 2023-01-16 17:26:39
* @LastEditors: lixg lixg@dongwu-inc.com
* @LastEditTime: 2023-01-16 18:21:05
* @LastEditTime: 2023-01-31 17:19:27
* @FilePath: /stu_h5/src/components/ReturnHead.vue
* @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
@@ -23,6 +23,14 @@
/>
<div style="margin-left: 5px; color: #2478ff">发布</div>
</div>
<div class="publish" v-else-if="showfile" @click="publishClick">
<img
style="width: 21px; height: 18px; margin-left: 25px; cursor: pointer"
src="../assets/image/file/file.png"
@click="goFileStorage"
/>
</div>
<div class="publish" v-else></div>
</div>
</template>
@@ -40,6 +48,14 @@ export default {
type: Function,
default: null,
},
showfile: {
type: Boolean,
default: false,
},
courseId: {
type: Number,
default: null,
},
},
setup(props, ctx) {
const router = useRouter();
@@ -49,9 +65,19 @@ export default {
const publishClick = () => {
props.publishWork && props.publishWork();
};
const goFileStorage = () => {
console.log("props.courseId", props.courseId);
router.push({
path: "/fileStorag",
query: {
courseId: props.courseId,
},
});
};
return {
returnclick,
publishClick,
goFileStorage,
};
},
};

151
src/views/filestorag/fileStorag.vue
View File

@@ -1,18 +1,68 @@
<!--
* @Author: lixg lixg@dongwu-inc.com
* @Date: 2023-01-13 11:42:48
* @LastEditors: lixg lixg@dongwu-inc.com
* @LastEditTime: 2023-01-31 17:56:36
* @FilePath: /stu_h5/src/views/filestorag/fileStorag.vue
* @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<template>
<div class="filestorag">
<ReturnHead text="文件"></ReturnHead>
<div class="notice">
<div class="noticebox">
<div class="main">
<div class="filebox"
v-for="(t,index) in t_items"
:key="index">
<div class="fileimg"
:style="{
backgroundImage:
'url('+ t.imgUrl +')'
}"
></div>
<div class="filename">{{t.text}}</div>
<div class="main" v-if="fileList">
<div class="filebox" v-for="(item, index) in fileList" :key="index">
<img
v-if="
item.name.indexOf('jpg') !== -1 ||
item.name.indexOf('jpeg') !== -1 ||
item.name.indexOf('png') !== -1
"
style="width: 20px; height: 22px; margin-right: 20px"
src="@/assets/image/file/pngpic.png"
/>
<div v-else>
<img
v-if="item.name.indexOf('doc') !== -1"
style="width: 20px; height: 22px; margin-right: 20px"
src="@/assets/image/file/word.png"
/>
<div v-else>
<img
v-if="item.name.indexOf('xls') !== -1"
style="width: 20px; height: 22px; margin-right: 20px"
src="@/assets/image/file/excel.png"
/>
<div v-else>
<img
v-if="item.name.indexOf('ppt') !== -1"
style="width: 20px; height: 22px; margin-right: 20px"
src="@/assets/image/file/ppt.png"
/>
<div v-else>
<img
v-if="item.name.indexOf('pdf') !== -1"
style="width: 20px; height: 22px; margin-right: 20px"
src="@/assets/image/file/pdf.png"
/>
<div v-else>
<img
v-if="item.name.indexOf('zip') !== -1"
style="width: 20px; height: 22px; margin-right: 20px"
src="@/assets/image/file/zip.png"
/>
<img
v-else
style="width: 20px; height: 22px; margin-right: 20px"
src="@/assets/image/file/word.png"
/>
</div>
</div>
</div>
</div>
</div>
<span class="filename" :title="item.name">{{ item.name }}</span>
</div>
</div>
</div>
@@ -20,74 +70,61 @@
</div>
</template>
<script>
import { reactive, toRefs } from "vue";
import Images from "../../assets/image/index";
export default {
name: "FileStorag",
setup() {
const state = reactive({
t_items: [
{
id: 1,
text: "示例文档.zip",
imgUrl:Images.zipImg,
},
{
id: 2,
text: "示例文档.md",
imgUrl:Images.mdImg,
},
{
id: 3,
text: "示例文档.rar",
imgUrl:Images.rarImg,
},
{
id: 4,
text: "示例文档.word",
imgUrl:Images.wordImg,
},
],
});
return {
...toRefs(state),
Images,
};
}
};
<script setup>
import { reactive, toRefs, computed } from "vue";
import Images from "../../assets/image/index";
import ReturnHead from "@/components/ReturnHead.vue";
import { useRoute, useRouter } from "vue-router";
import { ROUTER_DETAILS } from "@/api/api";
import { useRequest } from "@/api/request";
const {
query: { courseId },
} = useRoute();
console.log("courseId", courseId);
//获取共享文档
const { data } = useRequest(ROUTER_DETAILS, { routerId: courseId });
// state.t_items = data.value.routerInfo.attach;
console.log("data", data, data.value.routerInfo);
const fileList = computed(() => data.value?.routerInfo?.attach);
</script>
<style lang="scss" scoped>
.filestorag{
.filestorag {
width: 100%;
background-color: #F2F5F7;
background-color: #f2f5f7;
font-size: 13px;
color: #677D86;
.notice{
color: #677d86;
.notice {
width: 100%;
background-color: #ffffff;
margin-top: 10px;
.noticebox{
.noticebox {
width: 90%;
margin: 0 auto;
.main{
.main {
width: 100%;
.filebox{
.filebox {
display: flex;
margin-left: 16.5px;
padding: 21.5px 0;
align-items: center;
border-bottom: 1px solid #EDF3FF;
.fileimg{
border-bottom: 1px solid #edf3ff;
.fileimg {
width: 19.5px;
height: 22px;
background-size: 100% 100%;
margin-right: 19px;
}
}
.filename {
width: calc(100% - 50px);
font-size: 13px;
display: block;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
}
}
}
}
}
</style>

8
src/views/pathmap/LevelList.vue
View File

@@ -2,13 +2,17 @@
* @Author: lixg lixg@dongwu-inc.com
* @Date: 2023-01-19 14:59:34
* @LastEditors: lixg lixg@dongwu-inc.com
* @LastEditTime: 2023-01-19 18:59:50
* @LastEditTime: 2023-01-31 17:17:37
* @FilePath: /stu_h5/src/views/pathmap/LevelList.vue
* @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<template>
<div class="levelList">
<ReturnHead text="展开路径图"></ReturnHead>
<ReturnHead
text="展开路径图"
:showfile="true"
:courseId="routerId"
></ReturnHead>
<!-- 学习路径介绍 -->
<div class="pathdetail">
<div class="pathName">产品经理学习路径图</div>

4
src/views/projectdetails/ProjectPath.vue
View File

@@ -2,7 +2,7 @@
* @Author: lixg lixg@dongwu-inc.com
* @Date: 2023-01-19 11:28:11
* @LastEditors: lixg lixg@dongwu-inc.com
* @LastEditTime: 2023-01-29 17:58:47
* @LastEditTime: 2023-01-31 18:01:11
* @FilePath: /stu_h5/src/views/projectdetails/ProjectPath.vue
* @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
@@ -181,7 +181,7 @@ const handleClick = (tab, event) => {
const goDetails = () => {
// router.push({
// path: "/levelList",
// query: { routerId: 274 },
// query: { routerId: 2 },
// });
router.push({
path: "/projectdetails",

6
src/views/projectdetails/projectDetails.vue
View File

@@ -1,6 +1,10 @@
<template>
<div class="projectdetails">
<ReturnHead text="项目详情"></ReturnHead>
<ReturnHead
text="项目详情"
:showfile="true"
:courseId="projectId || courseId"
></ReturnHead>
<div class="main">
<div class="up">
<!-- <div class="notice">