horzi_rai_wxa/activityPages/activityDetail/activityDetail.vue

<template>
	<view class="container 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 class="choose-limit" @click="strictSelection" v-if="detailData.IsShowSustainable">
						<image src="../../static/img/choose_icon.png" mode=""></image>
						<image class="limit-img" src="../../static/img/limit_icon.png" mode=""></image>
					</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 network-link" style="color: #2C83FF;">
						<view class="">
						    <text class="default text_oneLine"  @click="networkBtn" >{{detailData.OnlineParticipation}}</text>
						    <text class="default copy-link" @click="copyLink" >复制链接</text>
						</view>
					</view>
				</view>
                <view class="network" v-if="detailData.LinkParticipants">
                	<view class="network-left">链接参会：</view>
                	<view class="network-right network-zoom" style="color: #2C83FF;">
                		<view>
                		    <text class="default text_zoom">{{detailData.LinkParticipants}}</text>
                            <view>
                                点击<text class="default copy-link copy-zoom" @click="copyLink" >复制链接</text>在手机浏览器打开，并输入会议密码
                            </view>
                		</view>
                	</view>
                </view>
                <view v-if="detailData.AppAttendance" class="network">
                	<view class="network-left">App参会： </view>
                	<view class="network-right">
                	 <rich-text :nodes="detailData.AppAttendance"></rich-text>
                	</view>
                </view>
                <view v-if="detailData.ConferencePassword" class="network">
                	<view class="network-left">拨入密码：</view>
                	<view class="network-right">{{detailData.ActivityTypeName=='公司调研电话会'&&detailData.IsLimitPeople==1 && detailData.IsSignup==0?'请报名获取':detailData.ConferencePassword}}</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 v-if="detailData.ActivityTypeId==1" class="make-generation make-conference" @click="askingGo">
							帮我代问
						</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" :editIsShow="editIsShow" :countryCode="countryCode" :mobileEdit="mobileEdit" :goOnNextStep="goOnNextStep" :mailboxBinding="mailboxBinding"/>
			<!-- 区号的弹出层 -->
			<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 areaCode from "@/components/areaCode.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:""	,
				editIsShow:false,//外呼莫泰框
				countryCode:'',//外呼区号
				mobileEdit:'',//外呼手机号
				goOnNextStep:'',//设置外呼号后弹出哪个
				mailboxBinding:false,//是否绑定邮箱
			}
		},
		components: {
			modalDialog,
			jurisdiction,
			areaCode
		},
		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:Number(this.id),
						type
					}
				} else {
					activity.signupAdd({
						ActivityId: Number(this.id),
						SignupType: type,
					}).then(res => {
						if (res.Ret == 200) {
							this.signupType = res.Data.SignupType
							this.signupStatus = res.Data.SignupStatus
							this.countryCode=res.Data.CountryCode
							this.mobileEdit=res.Data.Mobile
							this.goOnNextStep=res.Data.GoFollow
							this.idTypeCancel = {
								cutId: res.Data.ActivityId,
								state: 1
							}
							if( res.Data.GoBindEmail){
								this.mailboxBinding=true
								return
							}
							if(res.Data.SignupStatus !== 'Success') {
								this.isShow = true
							}else {
								if(res.Data.GoOutboundMobile){
									this.editIsShow=true
								}else if (res.Data.GoFollow){
									this.goFollow = res.Data.GoFollow
								}else if(res.Data.SignupStatus == 'Success') {
									this.isShow = true
								}
							}
						}
					})
				}
				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?id=' + this.detailData.ArticleId,
				})
			},
			askingGo(){
                const str = this.detailData.ActivityTime.replace(/-/g, '/')
                const date = new Date(str)
                const times = date.getTime()
                const num = new Date().getTime()
                if(this.detailData.IsResearch){
                    if (times - num <= 900000) {
                    	uni.showModal({
                    		confirmText: '知道了',
                    		showCancel: false,
                    		confirmColor: '#3385FF',
                    		content:'活动开始前15分钟内无法提交问题'
                    	})
                    	return
                    }
                }else{
                    if (times - num <= 3600000) {
                    	uni.showModal({
                    		confirmText: '知道了',
                    		showCancel: false,
                    		confirmColor: '#3385FF',
                    		content:'活动开始前1小时内无法提交问题'
                    	})
                    	return
                    }
                }
               
               
				uni.navigateTo({
					url: '/activityPages/generationAsk/generationAsk?id='+this.id
				})
			},
			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)
				}
			},
			//点击了严选
			strictSelection(){
				activity.descriptionOfResearch().then(res=>{
					if(res.Ret==200){
						uni.showModal({
						    content:res.Data.Item.ConfigValue,
							confirmText:'知道了',
							showCancel:false,
							confirmColor:'#3385FF',
						    success: function (res) {
						    }
						});
					}
				})
			},
            copyLink(){
                uni.setClipboardData({
                    data: this.detailData.LinkParticipants|| this.detailData.OnlineParticipation,
                    success: function () {
                      uni.showToast({
                          title: '复制成功,可在浏览器打开',
                          icon:'none',
                          duration: 2000
                      });
                    }
                });
            }
		},
		onLoad(option) {
            this.id = option.id || ''
          	 
			
		},
		onShow() {
			this.$store.dispatch("checkHandle").then(res=>{
                app.globalData.isAuth = res.IsAuth;
                app.globalData.isBind = res.IsBind;
                if((!res.IsAuth) && (!res.IsBind)) { //已授权已绑定            
                	this.countryCcode()//判断是否加区号
                	this.getActivityDetail()
                }else if(res.IsAuth) { //未授权
                	uni.navigateTo({
                		url:'/pages/authGuide/authGuide'
                	})
                }else if(res.IsBind && !res.IsAuth){ //已授权未绑定
                	uni.navigateTo({
                		url:'/pages/login/login'
                	})
                }
				
			})
			
		},
		/**
		 * 用户点击分享
		 */
		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%;
		}
		.choose-limit {
			position: relative;
			display: flex;
			align-items: center;
			// margin-left: 20rpx;
			image {
				width: 93rpx;
				height: 38rpx;
			}
			.limit-img {
				position: absolute;
				top: -13rpx;
				right: -30rpx;
				width: 46rpx;
				height: 26rpx;
			}
		}
		.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;
			.network-left {
				width: 160rpx;
				text-align-last:justify;
				text-align:justify;
			}

			.network-right {
				width: 480rpx;
               
			}
            .network-zoom {
               .text_zoom {
                   width: 100%;
                   word-break:break-all ;
                   color: #333333;
               }
                view {
                    padding: 0 !important;
                    margin: 0 !important;
                    }
                    .copy-zoom {
                       
                        display: inline-block;
                        padding: 5rpx 17rpx !important;
                        border-radius: 34rpx;
                        background-color:#EBF4FF;
                        font-size: 24rpx;
                        color: #2C83FF ;
                        margin: 0 10rpx;
                          margin-top: 30rpx;
                    }
            }
            .network-link {
                width: 520rpx !important;
                view {
                    padding: 0 !important;
                    margin: 0 !important;
                    width: 100%;
                    display: flex;
                    justify-content: space-between;
                    :first-child {
                          width: 350rpx;
                        }
                    .copy-link {
                        padding: 5rpx 17rpx !important;
                        border-radius: 34rpx;
                        background-color:#EBF4FF;
                        font-size: 24rpx;
                        color: #2C83FF ;
                    }
                }
            }
		}
        .default {
            // padding: 0 !important;
            // margin: 0;
            padding-left: 0!important;
            line-height: 40rpx !important;
        }
		.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-generation {
				padding-top: 0rpx !important;
				line-height: 76rpx;
			}
			.make-conference {
				margin: 30rpx auto;
				width: 368rpx;
				height: 80rpx;
				border: 2px solid #2C83FF;
				opacity: 1;
				border-radius: 4rpx;
				padding-top: 5rpx;
				text-align: center;
				color: #2C83FF;
				font-size:30rpx;
				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>