dev/dcp-app-gate/pages/consultancies/index.vue

<template>
	<view class="consultancies">
		<u-navbar :back-text="i18n('Back')" :back-text-style="backStyle" back-icon-color="#fff" title-color="#fff"
			:title="i18n('ThinkTankConsulting')" :background="background">
		</u-navbar>
		<view class="TankConsult">
			<!-- 发布需求 -->
			<view class="release">
				<view class="release-title">{{$t('common.ThinkTankSolution')}}</view>
				<u-button type="primary" shape="circle" size="medium" class="custom-style" @tap="demandShow = true">
					{{$t('common.ThinkTankPostDemand')}}
				</u-button>
			</view>
			<!-- 咨询服务 -->
			<view class="consulting-service">
				<view class="config-item">
					<view class="item-title">{{$t(consultServe[0].title)}}</view>
					<view class="item-cont">{{$t(consultServe[0].label)}}</view>
				</view>
				<view class="config-item">
					<view class="item-title">{{$t(consultServe[1].title)}}</view>
					<view class="item-cont">{{$t(consultServe[1].label)}}</view>
				</view>
				<view class="config-item">
					<view class="item-title">{{$t(consultServe[2].title)}}</view>
					<view class="item-cont">{{$t(consultServe[2].label)}}</view>
				</view>
				<view class="config-item">
					<view class="item-title">{{$t(consultServe[3].title)}}</view>
					<view class="item-cont">{{$t(consultServe[3].label)}}</view>
				</view>
			</view>
		</view>
		<!-- 气候治理专栏 -->
		<view class="section">
			<view class="section-title">{{$i18n.locale == 'zh' ?'气候治理专栏':'Climate Governance Column'}}</view>
			<view>
				<!-- <view class="uni-margin-wrap">
					<swiper class="swiper" circular :interval="interval" :duration="duration"
						:indicator-dots="indicatorDots">
						<swiper-item v-for="(picInfo,index) in GetPicDetails" :key="index">
							<view class="swiper-item" @tap="toggle(picInfo)">
								<image v-if="picInfo.photo" :src="websiteUrl+picInfo.photo" class="swiper-item-img">
								</image>
								<image v-else src='https://www.geidcp.com/img/defalut_weather.db437804.png'
									class="swiper-item-img">
								</image>
							</view>
							<view class="bottom-text">{{picInfo.name}}</view>
						</swiper-item>
					</swiper>
				</view> -->
				<!-- 图文详情弹窗 -->
				<view>
					<uni-popup ref="popup1" background-color="#fff" :mask-click="false">
						<swiper class="popup-content" :indicator-dots="indicatorDots">
							<swiper-item v-for="(item,index) in detailPop" :key="index">
								<view class="popup-text">
									<text class="popup-title">{{item.name}}</text><br />
								</view>
								<view>
									<image :src="websiteUrl+item.pictureUrl" class="popup-img"></image>
								</view>
								<view class="popup-text">
									<view class="popup-title-content">{{item.attachmentStatement}}</view>
								</view>
							</swiper-item>
							<swiper-item v-if='userInfoDetails'>
								<view class="popup-text">
									<text class="popup-title">{{infoName}}</text>
								</view>
								<view class="popup-text-info">
									{{$i18n.locale == 'zh' ?'无描述数据...':'No description data...'}}
								</view>
							</swiper-item>
						</swiper>
						<view class="close-img" @click="close">
							<image src="@/static/user-close.png" alt="" class="close-pic">
						</view>
					</uni-popup>
				</view>
			</view>
			<scroll-view :scroll-y="true" style="height: 410rpx;">
				<view class="sky-detail">
					<view class="sky-detail-text" v-for="(skyTitle,index) in GetSkyTitleList " :key="index"
						@tap="toAchieveTitle(skyTitle)">
						{{skyTitle.title}}
					</view>
				</view>
			</scroll-view>
		</view>
		<!-- 碳中和 -->
		<view class="section">
			<view class="section-title">
				{{$t('common.ThinkTankHotFocus')}}
				<u-icon name="arrow-down" color="#666666" class="arrow-down"></u-icon>
			</view>
			<scroll-view :scroll-y="true" style="height: 440rpx;">
				<view class="hot">
					<view class="hot-list" v-for="(hot,index) in HotFocus" :key="index" @tap="toDetails"
						:data-key="hot.baseEntityId">
						<view class="list-text u-line-1">
							{{hot.title}}
						</view>
						<!-- <view class="time">
							<text class="auther">{{ hot.auther }}</text>
							<text>{{formatDate(hot.updateDate)}}</text>
						</view> -->
					</view>
				</view>
			</scroll-view>
		</view>
		<!-- 虚拟电厂专栏 -->
		<view class="section">
			<view class="section-title">
				{{$t('common.VirtualPowerPlantColumn')}}
				<u-icon name="arrow-down" color="#666666" class="arrow-down"></u-icon>
			</view>
			<scroll-view :scroll-y="true" style="height: 440rpx;">
				<view class="achieve">
					<view class="achieve-list" v-for="(infoItem,index) in informationList" :key="index"
						@tap="toAchieveDetails(infoItem.baseEntityId)">
						{{infoItem.title}}
					</view>
				</view>
			</scroll-view>
		</view>
		<!-- 智库推荐 -->
		<view class="section">
			<view class="section-title">
				{{$t('common.ThinkTankRecommended')}}
				<u-icon name="arrow-down" color="#666666" class="arrow-down"></u-icon>
			</view>
			<view class="recommend">
				<view class="recommend-list" v-for="(recommenItem,index) in RecommendedList" :key="index"
					@tap="toViewDetails(recommenItem)">
					{{recommenItem.unitName}}
				</view>
				<!-- <view style="margin-top: 20rpx;">
					<u-loadmore :status="status" :load-text="loadText" />
				</view> -->
			</view>
		</view>
		<!-- 发布需求 -->
		<u-modal v-model="demandShow" :confirm-text="confirmText" :title="modalTitle">
			<view class="modal-view">
				<view class="modal-title">{{$t('common.ThinkTankRequirements')}}</view>
				<view class="tips">https://www.geidcp.com/</view>
				<view class="tips">{{$t('common.ThinkTankOpenBrowser')}}</view>
			</view>
		</u-modal>
		<!-- 智库推荐详情 -->
		<u-popup v-model="detailShow" mode="bottom" height="60%">
			<view class="popupView">
				<view class="pop-title">
					<text class="title-name">{{member.unitName}}</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.unitCountry}}{{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>
		<!-- 返回顶部 -->
		<u-back-top :scroll-top="scrollTop"></u-back-top>
		<!-- 轻提示 -->
		<u-toast ref="uToast" />
	</view>
</template>

<script>
	import rfSearchBar from '@/components/rf-search-bar';
	export default {
		data() {
			return {
				infoName: null,
				userInfoDetails: false,
				indicatorDots: true,
				interval: 2000,
				duration: 500,
				detailShow: false,
				GetDetails: false,
				scrollTop: 0,
				demandShow: false,
				language: this.$i18n.locale == 'zh' ? 'ZH' : 'EN',
				background: {
					// backgroundImage: 'linear-gradient(270deg, #4BC0E2 0%, #538BE7 100%)',
					backgroundColor: '#1777FE'
				},
				backStyle: {
					color: '#fff'
				},
				modalTitle: this.$i18n.locale == 'zh' ? '提示' : 'Tips',
				confirmText: this.$i18n.locale == 'zh' ? '确认' : 'Confirm',
				status: 'loading',
				isLoading: true,
				loadText: {
					loading: this.$i18n.locale == 'zh' ? '加载中' : 'Loading',
					nomore: this.$i18n.locale == 'zh' ? '没有更多数据了' : 'No more'
				},
				consultServe: [{
						title: 'common.ThinkTankMarketResearch',
						label: 'common.ThinkTankMarketResearchText'
					},
					{
						title: 'common.ThinkTankProjectConsultation',
						label: 'common.ThinkTankProjectConsultationText'
					},
					{
						title: 'common.ThinkTankScienceAndTechnologyInnovation',
						label: 'common.ThinkTankScienceAndTechnologyInnovationText'
					},
					{
						title: 'common.ThinkTankPlanningStudy',
						label: 'common.ThinkTankPlanningStudyText'
					},
				],
				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'
				],
				GetSkyTitleList: [],
				GetPicDetails: [],
				HotFocus: [],
				RecommendedList: [],
				informationList: [],
				hotList: {
					language: ''
				},
				recomParams: {
					pageSize: 10,
					pageNo: 1,
					language: ''
				},
				member: [],
				initData: {},
				countryDicts: [],
				countryDictsMap: {},
				detailPop: {},

			}
		},
		onLoad() {
			this.getHotFocus();
			this.getInformationList();
			this.getRecommended();
			this.getWeatherMgr();
			//this.getWeatherinfo();
		},
		components: {
			rfSearchBar
		},

		onPageScroll(e) {
			this.scrollTop = e.scrollTop;
		},
		methods: {
			i18n(data) {
				return this.$t('common.' + data);
			},
			back() {
				uni.navigateBack();
			},
			// 轮播图
			changeIndicatorDots(e) {
				this.indicatorDots = !this.indicatorDots
			},
			// changeAutoplay(e) {
			// 	this.autoplay = !this.autoplay
			// },
			intervalChange(e) {
				this.interval = e.target.value
			},
			durationChange(e) {
				this.duration = e.target.value
			},
			// 图片弹窗
			async toggle(e) {
				this.infoName = e.name
				await this.getWeatherinfoDetail(e.id);
				this.$refs.popup1.open(e.id)
			},
			//文章弹窗
			async toAchieveTitle(e) {
				// console.log(id);
				let key = e.id
				// console.log(key);
				uni.navigateTo({
					url: './weatherListDetail?key=' + key
				})

			},
			change(e) {
				this.show = e.show
			},
			close() {
				this.$refs.popup1.close()
			},
			// 通用跳转
			navToSearch() {
				this.$mRouter.push({
					route: `/pages/index/search/search?data=${JSON.stringify(this.search)}`
				});
			},
			toAchieveDetails(entityId) { //研究成果详情
				console.log(entityId);
				uni.navigateTo({
					url: '../resourceSharing/resultDetails?baseId=' + entityId
				});
			},
			toDetails(e) { //热点聚焦
				let key = e.currentTarget.dataset.key;
				uni.navigateTo({
					url: '../information/components/rankDetail?key=' + key
				});
			},
			async getInformationList() {
				const res = await this.$myRequest({
					url: '/cms/cmsInformationViews/commonInfoSpecialColumnList/',
					data: {
						// 'pageSize': '5',
						'pageNo': '1',
						'language': this.$i18n.locale.toUpperCase(),
						'columnName': 'VIRTUAL_POWER_PLANT_VPP'
					}
				});
				// console.log(res);
				this.informationList = res.data;
			},
			async getHotFocus() {
				this.hotList.language = this.$i18n.locale.toUpperCase();
				console.log('===1===', this.hotList.language);
				const res = await this.$myRequest({
					url: '/cms/cmsInformationViews/carbonNeutralList/',
					data: this.hotList
				});
				this.HotFocus = res.data;
				console.log(this.HotFocus, '------2222------');
			},
			async getRecommended() { //智库推荐
				this.recomParams.language = this.$i18n.locale.toUpperCase();
				const res = await this.$myRequest({
					url: '/project/baseThinkTankInfos',
					data: this.recomParams
				});
				// console.log(res);
				this.RecommendedList = res.data.baseThinkTankInfos;
				// if(this.recomParams.pageNo <= res.data.page.totalPage) {
				// this.RecommendedList = this.RecommendedList.concat(res.data.baseThinkTankInfos);
				// this.recomParams.pageNo += 1;
				// this.isLoading = true;
				// }else {
				// 	this.isLoading = false;
				// 	this.status = 'nomore';
				// }
			},
			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];
				}
			},
			toViewDetails(data) {
				this.getMemberUnitFlag(data.baseEntityId);
				this.member = data;
				this.getMemberUnit(data.baseEntityId);
				// console.log(data)
			},
			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 = [];
				}
			},
			async getWeatherMgr() { // 气候治理文章
				const res = await this.$myRequest({
					url: '/cms/cmsInformationEntitys/weatherArticle',
					data: {
						"language": this.language,
						"pageNo": "1",
						"pageSize": "999"
					}
				});
				// console.log(res);
				this.GetSkyTitleList = res.data.weatherArticle
			},
			async getWeatherinfo() { // 气候治理轮播图
				const res = await this.$myRequest({
					url: '/cms/weatherForPictureInfos/pictureAndGraph',
					data: {
						"language": this.language,
						"pageNo": "1",
						"pageSize": "20"
					}
				});
				// console.log(res);
				this.GetPicDetails = res.data.pictureAndGraph
				console.log('-----1----', this.GetPicDetails[0].photo);
			},

			async getWeatherinfoDetail(id) { // 气候治理轮播图详情
				this.detailPop = {};
				const res = await this.$myRequest({
					url: '/cms/weatherForPictureInfos/pictureAndGraphDetail',
					data: {
						"language": this.language,
						"pageNo": "1",
						"pageSize": "1",
						"id": id
					}
				});
				// console.log(res)
				this.detailPop = res.data.pictureAndGraphDetail
				console.log(this.detailPop);
				if (this.detailPop.length > 0) {
					this.userInfoDetails = false
				} else {
					this.userInfoDetails = true
				}
				console.log(this.userInfoDetails);
			},
		}
	}
</script>

<style lang="scss" scoped>
	.custom-style {
		background: linear-gradient(180deg, #F7B500 0%, #F7B500 100%);
		width: 250rpx;
		font-size: 34rpx;
	}

	/deep/ .u-model__title {
		font-size: 32rpx;
	}

	.modal-view {
		padding: 30rpx;
		text-align: center;

		.modal-title {
			font-size: 32rpx;
		}

		.tips {
			margin-top: 10rpx;
			font-size: 28rpx;
		}
	}

	.consultancies {
		.TankConsult {
			padding: 50rpx 30rpx 30rpx;
			background: url(../../static/img/consultancies/zk-new.jpg);
			background-size: 100% 100%;
		}

		.release {
			text-align: center;
			color: #FFFFFF;

			.release-title {
				font-size: 34rpx;
				padding: 50rpx 0;
			}
		}

		.consulting-service {
			margin-top: 30rpx;
			border-radius: 20rpx;
			padding: 50rpx 30rpx 30rpx;
			background-color: #FFFFFF;

			.config-item {
				.item-title {
					color: #333333;
					font-size: 34rpx;
					font-weight: bold;
					position: relative;
					padding-left: 20rpx;
				}

				.item-title:before {
					width: 8rpx;
					height: 34rpx;
					content: '';
					position: absolute;
					left: 0;
					top: 8rpx;
				}

				.item-cont {
					font-size: 30rpx;
					color: #666666;
					padding: 24rpx 0;
				}
			}

			.config-item:nth-child(1) .item-title:before {
				background-color: #e48742;
			}

			.config-item:nth-child(2) .item-title:before {
				background-color: #4cacf9;
			}

			.config-item:nth-child(3) .item-title:before {
				background-color: #efbe2d;
			}

			.config-item:nth-child(4) .item-title:before {
				background-color: #56cab9;
			}
		}

		.section {
			margin-top: 20rpx;
			background-color: #FFFFFF;
			padding: 20rpx 30rpx;

			.section-title {
				color: #333333;
				font-size: 34rpx;
				font-weight: bold;
				position: relative;
				padding-left: 20rpx;

				.arrow-down {
					position: absolute;
					right: 0;
					top: 8rpx;
				}
			}

			.uni-margin-wrap {
				width: 100%;
				margin-top: 10rpx;

				.swiper {
					width: 100%;

				}

				.swiper-item {
					display: block;
					height: 300rpx;
					line-height: 300rpx;
					text-align: center;

					.swiper-item-img {
						width: 88%;
						height: 300rpx;
						border-radius: 20rpx;
						margin-left: 6%;

					}
				}

				.bottom-text {
					background-color: #666666;
					font-size: 22px;
					width: 88%;
					margin-left: 6%;
					height: 70rpx;
					line-height: 70rpx;
					border-radius: 0 0 20rpx 20rpx;
					opacity: 0.6;
					color: #fff;
					padding: 0 15rpx 0 30rpx;
					overflow: hidden;
					white-space: nowrap;
					text-overflow: ellipsis;
					transform: translateY(-100%);
				}
			}

			.popup-content {
				height: 620rpx;
				width: 600rpx;
				background-color: #fff;
				border-radius: 20rpx;

				.popup-img {
					width: 600rpx;
					height: 330rpx;
				}

				.popup-text {

					.popup-title {
						color: #333333;
						font-size: 36rpx;
						font-weight: bold;
						margin-left: 2%;
					}

					.popup-title-content {
						color: #333;
						width: 96%;
						margin-left: 2%;
						letter-spacing: 4rpx;
						// padding: 0 10rpx;
					}
				}

				.popup-text-info {
					text-align: center;
					font-size: 20px;
					color: #666666;
					height: 500rpx;
					line-height: 500rpx;
				}
			}

			.close-img {
				height: 100rpx;
				width: 100rpx;
				text-align: center;
				line-height: 100rpx;
				margin-left: 50%;
				transform: translateX(-50%);
				margin-top: 20rpx;

				.close-pic {
					width: 100%;
					height: 100%;
				}
			}

			.section-title:before {
				width: 10rpx;
				height: 34rpx;
				content: '';
				position: absolute;
				left: 0;
				top: 8rpx;
				background-color: #6DD400;
				background-color: #6DD400;
			}

			.sky-detail {
				margin-top: 10rpx;
				white-space: nowrap;

				.sky-detail-text {
					padding: 20rpx 0;
					border-bottom: 1px solid #F1F1F1;
					font-size: 32rpx;
					text-overflow: ellipsis;
					overflow: hidden;
				}

				.sky-detail-text:last-child {
					border-bottom: none;
				}
			}
		}

		.achieve {
			margin-top: 10rpx;
			white-space: nowrap;

			.achieve-list {
				padding: 20rpx 0;
				border-bottom: 1px solid #F1F1F1;
				font-size: 32rpx;
				text-overflow: ellipsis;
				overflow: hidden;
			}

			.achieve-list:last-child {
				border-bottom: none;
			}
		}

		.hot {
			margin-top: 10rpx;
			white-space: nowrap;

			.hot-list {
				padding: 20rpx 0;
				border-bottom: 1px solid #F1F1F1;

				.list-text {
					font-size: 32rpx;
					color: #333333;
					text-overflow: ellipsis;
					overflow: hidden;
				}

				.time {
					margin-top: 15rpx;
					color: #666666;
					font-size: 28rpx;

					.auther {
						margin-right: 30rpx;
					}
				}
			}

			.hot-list:last-child {
				border-bottom: none;
			}
		}

		.recommend {
			margin-top: 10rpx;

			.recommend-list {
				padding: 15rpx;
				box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.1);
				font-size: 32rpx;
				color: #333333;
				margin-top: 15rpx;
				text-align: left;
				background-color: #FFFFFF;
				border-radius: 10rpx;
			}
		}
	}

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