Authored by zhangxiaoru

我的返利样式 首页数据

'use strict';
// const shareBuyModel = require('../models/share-buy'),
// headerModel = require('../../../doraemon/models/header');
const shareBuyModel = require('../models/share-buy');
exports.index = (req, res) => {
// let uid = req.user.uid;
exports.index = (req, res, next) => {
let activityId = req.query.activity_id || 488;
// req.ctx(shareBuyModel).shareIndex(uid).then(data => {
res.render('share-buy/share-buy', {
localCss: true,
width750: true,
title: '分享购'
});
req.ctx(shareBuyModel).shareIndex(activityId).then(data => {
res.render('share-buy/share-buy', {
localCss: true,
width750: true,
title: '分享购',
userCouponBoList: data.userCouponBoList,
newsFlash: data.newsFlash
});
// }).catch(next);
}).catch(next);
};
exports.detail = (req, res) => {
... ... @@ -23,6 +24,17 @@ exports.detail = (req, res) => {
localCss: true,
width750: true,
title: '分享购',
page: 'share-buy'
page: 'share-detail'
});
};
exports.myRebeat = (req, res) => {
// let uid = req.user.uid;
res.render('share-buy/my-rebeat', {
localCss: true,
width750: true,
title: '我的返利收益',
page: 'my-rebeat'
});
};
... ...
// const config = global.yoho.config;
// module.exports = class extends global.yoho.BaseModel {
// shareIndex(uid) {
// let data = {
// content_code: 'ec9eb72eae121fcd6c1b7d1de75caff1'
// }
// let options = {
// url: 'operations/api/v5/resource/get',
// data: data,
// param: {
// cache: true,
// code: 200
// },
// api: global.yoho.ServiceAPI
// };
// return this.get(options).then(result => {
// return result;
// });
// };
// };
const api = global.yoho.API;
const _ = require('lodash');
module.exports = class extends global.yoho.BaseModel {
constructor(ctx) {
super(ctx);
}
shareIndex(activityId) {
return api.all([this._CouponInfo(activityId), this._redeatList()]).then(result => {
const indexData = {
newsFlash: []
};
if (result[0] && result[0].data && result[0].data.userCouponBoList) {
_.forEach(result[0].data.userCouponBoList, function(val) {
if (val.sortNames) {
val.couponDescribe = '限' + val.sortNames + '使用';
} else if (val.brandNames) {
val.couponDescribe = '限' + val.brandNames + '使用';
} else if (val.shareCoupon === '全场通用') {
val.couponDescribe = '任意商品使用';
}
});
indexData.userCouponBoList = result[0].data.userCouponBoList;
}
if (result[1] && result[1].data && result[1].data.detail) {
_.forEach(result[1].data.detail, function(data) {
indexData.newsFlash.push({
flashDetail: '用户' + data.nickName + ' 今日返利' + data.coinNum + '个有货币'
});
});
}
return indexData;
});
}
/**
* 首页获取优惠券信息
*/
_CouponInfo(activityId) {
return api.get('', {
method: 'app.activity.getActivityCouponInfo',
activity_id: activityId
}, {
code: 200
}).then((result) => {
return result;
});
}
/**
* 首页获取返利记录
*/
_redeatList() {
return api.get('', {
method: 'app.yohocoinrebeat.lastedlist'
}, {
code: 200
}).then((result) => {
return result;
});
}
};
... ...
... ... @@ -242,5 +242,6 @@ router.get('/couponSend', couponFloor.couponSend); // 获取优惠券
router.get('/share-buy', shareBuy.index); // 分享购首页
router.get('/share-buy/detail', shareBuy.detail); // 分享购详情页
router.get('/share-buy/my-rebeat', shareBuy.myRebeat); // 我的返利
module.exports = router;
... ...
<div class="share-buy-page yoho-page">
<div class="share-title"></div>
<div class="coupon-list">
<div class="coupon-group">
<div class="coupon-left">
<p class="coupon-money">
<i class="iconfont"></i>
<span class="money">50</span>
</p>
<p class="coupon-type">现金券</p>
</div>
<div class="coupon-right">
<span>立即参与</span>
<p class="coupon-mold">品牌卷</p>
<p class="coupon-limit">全场通用</p>
</div>
</div>
<div class="coupon-group">
<div class="coupon-left">
<p class="coupon-money">
<i class="iconfont"></i>
<span class="money">50</span>
</p>
<p class="coupon-type">现金券</p>
</div>
<div class="coupon-right">
<span>立即参与</span>
<p class="coupon-mold">品牌卷</p>
<p class="coupon-limit">全场通用</p>
</div>
</div>
</div>
<div class="news-flash">
<span class="news-title">返利快讯</span>
<ul class="news">
<li>1234545</li>
<li>qweee</li>
<li>是的是的</li>
</ul>
</div>
<div class="tab">
<a>我的返利收益</a>
<a>分享购攻略</a>
</div>
</div>
<div class="my-rebeat-page">
<ul class="gross-earnings">
<li>累计返利有货币
<p>
<span class="amount">50</span>
</p>
</li>
<li>等待返利到账的有货币
<p>
<span class="amount">50</span>
</p>
</li>
<li>返利取消
<span class="reason">(返利订单因退货等原因取消)</span>
<p>
<span class="amount">50</span>
</p>
</li>
</ul>
<ul class="earnings-detail">
<p class="title">返利明细</p>
<li>
<p class="earnings-info">
<span class="num">+10</span>
<span>121***22 <i>已发放</i></span>
</p>
<p class="order-info">
<span class="time">2012.1.1</span>
<span class="order-code">订单号:11111111</span>
</p>
</li>
<li>
<p class="earnings-info">
<span class="num">+10</span>
<span>121***22 <i class="cancel">已发放</i></span>
</p>
<p class="order-info">
<span class="time">2012.1.1</span>
<span class="order-code">订单号:11111111</span>
</p>
</li>
</ul>
<div class="hints">
<p>友情提示:返利订单确认收货后7天无退货,对应金额的有货币将
会发放至您的有货账户!
</p>
<p>有货币是什么?<a>了解详情</a></p>
</div>
</div>
... ...
... ... @@ -2,42 +2,30 @@
<div class="share-title"></div>
<div class="coupon-list">
{{# userCouponBoList}}
<div class="coupon-group">
<div class="coupon-left">
<p class="coupon-money">
<i class="iconfont"></i>
<span class="money">50</span>
<span class="money">{{couponValue}}</span>
</p>
<p class="coupon-type">现金券</p>
<p class="coupon-type">{{shareCouponType}}</p>
</div>
<div class="coupon-right">
<span>立即参与</span>
<p class="coupon-mold">品牌卷</p>
<p class="coupon-limit">全场通用</p>
</div>
</div>
<div class="coupon-group">
<div class="coupon-left">
<p class="coupon-money">
<i class="iconfont"></i>
<span class="money">50</span>
</p>
<p class="coupon-type">现金券</p>
</div>
<div class="coupon-right">
<span>立即参与</span>
<p class="coupon-mold">品牌卷</p>
<p class="coupon-limit">全场通用</p>
<p class="coupon-mold">{{shareCoupon}}</p>
<p class="coupon-limit">{{couponDescribe}}</p>
</div>
</div>
{{/ userCouponBoList}}
</div>
<div class="news-flash">
<span class="news-title">返利快讯</span>
<ul class="news">
<li>1234545</li>
<li>qweee</li>
<li>是的是的</li>
{{# newsFlash}}
<li>{{flashDetail}}</li>
{{/ newsFlash}}
</ul>
</div>
... ... @@ -47,23 +35,3 @@
</div>
</div>
{{!-- <div>{{message}}1111</div>
<div class="activity-time" data-time-s="">
<span></span>
<span></span>天
<span></span>
<span></span>小时
<span></span>
<span></span>分钟
<span></span>
<span></span>秒
</div>
<div class="gonggao">
<ul class="gun">
<li>1234545</li>
<li>qweee</li>
<li>是的是的</li>
</ul>
</div> --}}
... ...
... ... @@ -40,4 +40,10 @@
</p>
</div>
</div>
<div class="commodity">
<p class="title">
<span>优惠券可适用于以下产品</span>
<span class="more">更多商品<i class="iconfont">&#xe614;</i></span>
</p>
</div>
</div>
... ...
... ... @@ -17,8 +17,11 @@ const domains = {
// api: 'http://api-test3.yohops.com:9999/',
// service: 'http://service-test3.yohops.com:9999/',
api: 'http://api.yoho.cn/',
service: 'http://service.yoho.cn/',
// api: 'http://api.yoho.cn/',
// service: 'http://service.yoho.cn/',
api: 'http://192.168.103.59:8080/gateway',
service: 'http://192.168.103.59:8080/gateway',
global: 'http://api-global.yohobuy.com',
store: 'http://192.168.102.210:8080/portal-gateway/',
... ...
'use strict';
let $ = require('yoho-jquery');
require('activity/my-rebeat.page.css');
if ($('.my-rebeat-page').height() < $(window).height()) {
$('.my-rebeat-page').height($(window).height());
}
... ...
... ... @@ -2,18 +2,10 @@
let $ = require('yoho-jquery');
// tip = require('plugin/tip');
let $activityTime = $('.activity-time'),
endTime = $activityTime ? $activityTime.data('time-s') : '';
let $news = $('.news'),
newsLiL = $news.find('li').length;
let params = {
anHour: 3600, // 1小时=?秒
aMinute: 60, // 1分钟=?秒
aSecond: 1, // 1秒=?秒
timeDom: $activityTime, // 时间对象数组
endTime: [endTime] // 时间差数组
};
// tip = require('plugin/tip');
require('activity/share-buy.page.css');
... ... @@ -21,89 +13,22 @@ if ($('.share-buy-page').height() < $(window).height()) {
$('.share-buy-page').height($(window).height());
}
function division(time) {
time = time > 10 ? time + '' : '0' + time;
let timeArr = time.split('');
return timeArr;
}
// 倒计时
function getRTime(conf) {
let d = 0,
h = 0,
m = 0,
s = 0;
conf.timeDom.each(function(key, item) {
conf.endTime[key] = conf.endTime[key] - conf.aSecond;
if (conf.endTime[key] > conf.aSecond) {
d = Math.floor(conf.endTime[key] / conf.anHour / 24);
h = Math.floor(conf.endTime[key] / conf.anHour % 24);
m = Math.floor(conf.endTime[key] / conf.aMinute % 60);
s = Math.floor(conf.endTime[key] / conf.aSecond % 60);
// showTime += d > 0 ? d + '天' : '';
// showTime += h > 0 ? h + '小时' : '';
// showTime += m + '分钟';
// showTime += s > 0 ? s + '秒' : '';
// if (showTime.length !== '') {
// showTime = '剩' + showTime;
// }
// console.log(m, division(m));
$(item).find('span').eq(0).html(division(d)[0]);
$(item).find('span').eq(1).html(division(d)[1]);
$(item).find('span').eq(2).html(division(h)[0]);
$(item).find('span').eq(3).html(division(h)[1]);
$(item).find('span').eq(4).html(division(m)[0]);
$(item).find('span').eq(5).html(division(m)[1]);
$(item).find('span').eq(6).html(division(s)[0]);
$(item).find('span').eq(7).html(division(s)[1]);
$(item).fadeIn();
} else {
$(item).hide();
}
});
}
function Marquee() {
let diff,
newsHeight = $news.find('li:first').height() * newsLiL;
function startCountDown(p) {
$.extend(params, p || {});
setInterval(function() {
getRTime(params);
}, 1000);
}
$news.scrollTop($news.scrollTop() + 1);
$.ajax({
type: 'GET',
url: '/product/sale/discount/getTime',
data: {
id: 3919
},
success: function(data) {
if (data) {
diff = newsHeight - $news.scrollTop();
startCountDown({
endTime: [data]
});
}
if (diff <= 0) {
$news.scrollTop(Math.abs(diff));
}
});
function Marquee() {
$('.news').animate({
marginTop: '-' + $('.news').find('li:first').height() + 'px'
}, 1000, function() {
$(this).css({ marginTop: '0px' }).find('li:first').appendTo(this);
});
}
if ($('.news').find('li').length > 1) {
if (newsLiL > 1) {
$news.append('<li>' + $news.find('li:first').html() + '</li>');
setInterval(Marquee, 2000);
setInterval(Marquee, 100);
}
... ...
'use strict';
let $ = require('yoho-jquery');
let $activityTime = $('.activity-time'),
endTime = $activityTime ? $activityTime.data('time-s') : '';
let params = {
anHour: 3600, // 1小时=?秒
aMinute: 60, // 1分钟=?秒
aSecond: 1, // 1秒=?秒
timeDom: $activityTime, // 时间对象数组
endTime: [endTime] // 时间差数组
};
require('activity/share-detail.page.css');
function division(time) {
time = time > 10 ? time + '' : '0' + time;
let timeArr = time.split('');
return timeArr;
}
// 倒计时
function getRTime(conf) {
let d = 0,
h = 0,
m = 0,
s = 0;
conf.timeDom.each(function(key, item) {
conf.endTime[key] = conf.endTime[key] - conf.aSecond;
if (conf.endTime[key] > conf.aSecond) {
d = Math.floor(conf.endTime[key] / conf.anHour / 24);
h = Math.floor(conf.endTime[key] / conf.anHour % 24);
m = Math.floor(conf.endTime[key] / conf.aMinute % 60);
s = Math.floor(conf.endTime[key] / conf.aSecond % 60);
// showTime += d > 0 ? d + '天' : '';
// showTime += h > 0 ? h + '小时' : '';
// showTime += m + '分钟';
// showTime += s > 0 ? s + '秒' : '';
// if (showTime.length !== '') {
// showTime = '剩' + showTime;
// }
// console.log(m, division(m));
$(item).find('span').eq(0).html(division(d)[0]);
$(item).find('span').eq(1).html(division(d)[1]);
$(item).find('span').eq(2).html(division(h)[0]);
$(item).find('span').eq(3).html(division(h)[1]);
$(item).find('span').eq(4).html(division(m)[0]);
$(item).find('span').eq(5).html(division(m)[1]);
$(item).find('span').eq(6).html(division(s)[0]);
$(item).find('span').eq(7).html(division(s)[1]);
$(item).fadeIn();
} else {
$(item).hide();
}
});
}
function startCountDown(p) {
$.extend(params, p || {});
setInterval(function() {
getRTime(params);
}, 1000);
}
$.ajax({
type: 'GET',
url: '/product/sale/discount/getTime',
data: {
id: 3919
},
success: function(data) {
if (data) {
startCountDown({
endTime: [data]
});
}
}
});
... ...
@import "share-buy/my-rebeat";
... ...
@import "share-buy";
@import "share-buy/share-buy";
... ...
.my-rebeat-page {
background-color: #f0f0f0;
.gross-earnings {
width: 100%;
font-size: 34px;
background-color: #fff;
li {
height: 88px;
border-bottom: 1px solid #e0e0e0;
line-height: 88px;
padding: 0 30px;
p {
float: right;
}
.amount {
color: #d0021b;
margin-right: 10px;
}
.reason {
color: #b0b0b0;
font-size: 28px;
}
}
}
.earnings-detail {
background-color: #fff;
width: 100%;
font-family: PingFang;
.title {
height: 70px;
line-height: 70px;
color: #b0b0b0;
padding-left: 30px;
font-size: 24px;
border-bottom: 1px solid #e0e0e0;
background-color: #f0f0f0;
}
li {
height: 105px;
border-bottom: 1px solid #e0e0e0;
padding: 10px 30px;
}
.earnings-info {
height: 50px;
line-height: 50px;
span {
display: block;
}
i {
display: inline-block;
width: 90px;
height: 27px;
background-color: #b0b0b0;
color: #fff;
font-size: 22px;
border-radius: 10px;
line-height: 27px;
text-align: center;
}
.cancel {
background-color: #444;
}
.num {
color: #d0021b;
float: right;
text-align: right;
}
}
.order-info {
height: 45px;
line-height: 45px;
color: #b0b0b0;
font-size: 23px;
.time {
display: block;
float: right;
text-align: right;
}
}
}
.hints {
padding: 20px 30px;
font-size: 24px;
color: #b0b0b0;
a {
color: #444;
text-decoration: underline;
}
}
}
... ...
... ... @@ -3,7 +3,7 @@
height: 100%;
background-image: resolve("activity/share-buy/back.png");
background-size: 100%;
padding-top: 110px;
padding: 110px 0 145px;
.share-title {
background-image: resolve("activity/share-buy/body.png");
... ... @@ -68,7 +68,7 @@
span {
float: right;
margin: 45px 35px 0 0;
margin: 55px 35px 0 0;
display: block;
width: 130px;
height: 50px;
... ... @@ -105,6 +105,8 @@
.news {
background-color: #222;
height: 100%;
overflow: hidden;
li {
height: 70px;
... ... @@ -133,112 +135,10 @@
color: #fff;
font-size: 34px;
}
}
}
.share-detail-page {
.coupon-detail {
margin: 30px;
background-color: #d0021b;
}
.countdown {
color: #fff;
text-align: center;
margin: 5px 0 40px;
.title {
height: 70px;
line-height: 70px;
}
.activity-time {
font-size: 22px;
span {
display: inline-block;
width: 35px;
height: 45px;
font-size: 32px;
background-color: #bb0218;
}
}
}
.coupon-info {
background-image: resolve("activity/share-buy/coupon-detail.png");
background-size: 100%;
background-repeat: no-repeat;
padding: 50px 20px 0;
.info-top {
padding: 0 30px;
}
.coupon-money {
float: right;
font-size: 28px;
height: 56px;
.iconfont {
vertical-align: top;
}
span {
position: relative;
top: -17px;
font-size: 70px;
}
}
.coupon-code {
display: inline-block;
font-size: 28px;
}
.copy {
display: inline-block;
width: 90px;
height: 40px;
background-color: #444;
color: #fff;
font-size: 24px;
line-height: 40px;
text-align: center;
border-radius: 5px;
}
.share-way {
width: 100%;
color: #b0b0b0;
font-size: 24px;
display: inline-block;
.coupon-type {
float: right;
}
}
.info-bottom {
color: #b0b0b0;
font-size: 24px;
padding: 40px 30px 0;
span {
display: inline-block;
}
.validity {
height: 42px;
line-height: 42px;
}
}
.use-way {
margin-top: 45px;
padding-bottom: 20px;
font-size: 24px;
color: #fff;
a:first-child {
border-right: 1px solid #000;
box-sizing: border-box;
}
}
}
... ...
.share-detail-page {
.coupon-detail {
margin: 30px;
background-color: #d0021b;
}
.countdown {
color: #fff;
text-align: center;
margin: 5px 0 40px;
.title {
height: 70px;
line-height: 70px;
}
.activity-time {
font-size: 22px;
span {
display: inline-block;
width: 35px;
height: 45px;
font-size: 32px;
background-color: #bb0218;
}
}
}
.coupon-info {
background-image: resolve("activity/share-buy/coupon-detail.png");
background-size: 100%;
background-repeat: no-repeat;
padding: 50px 20px 0;
.info-top {
padding: 0 30px;
}
.coupon-money {
float: right;
font-size: 28px;
height: 56px;
.iconfont {
vertical-align: top;
}
span {
position: relative;
top: -17px;
font-size: 70px;
}
}
.coupon-code {
display: inline-block;
font-size: 28px;
}
.copy {
display: inline-block;
width: 90px;
height: 40px;
background-color: #444;
color: #fff;
font-size: 24px;
line-height: 40px;
text-align: center;
border-radius: 5px;
}
.share-way {
width: 100%;
color: #b0b0b0;
font-size: 24px;
display: inline-block;
.coupon-type {
float: right;
}
}
.info-bottom {
color: #b0b0b0;
font-size: 24px;
padding: 40px 30px 0;
span {
display: inline-block;
}
.validity {
height: 42px;
line-height: 42px;
}
}
.use-way {
margin-top: 45px;
padding-bottom: 20px;
font-size: 24px;
color: #fff;
}
}
.commodity {
.title {
display: block;
height: 100px;
line-height: 100px;
font-size: 28px;
text-align: center;
position: relative;
.more {
color: #b0b0b0;
font-size: 24px;
position: absolute;
top: 0;
right: 30px;
}
}
}
}
... ...