horzi_rai_wxa/pages/activityDetail/activityDetail.vue

<template>
	<view class="activity-detail">
		<view class="notice" v-if="detailData.IsLimitPeople==1">
		<van-notice-bar color="#FFFFFF"  background="#FE9000"  text="该活动参与名额有限，报名客户请按时参加，爽约会影响您的后续报名资格"/>
		</view>
		<view class="content">
			 <view v-if="detailData.ActivityName" class="dialog-title">{{detailData.ActivityName}}</view>
			      <view class="city-box">
			      	<text v-if="detailData.ActivityTypeName">活动类型：{{detailData.ActivityTypeName}}</text>
			      	<view class="city">
			      		<image src="../../static/img/advice_ico.png" mode=""></image>
						<text>城市{{detailData.City}}</text>
			      	</view>
			      </view>
				   <text v-if="detailData.ChartPermissionName">所属行业：{{detailData.ChartPermissionName}}</text>
			        <text v-if="detailData.ActivityTimeText">活动时间：{{detailData.ActivityTimeText}}</text>
			        <text v-if="detailData.DistinguishedGuest">嘉&nbsp;&nbsp; &nbsp; &nbsp;宾：{{detailData.DistinguishedGuest}}</text>
			        <text v-if="detailData.Host">主&nbsp; 持&nbsp; 人：{{detailData.Host}}</text>
			        <text v-if="detailData.Expert">专&nbsp;&nbsp; &nbsp; &nbsp;家：{{detailData.Expert}}</text>
			        <text v-if="detailData.City">城&nbsp;&nbsp; &nbsp; &nbsp;市：{{detailData.City}}</text>
			        <view v-if="detailData.MainlandTell">大陆拨入：
					<text class="phone" @click="phonebtn(detailData.MainlandTell)">{{detailData.MainlandTell}}</text>
					</view>
			        <view v-if="detailData.HongKongTell">香港拨入：
					<text @click="phonebtn(detailData.HongKongTell)" class="phone">{{detailData.HongKongTell}}</text>
					</view>
			        <view v-if="detailData.TaiwanTell">台湾拨入：
					<text @click="phonebtn(detailData.TaiwanTell)" class="phone">{{detailData.TaiwanTell}}</text>
					</view>
			        <view v-if="detailData.AmericaTell">美国拨入：
					<text @click="phonebtn(detailData.AmericaTell)" class="phone">{{detailData.AmericaTell}}</text>
					</view>
			        <text v-if="detailData.ReportLink">报告链接：{{detailData.ReportLink}}</text>
			        <text v-if="detailData.OnlineParticipation">网络参会：{{detailData.OnlineParticipation}}</text>
			        <text v-if="detailData.OnlineParticipation">参会密码：{{detailData.OnlineParticipation}}</text>
			        <text v-if="detailData.Address">活动地址：{{detailData.Address}}</text>
			        <text v-if="detailData.Highlights">活动亮点：{{detailData.Highlights}}</text>
			        <text v-if="detailData.Theme">主&nbsp;&nbsp; &nbsp; &nbsp;题：{{detailData.Theme}}</text>
			        <text v-if="detailData.Remarks">备&nbsp;&nbsp; &nbsp; &nbsp;注：{{detailData.Remarks}}</text>
		</view>
		<view class="content-bottom">
			<view class="make-outbound">
				预约外呼
			</view>
			<view class="make-outbound">
				取消外呼
			</view>
			<view class="make-conference">
				会议提醒
				<text>(会前15分钟推送微信消息提醒)</text>
			</view>
			<view class="make-conference">
				取消会议提醒
				<text>(会前15分钟推送微信消息提醒)</text>
			</view>
		</view>
	</view>
</template>

<script>
	import {activity} from "@/config/api.js"
	export default {
		data() {
			return {
				id:10,
				detailData:{}
			}
		},
		methods: {
			getActivityDetail(){
				activity.getActivityDetail({
					ActivityId:this.id
				}).then(res =>{
					if(res.Ret==200){
						this.detailData=res.Data
					}
					console.log(res);
				})
			},
			phonebtn(phone) {
				console.log(11);
				console.log(phone);
				uni.makePhoneCall({
				    phoneNumber:phone
				});
			},
		},
		onLoad(option) {
			// this.id=option.id
			this.getActivityDetail()
		}
	}
</script>

<style lang="scss">
	.activity-detail {
		.notice {
			height: 60rpx;
			width: 100%;
		}
		.content {
			padding: 34rpx;
			color: #333333;
			font-size: 28rpx;
			view{padding-left:20rpx ;}
			text {
				line-height: 80rpx;
				padding-left:20rpx ;
			}
			.phone {
				padding: 0;
				display: inline-block;
				color: #2C83FF;
			}
			.dialog-title {
				width: 682rpx;
				padding:20rpx 0;
				background: #F2F2F2;
				opacity: 0.8;
				font-size: 30rpx; 
				font-weight: bold; 
				margin-bottom: 15rpx;
			}
			.city-box {
				display: flex;
				justify-content: space-between;
				align-items: center;
				text {
					padding: 0;
				}
				.city {
					display: flex;
					color: #2088FF;
					align-items: center;
					image {
						width: 27rpx;
						height: 32rpx;
						margin-right:12rpx;
					}
				}
			}
		}
		.content-bottom {
			margin: 30rpx 0;
			.make-outbound {
				margin: 0 auto;
				width: 368rpx;
				height: 80rpx;
				background: linear-gradient(268deg, #2DDBFF 0%, #1599FF 49%, #005EFF 100%);
				opacity: 1;
				border-radius: 4rpx;
				color: #FFFFFF;
				font-size: 34rpx;
				line-height: 80rpx;
				text-align: center;
			}
			.make-conference {
				margin: 30rpx auto ;
				width: 368rpx;
				height: 80rpx;
				border: 2px solid #2C83FF;
				opacity: 1;
				border-radius: 4rpx;
				padding-top: 10rpx;
				text-align: center;
				color: #2C83FF;
				text {
					font-size: 16rpx;
				}
			}
		}
	}
</style>