horzi_rai_wxa/pages/activityDetail/activityDetail.vue

<template>
	<view class="activity-detail">
		<view class="" v-if="haveAuth==1">
			<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" v-if="detailData.City">
						<image src="../../static/img/location.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> -->

				<!-- <view class=""> -->
					<text v-if="detailData.ParticipationCode">拨入密码：{{detailData.ActivityTypeName=='公司调研电话会'&&detailData.IsSignup==0?'请报名获取':detailData.ParticipationCode}}</text>
					<!-- <text>拨入密码： {{detailData.ParticipationCode}}</text> -->
				<!-- </view> -->
			</view>

			<view class="network" v-if="detailData.OnlineParticipation">
				<view class="network-left">网络参会：</view>
				<view class="network-right" @click="networkBtn" style="color: #2C83FF;">
					{{detailData.OnlineParticipation}}
				</view>
			</view>
			<view v-if="detailData.Address" class="network">
				<view class="network-left">活动地址：</view>
				<view class="network-right" v-if="detailData.IsSignup==0 && detailData.ActivityTypeName=='公司线下调研'">请报名获取
				</view>
				<view class="network-right" v-else>{{detailData.Address}}</view>
			</view>
			<view v-if="detailData.Highlights" class="network">
				<view class="network-left">活动亮点： </view>
				<view class="network-right">{{detailData.Highlights}}
				</view>
			</view>
			<view v-if="detailData.Theme" class="network">
				<view class="network-left">主&nbsp;&nbsp; &nbsp; &nbsp;题： </view>
				<view class="network-right">{{detailData.Theme}}
				</view>
			</view>
			<view v-if="detailData.Remarks" class="network">
				<view class="network-left">备&nbsp;&nbsp; &nbsp; &nbsp;注： </view>
				<view class="network-right">{{detailData.Remarks}}
				</view>
			</view>
			<view class="network" v-if="detailData.ReportLink">
				<view class="network-left">相关报告：</view>
				<view class="network-right" style="color: #2C83FF;" @click="goDetail">
					查看报告链接
				</view>
			</view>
			<view class="" style="height: 50rpx;"></view>
			<view>

				<view class="content-bottom"
					v-if="detailData.ActivityTypeId==1||detailData.ActivityTypeId==2||(detailData.ActivityTypeId==3&&detailData.IsLimitPeople==0)||(detailData.IsLimitPeople==0 && detailData.ActivityTypeName=='公司线下调研')">
					<view class="" v-if="detailData.ActiveState==1">
						<view class="make-outbound" @click="signupCancel(1)" v-if="detailData.IsSignup==1">
							取消外呼
						</view>
						<view class="make-outbound" v-else @click="signupAdd(1)">
							预约外呼
						</view>
						<view @click="meetingReminderCancel" class="make-conference"
							v-if="detailData.IsCancelMeetingReminder==1">
							取消会议提醒
							<text>(会前15分钟推送微信消息提醒)</text>
						</view>
						<view @click="meetingReminderAdd" class="make-conference" v-else>
							会议提醒
							<text>(会前15分钟推送微信消息提醒)</text>
						</view>
					</view>
				</view>
				<view class="bottom-env" v-else>
					<view class="apply-box" v-if="detailData.ActiveState==1">
						<view class="cancel-apply">
							报名人数：<text>{{detailData.SignupNum}}</text>/{{detailData.LimitPeopleNum}}
						</view>
						<view v-if="detailData.IsSignup==0" class="ok-apply" @click="wanttosignup">
							{{detailData.SignupType==1?'预约外呼':'我要报名'}}
						</view>
						<view v-else class="ok-apply" @click="signupCancel(2)">
							{{detailData.SignupType==1?'取消外呼':'取消报名'}}
						</view>
					</view>
				</view>
				<view class="select-box">
					<u-popup v-model="selectShow" mode="bottom">
						<view style="color: #333333;font-size: 28rpxrpx;">请选择参会方式</view>
						<view style="color: #2C83FF;" @click="signupAdd(1)">预约外呼</view>
						<view style="color: #2C83FF;" @click="signupAdd(2)">自主拨入</view>
						<view style="color: #A9AFB8;" @click="selectShow=false">取消</view>
					</u-popup>
				</view>
			</view>
			<modalDialog :isShow="isShow" :signupType="signupType" :goFollow="goFollow" :signupStatus="signupStatus"
				:isCancelShow="isCancelShow" :idTypeCancel="idTypeCancel" @cancelShowBtn="cancelEnsure" />
			<areaCode :isAreaCode="isAreaCode" :areaCode="areaCode" />
		</view>
		<view v-else>
			<jurisdiction :haveAuth="haveAuth" :industryMsg="industryMsg" :sellerMobile="sellerMobile"></jurisdiction>
		</view>
	</view>
</template>

<script>
	import {
		activity,
		User
	} from "@/config/api.js"
	import modalDialog from '@/components/modalDialog.vue'
	import jurisdiction from "./jurisdiction/components.vue"
	let app = getApp()
	export default {
		data() {
			return {
				id: '',
				detailData: {},
				isShowJurisdiction: false,
				isGain: true,
				signupType: '', //关注类型
				goFollow: false, //是否关注公众号
				signupStatus: 'Success', //4个不同的类型提示文案
				isShow: false, //弹框
				isCancelShow: false,
				idTypeCancel: {
					id: '',
					type: 1,
					cutId: '',
					state: ''
				},
				selectShow: false,
				isAreaCode: false,
				areaCode: {
					id: '',
					type: ''
				},
				isNeedAddCountryCode: false,
				haveAuth: '',
				industryMsg: '',
				sellerMobile: ''
			}
		},
		components: {
			modalDialog,
			jurisdiction
		},
		methods: {
			//获取是否需要填写区号接口
			countryCcode() {
				User.countryCcode().then(res => {
					if (res.Ret == 200) {
						this.isNeedAddCountryCode = res.Data.IsNeedAddCountryCode
					}
				})
			},
			getActivityDetail() {
				activity.getActivityDetail({
					ActivityId: this.id
				}).then(res => {
					if (res.Ret == 200) {
						this.haveAuth = res.Data.HasPermission
						this.industryMsg = res.Data.PopupMsg.split('：', 1)
						this.sellerMobile = res.Data.SellerMobile
						if (res.Data.HasPermission == 1) {
							this.detailData = res.Data.Detail
							let pages = getCurrentPages()
							let prevPage = pages[pages.length - 2]
							const index = prevPage.$vm.collectList.findIndex(item => item.ActivityId == this.id)
							prevPage.$vm.collectList[index].IsSignup = this.detailData.IsSignup
							prevPage.$vm.collectList[index].SignupNum = this.detailData.SignupNum
							prevPage.$vm.collectList[index].IsCancelMeetingReminder = this.detailData
								.IsCancelMeetingReminder
						}
					}
				})
			},
			phonebtn(phone) {
				uni.makePhoneCall({
					phoneNumber: phone
				});
			},
			//报名
			signupAdd(type) {
				if (this.isNeedAddCountryCode) {
					this.isAreaCode = true
					this.areaCode = {
						id,
						type
					}
				} else {
					activity.signupAdd({
						ActivityId: Number(this.id),
						SignupType: type,
					}).then(res => {
						if (res.Ret == 200) {
							if (res.Data.GoFollow && res.Data.SignupStatus !== 'Success' || !res.Data.GoFollow) {
								this.isShow = true
							} else {
								this.goFollow = res.Data.GoFollow
							}
							this.signupType = res.Data.SignupType
							this.signupStatus = res.Data.SignupStatus
							this.idTypeCancel = {
								cutId: res.Data.ActivityId,
								state: 1
							}

						}
					})
				}
				this.selectShow = false
			},
			//取消报名
			signupCancel(type) {
				this.isCancelShow = true
				this.idTypeCancel = {
					id: Number(this.id),
					type,
					cutId: '',
					state: 0
				}
			},
			networkBtn() {
				uni.navigateTo({
					url: '/pages/networkAttend/networkAttend?url=' + this.detailData.OnlineParticipation,
				})
			},
			cancelEnsure() {
				this.getActivityDetail()

			},
			goDetail() {
				uni.navigateTo({
					url: '/pages/reportDetail/reportDetail?idReport=' + this.detailData.ReportLink,
				})
			},
			meetingReminderAdd() {
				activity.meetingReminderAdd({
					ActivityId: Number(this.id)
				}).then(res => {
					if (res.Ret == 200) {
						uni.showModal({
							confirmText: '知道了',
							confirmColor: '#3385FF',
							content: res.Msg,
							showCancel: false,
							success: (res) => {
								if (res.confirm) {
									this.getActivityDetail()
								}
							}
						})
					}
				})
			},
			//取消会议提醒接口
			meetingReminderCancel() {
				activity.meetingReminderCancel({
					ActivityId: Number(this.id)
				}).then(res => {
					if (res.Ret == 200) {
						uni.showModal({
							confirmText: '知道了',
							confirmColor: '#3385FF',
							content: res.Msg,
							showCancel: false,
							success: (res) => {
								if (res.confirm) {
									this.getActivityDetail()
								}
							}
						})
					}
				})

			},
			wanttosignup() {
				if (this.detailData.IsLimitPeople == 1 && this.detailData.ActivityTypeName == '公司调研电话会') {
					this.selectShow = true
				} else {
					this.signupAdd(3)
				}
			},
		},
		onLoad(option) {
			this.id = option.id
			this.countryCcode()
			this.getActivityDetail()
		}
	}
</script>

<style lang="scss">
	.activity-detail {
		padding-bottom: 100rpx;

		.notice {
			height: 60rpx;
			width: 100%;
		}

		.content {
			padding: 34rpx 34rpx 0rpx;
			margin-bottom: -20rpx;
			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;
				align-items: center;

				text {
					padding: 0;
				}

				.city {
					display: flex;
					color: #2088FF;
					align-items: center;

					image {
						width: 27rpx;
						height: 32rpx;
						margin-right: 12rpx;
					}
				}
			}

		}

		.network {
			margin-top: 30rpx;
			display: flex;
			padding-left: 54rpx;

			.network-left {
				width: 150rpx;
			}

			.network-right {
				width: 480rpx;
			}
		}

		.content-bottom {
			margin: 50rpx 0 30rpx;

			.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;
				}
			}
		}

		.bottom-env {
			position: fixed;
			bottom: 0;
			padding-bottom: constant(safe-area-inset-bottom);
			padding-bottom: env(safe-area-inset-bottom);
			left: 0;
			width: 100%;
			background-color: #FFFFFF;
		}

		.apply-box {
			width: 100%;
			height: 100rpx;
			display: flex;
			font-size: 32rpx;
			color: #333333;
			line-height: 100rpx;

			.cancel-apply {
				display: flex;
				padding-left: 50rpx;
				flex: 1;
				border: 2rpx solid #005eff;
				background-color: #fff;

				text {
					color: #005EFF;
				}
			}

			.ok-apply {
				flex: 1;
				background: linear-gradient(268deg, #2DDBFF 0%, #1599FF 49%, #005EFF 100%);
				text-align: center;
				color: #FFFFFF;
			}
		}

		.select-box {
			width: 100%;

			view {
				height: 95prx;
				line-height: 95rpx;
				text-align: center;
				font-size: 32rpx;
				border-bottom: 1rpx solid #EBEBEB;
				;
			}
		}

	}
</style>