wangluohuoyun-app/components/gaojianghua-linkage/linkage.vue

<template>
	<view class="page">
		<view class="title">
			<view class="tt">
				{{province}}
			</view>
			<view class="tt">
				{{city}}
			</view>
			<view class="tt">
				{{area}}
			</view>
		</view>
		<view class="link u-f u-f-jsb flex ">
			<ul class="content" :style="'height:'+ heightCot + 'upx'">
				<scroll-view scroll-y style="height: 500rpx;">
					<li :class="index == isprovince?'active':''" @click="selectProvince(item, index)"
						v-for="(item,index) in provincelist" :key="index">
						{{item.label}}
					</li>
				</scroll-view>
			</ul>

			<ul class="content" :style="'height:'+ heightCot + 'upx'">
				<scroll-view scroll-y style="height: 500rpx;">
					<li :class="index == iscity?'active':''" @click="selectCity(item, index)"
						v-for="(item,index) in citylist" :key="index">{{item.label}}
					</li>
				</scroll-view>
			</ul>

			<ul class="content" :style="'height:'+ heightCot + 'upx'">
				<scroll-view scroll-y style="height: 500rpx;">
					<li :class="index == isarea?'active':''" @click="selectaArea(item, index)"
						v-for="(item,index) in arealist" :key="index">{{item.label}}
					</li>
				</scroll-view>
			</ul>
		</view>
	</view>
</template>

<script>
	import {
		address
	} from '../data/data.js'
	export default {
		name: "linkage",
		data() {
			return {
				isprovince: null,
				iscity: null,
				isarea: null,
				province: '',
				city: '',
				area: '',
				provincelist: [],
				citylist: [],
				arealist: [],
				chooseprovince: '',
				choosecity: '',
				choosearea: '',
				heightCot: 0,
			};
		},
		created() {
			uni.getSystemInfo({
				success: res => {
					//console.log(res.safeArea.height)
					this.heightCot = (res.safeArea.height * 2) / 2
				}
			})
			this.provincelist = address
		},
		onLoad() {
		},
		methods: {
			selectProvince(item, i) {
				this.isprovince = i
				if (item.child) {
					this.citylist = item.child
				}
				this.setchose(1)
				this.chooseprovince = item.label
				this.getchoose()
			},
			selectCity(item, i) {
				this.iscity = i
				if (item.child) {
					this.arealist = item.child
				}
				this.setchose(2)
				if (item.label != '市辖区' && item.label != '特别行政区') {
					this.choosecity = item.label
				}
				this.getchoose()
			},
			selectaArea(item, i) {
				this.isarea = i
				this.choosearea = item.label
				this.getchoose()
			},
			getchoose() {
				const {
					chooseprovince,
					choosecity,
					choosearea
				} = this
				this.$emit('conceal', {
					chooseprovince,
					choosecity,
					choosearea
				})
			},
			setchose(id){
				if(id == 1){
					this.choosecity = ''
					this.choosearea = ''
					this.iscity = null
					this.isarea = null
				}else if(id == 2){
					this.choosearea = ''
					this.isarea = null
				}
			}
		}
	}
</script>

<style lang="scss" scoped>
	ul,
	li {
		list-style: none;
	}

	.page {
		z-index: 999;
		background: #FFFFFF;
		width: 100%;
		height: 200px;
		position: absolute;
		bottom: 0px;
		// margin-left: 30rpx;
		// padding: 30rpx;
		.link {
			width: 100%;
			// margin-left: 30rpx;
			// padding: 10rpx 40rpx;
			.title{
				display: flex;
			}

			.content {
				//margin-top: 30upx;
				width: 33.333%;
				height: 500upx;
				overflow-y: auto;
				text-align: center;

				li {
					border-bottom: 1px solid #f1f1f1;
					padding: 30upx 0;
				}

				li:last-child {
					border-bototm: none !important;
				}

				.active {
					color: #FF5529 !important;
				}

			}
		}
	}
</style>