分期

@@ -3,17 +3,25 @@
  * @author: wsl<shuiling.wang@yoho.cn>
  * @date: 2016/08/01
  */
+'use strict';
+
 const headerModel = require('../../../doraemon/models/header');
+const installmentModel = require('../models/installment');
+const _ = require('lodash');
+const helpers = global.yoho.helpers;
 
 const index = (req, res) => {
-    res.render('installment/open-index', {
-        module: 'home',
-        page: 'installment',
-        title: '有货分期',
-        pageHeader: headerModel.setNav({
-            navTitle: '有货分期',
-            navBtn: false
-        }),
+    let uid = req.user.uid || 3236556;
+    let params = {};
+    let notOpen = false;
+    let isRepay = false;
+
+    // installmentModel.getStauts(uid).then((openStatus) => {
+
+    // });
+
+    if (notOpen) {
+        params = {
              bannerTop: {
                 data: [
                     {
@@ -22,6 +30,7 @@ const index = (req, res) => {
                     }
                 ]
             },
+            notOpen: notOpen,
             installmentOnly: {
                 title: '分期专享',
                 goods: [
@@ -29,21 +38,89 @@ const index = (req, res) => {
 
                     }
                 ]
-        },
-        pageFooter: true
-    });
+            }
+        };
+    } else {
+        if (isRepay) {
+            params = {
+                repay: true,
+                price: '455',
+                day: '3',
+                monthPrice: '500',
+                sumPrice: '799',
+                isRepay: true
+            };
+        } else {
+            params = {
+                replayStatus: '逾期',
+                price: '500',
+                sumPrice: '1000',
+                isUnable: true,
+                installmentOnly: {
+                    title: '分期专享',
+                    goods: [
+                        {
+
+                        }
+                    ]
+                }
+            };
+        }
+    }
+
+    res.render('installment/open-index', _.assign({
+        module: 'home',
+        page: 'installment',
+        title: '有货分期',
+        pageHeader: headerModel.setNav({
+            navTitle: '有货分期',
+            navBtn: false
+        })
+    }, params));
 };
 
 const review = (req, res) => {
-    res.render('installment/result', {
+    let uid = req.user.uid || 20000032;
+    let params = {};
+
+    installmentModel.getStauts(uid).then((status) => {
+        if (status === 1) {
+            params = {
+                review: {
+                    url: helpers.urlFormat('/?go=1')
+                }
+            };
+        } else if (status === 2) {
+            params = {
+                success: {
+                    price: '5000',
+                    installmentOnly: {
+                        title: '分期专享',
+                        goods: [
+                            {
+
+                            }
+                        ]
+                    }
+                }
+            };
+        } else {
+            params = {
+                error: {
+                    url: helpers.urlFormat('/?go=1')
+                }
+            };
+        }
+
+        res.render('installment/open-result', _.assign({
             module: 'home',
             page: 'installment',
             title: '有货分期',
             pageHeader: headerModel.setNav({
                 navTitle: '有货分期',
                 navBtn: false
-        }),
-        pageFooter: true
+            })
+        }, params));
     });
 };
 

@@ -3,3 +3,59 @@
  * @author: wsl<shuiling.wang@yoho.cn>
  * @date: 2016/08/01
  */
+'use strict';
+
+const api = global.yoho.API;
+const logger = global.yoho.logger;
+//const camelCase = global.yoho.camelCase;
+
+
+// 获取分期开通状态
+const getStauts = (uid) => {
+    return api.get('', {
+        method: 'user.instalment.getStatus',
+        uid: uid
+    }).then((result) => {
+        if (result && result.code === 200) {
+           return result.data;
+        } else {
+           logger.error('get installment open status return is not 200');
+           return '';
+        }
+    });
+};
+
+// 获取用户可用额度信息
+const getQueryCreditInfo = (uid) => {
+    return api.get('', {
+        method: 'order.queryCreditInfo',
+        uid: uid
+    }).then((result) => {
+        if (result && result.code === 200) {
+           return result.data;
+        } else {
+           logger.error('get user installment usable price info return is not 200');
+           return '';
+        }
+    });
+};
+
+// 获取用户待还款金额
+const getQueryAmtInfo = (uid) => {
+    return api.get('', {
+        method: 'order.queryAmtInfo',
+        uid: uid
+    }).then((result) => {
+        if (result && result.code === 200) {
+           return result.data;
+        } else {
+           logger.error('get user installment repay info return is not 200');
+           return '';
+        }
+    });
+}
+
+module.exports = {
+    getStauts,
+    getQueryCreditInfo
+};

@@ -12,7 +12,7 @@ const installment = require(cRoot + '/installment');
 
 const router = express.Router(); // eslint-disable-line
 
-router.get('/installment', installment.index); // 开通分期首页
-router.get('/review', installment.review); // 开通分期首页
+router.get('/installment/index', installment.index); // 开通分期首页
+router.get('/installment/review', installment.review); // 开通结果
 
 module.exports = router;

 <div class="installment-page">
+    {{#if notOpen}}
         {{# bannerTop}}
             {{> resources/banner-top}}
         {{/ bannerTop}}
@@ -24,4 +25,41 @@
         {{# installmentOnly}}
             {{> installment/installment-only}}
         {{/ installmentOnly}}
+    {{else}}
+        <div class="detail-tab">
+            <a href="/home/installment/repay"><span class="{{#if isRepay}}on{{/if}}">待还款金额</span></a>
+            <a href="/home/installment/usable"><span class="{{#if isUnable}}on{{/if}}">可用额度</span></a>
+        </div>
+        {{#if isRepay}}            
+            <div class="repay-area detail-bg">
+                <p class="detail-txt1">近7日代还款</p>
+                <p class="detail-txt1">¥<span class="detail-txt2">{{round price}}</span></p>
+                <P class="detail-txt3">您有¥{{round price}}已逾期{{day}}天，点击<a href="">查看详情</a></P>
+                <a href="" class="see-btn">明细</a>
+            </div>
+            <ul class="group-list">
+                <li><a href="">本月待还金额：<div class="iconfont"><span class="list-r-txt">¥{{monthPrice}}</span> &#xe604;</div></a></li>
+                <li><a href="">待还总金额：<div class="iconfont"><span class="list-r-txt">¥{{sumPrice}}</span> &#xe604;</div></a></li>
+                <li><a href="">还款记录：<div class="iconfont">&#xe604;</div></a></li>
+                <li><a href="">分期订单：<div class="iconfont">&#xe604;</div></a></li>
+            </ul>
+
+            <ul class="group-list">
+                <li><a href="">账户管理：<span class="iconfont">&#xe604;</span></a></li>
+            </ul>
+        {{/if}}
+
+        {{#if isUnable}}
+            <div class="usable-area detail-bg">
+                {{#replayStatus}}<div class="replay-status">{{.}}</div>{{/replayStatus}}
+                <p class="detail-txt1">可用额度</p>
+                <p class="detail-txt1">¥<span class="detail-txt2">{{round price}}</span></p>
+                <p class="detail-txt1">总额度：¥{{round sumPrice}}</p>
+                <a href="" class="terms">服务条款</a>
+            </div>
+            {{# installmentOnly}}
+                {{> installment/installment-only}}
+            {{/ installmentOnly}}
+        {{/if}}
+    {{/if}}
 </div>

 <div class="installment-page">
     {{# review}}
         <i class="review-icon"></i>
-        <p class="review-txt1">审核中</p>
-        <p>审核结果会在5分钟内短信通知您</p>
-        <div class="open-btn">先去逛逛</div>
+        <p class="font-b">审核中</p>
+        <p class="font-p">审核结果会在5分钟内短信通知您</p>
+        <a href="{{url}}" class="open-btn">先去逛逛</a>
     {{/review}}
     {{#success}}
         <div class="success">
             <i class="success-icon"></i>
-            <p>可用额度</p>
-            <p>¥5000.00</p>
+            <p class="font-b">可用额度</p>
+            <p class="installment-price">¥<span>{{round price}}</span></p>
             <div class="open-btn">去逛逛</div>
         </div>
         {{# installmentOnly}}
-            {{< installment-only}}
+            {{> installment/installment-only}}
         {{/ installmentOnly}}
     {{/success}}
     {{#error}}
         <div class="error">
             <i class="success-icon"></i>
-            <p>审核未通过,暂时无法授信</p>
-            <p>在有货更多的消费，增加信用度,<br>会大大提升审核通过率噢</p>
-            <div class="open-btn">去逛逛</div>
+            <p class="error-txt1">审核未通过,暂时无法授信</p>
+            <p class="error-txt2">在有货更多的消费，增加信用度,<br>会大大提升审核通过率噢</p>
+            <a href="{{url}}" class="open-btn">去逛逛</a>
         </div>
     {{/error}}
 </div>

 <div class="installment-only">
     <h2>{{title}}</h2>
-    <div id="goods-container" class="goods-container">
-        <div class="container clearfix">
+    <div id="goods-list" class="goods-list clearfix">
         {{# goods}}
             {{> common/goods}}
         {{/ goods}}
     </div>
-    </div>
 </div>

@@ -18,8 +18,11 @@ module.exports = {
         // api: 'http://devapi.yoho.cn:58078/',
         // service: 'http://devservice.yoho.cn:58077/'
 
-        api: 'http://testapi.yoho.cn:28078/',
-        service: 'http://testservice.yoho.cn:28077/'
+        //api: 'http://testapi.yoho.cn:28078/',
+        //service: 'http://testservice.yoho.cn:28077/'
+
+        api: 'http://api.yoho.cn/',
+        service: 'http://service.yoho.cn/'
     },
     subDomains: {
         host: '.m.yohobuy.com',

 /**
  * Created by yoho on 2016/8/1.
  */
+var $ = require('yoho-jquery'),
+    ellipsis = require('yoho-mlellipsis'),
+    tip = require('../plugin/tip'),
+    loading = require('../plugin/loading');
+
+var winH = $(window).height(),
+    $installmentOnly = $('.installment-only');
+    searching = false,
+    page = 0;
+
+ellipsis.init();
+
+function search() {
+    if (searching) {
+        return;
+    }
+    searching = true;
+
+    loading.showLoadingMask();
+
+    $.ajax({
+        type: 'GET',
+        url: '/product/recom/maylike?gender=1,3',
+        data: {
+            page: page + 1
+        },
+        success: function(data) {
+
+            if (data === '') {
+                loading.hideLoadingMask();
+            } else {
+                searching = false;
+                $('#goods-list').append(data);
+
+                loading.hideLoadingMask();
+                page++;
+
+                $('.good-detail-text .name').each(function() {
+                    var $this = $(this),
+                        $title = $this.find('a');
+
+                    $title[0].mlellipsis(2);
+                });
+            }
+        },
+        error: function() {
+            tip.show('网络断开连接了~');
+            searching = false;
+            loading.hideLoadingMask();
+        }
+    });
+}
+
+function scrollHandler() {
+    if ($(window).scrollTop() + winH >= $(document).height() - 200) {
+        search();
+    }
+}
+
+// srcoll to load more
+$(window).scroll(function() {
+    if ($installmentOnly.length > 0) {
+        window.requestAnimationFrame(scrollHandler);
+    }
+});
+
+
+if ($installmentOnly.length > 0) {
+    $('.installment-page').css({
+        background: '#efefef'
+    });
+
+    search();
+}
\ No newline at end of file

 @import "installment";
+@import "detail";

 .installment-page {
-    background: #efefef;
 
     .open-index {
         background: #fff;
@@ -53,6 +52,7 @@
         line-height: 88px;
         border-radius: 6px;
         margin: 0 auto;
+        display: block;
     }
 
     .installment-only {
@@ -68,4 +68,195 @@
             border-bottom: 1px solid #dedee0;
         }
     }
+
+    .review-icon {
+        background: resolve("home/review-img-1.png") no-repeat;
+        background-size: contain;
+        width: 154px;
+        height:197px;
+        display: block;
+        margin: 214px auto 50px;
+    }
+
+    .success-icon {
+        background: resolve("home/review-img-2.png") no-repeat;
+        background-size: contain;
+        width: 208px;
+        height:208px;
+        display: block;
+        margin: 94px auto 60px;
+    }
+
+    .font-b {
+        font-size: 30px;
+        text-align: center;
+        color: #444;
+    }
+
+    .font-p {
+        color: #bbb;
+        line-height: 100px;
+        text-align: center;
+        margin-bottom: 60px;
+    }
+
+    .installment-price {
+        font-size: 40px;
+        text-align: center;
+        color: #444;
+        line-height: 100px;
+        margin-bottom: 60px;
+
+        span {
+            font-size: 70px;
+        }
+    }
+
+    .success {
+        padding-bottom: 70px;
+        border-bottom: 1px solid #dedee0;
+        margin-bottom: 30px;
+        background: #fff;
+    }
+
+    .error {
+        p {
+            text-align: center;
+        }
+
+        .error-txt1 {
+            font-size: 32px;
+        }
+
+        .error-txt2 {
+            color: #bbb;
+            line-height: 40px;
+            margin: 30px 0 90px;
+        }
+    }
+
+    .detail-tab {
+        background: #000;
+        height: 90px;
+        line-height: 45px;
+        font-size: 28px;
+
+        span {
+            float: left;
+            color: #b1b1b1;
+            width: 50%;
+            box-sizing: border-box;
+            margin-top: 23px;
+            text-align: center;
+        }
+
+        .on {
+            color: #fff;
+        }
+
+        a:first-child span {
+            border-right: 1px solid #fff;
+        }
+    }
+
+    .detail-bg {
+        background: resolve("me/index/header-bg.jpg") no-repeat;
+        height: auto;
+        overflow: hidden;
+        text-align: center;
+        padding: 50px 0 30px;
+
+        .detail-txt1 {
+            font-size: 26px;
+            color: #fff;
+        }
+
+        .detail-txt2 {
+            font-size: 60px;
+        }
+
+        .detail-txt3 {
+            color: #ce051d;
+            font-size: 14px;
+
+            a {
+                color: #ce051d;
+                text-decoration: underline;
+            }
+        }
+
+        .see-btn {
+            border-radius: 30px;
+            width: 190px;
+            height: 60px;
+            line-height: 60px;
+            background: #454a4c;
+            color: #fff;
+            display: block;
+            margin: 30px auto 0;
+            font-size: 26px;
+        }
+    }
+
+    .group-list {
+        background: #fff;
+        margin-top: 30px;
+        border-top: 1px solid #e1e1e1;
+        border-bottom: 1px solid #e1e1e1;
+        padding-left: 26px;
+
+        li {
+            height: 88px;
+            line-height: 88px;
+            border-bottom: 1px solid #e1e1e1;
+            font-size: 28px;
+
+            .iconfont {
+                float: right;
+                margin-right: 30px;
+                color: #e9e9e9;
+            }
+
+            .list-r-txt {
+                color: #b1b1b1;
+            }
+        }
+
+        li:last-child {
+            border-bottom: none;
+        }
+    }
+
+    .repay-area {
+        height: 345px;
+    }
+
+    .usable-area {
+        position: relative;
+        height: 510px;
+
+        .detail-txt1 {
+            margin-top: 15px;
+        }
+
+        .replay-status {
+            position: absolute;
+            right: 0;
+            top: 30px;
+            background: rgba(0, 0, 0, 0.5);
+            border-radius: 20px 0 0 20px;
+            height: 40px;
+            line-height: 40px;
+            color: #d4031a;
+            text-align: center;
+            padding: 0 30px;
+        }
+
+        .terms {
+            display: block;
+            margin: 155px auto 0;
+            color: #fff;
+            text-decoration: underline;
+        }
+    }
 }