pbl-teacher-table/src/components/pages/pblCourse/component/doWorkArea.vue

<template>
	<div class="doWork">
		<div class="dw_header">
			<div class="dw_h_left">
				<img :src="require('../../../../assets/icon/pblCourse/phaseIcon.png')"> 
				<span>阶段{{ phase.atPhase+1 }}：{{ task?task.name:'' }}</span>
			</div>
			<div class="dw_h_right">
				<span class="dw_h_r_back" @click.stop="back()"></span>
				<span class="dw_h_r_down" @click.stop="down()"></span>
			</div>
		</div>
		<div class="dw_work">
			<work v-if="task" :task="task" @submitTask="down" @choiceAnswer="choiceAnswer" @getTaskList="getTaskList" :phase="phase" @lookFile="lookFile" @deleteFile="deleteFile" @addFile="addFile"/>
			<div v-else>
				<h3>等待生成数据...</h3>
			</div>
		</div>
		<!-- <div class="dw_bottom">
			<div class="dw_b_btn" @click.stop="submitTask()">
				<img :src="require('../../../../assets/icon/pblCourse/bookIcon.png')">
				<span>提交作业</span>
			</div>
		</div>	 -->
	</div>
</template>

<script>
import work from './work'
	export default {
		emits:["changePhase","choiceAnswer","submitTask","getTaskList","deleteFile","addFile","lookFile"],
		props:{
			phase:{
				type:Object,
				default:()=>{
					return {
						doPhase:0,
						atPhase:0,
					}
				}
			},
			task:{
				type:Object,
				require:true,
			},
		},
		computed:{
			isOk(){
				return !(this.phase.doPhase>this.phase.atPhase)
			}
		},
		components:{
			work,
		},
		methods:{
			submitTask(){
				this.$emit("submitTask")
			},
			down(){
				if(this.isOk)return this.submitTask();
				if(this.phase.atPhase>=4)return this.$message.info("已经是最后一个阶段啦")
				this.$emit("changePhase",'atPhase',(this.phase.atPhase+1))
			},
			back(){
				if(this.phase.atPhase<=0)return this.$message.info("已经是第一个阶段啦")
				this.$emit("changePhase",'atPhase',(this.phase.atPhase-1))
			},
			choiceAnswer(arr){
				this.$emit("choiceAnswer",arr)
			},
			getTaskList(_data){
				this.$emit("getTaskList",_data)
			},
			deleteFile(index){
				this.$emit("deleteFile",index)
			},
			lookFile(index){
				this.$emit("lookFile",index)
			},
			addFile(obj){
				this.$emit("addFile",obj)
			},
		}
	}
</script>

<style scoped>
.doWork{
	width: 100%;
	height: 100%;
	border-radius: 12px;
	overflow: hidden;
	background-color: white;
}

.dw_header{
	width: 100%;
	height: 60px;
	background-color: #FFF3EA;
	margin-bottom: 15px;
	display: flex;
	justify-content: space-between;
	align-items: center;
	box-sizing: border-box;
	padding: 0 20px;
}

.dw_h_left{
	display: flex;
	align-items: center;
}

.dw_h_left>img{
	width: 40px;
	height: 40px;
	margin-right: 10px;
}


.dw_h_left>span{
	font-size: 24px;
	font-weight: bold;
}


.dw_h_right{
	display: flex;
	align-items: center;
}

.dw_h_right>span{
	display: block;
	width: 30px;
	height: 30px;
	background: url("../../../../assets/icon/pblCourse/backIcon.png") no-repeat;
	background-size: 100% 100%;
	margin-right: 10px;
	margin-left: 5px;
	cursor: pointer;
}

.dw_h_r_down{
	transform: rotate(180deg);
}
.dw_work{
	width: 100%;
	/* height: auto; */
	height: calc(100% - 60px - 30px);
	box-sizing: border-box;
	/* margin: 0 15px; */
	padding: 0 15px;
	border-radius: 8px;
	overflow: auto;
	/* background-color: #F3F7FD; */
}

.dw_bottom{
	margin-top: 15px;
	width: 100%;
	height: 100px;
	display: flex;
	justify-content: center;
	align-items: center;
	box-sizing: border-box;
	padding: 0 15px 15px 15px;
}

.dw_b_btn{
	width: 100%;
	height: 100%;
	background-color: #F3F7FD;
	border-radius: 8px;
	display: flex;
	justify-content: center;
	align-items: center;
	transition: .3s;
	cursor: pointer;
}

.dw_b_btn:hover{
	background-color: #eaeef5;
}

.dw_b_btn>img{
	width: 50px;
	height: 50px;
	margin-right: 10px;
	cursor: pointer;
}

.dw_b_btn>span{
	font-size: 22px;
	background: linear-gradient(to right, #3673E8, #AD88FD);
	-webkit-background-clip: text;
	color: transparent;
}
</style>