zhgdyunapp_vue3/components/recursive-collapse/index.vue

<template>
	<div class="collspseBox">
		<van-row class="collspse_item" v-for="(item, index) in data" :key="index" @click.stop="open(item, index)">
			<van-col span="23" class="left">
				<image src="@/static/bthgIcon/project_icon12.png" mode=""></image>
				<view class="title">
					{{ item.classificationName }}
					<text>({{ item.children && item.children.length > 0 ? '支部数量' : '党员数量'}}:{{ item.children && item.children.length > 0 ? item.children.length : item.userCount ? item.userCount : 0}})</text>
				</view>
			</van-col>
			<van-col span="1" class="icon"><van-icon v-if="item.children && item.children.length > 0"
					:name="item.active ? 'arrow-down' : 'arrow'" color="#878D99" /></van-col>
			<van-col span="24" class="content" v-if="item.children && item.children.length > 0"
				:style="{ height: item.active ? 'auto' : '0' }">
				<RecursiveCollapse :data="item.children" />
			</van-col>
		</van-row>
	</div>
</template>
<script>
	// import RecursiveCollapse from "@/components/recursive-collapse/index.vue";
	export default {
		name: "RecursiveCollapse",
		components: {
			RecursiveCollapse: () =>
				import("@/components/recursive-collapse/index.vue"),
		},
		/** 需要传进来的参数 */
		props: {
			data: {
				type: Array,
				default: () => [],
			},
		},
		data() {
			return {
				activeNames: ["1"],
				active: false,
			};
		},
		components: {},
		methods: {
			open(item, index) {
				/** 有下一级则继续展开，否则跳转详情 */
				if (item.children && item.children.length > 0) {
					/** 给当前 item 增加一个状态 */
					this.$set(this.data[index], "active", !this.data[index].active);
				} else {
					/** 这里的逻辑按需求修改 */
					// this.$router.push("/subjectTwo/" + item.id);
					uni.navigateTo({
						url: "/pages/projectEnd/guidancePartyBuilding/organizationalBuild/index?partyConstructionOrganizationId=" +
							item.id
					})
				}
			},
		},
	};
</script>

<style lang="scss" scoped>
	.collspseBox {
		//   padding: 14px 10px;

		.collspse_item {
			background-color: #fff;
			padding: 30rpx 24rpx;
			// border-radius: 8px;
			overflow: hidden;
			// margin-bottom: 10px;
			// box-shadow: 0 0px 6px rgba(100, 101, 102, 0.1);

			.icon {
				text-align: right;
				display: flex;
				justify-content: flex-end;
				align-items: center;

				>.van-icon {
					font-size: 40rpx !important;
					color: #2f8ff3 !important;
				}
			}

			.left {
				display: flex;
				align-items: center;

				>image {
					width: 70rpx;
					height: 70rpx;
				}

				>view {
					margin-left: 20rpx;

					>text {
						color: #9f9f9f;
					}
				}

				.title {
					font-size: 32rpx;
					color: #2f3541;
					white-space: nowrap;
					text-wrap: nowrap;
					word-break: keep-all;
					overflow: hidden;
					text-overflow: ellipsis;
					font-weight: bold;
					font-family: "PingFang SC";
					flex: 1;
				}
			}

			.content {
				transition: all 0.5s;

				.collspseBox {
					padding: 0;

					.collspse_item {
						padding: 32rpx 0 0 24rpxpx;
						margin-bottom: 0;
						box-shadow: none;

						.title {
							font-size: 28rpx;
							color: #2f3541;
							font-family: "PingFang SC";
							font-weight: 400;
							position: relative;
							padding-left: 5px;
						}

						//   .title::before {
						//     content: "";
						//     position: absolute;
						//     top: calc(50% - 1px);
						//     left: 0;
						//     width: 2px;
						//     height: 2px;
						//     background-color: #2f3541;
						//     border-radius: 2px;
						//   }
					}
				}
			}
		}
	}
</style>