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

<template>
	<view class="">
		<!-- 背景图 -->
		<view class="nationRightView" style="position: relative;background:#F3F4F5;">
			<image src="@/static/img/nationaIntroductionList/nationBottom.png" mode="aspectFill" style="width:100%;"
				:style="$i18n.locale=='zh'?'':'height:560upx'"></image>
			<text :class="$i18n.locale=='zh'?'nationRightText':'nationRightText2'">{{i18n('AsImportantParts')}}</text>
		</view>
		<view class="borderLine"></view>
		<!-- 职责 -->
		<view class="" style="margin: 30upx 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 @change="handleDotChange">
						<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 ftop"></view>
		<!-- 推荐活动 -->
		<view class="" 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="navTo('/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="navTo('/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 ftop"></view>
		<!-- 布局 -->
		<view class="" style="margin:40upx 30upx 40upx 30upx;">
			<text
				style="display: inline-block;width: 10upx;height: 30upx;background-color: #6DD400;vertical-align: middle;margin-right: 10upx;"></text>
			{{i18n('Committeelayout')}}

			<text style="float: right;color: #1777FE;"
				@click=" navTo('/pages/nationalregionalCommissions/nationalregionalInformaions/nationalregionalCountryInformaions')">
				{{i18n('More')}} ></text>
		</view>

		<view class="layoutitem" v-for="(item,index) in world" @click="toView(item)">
			<img :src="websiteUrl + item.nationalFlag" alt="" v-if="item.nationalFlag" style="width: 200upx;">
			<img :src="websiteUrl+'/def/projectdefault.png'" alt="" v-else style="width: 200upx">
			<view class="recommend-bottom">
				<view class="recommend-bottom-name">{{item.committeeName}}</view>
			</view>
		</view>
		<u-toast ref="uToast" />
		<rf-back-top :scrollTop="scrollTop"></rf-back-top>
	</view>
</template>

<script>
	export default {
		components: {},
		props: ['countryList'],
		data() {
			return {
				lang: this.$i18n.locale.toUpperCase() == 'EN' ? 'en' : 'zh',
				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: {},
				worldSearch: [], // 国家委员会
				committeePostDictsMap: [],
				committeePostDicts: [],
				committeeUnitPostDicts: [],
				countryDicts: [],
				world: [],
				page: 1,
				total2: 0,
				scrollTop: 0,
				status: 'loadmore',
			}
		},
		async mounted() {
			this.recommendData = await this.$api.json('recommendCountryData');
			this.getInitData();
			this.getDicts();
			this.getCountryList();
		},
		onPageScroll(e) {
			this.scrollTop = e.scrollTop;
		},
		computed: {
			committeeUnitPostDictsMap() {
				return this.committeeUnitPostDicts.array2Obj("value", "label");
			},
		},
		onReachBottom() {
			if (this.page * 10 >= this.total2) return;
			this.status = 'loading';
			this.page = this.page + 1;
			console.log(this.page, 'pagepagepagepage');

			if ((this.page - 1) * 10 >= this.total2) {
				this.status = 'nomore';
			} else {
				this.status = 'loading';
				this.getCountryList(this.page);
			}


		},
		methods: {
			toView(item) {
				console.log(item)
				// let list = {
				// 	entityId:items.entityId,
				// 	committeeName:items.entityId,
				// 	nationalFlag:items.nationalFlag,
				// 	committeeName:items.committeeName,
				// 	committeeProfile:items.committeeProfile,
				// }
				// list = JSON.stringify(list);

				uni.setStorageSync('committeeData', item)
				uni.navigateTo({
					url: '/pages/nationalregionalCommissions/nationalregionalInformaions/committeeLayout'
				})

				// this.$mRouter.push({
				// 	route: `/pages/nationalregionalCommissions/nationalregionalCountryList?item=${list}`,
				// });
			},
			navTo(router, id) {
				uni.navigateTo({
					url: router + '?id=' + id
				})
			},
			async getCountryList() {
				const res = await this.$myRequest({
					url: '/project/committeeBasisInfos/getCommitteeCountryInfos',
					data: {
						language: this.$i18n.locale.toUpperCase(),
						pageNo: this.page,
						pageSize: 5,
					},
				})
				this.world = res.data.committeeBasisInfos || [];
				this.total2 = res.data.page.totalCount;
			},
			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.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', []); // 委员
				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);
					}
				})
				this.introduce[2].forEach(element => {
					console.log(element.regionalCommitteeDict, entityId, 'introduce[2]');
					if (element.regionalCommitteeDict == entityId) {
						this.introduceMap.vicePresident.push(element);
					}
				})
				this.introduce[3].forEach(element => {
					console.log(element.regionalCommitteeDict, entityId, 'introduce[3]');
					if (element.regionalCommitteeDict == entityId) {
						this.introduceMap.secretary.push(element);
					}
				})
				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;
			},
			handleDotChange(e) {
				console.log(e.target.current)
			}

		}
	}
</script>

<style lang="scss" scoped>
	page {
		background-color: #fff;
	}

	.borderLine {
		height: 16upx;
		width: 100%;
		background-color: #F3F4F5;

		&.ftop {
			height: 24upx;
		}
	}

	.nationRightText,
	.nationRightText2 {
		position: absolute;
		left: 19upx;
		top: 45upx;
		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);
	}

	.nationRightText {
		top: 65upx;
	}

	.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: 380upx;

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

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

		&.en {
			height: 340upx;
		}

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

	.uni-swiper-slide-frame :nth-child(1) {
		margin-right: 50upx;
	}

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

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

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

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

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

	.introduceMap-title {
		padding: 10upx 15upx;
		margin-left: 15upx;
		border: 1px solid #0079ef;
	}

	.nationLable {
		font-size: 26upx;
		font-family: PingFangSC-Semibold, PingFang SC;
		color: #333333;
		line-height: 37upx;
	}

	.recommend-bottom {
		float: right;
		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;
	}

	.layoutitem {
		margin: 10upx 20upx;
		height: 160upx;
		background: #fff;
		display: flex;
		align-items: center;

		.recommend-bottom {
			margin-left: 20upx;
		}
	}
</style>