mirror of
https://codeup.aliyun.com/67762337eccfc218f6110e0e/vue/student-h5.git
synced 2025-12-10 19:36:47 +08:00
396 lines
10 KiB
Vue
396 lines
10 KiB
Vue
<template>
|
|
<div class="homeworkpage">
|
|
<ReturnHead text="作业详情"></ReturnHead>
|
|
|
|
<div class="notice">
|
|
<div class="noticebox">
|
|
<div class="mani">
|
|
<div class="joininfo">{{ data?.workName }}</div>
|
|
<div class="contenttitle">
|
|
<img class="timeimg" src="../../assets/image/ballotpage/time.png" />
|
|
<div class="timee">
|
|
{{ data?.submitStartTime }}至{{ data?.submitEndTime }}
|
|
</div>
|
|
</div>
|
|
<div class="timebox">
|
|
<div class="samez" style="margin-left: 18px">
|
|
{{ hour }}
|
|
</div>
|
|
<div class="samey">时</div>
|
|
<div class="samez">
|
|
{{ minute }}
|
|
</div>
|
|
<div class="samey">分</div>
|
|
<div class="samez">
|
|
{{ seconds }}
|
|
</div>
|
|
<div class="samey">秒</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="notice">
|
|
<div class="noticebox">
|
|
<div class="mani">
|
|
<div class="joininfo">作业详情</div>
|
|
<div class="line"></div>
|
|
<div class="contentone">
|
|
<div class="ballotdetail">
|
|
{{ data?.workRequirement }}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="notice">
|
|
<div class="noticebox">
|
|
<div class="mani">
|
|
<div class="joininfo">历史纪录</div>
|
|
<div class="line"></div>
|
|
<div class="contentone" style="margin-bottom: 10px">
|
|
<div class="hiscon">
|
|
<div
|
|
class="historyitem clearfix"
|
|
v-for="(item, index) in submitList"
|
|
:key="index"
|
|
:style="index % 2 !== 0 ? null : 'background-color:#F2F5F7'"
|
|
>
|
|
<div class="itemtime">{{ item.createTime }}</div>
|
|
<div style="display: flex; align-items: center">
|
|
<div class="itemtitle" :title="item.workUploadContent">
|
|
{{ item.workUploadContent }}
|
|
{{
|
|
item.workUploadAddress ? "-" + item.workUploadAddress : ""
|
|
}}
|
|
</div>
|
|
<img
|
|
v-if="item.workUploadAddress"
|
|
style="width: 18px; height: 18px; margin-right: 10px"
|
|
src="../../assets/image/urlImg.png"
|
|
/>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="btnc" @click="dohomework">
|
|
<button class="btncc">交作业</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<script setup>
|
|
import {
|
|
computed,
|
|
onUnmounted,
|
|
onBeforeUnmount,
|
|
reactive,
|
|
ref,
|
|
toRefs,
|
|
watch,
|
|
} from "vue";
|
|
import { request, useRequest } from "@/api/request";
|
|
import {
|
|
TASK_WORK_COMMIT,
|
|
TASK_WORK_DETAIL,
|
|
TASK_WORK_SUBMIT_LIST,
|
|
WORK_HISTROY,
|
|
} from "@/api/api";
|
|
import dayjs from "dayjs";
|
|
import { useRouter } from "vue-router";
|
|
// import UploadImg from "@/components/img/UploadImg.vue";
|
|
import FileTypeImg from "@/components/FileTypeImg.vue";
|
|
import { useRoute } from "vue-router/dist/vue-router";
|
|
import { ElMessage, ElLoading } from "element-plus";
|
|
import ReturnHead from "@/components/ReturnHead.vue";
|
|
const fileList = ref([]);
|
|
// const fielPath = ref(import.meta.env.VITE_FILE_PATH);
|
|
const uploadRef = ref();
|
|
|
|
const centerDialogVisible = ref(false);
|
|
const sbValue = ref({
|
|
content: "",
|
|
attach: "",
|
|
});
|
|
const router = useRouter();
|
|
const returnclick = () => {
|
|
router.back();
|
|
};
|
|
const {
|
|
query: { courseId: workId, type, id: taskId, infoId },
|
|
} = useRoute();
|
|
// 从报错信息来看 是因为内部 把这个组件看成了个异步组件 中间有代码是异步执行的 导致unmounted执行的时机不对。。放上面就好了
|
|
onBeforeUnmount(() => {
|
|
console.log("清除定时器");
|
|
if (timer) {
|
|
clearInterval(timer);
|
|
timer = null;
|
|
}
|
|
});
|
|
// console.log("type", type);
|
|
const loading = ref(false); // loading
|
|
const openLoading = () => {
|
|
loading.value = ElLoading.service({
|
|
lock: true,
|
|
text: "Loading",
|
|
background: "rgba(0, 0, 0, 0.7)",
|
|
});
|
|
};
|
|
openLoading();
|
|
const closeLoading = () => {
|
|
loading.value.close();
|
|
};
|
|
|
|
const { data } =
|
|
taskId && taskId !== "undefined"
|
|
? useRequest(TASK_WORK_DETAIL, { workId, taskId, type }, (e) => {
|
|
closeLoading();
|
|
if (e.code === 6) {
|
|
console.log("作业判断", e);
|
|
router.push({
|
|
path: "/notpath",
|
|
});
|
|
}
|
|
})
|
|
: useRequest(TASK_WORK_DETAIL, { workId, type }, (e) => {
|
|
closeLoading();
|
|
if (e.code === 6) {
|
|
console.log("作业判断", e);
|
|
router.push({
|
|
path: "/notpath",
|
|
});
|
|
}
|
|
});
|
|
|
|
console.log("data==----->", data);
|
|
//作业倒计时
|
|
const state = reactive({
|
|
hour: 0,
|
|
minute: 0,
|
|
seconds: 0,
|
|
});
|
|
const { hour, minute, seconds } = toRefs(state);
|
|
|
|
let timer = setInterval(() => {
|
|
console.log("endTime", data.value.submitEndTime);
|
|
if (data && data.value.submitEndTime) {
|
|
let endTime = parseInt(new Date(data.value.submitEndTime).getTime() / 1000);
|
|
let nowTime = parseInt(new Date().getTime() / 1000);
|
|
console.log("endTime222", endTime, nowTime);
|
|
if (endTime > nowTime) {
|
|
state.hour = parseInt(
|
|
dayjs(data.value.submitEndTime).diff(dayjs(), "minute") / 60
|
|
);
|
|
state.minute = parseInt(
|
|
dayjs(data.value.submitEndTime).diff(dayjs(), "minute") % 60
|
|
);
|
|
state.seconds = parseInt(
|
|
dayjs(data.value.submitEndTime).diff(dayjs(), "seconds") -
|
|
(state.hour * 60 + state.minute) * 60
|
|
);
|
|
} else {
|
|
clearInterval(timer);
|
|
}
|
|
}
|
|
}, 1000);
|
|
|
|
const { data: submitList } = useRequest(TASK_WORK_SUBMIT_LIST, {
|
|
workerId: workId,
|
|
});
|
|
console.log("submitList==----->", submitList);
|
|
//交作业
|
|
const dohomework = () => {
|
|
console.log("workId", workId, type, taskId);
|
|
router.push({
|
|
path: "/uploadwork",
|
|
query: { type: type, workId: workId, taskId: taskId },
|
|
});
|
|
};
|
|
// const open = () => {
|
|
// centerDialogVisible.value = true;
|
|
// };
|
|
// const showFileList = computed(() => {
|
|
// return fileList.value.length;
|
|
// });
|
|
|
|
// const handleClick = () => {
|
|
// console.log(fileList.value, uploadRef.value);
|
|
// if (!sbValue.value.content) {
|
|
// if (fileList.value.length === 0) {
|
|
// return ElMessage.warning("请输入作业内容");
|
|
// }
|
|
// }
|
|
// request(TASK_WORK_COMMIT, {
|
|
// projectOrRouterLogo: type,
|
|
// workUploadContent: sbValue.value.content,
|
|
// workUploadAddress: fileList.value.map((e) => e.url).join(",") || "",
|
|
// workId,
|
|
// type,
|
|
// taskId: taskId || infoId,
|
|
// }).then((res) => {
|
|
// console.log(res);
|
|
// submitList.value.unshift(res.data);
|
|
// open();
|
|
// sbValue.value.content = "";
|
|
// fileList.value = [];
|
|
// remove(0);
|
|
// clearFiles();
|
|
// });
|
|
// };
|
|
|
|
// function clearFiles() {
|
|
// uploadRef.value.clearFiles();
|
|
// }
|
|
|
|
// function remove(i) {
|
|
// uploadRef.value.remove(i);
|
|
// }
|
|
|
|
// function reUpload(i) {
|
|
// uploadRef.value.reUpload(i);
|
|
// }
|
|
</script>
|
|
|
|
<!-- Add "scoped" attribute to limit CSS to this component only -->
|
|
<style lang="scss">
|
|
.clearfix:before,
|
|
.clearfix:after {
|
|
content: " ";
|
|
display: table;
|
|
clear: both;
|
|
}
|
|
.homeworkpage {
|
|
width: 100%;
|
|
padding-bottom: 20px;
|
|
.notice {
|
|
width: 100%;
|
|
display: flex;
|
|
justify-content: center;
|
|
// margin-top: -17.5px;
|
|
margin-top: 10px;
|
|
.noticebox {
|
|
width: 100%;
|
|
background: #fff;
|
|
// border-radius: 4px;
|
|
position: relative;
|
|
display: flex;
|
|
justify-content: center;
|
|
.line {
|
|
width: 100%;
|
|
height: 0;
|
|
border-top: 1px solid #f1f2f3;
|
|
margin-top: 17px;
|
|
position: absolute;
|
|
left: 0;
|
|
}
|
|
.mani {
|
|
width: 90%;
|
|
margin-top: 20px;
|
|
// position:relative;
|
|
.joininfo {
|
|
color: #0d233a;
|
|
font-size: 16px;
|
|
font-weight: bold;
|
|
}
|
|
|
|
.contenttitle {
|
|
width: 100%;
|
|
// height:10px;
|
|
margin-top: 15px;
|
|
// background-color: #bfa;
|
|
display: flex;
|
|
.timeimg {
|
|
width: 12.8px;
|
|
height: 13px;
|
|
}
|
|
.timee {
|
|
color: #6e7b84;
|
|
font-size: 14px;
|
|
line-height: 13px;
|
|
margin-left: 6px;
|
|
}
|
|
}
|
|
.timebox {
|
|
display: flex;
|
|
width: 100%;
|
|
height: 49px;
|
|
background-color: #f2f5f7;
|
|
margin-top: 17.5px;
|
|
margin-bottom: 27.5px;
|
|
border-radius: 10px;
|
|
.samez {
|
|
color: #0060ff;
|
|
font-size: 18px;
|
|
line-height: 49px;
|
|
margin-left: 13px;
|
|
}
|
|
.samey {
|
|
color: #6e7b84;
|
|
font-size: 14px;
|
|
line-height: 49px;
|
|
|
|
margin-left: 13px;
|
|
}
|
|
}
|
|
.contentone {
|
|
margin-top: 43px;
|
|
display: flex;
|
|
justify-content: space-between;
|
|
width: 100%;
|
|
margin-bottom: 20px;
|
|
// height: 200px;
|
|
|
|
.ballotdetail {
|
|
color: #6e7b84;
|
|
line-height: 30px;
|
|
font-size: 13px;
|
|
}
|
|
.hiscon {
|
|
width: 100%;
|
|
.historyitem {
|
|
// margin-left: 21px;
|
|
width: 100%;
|
|
border-radius: 4px;
|
|
.itemtime {
|
|
color: #6e7b84;
|
|
margin-left: 21px;
|
|
font-size: 12px;
|
|
margin-top: 11px;
|
|
}
|
|
.itemtitle {
|
|
line-height: 22px;
|
|
font-size: 13px;
|
|
color: #333330;
|
|
margin: 10.5px 0 10.5px 21px;
|
|
width: 90%;
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
white-space: nowrap;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
.btnc {
|
|
width: 100%;
|
|
display: flex;
|
|
justify-content: center;
|
|
.btncc {
|
|
margin-bottom: 19px;
|
|
height: 33px;
|
|
width: 88%;
|
|
border: 0;
|
|
background-color: #2478ff;
|
|
border-radius: 6px;
|
|
color: #fff;
|
|
font-size: 14px;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
</style>
|