sisMobilePhone/components/addressSelect/AddressSelect.vue

<template>
	<view>
		<view class="fixed">
			<cu-custom bgColor="bg-gradual-earkblue" :isBack="true">
				<block slot="backText">
					<view style="height: 80rpx;line-height: 80rpx;">返回</view>
				</block>
				<block slot="content">
					<text :class="'cuIcon-locationfill'"></text>
				</block>
				<block slot="content">{{address}}</block>
				<block slot="content">
					<image style="width: 15px;height: 15px;margin-left: 4px;" src="../../static/picture/SanJiao.png">
				</block>
			</cu-custom>
		</view>

		<view class="VerticalBox">
		
			<scroll-view class="VerticalNav nav " scroll-y scroll-with-animation :scroll-top="verticalNavTop"   style="height:100vh;">
				<view class="cu-item" :class="index==tabCur?'text-green cur':''" v-for="(item,index) in adresslist" :key="index" @tap="TabSelect"
				 :data-id="index" :style="{'height':leftHeight}">
				 
					{{item.name}}
				</view>
				
			</scroll-view>
                <!-- 右侧菜单 -->
				
			<scroll-view class="VerticalMain" scroll-y scroll-with-animation style="height:100vh;padding-top:100upx"
			
			 :scroll-into-view="'main-'+mainCur" @scroll="VerticalMain">
			 
				<view class="padding-top padding-lr" v-for="(item,index) in adresslist" :key="index" :id="'main-'+index">
					<div v-if="(item.name=='吉林')">
					<view class="cu-bar bg-white">
						<view class="action" >
							<text class="cuIcon-title text-green" style="margin-left:-10px"></text> {{item.name}}</view>
					</view>
					<view class="cu-list menu-avatar " >
					          <!--item-->
						<view class="cu-item" :style="{height:item.height+'upx'}" style="padding-bottom: 560px;">
							<view class="row">
								<view class="col-8" :style="{'width':nameWidth}" v-for="(val,key) in (item.item)" :key="key" @tap="pushWindPowerStationNameToSessionStorage(val.title,val.windPowerStationId);" >	
								<a style="margin-left: 20px;">{{val.address}}</a>
								<a style=" float: right ">{{val.title}}</a>
								</view>
							</view>
					          </view>
						</view>
						</div>
						<div v-if="(item.name!='吉林')">
							<view class="cu-bar bg-white">
								<view class="action" >
									<text class="cuIcon-title text-green" style="margin-left:-10px"></text> {{item.name}}</view>
							</view>
							<view class="cu-list menu-avatar " >
							          <!--item-->
								<view class="cu-item" :style="{height:item.height+'upx'}" >
									<view class="row">
										<view class="col-8" :style="{'width':nameWidth}"  v-for="(val,key) in (item.item)" :key="key" @tap="pushWindPowerStationNameToSessionStorage(val.title,val.windPowerStationId);" >	
										<a style="margin-left: 20px;">{{val.address}}</a>
										<a style=" float: right ">{{val.title}}</a></br>
										</view>
									</view>
							          </view>
								</view>
						</div>

				</view>
			</scroll-view>
			
			
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				adresslist: [],
				tabCur: 0,
				mainCur: 0,
				adressObject:[],
				heBeiList:[],
				verticalNavTop: 0,
				load: true,
				address:'',
				windpowerstationIds:[],
				province:[],
				provinceAdressList:[],
				windpowerstationAdressList:[],
				provinceFlag:false,
				windowWidth:"",
				windowHeight:"",
				leftHeight:'',
				nameWidth:'',
			};
		},
		created:function(){
			this.windowWidth=uni.getSystemInfoSync().windowWidth;
			this.windowHeight=uni.getSystemInfoSync().windowHeight;
			if(this.windowWidth>=768){
				this.leftHeight="100px";
				this.nameWidth="500px"
			}else{
				this.leftHeight="50px";
				this.nameWidth="253px";
			}
		},
		onLoad(option) {
			this.windpowerstationIds=JSON.parse(uni.getStorageSync('windpowerstationNames'));
			console.log(this.windpowerstationIds);
			this.address = option.option;
			uni.showLoading({
				title: '加载中...',
				mask: true,
			});
			
			this.selectWindPowerStation();
			// let heBeiList = [
			// 	{
			// 		id:2,
			// 		name:'河北',
			// 		item:[
			// 			{id:1,title:'崇礼',address:"河北省张家口崇礼市四台嘴乡"},
			// 			{id:2,title:'康保',address:"河北省张家口市照阳河镇郝家营村"},
			// 			{id:3,title:'雁门关',address:"山西省忻州市代县雁门关乡"}
			// 		]
			// 	}
			// ];
			// this.heBeiList = heBeiList;
			// this.heBeiListCur = heBeiList[0];
			// this.mainHeBeiList = this.heBeiList[this.tabCur];
			
			
		},
		onReady() {
			uni.hideLoading()
		},
		methods: {
			TabSelect(e) {
				this.tabCur = e.currentTarget.dataset.id;
				//this.adressObject = this.adresslist[this.tabCur]
				this.mainCur = e.currentTarget.dataset.id;
			    this.verticalNavTop = (e.currentTarget.dataset.id + 1) * 50
				//this.verticalNavTop = 700;
				// this.mainHeBeiList=this.heBeiList[this.tabCur]
				
				
				// this.mainCur = e.currentTarget.dataset.id;
				// this.verticalNavTop = (e.currentTarget.dataset.id - 1) * 50
			},
			pushWindPowerStationNameToSessionStorage(windpowerstationName,windPowerStationId){
				uni.setStorageSync('windpowerstationName',windpowerstationName);
				uni.setStorageSync('windPowerStationId',windPowerStationId);
				this.common.goback('/pages/index/Index');
			},
			getWindPowerStationNamesToSessionStorage() {
				uni.getStorageSync('windpowerstationNames');
				console.log(uni.getStorageSync('windpowerstationNames'));
				return uni.getStorageSync('windpowerstationNames');
			},
			VerticalMain(e) {
				// #ifdef MP-ALIPAY
				   return false  //支付宝小程序暂时不支持双向联动 
				// #endif
				let that = this;
				let tabHeight = 0;
				if (this.load) {
					for (let i = 0; i < this.adresslist.length; i++) {
						let view = uni.createSelectorQuery().select("#main-" + this.adresslist[i].id);
						view.fields({
							size: true
						}, data => {
							this.adresslist[i].top = tabHeight;
							tabHeight = tabHeight + data.height;
							this.adresslist[i].bottom = tabHeight;
						}).exec();
					}
					this.load = false
				}
				let scrollTop = e.detail.scrollTop + 10;
				for (let i = 0; i < this.adresslist.length; i++) {
					if (scrollTop > this.adresslist[i].top && scrollTop < this.adresslist[i].bottom) {
						this.verticalNavTop = (this.adresslist[i].id - 1) * 50
						this.tabCur = this.adresslist[i].id
						console.log(scrollTop)
						return false
					}
				}
			},
			selectWindPowerStation:function(){
				let adresslist = [
					{
						id:0,
						name:'宁夏'	,
						height:455,
						item:[
							{id:1,title:'牛首山',address:"宁夏省吴忠市青铜峡市",windPowerStationId:"NSS_FDC"},
							{id:2,title:'香山',address:"宁夏省中卫市沙坡头区",windPowerStationId:"XS_FDC"},
							{id:3,title:'石板泉',address:"宁夏省吴忠市利通区",windPowerStationId:"SBQ_FDC"},
							{id:4,title:'青山',address:"宁夏省吴忠市盐池县",windPowerStationId:"QS_FDC"},
							{id:5,title:'麻黄山',address:"宁夏省吴忠市盐池县",windPowerStationId:"MHS_FDC"}
						]
				   },
				   {
				   	id:1,
				    name:'河北',
				   	height:300,
				   	 item:[
				   	{id:1,title:'崇礼',address:"河北省崇礼市四台嘴乡",windPowerStationId:"CL_FDC"},
				   	{id:2,title:'康保',address:"河北省照阳河镇郝家营村",windPowerStationId:"KB_FDC"},
				   	{id:3,title:'雁门关',address:"山西省忻州市代县",windPowerStationId:"YMG_FDC"}
				   ]
				   },
				 {
						id:2,
						name:'内蒙',
						height:200,
						item:[
							{id:1,title:'天源',address:"内蒙古省突泉县太平乡",windPowerStationId:"TY_FDC"},
							{id:2,title:'熬伦',address:"内蒙古省通辽市库伦旗",windPowerStationId:"AL_FDC"},
						]
					},
					{
					id:3,
					name:'辽宁',
					height:600,
					item:[
					{id:1,title:'调兵山',address:"辽宁省铁岭调兵山市",windPowerStationId:"DBS_FDC"},
					{id:2,title:'北镇',address:"辽宁省北镇市广宁乡",windPowerStationId:"BZ_FDC"},
					{id:3,title:'兴城',address:"辽宁省葫芦岛兴城市",windPowerStationId:"XC_FDC"},
					{id:4,title:'芳山',address:"辽宁省锦州市芳山镇",windPowerStationId:"FS_FDC"},
					{id:5,title:'凌海',address:"辽宁省锦州市青松村",windPowerStationId:"LH_FDC"},
					{id:6,title:'西八千',address:"辽宁省西八千乡南圈河村",windPowerStationId:"XBQ_FDC"},
					{id:7,title:'台子山',address:"辽宁省铁岭市官台工业园区",windPowerStationId:"TZS_FDC"}
					]
					},
				    {
				      id:4,
						name:'吉林',
						height:1350,
						item:[
							{id:1,title:'永茂',address:"吉林省洮南市永茂乡",windPowerStationId:"YM_FDC"},
							{id:2,title:'万发',address:"吉林省大安市红岗子乡",windPowerStationId:"WF_FDC"}
						]
					},
					
				
				];
				// for (let i = 0; i < 26; i++) {
				// 	list[i] = {};
				// 	list[i].name = String.fromCharCode(65 + i);
				// 	list[i].id = i;
				// }
				//判断省份
				for(let i=0;i<adresslist.length;i++){
					for(let j=0;j<adresslist[i].item.length;j++){
						for(let k=0;k<this.windpowerstationIds.length;k++){
							if(adresslist[i].item[j].windPowerStationId==this.windpowerstationIds[k]){
								if(this.province.length==0){
									this.province.push(adresslist[i].name);
								}else{
									this.provinceFlag=false;
									for(let l=0;l<this.province.length;l++){
										if(this.province[l]==adresslist[i].name){
											this.provinceFlag=true;										
										}									
									}
									if(this.provinceFlag==false){
										this.province.push(adresslist[i].name);
									}	
								}
								
							}
						}
						
					}
				}
				for(let i1=0;i1<this.province.length;i1++){
					for(let j1=0;j1<adresslist.length;j1++){
						if(this.province[i1]==adresslist[j1].name){
							this.provinceAdressList.push(adresslist[j1]);	
																					
						}
					}
				}
				
				//windpowerstationAdressList=this.provinceAdressList;
				// for(let i3=0;i3<this.provinceAdressList.length;i3++){
				// 	this.$set(this.windpowerstationAdressList,i3,this.provinceAdressList[i3]);
				// }
				this.windpowerstationAdressList=JSON.parse(JSON.stringify(this.provinceAdressList));
				
				
				//判断风电场
				for(let i2=0;i2<this.provinceAdressList.length;i2++){
					this.windpowerstationAdressList[i2].item=[];
					console.log(this.provinceAdressList);
					for(let j2=0;j2<this.provinceAdressList[i2].item.length;j2++){
						for(let k2=0;k2<this.windpowerstationIds.length;k2++){
							if(this.windpowerstationIds[k2]==this.provinceAdressList[i2].item[j2].windPowerStationId){
								this.windpowerstationAdressList[i2].item.push(this.provinceAdressList[i2].item[j2]);
							}
						}
					}
				}
				//调整高度
				for(let i3=0;i3<this.windpowerstationAdressList.length;i3++){
					this.windpowerstationAdressList[i3].height=90*this.windpowerstationAdressList[i3].item.length;
				}
				
				
				this.adresslist = this.windpowerstationAdressList;
				this.listCur = adresslist[0];
				this.adressObject = this.adresslist[this.tabCur];
			}
		},
	}
</script>

<style>
	.fixed {
		position: fixed;
		z-index: 99;
	}

	.VerticalNav.nav {
		width: 200upx;
		padding-top: 150upx;
		background-color: white;
		/* background-color: #64A0D6; */
		white-space: initial;
	}

	.VerticalNav.nav .cu-item {
		width: 100%;
		text-align: center;
		background-color: #fff;
		/* background-color: #64A0D6; */
		margin: 0;
		border: none;
		height: 50px;
		position: relative;
	}

	.VerticalNav.nav .cu-item.cur {
		background-color: #f1f1f1;
	    /* background-color: #64A0D6; */
	}

	.VerticalNav.nav .cu-item.cur::after {
		content: "";
		width: 8upx;
		height: 30upx;
		border-radius: 10upx 0 0 10upx;
		position: absolute;
		background-color: currentColor;
		/* background-color: #64A0D6; */
		top: 0;
		right: 0upx;
		bottom: 0;
		margin: auto;
	}

	.VerticalBox {
		display: flex;
		margin-top: 25px;
	}

	.VerticalMain {
		background-color: #f1f1f1;
/* 	background-color: #64A0D6;	 */
		flex: 1;
	}
	.col-8{
/* 		margin-right: 10upx;
		display: flex;
		flex-direction: row;
	    justify-content: space-between; */
		width: 253px;
		padding-top: 30upx;
		padding-bottom: 10px;
		border-bottom: 1upx solid lightgray
		/* background-color: #64A0D6; */
	
		
	}

</style>