bigdata_WX/pages/fourBase/addbase.vue

<template>
	<view>
		<view class="status_bar"></view>
		<view class="" style="position: relative;top: 64px;">
			<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>
		<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)           纬度
					ret:"add",//必传(str)           区分
				},
				city:'',
				imgs:"",
			}
		},
		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) => {
							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()
						uni.removeStorage({
						    key: 'id',
						    success: function (res) {
						       uni.navigateTo({
						       	url:"./index"
						       })
						    }
						});
					}
				}
			},
			yanzheng(){
				if(!/^1[23456789]\d{9}$/.test(this.baseinfo.base_phone)){
					uni.showToast({
					    title: '请填写正确的手机号', 
					    duration: 2000,
						icon:"none"
					});
				}
			},
			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() {
		},
		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: 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>