dev/dcp-app-gate/pages/country/projectPresentation/projectPresentationDetails.vue

<template>
	<view class="rf-category">
		<u-toast ref="uToast" />
		<u-navbar :back-text="i18n('Back')" :back-text-style="backStyle" back-icon-color="#fff" title-color="#fff"
			:title="i18n('ProjectDetails')" :background="background">
			<!-- 分享先隐藏 -->
			<view class="navbar-right" slot="right">
				<view class="message-box right-item" style="padding-right: 20rpx;" @click="share">
					<u-icon name="share-fill" color="white" size="50"></u-icon>
				</view>
			</view>
			<!-- <share></share> -->
		</u-navbar>
		<text style="width: 700upx;display: inline-block;margin: 10upx 0 0 20upx;
		font-weight: 700;font-size: 36upx;">{{activityInfo.projectName}}</text>
		<swiper class="swiper" :indicator-dots="indicatorDots" :autoplay="autoplay" :interval="interval"
			:duration="duration">
			<swiper-item v-for="(item,index) in activityInfo.bannerList" :key='index'>
				<view class="swiper-item uni-bg-red">
					<image v-if="activityInfo.bannerList.length>0 && activityInfo.bannerList[0].length>0"
						:src="'https://www.geidcp.com/api/fileextend/pub/'+ item + '?custom=370_220'" alt=""
						style="width: 100%;height: 100%;"></image>
					<image v-else
						:src="'https://www.geidcp.com/api/file/pub/def/projectdefault.png' + '?custom=370_220'" alt=""
						style="width: 100%;height: 100%;"></image>
				</view>
			</swiper-item>
			<!-- 	<swiper-item   v-if="activityInfo.bannerList==0">
				<view class="swiper-item uni-bg-red" >
					
					
				</view>
			</swiper-item> -->
		</swiper>
		<view class="">
		</view>

		<view class="" style="padding: 20upx 20upx;">
			<view class="" style="font-size: 32upx;">
				<view class="border-title"></view>
				{{i18n('ProjectDetails')}}
				<text class="tabs" v-if="activityInfo.recommendFlag=='y'" alt=""
					style="float: right;vertical-align: middle;">
					{{i18n('Recommend')}}
				</text>
			</view>
			<view class="activeItem">
				<!-- <u-icon name="map" style="margin-right: 10upx;"></u-icon> -->
				{{i18n('ProjectArea')}}：
				{{activityInfo.bannerFour}}
			</view>
			<view class="activeItem">
				<!-- <u-icon name="map" style="margin-right: 10upx;"></u-icon> -->
				{{i18n('UCountry')}}
				{{activityInfo.unitCountry}}
			</view>
			<view class="activeItem">
				<!-- <i class="fa fa-calendar" style="margin-right: 10upx;"></i> -->
				{{i18n('Updatedate')}} : {{handlePublishTimeDesc(toDate,activityInfo.createDate,$i18n.locale)}}
				{{i18n('release')}}
				<!-- 更新时间：
				{{formatDate(activityInfo.createDate)}} - {{formatDate(activityInfo.updateDate)}} -->
			</view>
			<!-- <view class="activeItem">
				<i class="fa fa-calendar" style="margin-right: 10upx;"></i>
				{{activityInfo.bannerFour}}
			</view> -->
			<view class="activeItem">
				{{i18n('ProjectNumber')}}：
				<text style="color: #25d602;font-weight: 600;">
					{{activityInfo.projectNum? activityInfo.projectNum : i18n('NoProjectNumber')}}
				</text>
			</view>
			<view class="activeItem">
				{{i18n('ProjectTags')}}：{{activityInfo.technicalCategories}} | {{activityInfo.technicalScope}}
			</view>
			<view class="activeItem">
				{{i18n('CurrentStage')}}：{{activityInfo.phaseType}}
			</view>
			<u-tabs :list="list" :is-scroll="false" :current="current" @change="change"></u-tabs>
			<view v-if="current==0" class="woldKeep" style="margin-top: 25upx;
					min-height: 400upx;padding-bottom: 120upx;" v-html='activityInfo.projectDescription'>

			</view>
			<view v-if="current==1&&AuthToken" class="woldKeep" :style="$i18n.locale=='en'?'':''" style="
					margin-top: 25upx;min-height: 400upx;padding-bottom: 120upx;" v-html='activityInfo.projectRequirements'>
					<view v-if="activityInfo.projectRequirements == '' || activityInfo.projectRequirements == null  "  style="text-align: center">{{$t('common.Nodataavailable')}}</view>
			</view>
			<!-- title 分享的分类   summary 分享的介绍  href 分享的地址 8.8.20.112:19001 -->
			<share v-show="ifShare == true" :show="ifShare" @closeShare="share"
				:title="i18n('Project') + '->' + i18n('ProjectDetails')" :summary="activityInfo.projectName"
				:href="'https://m.geidcp.com/#/pages/country/projectPresentation/projectPresentationDetails?' + 'id=' + id + '&language=' + $i18n.locale"
				:imageUrl="activityInfo.bannerList && activityInfo.bannerList[0]?'https://www.geidcp.com/api/fileextend/pub/'+ activityInfo.bannerList[0] + '?custom=370_220':
									'https://m.geidcp.com/api/file/pub/defaultCutPic/shareLogo.png'">
			</share>
			<!-- #ifdef H5 -->
			<rf-back-home></rf-back-home>
			<!-- #endif -->
			<!-- 分享 -->
			<view class="active-bottom">
				<view class=" active-bottom-right" @click="enquiry">
					<u-icon name="chat" style="font-size: 36upx;margin-right: 8upx;"></u-icon>
					{{$i18n.locale=='zh'?'在线问询':i18n('OlineConsulting')}}
				</view>
				<view class="active-bottom-left" style="position: relative;" @click="follow">
					<u-icon name="star" :color="ifcommon === true?'#FDFEFF':'#FDFEFF'"
						style="font-size: 36upx;margin-right: 8upx;vertical-align: middle;"></u-icon>
					{{$i18n.locale == 'zh' ? (ifcommon === true ? "已关注" : "关注") : (ifcommon === true ? "Concerned" : " Follow")}}
				</view>
			</view>
			<!--<view class="active-bottom" style="padding: 0 30upx;">
				<view style="width: 50%;height: 100%;display: inline-block;" @click="follow">
					<view style="width: 100%;height: 80%;margin-top: 10upx;border-radius: 80upx 0 0 80upx;background-color: #2979ff;">
						<view style="line-height: 80upx;color: white;">
							<u-icon name="chat-fill" color="white" size="28" style="margin-right: 10upx;"></u-icon>
							<text style="line-height: 80upx;color: white;">{{i18n('OlineConsulting')}}</text>
						</view>
					</view>
				</view>
				<view style="width: 50%;height: 100%;display: inline-block;" @click="follow">
					<view style="width: 100%;height: 80%;margin-top: 10upx;border-radius: 0 80upx 80upx 0;background-color: #00C777;">
						<view style="line-height: 80upx;color: white;">
							<u-icon :name="ifcommon === true?'heart-fill':'heart'" :color="ifcommon === true?'white':'white'" size="28" style="margin-right: 10upx;"></u-icon>
							{{$i18n.locale == 'zh' ? (ifcommon === true ? "已关注" : "关注") : (ifcommon === true ? "Concerned" : " Follow")}}
						</view>
					</view>
				</view>
			</view>-->
		</view>

		<u-popup mode="center" v-model="popupShow" border-radius="14" width="90%" :mask-close-able='false'
			:z-index="9999" :closeable='true'>
			<view>
				<scroll-view scroll-y="true" style="width:100%; height: 100%;">
					<view style="width:100%;">
						<view style="width:100%;margin: 30upx auto 0 auto;text-align: center;">
							<text style="font-size: 34upx;">{{i18n('ConsultingBar')}}</text>
						</view>
						<view style="width:90%;margin: 60upx auto 0 auto;font-size: 30upx;">
							<view>
								<u-icon name="coupon"></u-icon>
								<text style="margin-left: 10upx;">{{i18n('projectName')}}:</text>
								<text style="margin-left: 10upx;">{{activityInfo.projectName}}</text>
							</view>
							<view>
								<u-icon name="bookmark"></u-icon>
								<text style="margin-left: 10upx;">{{activityInfo.technicalCategories}} | </text>
								<text style="margin-left: 10upx;">{{activityInfo.technicalScope}}</text>
							</view>
							<view>
								<u-icon name="file-text"></u-icon>
								<text style="margin-left: 10upx;">{{i18n('ProjectNumber')}}:</text>
								<text
									style="margin-left: 10upx;">{{activityInfo.projectNum? activityInfo.projectNum : i18n('NoProjectNumber')}}</text>
							</view>
						</view>
						<view style="width:90%;margin: 60upx auto 0 auto;font-size: 30upx;">
							<u-input v-model="inputValue" type="textarea" border="true" height="200" auto-height="true"
								:placeholder="i18n('EnterContent')" />
						</view>
						<view style="width:90%;margin: 60upx auto 60upx auto;font-size: 30upx;text-align: center;">
							<u-button size="mini" @click="popupShow=false">{{i18n('cancel')}}</u-button>
							<u-button type="primary" size="mini" style="margin-left: 40upx;" @click="consultMessage">
								{{i18n('OK')}}
							</u-button>
						</view>
					</view>
				</scroll-view>
			</view>
		</u-popup>
		<u-toast ref="uToast" :z-index="99999" />
	</view>
</template>

<script>
	import share from '@/components/share'
	import {getSignature} from '@/api/meeting/meetingApply.js'
	import {
		addIntegral
	} from '@/components/addPointDetailByTaskDict.js'
	export default {
		components: {
			share,
			addIntegral
		},
		data() {
			return {
				inputValue: '',
				popupShow: false,
				id: '',
				ifShare: false,
				background: {
					backgroundImage: 'linear-gradient(270deg, #4BC0E2 0%, #538BE7 100%)',
				},
				backStyle: {
					color: '#fff'
				},
				activityInfo: {},
				indicatorDots: true,
				autoplay: true,
				interval: 2000,
				duration: 500,
				toDate: Date.parse(new Date()),
				list: [],
				current: 0,
				// 收藏
				ifcommon: false,
				// 用户信息
				Storage_data: '',
				AuthToken: '',
				token: '',
			}

		},
		onLoad(option) {
			this.id = option.id;
			if (option.language) {
				uni.setStorageSync("language", option.language);
				this._i18n.locale = option.language;
			}
		},
		async onShow() {
			// 获取登录状态和用户信息 开始
			this.AuthToken = uni.getStorageSync('Auth-Token');
			console.log(this.AuthToken, '====4===');
			if (this.AuthToken) {
				this.Storage_data = JSON.parse(uni.getStorageSync('user'));
				setTimeout(() => {
					console.log('===3===');
					addIntegral('point_task_view_resources_project', '3')
				}, 1000);
			}
			// 获取登录状态和用户信息 结束
			this.list = [{
				name: this.$t('common.ProjectPresentation')
			}, {
				name: this.$t('common.AssessmentAnalysis')
			}];
			let page = {
				pageNo: 0,
				pageSize: 1,
				projectId: this.id,
				language: this.$i18n.locale.toUpperCase()
			}
			const res = await this.$myRequest({
				url: '/project/baseProjectViews/gateGetProjectViewInfo',
				data: {
					...page
				}
			});
			this.activityInfo = res.data.baseProjectView || [];
			this.getList();
			// 获取关注状态 开始
			this.getMyCollecModel()
			// 获取关注状态 结束
		},
		watch: {
			'popupShow'(val, oldval) {
				if (val == false) {
					this.inputValue = ""
				}
			}
		},
		computed: {
			/*token() {
				return 'Bearer ' + uni.getStorageSync('Auth-Token');
			}*/
		},
		methods: {
			closeShare() {
				this.ifShare = !this.ifShare;
			},
			share() {
				this.ifShare = !this.ifShare;
				// let url = 'https://m.geidcp.com/#/'.replace("#", "guiguketan");//window.location.href.replace("#", "guiguketan");
				// getSignature(url).then((response) => {
				// 	console.log('response.data',response.data);
				// 	//记录分享用户
				// 	let link = "";
				// 	if (window.location.href.indexOf("?") != -1) {
				// 			  link = window.location.href + "&recommend=" + response.data.userEedId;
				// 	} else {
				// 			  link = window.location.href + "?recommend=" + response.data.userEedId;
				// 	}
				// 	let option = {
				// 		title: 'this.courseVo.title',
				// 		desc: 'this.description',
				// 			  link: link,
				// 			  imgUrl: 'https://photo.16pic.com/00/60/11/16pic_6011829_b.jpg',
				// 	};
				// 	wxShare.wxRegister(response.data, option);
				// });
			},
			async getList() {
				const res = await this.$myRequest({
					url: '/sys/sysDicts/',
					data: {
						type: this.$i18n.locale == "zh" ?
							'PROJECT_CATEGORIES_DICT,TECHNICAL_SCOPE_DICT,PHASE_TYPE_DICT' :
							'PROJECT_CATEGORIES_DICT_EN,TECHNICAL_SCOPE_DICT_EN,PHASE_TYPE_DICT_EN'
					}
				});
				res.data[0].forEach((i) => {
					if (i.value == this.activityInfo.technicalCategories) {
						this.activityInfo.technicalCategories = i.label;
					}
				});
				res.data[1].forEach((i) => {
					if (i.value == this.activityInfo.technicalScope) {
						this.activityInfo.technicalScope = i.label;
					}
				});
				res.data[2].forEach((i) => {
					if (i.value == this.activityInfo.phaseType) {
						this.activityInfo.phaseType = i.label;
					}
				});
			},
			enquiry() {
				if (this.AuthToken) {
					console.log(112313);
					this.popupShow = true
				} else {
					this.toLogin()
				}

			},

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

			},
			async consultMessage() {
				if (this.inputValue) {
					if (this.inputValue.match(/^\s+$/)) {
						return this.inputValue = '';
					}
					if (this.inputValue.match(/^[ ]+$/)) {
						return this.inputValue = '';
					}
					if (this.inputValue.match(/^[ ]*$/)) {
						return this.inputValue = '';
					}
					if (this.inputValue.match(/^\s*$/)) {
						return this.inputValue = '';
					}
					const that = this;
					let consultMessageInfo = {}
					consultMessageInfo.replyStatusDict = "N";
					consultMessageInfo.senderDate = new Date();
					consultMessageInfo.bizObjectType = "0";
					consultMessageInfo.columnCode = this.activityInfo.projectId;
					consultMessageInfo.content = this.inputValue;


					const resToken = await this.$myRequest({
						url: '/sys/token',
						method: 'get',
					});
					that.token = resToken.data;
					const res = await this.$myRequest({
						url: '/op/consultMessageInfos',
						method: 'post',
						headers: {},
						data: {
							token: that.token,
							consultMessageInfo: JSON.stringify(consultMessageInfo)
						}
					});
					if (res.status == 200) {
						console.log('===2===');
						addIntegral('point_task_project_ask', '3')
						this.$refs.uToast.show({
							title: this.i18n('Sentsuccessfullypleasewaitforreply'),
							type: 'success',
						})
					} else {
						if (res.msg == "系统繁忙，请稍后再试。") {
							if (this.$i18n.locale == 'zh') {
								this.$refs.uToast.show({
									title: '系统繁忙，请稍后再试。',
									type: 'error',
								})
							} else {
								this.$refs.uToast.show({
									title: 'System busy, please try again later.',
									type: 'error',
								})
							}
						} else {
							if (this.$i18n.locale == 'zh') {
								this.$refs.uToast.show({
									title: '发送失败，请重新发送',
									type: 'error',
								})
							} else {
								this.$refs.uToast.show({
									title: 'Sending failed, please resend',
									type: 'error',
								})
							}
						}
					}
					this.popupShow = false
				} else {
					if (this.$i18n.locale == 'zh') {
						this.$refs.uToast.show({
							title: '请输入内容。',
							type: 'warning',
						})
					} else {
						this.$refs.uToast.show({
							title: 'Please enter content.',
							type: 'warning',
						})
					}
					this.inputValue = '';
				}
			},
			i18n(data) {
				return this.$t('common.' + data);
			},
			change(index) {
				this.current = index;
				if (index == 1) {
					if (!this.AuthToken) {
						this.toLogin()
					}
				}
			},
			//收藏
			follow() {
				if (this.AuthToken) {
					this.shareChange()

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

			},
			async getMyCollecModel() {
				const that = this;
				if (this.AuthToken) {
					var users = this.Storage_data;
					let MyCollecModel = {
						modelType: 'project',
						userId: users.userId,
						modelEntityId: this.activityInfo.projectId,
					}
					const res = await this.$myRequest({
						url: '/op/basePortalModelFollowInfos/followModelStatusByModelIdAndUserId',
						data: {
							modelId: this.activityInfo.projectId,
							modelType: 'project',
							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.activityInfo.projectId,
						modelType: 'project',
						userId: users.id,
					};
					const res = await this.$myRequest({
						url: '/op/basePortalModelFollowInfos/followModel',
						method: 'post',
						headers: {
							token: this.token
						},
						data: {
							followType: followType,
							modelId: this.activityInfo.projectId,
							modelType: 'project',
							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',
								})
							}
							console.log('===1===');
							addIntegral('point_task_attention', '1')
						}
						this.ifcommon = !this.ifcommon;
					}
				}
			},
		}
	}
</script>

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

	.rf-category {
		background-color: $color-white;
		/*  #ifdef  APP-PLUS  */
		// margin-top: calc(20upx + var(--status-bar-height));
		/*  #endif  */

	}

	.slot-wrap {
		display: flex;
		align-items: center;
		/* 如果您想让slot内容占满整个导航栏的宽度 */
		/* flex: 1; */
		/* 如果您想让slot内容与导航栏左右有空隙 */
		/* padding: 0 30rpx; */
	}

	.swiper {
		height: 300upx;
	}

	.activeItem {
		line-height: 60upx;
		padding-left: 20upx;
		font-size: 28upx;
	}

	.swiper-item,
	.swiper-item img {
		width: 100%;
		height: 100%;
	}

	.active-bottom {
		position: fixed;
		bottom: 0;
		left: 0;
		height: 100upx;
		width: 750upx;
		background-color: #fff;
		border: 1px solid #eee;
		text-align: center;

		.active-bottom-left {
			width: 50%;
			height: 100%;
			line-height: 100upx;
			display: inline-block;
			color: #FDFEFF;
			font-size: 30upx;
			border-radius: 0 50upx 50upx 0;
			background: #6DD400;
		}

		.active-bottom-right {
			width: 50%;
			height: 100%;
			line-height: 100upx;
			display: inline-block;
			color: #FDFEFF;
			font-size: 30upx;
			border-radius: 50upx 0 0 50upx;
			background: #0091FF;
		}

	}

	.tabs {
		padding: 5upx 10upx;
		border: #fab019 1px solid;
		border-radius: 15upx;
		font-size: 26upx;
		background-color: #fab019;
		color: #fff;
	}

	.woldKeep /deep/ img,
	.woldKeep /deep/ p {
		max-width: 720upx;
	}

	.woldKeep /deep/ p {
		max-width: 720upx;
		word-break: break-all;
	}

	.border-title {
		width: 15upx;
		height: 50upx;
		vertical-align: middle;
		background-color: #007AFF;
		display: inline-block;
		margin-right: 10upx;
	}
</style>