horzi_rai_wxa/activityPages/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" :class="1==1?'brackets-title':''">{{detailData.ActivityName}}</view>
				<view class="city-box">
					<text v-if="detailData.ActivityTypeName" >活动类型：</text>
					<view class="city" >
						<text style="color: #333;">{{detailData.ActivityTypeName}}</text>
						<image v-if="detailData.City" style="margin-left: 15rpx" src="../../static/img/location.png" mode=""></image>
						<text v-if="detailData.City">{{detailData.City}}</text>
					</view>
				</view>
				<view v-if="detailData.ChartPermissionName" class="network">
					<view class="network-left">所属行业：</view>
					<view class="network-right">{{detailData.ChartPermissionName}}</view>
				</view>
				<view v-if="detailData.ActivityTimeText" class="network">
					<view class="network-left">活动时间：</view>
					<view class="network-right">{{detailData.ActivityTimeText}}</view>
				</view>
				<view v-if="detailData.DistinguishedGuest" class="network">
					<view class="network-left" >嘉&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;宾：</view>
					<view class="network-right">{{detailData.DistinguishedGuest}}</view>
				</view>
				<view v-if="detailData.Host" class="network">
					<view class="network-left">主&nbsp;&nbsp;持&nbsp;人：</view>
					<view class="network-right">{{detailData.Host}}</view>
				</view>
				<view v-if="detailData.Speaker" class="network">
					<view class="network-left">主&nbsp;&nbsp;讲&nbsp;人：</view>
					<view class="network-right">{{detailData.Speaker}}</view>
				</view>
				<view v-if="detailData.Expert" class="network">
					<view class="network-left">专家背景：</view>
					<view class="network-right">
						 <rich-text :nodes="detailData.Expert"></rich-text>
					</view>
				</view>
				<view v-if="detailData.MainlandTell" class="network">
					<view class="network-left">大陆拨入：</view>
					<view class="network-right" style="color: #2C83FF;" @click="phonebtn(detailData.MainlandTell)">{{detailData.MainlandTell}}</view>
				</view>
				<view v-if="detailData.HongKongTell" class="network">
					<view class="network-left">香港拨入：</view>
					<view class="network-right" style="color: #2C83FF;" @click="phonebtn(detailData.HongKongTell)">{{detailData.HongKongTell}}</view>
				</view>
				<view v-if="detailData.TaiwanTell" class="network">
					<view class="network-left">台湾拨入：</view>
					<view class="network-right" style="color: #2C83FF;" @click="phonebtn(detailData.TaiwanTell)">{{detailData.TaiwanTell}}</view>
				</view>
				<view v-if="detailData.AmericaTell" class="network">
					<view class="network-left">美国拨入：</view>
					<view class="network-right" style="color: #2C83FF;" @click="phonebtn(detailData.AmericaTell)">{{detailData.AmericaTell}}</view>
				</view>
				<view v-if="detailData.ParticipationCode" class="network">
					<view class="network-left">拨入密码：</view>
					<view class="network-right">{{detailData.ActivityTypeName=='公司调研电话会'&&detailData.IsLimitPeople==1 && detailData.IsSignup==0?'请报名获取':detailData.ParticipationCode}}</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=='公司线下调研'&&detailData.IsLimitPeople==1">请报名获取
					</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">
					 <rich-text :nodes="detailData.Highlights"></rich-text>
					</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 v-if="detailData.Theme" class="network">
					<view class="network-left">主&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;题： </view>
					<view class="network-right">
						 <rich-text :nodes="detailData.Theme"></rich-text>
					</view>
				</view>
				<view v-if="detailData.Remarks" class="network">
					<view class="network-left">备&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;注： </view>
					<view class="network-right">
						 <rich-text :nodes="detailData.Remarks"></rich-text>
					
					</view>
				</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>
			<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>
			<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" :msgType="msgType" :sellerMobile="sellerMobile" :sellerName="sellerName"></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: '',
				sellerName:'',//销售名称
				msgType:""
			}
		},
		components: {
			modalDialog,
			jurisdiction
		},
		watch:{
			haveAuth:{
				handler(){
					if(this.haveAuth==1){
						this.$store.dispatch("statistics",{PageType:'ActivitParticulars',DetailId:this.id})
					}
					
				},
				immediate:true
			}
		},
		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
						this.sellerMobile = res.Data.SellerMobile
						this.sellerName=res.Data.SellerName
						this.msgType=res.Data.MsgType
						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: '/activityPages/networkAttend/networkAttend?url=' + this.detailData.OnlineParticipation,
				})
			},
			cancelEnsure() {
				this.getActivityDetail()

			},
			goDetail() {
				uni.navigateTo({
					url: '/pages/reportDetail/reportDetail?idReport=' + this.detailData.ArticleId,
				})
			},
			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.$store.dispatch("checkHandle").then(res=>{
				this.id = option.id
				this.countryCcode()
				this.getActivityDetail()
			})
			
		},
		onShow() {
		},
		/**
		 * 用户点击分享
		 */
		onShareAppMessage: function(res) {
			return {
				title: '活动',
				path: '/activityPages/activityDetail/activityDetail?id='+this.id,
				success: (res) => {},
				fail: (err) => {}
			}
		},
	}
</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;
				background: #F2F2F2;
				opacity: 0.8;
				font-size: 30rpx;
				font-weight: bold;
				margin-bottom: 15rpx;
				color: #000;
			}
			.brackets-title {
				padding-left: 20rpx;
			}
			.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-bottom: 30rpx;
			padding: 0 !important;
			display: flex;
			// padding-left: 54rpx;

			.network-left {
				width: 160rpx;
				text-align-last:justify;
				text-align:justify;
				// font-weight: bold;
				// color: #666;
			}

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