MP_XOIL_company_new/BagStation/pages/newRoutePlanning/components/addressSelector.vue

<template>

	<view :style="{top:(styles.top + styles.height + 10 )+'px'}" class="header">
		<view class="sele_car">
			<view @click="backFn()" class="flex ac">
				<uni-icons type="back" size="30"></uni-icons>
				<!-- <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 class="yuan" />
					<view class="flexone margin size">{{Route.start.title}}</view>
				</view>
				<view @click="chooseLocation('end')" class=" Padding addressInput flex ac flexone">
					<view style="background-color: #FF6700;" class="yuan" />
					<view class="flexone margin size colorb">{{Route.end.title||'请输入终点'}}</view>
				</view>
			</view>
		</view>
		<view v-if="isShow.conditions" class="filter">
			<view v-for="(item,index) in menuList" :key='index' class="filter_item">
				<view @click="seleFilter(item,index)"> {{ item.value?item.value.split('/')[0]:item.title}} </view>
				<view :style="{maxHeight:item.SublistOpen?'200rpx':'0rpx'}" class="conditions">
					<view
						:style="{color:item.value?item.value.split('/')[0] == items.lable?'#666666':'#bbbbbb':'#bbbbbb'}"
						@click="filterItemSele(index,indexs)" v-for="(items,indexs) in item.Sublist" :key='indexs'
						style="margin-bottom: 10rpx; font-size: 25rpx;">{{items.lable}}</view>
				</view>
			</view>
		</view>
	</view>

</template>

<script>
	import oilSiteApi from '@/api/oil-site.js'
	export default {
		props: {
			Route: {
				type: Object,
				default: () => {
					return {}
				}
			},
			polyline: {
				type: Array,
				default: () => []
			}
		},
		watch: {
			polyline: function(n, o) {
				if (n.length !== 0) {
					this.isShow.conditions = true
				} else {
					this.isShow.conditions = false
				}
			}
		},
		data() {
			return {
				styles: {},
				isShow: {
					conditions: false
				},
				header: null,
				menuList: [{
						title: '距离',
						value: '5KM/5',
						field: 'juLi',
						SublistOpen: false,
						Sublist: [{
							lable: '5KM',
							value: '5'
						}, {
							lable: '20KM',
							value: '20'
						}, {
							lable: '30KM',
							value: '30'
						}, {
							lable: '50KM',
							value: '50'
						}]
					},
					{
						title: '全类型',
						value: '全部/2',
						field: 'highSpeed',
						SublistOpen: false,
						Sublist: [{
								lable: '全部',
								value: '2'
							},
							{
								lable: '高速',
								value: '1'
							}, {
								lable: '非高速',
								value: '0'
							}

						]
					}
				]
			}
		},
		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));
				this.header = data
				console.log("节点离页面顶部的距离为" + data.top);
			}).exec();
		},
		created() {
			this.getConditionMenu();

		},
		methods: {
			getElement() {
				return this.styles.top + this.styles.height + 10 + this.header.height
			},
			filterItemSele(index, indexs) {
				this.menuList[index].value =
					`${this.menuList[index].Sublist[indexs].lable}/${this.menuList[index].Sublist[indexs].value}`;
				this.menuList[index].SublistOpen = false;
				console.log(this.datassFn(), '/-/-/');
				if (index == 2) {
					this.$emit('mapEventListeners', 'localScreen', this.datassFn())
				} else {
					this.$emit('mapEventListeners', 'apiScreen', this.datassFn())
				}
			},
			getConditionMenu() {
				oilSiteApi.getConditionMenu().then(res => {
					if (res.code !== 20000) return
					Object.keys(res.data).forEach((item, index) => {
						let data = {
							title: index == 0 ? '全渠道' : '油品',
							value: index == 0 ? '全渠道/' : '0#/0#',
							field: index == 0 ? 'siteChannel' : 'oilProductCode',
							SublistOpen: false,
							Sublist: []
						}
						res.data[item].forEach(items => {
							data.Sublist.push({
								lable: index == 0 ? items.name : items.id,
								value: items.id
							})
						})
						this.menuList.push(data)
					})
					this.menuList[2].Sublist.unshift({
						lable: '全渠道',
						value: ''
					});
					// [this.menuList[1],this.menuList[3]]=[this.menuList[3],this.menuList[1]]
					[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, '***')
				})
			},
			datassFn() {
				let data = {}
				this.menuList.forEach((item, index) => {
					data[item.field] = item.value ? item.value.split('/')[1] : ''
				})
				return data
			},
			seleFilter(e, w) {
				this.menuList.forEach((item, index) => {
					if (w == index) return
					item.SublistOpen = false
				})
				e.SublistOpen = !e.SublistOpen;
				this.$emit('closeFooterScroll')
			},
			chooseLocation(e) {
				uni.navigateTo({
					url: './chooseLocation?type=' +
						`${e}/${this.Route.start.latitude},${this.Route.start.longitude}`
				})
			},
			backFn() {
				uni.navigateBack()
			}
		}
	}
</script>

<style scoped>
	.conditions {
		position: absolute;
		background-color: #FFFFFF;
		width: 100%;
		max-height: 200rpx;
		top: 68rpx;
		display: flex;
		flex-direction: column;
		gap: 15rpx;
		/* padding: 21rpx 0; */
		border-bottom-left-radius: 10px;
		border-bottom-right-radius: 10px;
		overflow: auto;
		transition: max-height 0.3s, opacity 0.3s;
		opacity: 1;
	}

	.filter_item {
		flex: 1;
		background-color: #FFFFFF;
		border-radius: 10px;
		margin-top: 30rpx;
		padding: 24rpx 0;
		text-align: center;
		position: relative;
		/* 	border-bottom-left-radius: 10px;
		border-bottom-right-radius: 10px; */
	}

	.filter {
		font-size: 28rpx;
		width: 100%;
		display: flex;
		gap: 20rpx;
		color: #666666;
	}

	.colorb {
		color: #BBBBBB;
	}

	.Padding {
		padding: 0 28rpx;
	}

	.addressInput {
		background: #F0F0F0;
		border-radius: 10px;
	}

	.textoverflow {
		overflow: hidden;
		text-overflow: ellipsis;
	}

	.size {
		font-size: 28rpx;
		color: #666666;
	}

	.margin {
		margin: 0 28rpx;
	}

	.flexone {
		flex: 1;
	}

	.yuan {
		width: 20rpx;
		height: 20rpx;
		background: #2E8EF7;
		border-radius: 50%;
	}

	.sele_car_right {
		flex-direction: column;
		flex: 1;
		/* padding: 0 27.2rpx; */
		padding-left: 27.2rpx;
	}

	.flex {
		display: flex;
	}

	.jc {
		justify-content: center;
	}

	.ac {
		align-items: center;
	}

	.sele_car {
		height: 194rpx;
		background: #FFFFFF;
		border-radius: 10px;
		padding: 18rpx 32rpx;
		display: flex;
	}

	.header {
		width: 100vw;
		position: absolute;
		z-index: 999999;
		padding: 0 44rpx;
	}
</style>