dev/dcp-app-gate/pages/conference/meetingIndexEn/meetingDetailEn.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>
			<!-- 分享先隐藏 -->
			<view class="navbar-right" slot="right">
				<view class="message-box right-item" @click="share">
					<u-icon name="share-fill" color="white" size="50"></u-icon>
				</view>
			</view>
		</uni-nav-bar>

		<!-- 图片 -->
		<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" :style="{color:fontColor}">
			<view class="toptext">Draft Agenda</view>
			<!-- 列表部分 -->
			<view class="listBox" v-html="meetingListDetail.meetingYichengEn"></view>
		</view>

		<!-- 底部报名按钮 -->
		<view v-if="meetingListDetail.meetingIsShow=='01' && !isMeetingOver(meetingListDetail.meetingEndDate)">
			<view class="bottomBtn" v-if="meetingListDetail.meetingMainFormDict=='01'">
				<button v-if="meetingListDetail.isShowEnOnsite=='Yes'" class="bottomBtn_test" type="default"
					style="background-color: #366092;" @click="toLocalApply(myId)">On-site Participation</button>
			</view>
			<view class="bottomBtn" v-else-if="meetingListDetail.meetingMainFormDict=='02'">
				<button v-if="meetingListDetail.isShowEnOnline=='Yes'" class="bottomBtn_test" type="default"
					style="background-color: #03B6B3;" @click="toNetApply(myId)">Online Participation</button>
			</view>
			<view class="bottomBtn" v-else-if="meetingListDetail.meetingMainFormDict=='03'">
				<button v-if="meetingListDetail.isShowEnOnsite=='Yes'" class="bottomBtn_test" type="default"
					style="background-color: #366092;" @click="toLocalApply(myId)">On-site Participation</button>
				<button v-if="meetingListDetail.isShowEnOnline=='Yes'" class="bottomBtn_test" type="default"
					style="background-color: #03B6B3;" @click="toNetApply(myId)">Online Participation</button>
			</view>
		</view>

		<!-- 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 {
				meetingListDetail: {},
				myId: '',
				backgroundcolorApp: '', //背景色
				navbarColor: '', //导航栏背景色
				fontColor: '', //字体颜色
				loadflag: false, //加载全部样式flag
				loadtext: 'MORE', //加载更多按钮的文字
				ifShare: false,
				loadbutton: true, //加载按钮flag
			}
		},
		components: {
			uniIcons,
			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
				if (this.meetingListDetail.meetingIntroductionEn.length < 540) {
					this.loadbutton = false
				}
			},
			navigateBack() {
				uni.navigateBack();
			},
			toLocalApply(id) {
				let user = uni.getStorageSync('user');
				let token = uni.getStorageSync('Auth-Token');
				let path = "/pages/conference/conferenceOfflineEn/conference-offline-en?id=" + id;
				if (user && token) {
					uni.navigateTo({
						url: path
					})
				} else {
					uni.setStorageSync('pathReminder', path)
					uni.showToast({
						title: 'please log in',
						icon: 'none'
					})
					setTimeout(() => {
						uni.navigateTo({
							url: "/pages/public/login?back=1&language=en"
						})
					}, 1000)
				}
			},
			toNetApply(id) {
				let user = uni.getStorageSync('user');
				let token = uni.getStorageSync('Auth-Token');
				let path = "/pages/conference/conferenceOfflineEn/conference-offline-en-other?id=" + id;
				if (user && token) {
					uni.navigateTo({
						url: path
					})
				} else {
					uni.setStorageSync('pathReminder', path)
					uni.showToast({
						title: '请先登录',
						icon: 'none'
					})
					setTimeout(() => {
						uni.navigateTo({
							url: "/pages/public/login?back=1&language=en"
						})
					}, 1000)
				}
			},
			// 判断会议是否结束
			isMeetingOver(t) {
				var ct = Date.parse(new Date());
				if (ct - t > 0) {
					return true;
				} else {
					return false;
				}
			},
			//加载更多按钮
			loadMore() {
				this.loadflag = !this.loadflag
				if (!this.loadflag) {
					this.loadtext = 'MORE'
				} else {
					this.loadtext = 'PICK UP'
				}
			},
			//分享
			share() {
				this.ifShare = !this.ifShare;
			},
		},
		onLoad(option) {
			// console.log("option.id", option.id)
			this.myId = option.id
			this.getList(option.id)
		},
		onShow() {
			console.log('====', this.meetingListDetail)
		},
	}
</script>

<style>
	page {
		background-color: #ffffff;
	}

	.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: 40rpx 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: #3c6a0b; */
	}

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

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

	.bottomBtn {
		display: flex;
		position: fixed;
		bottom: 0;
		width: 100%;
		height: 110rpx;
		border: 0px;
	}

	.bottomBtn_test {
		align-content: space-between;
		width: 100%;
		height: 100%;
		font-size: 34rpx;
		text-align: center;
		line-height: 110rpx;
		color: #FFFFFF;
	}
</style>