dev/dcp-app-gate/pages/cooperationNetwork/memberInformation.vue

<template>
	<view class="memberInformation">
		<u-navbar :back-text="i18n('Back')" :back-text-style="backStyle" :title-width="350"
			back-icon-color="#fff" title-color="#fff" 
			:title="i18n('DisplayofMembers')" 
			:background="background">
		</u-navbar>
		<!-- <view class="slot-content" style="background-color: #FFFFFF;">
			<scroll-view scroll-y="true" style="height: 200upx;">
				<view class="u-text-center u-content-color u-m-t-20 u-m-b-20" v-for="(cate,index) in options2" :key="index">
					{{ cate.label }}
				</view>
			</scroll-view>
		</view> -->
		<view class="u-demo-area u-flex u-row-center">
			<u-dropdown border-bottom inactive-color="#333333" title-size="32">
				<u-dropdown-item v-model="regionValue" 
				:title="region" :options="options1" 
				@change="changeValue1"></u-dropdown-item>
				<u-dropdown-item v-model="categoryValue" 
				:title="category" :options="options2" height="100vh"
				@change="changeValue2"></u-dropdown-item>
			</u-dropdown>
		</view>
		<view class="content-list">
			<u-index-list :scrollTop="scrollTop" :sticky="false" :index-list="indexList" :offset-top="88" activeColor="initial">
				<view v-for="(item, index) in initDataArray" :key="index">
					<u-index-anchor :index="item.letter" />
					<view class="listCell" v-for="init in item.data" :key="init.unitId" @tap="memberDetails(init)">
						<view v-if="$i18n.locale=='en'">{{ init.memberNameEn }}</view>
						<view v-else>{{ init.memberNameZh }}</view>
					</view>
				</view>
			</u-index-list>
		</view>
		
		<!-- 会员详情 -->
		<u-popup v-model="detailShow" mode="bottom" height="60%" @open="openPopup" @close="closePopup" @touchmove.stop.prevent="moveHandle">
			<view class="popupView">
				<view class="popupImg" :style="'background-image: url(../../static/img/cooperationNetwork/'+initData.industryDict+'.png);'"></view>
				<view class="pop-title">
					<text class="title-name">{{$i18n.locale=='zh'?this.member.memberNameZh:this.member.memberNameEn}}</text>
					<text class="title-bq" v-if="$i18n.locale=='zh'&&initData.industry">{{initData.industry}}</text>
					<text class="title-bq" v-if="$i18n.locale=='en'&&initData.industryDict">{{TagEn[parseInt(initData.industryDict)]}}</text>
				</view>
				<view class="pop-name">
					<text class="bold">{{$t('common.place')}}：</text>
					<text>{{countryDictsMap[initData.unitCountryDict]}}{{initData.unitRegion?'-'+initData.unitRegion:''}}</text>
				</view>
				<view class="pop-name">
					<text class="bold">{{$t('common.DateOfEstablishment')}}：</text>
					<text>{{initData.setUpDate?initData.setUpDate:''}}</text>
				</view>
				<view class="pop-name">
					<text class="bold">{{$t('common.LegalRepresentative')}}：</text>
					<text>{{initData.corporateName?initData.corporateName:''}}</text>
				</view>
				<view class="pop-name">
					<text class="bold">{{$t('common.OfficialWebsite')}}：</text>
					<text>{{initData.officialWebsitePath?initData.officialWebsitePath:''}}</text>
				</view>
				<view class="pop-name">
					<text class="bold">{{$t('common.intro')}}：</text>
					<text>{{initData.projectPerformance}}</text>
				</view>
			</view>
			
			
			<view v-for="(item,index) in initViewData" v-if="initViewData">
				<view class="enterprise_style">
					<view class="jianjie" v-if="item.typeDict==1">
						<text style="display: inline-block;width: 10upx;height: 30upx;
							background-color: #6DD400;vertical-align: middle;margin-right: 10upx;"></text>
						{{item.title}}
					</view>
				</view>
				<view class="" v-if="item.pictureUrl && item.typeDict=='1' ">
					<image :src="websiteUrl + item.pictureUrl" alt="" style="width: 750upx;height: 300upx;"></image>
				</view>
				<view :style="item.picturePosition == 'left'?'text-indent: 2em;float:right':'float:left'"
					class="nomale" v-if="item.typeDict==1" v-html="item.contentHtml">
				</view>
			
			
				<view style="clear:both"></view>
			</view>
			
			
		</u-popup>
		
		<u-back-top :scroll-top="scrollTop2"></u-back-top>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				background:{
					backgroundImage: 'linear-gradient(270deg, #4BC0E2 0%, #538BE7 100%)',
				},
				backStyle:{
					color:'#fff'
				},
				region: this.$i18n.locale=='zh'? '所在区域': 'region',
				category: this.$i18n.locale=='zh'? '所属类别': 'category',
				regionValue: null,
				categoryValue: null,
				options1: [],
				options2: [],
				scrollTop: -88,
				scrollTop2: 0,
				backScrollTop: 0,
				initDataArray: [],
				indexList: [],
				initViewData: {},
				detailShow: false,
				member: [],
				initData: {},
				TagEn:['Individual Member','Groups','Scientific Institutions','Colleges And Universities','Energy Companies','Equipement Manufactures','Project Contractors','Financial Institutions','Consultation Enterprises','Rigidity Of Enterprise','Media','Logistics Transportation','Others'],
				page: {
					continentDict: null,
					industryDict: null,
					initialOrderZh: null,
					memberNameEn: null,
					memberNameZh: null,
					language: this.$i18n.locale.toUpperCase(),
				},
				countryDicts: [],
				countryDictsMap: {},
				selectIndexFlag: false
			}
		},
		onLoad(options) {
			uni.showLoading({
				title: this.$i18n.locale == 'zh'? '加载中...': 'Loading...'
			});
			if(options.obj) {
				this.regionValue = JSON.parse(decodeURIComponent(options.obj)).value;
			}else {
				this.regionValue = null;
			}
			
			if(options.item) {
				this.categoryValue = JSON.parse(decodeURIComponent(options.item)).value;
			}else {
				this.categoryValue = null;
			}
			
			this.page.continentDict = this.regionValue;
			this.page.industryDict = this.categoryValue;
		},
		onShow() {
			this.getInitData();
			this.get();
			this.getCountry();
		},
		onPageScroll(e) {
			this.scrollTop = e.scrollTop - 88;
			this.scrollTop2 = e.scrollTop;
		},
		methods: {
			moveHandle() {},
			i18n (data) {
			    return this.$t('common.' + data);
			},
			async getInitData() {
				const locale = this.$i18n.locale;
				//所属类别
				const res = await this.$myRequest({
					url: '/sys/sysDicts',
					data: {
						type: locale == 'zh' ? 'INDUSTRY_DICTS' : 'INDUSTRY_DICTS_EN'
					}
				});
				let both2 = {
					value: null,
					label: locale == 'zh' ? '全部' : 'All'
				};
				// console.log(res);
				this.options2 = res.data[0];
				this.options2.unshift(both2);
				
				let both1 = {
					value: null,
					label: locale == 'zh' ? '全部' : 'All'
				};
				const result = await this.$myRequest({
					url: '/sys/sysDicts',
					data: {
						type: locale == 'zh' ? 'CONTINENT_CODE_DICT' : 'CONTINENT_CODE_DICT_EN'
					}
				});
				// console.log(result);
				this.options1 = result.data[0];
				this.options1.unshift(both1);
			},
			async get() {
				const res = await this.$myRequest({
					url: '/personnel/baseMemberInfos/searchByTypeApp',
					data: this.page
				});
				// console.log(res);
				let data = res.data;
				this.initDataArray = data;
				this.indexList = data.map(val => {
					return val.letter;
				});
				uni.hideLoading();
			},
			changeValue1(value) {
				this.page.continentDict = value;
				this.get();
			},
			changeValue2(value) {
				this.page.industryDict = value;
				this.get();
			},
			async getCountry() {
				const res = await this.$myRequest({
					url: '/sys/sysDicts',
					data: {
						type: this.$i18n.locale=='zh'?'UNIT_COUNTRY_DICT':'unit_country_dict_en'
					}
				});
				// console.log(res.data[0]);
				this.countryDicts = res.data[0];
				for(var i = 0; i < this.countryDicts.length; i++){
					this.countryDictsMap[this.countryDicts[i].value] = this.countryDicts[i].label ? this.countryDicts[i].label : this.countryDicts[i];
				}				
			},
			memberDetails(data) {
				this.detailShow = true;
				this.member = data;
				this.getProjectList(data.unitId,data.id);
			},
			async getProjectList(unitId,id) {
				const res = await this.$myRequest({
					url: '/project/baseUnitViews/getMemberUnit',
					data: {
						baseEntityId: unitId,
						language: this.$i18n.locale.toUpperCase()
					}
				});
				// console.log(res);
				if(res.data) {
					this.initData = res.data.baseUnitView || [];
					this.initData.unitLabel = this.initData.unitLabel?this.initData.unitLabel.split(','):"";
					this.initData.setUpDate = this.formatDate(this.initData.setUpDate,'YYYY');
					if(this.$i18n.locale == "zh"){
						this.initData.unitCountry = res.data.baseUnitView.unitCountry;
					}else if(this.$i18n.locale == "en"){
						this.initData.unitCountry = res.data.baseUnitView.unitCountryDict;
					}
				}else {
					this.initData = [];
				}
				
				let page = {
					language: this.$i18n.locale.toUpperCase(),
					businessType: 'introduction_to_members',
					businessId: id,
				};
				const info = await this.$myRequest({
					url: '/cms/cmsInformationViews/getInformationList/',
					data: page,
				});
				if(info.data) {
					this.initViewData = info.data.allDataList || [];
					console.log(info.data.allDataList)
				}else {
					this.initViewData = [];
				}
			},	
			
			openPopup() {
				
				// disableScroll
				// let query=uni.createSelectorQuery();
				// let dom=query.select('uni-page-wrapper').boundingClientRect();
				// let rectInfo = this.$u.getRect('.memberInformation');
			},
			closePopup() {
				// document.tagName('body')[0].style.overflow = 'auto';
			}
		}
	}
</script>

<style lang="scss" scoped>
	uni-page-wrapper {
		overflow-y: hidden;
	}
	/deep/.u-index-bar__sidebar {
		z-index: 9;
	}
	.memberInformation {
		background-color: #FFFFFF;
		.scroll-list {
			/* #ifndef APP-PLUS */
			height: calc(100vh - 88px);
			/* #endif */
			/* #ifdef APP-PLUS */
			height: calc(100vh - 44px);
			/* #endif */
		}
		.top-drop {
			position: fixed;
			/* #ifndef APP-PLUS */
			top: calc(44px + env(safe-area-inset-top));
			/* #endif */
			/* #ifdef APP-PLUS */
			top: 0;
			/* #endif */
			left: 0;
			z-index: 99;
			width: 100%;
			background-color: #FFFFFF;
		}
		.content-list {
			padding: 0 40upx;
			.listCell {
				display: flex;
				box-sizing: border-box;
				width: 100%;
				overflow: hidden;
				color: #333333;
				font-size: 32upx;
				padding: 20upx 0;
				border-bottom: 1px solid #F1F1F1;
				uni-view {
					font-size: inherit;
				}
			}
		}
		.popupView {
			padding: 20upx;
			height: 100%;
			position: relative;
			background: rgba(235,242,255,0.1);
			.popupImg {
				position: absolute;
				top: 50%;
				left: 50%;
				transform: translate(-50%,-50%);
				width: 80%;
				height: 60%;
				background-size: 100% 100%;
				z-index: -1;
			}
			.pop-title {
				display: flex;
				justify-content: space-between;
				.title-name {
					font-size: 34upx;
					font-weight: 700;
					color: #333333;
				}
				.title-bq {
					font-size: 30upx;
					background-color: #fef0f0;
					border: 1px solid #fde2e2;
					color: #f56c6c;
					padding: 10upx;
					border-radius: 6upx;
				}
			}
			.pop-name {
				font-size: 30upx;
				color: #333333;
				line-height: 50upx;
				.bold {
					font-weight: bold;
				}
			}
		}
	}
</style>