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

<template>
	<view class="" style="margin: 0 20upx;">
		<u-navbar :back-text="i18n('Back')" :back-text-style="backStyle" back-icon-color="#fff" title-color="#fff"
			:title="countryItem.committeeName" :background="background">
		</u-navbar>
		<view class="">
			<image v-if="countryItem.nationalFlag" :src="websiteUrl+ countryItem.nationalFlag" mode=""
				style="width: 100%;height: 407upx;"></image>
			<image :src="websiteUrl+'/def/projectdefault.png'" alt="" v-else style="width: 200upx;height: 200upx;">
			</image>
		</view>
		<view class="" style="font-weight: 700;font-size: 32upx;line-height: 40upx;">
			{{countryItem.committeeName}}
		</view>
		<view class="">
			{{countryItem.committeeProfile}}
		</view>
		<view class="" style="" v-if="countryMap[0] && countryMap[0].length>0 || 
					countryMap[1] && countryMap[1].length>0 || 
						countryMap[2] && countryMap[2].length>0 || 
							countryMap[3] && countryMap[3].length>0 || 
								countryMap[4] && countryMap[4].length>0">
			<view style="" v-for="(item,index) in countryMap[0]" :style="index==0?'margin-top:30upx':'margin-top:30upx'"
				style="min-height: 260upx;">
				<text class="introduceMap-title" style="font-weight: 700;font-size: 32upx;" v-if="index == 0">
					<!-- {{committeeUnitPostDictsMaps(item.countryDutyDict)}} -->
					{{item.countryDuty}}
				</text>
				<view class="">
					<view class="" style="float: left;
						width: 192upx;height: 192upx;
						margin-right: 20upx;
						margin-top: 20upx;vertical-align: top;">
						<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="  
							display: inline-block;
							font-weight: 700;" class="active" @click="toView(item.entityId)">
						{{$i18n.locale == 'zh'?item.name:item.nameEn}}
					</text>
					<view v-if="item.country" style="margin-left: 15upx;">
						({{item.country}})
					</view>
					<view class="" style="margin-top: 20upx;">
						{{item.unitProfile}}
					</view>
				</view>

			</view>
			<view style="" v-for="(item,index) in countryMap[1]" :class="index==0?'border-top':''"
				style="min-height: 260upx;">
				<text class="introduceMap-title" style="font-weight: 700;font-size: 32upx;">
					<!-- {{committeePostDictsMaps(item.countryDutyDict)}} -->
					{{item.countryDuty}}
				</text>
				<view class="">
					<view class="" style="float: left;
						width: 192upx;height: 192upx;
						margin-right: 20upx;
						margin-top: 20upx;vertical-align: top;">
						<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="  
							display: inline-block;
							font-weight: 700;" class="active" @click="toView(item.entityId)">
						{{$i18n.locale == 'zh'?item.name:item.nameEn}}
					</text>
					<view v-if="item.country" style="margin-left: 15upx;">
						<!-- ({{countryDictsMap(item.countryDict)}}) -->
						({{item.country}})
					</view>
					<view class="" style="margin-top: 20upx;">
						{{item.unitProfile}}
					</view>
				</view>

			</view>
			<view style="" v-for="(item,index) in countryMap[2]" :class="index==0?'border-top':''"
				style="min-height: 260upx;">
				<text class="introduceMap-title" style="font-weight: 700;font-size: 32upx;">
					<!-- {{committeePostDictsMaps(item.countryDutyDict)}} -->
					{{item.countryDuty}}
				</text>
				<view class="">
					<view class="" style="float: left;
						width: 192upx;height: 192upx;
						margin-right: 20upx;
						margin-top: 20upx;vertical-align: top;">
						<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="  
							display: inline-block;
							font-weight: 700;" class="active" @click="toView(item.entityId)">
						{{$i18n.locale == 'zh'?item.name:item.nameEn}}
					</text>
					<view v-if="item.country" style="margin-left: 15upx;">
						<!-- ({{countryDictsMap(item.countryDict)}}) -->
						({{item.country}})
					</view>
					<view class="" style="margin-top: 20upx;">
						{{item.unitProfile}}
					</view>
				</view>

			</view>
			<view style="" v-for="(item,index) in countryMap[3]" :class="index==0?'border-top':''"
				style="min-height: 260upx;">
				<text class="introduceMap-title" style="font-weight: 700;font-size: 32upx;">
					<!-- {{committeePostDictsMaps(item.countryDutyDict)}} -->
					{{item.countryDuty}}
				</text>
				<view class="">
					<view class="" style="float: left;
						width: 192upx;height: 192upx;
						margin-right: 20upx;
						margin-top: 20upx;vertical-align: top;">
						<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="  
							display: inline-block;
							font-weight: 700;" class="active" @click="toView(item.entityId)">
						{{$i18n.locale == 'zh'?item.name:item.nameEn}}
					</text>
					<view v-if="item.country" style="margin-left: 15upx;">
						<!-- ({{countryDictsMap(item.countryDict)}}) -->
						({{item.country}})
					</view>
					<view class="" style="margin-top: 20upx;">
						{{item.unitProfile}}
					</view>
				</view>

			</view>
			<view style="" v-for="(item,index) in countryMap[4]" :class="index==0?'border-top':''"
				style="min-height: 260upx;">
				<text class="introduceMap-title" style="font-weight: 700;font-size: 32upx;">
					<!-- {{committeePostDictsMaps(item.countryDutyDict)}} -->
					{{item.countryDuty}}
				</text>
				<view class="">
					<view class="" style="float: left;
						width: 192upx;height: 192upx;
						margin-right: 20upx;
						margin-top: 20upx;vertical-align: top;">
						<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="  
							display: inline-block;
							font-weight: 700;" class="active" @click="toView(item.entityId)">
						{{$i18n.locale == 'zh'?item.name:item.nameEn}}
					</text>
					<view v-if="item.country" style="margin-left: 15upx;">
						<!-- ({{countryDictsMap(item.countryDict)}}) -->
						({{item.country}})
					</view>
					<view class="" style="margin-top: 20upx;">
						{{item.unitProfile}}
					</view>
				</view>

			</view>
		</view>
		<view class="" v-else>
			<image src="../../static/notFound.png" mode="" style="width: 750upx;"></image>
			<view style="text-align: center;transform: translateY(-65upx);">
				{{i18n('NoData')}}
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				countryMap: {},
				countryList: [],
				countryItem: {},
				background: {
					backgroundImage: 'linear-gradient(270deg, #4BC0E2 0%, #538BE7 100%)',
				},
				backStyle: {
					color: '#fff'
				},
				committeePostDicts: [],
				committeeUnitPostDicts: [],
				countryDicts: [],
				worldSearch: [],
				introduce: []
			}
		},
		onLoad(options) {
			// this.countryList = JSON.parse(options.item).countryList;
			console.log(options.item, 'zheshi');
			this.countryItem = JSON.parse(options.item);
			// this.countryDicts = JSON.parse(options.item).countryDicts;
			// this.committeePostDicts = JSON.parse(options.item).committeePostDicts;// 人员职位
			// this.committeeUnitPostDicts = JSON.parse(options.item).committeeUnitPostDicts;// 机构职位

		},
		mounted() {
			this.getCommitteeInfos();
		},
		computed: {

		},
		methods: {
			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] || [];
					}
				}
			},
			async getCommitteeInfos() {
				let page = {
					committeeId: "",
					language: this.$i18n.locale.toUpperCase(),

				}
				const res = await this.$myRequest({
					url: '/project/committeeBasisInfos/getCommitteeInfos',
					data: page,
				})

				// 国家委员会
				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.getCountryDetail(this.countryItem);
			},

			// 人员
			committeePostDictsMaps(value) {
				const PostDicts = this.committeePostDicts.filter(item => {
					return item.value == value
				})
				return PostDicts[0].label;
			},
			// 机构
			committeeUnitPostDictsMaps(value) {
				const PostDicts = this.committeeUnitPostDicts.filter(item => {
					return item.value == value
				})
				return PostDicts[0].label;
			},
			countryDictsMap(value) {
				if (this.countryDicts) {
					const PostDicts = this.countryDicts.filter(item => {
						return item.value == value
					})
					return PostDicts[0].label;
				}
			},
			getCountryDetail(item) {

				this.countryMap = {};
				this.countryMap[0] = []
				this.countryMap[1] = []
				this.countryMap[2] = []
				this.countryMap[3] = []
				this.countryMap[4] = []
				if (this.countryList[1].length > 0) {
					this.countryList[1].forEach(element => {
						if (element.nationalCommitteeDict == item.entityId && element.correlationType == 'C') {
							this.countryMap[0].push(element);
						}
					})
				}
				if (this.countryList[1].length > 0) {
					this.countryList[1].forEach(element => {
						if (element.nationalCommitteeDict == item.entityId && element.correlationType == 'P') {
							this.countryMap[1].push(element);
						}
					})
				}
				if (this.countryList[2].length > 0) {
					this.countryList[2].forEach(element => {
						if (element.nationalCommitteeDict == item.entityId) {
							this.countryMap[2].push(element);
						}
					})
				}
				if (this.countryList[3].length > 0) {
					this.countryList[3].forEach(element => {
						if (element.nationalCommitteeDict == item.entityId) {
							this.countryMap[3].push(element);
						}
					})
				}
				if (this.countryList[4].length > 0) {
					this.countryList[4].forEach(element => {
						if (element.nationalCommitteeDict == item.entityId) {
							this.countryMap[4].push(element);
						}
					})
				}

			},
			toView(value) {
				this.$mRouter.push({
					route: `/pages/nationalregionalCommissions/nationalregionalCountryDetails?id=${value}`,
				});
			},
			i18n(data) {
				return this.$t('common.' + data);
			},
		}
	}
</script>

<style>
	page {
		background-color: #fff;
	}

	.imgage-user {
		width: 100%;
		height: 100%;
	}

	.active:active {
		color: #0079ef;
	}
</style>