<template>
	<view class="giftCard-wrap">
		<image class="page-header" src="/static/giftcard/bg01.jpg"></image>
		<view class="module-con">
			<!-- 标题 -->
			<view class="head-con">
				<image class="tit-icon" src="/static/giftcard/tit-left.png"></image>
				<text>礼品卡充值</text>
				<image class="tit-icon" src="/static/giftcard/tit-right.png"></image>
			</view>
			<!-- 内容 -->
			<view class="giftcard-content">
				<image class="module-header-bg" src="/static/giftcard/module-header-bg.png"></image>
				<view class="giftcard-main recharge-code">
					<view class="inp-con">
						<u-input v-model="rechargeCode" placeholder="请输入充值码" :maxlength="8" input-align="center" />
					</view>
					<u-button class="recharge-btn" shape="circle" :custom-style="customBtnStyle" hover-class="none" @click="messagePop=true">立即充值</u-button>
				</view>
				<image class="module-footer-bg" src="/static/giftcard/module-footer-bg.png"></image>
			</view>
		</view>
		<view class="module-con">
			<!-- 标题 -->
			<view class="head-con">
				<image class="tit-icon" src="/static/giftcard/tit-left.png"></image>
				<text>使用规则</text>
				<image class="tit-icon" src="/static/giftcard/tit-right.png"></image>
			</view>
			<!-- 内容 -->
			<view class="giftcard-content rule-cont">
				<image class="module-header-bg" src="/static/giftcard/module-header-bg.png"></image>
				<view class="giftcard-main rule-con">
					<view>1、礼品卡仅限在乐色管家助手小程序中使用；</view>
					<view>2、礼品卡不记名、不挂失、不兑换现金；</view>
					<view>3、礼品卡终生有效，充值成功后不支持退回；</view>
					<view>4、最终解释权归陕西智享亿家环保科技有限公司所有。</view>
				</view>
				<image class="module-footer-bg" src="/static/giftcard/module-footer-bg.png"></image>
				<!-- 背景图 -->
				<image class="leaf-left-pic" src="/static/giftcard/leaf-left-pic.png"></image>
				<image class="leaf-right-pic" src="/static/giftcard/leaf-right-pic.png"></image>
				<image class="red-envelopes" src="/static/giftcard/red-envelopes.png"></image>
			</view>
		</view>
		<image class="footer-bg" src="/static/giftcard/bg02.jpg"></image>
		<!-- 充值成功提示 -->
		<u-popup v-model="messagePop" mode="center" class="custom-pop" length="80%" border-radius="14" :mask-close-able="false">
			<view class="custom-con">
				<view class="pop-con">
					<view>恭喜您，充值成功！</view>
					<view>1000乐豆已计入您的乐豆余额。</view>
				</view>
				<view class="know-btn" @click="messagePop=false">我知道了</view>
			</view>
		</u-popup>
	</view>
</template>

<script>
	export default{
		data(){
			return{
				rechargeCode: '',  //  充值码
				customBtnStyle: {  //  自定义按钮样式
					borderColor: '#01ad99',
					backgroundColor: '#01ad99',
					color: '#fff'
				},
				messagePop: false,  //  充值成功提示框
			}
		},
		methods: {
			
		}
	}
</script>

<style lang="scss" scoped>
	.giftCard-wrap{
		width: 100%;
		background-color: #02c9b2;
		.page-header{
			display: block;
			width: 100%;
			height: 360rpx;
		}
		.module-con{
			&:nth-child(2){
				margin-bottom: 65rpx;
			}
			.head-con{
				text-align: center;
				.tit-icon{
					display: inline-block;
					width: 62rpx;
					height: 41rpx;
				}
				text{
					display: inline-block;
					color: #fff;
					font-size: 42rpx;
					font-weight: bold;
					margin: 0 20rpx;
				}
				.tit-icon{
					display: inline-block;
					vertical-align: middle;
				}
			}
			.giftcard-content{
				position: relative;
				box-sizing: border-box;
				padding: 0 18rpx;
				margin-top: 38rpx;
				.module-header-bg{
					display: block;
					width: 100%;
					height: 47rpx;
				}
				.giftcard-main{
					width: 92%;
					box-sizing: border-box;
					margin: -19rpx 4% 0;
					padding: 0 37rpx;
					background-color: #fff;
					box-shadow: 0px 0px 12px rgba(0,0,0,0.35);
				}
				.module-footer-bg{
					display: block;
					width: 92%;
					height: 34rpx;
					margin: 0 4%;
				}
				.recharge-code{
					padding-top: 100rpx;
					padding-bottom: 100rpx;
					.inp-con{
						background: url(/static/giftcard/input-bg.png) no-repeat;
						background-size: 100% 100%;
						padding: 12rpx 0;
					}
					.recharge-btn{
						display: block;
						margin-top: 46rpx;
					}
				}
				.rule-con{
					font-size: 24rpx;
					color: #464646;
					line-height: 48rpx;
					padding: 70rpx 37rpx;
				}
				.leaf-left-pic{
					position: absolute;
					bottom: 130rpx;
					left: 0;
					display: block;
					width: 44rpx;
					height: 69rpx;
				}
				.leaf-right-pic{
					position: absolute;
					bottom: -70rpx;
					right: 0;
					z-index: 1;
					display: block;
					width: 90rpx;
					height: 97rpx;
				}
				.red-envelopes{
					position: absolute;
					bottom: 145rpx;
					right: 0;
					display: block;
					width: 85rpx;
					height: 123rpx;
				}
			}
			.rule-cont{
				margin-bottom: 16rpx;
			}
		}
		.footer-bg{
			z-index: 0;
			display: block;
			width: 100%;
			height: 137rpx;
		}
		// 弹框样式
		.custom-pop{
			.custom-con{
				text-align: center;
				background: url(/static/giftcard/pop-bg.png) no-repeat;
				background-size: 100% 100%;
				font-size: 30rpx;
				color: #5a5a5a;
				line-height: 54rpx;
				.pop-con{
					padding: 195rpx 0 100rpx;
				}
				.know-btn{
					color: #16d1bc;
					padding: 20rpx 0;
					border-top: 1rpx solid rgba(213,213,213,0.8);
				}
			}
		}
	}
</style>
