更新

BagStation/pages/newRoutePlanning/components/addressSelector.vue

@@ -7,13 +7,25 @@
 				<!-- <uni-icond  type="back" size="30"></uni-icond> -->
 			</view>
 			<view class=" flex sele_car_right">
-				<view @click="chooseLocation('start')" class=" Padding flex ac flexone">
+
+				<view @click="chooseLocation('start')" class=" Padding flex ac flexone height79">
 					<view class="yuan" />
 					<view class="flexone margin size">{{Route.start.title}}</view>
 				</view>
-				<view @click="chooseLocation('end')" class=" Padding addressInput flex ac flexone">
+
+				<view v-for="item,index in midwayPointList" :key="index"
+					@click="chooseLocation('midwayPoint',index)" class=" Padding addressInput flex ac flexone height79">
+					<view style="background-color: #32CD32;" class="yuan" />
+					<view class="flexone margin size">{{item.title || '请输入途经点'}}</view>
+					<image @click.stop="removeLocation(index)" class="remove" src="../../../static/img/remove.png"></image>
+				</view>
+
+				<view @click="chooseLocation('end')" class=" Padding addressInput flex ac flexone height79">
 					<view style="background-color: #FF6700;" class="yuan" />
 					<view class="flexone margin size colorb">{{Route.end.title||'请输入终点'}}</view>
+					<image v-if="midwayPointList.length <= 1" @click.stop="additionLocation"
+						:style="{'top':midwayPointList.length?'50%':'0'}" class="addition"
+						src="../../../static/img/addition.png"></image>
 				</view>
 			</view>
 		</view>
@@ -62,6 +74,7 @@
 				isShow: {
 					conditions: false
 				},
+				midwayPointList: [],
 				header: null,
 				menuList: [{
 						title: '距离',
@@ -106,7 +119,6 @@
 		},
 		mounted() {
 			this.styles = uni.getMenuButtonBoundingClientRect();
-			console.log(this.styles);
 			const query = uni.createSelectorQuery().in(this);
 			query.select('.header').boundingClientRect(data => {
 				console.log("得到布局位置信息" + JSON.stringify(data));
@@ -116,9 +128,21 @@
 		},
 		created() {
 			this.getConditionMenu();
-
 		},
 		methods: {
+			removeLocation(index) {
+
+				this.midwayPointList.splice(index, 1)
+				this.$parent.passiveRedraw(this.midwayPointList)
+				
+			},
+			additionLocation() {
+				this.midwayPointList.push({
+					longitude: '',
+					latitude: '',
+					title: ''
+				})
+			},
 			getElement() {
 				return this.styles.top + this.styles.height + 10 + this.header.height
 			},
@@ -160,7 +184,7 @@
 					[this.menuList[0], this.menuList[1], this.menuList[2], this.menuList[3]] = [this.menuList[0],
 						this.menuList[3], this.menuList[1], this.menuList[2]
 					];
-					console.log(this.menuList, '***')
+					// console.log(this.menuList, '***')
 				})
 			},
 			datassFn() {
@@ -178,10 +202,10 @@
 				e.SublistOpen = !e.SublistOpen;
 				this.$emit('closeFooterScroll')
 			},
-			chooseLocation(e) {
+			chooseLocation(e, index) {
 				uni.navigateTo({
 					url: './chooseLocation?type=' +
-						`${e}/${this.Route.start.latitude},${this.Route.start.longitude}`
+						`${e}/${this.Route.start.latitude},${this.Route.start.longitude}/${index}/${JSON.stringify(this.midwayPointList)}`
 				})
 			},
 			backFn() {
@@ -237,7 +261,11 @@
 		padding: 0 28rpx;
 	}
 
+
+
 	.addressInput {
+		margin: 7rpx 0;
+		position: relative;
 		background: #F0F0F0;
 		border-radius: 10px;
 	}
@@ -257,7 +285,22 @@
 	}
 
 	.flexone {
-		flex: 1;
+		position: relative;
+		/* flex: 1; */
+	}
+
+	.addition,
+	.remove {
+		position: absolute;
+		top: 50%;
+		transform: translateY(-50%);
+		right: -52rpx;
+		width: 42rpx;
+		height: 42rpx;
+	}
+
+	.height79 {
+		height: 79rpx;
 	}
 
 	.yuan {
@@ -268,10 +311,11 @@
 	}
 
 	.sele_car_right {
+		/* 		position: relative; */
 		flex-direction: column;
-		flex: 1;
-		/* padding: 0 27.2rpx; */
 		padding-left: 27.2rpx;
+		width: 100%;
+
 	}
 
 	.flex {
@@ -287,10 +331,10 @@
 	}
 
 	.sele_car {
-		height: 194rpx;
+		/* height: 194rpx; */
 		background: #FFFFFF;
 		border-radius: 10px;
-		padding: 18rpx 32rpx;
+		padding: 18rpx 37px 22rpx 32rpx;
 		display: flex;
 	}