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

feat:修改作业上传及显示

Browse Source
This commit is contained in:
lixg
2023-02-19 16:48:28 +08:00
parent f69be42539
commit b2a30b116a
5 changed files with 160 additions and 18 deletions
Download Patch File Download Diff File Expand all files Collapse all files

126
src/views/homeworkpage/UploadWork.vue
View File

@@ -25,7 +25,7 @@
<div class="line"></div>
</div>
<div class="allimg">
<UploadImg v-model:value="fileList" ref="uploadRef">
<UploadImg v-model:fileList="fileList" ref="uploadRef">
<img src="../../assets/image/homeworkpage/link.png" />
</UploadImg>
<!-- <img src="../../assets/image/homeworkpage/pre.png" />
@@ -36,6 +36,72 @@
/>
</div>
</div>
<div class="fileInfo" v-if="fileList && fileList.length !== 0">
<div class="triangle"></div>
<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
class="download"
style="display: flex; align-items: center"
@click="deleteFile"
>
<img
src="../../assets/image/download.png"
style="width: 16px; height: 15px"
/>
<div style="margin-left: 2px; color: #2478ff">删除</div>
</div>
</div>
</div>
</div>
</div>
</template>
@@ -66,7 +132,6 @@ export default {
} = useRoute();
const textarea = ref("");
const fileList = ref([]);
// 使用
const loading = ref(false); // loading
const openLoading = () => {
@@ -81,7 +146,7 @@ export default {
};
//发布作业
const publishWork = () => {
console.log("点击了发布", workId, type, taskId);
console.log("点击了发布", workId, type, taskId, fileList);
if (!textarea.value) {
if (fileList.value.length === 0) {
return ElMessage.warning("请输入作业内容");
@@ -91,7 +156,10 @@ export default {
let obj = {
projectOrRouterLogo: type,
workUploadContent: textarea.value,
workUploadAddress: fileList.value.map((e) => e.url).join(",") || "",
workUploadAddress:
fileList.value && fileList.value.length !== 0
? fileList.value[0].name
: "",
workId,
type,
taskId: taskId || infoId,
@@ -115,11 +183,16 @@ export default {
textarea.value = "";
fileList.value = [];
};
const deleteFile = () => {
fileList.value = [];
};
return {
...toRefs(state),
publishWork,
textarea,
fileList,
deleteAll,
deleteFile,
};
},
};
@@ -206,6 +279,51 @@ clearfix:after {
margin-bottom: 24.5px;
}
}
.fileInfo {
width: 95%;
height: 56px;
background-color: #fff;
box-shadow: 0px 1px 24px 0px rgba(0, 0, 0, 0.11);
border-radius: 4px;
position: absolute;
bottom: 81px;
left: 2.5%;
display: flex;
align-items: center;
justify-content: space-between;
.triangle {
width: 0;
height: 0;
border: 7px solid;
border-color: #fff rgba(255, 255, 255, 0) rgba(255, 255, 255, 0)
rgba(255, 255, 255, 0);
position: absolute;
bottom: -14px;
left: 10%;
}
.filebox {
width: 90%;
display: flex;
margin-left: 5%;
margin-right: 5%;
align-items: center;
.fileimg {
width: 19.5px;
height: 22px;
background-size: 100% 100%;
margin-right: 19px;
}
}
.filename {
width: calc(100% - 100px);
font-size: 13px;
display: block;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
}
}
}
}
</style>