BJYSYBZ/YSGZYBZ_WXAPP/pages/nocheckDetail/index.vue

<template>
	<view class="nocheckBox">
		<navigation-bar :isBack="true" @toBack="toBackHandle"></navigation-bar>
		<view class="container">
			<view class="warningBox">
				<text class="title">基本信息</text>
				<view class="content">
					<view class="item">
						<text class="title">地块编号</text>
						<text class="val">{{ objs.dkbh || '' }}</text>
					</view>
					<view class="item">
						<text class="title">面积(亩)</text>
						<text class="val">{{ objs.mj || ''}}</text>
					</view>
					<view class="item">
						<text class="title">地块位置</text>
						<text class="val">{{ objs.dkwz || ''}}</text>
					</view>
					<view class="item">
						<text class="title">地块现状</text>
						<text class="val">{{ objs.dkxz || '' }}</text>
					</view>
					<view class="item">
						<text class="title">管地单位</text>
						<text class="val">{{ objs.gddw || '' }}</text>
					</view>
					<view class="item">
						<text class="title">联系人</text>
						<text class="val">{{ objs.lxr || '' }}</text>
					</view>
					<view class="item itemAuto">
						<text class="title">联系电话</text>
						<text class="val">{{ objs.lxdh || '' }}</text>
					</view>
					<view class="item szfw">
						<text class="title">四至范围</text>
						<text class="val">
							<text>{{ objs.szfw || '' }}</text>
						</text>
					</view>
				</view>
			</view>
			<view class="checkResultBox">
				<text class="title">巡查情况</text>
				<view class="content">
					<view class="formGroup">
						<text class="label">现状描述：</text>
						<view class="formInput">
							<textarea name="" id="" cols="30" rows="10" v-model="baseFormData.xzms"
								placeholder="请输入现状描述"></textarea>
						</view>
					</view>
					<view class="formGroup noBetween">
						<text class="label">现场照片：</text>
						<view class="formFile">
							<uni-file-picker @delete="deleteImage" :value="fileImgList" :del-icon="true"
								:imageStyles="imageStyles" auto-upload="false" le-mediatype="image"
								:sourceType="['camera']" @select="selectFileChange">
								<view class="icon_camera">
									<image src="../../static/images/images.png"></image>
								</view>
							</uni-file-picker>
						</view>
					</view>
				</view>
				<button class="btn" @tap="saveWarning">确认上报</button>
				<button style="background: #ff9900;" class="btn" @tap="temporaryXcjl">暂存</button>
			</view>
		</view>
	</view>
</template>

<script>
	import navigationBar from '../../components/navigationBar/navigationBar.vue';
	import httpAjax from '@/utils/https.js';
	import CustomMixins from '@/mixins/CustomMixins.js';
	const FormData = require('@/utils/formData/formData.js');

	export default {
		mixins: [CustomMixins],
		components: {
			navigationBar,
		},
		data() {
			return {
				lat: '',
				long: '',
				queryParams: {
					xcryId: '',
					xzms: '',
					xcryName: '',
					xcryMobile: '',
					dksyh: '',
					imgList: [{
						fileId: '',
						lng: '',
						lat: '',
					}, ],
				},
				objs: {},
				fileList: [],
				fileImgList: [],
				imageStyles: {
					width: 64,
					height: 64,
				},
				baseFormData: {
					xzms: ''
				},
				isLocation: true
			};
		},
		onReady() {
			uni.showTabBar();
		},
		onLoad(option) {
			this.checkAuthorize()
			const idStr = JSON.parse(option['obj']);
			this.objs = idStr;
			this.queryIsLocation().then((result) => {
				if (result && result['data']) {
					this.isLocation = result['data']
				}
			})
			if (this.objs && this.objs.dksyh) {
				const tempXcjl = uni.getStorageSync(this.objs.dksyh)
				if (tempXcjl) {
					this.fileList = tempXcjl['fileList']
					this.fileImgList = tempXcjl['fileImgList']
					this.baseFormData = tempXcjl['baseFormData']
				}
			}
		},
		methods: {
			checkAuthorize() {
				const self = this;
				this.getWxLocation().catch(res => {
					if (res === 0) {
						this.getWxSetting();
					}
				})
			},
			getWxLocation() {
				return new Promise((resolve, reject) => {
					wx.authorize({
						scope: 'scope.userLocation',
						success: (res) => {
							wx.getLocation({
								success: (res) => {
									resolve(res)
								},
								fail: (err) => {
									reject(-1)
								},
							});
						},
						fail: (err) => {
							reject(0)
						},
					});
				})
			},
			getWxSetting() {
				uni.getSetting({
					success: function(res) {
						var statu = res.authSetting;
						if (!statu['scope.userLocation']) {
							uni.showModal({
								title: '提示',
								content: '需要获取您的地理位置，请确认授权，否则拍照功能将无法使用',
								success: function(res) {
									if (res.confirm) {
										uni.openSetting();
									}
								}
							});
						}
					},
				});
			},
			async getDistance(lat, lng) {
				return await httpAjax({
					url: `api/oss/isWithinBufferRange?lat=${lat}&lng=${lng}&dksyh=${this.objs.dksyh}`,
					method: 'GET'
				})
			},
			async queryIsLocation(lat, lng) {
				return await httpAjax({
					url: 'api/oss/location',
					method: 'GET'
				})
			},
			saveWarning() {
				//上报
				if (this.baseFormData.xzms === '') {
					uni.showToast({
						title: '现状描述不能为空',
						icon: 'none',
						duration: 1500,
					});
					return;
				}
				if (!(this.fileList.length > 0)) {
					uni.showToast({
						title: '现场照片不能为空',
						icon: 'none',
						duration: 1500,
					});
					return;
				}
				this.relationFileById(this.fileList);
			},
			async relationFileById(fileObj) {
				//文件上传
				let _that = this;
				let files = [];
				let laycenterArr = [];
				fileObj.forEach((item) => {
					let obj = {
						fileId: item.fileId,
						lat: item.lat,
						lng: item.lng,
					};
					files.push(obj);
					let obj1 = {
						lat: item.lat,
						lng: item.lng,
					};
					laycenterArr.push(obj1);
				});

				let isSubmit = true;
				if (this.isLocation) {
					for (let i = 0; i < laycenterArr.length; i++) {
						const resultData = await this.getDistance(
							laycenterArr[i].lat,
							laycenterArr[i].lng
						);
						if (!resultData['data']) {
							isSubmit = false;
							uni.showModal({
								title: '提示',
								content: `超出地块拍摄范围`
							});
							break;
						}
					}
				}
				if (!isSubmit) return;
				this.addXcjlAjax(files).then((result) => {
					if (result.data) {
						uni.showModal({
							title: '提示',
							content: '上报成功，是否返回首页',
							success: function(res) {
								if (res.confirm) {
									uni.navigateTo({
										url: '/pages/main/index',
									});
								} else if (res.cancel) {
									uni.navigateTo({
										url: `/pages/receivedDetail/index?obj=${JSON.stringify(
		  				  _that.objs,
		  				)}`,
									});
								}
							},
						});
						if (_that.objs && _that.objs.dksyh) {
							uni.removeStorageSync(_that.objs.dksyh)
						}
					}
				});
			},
			async addXcjlAjax(files = []) {
				const _that = this;
				const sendData = {
					xcryId: uni.getStorageSync('userInfo').id,
					xzms: this.baseFormData.xzms,
					xcryName: uni.getStorageSync('userInfo').xcry,
					xcryMobile: uni.getStorageSync('userInfo').lxdh,
					dksyh: this.objs.dksyh,
					imgList: files
				};
				return await httpAjax({
					url: 'app/xc/addXcjl',
					method: 'POST',
					data: sendData,
				});
			},
			temporaryXcjl() {
				if (this.objs && this.objs.dksyh) {
					const obj = {
						fileImgList: this.fileImgList,
						fileList: this.fileList,
						baseFormData: this.baseFormData
					}
					uni.setStorageSync(this.objs.dksyh, obj);
					uni.showToast({
						title: '暂存成功！'
					})
				}
			},
			selectFileChange(file) {
				console.log(file);
				const that = this;
				const tempFilePath = file.tempFilePaths[0];
				uni.getImageInfo({
					src: tempFilePath,
					success: function(image) {
						const fileName = file['tempFiles'][0]['name'];
						that.fileUploadAjax(tempFilePath);
					},
				});
			},
			setFileImgList(name, url, path2) {
				const extnames = name.match(/\.(jpg|jpeg|png|GIF|JPG|PNG)$/);
				const extname = extnames[0];
				this.fileImgList.push({
					name,
					url,
					path2,
					extname,
				});
			},
			deleteImage(item) {
				const that = this;
				httpAjax({
					url: 'api/oss/delete?filePath=' + item['tempFile']['path2'],
					method: 'GET',
				}).then((result) => {
					const data = result['data'];
					if (data) {
						for (let i = 0; i < that.fileImgList.length; i++) {
							const imgItem = that.fileImgList[i];
							if (imgItem['path2'] === item['tempFile']['path2']) {
								that.fileImgList.splice(i, 1);
								break;
							}
						}
						for (let i = 0; i < that.fileList.length; i++) {
							const fileItem = that.fileList[i];
							if (fileItem['path'] === item['tempFile']['path2']) {
								that.fileList.splice(i, 1);
								break;
							}
						}
					}
				});
			},
			fileUploadAjax(tempFile) {
				const formData = new FormData();
				formData.appendFile('file', tempFile);
				const sendData = formData.getData();
				let header = {
					'content-type': sendData.contentType,
				};
				const that = this;
				httpAjax({
					url: 'api/oss/upload',
					method: 'POST',
					header,
					data: sendData.buffer,
				}).then((result) => {
					const fileInfo = result['data'];
					that.setFileImgList(fileInfo['name'], tempFile, fileInfo['path']);
					//文件上传成功后获取经纬度给图片信息
					this.getWxLocation().then(res => {
						this.lat = res.latitude;
						this.long = res.longitude;
						fileInfo.lat = res.latitude;
						fileInfo.lng = res.longitude;
						fileInfo.fileId = fileInfo.id;
						fileInfo.warningId = this.warningId;
						this.fileList.push(fileInfo);
					}).catch(res => {
						if (res === 0) {
							this.getWxSetting();
						}
					})
				});
			},
			toBackHandle() {
				uni.navigateBack();
			},
		},
	};
</script>

<style lang="scss">
	@import './index.scss';
</style>