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

<template>
	<view class="rf-category">
		<view class="icoStyle">
			<view class="leftArrow" @tap="back" color="#fff" size="40">
				<u-icon name="arrow-left" color="#fff" size="40" style="margin-right: 10upx;"></u-icon>
			</view>
			<rf-search-bar 
				@search="navToSearch" 
				icon="iconkuaijiecaidan"
				:title= "   $t('common.return')"
				:placeholder = "$i18n.locale == 'zh'? '请输入关键字': 'Please input keywords'" />
		</view>
		<view class="tabsBox">
			<view class="tabs">
				<view class="tab-lines"></view>
				<u-tabs-swiper ref="uTabs" :list="realTimeInfoScreens" :current="current" bar-width="120"
					@change="tabsChange" :is-scroll="false" swiperWidth="750">
				</u-tabs-swiper>
			</view>
			<swiper class="swiper-tab" :current="swiperCurrent" @transition="transition" @animationfinish="animationfinish">
				<!-- 会员介绍 -->
				<swiper-item class="swiper-item">
					<scroll-view scroll-y style="width: 100%;height: 100%;">
						<member-introduction></member-introduction>
					</scroll-view>
				</swiper-item>
				<!-- 联盟介绍 -->
				<swiper-item class="swiper-item">
					<scroll-view scroll-y style="width: 100%;height: 100%;">
						<league-introduction @league-event="leagueEvent"></league-introduction>
					</scroll-view>
				</swiper-item>
				<!-- 合作单位介绍 -->
				<swiper-item class="swiper-item">
					<scroll-view scroll-y style="width: 100%;height: 100%;">
						<unit-introduction @popup-event="parentEvent"></unit-introduction>
					</scroll-view>
				</swiper-item>
				<!-- 定制服务 -->
				<swiper-item class="swiper-item">
					<scroll-view scroll-y style="width: 100%;height: 100%;">
						<custom-service></custom-service>
					</scroll-view>
				</swiper-item>
			</swiper>
		</view>
		
		<!-- 详情 -->
		<u-popup v-model="detailShow" mode="bottom" height="60%">
			<view class="popupView">
				<view class="pop-title">
					<text class="title-name">{{$i18n.locale=='zh'?this.member.unitZhName:this.member.unitEnName}}</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>
		</u-popup>
	</view>
</template>

<script>
	import rfSearchBar from '@/components/rf-search-bar';
	import memberIntroduction from './components/memberIntroduction.vue';
	import leagueIntroduction from './components/leagueIntroduction.vue';
	import unitIntroduction from './components/unitIntroduction.vue';
	import customService from './components/customService.vue';
	export default {
		components: {
			rfSearchBar,
			memberIntroduction,
			leagueIntroduction,
			unitIntroduction,
			customService
		},
		data(){
			return {
				detailShow: false,
				realTimeInfoScreens:[{
					name: this.$i18n.locale ==='zh'? "会员介绍" : "Member",
					value: 'member'
				},{
					name: this.$i18n.locale ==='zh'? "联盟介绍" : "Alliance",
					value: 'union'
				},{
					name: this.$i18n.locale ==='zh'? "合作单位介绍" : "Partners",
					value: 'cooperation'
				},{
					name: this.$i18n.locale ==='zh'? "定制服务" : "Customized Service",
					value: 'custom'
				}],
				current: 0,
				swiperCurrent: 0,
				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'],
				member: [],
				initData: {},
				countryDicts: [],
				countryDictsMap: {},
			}
		},
		onLoad(options){
			this.current= options.id?options.id:0;
			this.swiperCurrent= options.id?options.id:0;
			this.getCountry();
		},
		methods: {
			back() {
				uni.navigateBack();
			},
			leagueEvent(data) {  //联盟介绍弹框
				this.getMemberUnitFlag(data.unitId);
				this.member = data;
				this.getMemberUnit(data.unitId);
			},
			parentEvent(data) {  //合作单位介绍弹框
				this.detailShow = true;
				this.member = data;
				this.getMemberUnit(data.unitId);
			},
			// tabs通知swiper切换
			tabsChange(index) {
				this.swiperCurrent = index;
			},
			// swiper-item左右移动，通知tabs的滑块跟随移动
			transition(e) {
				let dx = e.detail.dx;
				this.$refs.uTabs.setDx(dx);
			},
			animationfinish(e) {
				let current = e.detail.current;
				this.$refs.uTabs.setFinishCurrent(current);
				this.swiperCurrent = current;
				this.current = current;
			},
			// 通用跳转
			navToSearch() {
				this.$mRouter.push({
					route: `/pages/index/search/search?data=${JSON.stringify(this.search)}`
				});
			},
			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];
				}				
			},
			async getMemberUnitFlag(unitId) {
				const res = await this.$myRequest({
					url: '/project/baseUnitViews/getMemberUnitFlag',
					data: {
						baseEntityId: unitId,
						language: this.$i18n.locale.toUpperCase()
					}
				});
				if(res.data.flag) {
					this.detailShow = true;
				}else {
					this.$refs.uToast.show({
						title: this.$i18n.locale == 'zh'? '暂无数据': 'No data available',
						type: 'warning'
					});
					this.detailShow = false;
				}
			},
			async getMemberUnit(unitId) {
				const res = await this.$myRequest({
					url: '/project/baseUnitViews/getMemberUnit',
					data: {
						baseEntityId: unitId,
						language: this.$i18n.locale.toUpperCase()
					}
				});
				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 = [];
				}
			}
		}
	}
</script>

<style lang="scss" scoped>
	.rf-category {
		/*  #ifdef  APP-PLUS  */
		padding-top: var(--status-bar-height);
		/*  #endif  */
	}
	.icoStyle {
		display: flex;
		.leftArrow {
			position: absolute;
			left: 4upx;
			top: calc(30upx + var(--status-bar-height));;
			z-index: 9999;
		}
	}
	.tabsBox {
		display: flex;
		flex-direction: column;
		/*  #ifdef  APP-PLUS  */
		height: calc(100vh - var(--status-bar-height));
		/*  #endif  */
		/*  #ifndef  APP-PLUS  */
		height: 100vh;
		/*  #endif  */
		width: 100%;
		padding-top: 168upx;
		.tabs {
			position: fixed;
			top: calc(88upx + var(--status-bar-height));
			left: 0;
			z-index: 9999;
			width: 100%;
		}
		.tab-lines {
			width: 100%;
			height: 1px;
			background-color: #E1E1E1;
			position: absolute;
			bottom: 1px;
			left: 0;
		}
	}
	.swiper-tab {
		flex: 1;
	}
	.popupView {
		padding: 20upx 30upx;
		.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>