NurseStationPersonAppletUl/pages/taskDetails/taskDetails.vue

<template>
	<view class="app" v-if="baseurl">
		<view class="top">
			<view class="title">
				<image src="../../static/fuwu.png" mode=""></image>
				<view class="text">
					{{list.nurseItemName}}
				</view>
				<view class="righttext" >
					￥{{list.totalPrice}}
				</view>
			</view>
			<view class="content">
				<view class="time">
					时间：{{list.serviceDate}}
					<span style='padding-left: 10rpx;'>{{list.serviceStartTime}}</span>
				</view>
				<view class="address">
					地点：{{list.serviceAddress}}
				</view>
			</view>
		</view>
		<view class="top">
			<view class="title">
				<image src="../../static/user.png" mode=""></image>
				<view class="text">
					用户信息
				</view>
			</view>
			<view class="content" style="margin-top: 20rpx;">
				<view class="item">
					姓名：{{list.patientName}}
				</view>
				<view class="item">
					年龄：{{list.age}}
				</view>
				<view class="item">
					电话：{{list.phone}}
				</view>
				<view class="item address" @tap='getlocations'>
					<view class="text" style="line-height: 60rpx;">
						住址：{{list.address}}
					</view>
					<view class="daohang">
						<image src="../../static/daohang.png" mode=""></image>
						<span class='p'>导航</span>
					</view>
				</view>
				<view class="item">
					是否失能：{{list.disablingCondition=="NOT_DISABLED"?'未失能':''}}
					{{list.disablingCondition=="DISABLED"?'已失能':''}}
				</view>
				<view class="item" v-if="list.disablingCondition=='DISABLED'">
					失能情况：{{list.disablingReason}}
				</view>
			</view>
		</view>
		<view class="btnsuccess" v-if="list.orderStatus!='COMPLETE'" @tap='goconfirmCompletion'>
			去完成
		</view>
		<view class="btnreturn" @tap='gotaskReturn' v-if="list.orderStatus!='COMPLETE'">
			退回
		</view>
	</view>
</template>

<script>
	import {
		taskDetails
	} from '@/api/taskDetails/taskDetails.js'
	import baseurl from '@/api/baseurl.js'
	export default {
		data() {
			return {
				baseurl: null,
				list: {}, //详情对象
				tude: { //经纬度
					latitude: null,
					longitude: null,
				},
				orderDetailsId: null, //工单id
			}
		},
		methods: {
			//详情接口
			taskDetailsinfo(orderDetailsId) {
				taskDetails(orderDetailsId).then(res => {
					if (res.code == 200) {
						this.list = res.data
					}
					this.baseurl = baseurl
				})
			},
			//经纬度
			getlocations() {
				let that = this
				uni.request({
					url: 'https://apis.map.qq.com/ws/geocoder/v1/?address=',
					method: 'GET',
					data: {
						key: '3VABZ-6LZWK-YPAJ3-AMQED-D7RUK-VPB37', //高德地图key
						address: that.list.address // 详细地址
					},
					success: function(res) {
						that.tude.latitude = res.data.result.location.lat
						that.tude.longitude = res.data.result.location.lng
						that.goaddress();
					},
					fail(err) {}
				})
			},
			//跳转地图
			goaddress() {
				let that = this
				uni.openLocation({
					latitude: Number(that.tude.latitude),
					longitude: Number(that.tude.longitude),
				})
			},
			//退回
			gotaskReturn() {
				uni.navigateTo({
					url: `/pages/taskReturn/taskReturn?item=${JSON.stringify(this.list)}`
				})
			},
			//去完成
			goconfirmCompletion() {
				uni.navigateTo({
					url: `/pages/confirmCompletion/confirmCompletion?list=${JSON.stringify(this.list)}&&orderDetailsId=${this.list.orderDetailsId}`
				})
			},
		},
		onLoad(options) {
			this.orderDetailsId = options.orderDetailsId
		},
		onShow() {
			this.taskDetailsinfo(this.orderDetailsId)
		},
	}
</script>

<style lang="scss">
	@import './taskDetails.scss';
</style>