hbj_app/pages/indexpage/expert/expert.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"></u-search>
		</u-sticky>

		<view class="list-box" v-if="teamlist.length > 0">
			<view class="list-itme">
				<uni-collapse v-model="value" :accordion="false" @change="collapseChange" v-for="(item, index) in teamlist" ref="collapseBox" :key="index">
					<uni-collapse-item :name="`key${index + 1}`" title-border="show" :border="false" :show-arrow="true" :show-animation="true">
						<template v-slot:title>
							<view class="list-itme-title">
								<image src="../../../static/images/polling/gongchnag.png" mode="scaleToFill" />
								<view>
									{{ item.label }}
									<text style="color: #888888">({{ item.children.length }}队)</text>
								</view>
							</view>
						</template>
						<uni-collapse :accordion="true" @change="collapseChange" v-for="(ita, ina) in item.children" :key="ina" v-if="item.children">
							<uni-collapse-item title-border="show" :border="false" :show-arrow="true" :show-animation="true">
								<template v-slot:title>
									<view class="list-itme-title" style="font-size: 15px">
										<text v-if="ita.label">{{ ita.label }}</text>
										<text v-if="ita.children" style="color: #888888">({{ ita.children.length }}人)</text>
									</view>
								</template>
								<view class="list-itme-content" v-if="ita.children" v-for="(itl, inl) in ita.children" :key="inl" @click="goToPage(itl)">
									<view class="list-itme-content-left">
										<view class="left-name-first">{{ itl.label.split('-')[0][0] }}</view>
										<view class="left-name-all">{{ itl.label.split('-')[0] }}</view>
										<view class="left-name-type">
											<u-tag borderColor="#f36f0d" type="warning" :text="itl.label.split('-')[1]" plain shape="circle"></u-tag>
										</view>
									</view>
									<u-icon name="arrow-right" color="#C7C7C7"></u-icon>
								</view>
							</uni-collapse-item>
						</uni-collapse>
					</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 { listEmergencycrew, listEmergencyteam, emergencyteamTree } from '@/api/indexpage/emergencycrew/index.js';
export default {
	data() {
		return {
			timer: '',
			value: ['key1', 'key2'],
			keyword: '',
			teamlist: [] //应急队伍
		};
	},
	onLoad() {
		this.getList();
	},
	watch: {
		keyword(newdata, olddata) {
			let that = this;
			//防抖函数
			clearTimeout(that.timer);
			that.timer = setTimeout(function() {
				if (newdata === '') {
					//发请求 请求全部
					emergencyteamTree({ type: '1' }).then(res => {
						that.teamlist = res.data;
					});
				} else {
					//发请求 请求全部
					emergencyteamTree({ type: '1', param: newdata }).then(res => {
						that.teamlist = res.data;
					});
				}
			}, 600);
		}
	},
	methods: {
		collapseChange() {
			setTimeout(() => {
				this.$nextTick(() => {
					this.$refs.collapseBox.forEach((item, index) => {
						item.resize();
					});
				});
			}, 300);
		},
		async getList() {
			this.teamlist = [];
			let query = {
				type: 1
			};
			let result = await emergencyteamTree(query);
			if (result.code == 200) {
				this.teamlist = result.data;
			}
		},
		goToPage(data) {
			//携带设备id
			this.$tab.navigateTo(`/pages/indexpage/expert/renYuanDetail/renYuanDetail?ssId=${data.id}`);
		}
	}
};
</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>