caimei-applets-caimei/components/cm-module/cm-ross/cm-ross-popup.vue

<template name="cm-parameter">
	<!-- 相关规格 -->
	<tui-bottom-popup :radius="false" :show="popupShow">
		<view class="tui-popup-box clearfix">
			<view class="tui-popup-close" @click.stop="hidePopup">
				<text class="iconfont icon-iconfontguanbi"></text>
			</view>
			<view class="tui-popup-mssg">
				<view class="tui-popup-mssg-img">
					<image :src="advertData.image">
				</view>
				<view class="tui-popup-mssg-text">
					<view class="tui-popup-mssg-text-t">
						<view class="text">{{ advertData.guidingOne }}</view>
						<view class="text">{{ advertData.guidingTwo }}</view>
					</view>
					<view class="tui-popup-mssg-text-b">
						<view class="text">
							<text class="iconfont icon-xiangxia1"></text>
						</view>
						<view class="text">请留下您的姓名和手机号，采美会安排咨询顾问联系您!</view>
					</view>
				</view>
			</view>
			<view class="tui-popup-main" :style="{ paddingBottom: isIphoneX ? '68rpx' : '34rpx' }">
				<view class="tui-popup-from">
					<input
						class="input"
						type="text"
						v-model="consultParams.consultName"
						@input="handleInputName"
						placeholder="请输入名字"
                        placeholder-class="placeholder"
						maxlength="10"
						cursor-spacing="40"
					/>
				</view>
				<view class="tui-popup-from none">
					<input
						class="input"
						type="text"
						v-model="consultParams.consultMobile"
						@input="handleInputPhone"
						placeholder="请输入手机号"
                        placeholder-class="placeholder"
						maxlength="11"
						cursor-spacing="40"
					/>
				</view>
			</view>
			<view class="tui-right-flex tui-popup-btn" :style="{ paddingBottom: isIphoneX ? '68rpx' : '34rpx' }">
				<view class="tui-modal-flex">
					<button class="tui-modal-button" :class="isDisabled ? 'disabled' : ''" @click="handleSubmit">
						提交
					</button>
				</view>
				<view class="tui-modal-text">
					<view class="tui-modal-left" @click.stop="this.$api.navigateTo('/pages/login/register-select')">立即注册</view>
					<view class="tui-modal-right" @click.stop="this.$api.navigateTo('/pages/login/login')">登录</view>
				</view>
			</view>
		</view>
	</tui-bottom-popup>
</template>

<script>
import { mapState, mapMutations } from 'vuex'
import cmSrsMixins from '@/utils/cmSrsMixins.js'
export default {
	name: 'cm-ross-popup',
	mixins: [cmSrsMixins],
	props: {
		popupShow: {
			type: Boolean,
			default: true
		},
		advertisInfo:{
			type: Object,
			default: {}
		}
	},
	data() {
		return {
			userId: 0, // 用户Id
			consultParams: {
				ip:'',
				shopProductId:'',
				createTime:'',
				consultMobile: '',
				consultName: '',
				isClick:1
			},
			advertData:{},
			isDisabled: true
		}
	},
    watch: {
        advertisInfo:{
            deep: true,
            handler(val) {
            	this.initData(val)
            }
        }
    },
	created() {
		this.initData(this.advertisInfo)
	},
	computed: {
		...mapState(['hasLogin'])
	},
	methods: {
		async initData(data) {
			const userInfo = await this.$api.getStorage()
			this.userId = userInfo.userId ? userInfo.userId : 0
			this.advertData = data
			this.consultParams.shopProductId = data.shopProductId
		},
		handleInputName(e) {
			this.consultParams.name = e.detail.value
			this.handldeCheckInput()
		},
		handleInputPhone(e) {
			this.consultParams.phone = e.detail.value
			this.handldeCheckInput()
		},
		handldeCheckInput() {
			if (this.consultParams.name !== '' && this.consultParams.phone !== '') {
				this.isDisabled = false
			} else {
				this.isDisabled = true
			}
		},
		handleSubmit() {
			// 提交联系人信息
			if (this.isDisabled) {
				return
			}
			const reg = RegExp(/^1\d{10}$/)
			if(!reg.test(this.consultParams.consultMobile)){
				this.$util.msg('请输入正确的手机号');
				return
			}
			this.userInformationInsertRoos(this.consultParams)
		},
		async userInformationInsertRoos(params){
			// 游客关闭广告弹窗
			try{
				await this.UserService.userInformationInsertRoos(params)
				this.$parent.showRossHtml = false
			}catch(e){
				//TODO handle the exception
				console.log('游客关闭广告弹窗失败~')
			}
		},
		hidePopup() {
			this.userInformationInsertRoos(this.consultParams)
		}
	}
}
</script>

<style lang="scss">
.tui-popup-box {
	width: 100%;
	height: 852rpx;
	background: linear-gradient(0deg, #FFA86E, #FF5B00);
	padding:30rpx 30rpx 75rpx 30rpx;
	box-sizing: border-box;
	.tui-popup-close{
		width: 80rpx;
		height: 80rpx;
		line-height: 80rpx;
		text-align: center;
		position: absolute;
		top: 0;
		right: 0;
		.icon-iconfontguanbi{
			color: #ffffff;
			font-size: 40rpx;
		}
	}
	.tui-popup-mssg{
		width: 100%;
		height: 220rpx;
		margin-bottom: 75rpx;
		.tui-popup-mssg-img{
			width: 220rpx;
			height: 220rpx;
			float: left;
			image{
				width: 220rpx;
				height: 220rpx;
				display: block;
			}
		}
		.tui-popup-mssg-text{
			width: 470rpx;
			height: 100%;
			box-sizing: border-box;
			padding: 0 0 0 30rpx;
			float: left;
			.tui-popup-mssg-text-t{
				width: 100%;
				height: auto;
				margin-bottom: 30rpx;
				.text{
					font-size: 30rpx;
					height: 52rpx;
					line-height: 52rpx;
					color: #ffffff;
				}
			}
			.tui-popup-mssg-text-b{
				width: 100%;
				height: auto;
				.text{
					font-size: 18rpx;
					line-height: 40rpx;
					color: #ffffff;
					.icon-xiangxia1{
						color: rgba(255, 255, 255, .7);
						font-size: 36rpx;
					}
				}
			}
		}
	}
	.tui-popup-main{
		width: 100%;
		height: auto;
		.tui-popup-from{
			width: 100%;
			height: 80rpx;
			margin-bottom: 30rpx;
			&.none{
				margin-bottom: 0;
			}
			.input{
				width: 100%;
				height: 80rpx;
				box-sizing: border-box;
				line-height: 80rpx;
				font-size: 28rpx;
				color: #ffffff;
				border-bottom: 1px solid #ffffff;
			}
            .placeholder{
                color: #FFFFFF;
            }
		}
	}
}
.tui-popup-btn {
	width: 100%;
	float: left;
	.tui-modal-flex {
		width: 100%;
		height: 84rpx;
		margin-top: 40rpx;
		display: flex;
		.tui-modal-button {
			flex: 1;
			line-height: 84rpx;
			font-size: $font-size-28;
			text-align: center;
			border-radius: 42rpx;
			padding: 0;
			margin: 0 15rpx;
			box-sizing: border-box;
			background: #202020;
			color: #ffffff;
			&.disabled {
				background: #cbcbcb;
			}
		}
	}
	.tui-modal-text{
		width: 100%;
		height: 68rpx;
		box-sizing: border-box;
		padding: 0 30rpx;
		.tui-modal-left{
			float: left;
			line-height: 68rpx;
			font-size: 28rpx;
			color: #ffffff;
		}
		.tui-modal-right{
			float: right;
			line-height: 68rpx;
			font-size: 28rpx;
			color: #ffffff;
		}
	}
}
</style>