caimei-applets-caimei/components/cm-module/creatOrder/exchangeCoupon.vue

<template name="alert">
	<view class="alert spec" :class="specClass">
		<!-- 运费弹窗说明 -->
		<view class="coupon-popup">
			<view class="content">
				<view class="title">
					<text>兑换优惠券</text>
					<text class="iconfont icon-iconfontguanbi" @click.stop="hidePopup"></text>
				</view>
				<view class="text-content">
					<view class="coupon-input">
						<input class="input" type="text" v-model="params.couponCode" maxlength="16"  placeholder="请输入16位兑换码"/>
					</view>
					<view class="coupon-main">
						<view class="coupon-button" @click="exchangeConfirm">立即兑换</view>
						<view class="coupon-text">
							<view class="coupon-h1">注意事项：</view>
							<view class="coupon-h2">1. 兑换码获取：可通过采美线下发放或者销售顾问</view>
							<view class="coupon-h2 indet">线上发放获得优惠券兑换码，兑换码由16位数字</view>
							<view class="coupon-h2 indet">和字母组成。</view>
							<view class="coupon-h2">2. 兑换码使用：在当前页面输入兑换码即可兑换相</view>
							<view class="coupon-h2 indet">应优惠券一个兑换码只能兑换一张优惠券，</view>
							<view class="coupon-h2 indet">不可重复使用。</view>
							<view class="coupon-h2">3. 输入兑换码时请区分字母大小写。</view>
						</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default{
		name:'alert',
		props:{},
		data() {
			return{
				params:{
					couponCode:'',
				},
			}
		},
		created() {
			
		},
		onLoad(){
			
		},
		methods:{
			exchangeConfirm(){
				if( this.params.couponCode == ''){
					this.$util.msg('请输入位兑换码',2000)
					return
				}
			},
			hidePopup(){
				this.$parent.isExchangePopup = false
			},
		},
		onShow(){
	
		}
	}
</script>

<style lang="scss">
	/*弹窗*/
	.model-warp.none{
		display: none;
	}
	.model-warp.show{
		display: block;
	}
	.coupon-popup{
		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: 700rpx;
			position: absolute;
			background: $bg-color;
			left: 0;
			right: 0;
			bottom: 0;
			top: 0;
			margin: auto;
			padding: 20rpx 25rpx;
			border-radius: 12rpx;
			.title{
				width: 100%;
				height: 68rpx;
				line-height: 68rpx;
				font-size: $font-size-28;
				color: $text-color;
				text-align: center;
				margin-bottom: 32rpx;
				position: relative;
				font-weight: bold;
				.icon-iconfontguanbi{
					width: 68rpx;
					height: 68rpx;
					text-align: center;
					line-height: 68rpx;
					position: absolute;
					right: 0;
					top: 0;
					font-size: $font-size-36;
					color: #999999;
				}
			}
			.text-content{
				width: 100%;
				height: auto;
				.coupon-input{
					width: 100%;
					height: auto;
					margin-bottom: 48rpx;
					.input{
						width: 100%;
						height: 66rpx;
						box-sizing: border-box;
						border: 1px solid #e2e2e2;
						line-height: 66rpx;
						padding: 0 20rpx;
						font-size: $font-size-26;
						color: #b2b2b2;
						border-radius: 2rpx;
					}
				}
				.coupon-main{
					width: 100%;
					height: auto;
					box-sizing: border-box;
					.coupon-button{
						width: 520rpx;
						height: 84rpx;
						margin: 0 auto;
						border-radius: 50rpx;
						line-height: 84rpx;
						text-align: center;
						background: $btn-confirm;
						color: #FFFFFF;
						font-size: $font-size-30;
					}
					.coupon-text{
						width: 100%;
						box-sizing: border-box;
						padding: 0 20rpx;
						margin-top: 40rpx;
						line-height: 44rpx;
						text-align: justify;
						font-size: $font-size-24;
						.coupon-h1{
							color: #333333;
						}
						.coupon-h2{
							color: #999999;
							&.indet{
								text-indent: 28rpx;
							}
						}
					}
				}
			}
			.btn{
				width: 100%;
				height: 88rpx;
				float: left;
				background: $btn-confirm;
				line-height: 88rpx;
				font-size: $font-size-28;
				text-align: center;
				color: #FFFFFF;
				border-radius: 0;
				padding: 0;
				margin-top: 2rpx;
			}
		}
	}
</style>