GCLS_Page_Mobile/pages/tabbar/task/TaskDetails.vue

<template>
	<view class="deatail-area">
		<navbar :viewLogo="false" :backPath="'/pages/tabbar/task/index?date='+selectDate"
			:title="timeType.replace('任务','')+'：'+taskDetailsData.name" />
		<view style="height:92rpx;"></view>
		<view class="card-box">
			<view class="title-box">
				<text class="title-big-bold">{{taskDetailsData.course_name}}</text>
				<text class="status">
					<text class="circle"></text>
					<text>{{finishStatus}}</text>
				</text>
			</view>
			<text class="title-small">{{taskDetailsData.cs_item_name}}</text>
			<text class="title-small">{{taskDetailsData.cs_item_begin_time}} ~ {{taskDetailsData.cs_item_end_time}}</text>
		</view>
		<view class="card-box">
			<text class="title-big">
				{{timeType}} {{taskDetailsData.name}}
			</text>
			<text class="title-small-bold">{{taskDetailsData.time_space_view_txt}}</text>
			<text class="title-small-bold">任务要求</text>
			<text class="title-middle">{{taskDetailsData.content}}</text>
			<text class="title-small-bold">课件任务</text>
			<view class="courseware-box" v-for="(item,i) in taskDetailsData.courseware_list" :key="i"
				@click="linkTaskCourseware(item.courseware_id,item.is_finished,item.group_id_selected_info)">
				<view class="courseware-main">
					<image class="courseware-img" src="../../../static/courseware.png" />
					<text class="title-middle">{{item.courseware_name}}</text>
				</view>
				<uni-icons type="checkmarkempty" v-show="isEnable(item.is_finished)" size="16" color="#3ACB85" />
			</view>
		</view>
		<view class="card-box">
			<text class="title-small-bold">给教师留言</text>
			<textarea class="student-message" v-model="studentMessage" placeholder="请输入内容" :disabled="isEnable(isFinished)"
				:style="{'background-color':isEnable(isFinished)?'#e9e9e9':'#fff'}" />
		</view>
		<button type="button" class="finished-btn" v-show="!isEnable(isFinished)"
			@click="fillMyTaskExecuteInfo_Student">完成任务</button>
	</view>
</template>

<script>
	import {
		GetTaskInfo,
		FillMyTaskExecuteInfo_Student,
	} from '@/api/exercise.js';
	import {
		time_type_list,
		task_finish_status_list,
		isEnable,
	} from '@/pages/answer_question/common/data/common.js';
	import {
		getToken,
	} from '@/utils/auth';
	export default {
		data() {
			return {
				time_type_list,
				task_finish_status_list,
				isEnable,
				queryData: {
					id: '',
					is_contain_cs_item_learning_material: 'true',
					is_contain_my_execute_info: 'true',
				},
				taskDetailsData: [],
				student_message: '',
				selectDate: '',
				finishStatus: '',
				studentMessage: '',
				timeType: '',
				isFinished: '',
			}
		},
		onLoad(options) {
			this.queryData.id = options.task_id;
			this.selectDate = options.date;
			this.getTaskInfo();
		},
		onShow() {
			this.getTaskInfo();
		},
		methods: {
			getTaskInfo() {
				GetTaskInfo(this.queryData).then((res) => {
					if (res.status) {
						// console.log('返回信息', res);
						this.taskDetailsData = res;
						this.finishStatus = task_finish_status_list[res.finish_status].label;
						this.studentMessage = res.my_execute_info.student_message;
						this.timeType = time_type_list[res.time_type].label;
						this.isFinished = res.my_execute_info.is_finished;
					}
				})
			},
			fillMyTaskExecuteInfo_Student() {
				let data = {
					"task_id": this.queryData.id,
					"student_message": this.studentMessage,
					"is_finished": 'true',
				}
				FillMyTaskExecuteInfo_Student(data).then((res) => {
					if (res.status) {
						// console.log('返回信息', res);
						location.reload();
					}
				})
			},
			//跳转到集成页
			linkTaskCourseware(courseware_id, is_finished, group_id_selected_info) {
				let access_token = '';
				uni.getStorage({
					key: 'AccessToken',
					success: function(res) {
						access_token = res.data;
					}
				})
				const view_mode = isEnable(is_finished) ? 'Result' : 'Answer';
				const business_id = this.taskDetailsData.id;
				let baseUrl = location.protocol + '//' + location.hostname + (location.port ? ':' + location.port : '');
				// uni.navigateTo({
				// 	url: '/pages/common/ViewCourseware?path=' + baseUrl +
				// 		'/GCLS-Book/#/Integration/Courseware?AppID=Mobile_Task&AccessToken=' + access_token +
				// 		'&ViewMode=' + view_mode + '&CoursewareID=' + courseware_id + '&BusinessID=' + business_id +
				// 		'&CoursewareGroupIDSelectedInfo=' + encodeURIComponent(group_id_selected_info)
				// })
				let url = baseUrl +
					'/GCLS-Book/#/Integration/Courseware?AppID=Mobile_Task&AccessToken=' + access_token +
					'&ViewMode=' + view_mode + '&CoursewareID=' + courseware_id + '&BusinessID=' + business_id +
					'&CoursewareGroupIDSelectedInfo=' + encodeURIComponent(group_id_selected_info);
				window.open(url, 'target');
			},
		}
	}
</script>

<style lang="scss">
	.deatail-area {
		.card-box {
			margin: 16rpx;
			background-color: #fff;
			border-radius: 16rpx;
			display: flex;
			flex-direction: column;
			align-items: flex-start;
			justify-content: center;
			row-gap: 16rpx;
			padding: 16px;

			.title-box {
				width: 100%;
				display: flex;
				align-items: center;
				justify-content: space-between;

				.status {
					color: #3ACB85;
					font-size: 15px;

					.circle {
						display: inline-block;
						width: 8px;
						height: 8px;
						border-radius: 50%;
						background-color: #3ACB85;
						margin-right: 7px;
					}
				}
			}

			.title-big-bold {
				font-size: 18px;
				font-weight: 600;
			}

			.title-small {
				font-size: 13px;
				color: #737373;
			}

			.title-big {
				font-size: 18px;
				font-weight: 400;
			}

			.title-small-bold {
				font-size: 13px;
				font-weight: 500;
				color: #808080;
			}

			.title-middle {
				font-size: 15px;
			}

			.courseware-box {
				display: flex;
				align-items: center;
				justify-content: space-between;
				padding: 16rpx 16rpx 16rpx 36rpx;
				width: 70%;
				border: 1px solid #DFDFDF;
				border-radius: 8rpx;

				.courseware-main {
					display: flex;
					column-gap: 10px;
					align-items: center;

					.courseware-img {
						width: 24px;
						height: 24px;
					}
				}
			}

			.student-message {
				width: calc(100vw - 80px);
				padding: 8px 16px;
				border: 1px solid #DFDFDF;
				border-radius: 8rpx;
				height: 136px;
			}
		}

		.finished-btn {
			background-color: #306EFF;
			color: #fff;
			margin: 16rpx;
			font-size: 16px;
			font-weight: 500;
		}
	}
</style>