zhgdyunapp_vue3/components/index.vue

<template>
	<view class="content">
		<view class="data-info">选择内容为：{{cityName}}</view>
		<view class="text-area">
			<view class="">数据类型(可选)：</view>
			<view :class="level == item.id ? 'level-single-active' : 'level-single'" @tap="switchLevel(item.id)"
				v-for="(item,index) in levelList" :key="index">{{item.name}}</view>
		</view>
		<view class="text-area">
			<view class="">弹框标题(可改)：</view>
			<input type="text" v-model="title" />
		</view>
		<view class="text-area">
			<view class="">最多数量(可改)：</view>
			<input type="number" v-model.number="maxCount" />
			<text>个</text>
		</view>
		<view class="text-area">
			<view class="">弹框颜色(可改)：</view>
			<input type="text" v-model="colorValue" />
		</view>
		<view class="show-btn" @tap="show">点击显示11</view>
		<uni-popup ref="cityMore" type="bottom">
			<more-select :cityData="cityData" @chooseCity="chooseCity" @switchCity="switchCity" :cityIndex="cityIndex"
				@scrollCity="scrollCity" @closeCity="closeCity" @queryCity="queryCity" :oldScrollTop="oldScrollTop"
				:scrollTop="scrollTop" :chooseCityList="chooseCityList" :title="title" :cityIdArr="cityIdArr" @delCity="delCity"
				ref="moreselects" :maxCount="maxCount" :level="level" :colorValue="colorValue"></more-select>
		</uni-popup>
	</view>
</template>

<script>
	import cityData from '@/common/data.js'; //多级数据
	import LevelOneData from '@/common/levelone-data.js' //一级数据
	import moreSelect from "@/components/more-select.vue"
	export default {
		components: {
			moreSelect
		},
		data() {
			return {
				level: 2,
				title: '选择城市',
				chooseCityList: [],
				cityIdArr: [],
				cityData: "",
				scrollTop: 0,
				oldScrollTop: 0,
				cityIndex: 0,
				maxCount: 3,
				cityName: "",
				colorValue: "#016CE1",
				levelList: [{
						"id": 1,
						"name": "一级多选",
					},
					{
						"id": 2,
						"name": "二级多选"
					},
					{
						"id": 3,
						"name": "三级多选"
					}
				]
			}
		},
		onLoad() {
			//定时器模拟ajax异步请求数据
			setTimeout(() => {
				this.cityData = cityData;
			}, 100);
		},
		methods: {
			show() {
				console.log(this.level)
				if (this.level == 1) {
					this.cityData = LevelOneData
				} else {
					this.cityData = cityData
				}
				this.$refs.cityMore.open()
			},
			switchLevel(id) {
				this.resetData()
				this.level = id
			},
			resetData(){
				this.cityIdArr = []
				this.chooseCityList = []
			},
			delCity(delId) {
				this.cityIdArr.forEach((item, index) => {
					if (this.chooseCityList[delId].id == item) {
						this.cityIdArr.splice(index, 1);
					}
				})
				this.chooseCityList.splice(delId, 1);
				this.$nextTick(() => {
					this.$refs.moreselects.getViewHeight();
				});
			},
			chooseCity(item) {
				console.log(item)
				console.log(this.cityIdArr)
				//先判断Id是否在数组中
				if (this.cityIdArr.includes(item.id)) {
					this.chooseCityList.forEach((val, key) => {
						if (val.id == item.id) { //如果在数组中，反选（删除）
							this.delCity(key)
						}
					})
					return false
				}

				if (this.chooseCityList.length >= this.maxCount) {
					uni.showToast({
						title: '最多选择' + this.maxCount + '个',
						icon: "none",
						duration: 2000
					});
					return false
				}
				let obj = {}
				if (this.level == 1) {
					 obj = {
						"id": item.id,
						"name": item.name
					}
				}else if(this.level == 2){
					 obj = {
						"id": item.id,
						"name": item.parentName + item.name,
						"pid": item.pid,
						"pname": item.parentName
					}
				}else if(this.level == 3){
					console.log(item)
					obj = {
						"id": item.id,
						"name": item.oneName + item.twoName + item.name,
						"oneId": item.oneId,
						"twoId": item.twoId,
						"oneName": item.oneName,
						"twoName": item.twoName,
						"threeName": item.name
					}
				}
				
				this.cityIdArr.push(item.id)
				this.chooseCityList.push(obj)
				//调用子组件方法动态改变滚动栏高度
				this.$nextTick(() => {
					this.$refs.moreselects.getViewHeight();
				});

			},
			switchCity(index) {
				this.scrollTop = this.oldScrollTop
				//当视图渲染结束 重新设置为0
				this.$nextTick(() => {
					this.scrollTop = 0
				});
				this.cityIndex = index
			},
			scrollCity(val) {
				//记录scroll  位置
				this.oldScrollTop = val
			},
			closeCity() {
				this.$refs.cityMore.close()
			},
			queryCity() {
				this.cityName = ""
				this.chooseCityList.forEach((item, index) => {
					this.cityName += item.name + ","
				})
				this.cityName = this.cityName.substring(0, this.cityName.lastIndexOf(','));
				this.$refs.cityMore.close()
			},
		}
	}
</script>

<style lang="scss">
	:deep(::-webkit-scrollbar ){
	display: none;
	width: 0 !important;
	height: 0 !important;
	-webkit-appearance: none;
	background: transparent;
	}

	.show-btn {
		width: 700upx;
		height: 104upx;
		border-radius: 14upx;
		background: #286FFF;
		font-size: 36upx;
		font-family: Source Han Sans CN;
		font-weight: 500;
		color: #FFFFFF;
		line-height: 104upx;
		text-align: center;
		margin: 0upx auto;
		margin-top: 50upx;
	}

	.data-info {
		width: 700upx;
		font-weight: bold;
		
		margin: 20upx auto;
	}

	.logo {
		height: 200rpx;
		width: 200rpx;
		margin-top: 200rpx;
		margin-left: auto;
		margin-right: auto;
		margin-bottom: 50rpx;
	}

	.level-single {
		background: #EEEEEE;
		margin-right: 10upx;
		border-radius: 14upx;
		font-size: 24rpx;
		padding: 10upx 20upx;
	}

	.level-single-active {
		background: #016CE1;
		margin-right: 10upx;
		border-radius: 14upx;
		font-size: 24rpx;
		color: #FFFFFF;
		padding: 10upx 20upx;
	}

	.text-area {
		width: 700upx;
		margin: 20upx auto;
		display: flex;
		align-items: center;
		input{
			width: 300upx;
			font-weight: bold;
		}

	}

	.title {
		font-size: 36rpx;
		color: #8f8f94;
	}
</style>