shuiguouser/components/chooseAddress/index.vue

<template>
	<view class="wrapper">
		<view class="tit">
			选择地址
		</view>
		<view class="nav flex">
			<view class="nav-item clamp" v-for="(item,index) in navList" :key="index" :class="{'choose': current == index}" @click="getCity(index)">
				{{item.label}}
			</view>
		</view>
		<view class="">
			<scroll-view scroll-y="true" style="height: 500rpx;">
				<view class="city" v-for="(city,cindex) in list" :key="cindex" @click="chooseCity(city)">
					{{city.label}}
				</view>
			</scroll-view>
		</view>
	</view>
</template>

<script>
	import { getCity} from '@/api/user.js'
	export default {
		data() {
			return {
				list: [],
				current: 0,
				navList: [{label: '请选择',value: 0}]
			}
		},
		props: {
			lists: {
				type: Array,
				default: () => []
			}
		},
		mounted() {
			if(this.lists.length > 0) {
				this.setBase()
			}else {
				this.getCity(0)
			}
 		},
		methods: {
			setBase() {
				let len = this.lists.length
				this.current = len - 1
				this.navList = this.lists
				this.getCity(this.current)
			},
			chooseCity(item) {
				if(this.current == 3) {
					this.$set(this.navList,this.current,item)
					this.$emit('chooseEnd',this.navList)
				}else {
					this.$set(this.navList,this.current,item)
					this.$set(this.navList,this.current + 1,{label: '请选择',value: 0})
					this.navList = this.navList.slice(0,this.current +2)
					this.list = []
					this.getCity(++this.current)
				}
			},
			getCity(index) {
				this.current = index
				let qdata = {}
				if(index == 0) {
					qdata.pid = 0
				}else {
					qdata.pid = this.navList[index - 1].value
				}
				getCity(qdata).then(res => {
					this.list = res.data.map(item => {
						return {
							label: item.label,
							value: item.value
						}
					})
				})
			},
		}
	}
</script>

<style lang="scss" scoped>
	$action-c: #ef5656;
	$fz: 30rpx;
	// .on 
	.wrapper {
		padding: 20rpx 0;
		width: 750rpx;
		background-color: #fff;
		border-radius: 20rpx 20rpx 0 0;
		font-size: $fz;
		// position: fixed;
		// bottom: 0;
		.tit {
			padding: 20rpx;
			font-size: $fz;
			font-weight: bold;
		}
	}
	.nav {
		justify-content: flex-start;
		border-bottom: 1px solid #eee;
		margin-bottom: 15rpx;
		.nav-item {
			width: 25%;
			text-align: center;
			padding: 20rpx 10rpx;
		}
		.choose {
			position: relative;
			color: #ef5656;
			
			&::after {
				content: '';
				position: absolute;
				bottom: 0rpx;
				left: 0;
				right: 0;
				width: 40px;
				height: 2px;
				background-color: $action-c;
				margin: auto;
			}
		}
	}
	.city {
		padding: 15rpx 0 10rpx 50rpx;
	}
</style>