zhgdyunapp/pages/projectEnd/scan/saoSao.vue

<template>
	<view class="fullHeight">
		<headers :showBack="true">
			<view class="headerName">
				巡检点信息
			</view>
		</headers>
		<view class="">
			<view class="splitTitle">
				巡检信息
			</view>
			<view class="infoBlock">
				<form>
					<view class="item">
						<view class="title">
							巡检点名称
						</view>
						<input v-model="form.inPointName" type="text" disabled />
					</view>
					<view class="item">
						<view class="title">
							巡检点位置
						</view>
						<input v-model="form.posiTion" type="text" disabled />
					</view>
					<view class="item" v-for="(item,index) in form.templateList" :key="index">
						<view class="title">
							<text class="star" v-if="item.isRequired">*</text>{{item.title}}
						</view>
						<input v-model="item.value" type="text" />
					</view>
					<view class="item" v-show="status">
						<view class="title">
							<text class="star">*</text>异常详情
						</view>
						<view class="uni-form-input">
							<textarea class="textarea" maxlength="-1" placeholder-class="cl" name="alarmDetails"
								@input='changeTextarea' v-model="form.alarmDetails" placeholder="请输入"></textarea>
						</view>
					</view>
					<view class="uni-form-item" v-show="status">
						<view class="uni-form-label" style="padding-left: 12px; box-sizing: border-box;">
							上传照片
						</view>
						<view class="uni-form-input imgBox_wrap">
							<view class="imgBox" v-show="fileList.length>0" v-for="(item,index) in fileList"
								:key="index">
								<image :src="url_config+'image/'+item.url" class="img"></image>
								<uni-icons @click="deleteImg(item)" class="deleteImg" type="clear" size="24">
								</uni-icons>
							</view>
							<view class="addImgBox" @click="selectImg" v-if="fileList.length<5">
								<image src="/static/icon-add.png" class="icon-add"></image>
							</view>
						</view>
					</view>
				</form>

			</view>
		</view>
		<view class="radioBox">
			<radio-group @change="chen">
				状态:
				<label class="radio">
					<radio class="radio" value="1" checked="true" style="transform:scale(0.7)" />正常
					<radio class="radio" value="2" style="transform:scale(0.7)" />异常
				</label>
			</radio-group>
		</view>
		<view class="btnBox">
			<view class="addBtn" @click="addBtn">保存</view>
		</view>
	</view>
</template>
<script>
	export default {
		data() {
			return {
				form: {
					alarmDetails: "", //异常详情
					alarmImage: "", //异常图片
					inPointName: "巡检点", //巡检点名称
					inPointId: 0, //巡检点名称
					posiTion: "777563", // 巡检点位置
					createUserName: "创建人", //创建人
					createData: "创建时间", //创建时间
					templateList: [],
					status: 1,

				},
				fileList: [],
				status: false,
				saoData: "",
				longitude: 0,
				latitude: 0,
			}
		},
		onLoad(e) {
			this.checkOpenGPSServiceByAndroid()
			console.log(e.data,'我的测试数据')
			this.getnow(e.data)
		},
		methods: {
			checkOpenGPSServiceByAndroid() {
				let system = uni.getSystemInfoSync(); // 获取系统信息
				if (system.platform === 'android') { // 判断平台
					var context = plus.android.importClass("android.content.Context");
					var locationManager = plus.android.importClass("android.location.LocationManager");
					var main = plus.android.runtimeMainActivity();
					var mainSvr = main.getSystemService(context.LOCATION_SERVICE);
					if (!mainSvr.isProviderEnabled(locationManager.GPS_PROVIDER)) {
						uni.showModal({
							title: '提示',
							content: '请打开定位服务功能',
							showCancel: false, // 不显示取消按钮
							success() {
								if (!mainSvr.isProviderEnabled(locationManager.GPS_PROVIDER)) {
									var Intent = plus.android.importClass('android.content.Intent');
									var Settings = plus.android.importClass('android.provider.Settings');
									var intent = new Intent(Settings.ACTION_LOCATION_SOURCE_SETTINGS);
									main.startActivity(intent); // 打开系统设置GPS服务页面
								}
							}
						});
					}
				}
			},
			getnow(Val) {
				uni.getLocation({
					// type: 'wgs84',
					type: 'gcj02',
					geocode: true,
					isHighAccuracy: "true",
					accuracy: "best", // 精度值为20m
					success: (res) => {
						console.log('位置请求数据', res);
						let data = JSON.parse(Val);
						let userInfo = JSON.parse(uni.getStorageSync('userInfo'))
						// console.log('得到的二维码数据 ' + Val + ": " + userInfo.userId);
						// console.log('获取到的经度 ：' + res.longitude + "，二维码的数据的 经度：" + data.longitude);
						// console.log('获取到的纬度 ：' + res.latitude + "，二维码的数据的 纬度：" + data.latitude);
						this.sendRequest({
							url: "xmgl/checkingPoint/checkLocation",
							data: {
								id: data.checkingPointId,
								longitude: res.longitude,
								latitude: res.latitude,
								userId: userInfo.userId,
							},
							method: "GET",
							success(res) {
								console.log('res-----------', res);
								if (res.result == false) {
									uni.showModal({
										title: '提示',
										content: res.message,
										confirmColor: '#ee6666', //确定字体颜色
										showCancel: false, //没有取消按钮的弹框
										buttonText: '确定',
										success: function(res) {
											if (res.confirm) {
												uni.navigateTo({
													url: '../projectIndex/projectIndex'
												})
											}
										}
									});
								}
								// if (res.code != 200) {
								// 	uni.showModal({
								// 		title: '提示',
								// 		content: '当前位置不在巡检范围内',
								// 		confirmColor: '#ee6666', //确定字体颜色
								// 		showCancel: false, //没有取消按钮的弹框
								// 		buttonText: '确定',
								// 		success: function(res) {
								// 			if (res.confirm) {
								// 				uni.navigateTo({
								// 					url: '../projectIndex/projectIndex'
								// 				})
								// 			}
								// 		}
								// 	});
								// }
								console.log('xmgl/checkingPoint/checkLocation --- 得到的数据' + res);

							},
							// fail(error) {
							// 	console.log('请求失败', error);
							// 	// 其他处理失败逻辑
							// },
							// complete: () => {
							// 	console.log("网络请求complete");

							// }
						})
						this.form.inPointName = data.checkingPointName
						this.form.createUserName = data.createUserName
						this.form.posiTion = data.position
						this.form.inPointId = data.checkingPointId
						this.form.templateList = JSON.parse(data.template)
						console.log('this.form.templateList  数据 ' + JSON.parse(data.template)[0].title);

					},
					fail: function(msg) {
						console.log("获取位置失败", msg)
					}
				});
			},
			chen(val) {
				this.status = !this.status
				let statusType = JSON.stringify(val.target.value)
				this.form.status = JSON.parse(statusType)

			},
			//输入内容
			changeTextarea(e) {
				this.form.alarmDetails = e.detail.value;
				console.log('输入的详情', this.form.alarmDetails);
			},
			//上传附件
			selectImg() {
				var that = this
				uni.chooseImage({
					count: 5 - that.fileList.length,
					success(res) {
						const tempFilePaths = res.tempFilePaths;
						uni.uploadFile({
							url: that.url_config + 'upload/image', //仅为示例，非真实的接口地址
							filePath: tempFilePaths[0],
							name: 'files',
							success: (uploadFileRes) => {
								let data = {
									name: JSON.parse(uploadFileRes.data).data[0].filename,
									url: JSON.parse(uploadFileRes.data).data[0].imageUrl
								};
								that.fileList.push(data)
							}
						});
					}
				})
			},
			//删除附件
			deleteImg(val) {
				let that = this;
				uni.showModal({
					title: '提示',
					content: '确定删除该附件吗?',
					success: function(res) {
						if (res.confirm) {
							let fileArr = JSON.parse(JSON.stringify(that.fileList));
							fileArr.forEach((item, index) => {
								if (item.url == val.url) {
									fileArr.splice(index, 1)
								}
							})
							that.fileList = fileArr;
						} else if (res.cancel) {
							console.log('用户点击取消');
						}
					}
				});

			},
			//提交
			checkTemplateList() {
				let userInfo = JSON.parse(uni.getStorageSync('userInfo'))
				this.sendRequest({
					url: "xmgl/checkingPointInfo/add",
					data: {
						alarmDetails: this.form.alarmDetails,
						alarmImage: JSON.stringify(this.fileList),
						checkingPointId: this.form.inPointId,
						checkingPointName: this.form.inPointName,
						checkingPointUserId: userInfo.userId,
						checkingPointUserName: userInfo.account,
						createDate: "",
						id: 0,
						position: this.form.posiTion,
						status: this.form.status,
						template: JSON.stringify(this.form.templateList),
						updateDate: ""
					},

					method: "POST",
					success(res) {
						if (res.code == 200) {
							uni.showModal({
								title: '提示',
								content: '添加成功',
								confirmColor: '#ee430f', //确定字体颜色
								showCancel: false, //没有取消按钮的弹框
								buttonText: '确定',
								success: function(res) {
									if (res.confirm) {
										uni.navigateTo({
											url: '../projectIndex/projectIndex'
										})
									}
								}
							});
						}

					}
				})
			},
			//确定提交
			addBtn() {
				if (this.form.templateList.length >= 1) {
					let check = true
					this.form.templateList.forEach(res => {
						if (res.isRequired && (res.value == null || res.value == "")) {
							check = false
							uni.showModal({
								title: '提示',
								content: "必填项" + res.title + "不能为空",
								confirmColor: '#ee6666', //确定字体颜色
								showCancel: false, //没有取消按钮的弹框
								buttonText: '确定',
								success: function(res) {

								},
							});
						}
					})
					if (check) {
						this.checkTemplateList()
					}
				} else {
					this.checkTemplateList()
				}

			}
		}
	}
</script>

<style scoped lang="scss">
	.splitTitle {
		margin: 15px 10px 0;
		border-left: 3px solid $uni-color-primary;
		padding: 0 5px;
		line-height: 16px;
		font-size: 16px;
	}

	.infoBlock {
		padding: 15px 0;

		.item {
			border-bottom: 1px solid rgba(0, 0, 0, 0.05);
			margin-bottom: 10px;
			padding: 0 15px;

			.title {
				font-size: 12px;
				opacity: 0.6;
			}

			.value {
				padding: 5px 0;
			}
		}
	}

	.radioBox {
		margin: 0px 0px 20px 20px;

		.radio {
			margin-left: 30px;
		}

		.radioDiv {
			margin-top: 10px;
		}
	}

	.addBtn {
		bottom: 30rpx;
		left: 50%;
		width: 88%;
		height: 100rpx;
		background: #5181F6;
		color: #fff;
		border-radius: 25px;
		text-align: center;
		line-height: 100rpx;
		margin-left: 20px;
	}

	.btnBox {
		margin-bottom: 10px;
	}

	.addImgBox {
		border: 1px solid rgba(42, 43, 91, 0.1);
		background-color: #f6f5f8;
		width: 60px;
		height: 60px;
		display: inline-flex;
		align-items: center;
		justify-content: center;
		border-radius: 10px;
		font-size: 12px;
		margin-top: 20px;

		.icon-add {
			width: 18px;
			height: 18px;
		}
	}

	.imgBox_wrap {
		display: flex;
		flex-wrap: wrap;
		margin-left: 10px;
	}

	.imgBox {
		width: 60px;
		height: 60px;
		display: inline-flex;
		position: relative;
		margin-right: 13px;
		margin-bottom: 10px;
		margin-top: 20px;

		.img {
			width: 100%;
			height: 100%;
			border-radius: 10px;
		}

		.deleteImg {
			position: absolute;
			right: -10px;
			top: -10px;
		}
	}
</style>