JiaZhiQianYan/components/gltd-view/gltd-view.vue

<template>
	<view class="managementTeamList">
		<block v-for="(item,index) in managementList" :key="index">
			<view v-if="item.list.length>0" class="positionNumC flex">
				<view class="position">{{item.key}}</view>
				<view class="num director">{{item.list.length}}人</view>
			</view>
			<block v-if="item.list.length>4&&!item.isExpand">
				<view class="item flex" v-for="(pitem,pindex) in item.list.slice(0,4)" :key="index">
					<view class="avatarC flexCenter relative director">
						{{getLastNameStr(pitem.name)}}
						<view :class="'sexC flexCenter absolute '+(pitem.gender=='女'?'female':'male')">
							<image v-if="pitem.gender=='女'" class="icon" src="/pagesStock/static/icon/female.png" mode="widthFix">
							</image>
							<image v-else class="icon" src="/pagesStock/static/icon/male.png" mode="widthFix">
							</image>
						</view>
					</view>
					<view class="flex1">
						<view class="flex">
							<view class="name">{{pitem.name}}</view>
							<view class="position">{{pitem.position_name}}</view>
							<view class="date flex1">任职日期：{{pitem.start_date}}</view>
						</view>
						<view class="educationAgeC flex">
							<view class="education label">{{pitem.education}}</view>
							<view class="age label">{{getAgeByBirthYear(pitem.birth_year)}}岁</view>
						</view>
					</view>
				</view>
			</block>
			<block v-else>
				<view class="item flex" v-for="(pitem,pindex) in item.list" :key="index">
					<view class="avatarC flexCenter relative director">
						{{getLastNameStr(pitem.name)}}
						<view :class="'sexC flexCenter absolute '+(pitem.gender=='女'?'female':'male')">
							<image v-if="pitem.gender=='女'" class="icon" src="/pagesStock/static/icon/female.png" mode="widthFix">
							</image>
							<image v-else class="icon" src="/pagesStock/static/icon/male.png" mode="widthFix">
							</image>
						</view>
					</view>
					<view class="flex1">
						<view class="flex">
							<view class="name">{{pitem.name}}</view>
							<view class="position">{{pitem.position_name}}</view>
							<view class="date flex1">任职日期：{{pitem.start_date}}</view>
						</view>
						<view class="educationAgeC flex">
							<view class="education label">{{pitem.education}}</view>
							<view class="age label">{{getAgeByBirthYear(pitem.birth_year)}}岁</view>
						</view>
					</view>
				</view>
			</block>
			<view v-if="item.list.length>4" class="expandMoreC flexCenter" @click="clickExpandOrRetractManagement(index)">
				<view >{{item.isExpand?'收起':'展开查看'}}</view>
				<image class="arrow" src="/pagesStock/static/icon/lookMoreArrow.png" mode="widthFix">
				</image>
			</view>
		</block>
	</view>
</template>

<script>
	import { getAgeByBirthYear, getLastNameStr } from '@/utils/util';

	export default {
		name:"gltd-view",
		data() {
			return {
				getLastNameStr:getLastNameStr,				//获取姓
				getAgeByBirthYear:getAgeByBirthYear	//获取年龄
			};
		},
		props:{
			managementList:Array
		},
		methods:{
			/**
			 * 点击展开或收起管理团队人员
			 */
			clickExpandOrRetractManagement(index)
			{
				this.managementList[index].isExpand = !this.managementList[index].isExpand
			},
		},
		
	}
</script>

<style lang="less">
.managementTeamList {
	padding: 0 20rpx;
	.positionNumC {
		height: 70rpx;
		.position {
			margin-right: 11rpx;
			font-size: 28rpx;
			font-weight: bold;
		}
		.num {
			padding: 0 14rpx;
			line-height: 30rpx;
			border-radius: 5rpx;
			font-size: 20rpx;
			font-weight: bold;
			color: white;
		}

		.num.director {
			background-color: #99AFEC;
		}

		.num.supervisor {
			background-color: #B499EC;
		}

		.num.other {
			background-color: #B5B5C9;
		}
	}

	.item {
		background-color: #FAFAFC;
		margin-bottom: 20rpx;
		padding: 20rpx 25rpx 20rpx 20rpx;
		border-radius: 10rpx;

		.avatarC {
			margin-right: 18rpx;
			width: 80rpx;
			height: 80rpx;
			border-radius: 50%;
			font-size: 30rpx;
			font-weight: bold;
			color: white;

			.sexC {
				right: 0;
				bottom: 0;
				width: 30rpx;
				height: 30rpx;
				border-radius: 50%;
				border: solid 2rpx white;

				.icon {
					width: 16rpx;
					height: auto;
				}
			}

			.sexC.female {
				background-color: #FA5A93;
			}

			.sexC.male {
				background-color: #3E6CFC;
			}
		}

		.avatarC.director {
			background-color: #99AFEC;
		}

		.avatarC.supervisor {
			background-color: #B499EC;
		}

		.avatarC.other {
			background-color: #B5B5C9;
		}

		.name {
			margin-right: 13rpx;
			font-size: 24rpx;
			font-weight: bold;
			color: #666;
		}

		.position {
			font-size: 22rpx;
			font-weight: 500;
			color: #999;
		}

		.date {
			font-size: 20rpx;
			font-weight: 500;
			color: #999;
			text-align: right;
		}

		.educationAgeC {
			margin-top: 8rpx;

			.label {
				margin-right: 10rpx;
				background-color: #F1F1F1;
				line-height: 30rpx;
				padding: 0 16rpx;
				font-size: 20rpx;
				font-weight: 500;
				color: #999;
			}
		}
	}

	.expandMoreC {
		height: 80rpx;
		border-bottom: solid 1rpx #E7E7E7;
		font-size: 24rpx;
		font-weight: 500;
		color: #C9C9C9;

		.arrow {
			margin-left: 18rpx;
			width: 11rpx;
			height: auto;
		}
	}
}
</style>