h5-elab-open-ownerUnion/components/subComponents/showGuide.vue

<template>
	<view class="pop-view" v-if='visible'>
		<view class="pop-maskView" :style="{
		  'background-color': maskBgColor,
		  zIndex: zIndex - 1
		}" @tap.stop="handleMaskTap"
		 @touchmove.stop.prevent="moveHandle">
		</view>
		
		<view class="pop-content">
			<image class="backImg" src="https://dm.static.elab-plus.com/yezhu/h5/showGuideImg.png" mode="aspectFit"></image>
			<view class="closeBtn" @click="hide">
				<image class="closeImg" src="https://dm.static.elab-plus.com/yezhu/h5/icon_closeBtn.png" mode="aspectFit"></image>
			</view>
			<view class="registBtn" @click="registAction">立即注册</view>
			<view class="lookBtn" @click="hide">先去逛逛</view>
		</view>
		
	</view>
</template>

<script>
	export default{
		props: {
			title: String,
			maskColor: {
				type: String,
				default: 'rgba(0, 0, 0, 0.3)'
			},
			zIndex: {
				type: Number,
				default: 999
			},
			maskTapHide: {
				type: Boolean,
				default: true
			},
			isShowTitle: {
				type: Boolean,
				default: true
			},
			isShowClose: {
				type: Boolean,
				default: true
			},
			isShowConfirm: {
				type: Boolean,
				default: true
			},
			isScannerOption:{
				type:Boolean,
				default:false
			},
			marginSize:{
				type: String,
				default: '20rpx'
			}
		},
		data(){
			return {
				visible: false,
				containerVisible: false,
				maskBgColor: '',
				selectValue: [0],
				selIdx: 0,
				color2:''
			}
		},
		mounted() {
			let app = getApp();
			this.globalData = app.globalData;
			this.color2 = this.globalData.color2;
		},
		methods:{
			show() {
				this.visible = true
				setTimeout(() => {
					this.maskBgColor = this.maskColor
					this.containerVisible = true
				}, 20)
			},
			hide() {
				this.maskBgColor = ''
				this.containerVisible = false
				this.visible = false
				this.$emit('close')
			},
			handleMaskTap() {
				if (this.maskTapHide) {
					this.hide()
				}
			},
			moveHandle() {},
			
			registAction() {
				this.hide()
				this.$emit('registAction')
			}
			
		},
		
		components:{
			
		}
		
	}
</script>

<style scoped lang="scss">
	.pop-view {
		position: relative;
	
		.pop-maskView {
			position: fixed;
			top: 0;
			right: 0;
			left: 0;
			bottom: 0;
		
		}
		
		.pop-content {
			position: fixed;
			z-index: 1000;
			width: 628rpx;
			height: 894rpx;
			top: calc((100% - 894rpx) / 2 - 50rpx);
			left: calc((100% - 628rpx) / 2);
			
			.backImg {
				position: absolute;
				top: 0;
				left: 0;
				width: 100%;
				height: 100%;
			}
			
			.closeBtn {
				position: absolute;
				z-index: 1000;
				right: 50rpx;
				top: 100rpx;
				width: 50rpx;
				height: 50rpx;
				padding: 10rpx;
				box-sizing: border-box;
				
				.closeImg {
					width: 100%;
					height: 100%;
				}
			}
			
			.registBtn {
				width: 280rpx;
				height: 72rpx;
				background: #ffffff;
				border-radius: 36rpx;
				box-shadow: 0rpx 6rpx 12rpx 0rpx rgba(0,0,0,0.16); 
				position: absolute;
				bottom: 36rpx;
				line-height: 72rpx;
				text-align: center;
				left: calc((100% - 280rpx) / 2 - 10rpx);
				
				font-size: 36rpx;
				font-family: Verdana, Verdana-Bold;
				font-weight: 700;
				color: #f07423;
				letter-spacing: 0.72px;
			}
			
			.lookBtn {
				font-size: 24rpx;
				font-family: Verdana, Verdana-Bold;
				font-weight: 700;
				text-align: left;
				color: rgba(255,255,255,0.80);
				line-height: 46rpx;
				
				position: absolute;
				bottom: 46rpx;
				right: 56rpx;
			}
		}
	
	}
	
</style>