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="userinfos" 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>
				<input type="text" value="" placeholder="请输入基地名称" />
			</view>
			<view class="base_text_item1">
				<u-icon name="ren1" custom-prefix="custom-icon" class="icon"></u-icon>
				<span>负责人</span>
				<input type="text" value="" placeholder="请输入基地负责人" />
			</view>
			<view class="base_text_item1">
				<u-icon name="lianxidianhua" custom-prefix="custom-icon" class="icon"></u-icon>
				<span>联系电话</span>
				<input type="text" value="" placeholder="请输入联系电话" />
			</view>
			<view class="base_text_item1">
				<u-icon name="mianji" custom-prefix="custom-icon" class="icon"></u-icon>
				<span>面积(亩)</span>
				<input type="number" value="" placeholder="请输入基地面积" />
			</view>
			<view class="base_text_item2">
				<u-icon name="miaoshu" custom-prefix="custom-icon" class="icon"></u-icon>
				<span>基地描述</span>
				<textarea value="" placeholder="" auto-height class="textarea" placeholder="请输入基地描述" />
				</view>
			<view class="base_text_item1" @click="map">
				<u-icon name="Frame1" custom-prefix="custom-icon" class="icon"></u-icon>
				<span>基地定位</span>
				<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>
				<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">
				确 定
			</view>
		</view>
	</view>
</template>
<style lang="scss">
	
</style>
<script>
	export default {
		data() {
			return {
				base_id:{},
				userinfos:''
			}
		},
		methods: {
			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.userinfos = JSON.parse(uploadFileRes.data).data.src
									console.log(this.userinfos)
									this.$forceUpdate() //强制刷新视图
								}
							});
						}
					})
			},
			map(){
				// uni.chooseLocation({
				//     success: function (res) {
				//         console.log('位置名称：' + res.name);
				//         console.log('详细地址：' + res.address);
				//         console.log('纬度：' + res.latitude);
				//         console.log('经度：' + res.longitude);
				//     }
				// });
				uni.navigateTo({
					url:"./fourbasemap"
				})
			}
		},
		onLoad(option) {
			console.log(option=={})
			if(JSON.stringify(option) != "{}"){
				this.base_id=JSON.parse(option.id)
			}
		}
	}
</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;
		.icon{
			color: #5FBBA0;
			height: 42rpx;
		}
		span{
			margin: 0 20rpx;
		}
		.textarea{
			font-size: 24rpx;
			margin-left: 20rpx;
			width: 426rpx;
			text-align: right;
		}
		
	}
	.base_text_item1{
		display: flex;
		position: relative;
		width: 90%;
		height: 70rpx;
		margin: 10rpx auto 20rpx;
		padding: 16rpx 20rpx;
		background-color: #F7F8FA;
		.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%;
		display: flex;
		justify-content: space-between;
		flex-wrap: wrap;
		.base_id_item{
			width: 48%;
			padding: 10rpx 30rpx;
			display: flex;
			justify-content: space-between;
			font-size: 28rpx;
			background-color: #F7F8FA;
			color: #B8B8BA;
			margin-bottom: 10rpx;
		}
	}
	.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>