jsy-app/components/custom-select-land/custom-select-land.vue

<template>
	<u-popup mode="left" :show="show" @close="close">
		<u-collapse ref="refCollapse" :value="showValue" @change="changeItem" @open="openItem" @close="closeItem"
			accordion>
			<u-collapse-item v-for="(item,i) in list" :name="i">
				<template v-slot:icon>
					<view class="iconfont icon-qiye icon"></view>
				</template>
				<template v-slot:title>
					{{item.name}}
				</template>
				<template v-slot:right-icon>
					<u-badge numberType="overflow" type="primary" max="999" :value="item.children.length" />
				</template>
				<view class="u-collapse-content" v-if="item.isShow">
					<u-list>
						<u-list-item v-for="item2 in item.children">
							<u-cell @click="select(item2)">
								<template v-slot:icon>
									<view class="iconfont icon-ditu icon"></view>
								</template>
								<template v-slot:title>
									（{{item2.name}}
								</template>
								<template v-slot:right-icon>
									<u-badge numberType="overflow" type="success" max="999" :value="item2.valueNum" />
								</template>
							</u-cell>
						</u-list-item>
					</u-list>
				</view>
			</u-collapse-item>

		</u-collapse>
	</u-popup>
</template>

<script>
	export default {
		name: 'custom-select-land',
		emits: ["select"],
		props: {
			// selectItem: {
			// 	type: Object,
			// 	default: null,
			// 	required: true
			// }
		},
		watch: {},
		data() {
			return {
				show: false,
				showValue: null,
				list: [],
			}
		},
		created() {
			this.getLandData();
		},
		methods: {
			getLandData() {
				if (!this.list.length) {
					let arr = [];
					for (var i = 0; i < 20; i++) {
						let obj = {
							id: i,
							name: "公司" + i,
							isShow: false,
							children: []
						}
						for (var j = 0; j < 50; j++) {
							obj.children.push({
								id: j,
								name: "地块" + j,
							})
						}
						arr.push(obj);
					}
					this.list = arr;
				}
				return this.list;
			},
			open() {
				if (this.list.length > 0) {
					this.show = true;
				} else {
					uni.showToast({
						title: "无数据",
						icon: 'none'
					})
				}
				// console.error("selectItem:", this.selectItem)
			},
			close() {
				const that = this;
				that.show = false;
				that.list.forEach((item, index) => {
					if (index == that.showValue) {
						item.isShow = true;
					} else {
						item.isShow = false;
					}
				})
			},
			select(item) {
				this.$emit("select", item);
				this.close();
			},
			changeItem(e) {
				console.log("changeItem:", e);
			},
			openItem(e) {
				this.showValue = e;
				this.list[e].isShow = true;
				this.$nextTick(() => {
					this.$refs.refCollapse.init();
				})
			},
			closeItem(e) {
				this.showValue = null;
			}
		}
	}
</script>

<style lang="scss" scoped>
	$list-height: 100px;

	::v-deep.u-popup__content {
		min-width: 240px;

		.u-collapse {
			height: 100vh;
			overflow-y: auto;

		}

		.u-cell__right-icon-wrap--down,
		.u-cell__right-icon-wrap--up {
			transform: none;
		}

		.u-collapse-item__content__text {
			padding: 0;
		}

		.u-cell__body__content {
			.icon {
				color: #3c9cff;
				font-size: 44rpx;
			}

		}

		.u-collapse-content {
			font-size: 28rpx;

			.icon {
				color: #39ac4f;
			}
		}
	}
</style>