dev/dcp-app-gate/pages/nationalregionalCommissions/nationalregionalInformaions/committeeLayout.vue

<template>
	<view class="committeeLayout">
		<!-- 头部 -->
		<u-navbar back-icon-color="#fff" :height="50" :is-back="true" :back-text="$t('common.Back')"
			:background="{background:'#1777FE'}" :back-text-style="{color:'#fff'}" :border-bottom="true"
			title-color="#fff" title-width="400" :title="detail.committeeName" :custom-back="back">
		</u-navbar>
		<!-- 头部图像 -->
		<view class="banner">
			<image class="bannerimg" :src="websiteUrl+detail.nationalFlag" mode="widthFix"></image>
		</view>
		<!-- 主要信息 -->
		<view class="maininfo">
			<view class="block">
				<view class="blockTitle round">{{$t('common.AbouttheCommittee')}}</view>
				<!-- <rich-text :nodes="detail.committeeProfileUe"></rich-text> -->
				<view class="desText">{{detail.committeeProfile}}</view>
			</view>


			<view class="datalist">
				<view class="block" v-for="(positem,posindex) in positionList" :key="posindex">
					<view class="unit" v-if="positem.correlationType==='C'">
						<view class="block" @click="showDetail('o',positem)">
							<view class="blockTitle">
								<text>{{positem.language=='EN'?positem.countryDuty:positem.countryDuty}}</text>
								<text class="more">&gt;</text>
							</view>
							<view class="name">
								<image class="icon" src="../../../static/yituojigou.png" mode="aspectFill"></image>
								<text>{{positem.language=='EN'?positem.nameEn:positem.name}}</text>
							</view>
							<view class="desTitle">{{$t('common.Introduction')}}</view>
							<view class="desText line3">
								<!-- {{positem.unitProfile}} -->
								<rich-text :nodes="positem.unitProfile"></rich-text>
							</view>
						</view>
					</view>
					<view class="pos" v-if="positem.correlationType==='P'">
						<view class="blockTitle">{{positem.countryDuty}}</view>
						<view class="weiyuan">
							<view class="userThumb">
								<image class="userimg" v-if="positem.spareTwo" :src="websiteUrl+positem.spareTwo"
									mode="widthFix">
								</image>
								<image class="userimg" v-if="!positem.spareTwo" :src="userImg" alt=""></image>
							</view>
							<view class="info">
								<view class="name">
									<image class="icon" src="../../../static/weiyuanuser.png" mode="widthFix"></image>
									<text>{{positem.language=='EN'?positem.nameEn:positem.name}}</text>
								</view>
								<view class="name">
									<image class="icon iconp" src="../../../static/weiyuanpos.png" mode="widthFix">
									</image>
									<text>{{positem.country}}</text>
								</view>
							</view>
						</view>
						<view class="desTitle">{{positem.language=='EN'?'Profile':'人物简介'}}</view>
						<view class="desText">
							<rich-text :nodes="positem.personalProfileUe"></rich-text>
							<!-- {{positem.personalProfileUe}} -->
						</view>
					</view>
				</view>
			</view>
		</view>
		<!-- 动态 -->
		<view class="maininfo two" v-if="infoList.length>0">
			<view class="blockTitle round">{{this.$i18n.locale.toUpperCase()=='EN'?'Dynamics':'动态'}}</view>
			<view class="infowrap">
				<view class="infoitem" v-for="(infoitem,infoindex) in infoList" :key="infoindex"
					@click="showDetail('d',infoitem)">
					<view class="label">{{infoitem.activityName}}</view>
					<view class="date">{{formatDate(infoitem.activityStartTime)}}</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		name: 'CommitteeLayout',
		data() {
			return {
				detail: {},
				userImg: require('../../../static/E2.png'),
				positionList: [],
				infoList: []
			}
		},
		onShow() {
			this.detail = uni.getStorageSync('committeeData') ? uni.getStorageSync('committeeData') : false;
		},
		onUnload() {
			uni.removeStorageSync('committeeData')
		},
		mounted() {
			this.getMoreData()
		},
		methods: {
			//路由后退一步
			back() {
				// #ifdef H5
				history.back()
				// #endif
				// #ifndef H5
				uni.navigateBack()
				// #endif
			},
			showDetail(type, item) {
				let url;
				if (type == 'o') {
					console.log(type, item)
					url = '/pages/nationalregionalCommissions/nationalregionalInformaions/organizationDetail?entityId=' +
						item.entityId
				} else {
					url =
						'/pages/nationalregionalCommissions/nationalregionalInformaions/nationalregionlInformationDetail?id=' +
						item.entityId
				}
				if (url) uni.navigateTo({
					url: url
				})
			},
			// 获取详情数据
			async getMoreData() {
				let res = await this.$myRequest({
					url: '/project/committeeBasisInfos/getCommitteeCountryRelationInfoForApp',
					data: {
						entityId: this.detail.entityId,
						language: this.$i18n.locale.toUpperCase()
					}
				})
				if (res.status == 200) {
					if (res.data) {
						let data = res.data;
						// 职位
						if (data.committeeShowMessageInfos) {
							if (Array.isArray(data.committeeShowMessageInfos) && data.committeeShowMessageInfos
								.length > 0) {
								let unit = [];
								let pos = [];
								for (let i = 0; i < data.committeeShowMessageInfos.length; i++) {
									if (data.committeeShowMessageInfos[i]['correlationType'] === 'C') unit.push(data
										.committeeShowMessageInfos[i]);
									else pos.push(data.committeeShowMessageInfos[i]);
								}
								this.positionList = [...unit, ...pos];
							}
						}
						// 动态
						if (data.activityInfos) {
							if (Array.isArray(data.activityInfos) && data.activityInfos.length > 0) {
								this.infoList = data.activityInfos
							}
						}
					}
				}

			},
			//
		}

	}
</script>

<style lang="scss" scoped>
	.committeeLayout {
		.space {
			height: 10upx;
			width: 100%;
			background-color: #F3F4F5;
		}

		background-color:#F3F4F5;

		.banner {
			position: relative;
			overflow: hidden;
			z-index: 1;

			.bannerimg {
				display: block;
				width: 100%;
			}
		}

		.maininfo {
			margin: -16upx auto 0;
			background: #fff;
			border-radius: 20upx 20upx 0 0;
			padding: 20upx;
			position: relative;
			z-index: 10;

			&.two {
				margin: 20upx auto 0;

				.blockTitle.round {
					margin-bottom: 0;
				}

				.infoitem {
					margin: 10upx 0;
					padding: 20upx 0;
					border-bottom: 1px solid #eee;

					&:last-of-type {
						border: none
					}

					.label {
						overflow: hidden;
						text-overflow: ellipsis;
						white-space: nowrap;
						height: 50upx;
						line-height: 50upx;
					}

					.date {
						color: #aaa;
					}
				}
			}

			.block {
				margin: 20upx 0;

				.name {
					display: flex;
					align-items: center;
					overflow: hidden;
					text-overflow: ellipsis;
					white-space: nowrap;
					text-indent: 16upx;
					margin: 16upx 0;

					.icon {
						width: 36upx;
						height: 36upx;
						display: block;
						margin: -9upx 0 0 48upx;
					}
				}

				.desTitle {
					position: relative;
					overflow: hidden;
					padding: 16upx;
					text-indent: 30upx;

					&::after {
						content: "";
						position: absolute;
						left: 20upx;
						top: 26upx;
						width: 0;
						height: 0;
						border: 10upx solid #0F2F59;
						border-right: none;
						border-top: 10upx solid transparent;
						border-bottom: 10upx solid transparent;
					}
				}

				.desText {
					padding: 0 20upx;
					text-indent: 64upx;

					&.line3 {
						overflow: hidden;
						text-overflow: ellipsis;
						display: -webkit-box;
						-webkit-box-orient: vertical;
						-webkit-line-clamp: 3;
					}
				}

				.weiyuan {
					display: flex;
					align-items: center;
					padding: 0 20upx;
					margin-left: 20upx;

					.userThumb {
						width: 140upx;
						height: 140upx;
						border-radius: 50%;
						// padding:4upx;
						border: 2upx solid #DFF3FB;
						position: relative;
						overflow: hidden;

						.userimg {
							display: block;
							width: 110%;
							margin: 0;
						}
					}

					.info {
						.name {
							text-indent: 10upx;
							display: flex;
							align-items: center;
							height: 60upx;
							line-height: 60upx;

							.icon {
								width: 32upx;
								display: block;
								margin: 0 0 0 28upx;

								&.iconp {
									height: 40upx
								}
							}
						}
					}
				}
			}

			.blockTitle {
				height: 80upx;
				line-height: 80upx;
				background-color: #EFF6FF;
				padding: 0 20upx;
				color: #0B0B11;
				font-size: 30upx;
				margin-bottom: 30upx;
				position: relative;
				overflow: hidden;
				text-indent: 20upx;
				display: flex;
				justify-content: space-between;
				align-items: center;
				font-weight: 700;

				&.round {
					border-radius: 20upx 20upx 0 0;
				}

				.more {
					color: #999;
					font-size: 28upx
				}

				&:after {
					position: absolute;
					left: 20upx;
					top: 25upx;
					content: "";
					width: 8upx;
					height: 30upx;
					background: #0055D4;
				}
			}
		}
	}
</style>