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

<template>
	<view class="rf-category">
		<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="">
			<u-tabs :list="list" :is-scroll="false" :current="current" @change="tabChange" bar-width="300"></u-tabs>
		</view>
		<view class="borderLine"></view>
		<view v-if="current == 0">
			<!-- 背景图 -->
			<view class="nationRightView" style="position: relative;background:#F3F4F5;">
				<image src="@/static/img/nationaIntroductionList/nationRight.png" mode="aspectFill" style="width:100%">
				</image>
				<text
					:class="$i18n.locale=='zh'?'nationRightText':'nationRightText2'">{{i18n('RegionalCommitteesContent')}}</text>
			</view>
			<view class="borderLine ftop"></view>
			<!-- 职责 -->
			<view style="margin: 40upx 30upx;">
				<text style="display: inline-block;width: 10upx;height: 30upx;
					background-color: #6DD400;vertical-align: middle;margin-right: 10upx;"></text>
				{{i18n('duty')}}
			</view>

			<view style="margin-left:10upx;">
				<view class="swiper" :class="{en:lang=='en',zh:lang=='zh'}">
					<view class="swiper-box" :class="{en:lang=='en',zh:lang=='zh'}">
						<swiper>
							<swiper-item :key="index" v-for="(item, index) in recommendData">
								<view class="wrap" :class="{en:lang=='en',zh:lang=='zh'}"
									style="display:flex;align-items:center;margin:0 20upx;">
									<view class="swiper-item">
										<view class="nationTitle">{{i18n(item.title)}}</view>
										<view class="nationLable">{{i18n(item.lable)}}</view>
									</view>
								</view>
							</swiper-item>
						</swiper>
					</view>
				</view>
			</view>
			<view class="borderLine"></view>
			<!-- 推荐活动 -->
			<view style="margin: 40upx 40upx">
				<text style="display: inline-block;width: 10upx;height: 30upx;
					background-color: #6DD400;vertical-align: middle;margin-right: 20upx;"></text>
				{{i18n('RecommendationActivities')}}
				<text style="float: right;color: #1777FE;"
					@click="toView('/pages/nationalregionalCommissions/nationalregionalInformaions/nationalregionalInformaions')">{{i18n('More')}}></text>
			</view>
			<view>
				<view style="margin:10upx 20upx 20upx;height: 160upx;overflow: hidden;background-color: #fff;"
					v-for="(item,index) in initData"
					@click="toView('/pages/nationalregionalCommissions/nationalregionalInformaions/nationalregionlInformationDetail',item.entityId)">
					<image v-if="item.activityLogo" :src="websiteUrl + item.activityLogo" alt="" style="width: 200upx;"
						mode="widthFix">
						<image v-else :src="websiteUrl+'/def/def1.png'" alt="" style="width: 200upx;" mode="widthFix">
							<view class="recommend-bottom">
								<view class="recommend-bottom-name">{{item.activityName}}</view>
								<view style="margin-top:20upx;color:#999;font-size:24upx"> {{item.activityPlace}}</view>
								<view style="color:#999;font-size:24upx"> {{item.activityTime}}</view>
							</view>
				</view>
			</view>
			<view class="borderLine"></view>
			<!-- 布局 -->
			<view class="" style="margin:40upx 20upx 20upx 40upx;">
				<text style="display: inline-block;width: 10upx;height: 30upx;
					background-color: #6DD400;vertical-align: middle;margin-right: 10upx;"></text>
				{{i18n('Committeelayout')}}
			</view>
			<view>
				<u-tabs name="committeeName" :list="committee" bar-width="200" :is-scroll="true"
					:current="committeeCurrent" @change="committeeChange">
				</u-tabs>
			</view>
			<!-- 布局的内容 -->
			<view class="" style="min-height: 600upx;">
				<view class="" style="min-height: 100upx;margin:15upx 20upx;" v-if="introduceMap.chairman.length>0 || introduceMap.vicePresident.length>0 
						|| introduceMap.secretary.length>0 || introduceMap.member.length>0">
					<view class="Box_view" style="position: relative;" v-for="(item,index) in introduceMap.chairman"
						:class="index==0?'':''" @click="navTonavTo(introduceMap)">
						<view class="introduceMap-title" v-if="index==0">
							<!-- {{committeePostDictsMaps(item.regionDutyDict)}} -->
							<text class="text-title">{{item.regionDuty}}</text>
						</view>
						<!-- style="position: absolute;left: 180upx;top: 10upx;" -->
						<view>
							<view style="display: inline-block;margin-top: 20upx;vertical-align: middle;">
								<image class="imgage-user" v-if="!item.spareTwo"
									src="@/static/img/nationaIntroductionList/user.png" alt="">
									<image class="imgage-user" v-else :src="websiteUrl + item.spareTwo" alt="">
							</view>
							<text style="max-width: 340upx;;margin-left: 8upx;  overflow: hidden;text-overflow: ellipsis;
									white-space: nowrap;display: inline-block;
									vertical-align: middle;">
								{{$i18n.locale == 'zh'?item.name:item.nameEn}}
							</text>
							<text v-if="item.country" style="max-width: 517upx;  overflow: hidden;text-overflow: ellipsis;
									white-space: nowrap;display: inline-block;
									vertical-align: middle;">
								<!-- ({{countryDictsMap(item.countryDict)}}) -->
								({{item.country}})
							</text>
						</view>

					</view>
					<view class="Box_view" style="position: relative;"
						v-for="(item,index) in introduceMap.vicePresident" :class="index==0?'':''"
						@click="navTonavTo(introduceMap)">
						<view class="introduceMap-title" v-if="index==0">
							<!-- {{committeePostDictsMaps(item.regionDutyDict)}} -->
							<text class="text-title">{{item.regionDuty}}</text>
						</view>
						<view class="" style="">
							<view class="" style="display: inline-block;
								margin-top: 20upx;vertical-align: middle;">
								<image class="imgage-user" v-if="!item.spareTwo"
									src="@/static/img/nationaIntroductionList/user.png" alt="">
									<image class="imgage-user" v-else :src="websiteUrl + item.spareTwo" alt="">
							</view>
							<text style="max-width: 340upx;;margin-left: 8upx;  overflow: hidden;text-overflow: ellipsis;
									white-space: nowrap;display: inline-block;
									vertical-align: middle;">
								{{$i18n.locale == 'zh'?item.name:item.nameEn}}
							</text>
							(<text v-if="item.country" style="max-width: 517upx; overflow: hidden;text-overflow: ellipsis;
									white-space: nowrap;display: inline-block;
									vertical-align: middle;">
								<!-- {{countryDictsMap(item.countryDict)}} -->
								{{item.country}}
							</text> )
						</view>

					</view>
					<view class="Box_view" style="position: relative;" v-for="(item,index) in introduceMap.secretary"
						:class="index==0?'':''" @click="navTonavTo(introduceMap)">
						<view class="introduceMap-title" v-if="index==0">
							<!-- {{committeePostDictsMaps(item.regionDutyDict)}} -->
							<text class="text-title">{{item.regionDuty}}</text>
						</view>
						<view class="" style="">
							<view class="" style="display: inline-block;
								margin-top: 20upx;vertical-align: middle;">
								<image class="imgage-user" v-if="!item.spareTwo"
									src="@/static/img/nationaIntroductionList/user.png" alt="">
									<image class="imgage-user" v-else :src="websiteUrl + item.spareTwo" alt="">
							</view>
							<text style="max-width: 340upx;margin-left: 8upx;  overflow: hidden;text-overflow: ellipsis;
									white-space: nowrap;display: inline-block;
									vertical-align: middle;">
								{{$i18n.locale == 'zh'?item.name:item.nameEn}}
							</text>
							<text v-if="item.country" style="max-width: 517upx; overflow: hidden;text-overflow: ellipsis;
									white-space: nowrap;display: inline-block;
									vertical-align: middle;">
								<!-- ({{countryDictsMap(item.countryDict)}}) -->
								({{item.country}})
							</text>
						</view>

					</view>

					<view class="Box_view" style="position: relative;" v-for="(item,index) in introduceMap.member"
						:class="index==0?'':''" @click="navTonavTo(introduceMap)">
						<view class="introduceMap-title" v-if="index==0">
							<!-- {{committeePostDictsMaps(item.regionDutyDict)}} -->
							<text class="text-title">{{item.regionDuty}}</text>
						</view>
						<view class="" style="">
							<view class="" style="display: inline-block;
								margin-top: 20upx;vertical-align: middle;">
								<image class="imgage-user" v-if="!item.spareTwo"
									src="@/static/img/nationaIntroductionList/user.png" alt="">
									<image class="imgage-user" v-else :src="websiteUrl + item.spareTwo" alt="">
							</view>
							<text style="max-width: 340upx;margin-left: 8upx;  overflow: hidden;text-overflow: ellipsis;
									white-space: nowrap;display: inline-block;
									vertical-align: middle;">
								{{$i18n.locale == 'zh'?item.name:item.nameEn}}
							</text>
							<text v-if="item.country" style="max-width: 517upx;  overflow: hidden;text-overflow: ellipsis;
									white-space: nowrap;display: inline-block;
									vertical-align: middle;">
								<!-- ({{countryDictsMap(item.countryDict)}}) -->
								({{item.country}})
							</text>
						</view>

					</view>
				</view>
				<view class="" v-else>
					<image src="../../static/notFound.png" mode="" style="margin: 0 50upx 20upx 50upx;" mode="widthFix">
					</image>
					<view class="" style="width: 100%;text-align: center;transform: translateY(-60upx);">
						{{i18n('NoData')}}
					</view>
				</view>
			</view>

		</view>
		<nationalregionalCountry v-else :countryList="countryList"></nationalregionalCountry>
	</view>
</template>

<script>
	import nationalregionalCountry from './nationalregionalCountry.vue'
	export default {
		components: {
			nationalregionalCountry,
		},
		data() {
			return {
				lang: this.$i18n.locale.toUpperCase() == 'EN' ? 'en' : 'zh',
				title: this.$i18n.locale.toUpperCase() == 'EN' ? 'Regional and National Committees' : '区域和国家委员会',
				background: {
					backgroundImage: 'linear-gradient(270deg, #4BC0E2 0%, #538BE7 100%)',
				},
				backStyle: {
					color: '#fff'
				},
				list: [{
					name: this.i18n('RegionalCommittee')
				}, {
					name: this.i18n('NationalCommittee')
				}],
				current: 0,
				recommendData: [],
				initData: [], // 推荐活动
				committee: [], // 区域委员会
				committeeCurrent: 0,
				entityId: null,
				countryMap: {}, // 当前选中区域委员会列表
				regionEntity: {}, //区域委员会
				introduce: [], // 区域委员会列表
				committeeSelectNum: '',
				cooperationUnitDynamicList: [],
				regionActivityInfoList: [],
				introduceMap: {
					chairman: [],
					vicePresident: [],
					secretary: [],
					member: [],
				},
				countryList: [], // 国家委员会列表
				worldSearch: [], // 国家委员会
				committeePostDictsMap: [],
				committeePostDicts: [],
				committeeUnitPostDicts: [],
				countryDicts: [],
			}
		},
		onLoad() {
			this.getDicts();
		},
		async onShow() {
			this.recommendData = await this.$api.json('recommendData');
			this.getInitData(); // 获取推荐活动
			this.getCommitteeInfos(); // 获取区域列表委员会列表
			this.committeeCurrent = 0;
		},

		computed: {



		},
		methods: {
			navTo(data) {
				if (this.$i18n.locale == 'zh') {
					let list = {
						details: this.committee[this.committeeCurrent].entityId,

					}
					list = JSON.stringify(list);
					this.$mRouter.push({
						route: `/pages/nationalregionalCommissions/nationalregionalInformaions/nationalCommossiomsDetails?list=${list}`,
					});
				} else {
					let page = {
						details: this.committee[this.committeeCurrent].entityId,
						// data:data,
					}
					page = JSON.stringify(page)
					this.$mRouter.push({
						route: `/pages/nationalregionalCommissions/nationalregionalInformaions/nationalCommossiomsDetails?list=${page}`,
					});
				}

			},

			navToDetails(router, list) {

			},

			committeePostDictsMaps(value) {
				const PostDicts = this.committeePostDicts.filter(item => {
					return item.value == value
				})
				return PostDicts[0].label;
			},
			countryDictsMap(value) {
				const PostDicts = this.countryDicts.filter(item => {
					return item.value == value
				})
				return PostDicts[0].label;
			},
			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] || [];
					}
				}
			},
			DictsMap(num, data) {
				// if(num==1){
				// 	// title
				// 	this.committeePostDictsMap[];
				// }else {
				// 	// country 

				// }
			},
			async getInitData() {
				let list = {
					pageSize: 3,
					pageNo: 1,
					language: this.$i18n.locale.toUpperCase(),
				};
				const res = await this.$myRequest({
					url: '/project/committeeActivityInfos/getCommitteeActivityList',
					data: {
						...list
					}
				})
				this.initData = res.data.committeeActivityInfos || [];
			},
			async getCommitteeInfos() {
				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.entityId = this.committee[0]['entityId']
				// 国家委员会
				this.worldSearch = res.data.committeeBasisInfosCountry;
				this.worldSearch.unshift({
					committeeName: this.$i18n.locale == 'zh' ? '全部' : 'ALL',
					id: null,
					value: null
				});
				this.cooperationUnitDynamicList = res.data.committeeActivityInfos;
				this.countryList = res.data.countryList;
				this.introduce = res.data.regionList;
				this.getCommitteeList(this.committee[0].committeeName, this.committee[0].id, this.committee[0]
					.committeeProfileUe, this.committee[0].entityId, this.committee[0])
			},
			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);
						}
					})
				}
			},
			committeeChange(index) {
				this.committeeCurrent = index;
				this.entityId = this.committee[index].entityId;
				this.getCommitteeList(this.committee[index].committeeName, this.committee[index].id, this.committee[index]
					.committeeProfileUe, this.committee[index].entityId, this.committee[index]);
			},
			i18n(data) {
				return this.$t('common.' + data);
			},
			tabChange(index) {
				this.current = index;
			},
			toView(url, id) {
				this.$mRouter.push({
					route: url + '?id=' + id
				});
				// uni.navigateTo({
				// 	url: url + '?id=' + id
				// })
			},
			// navTonavTo(item){
			// 	// console.log(item)
			// 	console.log('查看id',this.entityId)
			// 	uni.navigateTo({
			// 		url:'/pages/nationalregionalCommissions/nationalregionalInformaions/committeeLayoutZone?entityId='+this.entityId
			// 	})
			// }
			navTonavTo(data) {
				if (this.$i18n.locale == 'zh') {
					let list = {
						details: this.committee[this.committeeCurrent].entityId,

					}
					list = JSON.stringify(list);
					this.$mRouter.push({
						route: `/pages/nationalregionalCommissions/nationalregionalInformaions/nationalCommossiomsDetails?list=${list}`,
					});
				} else {
					let page = {
						details: this.committee[this.committeeCurrent].entityId,
						// data:data,
					}
					page = JSON.stringify(page)
					this.$mRouter.push({
						route: `/pages/nationalregionalCommissions/nationalregionalInformaions/nationalCommossiomsDetails?list=${page}`,
					});
				}

			},
		}
	}
</script>

<style lang="scss" scoped>
	.borderLine {
		height: 24upx;
		width: 100%;
		background-color: #F3F4F5;

		&.ftop {
			margin-top: -8upx;
		}
	}

	page {
		background-color: #fff;
	}

	/deep/ .u-navbar-inner {
		position: relative;
	}

	/deep/ .u-navbar-content-title {
		width: 60% !important;
		position: absolute !important;
		left: 22% !important;
		right: 15% !important;
		margin: 0 auto !important;
	}

	.rf-category {
		background-color: $color-white;
	}

	.nationRightText,
	.nationRightText2 {
		position: absolute;
		left: 19upx;
		top: 85upx;
		width: 715upx;
		padding: 30upx;
		text-indent: 2em;
		background: rgba(255, 255, 255, 0.23);
		border: 1px solid;
		color: #fff;
		border-image: linear-gradient(180deg, rgba(22, 102, 150, 0.28), rgba(162, 186, 203, 1)) 1 1;
		text-shadow: 0 1px 1px hsla(0, 0%, 100%, .3);
	}

	.text-title {
		width: 150upx;
		font-size: 32upx;
	}

	.nationRightText {
		top: 96upx;
	}

	.nationRightText::before,
	.nationRightText2::before {
		content: '';
		position: absolute;
		top: 0;
		right: 0;
		bottom: 0;
		left: 0;
		margin: -30px;
		z-index: -1;
		-webkit-filter: blur(50upx);
		filter: blur(50upx);
	}

	.swiper-box {
		&.zh {
			height: 300upx;

			/deep/ .uni-swiper-wrapper {
				height: 260upx;
			}
		}

		&.en {
			height: 460upx;

			/deep/ .uni-swiper-wrapper {
				height: 420upx;
			}
		}
	}

	.uni-swiper-slide-frame .wrap {
		border-radius: 20upx;
		overflow: hidden;

		&.en {
			height: 420upx;
		}

		&.zh {
			height: 260upx;
		}
	}

	/deep/.uni-swiper-slides,
	.swiper-item {
		width: 600upx;
		padding: 0 20upx;
		display: flex;
		align-items: center;
		flex-direction: column;
	}

	.swiper-item {
		border-radius: 10upx;
		display: flex;
		align-items: flex-start;
		flex-direction: column;
		text-align: left;
	}

	.swiper-item .nationTitle {
		font-size: 28upx;
		font-family: PingFangSC-Semibold, PingFang SC;
		font-weight: 900;
		color: #333;
		line-height: 37upx;
		padding: 0 20upx;

	}

	.swiper-item .nationLable {
		width: 100%;
		font-family: PingFangSC-Semibold, PingFang SC;
		margin: 20upx auto 0;
		text-indent: 54upx;
		color: #333;
		padding: 0 0 0 20upx;
		text-align: left;
	}

	.border-top {
		border-top: 1px solid #03B6B3;
	}

	.uni-swiper-slide-frame :nth-child(1) .wrap {
		background: #F8F8F8;
	}

	.uni-swiper-slide-frame :nth-child(2) .wrap {
		background: #EFFAFF;
	}

	.uni-swiper-slide-frame :nth-child(3) .wrap {
		background: #FAF2ED;
	}

	.uni-swiper-slide-frame :nth-child(4) .wrap {
		background: #EFF6FF;
	}

	.uni-swiper-slide-frame :nth-child(5) .wrap {
		background: #F8F8F8;
	}


	.Box_view:active {
		background-color: #f1f2f3;
	}

	.introduceMap-title {
		padding: 10upx 20upx;
		vertical-align: middle;
		background: #EFF6FF;
		opacity: 1;
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
	}

	.recommend-bottom {
		float: right;
		height: 200upx;
		width: 488upx;
	}

	.recommend-bottom-name {
		font-size: 30upx;
		font-family: PingFangSC-Medium, PingFang SC;
		font-weight: 500;
		color: #0B0B11;
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;

	}

	.imgage-user {
		width: 60upx;
		height: 60upx;
		overflow: hidden;
		border-radius: 60upx;
		margin-right: 20upx;
		margin-left: 20upx;
	}
</style>