MingGaoApp_vue/MingGaoApp/pages/index/index.vue

<template>
	<view class="task-page">
		<u-loading-page loading-text="加载中..." :loading="loading" font-size="16"></u-loading-page>
		<view class="task__header">
			<view class="task__header-container">
				<view class="search-form">
					<u-search placeholder="请输入任务处理人" v-model="searchKey" :showAction="false" @input="search"></u-search>
				</view>
				<view class="task__tabs">
					<view class="task__tab-item" v-for="item in tabList" :key="item.id"
						:class="{active:item.id===currentIndex}" @click="handleTabClick(item)">
						{{item.name}}
					</view>
				</view>
			</view>
		</view>
		<view class="task__body">
			<task-card @click="handleCardClick" @btntap="handleBtnClick" v-for="item in taskList" :key="item.task_id"
				:dataSource="item" @confirm="handleTaskConfirm"></task-card>
		</view>
		<u-modal :show="confirmModalVisible" :content="content" :showCancelButton="true" :closeOnClickOverlay="false"
			@confirm="handleModalConfirm" @cancel="handleModalCancel" :asyncClose="true">
		</u-modal>
		<u-notify ref="uNotify" message=""></u-notify>
		<u-popup :show="show" @close="close" @open="open" :closeOnClickOverlay="true" :safeAreaInsetTop="true">
			<view class="task-finished__area">
				<u--textarea :focus="true" v-model="report_msg" placeholder="" :maxlength="200" autoHeight border="none"
					style="margin-bottom: 24rpx;">
				</u--textarea>

				<u-button text="提交" type="primary" size="small" @click="handleSubmit" :disabled="loading"></u-button>
			</view>

		</u-popup>
	</view>
</template>

<script>
	import HeartBeat from '@/util/HeartBeat.js'
	import * as taskService from '@/service/task.js';
	import {
		TASK_ACTION_TYPE,
		TASK_WALK_TYPE
	} from '@/util/constants.js';
	import {
		assign,
		concat,
	} from 'lodash-es';

	import {
		mapState,
		mapActions
	} from 'vuex'

	export default {
		data() {
			return {
				loading: false,
				page: 1,
				total: 0,
				pageSize: 10,
				start_time: "",
				end_time: "",
				name: '',
				searchKey: '',
				currentIndex: 1,
				currentName: '待处理',
				tabList: [{
					id: 1,
					name: '待处理',
					value: '待处理',
				}, {
					id: 2,
					name: '处理中',
					value: '处理中',
				}, {
					id: 3,
					name: '已完成',
					value: '已完成'
				}],
				taskList: [],
				confirmModalVisible: false,
				content: '确认接收次任务？',
				currentTaskID: '',
				_heartBeat: null,
				isUpdateLocation: false,
				logs: [],
				show: false,
				report_msg: ''
			}
		},
		onShow() {

		},
		onReady() {
			this._heartBeat = HeartBeat.getInstance(this.recordRatio);
		},
		onLoad() {},
		onReachBottom() {
			const hasMore = this.total > 0 && this.toal > this.page * this.pageSize

			if (hasMore) {
				this.page++;
				this.getTaskList();
			}
		},
		onPullDownRefresh() {
			this.tasklist = [];
			this.page = 1;
			this.start_time = "";
			this.end_time = "";
			this.total = 0;
			this.getTaskList();

			setTimeout(() => {
				uni.stopPullDownRefresh();
			}, 1000)
		},
		onNavigationBarButtonTap(e) {

		},
		watch: {

		},
		computed: {
			...mapState({
				recordRatio: state => state.task.ratio
			}),
			offsetLeft() {
				return
			},

		},
		onShow() {
			this.page = 1;
			this.tasklist = [];
			this.getTaskList();
		},
		methods: {
			...mapActions(['addLocationData']),
			click(item) {
				console.log('item', item);
			},
			search() {
				this.page = 1;
				this.total = 0;
				this.getTaskList();
			},
			handleTabClick(tabItem) {
				if (!tabItem.id) {
					return
				}

				if (this.currentIndex !== tabItem.id) {
					this.currentIndex = tabItem.id;
					this.currentName = tabItem.value;

					this.resetTaskList();
				}
			},
			handleCardClick(taskID) {
				uni.navigateTo({
					url: "/pages/index/details?taskID=" + taskID
				})
			},
			handleBtnClick(type, taskID) {
				switch (type) {
					case TASK_ACTION_TYPE.START:
					case TASK_ACTION_TYPE.PAUSE:
					case TASK_ACTION_TYPE.RESTART:
						this.updateWalkStatus(type, taskID);
						break;
					case TASK_ACTION_TYPE.CLOCK:
						uni.navigateTo({
							url: '/pages/index/clockDetail?taskID=' + taskID
						})
						break;
					case TASK_ACTION_TYPE.FINISHED:
						this.currentTaskID = taskID;
						this.show = true;
						break;
				}
			},
			updateWalkStatus(type, taskID) {
				console.log(type, 'update walk status 2222', taskID)
				let message = '操作成功';

				switch (type) {
					case TASK_ACTION_TYPE.START:
						message = '任务已经开始';
						break;
					case TASK_ACTION_TYPE.RESTART:
						message = '继续记录';
						break;
					case TASK_ACTION_TYPE.PAUSE:
						message = '任务暂停成功';
						break;
					case TASK_ACTION_TYPE.FINISHED:
						message = '任务已完成';
						break;
				}

				const payload = {
					task_id: taskID,
					action: type
				}
				console.warn('update status', payload)
				this.loading = true;
				taskService.updateTaskWalkStatus(payload).then(() => {
					this.$refs.uNotify.show({
						top: 10,
						type: 'success',
						message,
						duration: 1000 * 3,
						fontSize: 16,
						safeAreaInsetTop: true
					})
					this.getTaskList();
					// 处理轨迹坐标点
					this.updateRecordLocation(type, taskID);

				}).finally(() => {
					this.loading = false;
				})
			},
			updateRecordLocation(type, taskID) {
				switch (type) {
					case TASK_ACTION_TYPE.START:
					case TASK_ACTION_TYPE.RESTART:
						this.isUpdateLocation = true;
						this._heartBeat.handle({
							type: 'record_' + taskID,
							data: {
								taskID
							},
							handler: this.getLocation
						})
						break;
					case TASK_ACTION_TYPE.PAUSE:
					case TASK_ACTION_TYPE.FINISHED:
						this.isUpdateLocation = false;

						this._heartBeat.clearByType('record_' + taskID)
						break;
				}

			},
			getLocation({
				taskID
			}) {
				return new Promise((resolve, reject) => {
					console.log('getlocation start', this.isUpdateLocation)
					if (!this.isUpdateLocation) {
						console.log('getlocation start 1 close')
						resolve(true)
						return
					}

					console.log('getlocation start 2 exec')

					uni.getLocation({
						type: 'gcj02',
						success: (res) => {
							console.log('当前位置的经度：' + res.longitude);
							console.log('当前位置的纬度：' + res.latitude);
							this.logs.push(`记录中:当前位置的经度${res.longitude};当前位置的纬度${res.latitude}`)
							this.addLocationData({
								id: Date.now(),
								taskID,
								latitude: res.latitude,
								longitude: res.longitude
							})

							resolve(false)
						},
						fail(err) {
							console.warn(err, 'get location error')
						}
					});
				})

			},
			resetTaskList() {
				this.page = 1;
				this.total = 0;
				this.getTaskList();
			},
			getTaskList() {
				this.loading = true;
				let payload = {
					page: this.page, //            否       页码, 默认1
					page_item: this.pageSize, //
					status: this.currentName,
					start_time: this
						.start_time, //                              非必填                     开始时间
					end_time: this.end_time,
					operator_user_name: this.searchKey
				};

				taskService.getTaskList(payload).then(res => {
					console.log(res, 'get task list')
					this.taskList = this.page === 1 ? res.page_list : concat(this.taskList, res.page_list);
					this.total = this.total_item;

					res.page_list.forEach(item => {
						if (item.walk_status === TASK_WALK_TYPE.IS_RECORDING) {
							this.isUpdateLocation = true;
							if (!this._heartBeat.hasType('record_' + item.task_id)) {
								this._heartBeat.handle({
									type: 'record_' + item.task_id,
									data: {
										taskID: item.task_id
									},
									handler: this.getLocation
								})
							}
						}
					})
					console.warn(this.taskList, 'task list 1345555')
				}).finally(() => {
					this.loading = false;
				})
			},
			handleTaskConfirm(taskID) {
				if (!taskID) {
					return
				}
				this.currentTaskID = taskID;
				this.confirmModalVisible = true;
			},
			handleModalConfirm() {

				const payload = {
					task_id: this.currentTaskID
				}
				console.log(this.currentTaskID, 'modal confirm', payload)
				taskService.confirmTaskWithTaskID(payload).then(res => {
					this.getTaskList();
				}).finally(() => {
					this.confirmModalVisible = false
				})
			},
			handleModalCancel() {
				this.currentTaskID = '';
				this.confirmModalVisible = false;
			},
			open() {
				console.log('open');
			},
			close() {
				this.show = false
				console.log('close');
			},
			handleSubmit() {
				if (!this.report_msg) {
					uni.$u.toast('请输入描述');
					return
				}
				this.loading = true;
				taskService.taskSubmit({
					task_id: this.currentTaskID,
					report_msg: this.report_msg
				}).then(res=>{
					uni.$u.toast('提交成功');
					// this.updateWalkStatus(TASK_ACTION_TYPE.FINISHED,this.currentTaskID);
					this.getTaskList();
					this.currentTaskID = '';
				}).finally(()=>{
					this.show = false;
					this.loading = false
				})
			}
		}
	}
</script>

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

		.task {
			&__header {
				position: fixed;
				left: 0;
				right: 0;
				top: 0;
				// #ifdef APP-PLUS
				padding-top: 24rpx;
				// #endif
				// #ifndef APP-PLUS
				padding-top: 112rpx;
				// #endif


				background-color: #F7F8FB;
				box-shadow: 0px 0px 16rpx 0px rgba(153, 153, 153, 0.2);
				border-radius: 4rpx;
				z-index: 1;

				.search-form {
					padding: 24rpx;
				}

				&-container {
					background-color: #fff;
				}
			}

			&__tabs {
				position: relative;
				padding: 0 74rpx;
				display: flex;

				::v-deep .u-tabs__wrapper__nav {
					justify-content: space-between;
				}
			}

			&__tab-item {
				position: relative;
				flex: 1 1 0%;
				display: flex;
				align-items: center;
				justify-content: center;
				padding: 20rpx;
				font-size: 28rpx;
				color: #7489A9;
				transition: all 1s;

				&::before {
					content: '';
					position: absolute;
					bottom: 0;
					left: 50%;
					width: 0rpx;
					height: 4rpx;
					transform: translateX(-50%);
					background-color: #1B76FF;
					transition: all 1s;
				}

				&.active {
					color: #1B76FF;
					font-weight: 500;

					&::before {
						width: 120rpx;
					}
				}
			}

			&__tab-line {
				position: absolute;
				bottom: 0;
				width: 120rpx;
				height: 4rpx;
				background-color: #1B76FF;
				transform: translateX(50rpx);
			}

			&__body {
				padding: 40rpx 24rpx;
			}
		}
	}

	.task-finished {
		&__area {
			padding: 24rpx;
		}
	}
</style>
<style>
	page {
		background-color: #F7F8FB;
	}
</style>