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="fangzi" 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="ren1" 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="lianxidianhua" 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="miaoshu" custom-prefix="custom-icon" class="icon"></u-icon>
					<span>基地描述</span>
					<textarea v-model="baseinfo.base_describe " maxlength="80" auto-height class="textarea" placeholder="请输入基地描述(不能大于80字)" />
					</view>
			<view class="base_text_item1" @click="map">
				<u-icon name="Frame1" 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">
				<view class="base_id" v-for="(item,key,index) in base_id" :key="index">
					<view class="base_id_item" v-for="(items,indexs) in item" :key="indexs">
						<span>{{key}}</span>
						<span>{{items}}</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:{},
				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:""
			}
		},
		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
				})
				console.log(res)
			},
			clickLeft(){
				uni.navigateTo({
					url:"./index"
				})
			},
			binding(){
				uni.navigateTo({
					url:"./allocation?type="+this.baseinfo.base_equip
				})
			},
			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.baseinfo.base_id==''){
					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{
						console.log(this.baseinfo)
						this.addbase()
						localStorage.removeItem("id")
						uni.navigateBack({
							delta:1
						})
					}
				}
			},
			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://182.92.193.64:8002/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))
			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)
		},
		onShow(){
			uni.getStorage({
			    key: 'id',
			    success: (res)=> {
					this.base_id = JSON.parse(res.data)
					var arr = []
					for(var key in this.base_id){
						arr.push(this.base_id[key].join("#"))
					}
					this.baseinfo.base_equip = arr.join("#")
			    }
			});
		}
	}
</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%;
	.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;
		}
		.textarea{
			font-size: 24rpx;
			text-align: right;
			position: absolute;
			right: 20rpx;
			width: 70%;
			height: 200rpx;
		}
		
	}
	.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>