horzi_rai_wxa/components/modalDialog.vue

<template>
	<view>
		<u-modal v-model="show" :content="content" :content-style="{fontSize: '32rpx'}" @confirm="contentBtn"
			:show-title="false" confirm-text="知道了" :confirm-style="{fontWeight: '700'}"></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>
	</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: '',
			}
		},
		props: {
			isShow: {
				type: Boolean,
				default: false
			},
			signupType: {
				type: Number,
			},
			signupStatus: {
				type: String
			},
			goFollow: {
				type: Boolean
			},
			isCancelShow: {
				type: Boolean,
				default: false
			},
			idTypeCancel: {
				type: Object
			},
			jurisdictionList: {
				type: Object
			},
			applyForIsShow: { //潜在用户
				type: Boolean
			},
			isShowhasPermission: { //联系销售
				type: Boolean
			},
			hasPermission: { //权限字段
				type: String
			}

		},
		watch: {
			goFollow() {
				this.goFollowShow = this.goFollow
			},
			isShow() {
				this.show = this.isShow
			},
			signupType() {
				if (this.signupType == 1) {
					this.content = '预约成功，已加入您的活动日程'
					this.accounts = `
					预约成功，已加入您的活动日程<br/><br/>
					
					关注【弘则研究】公众号，及时获取活动时间变更通知
				`
				} else {
					this.content = '报名成功，已加入您的活动日程'
					this.accounts = `
							报名成功，已加入您的活动日程<br/><br/>
							
							关注【弘则研究】公众号，及时获取活动时间变更通知
						`
				}

			},
			signupStatus() {
				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: '/pages/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
			}
		}
	}
</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>