NurseStationPersonApp/pages/confirmCompletion/confirmCompletion.vue

<template>
	<view class="app">
		<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 class="submit">
			<view class="finish" @tap='buyfinish'>
				去完成
			</view>
		</view>
		<u-mask :show="show" @click="show = false">
			<signature @userSignaturePictureUrl='userSignaturePicture' @click.native.stop
				style='position:absolute;bottom:0%;width: 100%;height: 800rpx;'></signature>
		</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 {
				show: false,
				orderNo: null,
				onDutyPictureUrl: null,
				serviceEndPictureUrl: null,
				userSignaturePictureUrl: null,
				list: {
					res: {},
					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() {
				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
											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.list.id = options.orderDetailsId
			this.orderNo = options.orderNo
			var that = this
			uni.getLocation({
				type: 'gcj02',
				geocode: true,
				success: function(res) {
					that.list.serviceLocationName = res.address.poiName
					that.list.serveLocationLatitude = res.latitude
					that.list.serveLocationLongitude = res.longitude
				},
				fail: error => {
					uni.showModal({
						title: '提示',
						content: '获取定位失败，是否授权打开定位',
						success: (res) => {
							if (res.confirm) {
								uni.getSystemInfo({
									success: (sys) => {
										if (sys.platform == 'ios') {
											plus.runtime.openURL(
												"app-settings://");
										} else {
											var main = plus.android
												.runtimeMainActivity();
											var Intent = plus.android.importClass(
												"android.content.Intent");
											//可能应该直接进入应用列表的权限设置？=> android.settings.APPLICATION_SETTINGS
											var mIntent = new Intent(
												'android.settings.LOCATION_SOURCE_SETTINGS'
											);
											main.startActivity(mIntent);
										}
									}
								})
							}
						}
					})
				}
			});
		},
	}
</script>

<style lang="scss">
	.app {
		padding: 3%;
		font-size: 36rpx;

		.picture {
			width: 95%;
			height: 630rpx;
			background: #FFFFFF;
			box-shadow: 0px 9rpx 31rpx 9rpx rgba(0, 0, 0, 0.03);
			border-radius: 20px;
			margin: 20rpx auto 0;

			.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: 32%;
			height: 68rpx;
			font-size: 32rpx;
			color: #FFFFFF;
			text-align: center;
			margin-left: 60%;

			.finish {
				width: 100%;
				height: 68rpx;
				line-height: 68rpx;
				background: #4C7BC9;
				border-radius: 26rpx;
				margin-top: 100rpx;
			}
		}
	}
</style>