dev/dcp-app-gate/pages/cooperationExchange/cooperationExchangeList/activitiesInfo.vue

<template>
	<view class="rf-category">
		<!-- <view class="bg"></view> -->
		<u-toast ref="uToast" />
		
		<u-navbar :back-text="i18n('Back')" :back-text-style="backStyle" back-icon-color="#fff" title-color="#fff"
			:title="i18n('ActivitiesInfo')" :background="background">
			<view slot="right" style="margin-right:20upx" v-if="isMobile">
				<u-icon name="share-fill" style="margin-right: 30upx;" color="white" size="50" @click="share"></u-icon>
			</view>
		</u-navbar>
		
		<view class="module-classify-border"></view>
		<view class="biaoTi">{{activityInfo.activityName}}</view>
		<view class="tuPian">
			<image :src="websiteUrl+ activityInfo.activityLogo + '?custom=600_260'" v-if="activityInfo.activityLogo"
				alt="" style="width: 690upx;height: 100%;"></image>
			<image :src="websiteUrl+'/def/projectdefault.png'" v-else alt="" style="width: 100%;height: 100%; "></image>

			<text style="display: inline-block;">
				<text v-if="activityInfo.activityStatusDict=='0'"
					:class="$i18n.locale=='zh'?'activityStatus':'activityStatusEn'"
					style="color: #ffffff; background-color:#32C5FF;">
					<text
						:style="$i18n.locale=='en'?'margin-left: 170upx;':'margin-left: 240upx;'">{{i18n('Notstarted')}}</text>
				</text>
				<text v-if="activityInfo.activityStatusDict=='1'"
					:class="$i18n.locale=='zh'?'activityStatus':'activityStatusEn'"
					style="color: #ffffff ;background-color:#32C5FF;">
					<text
						:style="$i18n.locale=='en'?'margin-left: 120upx; ':'margin-left: 240upx;'">{{i18n('Registrationinprogress')}}</text>
				</text>
				<text v-if="activityInfo.activityStatusDict=='2'"
					:class="$i18n.locale=='zh'?'activityStatus':'activityStatusEn'"
					style="color: #ffffff;background-color:#9B9B9B;">
					<text
						:style="$i18n.locale=='en'?'margin-left: 170upx;':'margin-left: 240upx;'">{{i18n('Inaction')}}</text>
				</text>
				<text v-if="activityInfo.activityStatusDict=='3'"
					:class="$i18n.locale=='zh'?'activityStatus':'activityStatusEn'"
					style="color: #ffffff;background-color:#9B9B9B;">
					<text
						:style="$i18n.locale=='en'?'margin-left: 170upx;':'margin-left: 240upx;'">{{i18n('Finished')}}</text>
				</text>

				<text v-if="$i18n.locale=='zh'"
					:class="activityInfo.activityType=='会员活动'?'yellow':activityInfo.activityType=='联盟活动'?'green':'red'">
					<text style=" margin-left: 18upx;">{{activityInfo.activityType}}</text>
				</text>
				<text v-if="$i18n.locale=='en'" style="padding-right: 250upx;margin-right: 200upx;"
					:class="activityInfo.activityType=='会员活动'?'yellow':activityInfo.activityType=='联盟活动'?'green':'red' ">
					<text style="margin-left: 10upx;">{{activityInfo.activityType=='会员活动'?'MemberActivities'
				 			:activityInfo.activityType=='联盟活动'?'AllianceActivities'
				 				:'CooperationActivities'}}</text>
				</text>
			</text>
		</view>

		<!-- <view class="recommend-bottom-address">
			<u-icon name="map" color="#D8D8D8" size="36" style="margin: 35upx 26upx 35upx 35upx;"></u-icon>

			<text
				style="padding: 29upx 0upx; min-width: 112upx; height: 44upx; font-size: 28upx; color: #333333;">{{this.$i18n.locale=='zh'?'活动地点':'Venue'}}</text>
			<text class="recommend-bottom-font">{{activityInfo.activityCity}}</text>
		</view> -->
		<!-- <view class="module-classify-border"></view> -->
		<!-- <view class="recommend-bottom-time">
			<u-icon name="calendar" color="#D8D8D8" size="40" style="margin: 35upx 26upx 35upx 35upx;"></u-icon>
			<text
				style="padding: 29upx 0upx; min-width: 112upx; height: 44upx; font-size: 28upx; color: #333333;">{{this.$i18n.locale=='zh'?'活动日期':'Activity date'}}</text>
			<text class="recommend-bottom-font">
				{{formatDate(activityInfo.activityStartTime)}} - {{formatDate(activityInfo.activityEndTime)}}
			</text>
		</view> -->
		<view class="module-classify-border"></view>
		<u-tabs :list="screenList" :current="current" @change="change" bar-width="120"></u-tabs>

		<cooperationActiveIntroduce v-show="current=='0'" :activityIntroduction="activityInfo.activityIntroduction">
		</cooperationActiveIntroduce>

		<cooperationActiveAgenda v-show="current=='1'" :programOutline="activityInfo.programOutline">
		</cooperationActiveAgenda>

		<cooperationActiveReview v-show="current=='2'" :activityInfo="activityInfo" :photos="photos">
		</cooperationActiveReview>

		<cooperationActiveResults v-show="current=='3'" :countryList="countryList" :id="activityInfo.id">
		</cooperationActiveResults>

		<view style="height: 103upx;width: 100%;"></view>
		<view
			style="height: 103upx;width: 100%;position: fixed;bottom: 0;box-shadow: 0px -4px 10px 0px rgba(0, 0, 0, 0.06);background-color: white;">
			<view style=" margin-left: 50upx;width: 100upx;height: 100%;padding-top: 10upx;float: left;">
				<view style="width: 180upx;text-align: center;" :style="{color: ifcommon==true?'#66A5FF':'#666666'}"
					@click="follow">
					<view style="height: 44upx;">
						<u-icon :name="ifcommon==true?'heart-fill':'heart'" size="44" style="line-height: 1"></u-icon>
					</view>
					<view>
						<text style="font-size: 20upx;line-height: 1">
							{{$i18n.locale == 'zh' ? (ifcommon === true ? "已关注" : "关注") : (ifcommon === true ? "Concerned" : " Follow")}}
						</text>
					</view>
				</view>
			</view>
			<view style="width: 430upx;height: 100%;padding: 15upx 0;margin-right: 30upx;float: right;">
				<view style="width: 100%;height: 100%;text-align: center;border-radius: 72upx;"
					:style="{backgroundColor:activityInfo.activityStatus=='未开始'?'#85ce61': activityInfo.activityStatus=='报名中'?'#409EFF':activityInfo.activityStatus=='已结束'?'#B3BCCC':'#E6A23C'}"
					@click="toRegistration" v-show="activityInfo.registtrationFlag=='y'">
					<text style="color: white;font-size: 28upx;line-height: 73upx;">
						{{$i18n.locale=='zh'?
						activityInfo.activityStatus:
						(activityInfo.activityStatus=='未开始'?'To be started': activityInfo.activityStatus=='报名中'?'Signing Up':activityInfo.activityStatus=='已结束'?'Endeded':'In the activity')}}
					</text>
				</view>
			</view>
			<view style="clear: both;"></view>
		</view>
		<!-- 8.8.20.112:19001
		 -->
		<share v-show="ifShare == true" @closeShare="share" :show="ifShare" :title="$i18n.locale=='en'?activityInfo.activityType=='会员活动'?'MemberActivities'
				 			:activityInfo.activityType=='联盟活动'?'AllianceActivities'
				 				:'CooperationActivities':activityInfo.activityType" :summary="activityInfo.activityName"
			:href="'https://m.geidcp.com/#/pages/cooperationExchange/cooperationExchangeList/activitiesInfo?' + 'ActivitesId=' + baseActivityEntityId + '&language=' + $i18n.locale"
			:imageUrl="activityInfo.activityLogo?websiteUrl+ activityInfo.activityLogo + '?custom=600_260':'https://geidcp.com/api/file/pub/defaultCutPic/shareLogo.png'">
		</share>
		<!-- #ifdef H5 -->
		<rf-back-home></rf-back-home>
		<!-- #endif -->
		<u-modal v-model="show" :title="i18n('Tips')" :confirm-text="i18n('submit')" :cancel-text="i18n('cancel')"
			@confirm="settingConfirm" :content="$i18n.locale == 'zh' ? '是否登录？' : 'Log in?'" :show-cancel-button="true">
		</u-modal>

	</view>
</template>

<script>
	import {
		getSignature
	} from '@/api/meeting/meetingApply.js'
	import wxShare from '@/utils/wxShare.js'

	import cooperationActiveIntroduce from '@/pages/cooperationExchange/cooperationExchangeList/cooperationActiveIntroduce';
	import cooperationActiveAgenda from '@/pages/cooperationExchange/cooperationExchangeList/cooperationActiveAgenda';
	import cooperationActiveReview from '@/pages/cooperationExchange/cooperationExchangeList/cooperationActiveReview';
	import cooperationActiveResults from '@/pages/cooperationExchange/cooperationExchangeList/cooperationActiveResults';
	import share from '@/components/share'
	export default {
		components: {
			cooperationActiveIntroduce,
			cooperationActiveAgenda,
			cooperationActiveReview,
			cooperationActiveResults,
			share
		},
		data() {
			return {
				isMobile:false,
				baseActivityEntityId: '',
				background: ['color1', 'color2', 'color3'],
				indicatorDots: true,
				autoplay: true,
				interval: 2000,
				duration: 500,
				ifShare: false,
				activityInfo: {}, // 活动信息
				//activityInfos: [], // 所有活动信息
				current: 0,
				screenList: [],
				countryList: [],
				locale: '',
				photos: [],
				background: {
					backgroundImage: 'linear-gradient(270deg, #4BC0E2 0%, #538BE7 100%)',
				},
				backStyle: {
					color: '#FFFFFF',
				},
				// activityIntroduction:'',
				// 收藏
				ifcommon: false,
				// 用户信息
				Storage_data: '',
				AuthToken: '',
				show: false,
			};
		},
		onLoad: function(option) { //option为object类型，会序列化上个页面传递的参数
			this.baseActivityEntityId = option.ActivitesId
			console.log("baseActivityEntityId:" + this.baseActivityEntityId); //打印出上个页面传递的参数。
			if (option.language) {
				uni.setStorageSync("language", option.language);
				this._i18n.locale = option.language;
			}
			
			let port = uni.getSystemInfoSync().platform
			switch (port) {
				case 'android':
					this.isMobile = true;
					break;
				case 'ios':
					this.isMobile = true;
					break;
				default:
					this.isMobile = false;
					break;
			}
		},
		async onShow() {
			// 获取登录状态和用户信息 开始
			this.AuthToken = uni.getStorageSync('Auth-Token');
			let user = uni.getStorageSync('user');
			if (user) {
				this.Storage_data = JSON.parse(user);
			}
			// 获取登录状态和用户信息 结束
			this.getList();
			// 获取关注状态 开始
			this.getMyCollecModel()
			// 获取关注状态 结束
		},
		computed: {
			token() {
				return 'Bearer ' + uni.getStorageSync('Auth-Token');
			}

		},
		methods: {
			wxRegister() {
				let href = window.location.href;
				console.log('wxRegister');
				console.log(href)
			
				let url = window.location.href.replace('#', 'guiguketan')
				console.log(url)
			
				getSignature(url).then((response) => {
					console.log('response========', 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;
					// }
					link = window.location.href;
					console.log("link");
					console.log(link);
					let option = {
						link: link,
						title: '合作组织会员活动系列精彩视频分享',
						summary: this.activityInfo.activityName,
						imgUrl: this.websiteUrl+ this.activityInfo.activityLogo + '?custom=600_260',
					};
					console.log('option');
					console.log(option);
					wxShare.wxRegister(response.data, option);
				});
			},
			share() {
				this.ifShare = !this.ifShare;
			},
			toPrevious() {
				uni.navigateTo({
					url: `/pages/cooperationExchange/cooperationExchange`
				})
			},
			change(index) {
				this.current = index;
			},
			async getList() {
				const res = await this.$myRequest({
					url: '/project/activityInfos/getById',
					data: {
						baseActivityEntityId: this.baseActivityEntityId,
						language: this.$i18n.locale.toUpperCase()
					}
				});
				this.activityInfo = res.data.activityInfos[0] || {};
				console.log("activityInfo:", this.activityInfo)
				// this.activityIntroduction=this.activityInfo.activityIntroduction;
				this.getSysAttachmentInfos();
				this.getPhotos();
				
				//配置微信公众号分享信息
				this.wxRegister();
				
			},
			i18n(data) {
				return this.$t('common.' + data);
			},
			// 通用跳转
			navToSearch() {
				this.$mRouter.push({
					route: `/pages/index/search/search?data=${JSON.stringify(this.search)}`
				});
			},
			async getSysAttachmentInfos() {
				let list = {
					attachmentBusinessId: this.activityInfo.id,
					attachmentBusinessType: 'activityInfo'
				};
				const res = await this.$myRequest({
					url: '/file/sysAttachmentInfos/search',
					data: {
						...list
					}
				});
				this.countryList = res.data.attachmentInfos;
				console.log("countryList", res.data);
				if ("3" == this.activityInfo.activityStatusDict) {
					if (Object.keys(res.data).length == 0) {
						this.screenList = [{
							name: this.i18n('ActivityIntroduction')
						}, {
							name: this.i18n('ActivityAgenda')
						}, {
							name: this.i18n('ActivityReview')
						}];
					} else {
						this.screenList = [{
							name: this.i18n('ActivityIntroduction')
						}, {
							name: this.i18n('ActivityAgenda')
						}, {
							name: this.i18n('ActivityReview')
						}, {
							name: this.i18n('ActivityResults')
						}];
					}
				} else {
					this.screenList = [{
						name: this.i18n('ActivityIntroduction')
					}, {
						name: this.i18n('ActivityAgenda')
					}]
				}
				if (this.screenList.length >= 3) {
					this.change(2);
				}
			},
			async getPhotos() {
				var photoUrl = this.activityInfo.activityWonderfulReviewVideo;
				if ('' != photoUrl) {
					this.photos = photoUrl.split(',');
					this.photos.forEach((item, index) => {
						if ('' != item) {
							this.photos[index] = item;
						}

					});
				}
				console.log("photos", this.photos);
			},
			settingConfirm() {
				setTimeout(() => {
					// 3秒后自动关闭
					this.show = false;
					uni.navigateTo({
						url: '/pages/public/login'
					});
					// 如果不想关闭，而单是清除loading状态，需要通过ref手动调用方法
					// this.$refs.uModal.clearLoading();
				}, 500)
			},
			toRegistration() {
				if (this.AuthToken) {
					if (this.activityInfo.activityStatus == '报名中') {
						this.$mRouter.push({
							route: `/pages/cooperationExchange/cooperationExchangeList/cooperationActiveRegistration?id=${this.activityInfo.baseActivityEntityId}`,
						});
					}
				} else {
					this.show = true;
				}

			},
			//收藏
			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: 'activity',
						userId: users.userId,
						modelEntityId: this.activityInfo.baseActivityEntityId,
					}
					const res = await this.$myRequest({
						url: '/op/basePortalModelFollowInfos/followModelStatusByModelIdAndUserId',
						data: {
							modelId: this.activityInfo.baseActivityEntityId,
							modelType: 'activity',
							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.baseActivityEntityId,
						modelType: 'activity',
						userId: users.id,
					};
					const res = await this.$myRequest({
						url: '/op/basePortalModelFollowInfos/followModel',
						method: 'post',
						headers: {
							token: this.token
						},
						data: {
							followType: followType,
							modelId: this.activityInfo.baseActivityEntityId,
							modelType: 'activity',
							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',
								})
							}
						}
						this.ifcommon = !this.ifcommon;
					}
				}
			},
		},
	}
</script>

<style lang="scss" scoped>
	.bg {
		position: fixed;
		top: 0;
		right: 0;
		bottom: 0;
		left: 0;
		background-color: #fff;
		z-index: -10;
	}

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


		// .slot-wrap {
		// 	font-size: 28upx;
		// 	font-weight: 700;
		// 	line-height: 30upx;
		// 	color: #fff;
		// }
		.biaoTi {
			color: #0B0B11;
			font-size: 30upx;
			font-weight: 700;
			width: 570upx;
			line-height: 50upx;
			min-height: 50upx;
			margin: 10upx 145upx 10upx 35upx;
		}

		.tuPian {
			margin: 0upx 30upx;
			width: 750upx;
			height: 340upx;
			position: relative;
			border-radius: 10upx 10upx 0upx 10upx;
			// border-radius: 20upx;
		}

		.activityStatus,
		.activityStatusEn {
			position: absolute;
			bottom: 0upx;
			left: 1upx;
			height: 48upx;
			width: 360upx;
			// text-align: right;
			font-size: 24upx;
			color: #fff;
			line-height: 48upx;
			z-index: 20upx;
			border-radius: 0upx 10upx 0upx 0upx;
		}

		.activityStatusEn {
			position: absolute;
			bottom: 0upx;
			left: 150upx;
		}

		.activityStatus {
			bottom: 0upx;
		}

		.yellow,
		.green,
		.red {
			position: absolute;
			bottom: 0upx;
			left: 0upx;
			/* min-width: 96px;  */
			padding: 0 0upx;
			height: 48upx;
			width: 200upx;
			// text-align: center;
			line-height: 48upx;
			font-size: 24upx;
			color: #fff;
			border-radius: 10upx 100upx 0upx 0upx;
			// z-index: 50upx;
		}

		.yellow {
			background: rgb(255, 153, 0);
		}

		.green {
			background: rgb(102, 204, 1);
		}

		.red {
			background: rgb(224, 32, 32);
		}

		.recommend-bottom-address {
			// padding: 20upx;
			color: #999999;
			height: 102upx;
			width: 750upx;
		}

		.recommend-bottom-time {
			// padding: 20upx;
			color: #999999;
			height: 102upx;
			width: 750upx;
			// padding-bottom: 30upx;
		}

		.recommend-bottom-font {
			font-size: 30upx;
			line-height: 40upx;
			margin: 29upx 0upx 29upx 38upx;
			color: #333333;
		}


		.module-classify-border {
			background-color: #f7f7f7;
			height: 20upx;
		}

		// .index-cate .index-cate-item {
		// 	margin: 20upx;

		// 	display: inline-block;
		// }

	}
</style>