caimei-applets-caimei/components/cm-module/modelAlert/supplierRegisreAlert.vue

<template name="alert">
	<view class="alert spec" :class="specClass">
		<!-- 运费弹窗说明 -->
		<view class="freight-alert">
			<view class="content clearfix">
				<view class="title">供应商注册需知</view>
				<view class="text">采美采购商城(隶属于采美365网)是美容行业一站式B2B采购交易服务平台，供应商入驻需平台审核。注册说明如下，请您仔细阅读：</view>
				<view class="text">1、本商城商品需绝对保证正品，谢绝非自营/自有品牌（以登记备案为准），代理商应出具授权书等说明文件，杜绝山寨、假冒伪劣等侵权、侵害他人利益的行为。</view>
				<view class="text">2、注册需要提供公司名称、营业执照、公司地址、联系人等基本信息。</view>
				<view class="text">3、供应商注册审核通过后需缴纳平台信息服务管理费用。</view>
				<view class="register-agree">
					<view class="agree-text"  @tap.stop="agreeCheck()">
						<button class="checkbox iconfont" :class="[isCheck?'icon-gouxuan':'icon-weigouxuan']"></button>
						<text class="text">我已阅读供应商注册需知</text>
					</view>	
				</view>
				<view class="text-btn">
					<view class="btn" :class="isCheck?'':'none'" @click.stop="hideAlert">确定</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default{
		name:'alert',
		props:{
			clubStatus:{
				type:Number
			}
		},
		data() {
			return{
				isCheck:false
			}
		},
		created() {
			this.status = this.clubStatus
		},
		onLoad(){
			
		},
		methods:{
			hideAlert(){
				if(!this.isCheck){
					return
				}
				this.$parent.isSupplierAlert = false
			},
			agreeCheck() {
				this.isCheck = !this.isCheck
			}
		},
		onShow(){
	
		}
	}
</script>

<style lang="scss">
	/*弹窗*/
	.model-warp.none{
		display: none;
	}
	.model-warp.show{
		display: block;
	}
	.freight-alert{
		width: 100%;
		height: 100%;
		background: rgba(0,0,0,.5);
		position: fixed;
		top: 0;
		left: 0;
		z-index: 8888;
		transition: all 0.4s;
		&.none{
			display: none;			
		}
		&.show{
			display: block;
		}
		.content{
			width: 580rpx;
			height: 770rpx;
			position: absolute;
			left: 0;
			right: 0;
			bottom: 0;
			top: 0;
			margin: auto;
			border-radius: 16rpx;
			padding: 0 30rpx 30rpx 30rpx;
			box-sizing: border-box;
			background-color: #FFFFFF;
			.title{
				line-height: 80rpx;
				font-size: $font-size-30;
				color: #333333;
				text-align: center;
				font-weight: bold;
			}
			.text{
				line-height: 44rpx;
				font-size: $font-size-26;
				color: #666666;
				text-align: justify;
			}
			.register-agree{
				display: flex;
				flex-direction: column;
				align-items: center;
				margin: 20rpx 0;
				.agree-text{
					.checkbox{
						float: left;
						margin: 4rpx 6rpx 0 0;
						color: #999999;
						font-size: $font-size-34;
						&.icon-gouxuan{
							color: $color-system;
						}
					}
					font-size: $font-size-22;
					line-height: 44rpx;
					color: #999999;
					.text{
						color:#1890f9;
					}
				}
			}
			.text-btn{
				width: 100%;
				height: auto;
				margin-top: 20rpx;
				.btn{
					width: 420rpx;
					height: 84rpx;
					margin: 0 auto;
					background: $btn-confirm;
					line-height: 84rpx;
					font-size: $font-size-28;
					text-align: center;
					color: #FFFFFF;
					border-radius: 42rpx;
					padding: 0;
					&.none{
						background: #e1e1e1;
						color: #FFFFFF;
					}
				}
			}
		}
	}
	
</style>