分享 领取优惠券

+<div class="receive-coupon-page">
+    <div class="page">
+    <div class="coupon-header">
+        <img src="/activity/cocacola/images/cokeBanner.jpg">
+    </div>
+    <div class="coupon-centent">
+        <div class="title">
+        </div>
+
+        <div>
+            <input id="phone" type="text" placeholder="请输入手机号" maxlength="11"/>
+            <span>获取红包</span>
+        </div>
+
+        <div>
+            <input id="verification" type="text" placeholder="请输入验证码" maxlength="4"/>
+            <span>验证领红包</span>
+        </div>
+
+        <div class="use-coupon-btn">
+            <img src="/activity/cocacola/images/cokefooter.jpg">
+            <span></span>
+        </div>
+    </div>
+    
+    </div>
+    <div class="messages hidden" id="dialog">
+        <div class="content"></div>
+    </div>
+
+    <div class="keep-out hidden"></div>
+    <div class="dialog hidden" id="message">
+        <span class="close"><img src="/activity/cocacola/images/close.png"></span>
+        <div class="activity-message">
+            <h3>活动说明</h3>
+            <div class="message">
+                <P>1、活动时间：2016年4月7日到2016年7月7日</P>
+                <P>2、仅限新注册用户以及首次购买用户使用</P>
+                <P>3、同一手机号限领一次优惠券</P>
+            </div>
+        </div>
+    </div>
+
+    <div class="gain">
+        <div class="coupon-centent">
+            <div class="coupon">
+                <img src="/activity/cocacola/images/cokeCoupon.png">                
+            </div>
+            <p class="phone" id="mobile"></p>
+            <p>登录Yoho!Buy有货客户端即可使用</p>
+
+            <div class="use-coupon-btn">
+                <img src="/activity/cocacola/images/cokeBtn.png">
+            </div>
+            <span>活动说明</span>
+        </div>
+        
+    </div>
+</div>

+
+var $ = require('yoho-jquery'),
+    num = 0,
+    phone,
+    reg,
+    time;
+
+$('#phone').bind('input propertychange', function() {
+    if ($(this).val().length === 11) {
+        $('.centent span').eq('0').addClass('verification-code');
+    } else {
+        $('.centent span').eq('0').removeClass();
+    }
+});
+$('#verification').bind('input propertychange', function() {
+    if ($(this).val().length === 4) {
+        $('.centent span').eq('1').addClass('get');
+    } else {
+        $('.centent span').eq('1').removeClass();
+    }
+});
+
+$('.centent').on('click', '.verification-code', function() {
+    $('.centent span').eq('0').removeClass('verification-code');
+    phone = $(this).siblings('input').val();
+    reg = /[0-9]{11}/;
+    if (!reg.test(phone)) {
+        $('#dialog').removeClass('hidden');
+        $('.keep-out').removeClass('hidden');
+        $('#dialog .content').html('<p class="phone-error">手机号错误，请重新输入。<p>');
+        setTimeout(function() {
+            $('.messages').addClass('hidden');
+            $('.keep-out').addClass('hidden');
+            $('#dialog .content').html(' ');
+        }, 1400);
+        return;
+    }
+    $.ajax({
+        url: '/activity/cocacola/CocacolaController/sendSms',
+        data: {
+            mobile: $('#phone').val()
+        },
+        dataType: 'json',
+        success: function(data) {
+            if (data.code === 200) {
+                time = setInterval(function() {
+                    num++;
+                    if (num > 60) {
+                        num = 0;
+                        $('.centent span').eq('0').addClass('verification-code').html('获取验证码');
+                        clearInterval(time);
+
+                    } else {
+                        $('.centent span').eq('0').removeClass('verification-code').html('重新发送' + (60 - num));
+                    }
+                }, 1000);
+            } else {
+                $('#dialog').removeClass('hidden');
+                $('.keep-out').removeClass('hidden');
+                $('#dialog .content').html('<p class="phone-error">' + data.message + '<p>');
+                setTimeout(function() {
+                    $('.messages').addClass('hidden');
+                    $('.keep-out').addClass('hidden');
+                    $('#dialog .content').html(' ');
+                }, 1400);
+            }
+        }
+    });
+});
+$('.centent').on('click', '.get', function() {
+    $('.centent span').eq('1').removeClass('get');
+    if ($(this).siblings('input').val().length === 4) {
+        $.ajax({
+            url: '/activity/cocacola/CocacolaController/validRegCodeAndSendCode',
+            data: {
+                code: $('#verification').val(),
+                mobile: $('#phone').val(),
+                client_id: $.cookie('_yasvd')
+            },
+            dataType: 'json',
+            success: function(data) {
+                if (data.code === 200) {
+                    location.href = 'gain.html?mobile=' + $('#phone').val();
+                } else {
+                    $('#dialog').removeClass('hidden');
+                    $('.keep-out').removeClass('hidden');
+                    $('#dialog .content').html('<p class="phone-error">' + data.message + '<p>');
+                    setTimeout(function() {
+                        $('.messages').addClass('hidden');
+                        $('.keep-out').addClass('hidden');
+                        $('#dialog .content').html(' ');
+                    }, 1400);
+                }
+            }
+        });
+    } else {
+        $('#dialog').removeClass('hidden');
+        $('.keep-out').removeClass('hidden');
+        $('#dialog .content').html('<p class="phone-error">验证码错误，请重新输入。<p>');
+        setTimeout(function() {
+            $('.messages').addClass('hidden');
+            $('.keep-out').addClass('hidden');
+            $('#dialog .content').html(' ');
+        }, 1400);
+    }
+});
+$('.close').on('click', function() {
+    $('.dialog').addClass('hidden');
+    $('.keep-out').addClass('hidden');
+    $('#dialog .content').html(' ');
+});
+$('.footer span').on('click', function() {
+    $('#message').removeClass('hidden');
+    $('.keep-out').removeClass('hidden');
+});
+
+
+$('.centent').on('click', '.get', function() {
+    if (window._yas) {
+        window._yas.sendCustomInfo({
+            receiveCoupon: 'Y'
+        }, true);
+    }
+});

+.receive-coupon-page {
+    * {
+        margin: 0;
+        padding: 0;
+        font-size: 14px;
+    }
+
+    html,
+    body {
+        width: 100%;
+        height: 100%;
+        background: #e10c1e;
+    }
+
+    .page {
+        width: 100%;
+        height: 100%;
+        background: #e10c1e;
+    }
+    .coupon-header {
+        width: 100%;
+        height: auto;
+        overflow: hidden;
+    }
+
+    .use-coupon-btn {
+        width: 100%;
+        height: auto;
+        overflow: hidden;
+        position: relative;
+        padding-bottom: 2rem;
+    }
+
+    .use-coupon-btn img,
+    .coupon-header img {
+        width: 100%;
+    }
+
+    .use-coupon-btn span {
+        position: absolute;
+        bottom: 0;
+        left: 40%;
+        width: 20%;
+        height: 2rem;
+    }
+
+    .coupon-centent {
+        width: 100%;
+        height: auto;
+        overflow: hidden;
+        padding-top: 2.4rem;
+        background: #e10c1e;
+    }
+
+    .coupon-centent div {
+        width: 81.25%;
+        height: 4rem;
+        overflow: hidden;
+        margin: 0 auto;
+        padding-bottom: 1rem;
+    }
+
+    .coupon-centent input {
+        width: 68%;
+        height: 3.6rem;
+        overflow: hidden;
+        border: 1px solid #fff;
+        border-right: none;
+        background: none;
+        font-size: 18px;
+        color: #fff;
+        float: left;
+        box-sizing: border-box;
+        border-radius: 0.3rem 0 0 0.3rem;
+        text-align: center;
+        outline: none;
+    }
+
+    .coupon-centent span {
+        width: 30%;
+        height: 3.6rem;
+        float: left;
+        line-height: 3.6rem;
+        text-align: center;
+        font-size: 1em;
+        border-radius: 0 0.3rem 0.3rem 0;
+        background: #b0b0b0;
+        color: #e0e0e0;
+    }
+
+    .coupon-centent .verification-code,
+    .coupon-centent .get {
+        background: #fff;
+        color: #000;
+    }
+
+    .gain-coupon-centent {
+        width: 100%;
+        height: auto;
+        overflow: hidden;
+        padding-top: 2rem;
+        padding-bottom: 0.6rem;
+        background: #e10c1e;
+    }
+
+    .gain-coupon-centent p {
+        width: 100%;
+        height: auto;
+        overflow: hidden;
+        text-align: center;
+        color: #fff;
+        line-height: 2rem;
+        font-size: 0.9rem;
+    }
+
+    .gain-coupon-centent p.phone {
+        font-size: 1.3rem;
+        font-weight: bold;
+        line-height: 2.6rem;
+    }
+
+    .coupon {
+        width: 81.25%;
+        height: auto;
+        overflow: hidden;
+        margin: 0 auto;
+    }
+
+    .coupon img {
+        width: 100%;
+        height: auto;
+    }
+
+    .dialog {
+        width: 82%;
+        height: 14rem;
+        position: absolute;
+        background: #fff;
+        border-radius: 0.6rem;
+        left: 9%;
+        top: 45%;
+        margin-top: -7rem;
+        z-index: 2;
+    }
+
+    .dialog .close {
+        width: 1.4rem;
+        height: 1.4rem;
+        overflow: hidden;
+        background: #444;
+        color: #f1f1f1;
+        border-radius: 50%;
+        position: absolute;
+        top: -0.5rem;
+        right: -0.5rem;
+        line-height: 1.4rem;
+        text-align: center;
+    }
+
+    .dialog .close img {
+        width: 100%;
+        height: auto;
+    }
+
+    .use-coupon-btn .btn {
+        width: 75.25%;
+        height: auto;
+        margin: 0 auto 1.6rem;
+    }
+
+    .use-coupon-btn .btn img {
+        width: 100%;
+        height: auto;
+    }
+
+    .hidden {
+        display: none;
+    }
+
+    .phone-error {
+        text-align: center;
+        line-height: 14rem;
+    }
+
+    .keep-out {
+        width: 100%;
+        height: 100%;
+        overflow: hidden;
+        background-color: #000;
+        opacity: 0.4;
+        position: absolute;
+        top: 0;
+        left: 0;
+        z-index: 1;
+    }
+
+    .activity-message {
+        overflow: auto;
+    }
+
+    .activity-message h3 {
+        width: 100%;
+        height: 3.4rem;
+        padding-top: 0.6rem;
+        line-height: 3.4rem;
+        font-size: 1.2rem;
+        text-align: center;
+    }
+
+    .activity-message p {
+        width: 85%;
+        height: auto;
+        overflow: hidden;
+        margin: 0 auto;
+        line-height: 2rem;
+    }
+
+    .messages {
+        width: 82%;
+        height: 4rem;
+        position: absolute;
+        background: rgba(0, 0, 0, 0.9);
+        border-radius: 0.6rem;
+        left: 9%;
+        top: 45%;
+        margin-top: -2rem;
+        z-index: 2;
+        color: #fff;
+    }
+
+    .messages p {
+        line-height: 4rem;
+    }
+}
+