MingGaoApp_vue/MingGaoApp/pages/index/details.vue

<template>
	<view class="task-details">
		<view class="task-details__header">
			<task-card type="show" :dataSource="taskDetail"></task-card>
		</view>
		<view class="task-details__body">
			<u-sticky>
				<task-tabs @tabClick="handleTabClick" :tabList="tabList"></task-tabs>
			</u-sticky>
			<view class="task-details__content">
				<transition name="slide-fade" mode="out-in" appear>
					<component :is="currentComponent" :dataSource="taskDetail" :isEdit="isEdit"></component>
				</transition>
			</view>
		</view>
		<u-loading-page loading-text="加载中..." :loading="loading" font-size="16"></u-loading-page>
	</view>
</template>

<script>
	import {
		mapState
	} from 'vuex';
	import ClockInRecordComponent from './components/ClockInRecord.vue';
	import EntrapmentComponent from './components/Entrapment.vue';
	import GisComponent from './components/Gis.vue';
	import * as taskService from '@/service/task.js';

	export default {
		components: {
			ClockInRecordComponent,
			EntrapmentComponent,
			GisComponent
		},
		computed: {
			...mapState({
				wornlist: state => state.wornlist
			}),
			tabList() {
				if (this.task_type) {
					return [{
						id: 1,
						name: '签到记录',
					}, {
						id: 2,
						name: '诱捕器',
					}, {
						id: 3,
						name: '行驶轨迹'
					}]
				} else {
					return [{
						id: 1,
						name: '签到记录',
					}, {
						id: 3,
						name: '行驶轨迹'
					}]
				}
			}
		},
		data() {
			return {
				currentComponent: ClockInRecordComponent,
				taskID: '',
				loading: false,
				taskDetail: {},
				draft: [],
				taskinfo: {},
				task_type: false,
				isEdit: false, // 详情页面，不做编辑，编辑页面单独处理
				istask: 1 // 任务模块
			}
		},
		onLoad(options) {
			console.warn(options, '------------- on load --------------')
			this.taskID = options.taskID;
			this.getTaskDetail()
		},
		watch: {
			wornlist(news, old) {
				// console.log(this.taskinfo.trap_record_list)
				console.log(news)
				this.draft = []
				this.draft.push(news)
				for (var i = 0; i < this.taskinfo.trap_record_list.length; i++) {
					for (var j = 0; j < news; j++) {
						if (this.taskinfo.trap_record_list[i].id == news.record_id) {
							this.taskinfo.trap_record_list[i].report_status = news.report_status
						} else {
							this.taskinfo.trap_record_list[i].report_status = ""
						}
					}
				}
				this.taskfillingdraft()
			},
			// kpsurlL(news, old) {
			// 	if (this.istask == 1) {
			// 		if (news != "") {
			// 			let pages = getCurrentPages();
			// 			var page = pages[pages.length - 1];
			// 			var currentWebview = page.$getAppWebview();
			// 			currentWebview.setTitleNViewButtonStyle(0, {
			// 				text: " ",
			// 			});
			// 			this.$store.state.kpsurlL = 1
			// 		} else {
			// 			let pages = getCurrentPages();
			// 			var page = pages[pages.length - 1];
			// 			var currentWebview = page.$getAppWebview();
			// 			currentWebview.setTitleNViewButtonStyle(0, {
			// 				text: "提交",
			// 			});
			// 			this.$store.state.kpsurlL = 0
			// 		}
			// 	}

			// }
		},
		methods: {
			getTaskDetail() {
				console.warn('get task detail start')
				if (!this.taskID) {
					return
				}
				console.warn('get task detail fetch')
				this.loading = true;
				taskService.getTaskDetailByTaskID(this.taskID).then(res => {
					console.warn(res, 'get task detail')
					this.taskDetail = this.taskinfo = res;
					this.task_id = res.task_id;

					console.log(this.taskinfo, '------------------------------- task info', this.taskDetail)
					// if (this.taskinfo.img_list == "" || this.taskinfo.img_list.length == 0) {
					// 	this.taskinfo.img_list = []
					// } else {
					// 	this.taskinfo.img_list = JSON.parse(this.taskinfo.img_list)
					// }
					console.warn(this.taskinfo.task_type, 'get task detail --1213144')
					if (res.task_type == "有害生物监测") {
						this.task_type = true
					} else {
						this.task_type = false
					}

					this.$store.state.worndatabase = JSON.parse(JSON.stringify(this.taskinfo.trap_record_list))
				}).finally(() => {
					this.loading = false;
				})
			},
			handleTabClick(id) {
				switch (id) {
					case 1:
						this.currentComponent = ClockInRecordComponent;
						break;
					case 2:
						this.currentComponent = EntrapmentComponent;
						break;
					case 3:
						this.currentComponent = GisComponent;
						break;
				}
			},
			async taskfillingdraft() { //任务填报接口
				// this.gettaskinfo()

				var arr = JSON.parse(JSON.stringify(this.$store.state.worndatabase))
				console.warn(this.draft,'draft')
				console.log(arr,'arr draft')
				for (var i = 0; i < arr.length; i++) {
					for (var j = 0; j < this.draft.length; j++) {
						if (arr[i].id == this.draft[j].record_id) {
							arr.splice(i, 1)
						}
					}
				}
				for (var i = 0; i < this.taskinfo.trap_record_list.length; i++) {
					for (var j = 0; j < this.draft.length; j++) {
						if (this.taskinfo.trap_record_list[i].id == this.draft[j].record_id) {
							// console.log(this.taskinfo.trap_record_list[i])
							this.taskinfo.trap_record_list[i].report_status = this.draft[j].report_status
						}
					}
				}
				this.draft = this.draft.concat(arr)
				this.$store.state.worndatabase = JSON.parse(JSON.stringify(this.draft))
				// console.log(arr)
				for (var i = 0; i < this.draft.length; i++) {
					if (this.draft[i].id) {
						this.draft[i]["record_id"] = this.draft[i].id
					}
				}
				console.log(this.draft, "0000")
				var data = {}
				if (this.task_type) {
					data = {
						task_id: this.task_id, //            是       任务id
						// report_msg: this.textareavalue, //            是       任务汇报内容
						// img_list: JSON.stringify(this.urllist), //            是       图片列表					['http://www.c.com']
						trap_record_list: JSON.stringify(this.draft),
					}
					console.log("有数据", data)
				} else {
					data = {
						task_id: this.task_id, //            是       任务id
						report_msg: this.textareavalue, //            是       任务汇报内容
						img_list: JSON.stringify(this.urllist), //            是       图片列表					['http://www.c.com']
					}
					console.log("无数据", data)
				}
				console.log(data, 555)
				const res = await this.$myRequest({
					url: '/api/api_gateway?method=app.task.task_filling_draft',
					data: data,
				})
				// console.log(res)
			},
		}
	}
</script>

<style lang="scss" scoped>
	.task-details {
		padding: 24rpx;

		&__header {
			margin-bottom: 24rpx;
		}

		&__body {
			display: flex;
			flex-direction: column;
			box-sizing: border-box;
			min-height: calc(100vh - 206rpx);
			padding: 32rpx 0;
			background-color: #fff;
			border-radius: 8rpx;
		}

		&__content {
			flex: 1 1 auto;
			display: flex;
			flex-direction: column;
			align-items: center;
			padding: 10rpx 0;
		}
	}
</style>
<style>
	page {
		background-color: #F7F8FB;
	}

	/* 可以设置不同的进入和离开动画 */
	/* 设置持续时间和动画函数 */
	.slide-fade-enter-active {
		transition: all .3s ease;
	}

	.slide-fade-leave-active {
		transition: all .8s cubic-bezier(1.0, 0.5, 0.8, 1.0);
	}

	.slide-fade-enter,
	.slide-fade-leave-to

	/* .slide-fade-leave-active for below version 2.1.8 */
		{
		transform: translateX(10px);
		opacity: 0;
	}
</style>