realty/virgo.wzfrontend/yui_wx/components/uni-mall-list/uni-mall-list.vue

<template>
	<view>
		<view class="box-head"><uni-mall-head ref="refUniMallHead" @change="tabChange"></uni-mall-head></view>
		<view class="box-list">
			<mescroll-empty :option="{tip:'暂无部门或成员'}" v-if="currentData.length === 0 && userData.length === 0">
			</mescroll-empty>
			<view>
				<view class="box-list-item"
					:class="[item.children && item.children.length ? 'box-list-item-department-icon' : '','box-list-item-department']"
					:key="item.id" @click="handelClickItem('depart',item)" v-for="item in currentData">
					<view class="box-list-item-department-pic">
						<uni-icons type="staff-filled" color="#08979c" size="24"></uni-icons>
					</view>
					<view class="box-list-item-right">
						<view class="box-list-item-text">{{ item.name }}</view>
						<uni-icons class="inherit-icons" type="right" color="#8c8c8c"></uni-icons>
					</view>
				</view>
				<view class="box-list-item box-list-item-user" :key="item.id" @click="handelClickItem('user',item)"
					v-for="item in userData">
					<view class="box-list-item-user-pic">
						<image v-if="item.pic" :src="item.portrait"></image>
						<text v-else>{{getUserName(item.name)}}</text>
					</view>
					<view class="box-list-item-right">
						<view class="box-list-item-text">{{ item.name }}</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import uniMallHead from '@/components/uni-mall-head/uni-mall-head.vue';
	export default {
		props: {
			dataList: {
				type: Array,
				default: () => []
			},
			defaultHeadList: {
				type: Object,
				default: () => {}
			}
		},
		components: {
			uniMallHead
		},
		data() {
			return {
				currentData: [],
				userData: []
			};
		},
		mounted() {
			this.init();
		},
		watch: {
			dataList() {
				this.currentData = this.dataList;
			}
		},
		methods: {
			init() {
				if (Object.keys(this.defaultHeadList).length > 0) {
					this.$refs.refUniMallHead.addTab(this.defaultHeadList);
				}
				this.currentData = this.dataList;
				this.userData = [];
			},
			tabChange(obj) {
				this.getCurrentData(obj.id, this.dataList);
			},
			handelClickItem(type, item) {
				if (type === 'depart') {
					if (item.children) {
						this.$refs.refUniMallHead.addTab({
							name: item.name,
							id: item.id
						});
						this.currentData = item.children;
						this.userData = item.users || [];
					}
				}
				this.$emit('change', type, item);
			},
			getUserName(name) {
				if (name.length === 0) {
					return '';
				} else if (name.length <= 2) {
					return name;
				} else if (name.length >= 3) {
					return name.substring(name.length - 2);
				}
			},
			getCurrentData(id, data) {
				if (id === this.defaultHeadList.id) {
					this.currentData = this.dataList;
					this.userData = [];
				} else {
					if (data.length > 0) {
						data.map(item => {
							if (item.id === id) {
								this.currentData = item.children || [];
								this.userData = item.users || [];
							}
							if (item.children && item.children.length > 0) {
								this.getCurrentData(id, item.children);
							}
						});
					}
				}
			}
		}
	};
</script>

<style lang="scss" scoped>
	.box-head {
		position: fixed;
		left: 0px;
		width: 100%;
		height: 96rpx;
		background: #ffffff;
		padding-left: 34rpx;
		box-sizing: border-box;
		overflow-y: hidden;
		z-index: 999;
		border-top: 1px solid $uni-border-1;
	}

	.box-list {
		padding-top: 52px;

		.box-list-item {
			position: relative;
			height: 60px;
			display: flex;
			align-items: center;
			padding: 0 14px;
			box-sizing: border-box;
			background: #ffffff;
			margin-bottom: 1px;

			&:active {
				background: #f2f3f4;
			}

			&:last-child {
				margin-bottom: 0px;
			}

			.box-list-item-department-pic {
				width: 40px;
				height: 40px;
				background: rgba(8, 151, 156, 0.1);
				border-radius: 10px;
				display: flex;
				align-items: center;
				justify-content: center;
				margin-right: 14px;
				overflow: hidden;

				image {
					width: 20px;
					height: 20px;
				}
			}

			.user-icon {
				margin-right: 20rpx;
			}

			.box-list-item-user-pic {
				width: 40px;
				height: 40px;
				background: $uni-primary;
				border-radius: 10px;
				display: flex;
				align-items: center;
				justify-content: center;
				margin-right: 14px;
				overflow: hidden;

				image {
					width: 40px;
					height: 40px;
				}

				text {
					color: #ffffff;
					font-size: 12px;
				}
			}

			.box-list-item-right {
				display: flex;
				align-items: center;
				justify-content: space-between;
				flex: 1;
			}

			.box-list-item-user-tag {
				text {
					box-sizing: border-box;
					border-radius: 8px;
					padding: 4px 8px;
					font-size: 10px;
					margin-left: 5px;

					&:first-child {
						margin-left: 0px;
					}

					&:nth-child(1) {
						background: rgba(49, 210, 144, 0.05);
						border: 1px solid #31d290;
						color: #31d290;
					}

					&:nth-child(2) {
						background: rgba(55, 127, 255, 0.05);
						border: 1px solid #377fff;
						color: #377fff;
					}
				}
			}
		}

		.box-list-item-department+.box-list-item-user {
			margin-top: 10px;
		}
	}
</style>