dev/dcp-app-gate/pages/country/enterprise/enterpriseDetail.vue

<template>
	<view style="margin:0 0px;background-color: #fff;">
		<u-toast ref="uToast" />
		<u-navbar :back-text="i18n('Back')" :back-text-style="backStyle" back-icon-color="#fff" title-color="#fff"
			:title="i18n('EnterpriseShow')" :background="background">
			<view slot="right" style="margin-right:20upx">
				<u-icon name="share-fill" style="margin-right: 30upx;" color="white" size="50" @click="share"></u-icon>
				<u-icon name="heart-fill" color="#fff" size="36" @click="follow" v-if="ifcommon"></u-icon>
				<u-icon name="heart" color="#fff" size="36" @click="follow" v-if="!ifcommon"></u-icon>
			</view>

		</u-navbar>
		<view style="">
			<view class="uni-margin-wrap">

				<swiper class="swiper" :indicator-dots="indicatorDots" :autoplay="autoplay" :interval="interval"
					:duration="duration">
					<swiper-item v-for="(item,index) in photos" v-if="photos.length>0">
						<view class="swiper-item uni-bg-red" style="height: 100%;">
							<image style="width: 100%;height: 100%;" class="swiper-img" :src="websiteUrl+item"
								v-if="item"></image>
						</view>
					</swiper-item>
					<swiper-item v-if="photos.length<=0">
						<view class="swiper-item uni-bg-red" style="height: 100%;">
							<image style="width: 100%;height: 100%;" class="swiper-img"
								:src="websiteUrl+'/def/projectdefault.png'"></image>
						</view>
					</swiper-item>
				</swiper>
			</view>
		</view>
		<view>
			<img :src="websiteUrl+ enterpriseInfo.photo" alt="" v-if="enterpriseInfo.photo"
				style="width: 200upx;height: 150upx;">
			<img :src="'api/file/pub/'+'/def/projectdefault.png'" alt="" v-else style="width: 200upx;height: 150upx;">

			<view class="recommend-bottom">
				<text class="recommend-bottom-name">{{enterpriseInfo.unitName}}</text>
				<text class="tabs" v-if="enterpriseInfo.recommendFlag=='y'">{{i18n('recommend2')}}</text>
				<!-- <view>{{enterpriseInfo.unitCountryDict}} - {{enterpriseInfo.unitRegion}} -->
				<view>
					<text>
						{{$i18n.locale === 'zh'?enterpriseInfo.unitCountry:enterpriseInfo.unitCountryDict.charAt(0).toUpperCase() + enterpriseInfo.unitCountryDict.slice(1)}}
					</text>
					<text v-show="enterpriseInfo.unitRegion"> - </text>
					<text>{{enterpriseInfo.unitRegion}}</text>
				</view>


			</view>
			<view style="font-weight: bold;margin: 20upx 0 0 20upx;">
				{{i18n('EnterpriseIntroduction')}}
			</view>
			<view style="margin: 20upx 20upx 0 20upx;">
				{{enterpriseInfo.projectPerformance}}
			</view>
			<text v-for="(enterpriseInfo,index) in enterpriseInfo.labelList">
				<u-tag :text="enterpriseInfo" mode="light" style="margin:10px 15upx 15upx 0upx;" />
			</text>
		</view>


		<scroll-view scroll-x class="index-cate">
			<view style="display: inline-block;width: 100%;">
				<view class="index-cate-item" style="color: #000;"
					:class="tabCurrentIndex === 1 ? `text-${themeColor.name} active` : ''" @tap.stop="tabClick(1)">
					{{$t('common.ProductInformation') }}
				</view>
				<view class="index-cate-item" style="color: #000;"
					:class="tabCurrentIndex === 2 ? `text-${themeColor.name} active` : ''" @tap.stop="tabClick(2)">
					{{ $t('common.CoreTechnology') }}
				</view>
				<view class="index-cate-item" style="color: #000;"
					:class="tabCurrentIndex === 3 ? `text-${themeColor.name} active` : ''" @tap.stop="tabClick(3)">
					{{ $t('common.ProjectPerformance') }}
				</view>
				<view class="index-cate-item" style="color: #000;"
					:class="tabCurrentIndex === 4 ? `text-${themeColor.name} active` : ''" @tap.stop="tabClick(4)">
					{{ $t('common.LatestDevelopment') }}
				</view>
			</view>

		</scroll-view>
		<view v-if="tabCurrentIndex==1" style="margin-left: 20upx;margin-top: 20upx;">
			<view v-if="info1 && info1.length!=0">
				<view v-for="(item,index) in info1" :key="index"
					@click="navToList('/pages/country/countryList/countryInformationDetails',item.baseEntityId)">
					<text class="text-title">{{item.title}}</text>
					<text style="float: right;margin-right: 20upx;"
						class="title-time">{{formatDate(item.createDate)}}</text>
				</view>
			</view>

			<view v-else>
				<text class="text-NoData">{{i18n('Nodataavailable')}}</text>
			</view>
		</view>
		<view v-if="tabCurrentIndex==2" style="margin-left: 10px;margin-top: 10px;">
			<view v-if="info2 && info2.length!=0">
				<view v-for="(item,index) in info2" :key="index"
					@click="navToList('/pages/country/countryList/countryInformationDetails',item.baseEntityId)">
					<text class="text-title">{{item.title}}</text>
					<text style="float: right;margin-right: 20upx;"
						class="title-time">{{formatDate(item.createDate)}}</text>
				</view>
			</view>
			<view v-else>
				<text class="text-NoData">{{i18n('Nodataavailable')}}</text>
			</view>
		</view>
		<view v-if="tabCurrentIndex==3" style="margin-left: 10px;margin-top: 10px;">
			<view v-if="info3 && info3.length!=0">
				<view v-for="(item,index) in info3" :key="index"
					@click="navToList('/pages/country/countryList/countryInformationDetails',item.baseEntityId)">
					<text class="text-title">{{item.title}}</text>
					<text style="float: right;margin-right: 20upx;"
						class="title-time">{{formatDate(item.createDate)}}</text>
				</view>
			</view>

			<view v-else>
				<text class="text-NoData">{{i18n('Nodataavailable')}}</text>
			</view>
		</view>
		
		<view v-if="tabCurrentIndex==4" style="margin-left: 10px;margin-top: 10px;">
			<!-- <view v-for="(item,index) in newsInfos"
				@click="navToList('/pages/country/countryList/countryInformationDetails',item.baseEntityId)">
				<view class="media-item view">
					<view class="infoList">
						<view class="leftImg" v-if="item.pictureUrl">
							<image class="img" :src="websiteUrl+item.pictureUrl" mode=""></image>
						</view>
						<view class="rightCont" :style="{ width: item.pictureUrl?'460upx':'100%' }">
							<view class="title">{{ item.title }}</view>
							<view class="info-cont">
								{{ item.content }}
							</view>
							<view class="title-base">
								<text>{{ item.auther }}</text>
								<text class="time">{{ formatDate(item.publishDate) }}</text>
							</view>
						</view>
					</view>
				</view>
			</view> -->
			
			<view v-if="newsInfos && newsInfos.length!=0">
				<view v-for="(item,index) in newsInfos" :key="index"
					@click="navToList('/pages/country/countryList/countryInformationDetails',item.baseEntityId)">
					<text class="text-title">{{item.title}}</text>
					<text style="float: right;margin-right: 20upx;"
						class="title-time">{{formatDate(item.createDate)}}</text>
				</view>
			</view>
			
			<view v-else>
				<text class="text-NoData">{{i18n('Nodataavailable')}}</text>
			</view>
		</view>
		
		<!-- 8.8.20.112:19001 -->
		<share v-show="ifShare == true" @closeShare="share" :show="ifShare"
			:title="i18n('Enterprise') + '->' + i18n('EnterpriseShow')" :summary="enterpriseInfo.unitName"
			:href="'https://m.geidcp.com/#/pages/country/enterprise/enterpriseDetail?' + 'baseEntityId=' + baseEntityId + '&language=' + $i18n.locale"
			:imageUrl="photos && photos[0]?websiteUrl+ photos[0] + '?custom=370_220':
								'https://geidcp.com/api/file/pub/defaultCutPic/shareLogo.png'">
		</share>
		<!-- #ifdef H5 -->
		<rf-back-home></rf-back-home>
		<!-- #endif -->
	</view>
</template>

<script>
	import {
		addIntegral
	} from '@/components/addPointDetailByTaskDict.js'
	import share from '@/components/share'
	export default {
		components: {
			share,
			addIntegral
		},
		data() {
			return {
				baseEntityId: '',
				background: {
					backgroundImage: 'linear-gradient(270deg, #4BC0E2 0%, #538BE7 100%)',
				},
				backStyle: {
					color: '#fff'
				},
				enterpriseInfo: Object,
				photos: [],
				tabCurrentIndex: 1,
				info1: [],
				info2: [],
				info3: [],
				indicatorDots: true,
				autoplay: true,
				interval: 2000,
				duration: 500,
				// 收藏
				ifcommon: false,
				// 用户信息
				Storage_data: '',
				AuthToken: '',
				ifShare: false,
				newsInfos: [],
			}

		},
		onLoad(option) {
			console.log(option);
			console.log(option.baseEntityId);
			this.baseEntityId = option.baseEntityId;
			if (option.language) {
				uni.setStorageSync("language", option.language);
				this._i18n.locale = option.language;
			}
		},
		async onReady() {
			// 获取登录状态和用户信息 开始
			this.AuthToken = uni.getStorageSync('Auth-Token');
			if (this.AuthToken) {
				this.Storage_data = JSON.parse(uni.getStorageSync('user'));
			}
			// 获取登录状态和用户信息 结束
			await this.getEnterpriseInfo();
			await this.getCmsInfos();
			// 获取关注状态 开始
			await this.getMyCollecModel();
			await this.getNewsInfo(null);
			// 获取关注状态 结束
		},
		computed: {
			token() {
				return 'Bearer ' + uni.getStorageSync('Auth-Token');
			}
		},
		methods: {
			share() {
				this.ifShare = !this.ifShare;
			},
			i18n(data) {
				return this.$t('common.' + data);
			},
			async getEnterpriseInfo(baseEntityId) {
				const res = await this.$myRequest({
					url: '/project/baseUnitViews/',
					data: {
						baseEntityId: this.baseEntityId,
						language: this.$i18n.locale.toUpperCase()
					}
				});
				if (res.data) {
					this.enterpriseInfo = res.data.baseUnitViews[0];
					if (this.enterpriseInfo.unitLabel) {
						this.enterpriseInfo["labelList"] = this.enterpriseInfo.unitLabel.split(",");
					} else {
						this.enterpriseInfo["labelList"] = []
					}
					// this.photos = this.countryInfo.photo?this.countryInfo.photo.split(","):[];
				}
				console.log(123, res)
			},
			tabClick(index) {
				this.tabCurrentIndex = index
			},
			navToList(src, data) {

				this.$mRouter.push({
					route: src + '?id=' + data
				});
			},
			async getCmsInfos(baseEntityId) {
				const res = await this.$myRequest({
					url: '/cms/cmsInformationViews/getInformationList/',
					data: {
						businessType: 'unitShow',
						businessId: this.baseEntityId,
						language: this.$i18n.locale.toUpperCase()
					}
				});
				if (res.data) {
					this.info1 = res.data["1"];
					this.info2 = res.data["2"];
					this.info3 = res.data["3"];
					this.photos = [];
					if (this.info1) {
						this.info1.forEach((item, index) => {
							if (item.pictureUrl && index <= 3) {
								this.photos.push(item.pictureUrl);
							}
						})
					}
					if (this.info2) {
						this.info2.forEach((item, index) => {
							if (item.pictureUrl && index <= 3) {
								this.photos.push(item.pictureUrl);
							}
						})
					}
					if (this.info3) {
						this.info3.forEach((item, index) => {
							if (item.pictureUrl && index <= 3) {
								this.photos.push(item.pictureUrl);
							}
						})
					}

				}
			},
			//收藏
			follow() {
				if (this.AuthToken) {
					this.shareChange()
				} else {
					if (this.$i18n.locale == 'zh') {
						this.$refs.uToast.show({
							title: '请登录',
							type: 'warning',
							url: '/pages/public/login',
							params: {
								back: 1
							}
						})
					} else {
						this.$refs.uToast.show({
							title: 'please log in',
							type: 'warning',
							url: '/pages/public/login',
							params: {
								back: 1
							}
						})
					}
				}
			},
			async getMyCollecModel() {
				const that = this;
				if (this.AuthToken) {
					var users = this.Storage_data;
					let MyCollecModel = {
						modelType: 'enterprise',
						userId: users.id,
						modelEntityId: this.enterpriseInfo.baseEntityId,
					}
					const res = await this.$myRequest({
						url: '/op/basePortalModelFollowInfos/followModelStatusByModelIdAndUserId',
						data: {
							modelId: this.enterpriseInfo.baseEntityId,
							modelType: 'enterprise',
							userId: users.id,
						}
					});
					if (res) {
						this.ifcommon = res.data;
					}
				}
			},
			// 关注操作方法
			shareChange() {
				if (this.ifcommon) {
					this.saveFollowModelDo("unfollow");
				} else {
					this.saveFollowModelDo("follow");
				}
			},
			async saveFollowModelDo(followType) {
				if (!this.AuthToken) {
					// 登录
				} else {
					var users = this.Storage_data;
					let MyCollecModel = {
						followType: followType,
						modelId: this.enterpriseInfo.baseEntityId,
						modelType: 'enterprise',
						userId: users.id,
					};
					const res = await this.$myRequest({
						url: '/op/basePortalModelFollowInfos/followModel',
						method: 'post',
						headers: {
							token: this.token
						},
						data: {
							followType: followType,
							modelId: this.enterpriseInfo.baseEntityId,
							modelType: 'enterprise',
							userId: users.id,
						}
					});
					if (res) {
						if (followType == 'unfollow') {
							if (this.$i18n.locale == 'zh') {
								this.$refs.uToast.show({
									title: '取消关注',
									type: 'success',
								})
							} else {
								this.$refs.uToast.show({
									title: 'Cancel concerned',
									type: 'success',
								})
							}
						} else {
							if (this.$i18n.locale == 'zh') {
								this.$refs.uToast.show({
									title: '已关注',
									type: 'success',
								})
							} else {
								this.$refs.uToast.show({
									title: 'Already concerned',
									type: 'success',
								})
							}
							addIntegral('point_task_attention', '1')
						}
						this.ifcommon = !this.ifcommon;
					}
				}
			},
			
			//最新动态
			async getNewsInfo(page) {
				const res = await this.$myRequest({
					url: '/cms/cmsInformationViews/getCountryDynamicInfos',
					data: {
						pageNo: 1,
						pageSize: 10,
						language: this.$i18n.locale.toUpperCase(),
					}
				});
				if (res.data) {
					this.newsInfos = res.data;
				}
			},
		},

	}
</script>

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

	.recommend-bottom {
		float: right;
		height: 160upx;
		width: 488upx;
		position: relative;
	}

	.list-cell {
		display: flex;
		box-sizing: border-box;
		width: 100%;
		padding: 10px 24upx;
		overflow: hidden;
		color: #323233;
		font-size: 14px;
		line-height: 24px;
		background-color: #fff;
	}

	.tabs {
		padding: 5upx 10upx;
		border-radius: 10upx;
		color: #fff;
		position: absolute;
		top: 8upx;
		right: 10upx;
		font-size: 24upx;
		margin-top: 10upx;
		background-color: #fab019;

	}

	.tabs2 {
		padding: 10upx 20upx;
		border: #2B85E4 1px solid;
		border-radius: 10upx;
		color: #2B85E4;
		margin-top: 10upx;
		font-size: 1px;
		margin-left: 1upx;


	}

	.recommend-bottom-name {
		font-size: 30upx;
		font-family: PingFangSC-Medium, PingFang SC;
		font-weight: 500;
		overflow: hidden;
		-webkit-line-clamp: 2;
		text-overflow: ellipsis;
		display: -webkit-box;
		width: 400upx;
		-webkit-box-orient: vertical;
		color: #0B0B11;
		line-height: 45upx;
		margin-top: 30upx;
		vertical-align: top;
	}

	.index-cate .index-cate-item {
		//margin: 0 4upx 10upx;
		width: 30%;
		display: inline-block;
	}

	.text-title {
		float: left;
		width: 400upx;
		white-space: nowrap;
		overflow: hidden;
		text-overflow: ellipsis;
		height: 100upx;
		line-height: 100upx;

	}

	.title-time {
		height: 100upx;
		line-height: 100upx;
	}

	.text-NoData {
		font-size: 50upx;
		height: 200upx;
		display: flex;
		justify-content: center;
		align-items: center;
		color: #767676;
	}
</style>