bigDataApp/pages/fourBase/addbase.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 class="sim_info_loding" v-if="loding">
						<image src="../../static/images/cb/6286299.gif" mode="" class="img"></image>
					</view>
				</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="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="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="请输入联系电话" @blur="yanzheng" />
				</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="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)           纬度
					ret:"add",//必传(str)           区分
				},
				city:'',
				imgs:"",
				baseobjtf:true,
				loding:false
			}
		},
		methods: {
			//base.bases.base_list新增基地
			async addbase() { 
				const res = await this.$myRequest({
					url: '/api/api_gateway?method=base.bases.base_list',
					data: this.baseinfo,
					ret:"add"
				})
				uni.showToast({
				    title: '填写基地成功', 
				    duration: 2000,
					icon:"none"
				});
				uni.navigateBack({
					delta:1
				})
			},
			clickLeft(){
				uni.navigateTo({
					url:"./index"
				})
				// localStorage.removeItem("typeid")
				// localStorage.removeItem("location")
				uni.removeStorage({
					key:'typeid'
				})
				
				uni.removeStorage({
					key:'location'
				})
			},
			binding(){
				var str = ''
				uni.navigateTo({
					url:"./allocation?base_id="+str
				})
			},
			gainimg() { //添加图片
					uni.chooseImage({
						count: 1, //默认9
						sizeType: ['original', 'compressed'], //可以指定是原图还是压缩图，默认二者都有
						sourceType: ['album', 'camera'], //从相册选择
						success: (res) => {
							this.imgs = res.tempFilePaths[0]
							this.loding = true
						}
					})
			},
			map(){
				uni.navigateTo({
					url:"city"
				})
			},
			tijiao(){
				console.log(this.baseinfo,'submit base four')
				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{
						console.log(this.baseinfo)
						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'
						})
					}
				}
			},
			yanzheng(){
				if(!/^1[23456789]\d{9}$/.test(this.baseinfo.base_phone)){
					uni.showToast({
					    title: '请填写正确的手机号', 
					    duration: 2000,
						icon:"none"
					});
				}
			},
			onok(ev){
				uni.uploadFile({
					url: 'http://114.115.147.140: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.loding = false
					}
				});
				this.imgs = ''
			},
			oncancle(){
				this.imgs = ''
			},
			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
					}  
				});
			},
		},
		onLoad() {
		},
		onShow(){
			uni.getStorage({
				key:"location",
				success:(res)=> {
					console.log(res.data)
					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))
					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,'get storage typeid')
					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;
		.sim_info_loding{
			position: absolute;
			top: 0;
			left: 50%;
			margin-left: -25%;
			image{
				width: 300rpx;
				height: 300rpx;
			}
		}
		.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;
		}
		
	}
	.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: 20rpx;
			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>