wurenji-xcx/pages/index/taskDeatils.vue

<template>
	<view class="main">
		<view class="title">
			任务信息
		</view>
		<view class="main_box">
			<view class="text">
				<view class="label">
					管线名称
				</view>
				<view class="value">
					{{dataForm.lineName}}
				</view>
			</view>
			<view class="text">
				<view class="label">
					管线单元名称
				</view>
				<view class="value">
					{{dataForm.lineUnitName}}
				</view>
			</view>
			<view class="text">
				<view class="label">
					单元长度
				</view>
				<view class="value">
					{{dataForm.totalMileage}}km
				</view>
			</view>
			<view class="text">
				<view class="label">
					创建时间
				</view>
				<view class="value">
					{{dataForm.createDate}}
				</view>
			</view>
		</view>
		<u-action-sheet :actions="list" :title="title" :show="show" @close='show=false'
			@select="selectClick"></u-action-sheet>
		<view class="btns">
			<u-button v-if="dataForm.isReceived==='0'" type='error' :plain="true" text="拒绝"
				@click="refuseTaskArrange"></u-button>
			<u-button v-if="dataForm.isReceived==='1'" type='error' :plain="true" text="取消任务"
				@click="cancelTaskArrange"></u-button>
			<u-button v-if="dataForm.isReceived==='0'&&isApp" type="primary" text="接受"
				@click="receiveTaskArrange"></u-button>
			<u-button class="custom-style" v-if="dataForm.isReceived==='6'" type="primary" text="完成"
				@click="completeTaskArrange"></u-button>
			<span style="margin-left: 15rpx;width: 300rpx;">
				<u-button class="custom-style" type="primary" text="导航到起飞点" @click="selectClick"></u-button>
			</span>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				title: '导航到起飞点',
				list: [{
						name: '高德',
					},
					{
						name: '百度',
					},
				],
				show: false,
				dataForm: {},
				isApp: false,
			}
		},
		onLoad(x) {
			//#ifdef APP-PLUS
			this.isApp = true
			// #endif
			this.dataForm = JSON.parse(x.data)
		},
		methods: {
			selectClick(index) {
				this.changelang(this.dataForm.takeoffLongitude, this.dataForm.takeoffLatitude)
				// console.log(index);
				// if (index.name == '高德') {
				// } else {
				// 	this.toFly(this.dataForm.takeoffLongitude, this.dataForm.takeoffLatitude)
				// }
			},
			changelang(long, lat) {
				let that = this
				uni.request({
					url: `https://restapi.amap.com/v3/assistant/coordinate/convert?locations=${long},${lat}&coordsys=gps&key=74d5aa7c4270effe9a18d9cfa6149abf`,
					success(res) {
						console.log(res.data.locations);
						let locations = res.data.locations.split(',')
						that.toFly(locations[0], locations[1])
					},
					fail(fail) {
						console.log(fail);
					}
				})
			},
			toFly(lang, lat) {
				// 定义目的地的坐标和名称
				const latitude = lat; // 纬度
				const longitude = lang; // 经度
				const name = '起飞点'; // 地点名称
				const address = '起飞点'; // 地址

				// 调用uni.openLocation方法
				uni.openLocation({
					latitude: Number(latitude), // 目标纬度
					longitude: Number(longitude), // 目标经度
					name: name, // 地点名称
					// address: address, // 详细地址
					success: function() {
						console.log('成功打开地图');
					},
					fail: function(err) {
						console.error('打开地图失败', err);
					}
				});
			},
			refuseTaskArrange() {
				this.$api.to_http(`/task/zhkjwurenjitaskarrange/refuseTaskArrange/${this.dataForm.id}`).then((res) => {
					if (res.data.code != 0) {
						return uni.$u.toast(res.data.msg)
					}
					uni.showToast({
						title: '操作成功',
						icon: 'success'
					})
					setTimeout(() => {
						uni.navigateBack(-1)
					}, 500)
				})
			},
			cancelTaskArrange() {
				this.$api.to_http(`/task/zhkjwurenjitaskarrange/completeTaskArrange/${this.dataForm.id}/${0}`).then((
					res) => {
					if (res.data.code != 0) {
						return uni.$u.toast(res.data.msg)
					}
					uni.showToast({
						title: '操作成功',
						icon: 'success'
					})
					setTimeout(() => {
						uni.navigateBack(-1)
					}, 500)
				})
			},
			completeTaskArrange() {
				this.$api.to_http(`/task/zhkjwurenjitaskarrange/completeTaskArrange/${this.dataForm.id}`).then((res) => {
					if (res.data.code != 0) {
						return uni.$u.toast(res.data.msg)
					}
					uni.showToast({
						title: '操作成功',
						icon: 'success'
					})
					setTimeout(() => {
						uni.navigateBack(-1)
					}, 500)
				})
			},
			receiveTaskArrange() {
				let info = uni.getStorageSync('userInfo')
				let that = this
				that.dataForm.receivedUserId = info.id
				that.dataForm.receivedUserName = info.realName
				if (uni.getSystemInfoSync().platform === 'android' || uni.getSystemInfoSync().platform === 'ios') {
					const deviceId = plus.device.uuid;
					let mechId = deviceId.split(',')[0]
					that.dataForm.deviceId = mechId
					that.$api.to_http(`/task/zhkjwurenjitaskarrange/receiveTaskArrange`, that.dataForm, 'post').then((
						res) => {
						if (res.data.code != 0) {
							return uni.$u.toast(res.data.msg)
						}
						uni.showToast({
							title: '操作成功',
							icon: 'success'
						})
						setTimeout(() => {
							uni.navigateBack(-1)
						}, 500)
					})
				}
			}
		}
	}
</script>

<style lang="less" scoped>
	.btns {
		padding: 0 20rpx;
		box-sizing: border-box;
		position: fixed;
		width: 100%;
		bottom: 1%;
		display: flex;
		// grid-gap: 20rpx;
		// grid-template-columns: 1fr 1fr;
	}


	.title {
		color: #000;
		font-weight: bold;
		padding: 10rpx 20rpx;
	}

	.main_box {
		background: #fff;
		padding: 0rpx 20rpx;
		color: #323233;

		.text {
			display: flex;
			padding: 21rpx 0;
			margin: 8rpx 0;
			border-bottom: 1px solid rgb(235, 237, 240);
			font-family: -apple-system, BlinkMacSystemFont, "Helvetica Neue", Helvetica, Segoe UI, Arial, Roboto, "PingFang SC", "miui", "Hiragino Sans GB", "Microsoft Yahei", sans-serif;

			.label {
				width: 220rpx;
			}
		}
	}
</style>