救援到达现场上传照片页面

common/router/modules/routes.js

@@ -151,6 +151,14 @@ const routes = [{
 			title: '订单详情',
 		},
 	},
+	{
+		//注意：path必须跟pages.json中的地址对应，最前面别忘了加'/'哦
+		path: '/pages/order/arriveUpload',
+		name: 'details',
+		meta: {
+			title: '订单详情',
+		},
+	},
 	{
 		//注意：path必须跟pages.json中的地址对应，最前面别忘了加'/'哦
 		path: '/pages/order/serviceOrder/orderDetail',

pages.json

@@ -42,6 +42,10 @@
 			"path": "pages/order/details",
 			"style": {}
 		},
+		{
+			"path": "pages/order/arriveUpload",
+			"style": {}
+		},
 		{
 			"path": "pages/order/serviceOrder/orderDetail",
 			"style": {}

pages/order/arriveUpload.vue

@@ -0,0 +1,260 @@
+<template>
+	<view class="arrive_upload">
+		<view class="top">
+		</view>
+		<view class="head">
+			<span class="cuIcon-back" @click="back"></span>
+			<view class="case">
+				上传现场照片
+			</view>
+		</view>
+		<view class="center">
+			<view class="text">
+				<view class="title">
+					请至少上传3张照片
+				</view>
+				<view class="describe">
+					照片要求：<br />
+					1.图片中需清晰的包含救援车辆全身<br />
+					2.清晰可见车牌照上的车牌号<br />
+					3.含被救援车全部或部分车身的整体环境照（如有因周围环境的特殊性需要纳入附加费时的情形照片）<br />
+				</view>
+			</view>
+			<view class="upload">
+				<u-upload 
+					class="upliado_cusstom"
+					:action="action" 
+					:file-list="fileList" 
+					@on-success="onUploadSuccess"
+					@on-remove="onRemove"
+					@on-choose-complete="onChooseComplete"
+					:max-count="9"
+					:multiple="true"
+					:auto-upload="true"
+				></u-upload>
+			</view>
+		</view>
+		<view class="foot">
+			<view class="btn" @click="submit">
+				确认
+			</view>
+		</view>
+	</view>
+</template>
+
+<script>
+	import configService from '../../common/service/config.service'
+	export default {
+		data() {
+			return {
+				action: configService.apiUrl + '/sys/common/upload',
+				imageHttp: configService.apiUrl + '/',
+				fileList: [],
+				uploadedFiles: [],
+				taskId :'',
+				checkType :'',
+				uptype:'',
+				paramState :'',
+				serveType :'',
+				jumptype:null
+			}
+		},
+		methods: {
+			back() {
+				console.log(this.jumptype)
+				// uni.navigateBack();
+				if(this.jumptype == 0){
+					uni.switchTab({
+						url:'/pages/order/index'
+					})
+				}else{
+					uni.navigateBack();
+				}
+			},
+			// 上传成功回调
+			onUploadSuccess(res, index, lists) {
+				if (res.code === 0) {
+					this.uploadedFiles.push({
+						url: this.imageHttp + res.message,
+						response: res
+					});
+				} else {
+					uni.showToast({
+						title: '上传失败: ' + res.message,
+						icon: 'none'
+					});
+				}
+			},
+			// 删除文件回调
+			onRemove(index, lists) {
+				this.uploadedFiles.splice(index, 1);
+			},
+			// 选择图片完成回调
+			onChooseComplete(lists) {
+				this.fileList = lists;
+			},
+			// 提交
+			submit() {
+				if (this.uploadedFiles.length < 3) {
+					uni.showToast({
+						title: '请至少上传3张照片',
+						icon: 'none'
+					});
+					return;
+				}
+					
+					// 所有图片都有内容，处理数据并发送请求
+					let  temp = []
+					this.uploadedFiles.forEach(item => {
+					   
+							temp.push({
+								merchantId :uni.getStorageSync('login_user_info').merchantId,
+								merchantName: uni.getStorageSync('login_user_info').merchantName,
+								merchantUserId: uni.getStorageSync('login_user_info').id,
+								businessType: this.type,
+								taskId : this.taskId,
+								imgUrl:this.imageHttp + item.message
+							})
+					});
+					
+					this.$http.post("/ts/merchant/addImg", temp).then(res => {
+					    console.log(res);
+					    if (res.data.code == 200) {
+					       
+									// 
+									this.upSuccess()
+					    }
+					});
+			},
+			upSuccess() {
+				let data = {
+					taskId: this.taskId,
+					checkType: this.checkType,
+					paramState: this.paramState, //商户上传图片成功
+					serveType: this.serveType
+				}
+				console.log(data)
+				this.$http.post("/ts/merchant/update/Serve", data).then(res => {
+					if (res.data.code == 200) {
+						uni.showToast({
+						    icon: 'none',
+						    title: '上传成功'
+						});
+						// uni.switchTab({
+						// 	url:'/pages/order/index'
+						// })
+						this.back()
+					} else {
+						uni.showToast({
+							icon: 'none',
+							title: res.data.message
+						})
+					}
+				})
+			},
+		},
+		onLoad(options) {
+		  this.taskId = options.taskId;
+		  this.checkType = options.checkType;
+		  this.uptype = options.uptype;
+		  this.paramState = options.paramState;
+		  this.serveType = options.serveType;
+			this.jumptype = options.jumptype
+		}
+	}
+</script>
+
+<style scoped lang="scss">
+	.arrive_upload {
+		width: 100vw;
+		height: 100vh;
+		background: #ffffff;
+		display: flex;
+		flex-direction: column;
+		overflow: hidden;
+
+		/*#ifdef APP-PLUS*/
+		.top {
+			width: 100%;
+			height: var(--status-bar-height);
+			background: #ffffff;
+		}
+
+		/*#endif*/
+		.head {
+			width: 100%;
+			height: 112rpx;
+			padding: 20rpx;
+			display: flex;
+			align-items: center;
+			background: #ffffff;
+			position: relative;
+
+			.cuIcon-back {
+				font-size: 40rpx;
+				margin-right: 40rpx;
+			}
+
+			.case {
+				position: absolute;
+				left: 50%;
+				transform: translateX(-50%);
+				font-size: 36rpx;
+				// font-weight: 600;
+			}
+		}
+
+		.center {
+			flex: 1;
+			border-top: 1px solid #EEEEEE;
+			border-bottom: 1px solid #EEEEEE;
+			padding: 20rpx 28rpx;
+			overflow-y: auto;
+
+			.text {
+				.title {
+					font-size: 36rpx;
+					color: #333333;
+				}
+
+				.describe {
+					width: 100%;
+					background: #F6F8FA;
+					padding: 20rpx;
+					font-size: 24rpx;
+					color: #909296;
+					margin-top: 16rpx;
+				}
+			}
+			
+			.upload {
+				margin-top: 30rpx;
+			}
+		}
+
+		.foot {
+			width: 100%;
+			height: 112rpx;
+			padding: 16rpx 24rpx;
+
+			.btn {
+				width: 100%;
+				height: 76rpx;
+				background: #449AFF;
+				border-radius: 66rpx;
+				text-align: center;
+				line-height: 76rpx;
+				color: #ffffff;
+				font-size: 28rpx;
+			}
+		}
+	}
+	::v-deep .u-add-wrap {
+	  width: 320rpx !important;
+	  height: 194rpx !important;
+	}
+	::v-deep .u-preview-wrap{
+		width: 320rpx !important;
+		height: 194rpx !important;
+	}
+</style>

pages/order/index.vue

@@ -795,12 +795,26 @@
 			},
 			//救援到达现场
 			arrive(item) {
-				this.taskId = item.taskId
-				this.checkType = item.checkType
-				this.uptype = 4 //道路救援
-				this.paramState = '06'
-				this.serveType = '02'
-				this.isUpload = true
+				// this.taskId = item.taskId
+				// this.checkType = item.checkType
+				// this.uptype = 4 //道路救援
+				// this.paramState = '06'
+				// this.serveType = '02'
+				let params = {
+				  taskId: item.taskId,
+				  checkType: item.checkType,
+				  uptype: 4,         // 道路救援
+				  paramState: '06',
+				  serveType: '02',
+				  // isUpload: true
+				}
+				let queryString = Object.keys(params)
+				  .map(key => `${key}=${encodeURIComponent(params[key])}`)
+				  .join('&');
+				uni.navigateTo({
+					// url:'/pages/order/arriveUpload、${queryString}'  paramState
+					 url: `/pages/order/arriveUpload?taskId=${item.taskId}&checkType=${item.checkType}&uptype=4&paramState=06&serveType=02&jumptype=0`
+				})
 			},
 			//救援完成拍照
 			help(item) {
@@ -880,7 +894,6 @@
 			// this.getList()
 		},
 		onShow() {
-
 			let that = this
 			uni.getStorage({
 				key: 'login_user_info',

pages/order/serviceOrder/orderDetail.vue

@@ -35,7 +35,7 @@
 			<!-- 送车到站显示信息结束 -->
 			<!-- 上门取车显示信息开始 -->
 			<view class="car_data" v-if="form.checkType == 0">
-				<view class="car_id user_name" >
+				<view class="car_id user_name">
 					<span style="display: block;padding: 0px;">用户姓名：{{form.contactsName}}</span>
 					<span class="call">
 						<image src="/static/order/call.png" mode=""></image> 联系客户
@@ -44,46 +44,47 @@
 				<view class="car_address">
 					<view class="address">
 						送/取车地址:{{form.carAddress}}
-						<image src="/static/order/address.png" mode="" @click="navigation(form.userLongitude,form.userLatitude,form.carAddress)"></image>
+						<image src="/static/order/address.png" mode=""
+							@click="navigation(form.userLongitude,form.userLatitude,form.carAddress)"></image>
 					</view>
 					<view class="car_license">
 						车牌号:{{form.licenseNo}}
 					</view>
 				</view>
 			</view>
-			
+
 			<!-- 上门取车显示信息结束 -->
 			<!-- 救援显示信息开始 -->
-			<view class="car_data"  v-if="form.checkType > 20">
-			<view class="name">
-				<view class="user_name">
-					用户姓名：{{form.contactsName}}
-				</view>
-				<view class="call" @click="callUser">
-					<image src="/static/order/call.png" mode=""></image>
-					联系客户
-				</view>
-			</view>
-			<view class="address">
-				<view class="location">
-					<span style="font-weight: 600;">救援地址：</span>
-					{{form.carAddress}}
-				</view>
-				<view class="go" @click="navigation(form.userLongitude,form.userLatitude,form.carAddress)">
-					<image src="/static/order/address.png" mode=""></image>
-					导航
+			<view class="car_data" v-if="form.checkType > 20">
+				<view class="name">
+					<view class="user_name">
+						用户姓名：{{form.contactsName}}
+					</view>
+					<view class="call" @click="callUser">
+						<image src="/static/order/call.png" mode=""></image>
+						联系客户
+					</view>
 				</view>
-			</view>
-			<view class="address" v-if="form.checkType==23" style="margin-top: 20rpx;">
-				<view class="location">
-					<span style="font-weight: 600;">送达地址：</span>
-					{{form.deliveryAddr}}
+				<view class="address">
+					<view class="location">
+						<span style="font-weight: 600;">救援地址：</span>
+						{{form.carAddress}}
+					</view>
+					<view class="go" @click="navigation(form.userLongitude,form.userLatitude,form.carAddress)">
+						<image src="/static/order/address.png" mode=""></image>
+						导航
+					</view>
 				</view>
-				<view class="go" @click="navigation(form.deliveryLongitude,form.deliveryLatitude,form.deliveryAddr)">
-					<image src="/static/order/address.png" mode=""></image>
-					导航
+				<view class="address" v-if="form.checkType==23" style="margin-top: 20rpx;">
+					<view class="location">
+						<span style="font-weight: 600;">送达地址：</span>
+						{{form.deliveryAddr}}
+					</view>
+					<view class="go" @click="navigation(form.deliveryLongitude,form.deliveryLatitude,form.deliveryAddr)">
+						<image src="/static/order/address.png" mode=""></image>
+						导航
+					</view>
 				</view>
-			</view>
 				<view class="car_id">
 					车牌号：{{form.licenseNo}}
 				</view>
@@ -197,7 +198,7 @@
 					<view class="item_child">
 						<span>商家地址：</span>
 						<view class="center">
-							 {{form.merAddress}}
+							{{form.merAddress}}
 						</view>
 					</view>
 					<view class="item_child">
@@ -378,7 +379,7 @@
 				paramState: null,
 				titleCheckType: null, //接单提示区分
 				serveType: '', //服务类型
-				rightsId:''
+				rightsId: ''
 			}
 		},
 		methods: {
@@ -410,7 +411,7 @@
 				})
 			},
 			//俩系客服
-			callService(){
+			callService() {
 				uni.makePhoneCall({
 					phoneNumber: this.form.custSerPhone,
 					success: () => {
@@ -443,7 +444,7 @@
 			// 查看实况记录
 			goLive() {
 				uni.navigateTo({
-					url: '/pages/order/serviceOrder/live?taskId=' + this.taskId +'&checkType='+this.form.checkType
+					url: '/pages/order/serviceOrder/live?taskId=' + this.taskId + '&checkType=' + this.form.checkType
 				})
 			},
 			// 查看图片
@@ -597,7 +598,7 @@
 				})
 			},
 			//导航
-			navigation(longitude,latitude,name){
+			navigation(longitude, latitude, name) {
 				console.log(this.form)
 				// uni.openLocation({
 				// 	longitude: Number(this.form.userLongitude),
@@ -614,7 +615,7 @@
 				uni.openLocation({
 					longitude: Number(longitude),
 					latitude: Number(latitude),
-					name:name,
+					name: name,
 					// name: this.form.carAddress, // 位置名称
 					// address: e.F_Address, // 位置地点
 					success: function(res) {
@@ -678,13 +679,28 @@
 			},
 			//救援到达现场
 			arrive() {
-				this.taskId = this.form.taskId
-				this.checkType = this.form.checkType
-				this.uptype = 4 //道路救援
-				this.paramState = '06'
-				this.serveType = '02'
-				this.isUpload = true
+				// this.taskId = this.form.taskId
+				// this.checkType = this.form.checkType
+				// this.uptype = 4 //道路救援
+				// this.paramState = '06'
+				// this.serveType = '02'
+				// this.isUpload = true
 				// this.getDeatil()
+				let params = {
+					taskId: this.form.taskId,
+					checkType: this.form.checkType,
+					uptype: 4, // 道路救援
+					paramState: '06',
+					serveType: '02',
+					jumptype:1
+					// isUpload: true
+				}
+				let queryString = Object.keys(params)
+					.map(key => `${key}=${encodeURIComponent(params[key])}`)
+					.join('&');
+				uni.navigateTo({
+					url: '/pages/order/arriveUpload?${queryString}'
+				})
 			},
 			help() {
 				this.taskId = this.form.taskId
@@ -879,17 +895,20 @@
 						margin-top: 12rpx;
 					}
 				}
-				.name{
+
+				.name {
 					display: flex;
 					align-items: center;
 					justify-content: space-between;
 					border-bottom: 1px solid #eeeeee;
 					padding-bottom: 14rpx;
-					.user_name{
+
+					.user_name {
 						font-weight: 600;
 						font-size: 30rpx;
 					}
-					.call{
+
+					.call {
 						width: 156rpx;
 						height: 48rpx;
 						background: #F4F9FE;
@@ -899,36 +918,42 @@
 						justify-content: center;
 						font-size: 24rpx;
 						color: #2D88F4;
-						image{
+
+						image {
 							width: 28rpx;
 							height: 28rpx;
 							margin-right: 8rpx;
 						}
 					}
 				}
-				.address{
+
+				.address {
 					display: flex;
 					align-items: start;
 					justify-content: space-between;
 					margin-top: 16rpx;
 					margin-bottom: 12rpx;
-					.location{
+
+					.location {
 						font-size: 26rpx;
 					}
-					.go{
+
+					.go {
 						display: flex;
 						flex-direction: column;
 						align-items: center;
 						font-size: 18rpx;
-						color: rgba(45,136,244,0.96);
-						image{
+						color: rgba(45, 136, 244, 0.96);
+
+						image {
 							width: 44rpx;
 							height: 44rpx;
-							
+
 						}
 					}
 				}
-				.car_id{
+
+				.car_id {
 					font-size: 26rpx;
 				}
 			}