分享模板

-<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>

@@ -13,4 +13,5 @@ module.exports = app => {
 
 
     // 业务模块
     // 业务模块
     app.use('/product', require('./apps/product'));
     app.use('/product', require('./apps/product'));
+    app.use('/coupon', require('./apps/coupon'));
 };
 };

-
-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);
-    }
-});

@@ -5,93 +5,74 @@
         font-size: 14px;
         font-size: 14px;
     }
     }
 
 
-    html,
-    body {
-        width: 100%;
-        height: 100%;
-        background: #e10c1e;
-    }
-
     .page {
     .page {
         width: 100%;
         width: 100%;
         height: 100%;
         height: 100%;
-        background: #e10c1e;
+        padding-bottom: 60px;
+        background: #c4211a;
     }
     }
     .coupon-header {
     .coupon-header {
         width: 100%;
         width: 100%;
-        height: auto;
-        overflow: hidden;
+        height: 428px;
+        background: url("../img/coupon/header.png");
+        background-size: 100%;
     }
     }
 
 
-    .use-coupon-btn {
-        width: 100%;
-        height: auto;
-        overflow: hidden;
-        position: relative;
-        padding-bottom: 2rem;
+    .coupon-centent,
+    .gain-coupon-centent {
+        height: 520px;
+        margin: 0 30px;
+        background: #9d1a15;
     }
     }
 
 
-    .use-coupon-btn img,
-    .coupon-header img {
+    .coupon-centent .title {
         width: 100%;
         width: 100%;
+        height: 111px;
+        background: url("../img/coupon/coupon-title.png");
     }
     }
 
 
-    .use-coupon-btn span {
-        position: absolute;
-        bottom: 0;
-        left: 40%;
-        width: 20%;
-        height: 2rem;
+    .coupon-centent .input-content {
+        height: 206px;
+        margin: 30px 30px 0;
     }
     }
 
 
-    .coupon-centent {
+    .coupon-centent .input-content input {
+        height: 88px;
         width: 100%;
         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;
+        margin-bottom: 30px;
         border: 1px solid #fff;
         border: 1px solid #fff;
-        border-right: none;
-        background: none;
         font-size: 18px;
         font-size: 18px;
         color: #fff;
         color: #fff;
-        float: left;
-        box-sizing: border-box;
-        border-radius: 0.3rem 0 0 0.3rem;
+        background: #9d1a15;
+        border-radius: 0.3rem;
         text-align: center;
         text-align: center;
         outline: none;
         outline: none;
     }
     }
 
 
-    .coupon-centent span {
-        width: 30%;
-        height: 3.6rem;
-        float: left;
-        line-height: 3.6rem;
+    .coupon-centent .input-content div {
+        height: 88px;
+        width: 100%;
         text-align: center;
         text-align: center;
-        font-size: 1em;
-        border-radius: 0 0.3rem 0.3rem 0;
-        background: #b0b0b0;
-        color: #e0e0e0;
+        font-size: 18px;
+        border-radius: 0.3rem;
+        background: #fff;
+        color: #444;
+        line-height: 88px;
     }
     }
 
 
-    .coupon-centent .verification-code,
-    .coupon-centent .get {
-        background: #fff;
-        color: #000;
+    .coupon-description {
+        width: 100%;
+        height: 173px;
+        position: relative;
+        background: url("../img/coupon/coupon-footer.png");
+    }
+
+    .coupon-description span {
+        position: absolute;
+        bottom: 0;
+        left: 40%;
+        width: 20%;
+        height: 2rem;
     }
     }
 
 
     .gain-coupon-centent {
     .gain-coupon-centent {
@@ -124,6 +105,7 @@
         height: auto;
         height: auto;
         overflow: hidden;
         overflow: hidden;
         margin: 0 auto;
         margin: 0 auto;
+        background: url("../img/coupon/close.png");
     }
     }
 
 
     .coupon img {
     .coupon img {
@@ -144,24 +126,19 @@
     }
     }
 
 
     .dialog .close {
     .dialog .close {
-        width: 1.4rem;
-        height: 1.4rem;
+        width: 40px;
+        height: 40px;
         overflow: hidden;
         overflow: hidden;
-        background: #444;
+        background: url("../img/coupon/close.png");
         color: #f1f1f1;
         color: #f1f1f1;
-        border-radius: 50%;
+        border-radius: 20px;
         position: absolute;
         position: absolute;
-        top: -0.5rem;
-        right: -0.5rem;
-        line-height: 1.4rem;
+        top: -20px;
+        right: -20px;
+        line-height: 40px;
         text-align: center;
         text-align: center;
     }
     }
 
 
-    .dialog .close img {
-        width: 100%;
-        height: auto;
-    }
-
     .use-coupon-btn .btn {
     .use-coupon-btn .btn {
         width: 75.25%;
         width: 75.25%;
         height: auto;
         height: auto;

@@ -9,3 +9,4 @@
 @import "product/index";
 @import "product/index";
 @import "common/index";
 @import "common/index";
 @import "cart/chose-panel";
 @import "cart/chose-panel";
+@import "coupon/index";