<template>
	<view class="content">
		<image class="superRed-back" src="/static/img/superRed.jpg" mode="widthFix"></image>
		<view class="superRed-cont">
			<image class="superRed-img" src="/static/img/superRed-img.png" mode="widthFix"></image>
			<view class="superRed-see">
				<view class="superRed-white">
					<view class="superRed-title"><text>领取消费金</text></view>
					<view class="packetText-form">
						<view class="packetText-title">
							<view class="packetText-title-name">请输入办理业务手机号</view>
							<text>（例：185XXXX0001）</text>
						</view>
						<form action="" @submit="forgetlogin">
							<view class="packetText-label">
								<input class="inputs-input" type="text" placeholder="请输入办理业务的手机号" @input="getNameValue"
									:value="mobile"></input>
							</view>
							<view class="packetText-label">
								<input class="inputs-input" placeholder="请输入验证码" @input="getCodeValue" :value="code"></input>
								<button class="packetText-code" @click="codeBind" hover-class="none" :disabled="disabled">{{codename}}</button>
							</view>
							<view class="packetText-label">
								<input class="inputs-input" type="text" placeholder="消费金使用账户【微信关联手机号码】" @input="getMobileValue"
									:value="getMobile"></input>
							</view>
							<view class="packetText-cozy">
								<view class="packetText-cozy-name">温馨提示：</view>
								<text>1.消费金仅限本系统使用；</text>
								<text>2.消费金当月有效，当月权益请在当月使用；</text>
								<text>3.如消费金兑换成电子券后，请按电子券有效期使用；如逾期未用，视为放弃使用资格，平台将不予补发，不予延期。</text>
							</view>
							<view class="packetText-btn">
								<button type="default" form-type="submit"><text>立即领取</text></button>
							</view>
						</form>
					</view>
				</view>
			</view>
		</view>
		
		<view class="popBack" :class="{active : popContHide}"></view>
		<view class="popCont" :class="{active : popContHide}">
		    <image class="popCont-img" src="https://card.ysd-bs.com/storage/materials/2021/09/01/receive.png" mode="widthFix"></image>
		    <view class="popCont-text">
		        <view class="popCont-name">领取成功,共领取<text>{{popData}}</text>,可在账户中查看</view>
		        <view class="popCont-btn" @click="popClick">我知道了 <text v-if="countDownNum > 0">({{countDownNum}})</text></view>
		    </view>
		</view>
		
	</view>
</template>

<script>
	import { send } from '@/apis/interfaces/auth'
	import { monthsPacket } from '@/apis/interfaces/giftPack'
	export default {
	    data() {
	        return {
				mobile      : '', //手机号码
				code        : '',
				getMobile   : '',
				iscode      : null,   //用于存放验证码接口里获取到的code
				codename    : '获取验证码',
				countDownNum: '',
				popContHide : false,  //领取成功弹出
				popData     : '',   //领取金额
				disabled    : false
	        }
	    },
	    
	    // 生命周期函数--监听页面显示
	    onShow() {
			// 存储环境-月兑活动
			getApp().globalData.envType = 'giftPEnv'
	    },
	    methods: {
			
			// 获取手机号码
			getNameValue(e) {
			    this.mobile = e.detail.value
			},
			
			// 获取验证码
			getCodeValue(e) {
			    this.code = e.detail.value
			},
			
			// 获取领取红包的手机号
			getMobileValue(e) {
			    this.getMobile = e.detail.value
			},
			
			// code发送
			codeBind(e){
				this.disabled  = true
			    let mobile = this.mobile,
			        myreg    = /^(14[0-9]|13[0-9]|15[0-9]|17[0-9]|18[0-9])\d{8}$$/
			    var _this    = this
			    if  (mobile == "") {
			        uni.showToast({
			            title     : '手机号不能为空',
			            icon      : 'none',
			            duration  : 1000
			        })
			        return false;
			    }else if (!myreg.test(mobile)) {
			        uni.showToast({
			            title     : '请输入正确的手机号',
			            icon      : 'none',
			            duration  : 1000
			        })
			        return false;
			    }else{
			        send({
			            mobile  : mobile,
			            channel :'DEFAULT',
						type	: 'month'
			        }).then(res=>{
			            uni.showToast({
			                title   : '发送成功',
			                icon    : 'success',
			                duration: 2000
			            })
			            var num = 61;
			            var timer = setInterval(function () {
			                num--;
			                if (num <= 0) {
			                    clearInterval(timer);
			                    _this.codename  = '重新发送',
			                    _this.disabled  = false
			      
			                } else {
			                    _this.codename  = num + "s后重新获取",
			                    _this.disabled  = true
			                }
			            }, 1000)
			        }).catch(err => {
			            uni.showToast({
			                icon: 'none',
			                title: err.message
			            })
			        })
			    }
			},
			
			// 立即领取
			forgetlogin(e) {
			    let mobile          = this.mobile,
					getmobile       = this.getMobile,
			        code            = this.code,
			        that            = this,
			        countDownNum    = 5 //获取倒计时初始值 
			    that.countDownNum = countDownNum
				
			    monthsPacket({
			        mobile    : mobile,
					get_mobile: getmobile,
			        channel   : 'DEFAULT',
			        code      : code
			    }).then(res=>{
			        that.popContHide = !this.popContHide
			        that.popData     = res
					
					var timerPop = setInterval(function () {
					    countDownNum--;
					    that.countDownNum = countDownNum
					    if (countDownNum <= 0) {
					        clearInterval(timerPop);
					        that.countDownNum = 0
					        uni.switchTab({
					            url: '/pages/user/index'
					        })
					    }
					}, 1000)
			    }).catch(err=>{
                    uni.showToast({
                        title: err.message,
                        icon : 'none'
                    })
                })
			},
			
			// 关闭弹窗
			popClick() {
			    this.popContHide = !this.popContHide
			    
			    // 跳转
			    uni.redirectTo({
			        url: '/pages/giftPack/index'
			    })
			}
	    }
	}
</script>

<style lang="scss" scoped>
	.content {
		background-color: #f31a16;
		height: 100vh;
		overflow-y: scroll;
		position: relative;
	}
	
	.superRed-back {
		width: 100%;
		position: absolute;
	}
	
	.superRed-cont {
		top: 0;
		position: absolute;
		.superRed-img {
			width: 100%;
		}
		.superRed-see {
			padding: 0 30rpx 30rpx;
			box-sizing: border-box;
			.superRed-white {
				position: relative;
				background-color: #fffcf4;
				border-radius: 20rpx;
				padding: 80rpx 30rpx 30rpx;
				box-sizing: border-box;
				.superRed-title {
					width: 100%;
					position: absolute;
					text-align: center;
					top: -38rpx;
					left: 0;
					text {
						display: inline-block;
						background-color: #f95433;
						box-shadow: 0 8rpx 5rpx rgba(249, 84, 51, .4);
						border: 4rpx solid #ffeca0;
						line-height: 76rpx;
						padding: 0 50rpx;
						border-radius: 80rpx;
						color: #ffffff;
						font-weight: 600;
						font-size: 40rpx;
					}
				}
			}
		}
	}
	
	.packetText-title {
		display: flex;
		color: #f25448;
		line-height: 48rpx;
		.packetText-title-name {
			font-weight: 600;
			font-size: 32rpx;
		}
		text{
			font-size: 26rpx;
		}
	}
	.packetText-label {
		height: 100rpx;
		line-height: 100rpx;
		margin-top: 40rpx;
		background-color: #ffffff;
		border-radius: 80rpx;
		padding: 0 40rpx;
		box-sizing: border-box;
		display: flex;
		.inputs-input {
			display: inline-block;
			height: 100%;
			flex: 1;
		}
		.packetText-code {
			line-height: 100rpx;
		    border: none;
		    background-color: transparent;
			border: none;
		    width: auto !important;
		    padding: 0;
		    font-weight: normal;
		    font-size: 28rpx;
			color: #f25448;
			&::after {
				display: none;
			}
			&[disabled]{
				color: #C8C7CC;
			}
		}
	}
	.packetText-cozy {
		color: #f25448;
		margin-top: 40rpx;
		font-size: 26rpx;
		padding: 0 10rpx;
		box-sizing: border-box;
		.packetText-cozy-name {
			font-weight: 600;
			margin-bottom: 20rpx;
		}
		text {
			padding: 10rpx 0 10rpx 30rpx;
			box-sizing: border-box;
			position: relative;
			display: block;
			line-height: 34rpx;
			&::after {
				position: absolute;
				content: '';
				left: 0;
				top: 24rpx;
				width: 10rpx;
				height: 10rpx;
				background-color: #f25448;
				transform: rotate(45deg);
			}
		}
	}
	.packetText-btn {
		text-align: center;
		padding: 60rpx 30rpx 40rpx;
		box-sizing: border-box;
		button {
			background-image: linear-gradient(to bottom, #ff4459, #fe1924);
			box-shadow: 0 8rpx 5rpx rgba(249, 84, 51, .4);
			border-radius: 80rpx;
			color: #ffffff;
			line-height: 94rpx;
		}
	}
	
	
	/* 弹出 */
	.popBack {
	    position: fixed;
	    width: 100%;
	    height: 100%;
	    left: 0;
	    top: 0;
	    background-color: rgba(0, 0, 0, .8);
	    z-index: 8;
	    display: none;
	}
	
	.popCont {
	    position: fixed;
	    z-index: 9;
	    width: 100vw;
	    height: 100vh;
	    text-align: center;
	    display: none;
	}
	
	.popCont-text {
	    padding: 0 10rpx;
	    box-sizing: border-box;
	    position: absolute;
	    z-index: 10;
	    left: 20%;
	    top: 340px;
	    width: 60%;
	}
	
	.popBack.active,
	.popCont.active {
	    display: block;
	}
	
	.popCont-name {
	    margin-bottom: 50rpx;
	    font-size: 30rpx;
	}
	
	.popCont-name text {
	    font-size: 40rpx;
	    color: #fd5238;
	    padding: 0 10rpx;
	}
	
	.popCont-btn {
	    background-color: #ffea37;
	    color: #ff3900;
	    display: inline-block;
	    border-radius: 80rpx;
	    padding: 20rpx 70rpx;
	    box-shadow: 0 10rpx 10rpx rgba(196, 160, 0, 0.4);
	}
</style>