WeChatAppH5/pages/task/submit-task.vue

<template>
	<view>
		<nav-bar title="任务提交" goBack />
		<view class="pages-content">
			<template v-if="TaskInfo">
				<view class="task-title">
					{{TaskInfo.childTaskTitle}}
				</view>
				<view class="task-explain">
					{{TaskInfo.childTaskRemark}}
				</view>
				<view class="task-form-box" v-if="TaskRule && TaskRule.length > 0">
					<block v-for="(Rule,RuleIndex) in TaskRule">
						<!-- ( code: 0， msg:"定位地址")
						( code: 1，msg:"照片")
						( code: 2, msg:"视频")
						( code: 3，msg:“录音")
						( code: 4，msg:“提交内容”) -->
						<submitlLocation v-if="Rule.taskRuleType === 0 && Rule.need" :rule="Rule" :checkPage="checkPage"
							v-model="formData.lbsPosition" />
						<!-- 照片 -->
						<submitImg v-if="Rule.taskRuleType === 1&& Rule.need" :rule="Rule" v-model="formData.photos"
							:checkPage="checkPage" />
						<!-- 视频 -->
						<submitVideo v-if="Rule.taskRuleType === 2&& Rule.need" :rule="Rule"
							v-model="formData.videos" />
						<!-- 音频 -->
						<submitAudio v-if="Rule.taskRuleType === 3&& Rule.need" :rule="Rule"
							v-model="formData.soundRecording" :checkPage="checkPage" />
						<!-- 内容 -->
						<submintContent v-if="Rule.taskRuleType === 4&& Rule.need" :rule="Rule"
							v-model="formData.submitContent" :checkPage="checkPage" />
					</block>
				</view>
			</template>

			<view class="submitTime" v-if="checkPage && TaskInfo">
				提交时间：<text class="submitTime-t">{{TaskInfo.submitTime}}</text>
			</view>
			<!-- 必须要有规则才能显示提交按钮 -->
			<task-bottom-btn v-if="TaskRule && TaskRule.length > 0 && !checkPage" btnName="提交" @onClick="onSubmit" />
		</view>
	</view>
</template>

<script>
	import taskBottomBtn from "./components/task-bottom-btn.vue";
	import submintContent from "./components/submintContent.vue";
	import submitImg from "./components/submitImg.vue";
	// import submitVideo from "./components/submitVideo.vue";
	// import submitVideo_app from "./components/submitVideo_app.vue";
	import submitVideo from "./components/submitVideo.vue";
	import submitAudio from "./components/submitAudio.vue";
	import submitlLocation from "./components/submitlLocation.vue";
	import {
		getTaskInfo_Api,
		getrReceiveTask_Api,
		getMyTaskInfo_Api,
		getMyMoreTaskInfo_Api,
		onSubmitCheck_Api,
		submitTask_Api
	} from "@/api/task.js"
	export default {
		components: {
			taskBottomBtn,
			submintContent,
			submitImg,
			submitAudio,
			submitlLocation,
			submitVideo
		},
		data() {
			return {
				checkPage: false, 
				// 单任务领取ID
				receiveTaskId: null,
				//多任务子ID
				receiveChildTaskId: null,
				// 任务信息
				TaskInfo: null,
				// 任务规则
				TaskRule: null,

				formData: {
					submitContent: '',
					photos: [],
					lbsPosition: '',
					soundRecording: [],
					videos: []
				}
			}
		},
		onLoad(opt) {
			this.receiveTaskId = opt.receiveTaskId;
			this.receiveChildTaskId = opt.receiveChildTaskId;
			this.checkPage = opt.checkPage === 'true' ? true : false;
			if (this.receiveTaskId) {
				// 查询单任务详情
				this.getMyTaskInfo()
			}
			if (this.receiveChildTaskId) {
				// 查询单任务详情
				this.getMyMoreTaskInfo()
			}
		},
		methods: {
			initFormData(val) {
				this.formData = {
					submitContent: val.submitContent || '',
					photos: val.photos || [],
					lbsPosition: val.lbsPosition || '',
					soundRecording: val.soundRecording || [],
					videos: val.videos || [],
				}
			},
			// 查询单任务详情
			getMyTaskInfo() {
				getMyTaskInfo_Api(this.receiveTaskId).then(res => {
					const childTask = res.data ? res.data.childTaskVoList[0] : null
					if (childTask) {
						this.TaskInfo = childTask
						this.TaskRule = childTask.childTaskRule || null
						this.initFormData(childTask);
					};

				})
			},
			getMyMoreTaskInfo() {
				getMyMoreTaskInfo_Api(this.receiveChildTaskId).then(res => {
					const childTask = res.data || null
					this.TaskInfo = childTask
					this.TaskRule = childTask?.childTaskRule || null;
					this.initFormData(childTask)
				})
			},




			onSubmit() {
				if (!this.TaskRule || this.TaskRule.length === 0) return
				const obj = {};
				try {
					this.TaskRule.forEach(el => {
						switch (el.taskRuleType) {
							case 0:
								if (el.need) {
									const num = this.formData.lbsPosition;
									if (el.required && !num) throw new Error('请先定位');
									obj.lbsPosition = this.formData.lbsPosition
								}
								break;
							case 1:
								if (el.need) {
									const num = this.formData.photos.length;
									if (el.required && !num) throw new Error('请先上传照片');
									obj.photos = this.formData.photos
								}
								break;
							case 2:
								if (el.need) {
									const num = this.formData.videos;
									if (el.required && !num) throw new Error('请先上传视频');
									obj.videos = this.formData.videos
								}
								break;

							case 3:
								if (el.need) {
									const num = this.formData.soundRecording.length;
									if (el.required && !num) throw new Error('请先上传录音');
									obj.soundRecording = this.formData.soundRecording
								}
								break;
							case 4:
								if (el.need) {
									const num = this.formData.submitContent;
									if (el.required && !num) throw new Error('请输入内容');
									obj.submitContent = this.formData.submitContent
								}
								break;
						}
					})
				} catch (e) {
					//TODO handle the exception
					uni.showToast({
						title: e.message,
						icon: 'none'
					})
					return false
				}

				submitTask_Api({
					...obj,
					receiveChildTaskId: this.TaskInfo.receiveChildTaskId
				}).then(res => {
					uni.showToast({
						title: '提交成功',
						icon: 'none'
					})
					uni.redirectTo({
						url: '/pages/task/submit-success'
					})
				})

			}
		}
	}
</script>

<style lang="scss" scoped>
	@import "./common.scss";

	.pages-content {
		width: 100%;
		padding: 0 30rpx;

		.task-form-box {
			padding-bottom: 72rpx;



		}

	}



	.form-placeholder {

		font-size: 24rpx;
		font-weight: Light;
		color: #b3b3b3;
		// line-height: 50rpx;
	}

	.submitTime {
		font-size: 28rpx;
		font-weight: 600;
		text-align: left;
		color: #1A1A1A;
		line-height: 40px;

		.submitTime-t {
			font-weight: 400;
			color: #808080;
		}

	}
</style>