dev/dcp-app-gate/pages/nationalregionalCommissions/nationalregionalInformaions/organizationDetail.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="title" :custom-back="back">
		</u-navbar>
		<!-- 头部图像 -->
		<view class="banner">
			<image class="bannerimg" :src="websiteUrl+detail.spareTwo" mode="widthFix"></image>
		</view>
		<!-- 主要信息 -->
		<view class="maininfo">
			<view class="block">
				<view class="blockTitle round center">{{detail.language=='EN'?detail.nameEn:detail.name}}</view>
				<view class="baseinfo">
					<view class="infoitem">
						<view class="thumb"></view>
						<view class="text">
							<view class="label">{{$t('common.place')}} :
								{{detail.language=='EN'?detail.countryDict:detail.country}}</view>
						</view>
					</view>
					<view class="infoitem">
						<view class="thumb"></view>
						<view class="text">
							<view class="label">{{$t('common.OfficialEmail')}} : {{detail.officialEmail}}</view>
						</view>
					</view>

					<view class="infoitem">
						<view class="thumb"></view>
						<view class="text">
							<view class="label">{{$t('common.LegalRepresentative')}} : {{detail.corporateName}}</view>
						</view>
					</view>
					<view class="infoitem">
						<view class="thumb"></view>
						<view class="text">
							<view class="label">{{$t('common.DateOfEstablishment')}} : {{formatDate(detail.createDate)}}
							</view>
						</view>
					</view>
					<view class="infoitem">
						<view class="thumb"></view>
						<view class="text">
							<view class="label">{{$t('common.OfficialWebsite')}} : {{detail.officialWebsitePath}}</view>
						</view>
					</view>
				</view>
			</view>
			<!-- 简介默认展开 -->
			<view class="block">
				<view class="blockTitle" @click="upAndDwon('des','flagDes')">
					<text>{{$t('common.Introduction')}}</text>
					<u-icon name="arrow-up" color="#aaa" v-if="flagDes"></u-icon>
					<u-icon name="arrow-down" color="#aaa" v-if="!flagDes"></u-icon>
				</view>
				<view class="desText" :class="{line3:flagDes}" v-html="detail.unitProfile"></view>
			</view>
			<!-- 信息默认关闭 -->
			<view class="wrap">
				<view class="block blockitem" v-for="(blockitem,blockindex) in infomationList" :key="blockindex">
					<view class="blockTitle" @click="upAndDwon('info','flag',blockindex)">
						<text class="titleText">{{blockitem.title}}</text>
						<u-icon name="arrow-up" color="#aaa" v-if="!blockitem.flag"></u-icon>
						<u-icon name="arrow-down" color="#aaa" v-if="blockitem.flag"></u-icon>
					</view>
					<view class="desText" :class="{line3:!blockitem.flag}">
						<rich-text :nodes="blockitem.contentHtml" :margin-left="20"></rich-text>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		name: 'CommitteeLayout',
		data() {
			return {
				entityId: '',
				title: '',
				detail: {},
				flagDes: false,
				infomationList: []
			}
		},
		onShow() {
			this.title = this.$i18n.locale.toUpperCase() == 'ZH' ? '详情' : 'Detail'
			setTimeout(() => {
				this.getOrganizationDetail();
				this.getDataList();
			}, 100)
		},
		onLoad(e) {
			this.entityId = e.entityId
		},
		methods: {
			//路由后退一步
			back() {
				// #ifdef H5
				history.back()
				// #endif
				// #ifndef H5
				uni.navigateBack()
				// #endif
			},
			//开关显示更多内容
			upAndDwon(type, attr, index) {
				if (type == 'des') this[attr] = !this[attr];
				else {
					this.infomationList[index]['flag'] = !this.infomationList[index]['flag'];
				}
			},
			// 获取机构详情的数据
			async getOrganizationDetail() {
				let data = {
					entityId: this.entityId,
					language: this.$i18n.locale.toUpperCase()
				}
				let res = await this.$myRequest({
					url: '/project/committeeShowMessageInfos/getShowMessageInfoDetail',
					data: data
				})
				if (res.status == 200) {
					if (res.data) {
						let data = res.data
						if (data.committeeShowMessageInfo) {
							this.detail = data.committeeShowMessageInfo;
						}
					}
				}
			},
			// 获取列表数据
			async getDataList() {
				let res = await this.$myRequest({
					url: '/cms/cmsInformationViews/getInformationList/',
					data: {
						'businessType': 'organizational_structure',
						'businessId': this.entityId,
						'language': this.$i18n.locale.toUpperCase()
					}
				})
				if (res.status == 200) {
					let data = res.data;
					if (data.allDataList && data.allDataList.length > 0) {
						data.allDataList.forEach((item, index) => {
							item.flag = false
						})
						this.infomationList = data.allDataList
					} else this.infomationList = []

				}
			}
		}

	}
</script>

<style lang="scss" scoped>
	.committeeLayout {
		.banner {
			position: relative;
			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;

			.block {
				margin: 16upx 0;

				.blockTitle {
					height: 80upx;
					line-height: 80upx;
					background-color: #EFF6FF;
					padding: 0 20upx;
					color: #0F2F59;
					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;

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

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

					&.round.center {
						text-indent: 0;
						text-align: center;
						color: red;
						display: block;
						color: #0B0B11;

						&:after {
							display: none;
						}
					}

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

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

				.baseinfo {
					.infoitem {
						height: 80upx;
						display: flex;
						align-items: center;

						.thumb {
							position: relative;
							overflow: hidden;
							margin-right: 10upx;
						}

						&:nth-of-type(1) {
							.thumb {
								width: 36upx;
								height: 36upx;
								background: url('../../../static/icon/1.png') no-repeat -4upx 0;
								background-size: 100%;
							}
						}

						&:nth-of-type(2) {
							.thumb {
								width: 32upx;
								height: 32upx;
								background: url('../../../static/icon/3.png') no-repeat 2upx 0;
								background-size: 100%;
							}
						}

						&:nth-of-type(3) {
							.thumb {
								width: 36upx;
								height: 36upx;
								background: url('../../../static/icon/2.png') no-repeat 0 0;
								background-size: 100%;
							}
						}

						&:nth-of-type(4) {
							.thumb {
								width: 36upx;
								height: 36upx;
								background: url('../../../static/icon/4.png') no-repeat 0 0;
								background-size: 100%;
							}
						}

						&:nth-of-type(5) {
							.thumb {
								width: 36upx;
								height: 36upx;
								background: url('../../../static/icon/5.png') no-repeat 0 0;
								background-size: 100%;
							}
						}
					}
				}

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

				.desText {
					padding: 0 0upx;
					text-indent: 0em;

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