dev/dcp-app-gate/pages/nationalregionalCommissions/nationalregionalInformaions/committeeLayoutZone.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="desText jianjie">
			<rich-text :nodes="detail.committeeProfileUe"></rich-text>
		</view>
		<!-- 主要信息 -->
		<view class="maininfo">
			<view class="datalist">
				<view class="block" v-for="(positem,posindex) in positionList" :key="posindex">
					<view class="blockTitle"
						:class="{zhuxi:positem.regionDutyDict==='1',fuzhuxi:positem.regionDutyDict==='2',weiyuan:positem.regionDutyDict==='3'}">
						{{positem.regionDuty}}
					</view>
					<view class="weiyuan">
						<view class="userThumb">
							<image class="userimg" v-if="positem.spareTwo" :src="websiteUrl+positem.spareTwo"></image>
							<image class="userimg" v-if="!positem.spareTwo" :src="userImg" mode="widthFix" 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 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 {
				entityId: '',
				detail: {},
				userImg: require('../../../static/E2.png'),
				positionList: [],
				infoList: []
			}
		},
		onLoad(e) {
			this.entityId = e.entityId
		},
		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.entityId,
						language: this.$i18n.locale.toUpperCase()
					}
				})
				if (res.status == 200) {
					if (res.data) {
						let data = res.data;
						// 基本详情
						if (data.committeeBasisInfo) {
							this.detail = data.committeeBasisInfo
						}
						// 职位
						if (data.committeeShowMessageInfos) {
							let posdata = data.committeeShowMessageInfos;
							if (Array.isArray(posdata) && posdata.length > 0) {
								let zhuxi = [];
								let fuzhuxi = [];
								let weiyuan = [];
								for (let i = 0; i < posdata.length; i++) {
									if (posdata[i]['correlationType'] === 'P' && posdata[i]['regionDutyDict'] ===
										'1') {
										zhuxi.push(posdata[i]);
									} else if (posdata[i]['correlationType'] === 'P' && posdata[i][
										'regionDutyDict'] === '2') {
										fuzhuxi.push(posdata[i]);
									} else {
										weiyuan.push(posdata[i]);
									}
								}
								this.positionList = [...zhuxi, ...fuzhuxi, ...weiyuan];
							}
						}
						// 动态
						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;
		}

		.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;
					}
				}

				.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: 140upx;
							height: 140upx;
							border-radius: 50%;
						}
					}

					.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
				}

				&.zhuxi {
					background-color: #FAEDED;
					color: #5A2C0F;

					&:after {
						position: absolute;
						left: 20upx;
						top: 25upx;
						content: "";
						width: 8upx;
						height: 30upx;
						background: #D45100;
					}
				}

				&.fuzhuxi {
					background-color: #FAF2ED;
					color: #5A2C0F;

					&:after {
						position: absolute;
						left: 20upx;
						top: 25upx;
						content: "";
						width: 8upx;
						height: 30upx;
						background: #D45100;
					}
				}

				&.weiyuan {
					background-color: #FAEDED;
					color: #0F2F59;

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

		.desText {
			padding: 0 20upx;

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

			&.jianjie {
				padding: 40upx 36upx 20upx 36upx;
				background: #EEF9FA;
				text-indent: 56upx;
			}
		}
	}
</style>