有货分期

@@ -40,6 +40,27 @@ const _reviewStatus = (status) => {
     }
 };
 
+// 还款列表公共处理块
+const _repaymentList = (req, res, next, title, params) => {
+    params = _.assign({
+        uid: req.user.uid || 1
+    }, params);
+
+    installmentModel.getQueryAmtList(params).then((result) => {
+        res.render('installment/repayment-list', {
+            module: 'home',
+            page: 'repayment-list',
+            title: title,
+            data: result,
+            pageHeader: headerModel.setNav({
+                navTitle: title,
+                navBtn: false
+            })
+        });
+    }).catch(next);
+};
+
+// 开通分期首页
 const index = (req, res, next) => {
     let uid = req.user.uid || 3236556;
 
@@ -52,10 +73,11 @@ const index = (req, res, next) => {
             return installmentModel.getResources().then(data => {
                 return {
                     bannerTop: {
-                        data: [{
-                            src: '//img10.static.yhbimg.com/yhb-img01/2016/08/03/11/0131193afdd030b09af40b93eeb1c33ae5.jpg?imageView2/2/w/640/h/240/q/70',
-                            url: ''
-                        }]
+                        // data: [{
+                        //     src: '', //eslint-disable-line
+                        //     url: ''
+                        // }]
+                        data: data
                     },
                     notOpen: true,
                     installmentOnly: {
@@ -65,7 +87,7 @@ const index = (req, res, next) => {
                 };
             });
         } else if (openStatus === 2) {
-            return Promise.all([installmentModel.getQueryCreditInfo(uid), installmentModel.getQueryAmtInfo(uid)]).then((data) => {
+            return Promise.all([installmentModel.getQueryCreditInfo(uid), installmentModel.getQueryAmtInfo(uid)]).then((data) => { //eslint-disable-line
                 let params = _.assign({
                     isOverdue: false,
                     installmentOnly: {
@@ -74,13 +96,11 @@ const index = (req, res, next) => {
                     }
                 }, data[0], data[1]);
 
-                console.log(data[0]);
-
                 // status: 1 正常 2 逾期 3 不可用 4 未开通
-                if (data[0].status === 2) {
+                if (data[0].status === '2') {
                     params.replayStatus = '逾期';
                     params.isOverdue = true;
-                } else if (data[0].status === 3) {
+                } else if (data[0].status === '3') {
                     params.replayStatus = '不可用';
                 }
 
@@ -107,6 +127,7 @@ const index = (req, res, next) => {
     }).catch(next);
 };
 
+// 开通结果显示
 const review = (req, res, next) => {
     let openStatus = req.query.status || false;
     let uid = req.user.uid || 20000032;
@@ -133,25 +154,79 @@ const review = (req, res, next) => {
 
 // 逾期未还款列表
 const overdueList = (req, res, next) => {
-    let params = {
-        uid: req.user.uid || 0,
-        queryDays: -1,
-        pageNo: '1'
-    };
-    installmentModel.getQueryAmtList(params).then((result) => {
-        res.render('installment/repayment-list', {
-            repaymentList: result,
-            pageHeader: headerModel.setNav({
-                navTitle: '逾期未还金额',
-                navBtn: false
-            })
-        });
+    _repaymentList(req, res, next, '逾期未还金额', {
+        queryDays: -1
     });
 };
 
 // 7日待还款列表
 const sevenDayList = (req, res, next) => {
-    res.send('1');
+    _repaymentList(req, res, next, '近7日待还款', {
+        queryDays: 7
+    });
+};
+
+// 本月待还款列表
+const monthRepayList = (req, res, next) => {
+    _repaymentList(req, res, next, '本月待还金额', {
+        queryDays: 30
+    });
+};
+
+// 待还总金额列表
+const totalRepayList = (req, res, next) => {
+    _repaymentList(req, res, next, '待还总金额', {
+        queryDays: 0
+    });
+};
+
+// 还款记录页面渲染
+const repayRecordPage = (req, res) => {
+    res.render('installment/repay-record', {
+        module: 'home',
+        page: 'repay-record',
+        title: '还款记录',
+        pageHeader: headerModel.setNav({
+            navTitle: '还款记录',
+            navBtn: false
+        })
+    });
+};
+
+// ajax 请求还款记录
+const getRepayRecord = (req, res, next) => {
+    let params = _.assign({
+        uid: req.user.uid || 1,
+        pageNo: req.query.page || 1
+    });
+
+    installmentModel.getQueryRePayList(params).then((result) => {
+        if (result) {
+            res.render('installment/record-template', {
+                layout: false,
+                recordData: result
+            });
+        } else {
+            res.json();
+        }
+    }).catch(next);
+};
+
+// 账号管理
+const account = (req, res, next) => {
+    let uid = req.user.uid || 0;
+
+    installmentModel.getBankCards(uid).then((result) => {
+        res.render('installment/account', {
+            accountList: result,
+            title: '账号管理',
+            repaymentList: result,
+            pageHeader: headerModel.setNav({
+                navTitle: '账号管理',
+                navBtn: false
+            })
+        });
+    }).catch(next);
 };
 
 const startingService = (req, res) => {
@@ -212,11 +287,16 @@ module.exports = {
     index,
     review,
     overdueList,
-    sevenDayList
+    sevenDayList,
+    monthRepayList,
+    totalRepayList,
+    repayRecordPage,
+    getRepayRecord,
     startingService,
     activateService,
     verifyCode,
     getBankInfo,
     order,
-    orderDetail
+    orderDetail,
+    account
 };

@@ -14,12 +14,140 @@ const logger = global.yoho.logger;
 
 // const camelCase = global.yoho.camelCase;
 
+// 处理还款列表数据
+const _processAmtList = (list, queryDays) => {
+    let overduecount = 0;
+    let formartData = {
+        currAmtCount: 0,
+        currFeeCount: 0
+    };
+
+    list = list || [];
+
+    if (list.length > 0) {
+        _.forEach(list, (data, key) => {
+            // 第一条选中
+            if (key === 0) {
+                data.isChecked = true;
+            }
+
+            // 组装分期的显示格式
+            if (data.terms === 1) {
+                data.stage = data.terms;
+            } else {
+                data.stage = data.currTerm + '/' + data.terms;
+            }
+
+            // 判断是否逾期
+            if (data.unExpireDays < 0) {
+                data.isOverdue = true;
+                overduecount++;
+            }
+
+            data.day = Math.abs(data.unExpireDays);
+        });
+
+
+        if (overduecount === 0) {
+            if (queryDays === 0) { // 待还总金额
+                list[0].isChecked = true;
+                formartData.currAmtCount = (+list[0].currAmt);
+                formartData.currFeeCount = (+list[0].currFee);
+
+                if (list.length === 1) {
+                    formartData.isAllChecked = true;
+                }
+            } else if (queryDays === 7 || queryDays === 30) { // 近7日待还金额和本月待还金额
+                _.forEach(list, (data) => {
+                    data.isChecked = true;
+                    formartData.currAmtCount += (+data.currAmt);
+                    formartData.currFeeCount += (+data.currFee);
+                });
+
+                formartData.isAllChecked = true;
+            }
+        } else { // 只要有逾期的记录，走这里
+            _.forEach(list, (data) => {
+                if (data.unExpireDays < 0) {
+                    data.isChecked = true;
+                    formartData.currAmtCount += (+data.currAmt);
+                    formartData.currFeeCount += (+data.currFee);
+                }
+            });
+
+            if (overduecount === list.length) {
+                formartData.isAllChecked = true;
+            }
+        }
+
+        // 逾期未还款金额
+        if (queryDays === -1) {
+            formartData.isAllChecked = true;
+        }
+
+        if (formartData.currFeeCount > 0) {
+            formartData.isCurrFee = true;
+        } else {
+            formartData.isCurrFee = false;
+        }
+
+        return _.assign({
+            repaymentList: list
+        }, formartData);
+    } else {
+        return {
+            isNoResult: true
+        };
+    }
+};
+
+// 处理还款记录数据
+const _processRepayList = (list) => {
+    list = list || [];
+
+    if (list.length > 0) {
+        _.forEach(list, (data) => {
+            // 组装分期的显示格式
+            if (data.terms === 1) {
+                data.stage = data.terms;
+            } else {
+                data.stage = data.termNo + '/' + data.terms;
+            }
+        });
+
+        return list;
+    } else {
+        return '';
+    }
+};
+
+// 银行卡号处理
+const _processBankCards = (list) => {
+    list = list || [];
+
+    _.forEach(list, (data) => {
+        let newCardNo = data.cardNo.split('');
+        let cardNo = newCardNo.length;
+
+        data.cardNo = '';
+
+        for (let i = 1; i < cardNo; i++) {
+            if (i < (cardNo - 4)) {
+                data.cardNo += '*';
+            } else {
+                data.cardNo += newCardNo[i - 1];
+            }
+        }
+    });
+
+    return list;
+};
+
 /**
  * 获取资源位数据
- * @param  {[string]} page
  * @return {[array]}
  */
-const getResources = (page, channel) => {
+const getResources = () => {
     return serviceAPI.get('operations/api/v5/resource/get', {
         content_code: '0876085ff46bed27f1a1eb6ee8b68987'
     }, {
@@ -62,21 +190,21 @@ const getStauts = (uid) => {
 // 获取用户可用额度信息
 const getQueryCreditInfo = (uid) => {
     return api.get('', {
-        method: 'app.order.queryCreditInfo',
+        method: 'user.instalment.queryCreditLimit',
         uid: uid
     }).then((result) => {
         result = {
             alg: 'SALT_MD5',
             code: 200,
             data: {
-                initCredit: '8000.00',
-                currCredit: '5000.00',
-                status: 2
+                initCreditLimit: '5000',
+                currCreditLimit: '2000',
+                status: '2',
+                maxOverdueDay: '5'
             },
             md5: 'c1d725306fb09dcbf504776d276521cb',
             message: 'ok'
         };
-        console.log('11');
         if (result && result.code === 200) {
             return result.data;
         } else {
@@ -92,18 +220,20 @@ const getQueryAmtInfo = (uid) => {
         method: 'app.order.queryAmtInfo',
         uid: uid
     }).then((result) => {
-        result = {
-            alg: 'SALT_MD5',
-            code: 200,
-            data: {
-                totalAmt: '2000.00',
-                monthAmt: '800.00',
-                _7daysAmt: '400.00',
-                overAmt: '400.00'
-            },
-            md5: 'c1d725306fb09dcbf504776d276521cb',
-            message: 'ok'
-        };
+        // result = {
+        //     alg: 'SALT_MD5',
+        //     code: 200,
+        //     data: {
+        //         totalAmt: '2000.00',
+        //         monthAmt: '800.00',
+        //         _7daysAmt: '400.00',
+        //         overAmt: '400.00'
+        //     },
+        //     md5: 'c1d725306fb09dcbf504776d276521cb',
+        //     message: 'ok'
+        // };
+
+        console.log(result);
         if (result && result.code === 200) {
             result.data.dayAmt = result.data._7daysAmt;
             return result.data;
@@ -114,28 +244,6 @@ const getQueryAmtInfo = (uid) => {
     });
 };
 
-// 处理还款列表数据
-const _processAmtList = (list) => {
-    let formatData = [];
-
-    list = list || [];
-
-    _.forEach(list, (data) => {
-        if (data.terms === 1) {
-            data.stage = data.terms;
-        } else {
-            data.stage = data.currTerm + '/' + data.terms;
-        }
-
-        if (data.unExpireDays < 0) {
-            data.isOverdue = true;
-        }
-
-        data.day = data.unExpireDays;
-    });
-
-    return list;
-};
 
 // 获取用户待还列表信息 queryDays -1:逾期待还；0:全部待还；7:七日待还；30:本月待还
 const getQueryAmtList = (params) => {
@@ -160,7 +268,7 @@ const getQueryAmtList = (params) => {
                         currNoFeeAmt: '840.00',
                         currFee: '5.00'
                     }, {
-                        billNo: 'x00001',
+                        billNo: 'x00002',
                         terms: 3,
                         currTerm: 2,
                         unExpireDays: 10,
@@ -168,6 +276,15 @@ const getQueryAmtList = (params) => {
                         currAmt: '840.00',
                         currNoFeeAmt: '840.00',
                         currFee: '0.00'
+                    }, {
+                        billNo: 'x00003',
+                        terms: 3,
+                        currTerm: 1,
+                        unExpireDays: -3,
+                        billInfo: '三叶草运动休闲鞋',
+                        currAmt: '845.00',
+                        currNoFeeAmt: '840.00',
+                        currFee: '5.00'
                     }
                 ],
                 pageNo: 1,
@@ -178,7 +295,7 @@ const getQueryAmtList = (params) => {
             message: 'ok'
         };
         if (result && result.code === 200) {
-            return _processAmtList(result.data.amtList);
+            return _processAmtList(result.data.amtList, params.queryDays);
         } else {
             logger.error('get queryAmtList data return code is not 200');
             return '';
@@ -367,6 +484,95 @@ const getBankInfo = (cardNo) => {
     }, cardNo);
 };
 
+// 还款记录查询
+const getQueryRePayList = (params) => {
+    return api.get('', _.assign({
+        method: 'app.order.queryRePayList',
+        pageSize: '10'
+    }, params), {
+        cache: true
+    }).then((result) => {
+        // result = {
+        //     alg: "SALT_MD5",
+        //     code: 200,
+        //     data: {
+        //         rePayList: [
+        //             {
+        //                 billNo: "00001",
+        //                 terms: 3,
+        //                 termNo: 1,
+        //                 time: "2016.06.01",
+        //                 status: 1,
+        //                 amt: "200.00",
+        //                 billInfo: "三叶草运动休闲鞋"
+        //             },
+        //             {
+        //                 billNo: "00001",
+        //                 terms: 3,
+        //                 termNo: 1,
+        //                 time: "2016.06.01",
+        //                 status: 1,
+        //                 amt: "200.00",
+        //                 billInfo: "三叶草运动休闲鞋"
+        //             },
+        //             {
+        //                 billNo: "00001",
+        //                 terms: 3,
+        //                 termNo: 1,
+        //                 time: "2016.06.01",
+        //                 status: 1,
+        //                 amt: "200.00",
+        //                 billInfo: "三叶草运动休闲鞋"
+        //             },
+        //         ],
+        //         pageNo: 1,
+        //         pageTotal: 1,
+        //         total: 3
+        //     },
+        //     md5: "c1d725306fb09dcbf504776d276521cb",
+        //     message: "ok"
+        // };
+        if (result && result.code === 200) {
+            return _processRepayList(result.data.rePayList);
+        } else {
+            logger.error('get queryRePayList data return code is not 200');
+            return '';
+        }
+    });
+};
+
+// 账号管理
+const getBankCards = (uid) => {
+    return api.get('', {
+        method: 'user.instalment.getBankCards',
+        uid: uid
+    }, {
+        cache: true
+    }).then((result) => {
+        result = {
+            alg: 'SALT_MD5',
+            code: 200,
+            data: [
+                {
+                    userName: '张三',
+                    cardNo: '25202200000',
+                    bankCode: 'ABC',
+                    bankName: '农业银行',
+                    mobile: '18021200000'
+                }
+            ],
+            md5: '6d729d4b35f10fc73531210bd7ecff91',
+            message: 'success'
+        };
+        if (result && result.code === 200) {
+            return _processBankCards(result.data);
+        } else {
+            logger.error('get getBankCards data return code is not 200');
+            return '';
+        }
+    });
+};
+
 module.exports = {
     getStauts,
     getQueryCreditInfo,
@@ -376,5 +582,7 @@ module.exports = {
     activateService,
     getResources,
     getQueryAmtList,
-    getBankInfo
+    getBankInfo,
+    getQueryRePayList,
+    getBankCards
 };

@@ -19,6 +19,11 @@ router.get('/installment/starting-service', installment.startingService); // 分
 router.get('/installment/starting-service/verify-code', installment.verifyCode);
 router.get('/installment/overdue', installment.overdueList); // 逾期未还款列表
 router.get('/installment/7daylist', installment.sevenDayList); // 7日待还款列表
+router.get('/installment/monthRepayList', installment.monthRepayList); // 本月待还款列表
+router.get('/installment/totalRepayList', installment.totalRepayList); // 待还总金额列表
+router.get('/installment/repayRecord', installment.repayRecordPage); // 还款记录
+router.get('/installment/getRepayRecord', installment.getRepayRecord); // ajax请求还款记录
+router.get('/installment/account', installment.account); // 账户管理
 router.get('/installment/bank-info', installment.getBankInfo);
 router.post('/installment/activate-service', installment.activateService);
 router.get('/installment/order', installment.order);

+<div class="account-page">
+    <ul class="account-list">
+        {{#accountList}}
+            <li>我的银行卡：<div class="list-right">{{cardNo}}</div></li>
+        {{/accountList}}
+    </ul>
+</div>
\ No newline at end of file

@@ -26,6 +26,7 @@
             {{> installment/installment-only}}
         {{/ installmentOnly}}
     {{else}}
+    {{log this}}
         <div class="detail-tab">
             <span class="on is-repay">待还款金额</span>
             <span class="is-usable">可用额度</span>
@@ -35,27 +36,27 @@
                 <p class="detail-txt1">近7日代还款</p>
                 <p class="detail-txt1">¥<span class="detail-txt2">{{round dayAmt}}</span></p>
                 {{#if isOverdue}}
-                <p class="detail-txt3">您有¥{{round dayAmt}}已逾期，点击<a href="/home/installment/overdue">查看详情</a></p>
+                <p class="detail-txt3">您有¥{{round overAmt}}已逾期，点击<a href="/home/installment/overdue">查看详情</a></p>
                 {{/if}}
                 <a href="/home/installment/7daylist" class="see-btn">明细</a>
             </div>
             <ul class="group-list">
-                <li><a href="">本月待还金额：<div class="list-right"><span class="list-r-txt">¥{{monthAmt}}</span><span class="iconfont"> &#xe604;</span></div></a></li>
-                <li><a href="">待还总金额：<div class="list-right"><span class="list-r-txt">¥{{totalAmt}}</span><span class="iconfont"> &#xe604;</span></div></a></li>
-                <li><a href="">还款记录：<div class="list-right iconfont">&#xe604;</div></a></li>
+                <li><a href="/home/installment/monthRepayList">本月待还金额：<div class="list-right"><span class="list-r-txt">¥{{monthAmt}}</span><span class="iconfont"> &#xe604;</span></div></a></li>
+                <li><a href="/home/installment/totalRepayList">待还总金额：<div class="list-right"><span class="list-r-txt">¥{{totalAmt}}</span><span class="iconfont"> &#xe604;</span></div></a></li>
+                <li><a href="/home/installment/repayRecord">还款记录：<div class="list-right iconfont">&#xe604;</div></a></li>
                 <li><a href="">分期订单：<div class="list-right iconfont">&#xe604;</div></a></li>
             </ul>
 
             <ul class="group-list">
-                <li><a href="">账户管理：<span class="list-right">&#xe604;</span></a></li>
+                <li><a href="/home/installment/account">账户管理：<span class="list-right iconfont">&#xe604;</span></a></li>
             </ul>
         </div>
         <div class="usable installment-cont">
             <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 currCredit}}</span></p>
-                <p class="detail-txt1">总额度：¥{{round initCredit}}</p>
+                <p class="detail-txt1">¥<span class="detail-txt2">{{round currCreditLimit}}</span></p>
+                <p class="detail-txt1">总额度：¥{{round initCreditLimit}}</p>
                 <a href="" class="terms">服务条款</a>
             </div>
             {{# installmentOnly}}

+{{#recordData}}
+    <li>
+        <div class="repay-time">{{time}}</div>
+        <div class="record-cont">
+            <p>{{round amt}}</p>
+            <p>【全{{stage}}期】{{billInfo}}</p>
+        </div>
+        <div class="record-right">已还清</div>
+    </li>
+{{/recordData}}
\ No newline at end of file

+<div class="repayment-list-page">
+    <ul class="record-list"></ul>
+    <div class="no-result" style="display: none;">
+        <i class="result-icon"></i>
+        <p class="txt">暂无待还款记录</p>
+        <a href="/product/new" class="guang-btn">去逛逛</a>
+    </div>
+</div>
\ No newline at end of file

 <div class="repayment-list-page">
-    <ul class="repay-list">
-    {{#each repaymentList}}
-        <li>
-            <span></span>
-            <div class="cont">
-                <p>¥{{round currNoFeeAmt}}</p>
-                <p>【全{{stage}}期】{{billInfo}}</p>
-            </div>
-            <div class="list-right">
-                {{#if isOverdue}}
-                    <div class="color-r">逾期{{day}}天<span class="iconfont">&#xe639;</span></div>
-                {{else}}
-                    剩余{{day}}天
-                {{/if}}
-                <span class="iconfont">&#xe604;</span>
-            </div>
-        </li>
-    {{/each}}
-    </ul>
+    {{#if isNoResult}}
+        <div class="no-result">
+            <i class="result-icon"></i>
+            <p class="txt">暂无待还款订单</p>
+            <a href="/product/new" class="guang-btn">去逛逛</a>
+        </div>
+    {{else}}
+        {{#data}}
+            <ul class="repay-list">
+                {{#each repaymentList}}
+                    <li data-currfee="{{currFee}}" data-curramt="{{currAmt}}">
+                        <input id="list-{{billNo}}" type="checkbox" class="installment-check-btn" {{#if isChecked}}checked{{/if}}/>
+                        <label for="list-{{billNo}}">
+                            <div class="cont">
+                                <p>¥{{round currNoFeeAmt}}</p>
+                                <p>【全{{stage}}期】{{billInfo}}</p>
+                            </div>
+                        </label>
+                        <div class="list-right">
+                            <a href="{{url}}">
+                                {{#if isOverdue}}
+                                    <div class="color-r">逾期{{day}}天<span class="iconfont notice">&#xe639;</span></div>
+                                {{else}}
+                                    剩余{{day}}天
+                                {{/if}}
+                                <span class="iconfont">&#xe604;</span>
+                            </a>
+                        </div>
+                    </li>
+                {{/each}}
+            </ul>
+            {{> installment/repayment-bottom}}
+        {{/data}}
+    {{/if}}
 </div>

@@ -48,7 +48,7 @@
     </div>
 
     <div class="agreements">
-      <input id="accept-agreements" name="agreements" type="checkbox"/>
+      <input id="accept-agreements" name="agreements" type="checkbox" class="installment-check-btn" />
       <label for="accept-agreements">
         <span>免费开通,详情见 <a href="#">《有货分期服务协议》&《第三方支付协议》</a></span>
       </label>

+<div class="installment-overdue-notice">
+    <div class="mask-bg"></div>
+    <div class="notice-area">
+        <div class="notice-cont">
+            <h2>逾期服务费信息</h2>
+            <p>如果您到期未还款：需要加收逾期利息费和延迟还款费</p>
+            <p>逾期利息费：待还本金 *利息率*延迟还款天数，利息率=0.025%/天</p>
+            <p>延迟还款费：逾期3天内还款免收延迟还款服务费，逾期4天，从第一天逾期开始算，500元之内，加收1元/天延迟还款服务费。每500元增加1元/天。</p>
+        </div>
+        <div class="think-ok">我知道了</div>
+    </div>
+</div>
+
+<div class="repayment-bottom">
+    <input id="repayment-total" type="checkbox" class="installment-check-btn" {{#if isAllChecked}}checked{{/if}}/>
+    <label for="repayment-total">
+        <p class="repay-price">待支付：<span>¥<span class="curr-amt">{{round currAmtCount}}</span></span></p>
+        {{#if isCurrFee}}<p class="serve-price">含服务费¥<span class="curr-fee">{{round currFeeCount}}</span></p>{{/if}}
+    </label>
+    <input type="button" value="立即还款" class="repayment-btn">
+</div>

@@ -17,9 +17,11 @@ module.exports = {
     domains: {
         // api: 'http://devapi.yoho.cn:58078/',
         // service: 'http://devservice.yoho.cn:58077/'
-        api: 'http://api.yoho.cn/',
+        api: 'http://172.16.6.235:8484',
+
         // service: 'http://service.yoho.cn/'
         service: 'http://testservice.yoho.cn:28077'
+
         // api: 'http://testapi.yoho.cn:28078/',
     },
     subDomains: {

+/**
+ * 还款记录
+ * @author: wsl<shuiling.wang@yoho.cn>
+ * @date: 2016/08/04
+ */
+
+var $ = require('yoho-jquery'),
+    tip = require('../plugin/tip'),
+    loading = require('../plugin/loading');
+
+var stopLoading = false,
+    winH = $(window).height(),
+    previousScrollTop = 0,
+    page = 0,
+    $recordList = $('.record-list');
+
+function getListData(pageData) {
+    if (stopLoading) {
+        return;
+    }
+    stopLoading = true;
+    pageData++;
+
+    page = pageData;
+
+    loading.showLoadingMask();
+    $.ajax({
+        type: 'GET',
+        url: '/home/installment/getRepayRecord',
+        data: {
+            page: pageData
+        },
+        dataType: 'html',
+        success: function(data) {
+            stopLoading = false;
+
+            if (data === '') {
+                stopLoading = true;
+                if (pageData === 1) {
+                    $('.no-result').show();
+                }
+            } else {
+                $('.no-result').hide();
+                $recordList.append(data);
+            }
+
+            loading.hideLoadingMask();
+        },
+        error: function() {
+            tip.show('网络断开连接了~');
+            stopLoading = false;
+            loading.hideLoadingMask();
+        }
+    });
+}
+
+function scrollHandler() {
+    var curScrollTop = $(window).scrollTop();
+
+    // 当scroll到1/4$repayList高度后继续请求下一页数据
+    if (curScrollTop > previousScrollTop &&
+        (curScrollTop + winH >
+        $(document).height() - 0.25 * $recordList.height() - 50)) {
+        getListData(page);
+    }
+
+    previousScrollTop = curScrollTop;
+}
+
+$(window).scroll(function() {
+    window.requestAnimationFrame(scrollHandler);
+});
+
+getListData(0);

+/**
+ * 分期还款
+ * @author: wsl<shuiling.wang@yoho.cn>
+ * @date: 2016/08/04
+ */
+
+var $ = require('yoho-jquery');
+
+var $notice = $('.installment-overdue-notice');
+
+$('.repay-list .notice').on('click', function() {
+    $notice.show();
+
+    return false;
+});
+
+$('.think-ok, .mask-bg').on('click', function() {
+    $notice.hide();
+});
+
+$('.repay-list .cont').on('click', function() {
+    var $currAmt = $('.repayment-bottom').find('.curr-amt');
+    var $currFee = $('.repayment-bottom').find('.curr-fee');
+    var $input = $(this).parent().prev();
+    var currAmt = +$currAmt.html();
+    var currFee = +$currFee.html();
+    var amt = +$(this).parents('li').attr('data-curramt');
+    var fee = +$(this).parents('li').attr('data-currfee');
+    var count = 1;
+
+    if ($input.is(':checked')) {
+        $currAmt.html(currAmt - amt);
+        $currFee.html(currFee - fee);
+    } else {
+        $currAmt.html(amt + currAmt);
+        $currFee.html(fee + currFee);
+    }
+
+    $('.repay-list input').each(function() {
+        if ($(this).is(':checked')) {
+            count++;
+        }
+    });
+
+    if (count === $('.repay-list li').length) {
+        $('#repayment-total').click();
+    } else {
+        $('#repayment-total').click();
+    }
+});

@@ -2,21 +2,277 @@
     .repay-list li {
         height: 120px;
         background: #fff;
+        border-bottom: 1px solid #e0e0e0;
 
         .cont {
             width: 370px;
             overflow: hidden;
             height: 120px;
             float: left;
+            margin-top: 20px;
+
+            p {
+                line-height: 40px;
+                font-size: 26px;
+            }
+
+            p:first-child {
+                margin-left: 10px;
+            }
+
+            p:last-child {
+                width: 100%;
+                height: 40px;
+                text-overflow: ellipsis;
+                white-space: nowrap;
+                overflow: hidden;
+            }
         }
 
         .list-right {
             float: right;
             color: #b0b0b0;
+            line-height: 120px;
+            margin-right: 30px;
+            font-size: 24px;
         }
 
         .color-r {
             color: #d0021b;
+            float: left;
+
+            .iconfont {
+                color: #d0021b;
+                font-size: 24px;
+            }
+        }
+
+        .iconfont {
+            color: #e0e0e0;
+            margin-left: 5px;
+        }
+
+        label {
+            margin-left: 60px;
+            width: 390px;
+            height: 120px;
+            float: left;
+        }
+    }
+
+    .record-list li {
+        height: 120px;
+        background: #fff;
+        border-bottom: 1px solid #e0e0e0;
+
+        .repay-time {
+            width: 200px;
+            line-height: 120px;
+            float: left;
+            padding-left: 30px;
+            box-sizing: border-box;
+        }
+
+        .record-cont {
+            width: 265px;
+            height: 120px;
+            float: left;
+            overflow: hidden;
+
+            p {
+                line-height: 40px;
+                font-size: 26px;
+
+            }
+
+            p:first-child {
+                margin: 20px 0 0 10px;
+            }
+
+            p:last-child {
+                width: 100%;
+                height: 40px;
+                text-overflow: ellipsis;
+                white-space: nowrap;
+                overflow: hidden;
+            }
+        }
+
+        .record-right {
+            float: right;
+            color: #ccc;
+            padding-right: 30px;
+            line-height: 120px;
+        }
+    }
+
+    .installment-check-btn {
+        & + label {
+            &:before {
+                margin-top: 40px;
+            }
+        }
+    }
+
+    .no-result {
+        .result-icon {
+            width: 153px;
+            height: 197px;
+            background: resolve("home/review-img-3.png") no-repeat;
+            background-size: contain;
+            margin: 198px auto 36px;
+            display: block;
+        }
+
+        .txt {
+            text-align: center;
+            color: #444;
+        }
+
+        .guang-btn {
+            width: 472px;
+            height: 88px;
+            background: #444;
+            color: #fff;
+            text-align: center;
+            line-height: 88px;
+            border-radius: 6px;
+            margin: 110px auto 0;
+            display: block;
+        }
+    }
+}
+
+.installment-overdue-notice {
+    position: fixed;
+    left: 0;
+    right: 0;
+    top: 0;
+    bottom: 0;
+    display: none;
+    z-index: 9;
+
+    .mask-bg {
+        background: rgba(0, 0, 0, 0.4);
+        position: absolute;
+        top: 0;
+        left: 0;
+        right: 0;
+        bottom: 0;
+    }
+
+    .notice-area {
+        width: 540px;
+        background: #fafafa;
+        border-radius: 10px;
+        transform: translate(-50%, -50%);
+        position: absolute;
+        top: 50%;
+        left: 50%;
+
+        .notice-cont {
+            padding: 40px;
+        }
+
+        h2 {
+            font-weight: bold;
+            text-align: center;
+            font-size: 30px;
+            color: #444;
+            padding-bottom: 4px;
+        }
+
+        p {
+            font-size: 24px;
+            color: #444;
+            line-height: 38px;
+        }
+
+        .think-ok {
+            width: 100%;
+            border-top: 1px solid #c5c5c5;
+            height: 90px;
+            line-height: 90px;
+            box-sizing: border-box;
+            text-align: center;
+            color: #d1021c;
+            font-size: 34px;
+        }
+    }
+}
+
+.repayment-bottom {
+    position: fixed;
+    bottom: 0;
+    left: 0;
+    right: 0;
+    background: #fff;
+    height: 115px;
+    border-top: 1px solid #e0e0e0;
+
+    label {
+        margin-left: 60px;
+        width: 320px;
+        height: 120px;
+        float: left;
+    }
+
+    .installment-check-btn {
+        & + label {
+            &:before {
+                margin-top: 40px;
+            }
+        }
+    }
+
+    .repayment-btn {
+        width: 170px;
+        height: 88px;
+        background: #d2000d;
+        color: #fff;
+        text-align: center;
+        line-height: 88px;
+        font-size: 26px;
+        margin: 13px 30px 0 0;
+        border: none;
+        float: right;
+        border-radius: 8px;
+    }
+
+    .repay-price {
+        font-size: 32px;
+        line-height: 40px;
+        margin-top: 20px;
+
+        span {
+            color: #d2000d;
+        }
+    }
+
+    .serve-price {
+        color: #b0b0b0;
+        line-height: 40px;
+        font-size: 26px;
+    }
+}
+
+.account-page {
+    .account-list {
+        height: 120px;
+        background: #fff;
+        border-bottom: 1px solid #e0e0e0;
+
+        li {
+            color: #444;
+            font-size: 26px;
+            line-height: 120px;
+            padding: 0 30px;
+            box-sizing: border-box;
+
+            .list-right {
+                float: right;
+                color: #b1b1b1;
+            }
         }
     }
-}
\ No newline at end of file
+}

 .installment-starting-service-page {
     background: #fff;
 
-    input[type=checkbox] {
-        display: none;
-
-        & + label {
-            &:before {
-                position: absolute;
-                content: "";
-                display: inline-block;
-                width: 32px;
-                height: 32px;
-                font-size: 27px;
-                background: url("/img/home/circle-check-off.png");
-                background-size: cover;
-                margin-left: -40px;
-            }
-        }
-
-        &:checked {
-            & + label:before {
-                background: url("/img/home/circle-check-on.png");
-                background-size: cover;
-            }
-        }
-    }
-
     .exclamation {
         background-color: #ff7f7f;
         color: white;
@@ -117,3 +92,29 @@
         bottom: 0;
     }
 }
+
+
+.installment-check-btn {
+    display: none;
+
+    & + label {
+        &:before {
+            position: absolute;
+            content: "";
+            display: inline-block;
+            width: 32px;
+            height: 32px;
+            font-size: 27px;
+            background: url("/img/home/circle-check-off.png");
+            background-size: cover;
+            margin-left: -40px;
+        }
+    }
+
+    &:checked {
+        & + label:before {
+            background: url("/img/home/circle-check-on.png");
+            background-size: cover;
+        }
+    }
+}
\ No newline at end of file