dev/dcp-app-gate/pages/country/countryList/countryDetail.vue

<template>
	<view class="rf-category">
		<!--<u-navbar :back-text="i18n('Back')" :back-text-style="backStyle"
			back-icon-color="#fff" title-color="#fff"
			:title="i18n('CountryDetails')"
			:background="background">
		</u-navbar>-->
		<u-navbar :is-back="true" :back-icon-color="'#fff'" :background="{'background':'#1777FE'}" :border-bottom="true"
			:back-text="$t('common.Back')" :title-color="'#fff'" :back-text-style="{color:'#fff'}">
			<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="saveFollowModel(followed)"
					v-if="this.followed"></u-icon>
				<u-icon name="heart" color="#fff" size="36" @click="saveFollowModel(followed)" v-if="!this.followed">
				</u-icon>
			</view>
		</u-navbar>
		<view class="uni-margin-wrap">
			<swiper class="swiper" circular :indicator-dots="true" indicator-active-color="#333" :autoplay="false"
				:interval="2000" :duration="500">
				<swiper-item v-for="(item,index) in photos" :key="index">
					<navigator>
						<image class="swiper-img" :src="websiteUrl+item"></image>
					</navigator>
				</swiper-item>
			</swiper>
		</view>
		<view style="margin-left: 10px;">
			<view style="font-weight: bold;">{{countryInfo.zhName}}</view>
			<view style="margin-top: 10px;">{{$t('common.EnglishName') }}：{{countryInfo.enName}}</view>
			<view style="margin-top: 10px;">{{$t('common.State') }}：{{areMap[countryInfo.areDict]}}</view>
			<view style="margin-top: 10px;">{{$t('common.Basicsituation') }}：</view>
			<view>{{countryInfo.basicProfile}}</view>
		</view>
		<view style="margin-top: 10px;">
			<scroll-view scroll-x class="index-cate">
				<view style="display: inline-block;width: 100%;" :style="$i18n.locale=='en'?
				'display: flex;justify-content: space-between;':''">
					<view class="index-cate-item2" :style="$i18n.locale=='zh'?
								'width:30%;':''" style="color: #000;" :class="tabCurrentIndex === 1 ? `text-${themeColor.name} active` : ''"
						@tap.stop="tabClick(1)">
						{{$t('common.Resources') }}
					</view>
					<view :style="$i18n.locale=='zh'?
								'width:30%;':''" class="index-cate-item2" style="color: #000;"
						:class="tabCurrentIndex === 2 ? `text-${themeColor.name} active` : ''" @tap.stop="tabClick(2)">
						{{ $t('common.EnergyDevelopmentPlanning') }}
					</view>
					<view :style="$i18n.locale=='zh'?
								'width:30%;':''" class="index-cate-item2" style="color: #000;"
						:class="tabCurrentIndex === 3 ? `text-${themeColor.name} active` : ''" @tap.stop="tabClick(3)">
						{{ $t('common.ProjectDevelopmentGuide') }}
					</view>
					<view :style="$i18n.locale=='zh'?
								'width:30%;':''" class="index-cate-item2" style="color: #000;"
						:class="tabCurrentIndex === 4 ? `text-${themeColor.name} active` : ''" @tap.stop="tabClick(4)">
						{{ $t('common.LawsRegulations') }}
					</view>
				</view>

			</scroll-view>
			<view v-if="tabCurrentIndex==1" style="margin-left: 10px;margin-top: 10px;">
				<view v-html="info1.contentHtml"></view>
				<view v-if="info1.contentHtml == '' || info1.contentHtml == null "  style="text-align: center">{{$t('common.Nodataavailable')}}</view>
			</view>
			<view v-if="tabCurrentIndex==2 && isLogin" style="margin-left: 10px;margin-top: 10px;">
				<view v-html="info2.contentHtml"></view>
				<view v-if="info2.contentHtml == '' || info2.contentHtml == null  "  style="text-align: center">{{$t('common.Nodataavailable')}}</view>
			</view>
			<view v-if="tabCurrentIndex==3 && isLogin" style="margin-left: 10px;margin-top: 10px;">
				<view v-html="info3.contentHtml"></view>
				<view v-if="info3.contentHtml == '' || info3.contentHtml == null  "  style="text-align: center">{{$t('common.Nodataavailable')}}</view>
			</view>
			<view v-if="tabCurrentIndex==4 && isLogin" style="margin-left: 10px;margin-top: 10px;">
				<view v-html="info4.contentHtml"></view>
				<Regulations :pdfUrl="pdfUrl" :baseEntityId="baseEntityId"></Regulations>
			</view>

		</view>
		<!-- 8.8.20.112:19001
		 -->
		<share v-show="ifShare == true" :show="ifShare" @closeShare="share"
			:title="i18n('Country') + '->' + i18n('CountryInformation')" :summary="$i18n.locale=='zh'? countryInfo.zhName : countryInfo.enName "
			:href="'https://m.geidcp.com/#/pages/country/countryList/countryDetail?' + '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 -->
		<u-toast ref="uToast" />
	</view>
</template>

<script>
	import {
		addIntegral
	} from '@/components/addPointDetailByTaskDict.js'
	import UNavbar from '@/components/uni-nav-bar/uni-nav-bar.vue'
	import mSearch from '@/components/rf-search/rf-search';
	import newsItem from '@/pages/information/news-item'
	import share from '@/components/share'
	import Regulations from './regulations'
	export default {
		data() {
			return {
				tabCurrentIndex: 1,
				baseEntityId: '',
				countryInfo: Object,
				photos: [],
				info1: Object,
				info2: Object,
				info3: Object,
				info4: Object,
				areDict: [],
				ifShare: false,
				background: {
					backgroundImage: 'linear-gradient(270deg, #4BC0E2 0%, #538BE7 100%)',
				},
				backStyle: {
					color: '#fff'
				},
				followed: '',
				modelType: 'country',
				pdfUrl: '',
				// token:'',
				isLogin: false,

			}
		},
		components: {
			UNavbar,
			mSearch,
			newsItem,
			share,
			Regulations,
			addIntegral
		},
		computed: {
			areMap() {
				let obj = {

				}

				this.areDict.forEach(item => {
					obj[item.value] = item.label
				})
				return obj;
			}
		},
		onLoad(option) {
			this.baseEntityId = option.baseEntityId;
			if (option.language) {
				uni.setStorageSync("language", option.language);
				this._i18n.locale = option.language;
			}
		},
		onReady() {
			this.token = uni.getStorageSync('Auth-Token') ? ('Bearer ' + uni.getStorageSync('Auth-Token')) : '';
			console.log('this.token')
			console.log(this.token)
			this.userId = uni.getStorageSync('user') ? (JSON.parse(uni.getStorageSync('user')).id) : '';
			this.cofLogin();
			this.getCountryInfo()
			this.tab1()
			this.tab2()
			this.tab3()
			this.tab4()
			this.dict()
			this.getFollowModelStatusByModelIdAndUserId()
		},
		methods: {
			// //判断登录
			cofLogin() {
				if (this.token == '' && uni.getStorageSync('user') == '') {
					this.isLogin = false;
				} else {
					this.isLogin = true;
				}

			},
			//跳转链接
			navTo(route) {

				if (this.$i18n.locale == 'zh') {
					this.$refs.uToast.show({
						title: '请登录',
						type: 'warning',
						url: '/pages/public/login',
						duration: 800,
						params: {
							back: 1
						}
					})
				} else {
					this.$refs.uToast.show({
						title: 'please log in',
						type: 'warning',
						url: '/pages/public/login',
						duration: 800,
						params: {
							back: 1
						}
					})
				}
			},

			share() {
				this.ifShare = !this.ifShare;
			},
			i18n(data) {
				return this.$t('common.' + data);
			},
			tabClick(index) {
				this.tabCurrentIndex = index;
				if (index != 1) {
					if (this.token == '' && uni.getStorageSync('user') == '') {
						this.isLogin = false;
						this.toLogin()
					}else {
						this.isLogin = true;
					}
				}

			},
			//登录跳转
			toLogin() {
				if (this.$i18n.locale == 'zh') {
					this.$refs.uToast.show({
						title: '请登录',
						type: 'warning',
						url: '/pages/public/login',
						duration: 800,
						params: {
							back: 1
						}
					})
				} else {
					this.$refs.uToast.show({
						title: 'please log in',
						type: 'warning',
						url: '/pages/public/login',
						duration: 800,
						params: {
							back: 1
						}
					})
				}

			},
			async getCountryInfo(baseEntityId) {
				const res = await this.$myRequest({
					url: '/project/baseCountryViews/',
					data: {
						baseEntityId: this.baseEntityId,
						language: this.$i18n.locale.toUpperCase()
					}
				});
				this.id = res.baseEntityId;
				if (res.data) {
					this.countryInfo = res.data.baseCountryViews[0];
					this.photos = this.countryInfo.photo.split(",")
				}
			},
			async tab1(baseEntityId) {
				const res = await this.$myRequest({
					url: '/cms/cmsInformationViews/getInformationList/',
					data: {
						pageSize: 5,
						pageNo: 1,
						businessType: 'countryShow',
						businessId: this.baseEntityId,
						typeDict: 2,
						language: this.$i18n.locale.toUpperCase()
					}
				});
				if (res.data.allDataList.length != 0) {
					this.info1 = res.data.allDataList[0];
				}
			},
			async tab2(baseEntityId) {
				const res = await this.$myRequest({
					url: '/cms/cmsInformationViews/getInformationList/',
					data: {
						pageSize: 5,
						pageNo: 1,
						businessType: 'countryShow',
						businessId: this.baseEntityId,
						typeDict: 3,
						language: this.$i18n.locale.toUpperCase()
					}
				});
				if (res.data.allDataList.length != 0) {
					this.info2 = res.data.allDataList[0];
				}
			},
			async tab3(baseEntityId) {
				const res = await this.$myRequest({
					url: '/cms/cmsInformationViews/getInformationList/',
					data: {
						pageSize: 5,
						pageNo: 1,
						businessType: 'countryShow',
						businessId: this.baseEntityId,
						typeDict: 5,
						language: this.$i18n.locale.toUpperCase()
					}
				});
				if (res.data.allDataList.length != 0) {
					this.info3 = res.data.allDataList[0];
				}
			},
			async tab4(baseEntityId) {
				const res = await this.$myRequest({
					url: '/cms/cmsInformationViews/getInformationList/',
					data: {
						pageSize: 5,
						pageNo: 1,
						businessType: 'countryShow',
						businessId: this.baseEntityId,
						typeDict: 8,
						language: this.$i18n.locale.toUpperCase()
					}
				});
				if (res.data.allDataList.length != 0) {
					this.info4 = res.data ? res.data.allDataList[0] : [];
					this.pdfUrl = this.info4?.pdfPath ? 'api/file/pub/' + this.info4?.pdfPath : '';
				}
			},
			async dict() {
				const res = await this.$myRequest({
					url: '/sys/sysDicts',
					data: {
						type: this.$i18n.locale == 'en' ? "CONTINENT_CODE_DICT_EN" : "CONTINENT_CODE_DICT"
					}
				});

				if (res.data) {
					this.areDict = res.data[0]
				}
			},
			// 是否被关注
			async getFollowModelStatusByModelIdAndUserId() {
				let res = await this.$myRequest({
					url: '/op/basePortalModelFollowInfos/followModelStatusByModelIdAndUserId',
					data: {
						modelId: this.baseEntityId,
						modelType: this.modelType,
						userId: this.userId
					}
				})
				this.followed = res.data;
			},
			// 关注或取消关注
			async saveFollowModel(flag) {
				if (this.token.length <= 7) {
					uni.navigateTo({
						url: '/pages/public/login?back=1'
					})
				} else {
					let [type, msg, followfailmsg] = [];
					if (!flag) {
						type = "follow";
						addIntegral('point_task_attention', '1')
						msg = this.$i18n.locale == 'zh' ? '关注成功' : 'fowllow success'
						followfailmsg = this.$i18n.locale == 'zh' ? '关注失败' : 'fowllow fail'
					} else {
						type = "unfollow"
						msg = this.$i18n.locale == 'zh' ? '取消关注成功' : 'cancel fowllow success'
						followfailmsg = this.$i18n.locale == 'zh' ? '取消关注失败' : 'cnacel fowllow fail'
					}
					let res = await this.$myRequest({
						url: '/op/basePortalModelFollowInfos/followModel',
						method: 'post',
						headers: {
							token: this.token
						},
						data: {
							modelId: this.baseEntityId,
							modelType: this.modelType,
							userId: this.userId,
							followType: type,
						}
					})
					if (!flag) {
						if (res.status == '200' && res.msg == 'ok') {
							this.$refs.uToast.show({
								title: msg,
								type: 'success'
							})
							this.followed = !this.followed;
						} else this.$refs.uToast.show({
							title: followfailmsg,
							type: 'error'
						})
					} else {
						if (res.status == '200' && res.msg == 'ok') {
							this.$refs.uToast.show({
								title: msg,
								type: 'success'
							})
							this.followed = !this.followed;
						} else this.$refs.uToast.show({
							title: followfailmsg,
							type: 'error'
						})
					}
				}
			},
		}
	}
</script>

<style lang="scss" scoped>
	.rf-category {
		background-color: $color-white;
	}

	.recommend-bottom {
		float: right;
		height: 200upx;
		width: 488upx;
	}

	.index-cate .index-cate-item2 {
		display: inline-block;
		height: 75upx;
		line-height: 75upx;
		margin: 0 15upx 10upx;
		text-align: center;
		font-size: $font-base;
		color: $color-white;
	}

	.infoList {
		padding-top: 20upx;
		display: flex;
		flex-direction: initial;
		justify-content: space-between;
	}

	.leftImg {
		width: 185upx;
		height: 140upx;
	}

	.img {
		width: 100%;
		height: 100%;
	}

	.rightCont {
		width: 460upx;
		padding-bottom: 20upx;
		border-bottom: 1px solid #F1F1F1;
	}

	.title {
		color: #333333;
		font-size: 32upx;
		font-weight: 700;
		overflow: hidden;
		text-overflow: ellipsis;
		display: -webkit-box;
		-webkit-line-clamp: 2;
		-webkit-box-orient: vertical;
	}

	.title-base {
		font-size: 24upx;
		color: #999999;
		margin-top: 10upx;
		display: flex;
		flex-direction: initial;


	}

	.time {
		margin-left: 30upx;
	}

	.info-cont {
		margin-top: 10upx;
		font-size: 28upx;
		overflow: hidden;
		text-overflow: ellipsis;
		display: -webkit-box;
		-webkit-line-clamp: 2;
		-webkit-box-orient: vertical;
	}

	.view {
		flex-direction: column;
	}

	.flex-row {
		flex-direction: row;
	}

	.flex-col {
		flex-direction: column;
	}

	.list-cell {
		padding: 0 15px;
	}

	.uni-list-cell-hover {
		background-color: #eeeeee;
	}

	.media-item {
		position: relative;
		flex: 1;
		flex-direction: column;
		padding: 0 30upx;
	}

	.media-item-line {
		position: absolute;
		left: 15px;
		right: 15px;
		bottom: 0;
		height: 1px;
		background-color: #ebebeb;
	}

	.media-image-right {
		flex-direction: row;
	}

	.media-image-left {
		flex-direction: row-reverse;
	}

	.media-title {
		flex: 1;
	}

	.media-title {
		lines: 3;
		text-overflow: ellipsis;
		font-size: 15px;
		color: #555555;
	}

	.media-title2 {
		flex: 1;
		margin-top: 3px;
		line-height: 20px;
	}

	.image-section {
		margin-top: 10px;
		flex-direction: row;
		justify-content: space-between;
	}

	.image-section-right {
		margin-top: 0;
		margin-left: 5px;
		width: 112px;
		height: 73px;
	}

	.image-section-left {
		margin-top: 0;
		margin-right: 5px;
		width: 112px;
		height: 73px;
	}

	.image-list1 {
		height: 240px;
	}

	.image-list2 {
		width: 112px;
		height: 73px;
	}

	.image-list3 {
		width: 112px;
		height: 73px;
	}

	.media-info {
		flex-direction: row;
		align-items: center;
	}

	.info-text {
		margin-right: 10px;
		color: #999999;
		font-size: 12px;
	}

	.media-foot {
		margin-top: 12px;
		flex-direction: row;
		align-items: center;
		justify-content: space-between;
	}

	.close-view {
		position: relative;
		align-items: center;
		flex-direction: row;
		width: 20px;
		height: 15px;
		line-height: 15px;
		border-width: 1upx;
		border-style: solid;
		border-color: #aaaaaa;
		border-radius: 4px;
		justify-content: center;
		text-align: center;
	}

	.close-l {
		position: absolute;
		width: 9px;
		height: 1px;
		background-color: #aaaaaa;
	}

	.close-h {
		transform: rotate(45deg);
	}

	.close-v {
		transform: rotate(-45deg);
	}

	.uni-margin-wrap {}

	.swiper {
		width: 100%;
		height: 310upx;
	}

	.swiper-img {
		width: 100%;
		height: 310upx;
	}

	.recommend-bottom-name {
		font-size: 35upx;
		font-family: PingFangSC-Medium, PingFang SC;
		font-weight: 500;
		color: #0B0B11;
		line-height: 65upx;
		margin-top: 30upx;
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
	}
</style>