bigDataApp/pages/fourBase/modification.vue

<template>
	<view>
		<view class="status_bar"></view>
		<view class="" style="position: relative;top: 44px;">
			<view style="position: fixed;z-index: 100;">
				<uni-nav-bar @clickLeft="clickLeft" left-icon="back" left-text="返回" title="基地修改"></uni-nav-bar>
			</view>
			<view class="addimg">
				<view class="addimg_add" @click="gainimg">
					<u-icon name="plus" size="60rpx" color="#A5A6A8"></u-icon>
					<image :src="baseinfo.base_img" mode="" class="addimg_img"></image>
				</view>
			</view>
			<view class="base_text">
				<p class="title">基地信息</p>
				<view class="base_text_item1">
					<u-icon name="chandi" custom-prefix="custom-icon" class="icon"></u-icon>
					<span><span style="color: #ff0000;margin: 0;">*</span>基地名称</span>
					<input type="text" v-model="baseinfo.base_name" placeholder="请输入基地名称" />
				</view>
				<view class="base_text_item1">
					<u-icon name="jidiguanli" custom-prefix="custom-icon" class="icon"></u-icon>
					<span><span style="color: #ff0000;margin: 0;">*</span>负责人</span>
					<input type="text" v-model="baseinfo.base_charge " placeholder="请输入基地负责人" />
				</view>
				<view class="base_text_item1">
					<u-icon name="dianhua2" custom-prefix="custom-icon" class="icon"></u-icon>
					<span><span style="color: #ff0000;margin: 0;">*</span>联系电话</span>
					<input type="text" v-model="baseinfo.base_phone" placeholder="请输入联系电话" />
				</view>
				<view class="base_text_item1">
					<u-icon name="mianji" custom-prefix="custom-icon" class="icon"></u-icon>
					<span><span style="color: #ff0000;margin: 0;">*</span>面积(亩)</span>
					<input type="number" v-model="baseinfo.base_area" placeholder="请输入基地面积" />
				</view>
				<view class="base_text_item2">
					<u-icon name="xiangqing-" custom-prefix="custom-icon" class="icon"></u-icon>
					<span>基地描述</span>
					<textarea v-model="baseinfo.base_describe " maxlength="80" :auto-height="true" class="textarea"
						placeholder="请输入基地描述(不能大于80字)" />
				</view>
				<view class="base_text_item1" @click="map">
					<u-icon name="dingwei" custom-prefix="custom-icon" class="icon"></u-icon>
					<span><span style="color: #ff0000;margin: 0;">*</span>基地定位</span>
					<input type="text" v-model="city" placeholder="请选择地址" disabled
						style="position: absolute;right: 60rpx;width: 60%;" />
					<u-icon name="arrow-right" class="iconright"></u-icon>
				</view>
				<view class="base_text_item1" @click="binding">
					<u-icon name="bangding" custom-prefix="custom-icon" class="icon"></u-icon>
					<span><span style="color: #ff0000;margin: 0;">*</span>设备绑定</span>
					<u-icon name="arrow-right" class="iconright"></u-icon>
				</view>
				<view class="base_id_box" v-if="baseobjtf">
					<view class="base_id" v-for="(item,index) in base_id" :key="index">
						<view class="base_id_item">
							<span>{{item.device_id}}</span>
							<span>{{item.type_name}}</span>
						</view>
					</view>
				</view>
				<view class="base_id_box" v-else>
					<view class="base_id" v-for="items,indexs in baseobj" :key="indexs">
						<view class="base_id_item">
							<span>{{items.arr}}</span>
							<span>{{items.name}}</span>
						</view>
					</view>
				</view>
				<view class="btn" @click="tijiao">
					确 定
				</view>
			</view>
		</view>
		<kps-image-cutter @ok="onok" @cancel="oncancle" :url="imgs" :fixed="false" :blob="false" :maxWidth="500"
			:maxHeight="500"></kps-image-cutter>
	</view>
</template>
<script>
	import kpsImageCutter from "@/components/ksp-image-cutter/ksp-image-cutter.vue";
	export default {
		components: {
			kpsImageCutter
		},
		data() {
			return {
				base_id: [],
				baseobj: [],
				baseinfo: {
					base_name: '', //必传(str)           基地名称
					base_charge: '', //必传(str)           负责人
					base_phone: '', //必传(str)           联系电话
					base_img: '', // 必传(str)           基地图片
					base_area: '', //必传(str)           基地面积
					base_equip: '', //必传(str)           绑定设备 如果绑定多个设备传 289#299, 如果是单一设备传298
					base_describe: '', //非必传(str)         基地描述
					lng: '', //必传(str)           经度
					lat: '', //必传(str)           纬度
				},
				city: '',
				imgs: "",
				baseobjtf: true
			}
		},
		methods: {
			//base.bases.base_list新增基地 //modify 修改  list  列表
			async addbase() { //获取分布位置 
				const res = await this.$myRequest({
					url: '/api/api_gateway?method=base.bases.base_list',
					data: this.baseinfo,
					ret: "modify"
				})
				console.log(res)
				if (res) {
					uni.showToast({
						title: '修改成功',
						duration: 2000,
						icon: "none"
					});
				}
			},
			async ybase() { //获取基地设备
				const res = await this.$myRequest({
					url: '/api/api_gateway?method=base.bases.base_map_list',
					data: {
						base_id: this.baseinfo.base_id
					}
				})
				this.base_id = res
				console.log(res)
			},
			clickLeft() {
				uni.navigateTo({
					url: "./index"
				})
				// localStorage.removeItem("typeid")
				// localStorage.removeItem("location")
				
				uni.removeStorage({
					key:'typeid'
				})
				
				uni.removeStorage({
					key:'location'
				})
			},
			binding() {
				uni.navigateTo({
					url: "./allocation?base_id=" + this.baseinfo.base_id
				})
			},
			gainimg() { //添加图片
				uni.chooseImage({
					count: 1, //默认9
					sizeType: ['original', 'compressed'], //可以指定是原图还是压缩图，默认二者都有
					sourceType: ['album', 'camera'], //从相册选择
					success: (res) => {
						this.imgs = res.tempFilePaths[0]
					}
				})
			},
			map() {
				uni.navigateTo({
					url: "city"
				})
			},
			tijiao() {
				if (this.baseinfo.base_img == '') {
					uni.showToast({
						title: '请选择基地图片',
						duration: 2000,
						icon: "none"
					});

				} else if (this.baseinfo.base_name == '') {
					uni.showToast({
						title: '请填写正基地名称',
						duration: 2000,
						icon: "none"
					});
				} else if (this.baseinfo.base_charge == '') {
					uni.showToast({
						title: '请填写基地负责人',
						duration: 2000,
						icon: "none"
					});
				} else if (this.baseinfo.base_phone == '') {
					uni.showToast({
						title: '请填写手机号',
						duration: 2000,
						icon: "none"
					});
				} else if (this.baseinfo.base_area == '') {
					uni.showToast({
						title: '请填写基地面积',
						duration: 2000,
						icon: "none"
					});
				} else if (this.baseinfo.lng == '') {
					uni.showToast({
						title: '请选择基地地址',
						duration: 2000,
						icon: "none"
					});
				} else if (!this.baseobj.length && !this.base_id.length) {
					uni.showToast({
						title: '请绑定基地设备',
						duration: 2000,
						icon: "none"
					});
				} else {
					if (!/^1[23456789]\d{9}$/.test(this.baseinfo.base_phone)) {
						uni.showToast({
							title: '请填写正确的手机号',
							duration: 2000,
							icon: "none"
						});
					} else {
						if (!this.baseobjtf) {
							var arr = []
							for (var i = 0; i < this.baseobj.length; i++) {
								arr.push(this.baseobj[i].arr)
							}
							this.baseinfo.base_equip = arr.join("#")
						}
						console.log(this.baseinfo)
						this.addbase()
						// localStorage.removeItem("typeid")
						// localStorage.removeItem("location")
						uni.removeStorage({
							key:'typeid'
						})
						
						uni.removeStorage({
							key:'location'
						})
					}
				}
			},
			selectaddress(lat, lng) { //获取分布位置
				uni.request({
					type: "GET",
					url: "https://restapi.amap.com/v3/geocode/regeo?output=JSON&location=" + lng + "," + lat +
						"&key=27273b81090f78759e4057f94474516f&radius=1000&extensions=all",
					dataType: "json",
					complete: ress => {
						console.log(ress)
						this.city = ress.data.regeocode.formatted_address
					}
				});
			},
			onok(ev) {
				uni.uploadFile({
					url: 'http://dev.hnyfwlw.com/api/api_gateway?method=base.bases.base_photo', //仅为示例，非真实的接口地址
					filePath: ev.path,
					name: 'img_file',
					formData: {
						'user': 'test'
					},
					success: (uploadFileRes) => {
						this.baseinfo.base_img = JSON.parse(uploadFileRes.data).data.src
						// this.$forceUpdate() //强制刷新视图
					}
				});
				this.imgs = ''
			},
			oncancle() {
				this.imgs = ''
			}
		},
		onLoad(option) {
			console.log(JSON.parse(option.id),'on load ')
			this.baseinfo = JSON.parse(option.id)
			this.baseinfo.base_id = JSON.parse(option.id).id
			this.baseinfo.ret = "modify"
			delete this.baseinfo.id
			this.selectaddress(this.baseinfo.lat, this.baseinfo.lng)
			this.ybase()
		},
		onShow() {
			console.warn('on show modification -------------')
			uni.getStorage({
				key: "location",
				success: (res) => {
					console.log(res.data,'get storage location')
					this.selectaddress(res.data[1], res.data[0])
					this.baseinfo.lat = res.data[1]
					this.baseinfo.lng = res.data[0]
				}
			})
			uni.getStorage({
				key: 'typeid',
				success: (res) => {
					this.baseobjtf = false
					console.log(JSON.parse(res.data),'get storage type id')
					var arr = []
					for (var key in JSON.parse(res.data)) {
						console.log(key)
						for (var i = 0; i < JSON.parse(res.data)[key].length; i++) {
							var obj = {
								name: key,
								arr: JSON.parse(res.data)[key][i]
							}
							arr.push(obj)
						}
					}
					console.log(arr)
					this.baseobj = arr
				}
			});
		}
	}
</script>

<style lang="scss">
	.addimg {
		position: absolute;
		top: 108rpx;
		width: 100%;

		.addimg_add {
			position: relative;
			width: 90%;
			height: 276rpx;
			margin: 0 auto;
			background-color: #F7F8FA;
			text-align: center;
			line-height: 276rpx;
			color: #A7A8AA;

			.addimg_img {
				position: absolute;
				top: 0;
				width: 100%;
				left: 0;
				height: 276rpx;
			}
		}
	}

	.base_text {
		position: absolute;
		top: 390rpx;
		width: 100%;
		margin-bottom: 50rpx;

		.title {
			width: 90%;
			margin: 20rpx auto;
		}

		.base_text_item2 {
			width: 90%;
			margin: 10rpx auto 20rpx;
			padding: 16rpx 20rpx;
			background-color: #F7F8FA;
			display: flex;
			box-sizing: border-box;
			position: relative;
			// height: 200rpx;

			.icon {
				color: #5FBBA0;
				height: 42rpx;
			}

			span {
				margin: 0 20rpx 0 10rpx;
			}

			.textarea {
				font-size: 24rpx;
				text-align: right;
				// position: absolute;
				// right: 20rpx;
				width: 70%;
				// // height: 200rpx;
				// // overflow:hidden;
				// // text-overflow:ellipsis;
				// // white-space:nowrap;
			}

		}

		.base_text_item1 {
			display: flex;
			position: relative;
			width: 90%;
			height: 70rpx;
			margin: 10rpx auto 20rpx;
			padding: 16rpx 20rpx;
			background-color: #F7F8FA;
			box-sizing: border-box;

			.icon {
				color: #5FBBA0;
			}

			span {
				margin: 0 10rpx;
			}

			input {
				position: absolute;
				right: 20rpx;
				width: 70%;
				text-align: right;
				font-size: 24rpx;
				margin-top: 5rpx;
			}

			.iconright {
				position: absolute;
				right: 10rpx;
				top: 28rpx;
				color: #B5B6B8;
				font-size: 24rpx;
			}
		}
	}

	.base_id_box {
		width: 90%;
		margin: 20rpx auto 70rpx;
	}

	.base_id {
		width: 100%;

		.base_id_item {
			width: 95%;
			padding: 10rpx 30rpx;
			display: flex;
			justify-content: space-between;
			font-size: 28rpx;
			background-color: #F7F8FA;
			color: #616162;
			box-sizing: border-box;
			margin: 20rpx auto;
		}
	}

	.btn {
		width: 90%;
		position: fixed;
		bottom: 10rpx;
		right: 5%;
		text-align: center;
		height: 70rpx;
		line-height: 70rpx;
		background-color: #359773;
		font-size: 34rpx;
		border-radius: 35rpx;
		color: #FFFFFF;
	}
</style>