Files
learning-system-mobile/components/course-homework/course-homework.vue
2023-01-04 17:53:44 +08:00

269 lines
7.1 KiB
Vue

<template>
<view>
<u-toast ref="messager"></u-toast>
<view class="homework">
<view class="homework-info">
<view class="homework-label">作业名称</view>
<view class="homework-value">{{info.name}}</view>
</view>
<view class="homework-info">
<view class="homework-label">作业内容</view>
<view class="homework-value">{{info.content}}</view>
</view>
<view v-if="info.file && info.file!=''" class="homework-info">
<view class="homework-label">作业附件</view>
<view class="homework-value">
<a :href="fileBaseUrl+info.file" target="_blank" style="color: #387DF7;">下载作业附件</a>
</view>
</view>
<view class="homework-info">
<view class="homework-label">截止时间</view>
<view class="homework-value" :style="{color:close? 'red':''}">{{info.deadTime? info.deadTime: '无'}}</view>
</view>
<!-- <view>
<u-divider text="填写作业内容并提交"></u-divider>
</view> -->
<view class="homework-info" v-if="info.submitMode!=2">
<view class="homework-label">上传附件</view>
<view class="homework-value">
<u-upload uploadIcon="plus" :fileList="fileList" @afterRead="afterRead" @delete="deleteFile" name="hwfile" :maxCount="1">
</u-upload>
</view>
</view>
<view class="homework-info" v-if="info.submitMode!=1">
<view class="homework-label">作业内容</view>
<view class="homework-value">
<u--textarea :height="200" v-model="answer" placeholder="在此输入内容"></u--textarea>
</view>
</view>
<view class="homework-btn">
<u-button type="primary" @click="submitHomework()" :text="records.length>0?'重新提交':'提交'"></u-button>
</view>
</view>
<!--作业提交记录-->
<view class="hwlist content" v-if="records.length>0">
<view class="hwlist-row" v-for="record in records" :key="record.id">
<view class="hwlist-info-title">
<view>已提交作业</view>
<view class="hwlist-info-time">{{record.endTime}}</view>
</view>
<view>
<view style="padding: 20upx 0upx;">{{record.hwAnswer}}</view>
<view v-if="record.filePath!=''">
<a :href="fileBaseUrl+record.filePath" target="_blank">作业附件</a>
</view>
</view>
</view>
</view>
</view>
</template>
<script>
import apiCourseStudy from '@/api/modules/courseStudy.js';
import apiCourse from '@/api/modules/course.js';
import uploadUtil from '@/utils/upload.js'
export default {
props:{
content:{
type: Object,
default:()=>{}
},
studyId:{
type:String,
default:''
}
},
data() {
return {
fileBaseUrl:this.$config.fileUrl,
has:true,
info:{},
studyItemId:'',
filePath:'',
answer:'',
close:false,
records:[],//作业记录
fileList: []
}
},
mounted() {
this.loadHomeworkInfo();
},
watch:{
content(newVal,oldVal){
if(newVal.id!=oldVal.id){
this.loadHomeworkInfo();
}
},
deep:true
},
methods: {
loadHomeworkInfo(){
apiCourse.getHomework(this.content.id).then(res=>{
if(res.status==200){
this.info=res.result;
//检查是否过期
if(res.result.deadTime!=''){
var d = new Date(res.result.deadTime);
var now=new Date();
if(now.getTime() > d.getTime()){
this.close=true;
} else {
this.close=false;
}
}
this.loadRecord();
}else if(res.status==404){
//没有找到作业信息
}else{
this.$refs.messager.show({message:res.message,type:'error'})
}
});
//
},
loadRecord(){
if(this.studyId==''){
return;
}
let params={
studyId:this.studyId,
contentId:this.content.id
}
apiCourseStudy.myHomeworkList(params).then(rs=>{
if(rs.status==200 && rs.result){
this.records=rs.result;
}
})
},
submitHomework() {//提交作业
let oldTime=new Date(this.info.deadTime).getTime()
let newTime=+new Date()
if(oldTime<newTime){
return this.$refs.messager.show({message:'提交作业时间已过期,无法提交',type:'error'})
}
// if(newTime<oldTime){
// return this.$refs.messager.show({message:'',type:'error'})
// }
if(this.content.submitMode==1){
if(this.filePath==''){
this.$refs.messager.show({message:'请上传作业内容',type:'error'})
return;
}
}else if(this.content.submitMode==2){
if(this.answer==''){
this.$refs.messager.show({message:'请先填写作业内容',type:'error'})
return;
}
}else{
if(this.answer=='' && this.filePath==''){
this.$refs.messager.show({message:'请填写或上传作业',type:'error'})
return;
}
}
let pamars = {
studyId: this.studyId,//学习id,
courseId: this.content.courseId,//课程id,
contentId: this.content.id,//内容id,
hwId:this.info.id,//作业的id
hwName: this.info.name,//作业的名称
//hwContent: this.homeworkInfo.info.content,//作业的内容,先不要此字段了
filePath: this.filePath,//文件的路径,可以为空,
hwAnswer: this.answer,//文本提交的信息
score: 0
}
if(this.studyItemId){
pamars.studyItemId=this.studyItemId;//学习内容记录id,
}
apiCourseStudy.saveHomework(pamars).then(res=>{
if(res.status==200){
//this.$refs.messager.show({message:'作业已提交',type:'success'})
uni.showToast({title:'提交成功',type:'success'})
this.filePath='';
this.fileList=[];
this.answer='';
this.records=[res.result];
this.$emit("submit", this.content);
}else {
this.$message.error(res.message);
}
})
},
//删除文件
deleteFile(event) {
this.fileList.splice(event.index, 1)
},
//上传附件
async afterRead(event) {
uni.showLoading({ title: '正在上传' });
uploadUtil.uploadFile(event.file.url).then(rs=>{
this.filePath = rs.result.filePath;
this.fileList.push({
status: 'success',
message: '已上传',
url:rs.result.httpPath
})
uni.hideLoading();
});
}
}
}
</script>
<style lang="scss" scoped>
.homework {
padding: 0upx 20upx 20upx 20upx;
background-color: #fff;
.homework-info {
border-bottom: 1px solid rgba(153,153,153,0.1);
.homework-label {
padding-top: 10upx;
font-weight: 650;
font-size: 32upx;
color: #444;
}
.homework-value {
padding: 32upx 0upx;
font-weight: 400;
font-size: 28upx;
color: #787878;
word-break:break-all;
// background-color: #FFFFFF;
// /deep/ textarea{
// //background: #F5F5F5;
// }
}
}
}
.u-textarea{
background-color: #F5F5F5;
}
.hwlist {
margin-bottom: 30px;
.hwlist-row {
line-height: 60upx;
border-bottom: 1px solid #d2d2d2;
a{
text-decoration: none;
}
.hwlist-info-title {
display: flex;
justify-content: space-between;
color: #6b6b6b;
}
.hwlist-info-time {
color: #6c6c6c;
}
.hwlist-name {
padding-left: 10px;
}
}
}
</style>