NurseStationPersonAppletUl/pages/confirmCompletion/confirmCompletion.vue

<template>
	<view class="app">
		<view class="top">
			<view class="title">
				<image src="../../static/fuwu.png" mode=""></image>
				<view class="text">
					{{itemlist.nurseItemName}}
				</view>
				<view class="righttext">
					<span v-if="itemlist.orderCommissionAmount&&itemlist.orderCommissionAmount>=0">
						￥{{itemlist.orderCommissionAmount}}
					</span>
					<span v-else>
						￥ 0
					</span>
				</view>
			</view>
			<view class="content">
				<view class="time" style="line-height: 60rpx;padding-top: 15rpx;">
					单号：
					<span v-if="itemlist.orderNo">{{itemlist.orderNo}}</span>
				</view>
				<view class="time">
					时间： {{itemlist.serviceDate}}
					<span style='padding-left: 10rpx;'>{{itemlist.serviceStartTime}}</span>
				</view>
				<view class="address">
					地点：{{itemlist.serviceAddress}}
				</view>
			</view>
		</view>
		<view class="pictures top">
			<view class="title">
				<image src="../../static/upload.png" mode=""></image>
				<view class="text">
					资料上传
				</view>
			</view>
			<view class="picture">
				<view class="attendantImg">
					护理员到岗照片
				</view>
				<view class="uppicture" @tap='uploadonDutyPictureUrl'>
					<view class="choice" v-if="!onDutyPictureUrl">
						拍摄照片
					</view>
					<image v-else :src="onDutyPictureUrl" mode=""></image>
					<!-- <u-upload class="slot-btn" width="530" height="130" ></u-upload> -->
				</view>
			</view>
			<!-- <view class="picture" style="height: 330rpx;">
				<view class="attendantImg">
					服务进行中视频（不少于1min）<span>*选填</span>
				</view>
				<view class="uppicture">
					<u-upload class="slot-btn" width="530" height="130"></u-upload>
				</view>
				<view class="user">
					<image src="../../static/radio.png" mode=""></image>
					用户不同意拍摄
				</view>
			</view> -->
			<view class="picture">
				<view class="attendantImg">
					服务结束照片
				</view>
				<view class="uppicture" @tap='uploadserviceEndPictureUrl'>
					<view class="choice" v-if="!serviceEndPictureUrl">
						拍摄照片
					</view>
					<image v-else :src="serviceEndPictureUrl" mode=""></image>
					<!-- <u-upload class="slot-btn" width="530" height="130" ></u-upload> -->
				</view>
			</view>
			<view class="picture" style="height: 730rpx;">
				<view class="attendantImg" style="border-bottom: 1rpx solid #BAB7B8;">
					用户签名
				</view>
				<!-- <view class="receive">
					我确认已接受服务
				</view> -->
				<view class="uppicture" @tap='show=true'>
					<image v-if="!userSignaturePictureUrl" style="width: 36rpx;height: 36rpx;margin:8% 0 0 35%"
						src="../../static/autograph.png" mode="">
					</image>
					<span v-if="!userSignaturePictureUrl">点此签名</span>
					<image v-else :src="userSignaturePictureUrl" mode=""></image>
					<!-- <u-upload class="slot-btn" :action="action" :file-list="fileList" width="620" height="130"></u-upload> -->
				</view>
			</view>
		</view>
		<view class="submit" @tap='finishshow=true'>
			完成
		</view>
		<u-popup v-model="finishshow" mode='bottom' :closeable='true' :safe-area-inset-bottom='true'>
			<view class="finishmask">
				<view class="title">
					是否确认完成当前工单？
				</view>
				<view class="leftbtn" @tap='finishshow = false'>
					否
				</view>
				<view class="rightbtn" @tap='buyfinish'>
					是
				</view>
			</view>
		</u-popup>
		<u-mask :show="show" @click="show = false">
			<view style="position:absolute;bottom:0;height:800rpx;width:100%;background-color: #F4F5F7;" v-if='show'>
				<signature @userSignaturePictureUrl='userSignaturePicture' @click.native.stop
					style='width: 100%;height: 800rpx;'></signature>
			</view>
		</u-mask>
		<u-toast ref="uToast" />
	</view>
</template>

<script>
	import signature from '../signature/signature.vue'
	import {
		orderConfirm
	} from '@/api/confirmCompletion/index.js'
	import baseurl from '@/api/baseurl.js'
	export default {
		components: {
			signature
		},
		data() {
			return {
				itemlist: null, //信息list
				finishshow: false, //是否完成
				show: false, //签名
				orderNo: null, //订单编号
				onDutyPictureUrl: null,
				serviceEndPictureUrl: null,
				userSignaturePictureUrl: null,
				list: {
					id: null,
					serviceLocationName: null,
					onDutyPictureUrl: null,
					serviceEndPictureUrl: null,
					userSignaturePictureUrl: null,
					serveLocationLatitude: null,
					serveLocationLongitude: null,
				},
			}
		},
		methods: {
			//签名
			userSignaturePicture(data) {
				this.userSignaturePictureUrl = data
				this.show = false
			},
			// /base64转二进制
			dataURLtoBlob(dataurl) {
				var arr = dataurl.split(","),
					mime = arr[0].match(/:(.*?);/)[1],
					bstr = atob(arr[1]),
					n = bstr.length,
					u8arr = new Uint8Array(n);
				while (n--) {
					u8arr[n] = bstr.charCodeAt(n);
				}
				return new Blob([u8arr], {
					type: mime,
				});
			},
			//上传头像
			uploadserviceEndPictureUrl() { //服务结束照片
				var that = this;
				uni.chooseImage({
					count: 1,
					sourceType: ['camera'],
					success(res) {
						that.serviceEndPictureUrl = res.tempFilePaths[0]
					}
				})
			},
			uploadonDutyPictureUrl() { //护理员到岗照片
				var that = this;
				uni.chooseImage({
					count: 1,
					sourceType: ['camera'],
					success(res) {
						that.onDutyPictureUrl = res.tempFilePaths[0]
					}
				})
			},
			//完成
			buyfinish() {
				this.finishshow = true
				if (this.serviceEndPictureUrl && this.userSignaturePictureUrl && this.onDutyPictureUrl) {
					let that = this
					uni.uploadFile({
						url: baseurl + '/nurseApplet/uploadFile/uploadPictureUrl',
						filePath: that.serviceEndPictureUrl,
						name: 'file',
						formData: {
							'orderNo': that.orderNo
						},
						timeout: 5000,
						success(res) {
							that.list.serviceEndPictureUrl = JSON.parse(res.data).imgUrl
							uni.uploadFile({
								url: baseurl + '/nurseApplet/uploadFile/uploadPictureUrl',
								filePath: that.userSignaturePictureUrl,
								name: 'file',
								formData: {
									'orderNo': that.orderNo
								},
								timeout: 5000,
								success(res) {
									that.list.userSignaturePictureUrl = JSON.parse(res.data).imgUrl
									uni.uploadFile({
										url: baseurl + '/nurseApplet/uploadFile/uploadPictureUrl',
										filePath: that.onDutyPictureUrl,
										name: 'file',
										formData: {
											'orderNo': that.orderNo
										},
										timeout: 5000,
										success(res) {
											that.list.onDutyPictureUrl = JSON.parse(res.data)
												.imgUrl
											that.list.orderNo = that.itemlist.orderNo
											orderConfirm(that.list).then(res => {
												if (res.code == 200) {
													that.$refs.uToast.show({
														title: '服务完成',
														type: 'success',
														duration: '1500',
													})
													if (that.timer) {
														clearTimeout(that.timer)
													}
													that.timer = setTimeout(e => {
														uni.navigateBack({
															delta: 1
														})
													}, 1500)
												} else {
													that.$refs.uToast.show({
														title: res.msg,
														type: 'error'
													})
												}
											})
										}
									})
								}
							})
						}
					})
				} else {
					this.$refs.uToast.show({
						title: '请上传全部照片并用户签名确认',
						type: 'error'
					})
				}

			},
		},
		onLoad(options) {
			this.itemlist = JSON.parse(options.list)
			this.list.id = options.orderDetailsId
			this.orderNo = this.itemlist.orderNo
		},
		onShow() {
			var that = this
			uni.getLocation({
				type: 'wgs84',
				success: function(res) {
					that.list.serveLocationLatitude = res.latitude
					that.list.serveLocationLongitude = res.longitude
					uni.request({
						url: "https://apis.map.qq.com/ws/geocoder/v1/" + '?location=' + res.latitude +
							',' +
							res.longitude + "&key=TXGBZ-VGEWW-LJHRR-3CDLI-N57YO-YQBHJ",
						method: 'GET',
						success: function(respone) {
							that.list.serviceLocationName = respone.data.result.address
						},
						fail(err) {}
					})
				},
				fail: error => {
					uni.showModal({
						title: '提示',
						content: '获取定位失败，是否授权打开定位',
						success: (res) => {
							uni.openSetting({
								success(res) {}
							});
						}
					})
				}
			});
		}
	}
</script>

<style lang="scss">
	.app {
		font-size: 36rpx;
		padding: 0;
		padding-bottom: 100rpx;

		::v-deep .u-mask {
			height: 100vh !important;
		}

		.finishmask {
			height: 300rpx;
			position: relative;

			.rightbtn,
			.leftbtn {
				position: absolute;
				text-align: center;
				line-height: 59rpx;
				width: 249rpx;
				height: 59rpx;
				border-radius: 5rpx;
				top: 200rpx;
			}

			.leftbtn {
				border: 1px solid #4271B9;
				background: #FFFFFF;
				color: #4271B9;
				left: 61rpx;
			}

			.rightbtn {
				background: #4271B9;
				color: #fff;
				right: 61rpx;
			}

			.title {
				width: 100%;
				text-align: center;
				font-size: 41rpx;
				margin-top: 160rpx;
				color: #333333;
			}
		}

		.top {
			padding-bottom: 40rpx;
			background-color: #fff;
			width: 96%;
			margin: 15rpx auto 0;
			color: #333333;
			box-shadow: 0rpx 9rpx 31rpx 9rpx rgba(0, 0, 0, 0.03);
			border-radius: 5rpx;

			.content {
				margin-left: 50rpx;
				font-size: 30rpx;

				.time {
					line-height: 90rpx;
				}

				.address {}
			}

			.title {
				border-bottom: 1rpx solid #E6E6E6;
				display: flex;
				height: 100rpx;
				line-height: 100rpx;
				position: relative;

				.righttext {
					position: absolute;
					right: 20rpx;
					top: 50%;
					transform: translateY(-50%);
					font-size: 34rpx;
					color: #EA706A;
				}

				.text {
					font-size: 34rpx;
					line-height: 100rpx;
					padding-left: 18rpx;
				}

				image {
					margin: 50rpx 0 0 35rpx;
					transform: translateY(-50%);
					width: 40rpx;
					height: 40rpx;
				}
			}
		}

		.pictures {
			width: 96%;
			margin: 15rpx auto;
			background: #FFFFFF;
			box-shadow: 0px 9rpx 31rpx 9rpx rgba(0, 0, 0, 0.03);
			border-radius: 5rpx;

			.picture {
				width: 100%;
				height: 630rpx;

				.attendantImg {
					color: #000000;
					height: 88rpx;
					line-height: 88rpx;
					margin-left: 30rpx;

					span {
						color: #BAB7B8;
					}
				}

				.uppicture {
					border: 1rpx dashed #818181;
					width: 90%;
					height: 500rpx;
					margin: 0 auto;
					position: relative;

					image {
						width: 100%;
						height: 100%;
					}

					.choice {
						position: absolute;
						top: 50%;
						left: 50%;
						transform: translate(-50%, -50%);
					}

					::v-deep .u-list-item[data-v-49deb6f2] {
						background: #FFFFFF;
					}

					span {
						font-size: 35rpx;
						color: #969394;
					}
				}

				.user {
					height: 88rpx;
					line-height: 88rpx;
					color: #969394;
					margin-left: 30rpx;

					image {
						width: 34rpx;
						height: 34rpx;
					}

				}

				.receive {
					height: 88rpx;
					line-height: 88rpx;
					color: #969394;
					margin-left: 30rpx;

				}
			}
		}

		.submit {
			width: 496rpx;
			height: 58rpx;
			background: #4271B9;
			border-radius: 5rpx;
			color: #FFFFFF;
			text-align: center;
			line-height: 58rpx;
			background: #4C7BC9;
			margin: 90rpx auto;
		}
	}
</style>