learning-system-mobile/components/homework/homework.vue

<template>
	<view>
		<!--此组件要删除的，不要再使用的，请使用 course-homework-->
		<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">下载作业附件</a>
				</view>
			</view>
			<view class="homework-info">
				<view class="homework-label">截止时间</view>
				<view class="homework-value" :style="{color:close? 'red':''}">{{info.deadTime}}</view>
			</view>
			<view>
				<u-divider text="填写作业内容并提交"></u-divider>
			</view>
			<view class="homework-info">
				<view class="homework-value">
					<view>
						<u--textarea :height="100" v-model="answer" placeholder="在此输入内容"></u--textarea>
					</view>
					<view style="padding-top:10px;">
						<u-upload uploadIcon="plus" :fileList="fileList" @afterRead="afterRead" @delete="deleteFile" name="hwfile" :maxCount="1">
						</u-upload>
					</view>
				</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 v-for="record in records" :key="record.id">
				<view style="display: flex;justify-content: space-between;">
					<view>上次提交作业</view>
					<view>{{record.endTime}}</view>
				</view>
				<view>
					<view style="padding: 20upx;">{{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();
		},
		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(){
			  let params={
			    studyId:this.studyId,
			    contentId:this.content.id
			  }
			  apiCourseStudy.myHomeworkList(params).then(rs=>{
			    if(rs.status==200){
			      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(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 = {
			    studyItemId: this.studyItemId,//学习内容记录id,
			    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
			  }
			  apiCourseStudy.saveHomework(pamars).then(res=>{
			     if(res.status==200){
			      	this.$refs.messager.show({message:'作业已提交',type:'success'})
			        this.filePath='';
			        this.answer='';
					this.records=[];
			        this.records.push(res.result);
			        this.$emit("submit", this.content);
			     }else {
			        this.$message.error(res.message);
			     }
			
			  })
			},
			//删除文件
			deleteFile(event) {
				this[`fileList${event.name}`].splice(event.index, 1)
			},
			//上传附件
			async afterRead(event) {
				uni.showLoading({ title: '正在上传' });
				uploadUtil.uploadFile(event.file.url).then(rs=>{
					//console.log(rs);
					this.filePath = res.result.filePath;
					//this.fileList.push(rs.result.httpPath)
					this.fileList.push({
						status: 'success',
						message: '已上传',
						url:rs.result.httpPath
					})
					uni.hideLoading();
				});
			}
		}

	}
</script>

<style lang="scss" scoped>
	.homework {
		padding-bottom: 10px;

		.homework-info {
			.homework-label {
				padding: 8px;
			}

			.homework-value {
				padding: 15px;
				background-color: #FFFFFF;
				/deep/ .u-upload__button{
					background: #fff;
				}
			}
		}
	}

	.hwlist {
		margin-bottom: 30px;

		.hwlist-row {
			display: flex;
			line-height: 60upx;
			border-bottom: 1px solid #d2d2d2;

			.hwlist-time {
				color: #6c6c6c;
			}

			.hwlist-name {
				padding-left: 10px;
			}
		}
	}
</style>