shanxian-work-app/pages/mine/add_park.vue

<template>
	<view>
		<view class="addPop">
			<view style="text-align:center;">区域信息</view>
			<view class="flex select">
				<text>所属大区</text>
				<picker @change="bindPickerChange" :value="index" :range="arr">
					<!-- <text>{{arr[index]}}</text> -->
					<input type="text" :value="arr[index]" disabled="true"/>
				</picker>
			</view>
			<view class="flex">
				<text>停车区域名称</text>
				<input placeholder="请输入停车区名称" placeholder-class="place" @input="bindKeyInput" @blur="bindKeyInput" :value="parkName"></input>
			</view>
			<view class="flex select">
				<text>区域类型</text>
				<picker @change="bindPickerChange1" :value="listIndex" :range="typelist1">
					<!-- <text>{{typelist1[listIndex]}}</text> -->
					<input type="text" :value="typelist1[listIndex]" disabled="true"/>
				</picker>
			</view>
			<view class="flex">
				<text>停车上限</text>
				<input placeholder-class="place" type="number" @input="numInput" @blur="numInput" :value="parkNum"></input>
			</view>
			<view class="handel flexA">
				<view @click="draw">绘制围栏</view>
				<view @click="cancel">取消</view>
			</view>
		</view>
	</view>
</template>

<script>
	const app = getApp();
	export default {
		data() {
			return {
				showType: false,
				showArea: false,
				parkNum: '',
				parkName: '',
				array: [],
				arr: [],
				index: 0,
				typeList: [{ //区域类型选项
					type: 1,
					name: '禁停区'
				}, {
					type: 2,
					name: '停车区'
				}],
				typelist1: ['禁停区', '停车区'],
				areaName: '',
				areaId: '',
				listIndex: 0,
				typeName:''
			}
		},
		methods: {
			//取消
			cancel: function() {
				wx.navigateBack()
			},
			numInput: function(e) {
				this.parkNum = e.detail.value
			},
			draw: function() {
				let that = this;
				if (!that.areaName) {
					uni.showToast({
						title: '请选择所属大区',
						icon: 'none'
					})
					console.log(that.areaName)
				} else if (!that.parkName) {
					uni.showToast({
						title: '停车区域名称不能为空',
						icon: 'none'
					})
					console.log(that.parkName)
				} else if (!that.typeName) {
					uni.showToast({
						title: '请选择区域类型',
						icon: 'none'
					})
					console.log(that.typeName)
				}
				//  else if (that.parkNum == '') {
				// 	uni.showToast({
				// 		title: '请输入停车上限',
				// 		icon: 'none'
				// 	})
				// 	console.log(that.parkNum)
				// } 
				else {
					console.log('成立')
					let data = {
						name: this.parkName
					}
					app.request('parking/UniqueParkingName', data, 'POST').then(res => {
						if (res.statusCode == 200) {
							if (res.data.status == 0) {
								uni.showToast({
									title: '停车区域名称已存在',
									icon: 'none'
								})
							} else {
								var pages = getCurrentPages();
								var prevPage = pages[pages.length - 2]; //上一个页面
								console.log(prevPage)
								prevPage.$vm.areaId=this.areaId;
								prevPage.$vm.parkName=this.parkName;
								prevPage.$vm.parkNum=this.parkNum;
								prevPage.$vm.type=this.listIndex+1;  
								prevPage.$vm.mapclick=true;
								uni.navigateBack() 
							}
						}
					})
					
				}
			},
			// change: function(e) {
			// 	uni.setStorageSync('curVal', this.option1[e.detail.value].value)
			// 	uni.setStorageSync('curId', this.option1[e.detail.value].areaID)
			// 	this.areaID = this.option1[e.detail].areaID;
			// 	this.park()
			// },
			//停车（禁停）区名称
			bindKeyInput: function(e) {
				console.log(e)
				this.parkName = e.detail.value;
			},
			bindPickerChange: function(e) {
				console.log(e)
				let nowArea = this.array[e.detail.value].text
				let areaId = this.array[e.detail.value].areaID
				this.areaName = nowArea;
				this.areaId = areaId;
				this.index = e.detail.value;
				console.log(this.areaName,this.areaId,this.index)
			},
			bindPickerChange1: function(e) {
				console.log(e)
				this.typeName = this.typeList[e.detail.value].name;
				this.type = this.typeList[e.detail.value].type;
				this.listIndex = e.detail.value;
				console.log(this.typeName)
				console.log(this.type)
			},
		},
		onLoad(options) {
			let that = this;
			that.array = uni.getStorageSync('allArea');
			console.log(that.array)
			var options = that.array;
			var arr = [];
			for (var i = 0; i < options.length; i++) {
				arr.push(options[i].text)
			}
			that.arr = arr;
			let curVal = wx.getStorageSync('curVal');
			if (curVal) {
				that.value1 = curVal;
			}
			let areaID = wx.getStorageSync('curId')
			if (areaID) {
				that.areaID = areaID;
			} else {
				let id = options[0].areaID
				that.areaID = id;
			}
			console.log(this.typeList)
			this.areaName = options[0].text;
			this.typeName = this.typeList[0].name;
			this.areaId = options[0].areaID;
		}
	}
</script>

<style>
	page {
		height: 100%;
		background: #A9A9A9;
	}

	.addPop {
		position: absolute;
		top: 50%;
		left: 50%;
		transform: translate(-50%, -50%);
		width: 80%;
		height: 600upx;
		background: #fff;
		border-radius: 10upx;
		z-index: 2222;
		padding: 30upx 20upx;
	}

	.addPop>view {
		margin-bottom: 15upx;
		font-size: 28upx;
		height: 70upx;
	}

	.addPop>view input {
		border: 1upx solid #dcdfe6;
		border-radius: 10upx;
		margin-left: 20upx;
		height: 68upx;
		width: 362upx;
		padding-left: 10upx;
	}

	.place {
		font-size: 26upx;
		color: #ddd;
	}

	.addPop>view text {
		display: inline-block;
		width: 180upx;
		text-align: right;
	}

	.select image {
		width: 40upx;
		height: 30upx;
	}

	.select .picker {
		border: 1upx solid #dcdfe6;
		border-radius: 10upx;
		margin-left: 20upx;
		height: 70upx;
		width: 374upx;
	}

	.select .picker input {
		width: 83%;
		border: none;
		margin-left: 0;
	}

	.handel {
		margin-top: 40upx;
		display: flex;
		align-items: center;
		justify-content: space-around;
	}

	.handel view {
		text-align: center;
		background: #18d5b9;
		color: #fff;
		width: 200upx;
		height: 60upx;
		line-height: 60upx;
		border-radius: 43upx;
		font-size: 28upx;
	}

	.flex {
		display: flex;
		align-items: center;
	}
</style>