NurseStationPersonApp/pages/taskDetails/taskDetails.vue

<template>
	<view class="app">
		<view class="details">
			<image :src="baseurl+list.itemPictureUrl" mode=""></image>
			<view class="detailsinfo">
				<view class="change">
					{{list.nurseItemName}}
				</view>
				<view class="time">
					服务时长： {{list.itemServeDurationUnit}}
				</view>
				<view class="price">
					￥ {{list.totalPrice}}
				</view>
			</view>
		</view>
		<view class="info">
			<view class="item">
				姓名： {{list.patientName}}
			</view>
			<view class="item">
				电话：{{list.phone}}
			</view>
			<view class="item" style="border:none;">
				<view class="add" style="display:inline-block;">
					地址:
				</view>
				<view class="address">
					{{list.serviceAddress}}
				</view>
			</view>
		</view>
		<view class="submit">
			<view class="return" @tap='goreturn'>
				任务退回
			</view>
			<view class="finish" @tap='gocomplete'>
				去完成
			</view>
		</view>
	</view>
</template>

<script>
	import {
		taskDetails
	} from '@/api/taskDetails.js'
	import baseurl from '@/api/baseurl.js'
	export default {
		data() {
			return {
				baseurl: '',
				list: {},
				orderDetailsId: null,
			}
		},
		methods: {
			//详情接口
			taskDetailsinfo(orderDetailsId) {
				taskDetails(orderDetailsId).then(res => {
					this.list = res.data
					console.log(this.list)
				})
			},
			goreturn() {
				uni.navigateTo({
					url: `/pages/taskReturn/taskReturn?orderNo=${this.list.orderNo}`
				})
			},
			gocomplete() {
				uni.navigateTo({
					url: `/pages/confirmCompletion/confirmCompletion?orderDetailsId=${this.list.orderDetailsId}&orderNo=${this.list.orderNo}`
				})
			},
		},
		onLoad(options) {
			this.baseurl = baseurl
			this.orderDetailsId = options.orderDetailsId
		},
		onShow() {
			this.taskDetailsinfo(this.orderDetailsId)
		},
	}
</script>

<style lang="scss">
	.app {
		padding: 0;
		// font-size: 35rpx;
		height: 100vh;
		padding: 3%;

		.details {
			width: 100%;
			height: 250rpx;
			background: #FFFFFF;
			box-shadow: 0rpx 9rpx 31rpx 9rpx rgba(0, 0, 0, 0.03);
			border-radius: 20rpx;
			margin: 0 auto;
			position: relative;

			image {
				width: 170rpx;
				height: 170rpx;
				border-radius: 10rpx;
				margin: 20rpx 0 0 30rpx;
			}

			.detailsinfo {
				width: 60%;
				height: 200rpx;
				border-radius: 10rpx;
				position: absolute;
				top: 12%;
				left: 35%;

				.change {
					width: 100%;
					color: #000000;
					font-size: 34rpx;
					overflow: hidden;
					text-overflow: ellipsis;
					white-space: nowrap;
				}

				.time {
					width: 100%;
					font-size: 32rpx;
					color: #999999;
					position: absolute;
					top: 32%;
				}

				.price {
					width: 100%;
					font-size: 30rpx;
					color: #D43953;
					position: absolute;
					top: 65%;
				}
			}
		}

		.info {
			width: 100%;
			background: #FFFFFF;
			box-shadow: 0px 9rpx 31rpx 9rpx rgba(0, 0, 0, 0.03);
			border-radius: 20rpx;
			position: relative;
			top: 20rpx;


			.item {
				line-height: 110rpx;
				border-bottom: 1rpx solid #D8D4D4;
				font-size: 32rpx;
				color: #000000;
				margin-left: 30rpx;

				.add {
					position: absolute;
				}

				.address {
					height: 100rpx;
					line-height: 40rpx;
					display: inline-block;
					width: 80%;
					margin-left: 100rpx;
					margin-top: 30rpx;

				}

			}
		}

		.submit {
			width: 100%;
			height: 100rpx;
			height: 68rpx;
			font-size: 32rpx;
			color: #FFFFFF;
			text-align: center;
			position: fixed;
			bottom: 80rpx;
			// background-color: red;
			left: 15%;
			// padding: 20rpx;

			.return {
				width: 216rpx;
				height: 68rpx;
				background: #E1AE3C;
				border-radius: 26rpx;
				line-height: 68rpx;
				display: inline-block;


			}

			.finish {
				width: 217rpx;
				height: 68rpx;
				line-height: 68rpx;
				background: #4C7BC9;
				border-radius: 26rpx;
				display: inline-block;
				margin-left: 30rpx;

			}
		}
	}
</style>