bigDataApp/pages/fourBase/addbase.vue

<template>
	<view>
		<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="请输入联系电话" @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="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>
</template>
<style lang="scss">
	
</style>
<script>
	export default {
		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)           纬度
					ret:"add",//必传(str)           区分
				},
				city:''
			}
		},
		methods: {
			//base.bases.base_list新增基地
			async addbase() { //获取分布位置
				const res = await this.$myRequest({
					url: '/api/api_gateway?method=base.bases.base_list',
					data: this.baseinfo
				})
			},
			clickLeft(){
				uni.navigateTo({
					url:"./index"
				})
			},
			binding(){
				uni.navigateTo({
					url:"./allocation"
				})
			},
			gainimg() { //添加图片
					uni.chooseImage({
						count: 1, //默认9
						sizeType: ['original', 'compressed'], //可以指定是原图还是压缩图，默认二者都有
						sourceType: ['album', 'camera'], //从相册选择
						success: (res) => {
							uni.uploadFile({
								url: 'http://182.92.193.64:8002/api/api_gateway?method=base.bases.base_photo', //仅为示例，非真实的接口地址
								filePath: res.tempFilePaths[0],
								name: 'img_file',
								formData: {
									'user': 'test'
								},
								success: (uploadFileRes) => {
									this.baseinfo.base_img = JSON.parse(uploadFileRes.data).data.src
									// this.$forceUpdate() //强制刷新视图
								}
							});
						}
					})
			},
			map(){
				uni.getLocation({
					type: 'wgs84',
					success: (res) => {
						console.log('当前位置的经度：' + res.longitude);
						console.log('当前位置的纬度：' + res.latitude);
						this.longitude = res.longitude
						this.latitude = res.latitude
						uni.chooseLocation({
						    success:(res)=>{
						        console.log('位置名称：' + res.name);//address 详细地址
						        this.city = res.name
						        this.baseinfo.lat = res.latitude
						        this.baseinfo.lng = res.longitude
						    }
						});
					}
				});
			},
			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
						})
					}
				}
			},
			yanzheng(){
				if(!/^1[23456789]\d{9}$/.test(this.baseinfo.base_phone)){
					uni.showToast({
					    title: '请填写正确的手机号', 
					    duration: 2000,
						icon:"none"
					});
				}
			}
		},
		onLoad() {
		},
		onShow(){
			// this.base_id=JSON.parse(localStorage.getItem("id"))
			if(localStorage.getItem("id")!=null){
				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 20rpx;
		}
		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: 0;
		right: 5%;
		text-align: center;
		height: 70rpx;
		line-height: 70rpx;
		background-color: #359773;
		font-size: 34rpx;
		border-radius: 35rpx;
		color: #FFFFFF;
	}
</style>