horzi_rai_wxa/components/modalDialog.vue

<template>
	<view>
		<u-modal v-model="show" :content-style="{fontSize: '32rpx'}" @confirm="contentBtn"
			:show-title="false" confirm-text="知道了" :confirm-style="{fontWeight: '700'}">
			<view class="slot-content">
				<rich-text :nodes="content"></rich-text>
			</view>
			
			</u-modal>

		<!-- 关注公众号 -->
		<u-modal v-model="goFollowShow" :content-style="{fontSize: '32rpx'}" @confirm="goFollowShowBtn"
			:show-cancel-button="true" confirm-text="去关注" @cancel="cancel" :show-title="false"
			:cancel-style="{borderRight:'1rpx solid #EBEBEB'}" :confirm-style="{fontWeight: '700'}">
			<view class="slot-content">
				<rich-text :nodes="accounts"></rich-text>
			</view>
		</u-modal>
		
		<u-modal v-model="cancelShow" :content="canceltext" :content-style="{fontSize: '32rpx',lineHeight: '80rpx'}"
			:confirm-style="{fontWeight: '700'}" @confirm="cancelShowBtn" @cancel="cancelBtn" :show-title="false"
			:show-cancel-button="true" :cancel-style="{borderRight:'1rpx solid #EBEBEB'}"></u-modal>

		<!-- 立即申请 -->
		<u-modal v-model="applyIsShow" :content-style="{fontSize: '32rpx'}" @confirm="applyIsShowBtn"
			:show-cancel-button="true" confirm-text="立即申请" @cancel="applyIsShowCancel" :show-title="false"
			:cancel-style="{borderRight:'1rpx solid #EBEBEB'}" :confirm-style="{fontWeight: '700'}">
			<view class="slot-content">
				<rich-text :nodes="jurisdictionText"></rich-text>
			</view>
		</u-modal>
		
		<!-- 拨打电话 -->
		<u-modal v-model="showhasPermission" :content-style="{fontSize: '32rpx'}" @confirm="showhasPermissionBtn"
			:show-cancel-button="true" confirm-text="拨号" @cancel="showhasPermissionCancel" :show-title="false"
			:cancel-style="{borderRight:'1rpx solid #EBEBEB'}" :confirm-style="{fontWeight: '700'}">
			<view class="slot-content">
				<rich-text :nodes="hasPermissionText"></rich-text>
			</view>
		</u-modal>
		<u-modal v-model="showRelation" confirm-text="知道了" :confirm-style="{fontWeight: '700'}"
			:content="contentRelation"></u-modal>
			
			
			<!-- 修改手机号 -->
			<u-modal width="650" v-model="editIsShowDlg" :content-style="{fontSize: '32rpx'}" @confirm="GoOutboundMobileBtn"
				:show-cancel-button="true" confirm-text="无需修改" cancel-text="前去修改"
				cancel-color="#3385FF"
				 @cancel="GoOutboundMobileIsGo" :show-title="false"
				:cancel-style="{borderRight:'1rpx solid #EBEBEB'}" >
				<view class="slot-content">
					<rich-text :nodes="editIsShowAccounts"></rich-text>
				</view>
			</u-modal>
			
			<u-modal v-model="mailboxBindingDlg" :content-style="{fontSize: '32rpx'}" @confirm="gmailboxBindingDlgBtn"
				:show-cancel-button="true" confirm-text="设置" @cancel="cancelMailboxBindingDlg" :show-title="false"
				:cancel-style="{borderRight:'1rpx solid #EBEBEB'}" :confirm-style="{fontWeight: '700'}">
				<view class="slot-content">
					<rich-text :nodes="mailboxText"></rich-text>
				</view>
			</u-modal>
	</view>
</template>

<script>
	import {
		activity
	} from "@/config/api.js"
	export default {
		data() {
			return {
				goFollowShow: false,
				show: false,
				cancelShow: false,
				applyIsShow: false,
				showRelation: false,
				showhasPermission: false,
				contentRelation: '申请已提交,请等待销售人员与您联系',
				content: '',
				accounts: '',
				canceltext: '',
				jurisdictionText: '',
				hasPermissionText: '',
				editIsShowAccounts:'',
				editIsShowDlg:false,
				mailboxBindingDlg:false,
				mailboxText:'您当前绑定的联系方式为邮箱，请先设置您的外呼号码'
			}
		},
		props: {
			isShow: {
				type: Boolean,
				default: false
			},
			signupType: {
				type: Number,
			},
			signupStatus: {
				type: String,
				default:'Success'
			},
			goFollow: {
				type: Boolean
			},
			isCancelShow: {
				type: Boolean,
				default: false
			},
			idTypeCancel: {
				type: Object
			},
			jurisdictionList: {
				type: Object
			},
			applyForIsShow: { //潜在用户
				type: Boolean
			},
			isShowhasPermission: { //联系销售
				type: Boolean
			},
			hasPermission: { //权限字段
				type: String
			},
			editIsShow:{
				type:Boolean,
			},
			countryCode:{
				type:String
			},
			mobileEdit:{
				type:String
			},
				
			goOnNextStep:{
				type:Boolean,
				default:false
			},
			mailboxBinding:{
				type:Boolean,
				default:false
			},
			

		},
		watch: {
			mailboxBinding(){
				this.mailboxBindingDlg=this.mailboxBinding
			},
			editIsShow(){
				this.editIsShowDlg=this.editIsShow
				if(this.editIsShow){
					this.editIsShowAccounts=`
						默认外呼号码是您当前绑定的手机号：<br />
						${this.countryCode}-${this.mobileEdit}<br/><br/>
						是否需要修改您的外呼号码?
					`
				}
			},
			goFollow() {
				this.goFollowShow = this.goFollow
			},
			isShow() {
				this.show = this.isShow
			},
			signupType() {
				if(this.signupStatus!=='Success') return
				if (this.signupType == 1) {
					this.content = `${this.countryCode}-${this.mobileEdit}<br/>预约成功，已加入您的活动日程`
					this.accounts = `
					${this.countryCode}-${this.mobileEdit}<br/>
					预约成功，已加入您的活动日程<br/><br/>
					
					想要及时获取活动时间变更通知，请关注【弘则研究】公众号
				`
				} else if(this.signupType == 999){
					this.content = '设置成功，会前15分钟会为您推送微信消息提醒'
					this.accounts = `设置成功，会前15分钟会为您推送微信消息提醒<br/><br/>
									请关注【弘则研究】公众号，以获取微信消息提醒`
									
				} else{
				this.content = '报名成功，已加入您的活动日程'
				this.accounts = `
						报名成功，已加入您的活动日程<br/><br/>
						
						想要及时获取活动时间变更通知，请关注【弘则研究】公众号	`
				
				}

			},
			signupStatus() {
				if(this.signupStatus =='Success') return
				if (this.signupStatus == 'FullStarffed') {
					this.content = '此活动报名人数已满，请留意下期活动'
				} else if (this.signupStatus == 'TwoPeople') {
					this.content = '单机构最多2人报名同一活动，您所在机构报名人数已满'
				} else if (this.signupStatus == 'BreakPromise') {
					this.content = '由于爽约次数过多，您暂时被限制报名资格'
				} else if (this.signupStatus == 'Overtime') {
					this.content = '活动开始前1小时内无法预约，请联系对口销售处理'
				}
			},
			'idTypeCancel.type': {
				handler: function() {
					if (this.idTypeCancel.type == 1) {
						this.canceltext = "您要取消此次活动预约外呼吗？"
					} else {
						this.canceltext = "您要取消此次活动的报名吗？"
					}
				},
				deep: true
			},
			isCancelShow() {
				this.cancelShow = this.isCancelShow
			},
			applyForIsShow() {
				this.jurisdictionText = this.jurisdictionList.PopupMsg
				this.applyIsShow = this.applyForIsShow
			},
			isShowhasPermission() {
				this.hasPermissionText = this.jurisdictionList.PopupMsg
				this.showhasPermission = this.isShowhasPermission
			}
		},
		methods: {
			contentBtn() {
				this.$parent.isShow = false
				this.show = false
				this.$emit('cancelShowBtn', this.idTypeCancel, this.signupType, this.idTypeCancel.isNum)
			},
			//去关注
			goFollowShowBtn() {
				this.$parent.goFollow = false
				this.goFollowShow = false
				this.$emit('cancelShowBtn', this.idTypeCancel, this.signupType, this.idTypeCancel.isNum)
				uni.navigateTo({
					url: '/activityPages/accountsOfficial/accountsOfficial'
				})
			},
			cancel() {
				this.$parent.goFollow = false
				this.goFollowShow = false

				this.$emit('cancelShowBtn', this.idTypeCancel, this.signupType, this.idTypeCancel.isNum)
			},
			cancelBtn() {
				this.$parent.isCancelShow = false
				this.cancelShow = false
			},
			cancelShowBtn() {
				activity.signupCancel({
					ActivityId: this.idTypeCancel.id,
					SignupType: this.idTypeCancel.type,
				}).then(res => {
					if (res.Ret == 200) {
						this.idTypeCancel.cutId = res.Data.ActivityId
						if (this.signupType == 1) {
							uni.showToast({
								title: '预约外呼已取消',
								duration: 2000
							});
						} else {
							uni.showToast({
								title: '已取消报名',
								duration: 2000
							});
						}
						this.$emit('cancelShowBtn', this.idTypeCancel, this.signupType, this.idTypeCancel.isNum)
					}
					this.$parent.isCancelShow = false
					this.cancelShow = false
				})
			},
			//立即申请
			applyIsShowBtn() {
				this.applyIsShow = false
				this.$parent.applyForIsShow = false
				if (this.hasPermission == 3) {
					uni.navigateTo({
						url: "/pages/applyTrial/applyTrial"
					})
				} else if (this.hasPermission == 4) {
					this.showRelation = true
				}
			},
			applyIsShowCancel() {
				this.applyIsShow = false
				this.$parent.applyForIsShow = false
			},
			showhasPermissionBtn() {
				uni.makePhoneCall({
					phoneNumber: this.jurisdictionList.SellerMobile //仅为示例
				});
				this.showhasPermission = false
				this.$parent.isShowhasPermission = false
			},
			showhasPermissionCancel() {
				this.showhasPermission = false
				this.$parent.isShowhasPermission = false
			},	
			GoOutboundMobileBtn(){
				this.$parent.editIsShow=false
				this.editIsShowDlg=false
				if(this.goOnNextStep){
					this.goFollowShow=true
				}else {
					this.show=true
				}
			},
			GoOutboundMobileIsGo(){
				this.$parent.editIsShow=false
				this.editIsShowDlg=false
				this.$emit('cancelShowBtn', this.idTypeCancel, this.signupType, this.idTypeCancel.isNum)
				uni.navigateTo({
					url:'/activityPages/editOutbound/editOutbound?title=修改外呼号码&identification=修改&goOnNextStep='+this.goOnNextStep+"&id="+this.idTypeCancel.cutId+'&cellphone='+ this.countryCode+'-'+ this.mobileEdit,
				})
			},
			gmailboxBindingDlgBtn(){
				this.$parent.mailboxBinding=false
				this.mailboxBindingDlg=false
				this.$parent.signupType=''
				uni.navigateTo({
					url:'/activityPages/editOutbound/editOutbound?title=设置外呼号码&identification=邮箱&goOnNextStep='+this.goOnNextStep+"&id="+this.idTypeCancel.cutId
				})
			},
			cancelMailboxBindingDlg(){
					this.$parent.mailboxBinding=false
					this.mailboxBindingDlg=false
			}
			
		}
	}
</script>

<style scoped lang="scss">
	.slot-content {
		width: 100%;
		padding: 50rpx;
		text-align: center;
		font-size: 32rpx;
		color: #0F1826;
		line-height: 48rpx;

	}

	.u-model__footer__button.data-v-3626fcec {
		border-right: 1rpx solid #333;
	}
</style>