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

<template>
	<view style="margin: 0 20upx;">
		<u-navbar  :back-text="i18n('Back')" :back-text-style="backStyle"
			back-icon-color="#fff" title-color="#fff" 
			:title="title" 
			:background="background">
		</u-navbar>
		<view class="" style="margin-top: 30upx;">
			
		</view>
		<view style="background-color: #EEF9FA;padding: 0 10upx;" v-if="$i18n.locale=='zh'"  v-html="list.details?list.details.committeeProfileUe:''">
			
		</view>
		<view class="" style="background-color: #EEF9FA;padding: 0 10upx;" v-else  v-html="activecommittee.committeeProfileUe">
			
		</view>
		<view class="" style="min-height: 600upx;background-color: #fff;margin-top: 10upx; padding: 20upx 10upx;border: 1px solid #fff;
box-shadow: 0px -5px 6px rgba(0, 0, 0, 0.16);
opacity: 1;
border-radius: 30px 30px 0px 0px;">
			<view class="" style="margin:15upx 0upx;"
				v-if="list.data && list.data.chairman || list.data &&list.data.vicePresident 
					|| list.data &&list.data.secretary || list.data &&list.data.member">
				<view class="Box_view" style="min-height: 250upx;line-height: 100upx;position: relative;" v-for="(item,index) in list.data.chairman" :class="index==0?'border-top':''" >
					<view class="introduceMap-title" v-if="index==0">
						<!-- {{committeePostDictsMaps(item.regionDutyDict)}} -->
						<text class="border-6DD400"></text>
						{{item.regionDuty}}
					</view>
					<view class="item-top" >
							<view class="" style="float: left;
							vertical-align: middle;margin:0 25upx 15upx 0;">
								<image class="imgage-user" v-if = "!item.spareTwo" src="@/static/img/nationaIntroductionList/user.png" alt="">
								<image class="imgage-user" v-else  :src="'https://www.geidcp.com//api/file/pub/' + item.spareTwo"  alt=""> 
							</view>
							<view style="width: 450upx;margin-left: 8upx;  overflow: hidden;text-overflow: ellipsis;
								white-space: nowrap;
								vertical-align: middle;" @click="" @click="toViews(item.entityId)">
								<u-icon name="man-add" style="margin-right: 8upx;"></u-icon>
								{{$i18n.locale == 'zh'?item.name:item.nameEn}}
							</view>
							<view v-if="item.country" style="max-width: 450upx; overflow: hidden;text-overflow: ellipsis;
								white-space: nowrap;
								vertical-align: middle;">
								<u-icon name="map" style="margin-right: 8upx;"></u-icon>
								
								({{item.country}})
								<!-- ({{countryDictsMap(item.countryDict)}}) -->
								</view>
							<view class="">
								{{item.personalProfile}}
							</view>
					</view>
					
				</view>
				<u-gap  v-if="list.data.chairman.length>0" height="20" bg-color="#F3F4F5" style="width: 750upx !important;margin-top: 30upx;"></u-gap>
				<view class="Box_view" style="min-height: 250upx;line-height: 100upx;position: relative;"
					v-for="(item,index) in list.data.vicePresident" :class="index==0?'border-top':''" >
					<view class="introduceMap-title" v-if="index==0">
						<text class="border-6DD400"></text>
						{{item.regionDuty}}
						<!-- {{committeePostDictsMaps(item.regionDutyDict)}} -->
					</view>
					<view class="item-top">
							<view class="" style="float: left;
							vertical-align: middle;margin: 0 25upx 15upx 0;">
								<image class="imgage-user" v-if = "!item.spareTwo" src="@/static/img/nationaIntroductionList/user.png" alt="">
								<image class="imgage-user" v-else  :src="'https://www.geidcp.com//api/file/pub/' + item.spareTwo"  alt=""> 
							</view>
							<view style="width: 450upx;margin-left: 8upx;  overflow: hidden;text-overflow: ellipsis;
								white-space: nowrap;
								vertical-align: middle;" @click="toViews(item.entityId)">
								<u-icon name="man-add" style="margin-right: 8upx;"></u-icon>
								{{$i18n.locale == 'zh'?item.name:item.nameEn}}
							</view>
							<view v-if="item.country" style="max-width: 450upx; overflow: hidden;text-overflow: ellipsis;
								white-space: nowrap;
								vertical-align: middle;">
								<u-icon name="map" style="margin-right: 8upx;"></u-icon>
								<!-- ({{countryDictsMap(item.countryDict)}}) -->
								({{item.country}})
								</view> 
							<view class="">
								{{item.personalProfile}}
							</view>
					</view>
					
				</view>
				<u-gap v-if="list.data.vicePresident.length>0"  height="20" bg-color="#F3F4F5" style="width: 750upx !important;margin-top: 30upx;"></u-gap>
				<view class="Box_view" style="min-height: 250upx;line-height: 100upx;position: relative;"
					v-for="(item,index) in list.data.secretary" :class="index==0?'border-top':''">
					<view class="introduceMap-title" v-if="index==0">
						<text class="border-6DD400"></text>
						<!-- {{committeePostDictsMaps(item.regionDutyDict)}} -->
						{{item.regionDuty}}
					</view>
					<view class="item-top">
							<view class="" style="float: left;
							vertical-align: middle;margin: 0 25upx 15upx 0;">
								<image class="imgage-user" v-if = "!item.spareTwo" src="@/static/img/nationaIntroductionList/user.png" alt="">
								<image class="imgage-user" v-else  :src="'https://www.geidcp.com//api/file/pub/' + item.spareTwo"  alt=""> 
							</view>
							<view style="width: 450upx;margin-left: 8upx;  overflow: hidden;text-overflow: ellipsis;
								white-space: nowrap;
								vertical-align: middle;" @click="toViews(item.entityId)">
								<u-icon name="man-add" style="margin-right: 8upx;"></u-icon>
								{{$i18n.locale == 'zh'?item.name:item.nameEn}}
							</view>
							<view v-if="item.country" style="max-width: 450upx; overflow: hidden;text-overflow: ellipsis;
								white-space: nowrap;
								vertical-align: middle;">
								<u-icon name="map" style="margin-right: 8upx;"></u-icon>
								<!-- ({{countryDictsMap(item.countryDict)}}) -->
								({{item.country}})
								</view>
							<view class="">
								{{item.personalProfile}}
							</view>
					</view>
					
				</view>
				<u-gap v-if="list.data.secretary.length>0"  height="20" bg-color="#F3F4F5" style="width: 750upx !important;margin-top: 30upx;"></u-gap>
				<view class="Box_view" style="min-height: 250upx;line-height: 100upx;position: relative;"
					v-for="(item,index) in list.data.member" :class="index==0?'border-top':''">
					<view class="introduceMap-title" v-if="index==0">
						<text class="border-6DD400"></text>
						<!-- {{committeePostDictsMaps(item.regionDutyDict)}} -->
						{{item.regionDuty}}
					</view>
					<view class="item-top" >
							<view class="" style="float: left;
							vertical-align: middle;margin: 0 25upx 15upx 0;">
								<image class="imgage-user" v-if = "!item.spareTwo" src="@/static/img/nationaIntroductionList/user.png" alt="">
								<image class="imgage-user" v-else  :src="'https://www.geidcp.com//api/file/pub/' + item.spareTwo"  alt=""> 
							</view>
							<view style="width: 450upx;margin-left: 8upx;  overflow: hidden;text-overflow: ellipsis;
								white-space: nowrap;
								vertical-align: middle;" @click="toViews(item.entityId)">
								<u-icon name="man-add" style="margin-right: 8upx;"></u-icon>
								{{$i18n.locale == 'zh'?item.name:item.nameEn}}
							</view>
							<view v-if="item.country" style="max-width: 450upx;  overflow: hidden;text-overflow: ellipsis;
								white-space: nowrap;
								vertical-align: middle;">
								<u-icon name="map" style="margin-right: 8upx;"></u-icon>
								({{item.country}})
								<!-- ({{countryDictsMap(item.countryDict)}}) -->
								</view>
							<view class="">
								{{item.personalProfile}}
							</view>
					</view>
					
				</view>
				<u-gap v-if="list.data.member.length>0"  height="20" bg-color="#F3F4F5" style="width: 750upx !important;margin-top: 30upx;"></u-gap>
			</view>
			<view class="" v-else>
				<image src="../../../static/notFound.png" mode="" style="margin: 0 50upx 20upx 50upx;"></image>
				<view class="" style="width: 100%;text-align: center;transform: translateY(-60upx);">
					{{i18n('NoData')}}
				</view>
			</view>
		</view>
		<!-- 推荐活动 -->
		<view class="" style="margin: 10upx 0upx;line-height: 65upx;">
			<text style="display: inline-block;width: 10upx;height: 30upx;
				background-color: #6DD400;vertical-align: middle;margin-right: 10upx;"></text>
			{{i18n('RecommendationActivities')}}
			<!-- <text style="float: right;color: #1777FE;" @click="toView('/pages/nationalregionalCommissions/nationalregionalInformaions/nationalregionalInformaions')">更多 ></text> -->
		</view>
		<view class="active" style="width: 100%;position: relative;border-bottom: 1px solid #ccc;padding: 9upx 0;" 
			v-for="(item,index) in cooperationUnitDynamicList" @click="toView(item)" >
			<view class="" style="margin-top: 10upx;margin-right: 20upx;" >
				{{item.activityName}}
			</view>
			<u-icon name="arrow-right" style="position: absolute;right: -10upx;top: 24upx;"></u-icon>
			<view class="">
				{{formatDate(item.createDate)}}
			</view>
		</view>
		
	</view>
</template>

<script>
	export default {
		data() {
			return {
				committeePostDicts:[],
				committeeUnitPostDicts:[],
				countryDicts:[],
				background:{
					backgroundImage: 'linear-gradient(270deg, #4BC0E2 0%, #538BE7 100%)',
				},
				backStyle:{
					color:'#fff'
				},
				title:this.$i18n.locale == 'zh'?'区域委员会':'Regional Committees',
				committee:[],
				introduceMap:{},
				list:{
					
				},
				activecommittee:{},
				introduce:[],
				cooperationUnitDynamicList:[],
				activeId:null,
			}
		},
		created() {
			 this.getDicts();
		},
		onLoad(options){
			
			if(this.$i18n.locale=='zh'){
				this.list = {};
				this.activeId = JSON.parse(decodeURIComponent(options.list)).details;
			}else {
				this.list = {};
				this.activeId = JSON.parse(decodeURIComponent(options.list)).details;
			}
		},
		onShow() {
			this.getActiveList();
		
		},
		computed:{
			
		},
		methods:{
			toView(item){
				this.$mRouter.push({
					route: `/pages/nationalregionalCommissions/nationalregionalInformaions/nationalregionlInformationDetail?id=${item.entityId}`,
				});
			},
			toViews(value){
				console.log(value)
				// this.$mRouter.push({
				// 	route: `/pages/nationalregionalCommissions/nationalregionalCountryDetails?id=${value}`,
				// });
			},
			
			getCommitteeList(lable,num,committeeProfileUe,entityId,item){
				this.introduceMap={};
				this.$set(this.introduceMap,'chairman',[]);//主席
				this.$set(this.introduceMap,'vicePresident',[]);// 副主席
				this.$set(this.introduceMap,'secretary',[]);// 秘书
				this.$set(this.introduceMap,'member',[]);// 委员
				
				if(this.introduce[1].length>0) {
					this.introduce[1].forEach(element=>{
						console.log(element.regionalCommitteeDict,entityId,'introduce[1]');
						if(element.regionalCommitteeDict == entityId){
							element.unitProfile = element.unitProfile? element.unitProfile.replace(/<[^>]+>|&[^>]+;/g, ""):'';
							this.introduceMap.chairman.push(element);
						}
					})
				}
				if(this.introduce[2].length>0) {
					this.introduce[2].forEach(element=>{
						console.log(element.regionalCommitteeDict,entityId,'introduce[2]');
						if(element.regionalCommitteeDict ==entityId){
							this.introduceMap.vicePresident.push(element);
						}
					})
				}
				if(this.introduce[3].length>0) {
					this.introduce[3].forEach(element=>{
						console.log(element.regionalCommitteeDict,entityId,'introduce[3]');
						if(element.regionalCommitteeDict ==entityId){
							this.introduceMap.secretary.push(element);
						}
					})
				}
				if(this.introduce[4].length>0) {
					this.introduce[4].forEach(element=>{
						console.log(element.regionalCommitteeDict,entityId,'introduce[4]');
						if(element.regionalCommitteeDict ==entityId){
							this.introduceMap.member.push(element);
						}
					})
				}
				this.list.data = this.introduceMap;
				
			},
			async getActiveList(){
				let page={
				  committeeId:"",
				  language:this.$i18n.locale.toUpperCase(),
				}
				const res = await this.$myRequest({
					url: '/project/committeeBasisInfos/getCommitteeInfos',
					data: page,
				})
				// 区域委员会
				this.committee = res.data.committeeBasisInfosRegion;
				this.cooperationUnitDynamicList = res.data.committeeActivityInfos;
				this.introduce = res.data.regionList;
				
				let activecommittee = this.committee.filter(item=>{
					return item.entityId == this.activeId
				})
				this.$set(this.list,'details',{});
				this.list.details = activecommittee[0];
				this.activecommittee = activecommittee[0];
				if(this.$i18n.locale=='zh' && this.list.details.committeeName){
					this.title = this.list.details.committeeName?this.activecommittee.committeeName:'区域委员会';
					
				}else if(this.$i18n.locale!=='zh' && this.activecommittee.committeeName){
					this.title = this.$i18n.locale!=='zh'?this.list.details.committeeName:this.activecommittee.committeeName;
				}
				this.getCommitteeList(this.list.details.committeeName,this.list.details.id,this.list.details.committeeProfileUe,this.activeId,this.list.details)
				
			},
			
			committeePostDictsMaps(value){
				if(this.committeePostDicts.length>0){
			
					const PostDicts= this.committeePostDicts.filter(item=>{
						return item.value == value
					})
					return PostDicts[0].label;
				}
			},
			countryDictsMap(value){
				if(this.countryDicts.length>0){
			
					const PostDicts= this.countryDicts.filter(item=>{
						return item.value == value
					})
					return PostDicts[0].label;
				}
			},
			i18n (data) {
			    return this.$t('common.'+data);
			},
			async getDicts(){
				const res = await this.$myRequest({
					url: '/sys/sysDicts',
					data: {
						type:'COMMITTEE_POST_DICT,COMMITTEE_POST_DICT_EN,COMMITTEE_UNIT_POST_DICT,COMMITTEE_UNIT_POST_DICT_EN,UNIT_COUNTRY_DICT,UNIT_COUNTRY_DICT_EN'
					}
				});
				var data = res.data;
				if(data){
					if(this.$i18n.locale == 'zh'){
						this.committeePostDicts = res.data[0] ||[];
						this.committeeUnitPostDicts = res.data[2] ||[];
						this.countryDicts = res.data[4] || [];
					}else  if(this.$i18n.locale == 'en'){
						this.committeePostDicts = res.data[1] ||[];
						this.committeeUnitPostDicts = res.data[3] ||[];
						this.countryDicts = res.data[5] || [];
					}
				}
			},
		}
	}
</script>

<style>
	page {
		background-color: #fff;
	}
	.imgage-user {
		width: 180upx;
		height: 180upx;
		overflow: hidden;
		border-radius: 50%;
	}
	.item-top {
		margin-top: 10upx;
	}
	.introduceMap-title {
		margin: 20upx 0;
		padding: 15upx 0;
		background-color: #EEF9FA;
		color: #0F545A;
		font-weight: 600;
		font-size: 30upx;
	}
	.border-6DD400 {
		display: inline-block;
		width: 16upx;
		height: 40upx;
		background: #6DD400;
		opacity: 1;
		vertical-align: middle;
		margin: 0 10upx;
	}
	.active:active {
		background-color: #079ef;
	}
</style>