dev/dcp-app-gate/pages/conference/meetingIndexEn/meetingOverEn.vue

<template>
	<!--<view style="padding-bottom: 110rpx;" :style="{ backgroundColor:backgroundcolorApp }">-->
	<view style="padding-bottom: 110rpx;background-color: #fff;">
		<!-- 顶部导航栏 -->
		<!--<uni-nav-bar status-bar=true fixed=true left-icon="arrowleft" :background-color="navbarColor" color="#ffffff" @clickLeft="navigateBack">-->
		<uni-nav-bar status-bar=true fixed=true left-icon="arrowleft" :background-color="'#538BE7'" color="#ffffff"
			@clickLeft="navigateBack">
			<text slot="default" style="text-align: center; flex: 1; font-size: 18px; font-weight: bold;">Detail</text>
			<!-- <button slot="right" @click="toFeedback(feedbackId)" class="sunmit-btn" type="submit" hover-class="button-hover" :style="{color:backgroundcolorApp}">Feedback</button> -->
			<!-- 反馈和分享按钮 -->
			<view class="navbar-right" slot="right">
				<view class="message-box right-item" @click="showMenu">
					<u-icon name="share-fill" color="white" size="50"></u-icon>
				</view>
			</view>
		</uni-nav-bar>

		<!-- 点击分享按钮后出现的按钮 -->
		<view class="menu" :class="{ 'menuOn':menuflag }">
			<button @click="toFeedback(feedbackId)" class="sunmit-btn" hover-class="button-hover">Feedback</button>
			<button @click="share" class="sunmit-btn" hover-class="button-hover">Share</button>
		</view>

		<!-- 图片 -->
		<view class="topimage" :style="{'margin-top': systemInfo.statusBarHeight+'px'}" style="padding: 32upx;">
			<image :src="websiteUrl + meetingListDetail.meetingPicUrl + '?custom=600_390'" mode=""></image>
		</view>

		<!-- 会议介绍 -->
		<view class="meeting-intry" :class="{'meeting-intry-load':loadflag}" :style="{color:fontColor}">
			<view style="display: flex;justify-content: space-between;margin-bottom: 20rpx;">
				<view class="font-tb">{{moment(meetingListDetail.meetingStartDate).format('YYYY-MM-DD')}}</view>
				<view class="font-tb">{{meetingListDetail.meetingPlaceEn}}</view>
			</view>
			<view style="font-size: 40rpx;font-weight: 700;">{{meetingListDetail.meetingNameEn}}</view>
			<view class="font-centre">{{meetingListDetail.meetingIntroductionEn}}</view>
			<!-- 加载更多 -->
			<view class="load" @click="loadMore" v-if="loadbutton">{{loadtext}}</view>
		</view>

		<!-- 会议议程 -->
		<view class="agenda" v-if="conferenceAgenda" :style="{color:fontColor}">
			<view class="toptext">Draft Agenda</view>
			<!-- <view class="icon-arrowdown">
				<uni-icons type="arrowdown" size="25" class="top-arrowdown" color="#aaaaaa"></uni-icons>
				<uni-icons type="arrowdown" size="25" color="#aaaaaa"></uni-icons>
			</view> -->
			<!-- 列表部分 -->
			<view class="listBox" v-html="meetingListDetail.meetingYichengEn"></view>
		</view>

		<!-- 会议相关 -->
		<!-- 相关链接 -->
		<view class="agenda" v-if="link_flag" :style="{color:fontColor}">
			<view class="toptext">RELATED LINKS</view>
			<view v-for="(item,index) in meetingOutInfoFile" :key="index" @click="">
				<view v-for="(items,indexs) in item.list" :key="indexs" style="display: flex;">
					<view style="margin-right: 15rpx;">{{++index}}</view>
					<view @click="download(items.attachmentSavePath)" style="text-decoration: underline;">
						{{item.titleEn}}</view>
				</view>
			</view>
		</view>

		<!-- 相关观点 -->
		<view class="agenda" v-if="view_flag" :style="{color:fontColor}">
			<view class="toptext">RELATED VIEW</view>
			<view class="viewpoint" v-for="(item,index) in meetingOutInfoGuandian" :key="index"
				@click="toViewpoint(item.id)">
				{{item.speakGuestEn}}
			</view>
		</view>

		<!-- 相关图片视频 -->
		<view class="agenda" v-if="img_flag" :style="{color:fontColor}">
			<view class="toptext">RELATED IMAGE&MID</view>
			<view class="uni-padding-wrap">
				<view class="page-section swiper">
					<view class="page-section-spacing">
						<swiper class="swiper" next-margin="140rpx" :autoplay="autoplay" :interval="interval"
							:duration="duration">
							<swiper-item v-for="(item,index) in imgData">
								<image class="myImage" :src="websiteUrl + item + '?custom=400_260'" mode=""
									@click="navigateTo(item.id)"></image>
							</swiper-item>
						</swiper>
					</view>
				</view>
			</view>
		</view>

		<!-- 相关新闻 -->
		<view class="agenda" v-if="news_flag" :style="{color:fontColor}">
			<view class="toptext">RELATED News</view>
			<view style="display: flex;margin-bottom: 20rpx;" v-for="(item,index) in meetingOutInfoNews" :key="index"
				@click="toNewsDetail(item.id)">
				<view style="width: 30rpx;margin-right: 15rpx;">{{++index}}</view>
				<view style="text-decoration: underline;">{{item.titleEn}}</view>
			</view>
		</view>

		<!-- 底部报名按钮 -->
		<button type="default" class="bottomBtn" disabled="true"
			style="background-color: #d7d7d7;color: #FFFFFF;">END</button>

		<!-- title 分享的分类   summary 分享的介绍  href 分享的地址 8.8.20.112:19001-->
		<share v-show="ifShare == true" :show="ifShare" @closeShare="share" :title="'会议服务'"
			:summary="meetingListDetail.meetingName"
			:href="'https://m.geidcp.com/#/pages/conference/meetingIndexCh/meetingDetail?' + 'id=' + meetingListDetail.id"
			:imageUrl="websiteUrl + meetingListDetail.meetingPicUrl +'?custom=600_390'">
		</share>
	</view>
</template>

<script>
	import uniNavBar from "@/components/uni-nav-bar/uni-nav-bar.vue";
	import uniIcons from "@/components/uni-icons/uni-icons.vue";
	import share from '@/pages/conference/share.vue';
	export default {
		data() {
			return {
				background: ['color1', 'color2', 'color3'],
				// indicatorDots: true,
				autoplay: false,
				interval: 2000,
				duration: 500,
				//``````````````````````````
				link_flag: true, //决定相关链接是否显示
				view_flag: true, //决定相关观点是否显示
				img_flag: true, //决定相关图片是否显示
				news_flag: true, //决定相关新闻是否显示
				loadflag: false, //加载全部样式flag
				//```````````````````````
				num: '1',
				meetingListDetail: {},
				meetingOutInfoFile: {}, //相关文件链接
				meetingOutInfoGuandian: {}, //观点
				meetingOutInfoNews: {}, //新闻
				conferenceAgenda: true, //决定会议议程是否显示
				agendaData: '',
				imgData: [],
				backgroundcolorApp: '', //背景色
				navbarColor: '', //导航栏背景色
				fontColor: '', //字体颜色
				feedbackId: '', //传给反馈的id
				loadtext: 'MORE', //加载更多按钮的文字
				ifShare: false,
				loadbutton: true, //加载按钮flag
				menuflag: false, //弹出反馈和分享按钮
			}
		},
		components: {
			uniIcons,
			uniNavBar,
			share
		},
		methods: {
			async getList(id) {
				const res = await this.$myRequest({
					url: '/meeting/meetingOutInfos/findMeetingDetail/',
					data: {
						id: id
					},
					header: {
						ANON: true
					}
				});
				// this.bannerData = []
				// console.log(opt)
				this.backgroundcolorApp = res.data.basicInfo.backgroundcolorForApp //背景色
				this.navbarColor = res.data.basicInfo.backgroundcolorForApp //导航栏背景色
				if (!this.backgroundcolorApp) {
					this.fontColor = '#333333'
					this.navbarColor = '#3387ff'
				}
				this.meetingListDetail = res.data.basicInfo
				this.meetingOutInfoFile = res.data.meetingOutInfo.file.filter(item => {
					return item.list.length > 0 && item.titleEn != ''
				})
				this.meetingOutInfoGuandian = res.data.meetingOutInfo.guandian
				this.meetingOutInfoNews = res.data.meetingOutInfo.news.filter(item => {
					return item.languageType == 'en' && item.titleEn && item.titleEn != ''
				})

				if (res.data.meetingOutInfo.image.length) {
					let filterdFile = [];
					res.data.meetingOutInfo.image.forEach((item) => {
						if (item.photoType == "meeting_yicheng") {
							filterdFile.push(item);
						} else if (item.photoType == "meeting_pro_img") {
							item.list.forEach((_item) => {
								this.imgData.push(_item.attachmentSavePath);
							});
						}
					});
					if (filterdFile[0].list.length) {
						this.agendaData = filterdFile[0].list[0].attachmentSavePath;
					} else {
						this.agendaData = '';
					}
				} else {
					this.agendaData = '';
					this.imgData = [];
				}
				//如果当会议议程没有时,直接去掉会议议程部分
				if (res.data.basicInfo.meetingYichengEn == '') {
					this.conferenceAgenda = false
				}
				if (this.meetingOutInfoFile == '') {
					this.link_flag = false
				}
				if (this.meetingOutInfoGuandian == '') {
					this.view_flag = false
				}
				if (this.imgData == '') {
					this.img_flag = false
				}
				if (this.meetingOutInfoNews == '') {
					this.news_flag = false
				}
				if (this.meetingListDetail.meetingIntroductionEn.length < 540) {
					this.loadbutton = false
				}
			},
			navigateBack() {
				uni.navigateBack();
			},
			toNewsDetail(id) {
				uni.navigateTo({
					url: "newsDetailEn?id=" + id
				})
			},
			toViewpoint(id) {
				uni.navigateTo({
					url: "viewpointEn?id=" + id
				})
			},
			toFeedback(id) {
				let user = uni.getStorageSync('user');
				let token = uni.getStorageSync('Auth-Token');
				let path = "/pages/conference/meetingIndexEn/meetingFeedbackEn?id=" + id;
				if (user && token) {
					uni.navigateTo({
						url: path
					})
				} else {
					uni.setStorageSync('pathReminder', path)
					uni.showToast({
						title: 'please login',
						icon: 'none'
					})
					setTimeout(() => {
						uni.navigateTo({
							url: "/pages/public/login?back=1&language=en"
						})
					}, 1000)
				}
			},
			download(url) {
				uni.downloadFile({
					url: url,
					success: function(res) {
						var filePath = res.tempFilePath;
						uni.openDocument({
							filePath: filePath,
							success: function(res) {
								console.log('打开文档成功');
							}
						});
					}
				});
				console.log(url)
			},
			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
			},
			//加载更多按钮
			loadMore() {
				this.loadflag = !this.loadflag
				if (!this.loadflag) {
					this.loadtext = 'MORE'
				} else {
					this.loadtext = 'PICK UP'
				}
			},
			//分享和反馈显示按钮
			showMenu() {
				this.menuflag = !this.menuflag
			},
			//分享
			share() {
				this.ifShare = !this.ifShare;
			},
		},

		onLoad(option) {
			// console.log("option.id", option.id)
			this.feedbackId = option.id
			this.getList(option.id)
		},
		onShow() {
			// console.log('====',this.meetingListDetail)
		}
	}
</script>

<style>
	page {}

	.iconsback {
		width: 30px;
		height: 30px;
		line-height: 30px;
		text-align: center;
		position: fixed;
		top: 72rpx;
		left: 20rpx;
		z-index: 1;
		background: rgba(200, 200, 200, .7);
		border-radius: 50%;
	}

	.iconsback:active {
		background: rgba(200, 200, 200, 1);
	}

	.topimage {
		width: 100%;
		height: 460rpx;
	}

	.topimage image {
		width: 100%;
		height: 100%;
	}

	.meeting-intry {
		position: relative;
		width: 686rpx;
		height: 900rpx;
		overflow: hidden;
		margin: auto;
		margin-bottom: 40rpx;
		padding: 42rpx 0rpx;
		/*background-color: rgb(0,0,0,0.2);*/
		color: #000;
		border-radius: 24rpx;
	}

	.meeting-intry-load {
		height: auto;
	}

	/* 文字样式 */
	.font-tb {
		font-size: 24rpx;
	}

	.font-centre {
		font-size: 28rpx;
		line-height: 56rpx;
		margin: 20rpx 0;
	}

	/* 加载全部内容 */
	.load {
		width: 100%;
		height: 30px;
		position: absolute;
		bottom: 0px;
		left: 0px;
		/*background: rgb(134 134 134);*/
		background: #fff;
		text-align: center;
		font-size: 20px;
		color: rgba(0, 0, 0, .37);
	}

	/* 会议议程部分样式 */
	.agenda {
		position: relative;
		width: 686rpx;
		margin: auto;
		margin-bottom: 40rpx;
		padding: 50rpx 30rpx 50rpx 30rpx;
		border-top: 2px solid #DCDCDC;
		/*background-color: rgb(0,0,0,0.2);*/
		color: #000;
		border-radius: 24rpx;
		overflow: hidden;
	}

	.toptext {
		font-size: 40rpx;
		font-weight: 700;
		margin-bottom: 20rpx;
		text-align: center;
		font-style: italic;
		/* color: #9fee4c; */
	}

	.icon-arrowdown {
		position: absolute;
		top: -30rpx;
		right: 26rpx;
		width: 50rpx;
		height: 50rpx;
	}

	.top-arrowdown {
		position: absolute;
		top: -16rpx;
		left: 0;
	}

	.bottomBtn {
		position: fixed;
		bottom: 0;
		width: 100%;
		height: 110rpx;
		font-size: 48rpx;
		text-align: center;
		line-height: 110rpx;
		border: 0px;
	}

	.viewpoint {
		display: inline-block;
		margin: 10rpx 20rpx 24rpx 0;
		padding: 10rpx 28rpx;
		background-color: #99aae8;
		font-size: 14px;
		border: 1px transparent solid;
		border-image: linear-gradient(to top, #d00d0d, #040101) 1 10;
	}

	/* 轮播图部分 */
	image {
		width: 230px;
		height: 160px;
	}

	.sunmit-btn {
		width: 85px;
		height: 30px;
		line-height: 30px;
		font-size: 14px;
		/* color: #FFFFFF; */
		/* background-color: #2d79e5; */
		background-color: #FFFFFF;
		padding: 0 10px;
		border-radius: 18px;
	}

	.button-hover[type=submit] {
		opacity: .75;
		transform: scale(0.95, 0.95);
	}

	.menu {
		/* background-color: pink; */
		width: 172rpx;
		height: 0rpx;
		position: fixed;
		top: 100rpx;
		right: 10rpx;
		overflow: hidden;
		z-index: 9;
		transition: all 0.3s ease-in-out 0s;
		opacity: 0;
		transform: scale(0);
	}

	.menuOn {
		height: auto;
		opacity: 1;
		transform: scale(1);
	}

	.menu>button {
		margin-bottom: 10rpx;
	}
</style>