learning-system-mobile/components/course-assess/course-assess.vue

<template>
	<view class="assess ">
		<u-toast ref="messager"></u-toast>
		<view v-if="has" class="assess-div">
			<view style="border-bottom: 1px solid #f4f4f4;padding: 30upx;">
				<view class="assess-info">课程满意度计算方式：{{info.countType}}；</view>
				<view class="assess-info">满意度：{{info.countText}}</view>
			</view>
			<view class="content" style="padding: 10px;">
				<view class="qitem"  v-for="(ass,assIdx) in info.items" :key="assIdx">
					<view class="qitem-info">{{assIdx+1}}.{{ass.question}}</view>
					
					<view class="qitem-values" v-if="ass.qType==1">
						<u-slider v-model="ass.answer" min="0" max="10" step="2" showValue></u-slider>
					</view>
					<view class="qitem-tips" v-if="ass.qType==1">
						<view class="qitem-tips-start">{{ass.minText}}</view>
						<view class="qitem-tips-end">{{ass.maxText}}</view>
					</view>
					<view  v-if="ass.qType==9">
						<u--textarea v-model="ass.answer" placeholder="写下您想说的话"></u--textarea>
					</view>
				</view>
			</view>
			<view v-if="allowSubmit && showSubmit" style="padding: 20px;">
				<u-button @click="submitAsscess()" type="primary" text="提 交"></u-button>
			</view>
		</view>
		<view v-else style="text-align: center;color: #ff0000;padding-top: 20px; ">
			此课程没有评估
		</view>
	</view>
</template>

<script>
	import apiCourseStudy from '@/api/modules/courseStudy.js';
	export default {
		props:{
		    studyId: {
		      type: String,
		    },
		    content:{
		      type: Object,
		      default:()=>{}
		    },
			showSubmit:{
			  type:Boolean,
			  default:true
			}
		},
		data() {
			return {
				has:true,//是否有评估信息
				allowSubmit:true,//是否可以提交评估
				info:{},//评估信息
				studyItemId:'',//学习内容id
			}
		},
		mounted() {
			this.loadAssessInfo();
		},
		watch:{
			studyId(newVal){
				this.loadHistory();
			}
		},
		methods: {
			loadAssessInfo(){//评估保存失败
			  if(this.content.content!='' && this.content.content.length>10){
			    let json=JSON.parse(this.content.content);
			    if(json){
			       json.items.forEach(item=>{
			         if(item.qType==1){
			            item.answer=0;
			         }else{
			           item.answer='';
			         }
			       })
			    }
			    //console.log(json,"info")
			    this.info=json;
			    this.loadHistory(); //加载历史记录
			  }
			},
			loadHistory(){
			  if(this.studyId==''){
			    return;
			  }
			  let params={
			    studyId:this.studyId,
			    contentId:this.content.id
			  }
			  apiCourseStudy.myAssessList(params).then(res=>{
			    if(res.status==200){
			      if(res.result.length>0){
			        this.allowSubmit=false;
			        this.info=JSON.parse(res.result[0].asContent);
			        //回调处理
			        this.$emit("success", this.info);
			      }
			    }else{
					this.$refs.messager.show({message:res.message,type:'error'});
			    }
			  })
			},
			submitAsscess() {
			  let dataJson=JSON.stringify(this.info);
			  //计算评估得分
			  let countStr=this.info.resultCount;
			  let countScore=0;
			  let pass=true;
			  this.info.items.forEach((item,idx)=>{
			    if(item.qType==1){
			      if(item.answer==0){
			        pass=false;
			      }
			      var str='[q'+(idx+1)+']';
			      countStr=countStr.replace(str,item.answer);
			    }
			  });
			  if(!pass){
				this.$refs.messager.show({message:'请填写完整再提交',type:'error'});
			    return
			  }
			  //console.log(countStr);
			  countScore=eval(countStr);
			  //console.log(countScore,"countScore");
			  let pamars = {
			    studyItemId: this.studyItemId,//学习内容记录id,
			    studyId: this.studyId,//学习id,
			    courseId: this.content.courseId,//课程id,
			    contentId: this.content.id,//内容id,
			    asContent: dataJson,//内容
			    asScore: countScore//评估得分
			  }
			  apiCourseStudy.saveAssess(pamars).then(res=>{
			      if(res.status==200){
			        this.allowSubmit=false;
					this.$refs.messager.show({message:'提交成功，谢谢您的评估',type:'success'});
			        this.content.status=9;
			        //this.content.status=
			      }else{
					this.$refs.messager.show({message:res.message,type:'error'});
			      }
			  })
			}
		}
	}
</script>

<style lang="scss" scoped>
	.assess-div {
	  min-height: 500px;
	  text-align: left;
	  font-size: 14px;
	  .assess-info {
	    margin-bottom: 10px;
	  }
	}
	.assess {
		.qitem {
			margin-bottom: 10px;
			color: #444444;
			line-height: 50upx;

			.qitem-info {
				padding: 10px 0px;
			}

			.qitem-tips {
				display: flex;
				justify-content: space-between;
				color: #9e9e9e;
			}

			.qitem-values {
				padding: 5px 0px;
				align-items: center;
				justify-content: center;
			}
		}

	}
</style>