luoshan_web/pages/throughTrain/components/selectLei.vue

<template>
	<u-popup v-model="show" mode="left" width="100%">
		<view class="box">
			<view class="top">
				<!-- <view class="top-text">
					分类选择
				</view> -->
				<view class="top_search">
					<view class="search">
						<u-search shape="round" bgColor='#fff' searchIconColor='#ccc' clearabled :show-action="false"
							searchIconSize="28" placeholderColor="#BDBDBD" height="80" placeholder="请输入分类名称"
							v-model="search_name" @clear="clear" />
						<view class="search-button" @click="search">搜索</view>
					</view>
				</view>
			</view>
			<view class="list-content" v-if="list.length>0">
				<view class="list" v-for="(item,_) in list" :key='item.id'>
					<view class="list-item">
						<view class="text" @click="select(item)">
							<view class="text-name"> {{item.name}}</view>
							<view class="select1" v-if="currentId==item.id">
								<u-icon name="checkbox-mark" color="#DE2E27"></u-icon>
							</view>
							<view class="select" v-else>
							</view>
						</view>
						<view class="" v-if="item.children">
							<view class="list-1" v-for="(item1) in item.children" :key="item1.id">
								<view class="list-item-1">
									<view class="text-1" @click="select(item1)">
										<view class="text-name"> {{item1.name}}</view>
										<view class="select1" v-if="currentId == item1.id">
											<u-icon name="checkbox-mark" color="#DE2E27"></u-icon>
										</view>
										<view class="select" v-else>
										</view>
									</view>
									<view class="" v-if="item1.children">
										<view class="list-2" v-for="(item2) in item1.children" :key="item2.id">
											<view class="list-item-2">
												<view class="text-2" @click="select(item2)">
													<view class="text-name"> {{item2.name}}</view>
													<view class="select1" v-if="currentId==item2.id">
														<u-icon name="checkbox-mark" color="#DE2E27"></u-icon>
													</view>
													<view class="select" v-else>
													</view>
												</view>
												<view class="" v-if="item2.children">
													<view class="list-3" v-for="item3 in item2.children"
														:key="item3.id">
														<view class="list-item-3">
															<view class="text-3" @click="select(item3)">
																<view class="text-name"> {{item3.name}}</view>
																<view class="select1" v-if="currentId == item3.id">
																	<u-icon name="checkbox-mark" color="#DE2E27">
																	</u-icon>
																</view>
																<view class="select" v-else>
																</view>
															</view>
														</view>
													</view>
												</view>
											</view>
										</view>
									</view>
								</view>
							</view>
						</view>
					</view>
				</view>
			</view>
			<view class="buttom-list">
				<view class="bottom-left" @click="cancel">
					取消
				</view>
				<view class="bottom-right" @click="confirm">
					确定
				</view>
			</view>
		</view>
	</u-popup>
</template>

<script>
	export default {
		data() {
			return {
				show: false,
				list: [],
				currentId: '',
				currentName: '',
				search_name: '',
				list_init: []
			}
		},
		methods: {
			showEdit(row) {
				this.show = true
				this.list = row
				this.list_init = row
				console.log(row, '分类数据')
			},
			select(item) {
				this.currentId = item.id
				this.currentName = item.name
			},
			confirm() {
				if (!this.currentId && !this.currentName) {
					this.$u.toast('请选择数据！')
				} else {
					this.show = false
					const data = {
						id: this.currentId,
						name: this.currentName
					};
					this.$emit('fetch-data', data);
				}
			},
			search() {
				if (this.search_name) {
					this.list = this.list_init
					this.list = this.searchByName(this.list, this.search_name);
				} else {
					this.list = this.list_init
				}

			},
			searchByName(data, keyword) {
				const result = [];
				const searchKeyword = keyword.trim();

				function searchInArray(arr) {
					for (const item of arr) {
						if (item.name.includes(searchKeyword)) {
							result.push(item);
						}
						if (item.children) {
							searchInArray(item.children);
						}
					}
				}
				searchInArray(data);
				return result;
			},

			clear() {
				this.search_name = ''
				this.list = this.list_init
			},
			cancel() {
				this.show = false
				this.currentId = ''
				this.currentName = ''
			}
		}
	}
</script>

<style lang="scss">
	.buttom-list {
		height: 50px;
		line-height: 50px;
		position: fixed;
		bottom: 0;
		width: 80vw;
		left: 10vw;
		display: flex;
		justify-content: space-between;

		.bottom-left {
			width: 35vw;
			height: 40px;
			line-height: 40px;
			text-align: center;
			background-color: #a5a6a8;
			border-radius: 12px;
		}

		.bottom-right {
			width: 35vw;
			height: 40px;
			line-height: 40px;
			text-align: center;
			background-color: #DE2E27;
			color: #fff;
			border-radius: 12px;
		}
	}

	.top {
		background: #f7f7f7;
		padding: 0 32upx 0 32upx;
		box-sizing: border-box;
		position: fixed;
		top: 0;
		left: 0;
		height: 140rpx;
		z-index: 2;
		width: 100%;
	}

	.top-text {
		height: 80px;
		line-height: 80px;
		font-weight: 550;
		font-size: 32upx;
		text-align: center;
	}

	.top_search {
		margin-top: 24rpx;

		.search {
			display: flex;
			align-items: center;
			justify-content: space-between;
			background-color: #fff;
			border-radius: 40upx;
			height: 80upx;
			width: 100%;
		}

		.search-button {
			width: 60px;
			height: 32px;
			background: #DE2E27;
			border-radius: 32px;
			font-size: 14px;
			margin-right: 5px;
			color: #fff;
			text-align: center;
			line-height: 32px;
		}

		u-search {
			width: 83%;
		}

		.chongzhi {
			background: #2F54EB;
			padding: 14rpx;
			font-family: PingFangSCMedium-Medium;
			font-size: 28rpx;
			font-weight: normal;
			color: #FFFFFF;
		}
	}

	.box {
		padding: 15px;
	}

	.list-content {
		padding-top: 140rpx;
		padding-bottom: 55px;
	}

	.list-item {

		// padding:10px;
		.list-item-1 {

			// border-top: dashed 1px #b9b9b9;
			.list-item-2 {
				.list-item-3 {
					// border-top: dashed 1px #b9b9b9;
				}
			}
		}

		.text {
			padding: 10px;
			// border-left: dashed 1px #b9b9b9;
			border-bottom: dashed 1px #b9b9b9;
			display: flex;
			align-item: center;

			.text-name {
				flex: 1
			}

			.select {
				height: 18px;
				width: 18px;
				border-radius: 50%;
				border: solid 1px #b9b9b9;
				text-align: center;
				line-height: 15px;
			}

			.select1 {
				height: 18px;
				width: 18px;
				border-radius: 50%;
				border: solid 1px #DE2E27;
				text-align: center;
				line-height: 15px;
			}
		}

		.text-1 {
			padding: 10px;
			margin-left: 20px;
			// border-left: dashed 1px #b9b9b9;
			border-bottom: dashed 1px #b9b9b9;
			display: flex;
			align-item: center;

			.text-name {
				flex: 1
			}

			.select {
				height: 18px;
				width: 18px;
				border-radius: 50%;
				border: solid 1px #b9b9b9;
				text-align: center;
				line-height: 15px;
			}

			.select1 {
				height: 15px;
				width: 15px;
				border-radius: 50%;
				border: solid 1px #DE2E27;
				text-align: center;
				line-height: 15px;
			}
		}

		.text-2 {
			padding: 10px;
			margin-left: 30px;
			// border-left: dashed 1px #b9b9b9;
			border-bottom: dashed 1px #b9b9b9;
			display: flex;
			align-item: center;

			.text-name {
				flex: 1
			}

			.select {
				height: 18px;
				width: 18px;
				border-radius: 50%;
				border: solid 1px #b9b9b9;
				text-align: center;
				line-height: 15px;
			}

			.select1 {
				height: 18px;
				width: 18px;
				border-radius: 50%;
				border: solid 1px #DE2E27;
				text-align: center;
				line-height: 15px;
			}
		}

		.text-3 {
			padding: 10px;
			margin-left: 40px;
			// border-left: dashed 1px #b9b9b9;
			border-bottom: dashed 1px #b9b9b9;
			display: flex;
			align-item: center;

			.text-name {
				flex: 1
			}

			.select {
				height: 18px;
				width: 18px;
				border-radius: 50%;
				border: solid 1px #b9b9b9;
				text-align: center;
				line-height: 15px;
			}

			.select1 {
				height: 18px;
				width: 18px;
				border-radius: 50%;
				border: solid 1px #DE2E27;
				text-align: center;
				line-height: 15px;
			}
		}
	}
</style>