nurseWeChatAppletUI/components/m-city/m-city.vue

<template>
	<view>
		<view class="mask" :class="{ maskShow: showPicker }" @click="goemit" @click.stop.prevent @touchmove.stop.prevent
			catchtouchmove="true"></view>
		<view class="cpicker-content" :class="{ cpickerShow: showPicker }">
			<view class="city-head" @click.stop.prevent @touchmove.stop.prevent catchtouchmove="true">
				<view class="city-head-title">{{ headTitle }}</view>
				<!-- <view class="titlecancel" @click="hide">
					取消
				</view>
				<view class="titletap" @click="goemit">
					确定
				</view> -->
				<icon type="clear" v-if="clearRightIcon" class="clearRightIcon" size="20" color="#cccccc"
					@click="goemit">
				</icon>
			</view>
			<scroll-view id="nav-bar" class="nav-bar" scroll-x="true" scroll-with-animation="true"
				:scroll-left="scrollLeft">
				<view v-for="(item, index) in tabbars" class="nav-item" :key="index" :id="'tab' + index"
					@click="changeTab(index)" :class="{ current: index === tabCurrentIndex }"><text
						class="nav-bar-title">{{ item.localName }}</text></view>
			</scroll-view>
			<view class="city_content">
				<scroll-view class="panel-scroll-box" :scroll-y="enableScroll" :cscrollTop="scrollTop"
					:current="tabCurrentIndex" :scroll-top="scrollTop">
					<block v-for="(item, index) in tabbars[tabCurrentIndex].children" :key="index">
						<view class="flex-row-c-c" @click="changCity(tabCurrentIndex, item)">
							<text class="city-text"
								:class="{ color: tabbars[tabCurrentIndex].id == item.id }">{{ item.areaName }}</text>
							<icon type="success_no_circle" v-if="tabbars[tabCurrentIndex].id == item.id"
								:id="'show' + tabCurrentIndex" class="ischeck" size="14" :color="$lightColor"></icon>
						</view>
					</block>
				</scroll-view>
			</view>
		</view>
	</view>
</template>

<script>
	let windowWidth = 0
	import {
		getSubordinateRegions,
		getSubordinateInfo
	} from '@/api/modifyAddress/modifyAddress.js';
	export default {
		name: "UniCityNvue",
		props: {
			headTitle: {
				//标题
				type: String,
				default: "地区选择",
			},
			pickerSize: {
				// 使用多少个tab
				type: [String, String],
				default: "1",
			},
			provinceData: {
				// 默认的省市区id，如果不使用id的情况下则为[]；
				type: Array,
				default: function() {
					return [];
				},
			},
		},
		data() {
			return {
				clearRightIcon: true, //是否显示右侧关闭icon
				scrollLeft: 500, //顶部选项卡左滑距离
				scrollTop: 0, //默认滚动顶部为0
				enableScroll: true, //是否启用滚动
				tabCurrentIndex: 0, //当前选项卡索引
				tabbars: [{
					id: "",
					localName: "请选择",
					children: [],
				}, ], //默认的省市区id
				pickersize: this.pickerSize, //多少个tab 推荐为4级 
				showPicker: false, //显示选取器
			};
		},
		onShow() {},
		onLoad() {},
		onUnload() {},
		methods: {
			goemit() {
				var list = null
				if (this.tabbars[this.tabbars.length - 1].localName == '请选择') {
					list = this.tabbars.filter(e => e.localName != '请选择')
				} else {
					list = this.tabbars
				}
				this.$emit("funcValue", list);
				this.hide();
			},
			/**
			 * 显示选择器
			 */
			show() {
				this.showPicker = true;
				this.tabbars[0].children = this.provinceData;
				// if (this.tabbars[0].children.length == 0) {
				// getSubordinateRegions('').then((res) => {
				// if (res.code == 200) {
				// }
				// });
				// }
				windowWidth = uni.getSystemInfoSync().windowWidth;
			},

			/**
			 * 关闭选择器
			 */
			hide() {
				this.showPicker = false;
			},

			/**
			 * tab切换
			 */
			changeTab(e) {
				let index = e;
				this.setScroll(index);
				//延迟300ms,等待swiper动画结束再修改tabbar
				this.tabCurrentIndex = index;
				setTimeout(() => {
					this.getScroll("show" + index);
				}, 10);
			},

			/**
			 * 获得元素的大小
			 */
			getElSize(id) {
				return new Promise((res, rej) => {
					let el = uni
						.createSelectorQuery()
						.in(this)
						.select("#" + id);
					el.fields({
							size: true,
							scrollOffset: true,
							rect: true,
						},
						(data) => {
							res(data);
						}
					).exec();
				});
			},

			/**
			 * 点击城市后回调
			 */
			async changCity(index, item) {
				if (this.tabbars[index].id != item.id) {
					this.tabbars[index].localName = item.areaName;
					this.tabbars[index].id = item.areaCode;
					if (index < this.tabbars.length - 1) {
						this.tabbars.splice(index + 1, this.tabbars.length - index - 1);
					}
					if (this.tabbars.length < this.pickersize) {
						let data = await getSubordinateInfo(item.areaCode);
						// 当前选项级为最后一级时回调，将选中的数据返回
						if (data.data.length == 0) {
							this.$emit("funcValue", this.tabbars);
							this.hide();
						} else {
							// 将新的数据填充进下一级
							var current = {
								localName: "请选择",
								id: "",
								children: data.data,
							};
							this.tabbars.push(current);
							if (this.tabCurrentIndex == 2) {
								this.tabbars[3].children.unshift({
									areaCode: "",
									areaLevel: 4,
									areaName: "暂不选择",
									children: null,
									id: 999999,
									parentId: 999999999,
									sort: null,
								})
							}
							this.tabCurrentIndex++;
							// 当前距离重新为最上面
							this.$set(this, 'scrollTop', 0)
						}
					} else {
						this.$emit("funcValue", this.tabbars);
						this.hide();
					}
				}
			},
			/**
			 * 获取当前tab中滚动的距离
			 */
			async setScroll(index) {
				let width = 0;
				let nowWidth = 0;
				for (let i = 0; i <= index; i++) {
					let result = await this.getElSize("tab" + i);
					width += result.width;
					if (i === index) {
						nowWidth = result.width;
					}
				}
				if (width + nowWidth > windowWidth) {
					this.scrollLeft = width + nowWidth;
				} else {
					this.scrollLeft = 0;
				}
			},

			/**
			 * 计算当前的滚动距离
			 */
			getScroll(id) {
				uni
					.createSelectorQuery()
					.in(this)
					.select(".panel-scroll-box")
					.boundingClientRect((data) => {
						uni
							.createSelectorQuery()
							.in(this)
							.select("#" + id)
							.boundingClientRect((res) => {
								if (res != undefined && res != null && res != "") {
									this.scrollTop = res.top - data.top;
								}
							})
							.exec();
					})
					.exec();
			},
		},
	};
</script>

<style lang="scss" scoped>
	.mask {
		visibility: hidden;
		position: fixed;
		top: 0;
		right: 0;
		left: 0;
		bottom: 0;
		z-index: 1000;
		background: rgba(0, 0, 0, 0.6);
		opacity: 0;
		transition: all 0.3s ease;
	}

	.maskShow {
		visibility: visible;
		opacity: 1;
	}

	.cpicker-content {
		position: fixed;
		right: 0;
		bottom: 0;
		left: 0;
		background-color: #ffffff;
		transition: all 0.3s ease;
		transform: translateY(100%);
		z-index: 3000;
	}

	.cpickerShow {
		transform: translateY(0);
	}

	.city-head {
		width: 750rpx;
		height: 88rpx;
		flex-direction: column;
		border-bottom-width: 1px;
		border-bottom-color: #f4f4f4;
		border-bottom-style: solid;
		position: relative;
	}

	.city-head-title {
		font-size: 30rpx;
		line-height: 88rpx;
		align-items: center;
		/* #ifndef APP-NVUE */
		text-align: center;
		/* #endif */
	}

	.titletap {
		display: inline-block;
		fonts-size: 24rpx;
		position: absolute;
		right: 5%;
		top: 22rpx;
		color: #999999;
	}

	.titlecancel {
		display: inline-block;
		fonts-size: 24rpx;
		position: absolute;
		left: 5%;
		top: 22rpx;
		color: #999999;
	}

	.clearRightIcon {
		position: absolute;
		right: 15px;
		top: 12px;
		font-size: 10px;
		color: #bebebe;
	}

	.nav-bar {
		position: relative;
		z-index: 10;
		height: 90rpx;
		white-space: nowrap;
		box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.06);
		background-color: #fff;
	}

	.nav-item {
		/* #ifndef APP-NVUE */
		display: inline-flex !important;
		/* #endif */
		/* #ifdef APP-NVUE */
		flex-direction: row !important;
		/* #endif */
		width: 170rpx;
		padding: 7px 0px;
		line-height: 26px;
		align-items: center;
		justify-content: center;
		color: #303133;
		position: relative;
		overflow: hidden;
		text-overflow: ellipsis;
	}

	.nav-bar-title {
		font-size: 30rpx;
	}

	.current {
		// color: $aider-light-color;
		// border-color: $aider-light-color;
		border-bottom-width: 4rpx;
		border-bottom-style: solid;
	}

	.current:after {
		width: 50%;
	}

	.panel-scroll-box {
		height: 750rpx;
		margin-top: 8px;
	}

	.flex-row-c-c {
		/* #ifndef APP-NVUE */
		display: block;
		/* #endif */
		/* #ifdef APP-NVUE */
		flex-direction: row;
		/* #endif */
		padding-left: 25px;
	}

	.city-text {
		/* #ifdef APP-NVUE */
		flex-direction: row;
		/* #endif */
		height: 35px;
		line-height: 35px;
		font-size: 30rpx;
	}

	.hide {
		opacity: 0;
	}

	.ischeck {
		/* #ifndef APP-NVUE */
		display: inline-flex !important;
		/* #endif */
		/* #ifdef APP-NVUE */
		flex-direction: column;
		/* #endif */
		margin-right: 5px;
		vertical-align: middle;
	}

	.color {
		// color: $light-color;
	}

	icon {
		margin-left: 40rpx;
	}
</style>