fe / yohobuywap-node · Commits

Go to a project

Authored by 王水玲
Commit 9ffe302766470709ebce659402dac4051d09aa04 1 parent 90adf43a

分期

Inline Side-by-side
Showing 15 changed files with 509 additions and 71 deletions
@@ -3,47 +3,124 @@ @@ -3,47 +3,124 @@
3 * @author: wsl<shuiling.wang@yoho.cn> 3 * @author: wsl<shuiling.wang@yoho.cn>
4 * @date: 2016/08/01 4 * @date: 2016/08/01
5 */ 5 */
  6 +'use strict';
  7 +
6 const headerModel = require('../../../doraemon/models/header'); 8 const headerModel = require('../../../doraemon/models/header');
  9 +const installmentModel = require('../models/installment');
  10 +const _ = require('lodash');
  11 +const helpers = global.yoho.helpers;
7 12
8 const index = (req, res) => { 13 const index = (req, res) => {
9 - res.render('installment/open-index', { 14 + let uid = req.user.uid || 3236556;
  15 + let params = {};
  16 + let notOpen = false;
  17 + let isRepay = false;
  18 +
  19 + // installmentModel.getStauts(uid).then((openStatus) => {
  20 +
  21 + // });
  22 +
  23 + if (notOpen) {
  24 + params = {
  25 + bannerTop: {
  26 + data: [
  27 + {
  28 + url: '',
  29 + src: '//img11.static.yhbimg.com/yhb-img01/2016/07/29/11/0112d076e4fa0c53635ed93b118ee3f74e.jpg?imageView2/2/w/640/h/240/q/70' // eslint-disable-line
  30 + }
  31 + ]
  32 + },
  33 + notOpen: notOpen,
  34 + installmentOnly: {
  35 + title: '分期专享',
  36 + goods: [
  37 + {
  38 +
  39 + }
  40 + ]
  41 + }
  42 + };
  43 + } else {
  44 + if (isRepay) {
  45 + params = {
  46 + repay: true,
  47 + price: '455',
  48 + day: '3',
  49 + monthPrice: '500',
  50 + sumPrice: '799',
  51 + isRepay: true
  52 + };
  53 + } else {
  54 + params = {
  55 + replayStatus: '逾期',
  56 + price: '500',
  57 + sumPrice: '1000',
  58 + isUnable: true,
  59 + installmentOnly: {
  60 + title: '分期专享',
  61 + goods: [
  62 + {
  63 +
  64 + }
  65 + ]
  66 + }
  67 + };
  68 + }
  69 + }
  70 +
  71 + res.render('installment/open-index', _.assign({
10 module: 'home', 72 module: 'home',
11 page: 'installment', 73 page: 'installment',
12 title: '有货分期', 74 title: '有货分期',
13 pageHeader: headerModel.setNav({ 75 pageHeader: headerModel.setNav({
14 navTitle: '有货分期', 76 navTitle: '有货分期',
15 navBtn: false 77 navBtn: false
16 - }),  
17 - bannerTop: {  
18 - data: [  
19 - {  
20 - url: '',  
21 - src: '//img11.static.yhbimg.com/yhb-img01/2016/07/29/11/0112d076e4fa0c53635ed93b118ee3f74e.jpg?imageView2/2/w/640/h/240/q/70' // eslint-disable-line 78 + })
  79 + }, params));
  80 +};
  81 +
  82 +const review = (req, res) => {
  83 + let uid = req.user.uid || 20000032;
  84 + let params = {};
  85 +
  86 + installmentModel.getStauts(uid).then((status) => {
  87 + if (status === 1) {
  88 + params = {
  89 + review: {
  90 + url: helpers.urlFormat('/?go=1')
22 } 91 }
23 - ]  
24 - },  
25 - installmentOnly: {  
26 - title: '分期专享',  
27 - goods: [  
28 - { 92 + };
  93 + } else if (status === 2) {
  94 + params = {
  95 + success: {
  96 + price: '5000',
  97 + installmentOnly: {
  98 + title: '分期专享',
  99 + goods: [
  100 + {
29 101
  102 + }
  103 + ]
  104 + }
30 } 105 }
31 - ]  
32 - },  
33 - pageFooter: true  
34 - });  
35 -}; 106 + };
  107 + } else {
  108 + params = {
  109 + error: {
  110 + url: helpers.urlFormat('/?go=1')
  111 + }
  112 + };
  113 + }
36 114
37 -const review = (req, res) => {  
38 - res.render('installment/result', {  
39 - module: 'home',  
40 - page: 'installment',  
41 - title: '有货分期',  
42 - pageHeader: headerModel.setNav({  
43 - navTitle: '有货分期',  
44 - navBtn: false  
45 - }),  
46 - pageFooter: true 115 + res.render('installment/open-result', _.assign({
  116 + module: 'home',
  117 + page: 'installment',
  118 + title: '有货分期',
  119 + pageHeader: headerModel.setNav({
  120 + navTitle: '有货分期',
  121 + navBtn: false
  122 + })
  123 + }, params));
47 }); 124 });
48 }; 125 };
49 126
@@ -3,3 +3,59 @@ @@ -3,3 +3,59 @@
3 * @author: wsl<shuiling.wang@yoho.cn> 3 * @author: wsl<shuiling.wang@yoho.cn>
4 * @date: 2016/08/01 4 * @date: 2016/08/01
5 */ 5 */
  6 +'use strict';
  7 +
  8 +const api = global.yoho.API;
  9 +const logger = global.yoho.logger;
  10 +//const camelCase = global.yoho.camelCase;
  11 +
  12 +
  13 +// 获取分期开通状态
  14 +const getStauts = (uid) => {
  15 + return api.get('', {
  16 + method: 'user.instalment.getStatus',
  17 + uid: uid
  18 + }).then((result) => {
  19 + if (result && result.code === 200) {
  20 + return result.data;
  21 + } else {
  22 + logger.error('get installment open status return is not 200');
  23 + return '';
  24 + }
  25 + });
  26 +};
  27 +
  28 +// 获取用户可用额度信息
  29 +const getQueryCreditInfo = (uid) => {
  30 + return api.get('', {
  31 + method: 'order.queryCreditInfo',
  32 + uid: uid
  33 + }).then((result) => {
  34 + if (result && result.code === 200) {
  35 + return result.data;
  36 + } else {
  37 + logger.error('get user installment usable price info return is not 200');
  38 + return '';
  39 + }
  40 + });
  41 +};
  42 +
  43 +// 获取用户待还款金额
  44 +const getQueryAmtInfo = (uid) => {
  45 + return api.get('', {
  46 + method: 'order.queryAmtInfo',
  47 + uid: uid
  48 + }).then((result) => {
  49 + if (result && result.code === 200) {
  50 + return result.data;
  51 + } else {
  52 + logger.error('get user installment repay info return is not 200');
  53 + return '';
  54 + }
  55 + });
  56 +}
  57 +
  58 +module.exports = {
  59 + getStauts,
  60 + getQueryCreditInfo
  61 +};
@@ -12,7 +12,7 @@ const installment = require(cRoot + '/installment'); @@ -12,7 +12,7 @@ const installment = require(cRoot + '/installment');
12 12
13 const router = express.Router(); // eslint-disable-line 13 const router = express.Router(); // eslint-disable-line
14 14
15 -router.get('/installment', installment.index); // 开通分期首页  
16 -router.get('/review', installment.review); // 开通分期首页 15 +router.get('/installment/index', installment.index); // 开通分期首页
  16 +router.get('/installment/review', installment.review); // 开通结果
17 17
18 module.exports = router; 18 module.exports = router;
1 <div class="installment-page"> 1 <div class="installment-page">
2 - {{# bannerTop}}  
3 - {{> resources/banner-top}}  
4 - {{/ bannerTop}}  
5 - <div class="open-index">  
6 - <ul class="open-info">  
7 - <li>  
8 - <span class="open-icon-1"></span>  
9 - <span>先消费<br>后还款</span>  
10 - </li>  
11 - <li>  
12 - <span class="open-icon-2"></span>  
13 - <span>30天免息<br>灵活分期</span>  
14 - </li>  
15 - <li>  
16 - <span class="open-icon-3"></span>  
17 - <span>制定商品<br>立享优惠</span>  
18 - </li>  
19 - </ul> 2 + {{#if notOpen}}
  3 + {{# bannerTop}}
  4 + {{> resources/banner-top}}
  5 + {{/ bannerTop}}
  6 + <div class="open-index">
  7 + <ul class="open-info">
  8 + <li>
  9 + <span class="open-icon-1"></span>
  10 + <span>先消费<br>后还款</span>
  11 + </li>
  12 + <li>
  13 + <span class="open-icon-2"></span>
  14 + <span>30天免息<br>灵活分期</span>
  15 + </li>
  16 + <li>
  17 + <span class="open-icon-3"></span>
  18 + <span>制定商品<br>立享优惠</span>
  19 + </li>
  20 + </ul>
20 21
21 - <div class="open-btn">立即开通</div>  
22 - </div> 22 + <div class="open-btn">立即开通</div>
  23 + </div>
23 24
24 - {{# installmentOnly}}  
25 - {{> installment/installment-only}}  
26 - {{/ installmentOnly}} 25 + {{# installmentOnly}}
  26 + {{> installment/installment-only}}
  27 + {{/ installmentOnly}}
  28 + {{else}}
  29 + <div class="detail-tab">
  30 + <a href="/home/installment/repay"><span class="{{#if isRepay}}on{{/if}}">待还款金额</span></a>
  31 + <a href="/home/installment/usable"><span class="{{#if isUnable}}on{{/if}}">可用额度</span></a>
  32 + </div>
  33 + {{#if isRepay}}
  34 + <div class="repay-area detail-bg">
  35 + <p class="detail-txt1">近7日代还款</p>
  36 + <p class="detail-txt1">¥<span class="detail-txt2">{{round price}}</span></p>
  37 + <P class="detail-txt3">您有¥{{round price}}已逾期{{day}}天，点击<a href="">查看详情</a></P>
  38 + <a href="" class="see-btn">明细</a>
  39 + </div>
  40 + <ul class="group-list">
  41 + <li><a href="">本月待还金额：<div class="iconfont"><span class="list-r-txt">¥{{monthPrice}}</span> &#xe604;</div></a></li>
  42 + <li><a href="">待还总金额：<div class="iconfont"><span class="list-r-txt">¥{{sumPrice}}</span> &#xe604;</div></a></li>
  43 + <li><a href="">还款记录：<div class="iconfont">&#xe604;</div></a></li>
  44 + <li><a href="">分期订单：<div class="iconfont">&#xe604;</div></a></li>
  45 + </ul>
  46 +
  47 + <ul class="group-list">
  48 + <li><a href="">账户管理：<span class="iconfont">&#xe604;</span></a></li>
  49 + </ul>
  50 + {{/if}}
  51 +
  52 + {{#if isUnable}}
  53 + <div class="usable-area detail-bg">
  54 + {{#replayStatus}}<div class="replay-status">{{.}}</div>{{/replayStatus}}
  55 + <p class="detail-txt1">可用额度</p>
  56 + <p class="detail-txt1">¥<span class="detail-txt2">{{round price}}</span></p>
  57 + <p class="detail-txt1">总额度：¥{{round sumPrice}}</p>
  58 + <a href="" class="terms">服务条款</a>
  59 + </div>
  60 + {{# installmentOnly}}
  61 + {{> installment/installment-only}}
  62 + {{/ installmentOnly}}
  63 + {{/if}}
  64 + {{/if}}
27 </div> 65 </div>
1 <div class="installment-page"> 1 <div class="installment-page">
2 {{# review}} 2 {{# review}}
3 <i class="review-icon"></i> 3 <i class="review-icon"></i>
4 - <p class="review-txt1">审核中</p>  
5 - <p>审核结果会在5分钟内短信通知您</p>  
6 - <div class="open-btn">先去逛逛</div> 4 + <p class="font-b">审核中</p>
  5 + <p class="font-p">审核结果会在5分钟内短信通知您</p>
  6 + <a href="{{url}}" class="open-btn">先去逛逛</a>
7 {{/review}} 7 {{/review}}
8 {{#success}} 8 {{#success}}
9 <div class="success"> 9 <div class="success">
10 <i class="success-icon"></i> 10 <i class="success-icon"></i>
11 - <p>可用额度</p>  
12 - <p>¥5000.00</p> 11 + <p class="font-b">可用额度</p>
  12 + <p class="installment-price">¥<span>{{round price}}</span></p>
13 <div class="open-btn">去逛逛</div> 13 <div class="open-btn">去逛逛</div>
14 </div> 14 </div>
15 {{# installmentOnly}} 15 {{# installmentOnly}}
16 - {{< installment-only}} 16 + {{> installment/installment-only}}
17 {{/ installmentOnly}} 17 {{/ installmentOnly}}
18 {{/success}} 18 {{/success}}
19 {{#error}} 19 {{#error}}
20 <div class="error"> 20 <div class="error">
21 <i class="success-icon"></i> 21 <i class="success-icon"></i>
22 - <p>审核未通过,暂时无法授信</p>  
23 - <p>在有货更多的消费，增加信用度,<br>会大大提升审核通过率噢</p>  
24 - <div class="open-btn">去逛逛</div> 22 + <p class="error-txt1">审核未通过,暂时无法授信</p>
  23 + <p class="error-txt2">在有货更多的消费，增加信用度,<br>会大大提升审核通过率噢</p>
  24 + <a href="{{url}}" class="open-btn">去逛逛</a>
25 </div> 25 </div>
26 {{/error}} 26 {{/error}}
27 </div> 27 </div>
1 <div class="installment-only"> 1 <div class="installment-only">
2 <h2>{{title}}</h2> 2 <h2>{{title}}</h2>
3 - <div id="goods-container" class="goods-container">  
4 - <div class="container clearfix">  
5 - {{# goods}}  
6 - {{> common/goods}}  
7 - {{/ goods}}  
8 - </div> 3 + <div id="goods-list" class="goods-list clearfix">
  4 + {{# goods}}
  5 + {{> common/goods}}
  6 + {{/ goods}}
9 </div> 7 </div>
10 </div> 8 </div>
@@ -18,8 +18,11 @@ module.exports = { @@ -18,8 +18,11 @@ module.exports = {
18 // api: 'http://devapi.yoho.cn:58078/', 18 // api: 'http://devapi.yoho.cn:58078/',
19 // service: 'http://devservice.yoho.cn:58077/' 19 // service: 'http://devservice.yoho.cn:58077/'
20 20
21 - api: 'http://testapi.yoho.cn:28078/',  
22 - service: 'http://testservice.yoho.cn:28077/' 21 + //api: 'http://testapi.yoho.cn:28078/',
  22 + //service: 'http://testservice.yoho.cn:28077/'
  23 +
  24 + api: 'http://api.yoho.cn/',
  25 + service: 'http://service.yoho.cn/'
23 }, 26 },
24 subDomains: { 27 subDomains: {
25 host: '.m.yohobuy.com', 28 host: '.m.yohobuy.com',
1 /** 1 /**
2 * Created by yoho on 2016/8/1. 2 * Created by yoho on 2016/8/1.
3 */ 3 */
  4 +var $ = require('yoho-jquery'),
  5 + ellipsis = require('yoho-mlellipsis'),
  6 + tip = require('../plugin/tip'),
  7 + loading = require('../plugin/loading');
  8 +
  9 +var winH = $(window).height(),
  10 + $installmentOnly = $('.installment-only');
  11 + searching = false,
  12 + page = 0;
  13 +
  14 +ellipsis.init();
  15 +
  16 +function search() {
  17 + if (searching) {
  18 + return;
  19 + }
  20 + searching = true;
  21 +
  22 + loading.showLoadingMask();
  23 +
  24 + $.ajax({
  25 + type: 'GET',
  26 + url: '/product/recom/maylike?gender=1,3',
  27 + data: {
  28 + page: page + 1
  29 + },
  30 + success: function(data) {
  31 +
  32 + if (data === '') {
  33 + loading.hideLoadingMask();
  34 + } else {
  35 + searching = false;
  36 + $('#goods-list').append(data);
  37 +
  38 + loading.hideLoadingMask();
  39 + page++;
  40 +
  41 + $('.good-detail-text .name').each(function() {
  42 + var $this = $(this),
  43 + $title = $this.find('a');
  44 +
  45 + $title[0].mlellipsis(2);
  46 + });
  47 + }
  48 + },
  49 + error: function() {
  50 + tip.show('网络断开连接了~');
  51 + searching = false;
  52 + loading.hideLoadingMask();
  53 + }
  54 + });
  55 +}
  56 +
  57 +function scrollHandler() {
  58 + if ($(window).scrollTop() + winH >= $(document).height() - 200) {
  59 + search();
  60 + }
  61 +}
  62 +
  63 +// srcoll to load more
  64 +$(window).scroll(function() {
  65 + if ($installmentOnly.length > 0) {
  66 + window.requestAnimationFrame(scrollHandler);
  67 + }
  68 +});
  69 +
  70 +
  71 +if ($installmentOnly.length > 0) {
  72 + $('.installment-page').css({
  73 + background: '#efefef'
  74 + });
  75 +
  76 + search();
  77 +}
1 @import "installment"; 1 @import "installment";
  2 +@import "detail";
1 .installment-page { 1 .installment-page {
2 - background: #efefef;  
3 2
4 .open-index { 3 .open-index {
5 background: #fff; 4 background: #fff;
@@ -53,6 +52,7 @@ @@ -53,6 +52,7 @@
53 line-height: 88px; 52 line-height: 88px;
54 border-radius: 6px; 53 border-radius: 6px;
55 margin: 0 auto; 54 margin: 0 auto;
  55 + display: block;
56 } 56 }
57 57
58 .installment-only { 58 .installment-only {
@@ -68,4 +68,195 @@ @@ -68,4 +68,195 @@
68 border-bottom: 1px solid #dedee0; 68 border-bottom: 1px solid #dedee0;
69 } 69 }
70 } 70 }
  71 +
  72 + .review-icon {
  73 + background: resolve("home/review-img-1.png") no-repeat;
  74 + background-size: contain;
  75 + width: 154px;
  76 + height:197px;
  77 + display: block;
  78 + margin: 214px auto 50px;
  79 + }
  80 +
  81 + .success-icon {
  82 + background: resolve("home/review-img-2.png") no-repeat;
  83 + background-size: contain;
  84 + width: 208px;
  85 + height:208px;
  86 + display: block;
  87 + margin: 94px auto 60px;
  88 + }
  89 +
  90 + .font-b {
  91 + font-size: 30px;
  92 + text-align: center;
  93 + color: #444;
  94 + }
  95 +
  96 + .font-p {
  97 + color: #bbb;
  98 + line-height: 100px;
  99 + text-align: center;
  100 + margin-bottom: 60px;
  101 + }
  102 +
  103 + .installment-price {
  104 + font-size: 40px;
  105 + text-align: center;
  106 + color: #444;
  107 + line-height: 100px;
  108 + margin-bottom: 60px;
  109 +
  110 + span {
  111 + font-size: 70px;
  112 + }
  113 + }
  114 +
  115 + .success {
  116 + padding-bottom: 70px;
  117 + border-bottom: 1px solid #dedee0;
  118 + margin-bottom: 30px;
  119 + background: #fff;
  120 + }
  121 +
  122 + .error {
  123 + p {
  124 + text-align: center;
  125 + }
  126 +
  127 + .error-txt1 {
  128 + font-size: 32px;
  129 + }
  130 +
  131 + .error-txt2 {
  132 + color: #bbb;
  133 + line-height: 40px;
  134 + margin: 30px 0 90px;
  135 + }
  136 + }
  137 +
  138 + .detail-tab {
  139 + background: #000;
  140 + height: 90px;
  141 + line-height: 45px;
  142 + font-size: 28px;
  143 +
  144 + span {
  145 + float: left;
  146 + color: #b1b1b1;
  147 + width: 50%;
  148 + box-sizing: border-box;
  149 + margin-top: 23px;
  150 + text-align: center;
  151 + }
  152 +
  153 + .on {
  154 + color: #fff;
  155 + }
  156 +
  157 + a:first-child span {
  158 + border-right: 1px solid #fff;
  159 + }
  160 + }
  161 +
  162 + .detail-bg {
  163 + background: resolve("me/index/header-bg.jpg") no-repeat;
  164 + height: auto;
  165 + overflow: hidden;
  166 + text-align: center;
  167 + padding: 50px 0 30px;
  168 +
  169 + .detail-txt1 {
  170 + font-size: 26px;
  171 + color: #fff;
  172 + }
  173 +
  174 + .detail-txt2 {
  175 + font-size: 60px;
  176 + }
  177 +
  178 + .detail-txt3 {
  179 + color: #ce051d;
  180 + font-size: 14px;
  181 +
  182 + a {
  183 + color: #ce051d;
  184 + text-decoration: underline;
  185 + }
  186 + }
  187 +
  188 + .see-btn {
  189 + border-radius: 30px;
  190 + width: 190px;
  191 + height: 60px;
  192 + line-height: 60px;
  193 + background: #454a4c;
  194 + color: #fff;
  195 + display: block;
  196 + margin: 30px auto 0;
  197 + font-size: 26px;
  198 + }
  199 + }
  200 +
  201 + .group-list {
  202 + background: #fff;
  203 + margin-top: 30px;
  204 + border-top: 1px solid #e1e1e1;
  205 + border-bottom: 1px solid #e1e1e1;
  206 + padding-left: 26px;
  207 +
  208 + li {
  209 + height: 88px;
  210 + line-height: 88px;
  211 + border-bottom: 1px solid #e1e1e1;
  212 + font-size: 28px;
  213 +
  214 + .iconfont {
  215 + float: right;
  216 + margin-right: 30px;
  217 + color: #e9e9e9;
  218 + }
  219 +
  220 + .list-r-txt {
  221 + color: #b1b1b1;
  222 + }
  223 + }
  224 +
  225 + li:last-child {
  226 + border-bottom: none;
  227 + }
  228 + }
  229 +
  230 + .repay-area {
  231 + height: 345px;
  232 + }
  233 +
  234 + .usable-area {
  235 + position: relative;
  236 + height: 510px;
  237 +
  238 + .detail-txt1 {
  239 + margin-top: 15px;
  240 + }
  241 +
  242 + .replay-status {
  243 + position: absolute;
  244 + right: 0;
  245 + top: 30px;
  246 + background: rgba(0, 0, 0, 0.5);
  247 + border-radius: 20px 0 0 20px;
  248 + height: 40px;
  249 + line-height: 40px;
  250 + color: #d4031a;
  251 + text-align: center;
  252 + padding: 0 30px;
  253 + }
  254 +
  255 + .terms {
  256 + display: block;
  257 + margin: 155px auto 0;
  258 + color: #fff;
  259 + text-decoration: underline;
  260 + }
  261 + }
71 } 262 }