partnerApp/components/common/address.vue

<template>
	<view>
		<view class="addres_select_val">
			<view>
				<view v-for="(item, index) of addressVal" :key="index" :class="{ select: addressIndex == index }"
					@click="selectType(index)">{{ item.name }}</view>
				<view :class="{ 'select main-text-color main-border-color': selectState == addressIndex }"
					v-show="selectState < length || (selectState >= length && selectState < 3 && !force)"
					@click="selectType(selectState)">
					请选择
				</view>
			</view>
		</view>
		<scroll-view class="addres_box" scroll-y :scroll-top="scrollTop">
			<view>
				<view v-for="(item, index) of addressList" :key="index"
					:class="{ 'select main-text-color': addressVal.length > addressIndex && item.objId == addressVal[addressIndex].objId }"
					@click="selectClick(item)">
					{{ item.name }}
				</view>
			</view>
		</scroll-view>
	</view>
</template>

<script>
	export default {
		props: {
			//选中数据
			dataList: {
				type: Array,
				default () {
					return [];
				}
			},
			//联动长度[省，市，区]
			length: {
				type: Number,
				default () {
					return 3;
				}
			},
			//是否强制选择,如果length=2,force = false 选择到市的时候就可以确定了，但是还可以选择到区
			force: {
				type: Boolean,
				default () {
					return true;
				}
			}
		},
		created() {
			if (this.dataList instanceof Array) {
				this.addressVal = this.dataList;
				this.selectState = this.dataList.length;
			}
		},
		watch: {
			dataList(val) {
				this.addressVal = val;
				this.selectState = val.length;
			}
		},
		data() {
			return {
				//选出的值
				addressVal: [],
				//当前选择
				addressIndex: 0,
				//选择的值
				addressList: [],
				//请选择的显示
				selectState: 0,
				scrollTop: 0
			};
		},
		methods: {
			getRegion(pid) {
				//请求数据
				this.$http.get('api/kemean/aid/region', {
					pid: pid
				}, {
					load: false
				}).then(data => {
					if (data.length > 0) {
						this.addressList = data;
						// this.$refs.scroll.scrollTop = '0px';
						this.scrollTop = Math.random();
					} else {
						this.$emit('change', this.addressVal);
					}
				});
			},
			//切换对应的类型
			selectType(index) {
				this.addressIndex = index;
				var len = this.addressVal.length;
				if (index == 0) {
					this.getRegion(0);
				} else {
					this.getRegion(this.addressVal[index - 1].objId);
				}
				if (len == this.length) {
					this.selectState = this.length;
				} else if (len == this.length && index == this.length && this.force) {
					this.selectState = index;
				} else {
					this.selectState = index + 1;
				}
			},
			//选择
			selectClick(item) {
				if (this.addressIndex == 0) {
					this.addressVal = [];
				} else {
					this.addressVal.splice(this.addressIndex, this.addressVal.length - 1);
				}
				this.addressVal.push(item);
				if (this.addressVal.length < this.length || (this.addressVal.length < 3 && !this.force)) {
					this.getRegion(item.objId);
					this.addressIndex++;
				}
				if (this.addressVal.length >= this.length || !this.force) {
					this.$emit('change', this.addressVal);
				}
				this.selectState = this.addressVal.length;
			}
		},
		mounted() {
			this.getRegion(0);
		}
	};
</script>

<style scoped>
	.addres_select_val {
		padding: 0upx 10upx;
		border-bottom: 1upx solid #ebebeb;
		box-sizing: border-box;
		background-color: #fff;
	}

	.addres_select_val>view {
		display: flex;
		flex-wrap: wrap;
	}

	.addres_select_val>view>view {
		margin-left: 20upx;
		padding: 0upx 10upx;
		height: 72upx;
		line-height: 72upx;
		border-bottom: 2upx solid #fff;
		box-sizing: border-box;
		font-size: 28upx;
	}

	.addres_select_val>view>view:first-child {
		margin-left: 0upx;
	}

	.addres_select_val>view>view.select {
		border-bottom: 2upx solid;
	}

	.addres_box {
		padding: 0upx 20upx;
		height: 420upx;
		overflow-y: auto;
		background-color: #fff;
	}

	.addres_box view>view {
		height: 72upx;
		line-height: 72upx;
		font-size: 28upx;
	}
</style>