Authored by 王水玲

分期

... ... @@ -3,47 +3,124 @@
* @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', {
let uid = req.user.uid || 3236556;
let params = {};
let notOpen = false;
let isRepay = false;
// installmentModel.getStauts(uid).then((openStatus) => {
// });
if (notOpen) {
params = {
bannerTop: {
data: [
{
url: '',
src: '//img11.static.yhbimg.com/yhb-img01/2016/07/29/11/0112d076e4fa0c53635ed93b118ee3f74e.jpg?imageView2/2/w/640/h/240/q/70' // eslint-disable-line
}
]
},
notOpen: notOpen,
installmentOnly: {
title: '分期专享',
goods: [
{
}
]
}
};
} 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
}),
bannerTop: {
data: [
{
url: '',
src: '//img11.static.yhbimg.com/yhb-img01/2016/07/29/11/0112d076e4fa0c53635ed93b118ee3f74e.jpg?imageView2/2/w/640/h/240/q/70' // eslint-disable-line
})
}, params));
};
const review = (req, res) => {
let uid = req.user.uid || 20000032;
let params = {};
installmentModel.getStauts(uid).then((status) => {
if (status === 1) {
params = {
review: {
url: helpers.urlFormat('/?go=1')
}
]
},
installmentOnly: {
title: '分期专享',
goods: [
{
};
} else if (status === 2) {
params = {
success: {
price: '5000',
installmentOnly: {
title: '分期专享',
goods: [
{
}
]
}
}
]
},
pageFooter: true
});
};
};
} else {
params = {
error: {
url: helpers.urlFormat('/?go=1')
}
};
}
const review = (req, res) => {
res.render('installment/result', {
module: 'home',
page: 'installment',
title: '有货分期',
pageHeader: headerModel.setNav({
navTitle: '有货分期',
navBtn: false
}),
pageFooter: true
res.render('installment/open-result', _.assign({
module: 'home',
page: 'installment',
title: '有货分期',
pageHeader: headerModel.setNav({
navTitle: '有货分期',
navBtn: false
})
}, 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">
{{# bannerTop}}
{{> resources/banner-top}}
{{/ bannerTop}}
<div class="open-index">
<ul class="open-info">
<li>
<span class="open-icon-1"></span>
<span>先消费<br>后还款</span>
</li>
<li>
<span class="open-icon-2"></span>
<span>30天免息<br>灵活分期</span>
</li>
<li>
<span class="open-icon-3"></span>
<span>制定商品<br>立享优惠</span>
</li>
</ul>
{{#if notOpen}}
{{# bannerTop}}
{{> resources/banner-top}}
{{/ bannerTop}}
<div class="open-index">
<ul class="open-info">
<li>
<span class="open-icon-1"></span>
<span>先消费<br>后还款</span>
</li>
<li>
<span class="open-icon-2"></span>
<span>30天免息<br>灵活分期</span>
</li>
<li>
<span class="open-icon-3"></span>
<span>制定商品<br>立享优惠</span>
</li>
</ul>
<div class="open-btn">立即开通</div>
</div>
<div class="open-btn">立即开通</div>
</div>
{{# installmentOnly}}
{{> installment/installment-only}}
{{/ installmentOnly}}
{{# 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">
{{# goods}}
{{> common/goods}}
{{/ goods}}
</div>
<div id="goods-list" class="goods-list clearfix">
{{# goods}}
{{> common/goods}}
{{/ goods}}
</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;
}
}
}
... ...