hbj_app/pages/indexpage/fireMan/list/list.vue

<template>
	<view class="expert-container">
		<u-navbar bgColor="#ffffff" :placeholder="true" titleStyle="font-weight:600" title="消防员" :autoBack="true">
		
		</u-navbar>
		<u-sticky bgColor="#fff" style="padding: 20rpx;">
			<u-search placeholder="请输入消防员姓名" :clearabled="false" v-model="keyword" :showAction="false"
				@change="search"></u-search>
		</u-sticky>

		<view class="list-box" v-if="fireList.length > 0">
			<view class="list-itme">
				<uni-collapse :accordion="false" v-for="(item, index) in fireList" ref="collapse" :key="index">
					<uni-collapse-item title-border="show" :border="false" :show-arrow="true" :show-animation="true"
						:title="item.teamName">
						<view class="list-itme-content" v-for="(item1, index1) in item.child" :key="index1">
							<view class="list-itme-content-left">
								<view class="left-name-first">{{ item1.userName.split('-')[0][0] }}</view>
								<view class="left-name-all">{{ item1.userName.split('-')[0] }}</view>
								<view class="left-name-type">
									<u-tag borderColor="#f36f0d" type="warning" text="队长" plain shape="circle"
										v-if="item1.isCaptain == 'Y'"></u-tag>
									<u-tag borderColor="#f36f0d" type="warning" text="队员" plain shape="circle"
										v-else></u-tag>
								</view>
								<view class="left-name-type">{{ item1.telephone.split('-')[0] }}</view>
							</view>
							<!-- <u-icon name="arrow-right" color="#C7C7C7"></u-icon> -->
						</view>
					</uni-collapse-item>
				</uni-collapse>
			</view>
		</view>
		<u-empty v-else class="list-box" mode="data" icon="http://cdn.uviewui.com/uview/empty/data.png"></u-empty>
	</view>
</template>

<script>
	import {
		listFiremen
	} from '@/api/fireman/index.js'
	export default {
		data() {
			return {
				fireList: [], //消防员数组
				keyword: '',
				timer: ''
			}
		},
		mounted() {
			this.getlist()
		},
		methods: {
			search(e) {
				uni.$u.debounce(this.toNext(e), 200)
				// console.log(e);
			},
			toNext(e) {
				if (e == "") {
					this.getlist()
				} else {
					listFiremen({
						userName: e
					}).then(res => {
						let arr = res.rows
						this.fireList = this.changValue(arr)
					})
				}
			},
			getlist() {
				listFiremen().then(res => {
					let arr = res.rows
					this.fireList = this.changValue(arr)
				})
			},
			changValue(arr) {
				let dataInfo = {};
				arr.forEach((item, index) => {
					let {
						teamName
					} = item;
					// console.log(line_name)
					if (!dataInfo[teamName]) {
						dataInfo[teamName] = {
							teamName,
							child: []
						}
					}
					dataInfo[teamName].child.push(item);
				});
				return Object.values(dataInfo); // list 转换成功的数据
			}
		}
	}
</script>

<style lang="scss" scoped>
	.expert-container {
		//    #ifndef APP-PLUS
		height: calc(100vh - 44px);
		// #endif
		// #ifdef APP-PLUS
		height: calc(100vh);
		// #endif
		display: flex;
		flex-direction: column;
		font-family: Noto Sans S Chinese;

		.top-box-search {
			box-sizing: border-box;
			padding: 32rpx 28rpx;
			height: 140rpx;
			background-color: #fff;
		}

		.list-box {
			margin-top: 18rpx;
			flex: 1;
			overflow-y: auto;
			box-sizing: border-box;
			padding: 0 28rpx;
			background-color: #fff;

			.list-itme {
				width: 100%;

				/deep/ .uni-collapse-item__title {
					flex-direction: row-reverse;
				}

				/deep/ .uni-collapse-item__title-arrow-active {
					transform: rotate(90deg);
				}

				/deep/ .uniui-bottom:before {
					content: ' ' !important;
					display: inline-block;
					background: url('../../../../static/images/polling/xiala.png') center/contain no-repeat;
					color: #333333;
					width: 16rpx;
					height: 26rpx;
					font-size: 13px;
				}

				/deep/ .uni-collapse-item__wrap {
					padding-left: 20rpx;
				}

				.list-itme-title {
					display: flex;
					align-items: center;
					height: 94rpx;
					line-height: 94rpx;
					box-sizing: border-box;
					font-weight: 400;
					font-size: 16px;
					color: #333333;

					image {
						width: 26rpx;
						height: 26rpx;
						margin-right: 16rpx;
					}
				}

				.list-itme-content {
					width: 100%;
					display: flex;
					align-items: center;
					height: 94rpx;
					justify-content: space-between;

					box-sizing: border-box;
					border-bottom: 1px solid #ebeef5;
					padding-left: 32rpx;

					.list-itme-content-left {
						display: flex;
						align-items: center;

						.left-name-first {
							width: 60rpx;
							text-align: center;
							line-height: 60rpx;
							height: 60rpx;
							background: #0087fc;
							border-radius: 50%;
							font-weight: 600;
							font-size: 15px;
							color: #ffffff;
						}

						.left-name-all {
							font-weight: 600;
							font-size: 16px;
							color: #333333;
							width: 120rpx;
							margin-left: 56rpx;
							overflow: hidden;
							text-overflow: ellipsis; // 文本溢出添加省略号
							white-space: nowrap; // 碰到有边界不要折行
						}

						.left-name-type {
							font-weight: 400;
							margin-left: 32rpx;
							font-size: 11px;
							color: #f36f0d;
						}
					}
				}
			}
		}
	}
</style>