优化巡检图片功能

constant/UrlConstant.js

@@ -64,6 +64,9 @@ const listInspectionTasks = baseUrl + "app/inspectionTask.listInspectionTasks";
 //巡检任务详情
 const listInspectionTaskDetails = baseUrl + 'app/inspectionTaskDetail.listInspectionTaskDetails';
 
+//巡检
+const updateInspectionTaskDetail = baseUrl + 'app/inspectionTaskDetail.updateInspectionTaskDetail'
+
 
 module.exports = {
   baseUrl: baseUrl,
@@ -96,5 +99,6 @@ module.exports = {
   listAdvertPhoto: listAdvertPhoto,
   saveOwnerRepair:saveOwnerRepair,
   listInspectionTasks:listInspectionTasks,
-  listInspectionTaskDetails:listInspectionTaskDetails
+  listInspectionTaskDetails:listInspectionTaskDetails,
+  updateInspectionTaskDetail:updateInspectionTaskDetail
 };

factory/Base64Factory.js

@@ -6,30 +6,77 @@
 class Base64Factory {
 	constructor() {}
 
-  static urlTobase64(url) {
+	static getLocalFilePath(path) {
-    return new Promise((resolve, reject) => {
+		if (path.indexOf('_www') === 0 || path.indexOf('_doc') === 0 || path.indexOf('_documents') === 0 || path.indexOf(
-      uni.request({
+				'_downloads') === 0) {
-      	url: url,
+			return path
-      	method:'GET',
-      	responseType: 'arraybuffer',
-      	success: ress => {
-      		let base64 = wx.arrayBufferToBase64(ress.data); //把arraybuffer转成base64 
-      		base64 = 'data:image/jpeg;base64,' + base64 //不加上这串字符，在页面无法显示的哦
-      		console.log(base64);
-			resolve(base64);
-      	},
-		fail: function (e) {
-          console.log(e);
-          reject(e);
 		}
+		if (path.indexOf('file://') === 0) {
+			return path
+		}
+		if (path.indexOf('/storage/emulated/0/') === 0) {
+			return path
+		}
+		if (path.indexOf('/') === 0) {
+			var localFilePath = plus.io.convertAbsoluteFileSystem(path)
+			if (localFilePath !== path) {
+				return localFilePath
+			} else {
+				path = path.substr(1)
+			}
+		}
+		return '_www/' + path
+	}
+
+	static urlTobase64(url) {
+		//url = Base64Factory.getLocalFilePath(url);
+
+		return new Promise((resolve, reject) => {
+			console.log('url', url);
+			// #ifdef H5
+			let imgData;
+			let reader = new FileReader();
+			getImageBlob(url, function(blob) {
+				reader.readAsDataURL(blob);
 			});
-      /* wx.getFileSystemManager().readFile({
+			reader.onload = function(e) {
-        filePath: url,
+				imgData = e.target.result;
-        //选择图片返回的相对路径
+				resolve(imgData);
-        encoding: 'base64',
+			};
-        //编码格式
+
-        success: res => {
+			function getImageBlob(_url, cb) {
-          //成功的回调
+				let xhr = new XMLHttpRequest();
+				xhr.open("get", _url, true);
+				xhr.responseType = "blob";
+				xhr.onload = function() {
+					if (this.status == 200) {
+						if (cb) cb(this.response);
+					}
+				};
+				xhr.send();
+			}
+			// #endif
+			// #ifdef APP-PLUS 
+			let _imageBase64List = '';
+			plus.io.resolveLocalFileSystemURL(url,
+				function(entry) {
+					// 可通过entry对象操作test.html文件
+					entry.file(function(file) {
+						var fileReader = new plus.io.FileReader();
+						fileReader.readAsDataURL(file);
+						fileReader.onloadend = function(evt) {
+							_imageBase64List = _imageBase64List.concat(evt.target.result);
+							resolve(_imageBase64List);
+						}
+					})
+				});
+			// #endif
+
+			// #ifdef MP-WEIXIN
+			wx.getFileSystemManager().readFile({
+				filePath: url, //选择图片返回的相对路径
+				encoding: 'base64', //编码格式
+				success: res => { //成功的回调
 					//console.log('data:image/png;base64,' + res.data);
 					let base64 = 'data:image/png;base64,' + res.data;
 					resolve(base64);
@@ -38,8 +85,10 @@ class Base64Factory {
 					console.log(e);
 					reject(e);
 				}
-      }); */
+			})
+			// #endif
 		});
+
 	}
 
 }

pages/excuteInspection/excuteInspection.vue

@@ -11,9 +11,26 @@
 					<button class="cu-btn  line-green block margin-tb-sm lg " @click="_excuteInspection(item)">
 						<text class="cuIcon-upload"></text>巡检</button>
 				</view>
+				<view v-else class="margin-top-sm margin-right grid text-center col-3 grid-square">
+					<view class="" v-for="(_item,index) in item.photos" :key="index">
+						<image mode="scaleToFill" :src="_item.url" @tap="preview(_item.url)"></image>
+					</view>
+				</view>
 			</view>
 			
 		</view>
+		
+		<view class="cu-modal" :class="viewImage?'show':''">
+			<view class="cu-dialog">
+				<view class="bg-img" :style="'background-image: url('+ viewImageSrc +');height:800rpx;'">
+					<view class="cu-bar justify-end text-white">
+						<view class="action" @tap="closeViewImage()">
+							<text class="cuIcon-close "></text>
+						</view>
+					</view>
+				</view>
+			</view>
+		</view>
 	</view>
 </template>
 
@@ -27,7 +44,9 @@
 				communityId:'',
 				userId:'',
 				userName:'',
-				taskDetails:[]
+				taskDetails:[],
+				viewImage:false,
+				viewImageSrc:''
 				
 			}
 		},
@@ -38,6 +57,9 @@
 			let _userInfo = this.java110Context.getUserInfo();
 			this.userName = _userInfo.userName;
 			this.userId = _userInfo.userId;
+			
+		},
+		onShow() {
 			this._queryTaskDetail();
 		},
 		methods: {
@@ -60,7 +82,16 @@
 						// res.data.inspectionTaskDetails.forEach(function(item, index) {
 						// 	item.timeStr = item.planInsTime.replace(/:\d{1,2}$/, ' ');
 						// });
-						_that.taskDetails = res.data.inspectionTaskDetails;
+						let _inspectionTaskDetails = res.data.inspectionTaskDetails;
+						_inspectionTaskDetails.forEach(function(_item){
+							if(_item.state == '20200407'){
+								_item.photos.forEach(function(_photoTmp) {
+									_photoTmp.url = _that.java110Constant.url.hcBaseUrl + _photoTmp.url;
+								});
+							}
+							
+						})
+						_that.taskDetails = _inspectionTaskDetails;
 					}
 				});
 			},
@@ -73,6 +104,13 @@
 				uni.navigateTo({
 					url:'/pages/excuteOneInspection/excuteOneInspection?taskDetailId='+_item.taskDetailId+"&taskId="+_item.taskId+"&inspectionId="+_item.inspectionId+"&inspectionName="+_item.inspectionName
 				});
+			},
+			preview: function(_src) {
+				this.viewImage = true;
+				this.viewImageSrc = _src;
+			},
+			closeViewImage: function() {
+				this.viewImage = false;
 			}
 		}
 	}

pages/excuteOneInspection/excuteOneInspection.vue

@@ -19,18 +19,18 @@
 					巡检图片
 				</view>
 				<view class="action">
-					{{photoList.length}}/4
+					{{imgList.length}}/4
 				</view>
 			</view>
 			<view class="cu-form-group">
 				<view class="grid col-4 grid-square flex-sub">
-					<view class="bg-img" v-for="(img,index) in photoList" :key= "index" bindtap="ViewImage" :data-url="photoList[index]">
+					<view class="bg-img" v-for="(img,index) in imgList" :key= "index" bindtap="ViewImage" :data-url="imgList[index]">
-						<image :src='photoList[index]' mode='aspectFill'></image>
+						<image :src='imgList[index]' mode='aspectFill'></image>
 						<view class="cu-tag bg-red" @tap="removePhoto(index)" :data-index="index">
 							<text class="cuIcon-close"></text>
 						</view>
 					</view>
-					<view class="solids" @tap="ChooseImage" v-if="photoList.length<4">
+					<view class="solids" @tap="ChooseImage" v-if="imgList.length<4">
 						<text class="cuIcon-cameraadd"></text>
 					</view>
 				</view>
@@ -59,7 +59,6 @@
 				description:'',
 				photos:[],
 				imgList:[],
-				photoList:[],
 				patrolIndex:0,
 				communityId:'',
 				userId:'',
@@ -82,23 +81,27 @@
 				this.patrolTypeName = this.patrols[e.detail.value];
 				this.patrolType = this.patrolTypes[e.detail.value];
 			},
-			afterRead: function(event) {
+			removePhoto: function(e) {
-				const {
+				console.log(e.detail.index);
-					file
+				let _imgList = [];
-				} = event.detail;
+				this.imgList.forEach(function(item, index) {
-			
+					if (index != e.detail.index) {
-				let _that = this;
+						_imgList.push(item);
-			
+					}
-				const {
-					photoList = []
-				} = this;
-				photoList.push(file);
-				this.photoList = photoList;
-			
-				factory.base64.urlTobase64(file.path).then(function(_baseInfo) {
-					_that.photos.push(_baseInfo);
 				});
-				console.log("data信息：", this);
+				let _photos = [];
+				this.photos.forEach(function(item, index) {
+					if (index != e.detail.index) {
+						_photos.push(item);
+					}
+				});
+				this.photos = _photos;
+				this.imgList = _imgList;
+			},
+			deleteImage: function(e) {
+				console.log(e);
+				let imageArr = this.$data.imgList;
+				imageArr.splice(e, 1);
 			},
 			ChooseImage: function(e) {
 				let that = this;
@@ -108,19 +111,16 @@
 					sourceType: ['album'], //从相册选择
 					success: (res) => {
 						console.log(res);
-						if (that.$data.photoList.length) {
+						that.$data.imgList.push(res.tempFilePaths[0]);
-							that.$data.photoList.push(res.tempFilePaths[0]);
+						let _base64Photo = '';
-						} else {
+						that.java110Factory.base64.urlTobase64(res.tempFilePaths[0]).then(function(_res) {
-							that.$data.photoList = res.tempFilePaths;
+							_base64Photo = _res;
-						}
+							console.log('base64', _base64Photo);
+							that.photos.push(_base64Photo);
+						});
 					}
 				});
 			},
-			removePhoto: function(e) {
-				console.log(e);
-				let imageArr = this.$data.photoList;
-				imageArr.splice(e, 1);
-			},
 			_submitExcuteInspection: function() {
 				/**
 				 * taskId:'',
@@ -174,7 +174,7 @@
 					});
 				} else {
 					this.java110Context.request({
-						url: this.java110Constant.url.saveOwnerRepair, //  http://hc.demo.winqi.cn:8012/appApi/ownerRepair.saveOwnerRepair 
+						url: this.java110Constant.url.updateInspectionTaskDetail, //  http://hc.demo.winqi.cn:8012/appApi/ownerRepair.saveOwnerRepair 
 						header: this.java110Context.getHeaders(),
 						method: "POST",
 						data: obj, //动态数据