zhxy-desk/components/SelectStudents.vue

<template>
	<view class="select-stu">
		<view v-for="(item,index) in list" :key="index" class="select-stu-item">
			<view @click.stop="open(item)" class="select-stu-item-title">
				<view class="select-stu-item-title-icon">
					<uni-icons v-if="item.open" color="#999" type="bottom" size="14"></uni-icons>
					<uni-icons v-else color="#999" type="forward" size="14"></uni-icons>
				</view>
				<view class="">
					{{item.title}}
				</view>
				<view @click.stop="allItem(item)" class="select-stu-item-title-radio">
					<view v-if="item.show" class="select-stu-item-title-radio-true">
						<uni-icons color="#fff" type="checkmarkempty" size="12"></uni-icons>
					</view>
					<view v-else class="select-stu-item-title-radio-false">

					</view>
				</view>
			</view>

			<uni-transition ref="ani" custom-class="transition" :mode-class="['fade', 'slide-right']" :show="item.open">
				<view class="child">
					<view @click="selectItem(item1)" v-for="(item1,index1) in item.children" :key="index1"
						class="child-item">
						<view class="child-item-radio">
							<view v-if="item1.show" class="select-stu-item-title-radio-true">
								<uni-icons color="#fff" type="checkmarkempty" size="12"></uni-icons>
							</view>
							<view v-else class="select-stu-item-title-radio-false">

							</view>
						</view>

						<view class="child-item-img">
							<image style="width: 100%;height: 100%;border: 50%;" src="@/static/image/female.png"
								mode=""></image>
						</view>

						<view style="margin-left: 32rpx;font-size: 24rpx;" class="">
							<view class="">
								{{item1.title}}
							</view>
							<view style="color: #999;" class="">
								{{item1.id}}
							</view>
						</view>
					</view>
				</view>
			</uni-transition>
		</view>
	</view>
</template>

<script>
	export default {
		name: "SelectStudents",
		props: {
			list: {
				type: Array,
				default: () => []
			}
		},
		data() {
			return {

			};
		},
		methods: {
			open(item) {
				item.open = !item.open
				this.$emit('update:list', this.list)
			},
			selectItem(item) {
				item.show = !item.show
				this.$emit('update:list', this.list)
			},
			allItem(item) {
				item.show = !item.show
				if (item.show) {
					item.children.forEach(item1 => {
						item1.show = true
					})
				} else {
					item.children.forEach(item1 => {
						item1.show = false
					})
				}
				this.$emit('update:list', this.list)
			}
		}
	}
</script>

<style lang="scss" scoped>
	.child-item {
		width: 100%;
		display: flex;
		padding: 24rpx 0;
		align-items: center;

		.child-item-img {
			width: 80rpx;
			height: 80rpx;
			margin-left: 32rpx;
		}

		.child-item-radio {
			.select-stu-item-title-radio-true {
				width: 36rpx;
				box-sizing: border-box;
				height: 36rpx;
				border-radius: 50%;
				background-color: rgba(5, 204, 161, 1);
				text-align: center;
				line-height: 36rpx;
				font-size: 24rpx;
				color: #fff;
			}

			.select-stu-item-title-radio-false {
				width: 36rpx;
				box-sizing: border-box;
				height: 36rpx;
				border-radius: 50%;
				border: 1px solid rgba(5, 204, 161, 1);
			}
		}
	}

	.select-stu {
		width: 100%;
	}

	.select-stu-item {
		width: 100%;

		.select-stu-item-title {
			display: flex;
			height: 80rpx;
			align-items: center;
		}

		.select-stu-item-title-icon {
			margin-right: 10rpx;
		}

		.select-stu-item-title-radio {
			display: flex;
			align-items: center;
			margin-left: 10rpx;
			justify-content: center;

			.select-stu-item-title-radio-true {
				width: 36rpx;
				box-sizing: border-box;
				height: 36rpx;
				border-radius: 50%;
				background-color: rgba(5, 204, 161, 1);
				text-align: center;
				line-height: 36rpx;
				font-size: 24rpx;
				color: #fff;
			}

			.select-stu-item-title-radio-false {
				width: 36rpx;
				box-sizing: border-box;
				height: 36rpx;
				border-radius: 50%;
				border: 1px solid rgba(5, 204, 161, 1);
			}
		}
	}
</style>