fe / yohobuywap-node · Commits

Go to a project

Authored by 郝肖肖
Commit e40ff0895202103488f612ca70ac69f155d51419 2 parents 82e8cca4 a0dd5bfa

Merge branch 'feature/growthdetail' of git.yoho.cn:fe/yohobuywap-node into feature/growthdetail

Inline Side-by-side
Showing 14 changed files with 232 additions and 131 deletions
const co = require('bluebird').coroutine;
const GradeModel = require('../models/grade-model');
const headerModel = require('../../../doraemon/models/header'); // 头部model
class Grade {
detail(req, res) {
/**
* 成长值明细页面
*/
page(req, res) {
res.render('grade/detail', {
module: 'activity',
page: 'grade-detail',
... ... @@ -9,6 +14,31 @@ class Grade {
});
}
/**
* 折线图数据
*/
graph(req, res, next) {
co(function* () {
let graphData = yield req.ctx(GradeModel).graph();
res.json(graphData);
})().catch(next);
}
/**
* 月度数据视图
*/
monthDetail(req, res, next) {
co(function* () {
let monthDetailData = yield req.ctx(GradeModel).monthDetail();
res.render('grade/month-detail', {
layout: false,
list: monthDetailData
});
})().catch(next);
}
droit(req, res) {
res.render('grade/droit', {
module: 'activity',
... ...
class GradeModel extends global.yoho.BaseModel {
constructor(ctx) {
super(ctx);
}
/**
* 折线的数据
*/
graph() {
return this.get({
data: {
method: ''
}
});
}
/**
* 月度详细数据
*/
monthDetail() {
return this.get({
data: {
method: ''
}
});
}
}
module.exports = GradeModel;
... ...
... ... @@ -314,7 +314,9 @@ router.get('/coupon-list', auth, couponList.index); // 优惠券领取页
router.get('/coupon-list/receive', couponList.receive); // 个人优惠券领取
router.get('/coupon-list/receiveAll', couponList.receiveAll); // 全场优惠券领取
router.get('/grade/detail', auth, grade.detail); // 成长值明细
router.get('/grade/detail', auth, grade.page); // 成长值明细页面
router.get('/grade/graph', auth, grade.graph); // 成长值明细图表数据
router.get('/grade/monthDetail', auth, grade.monthDetail); // 成长值明细图表数据
router.get('/grade/droit', auth, grade.droit); // 权益说明
module.exports = router;
... ...
... ... @@ -6,30 +6,13 @@
<hr class="box-entry-line">
<div class="grade-bill-box">
<div class="grade-level">
您当前的会员等级为：银卡会员
<span>您当前的会员等级为：银卡会员</span>
</div>
<div class="grade-bill-title">
成长值来源
<span>成长值来源</span>
</div>
<div class="grade-bill-list">
<div class="grade-bill">
<div class="grade-bill-left">
<div class="order">订单22423498</div>
<div class="time">2018-02-22 18:32:32</div>
</div>
<div class="grade-bill-right">
<span>+80</span>
</div>
</div>
<div class="grade-bill">
<div class="grade-bill-left">
<div class="order">订单22423498</div>
<div class="time">2018-02-22 18:32:32</div>
</div>
<div class="grade-bill-right">
<span>+80</span>
</div>
</div>
<div class="grade-bill-list" id="gradeBillList">
</div>
</div>
</div>
... ...
<div class="grade-bill">
<div class="grade-bill-left">
<div class="order">订单22423498</div>
<div class="time">2018-02-22 18:32:32</div>
</div>
<div class="grade-bill-right">
<span>+80</span>
</div>
</div>
... ...
import 'activity/grade-detail.page.css';
import $ from 'yoho-jquery';
import echarts from 'echarts';
import Page from 'yoho-page';
import GradeDetailPage from './grade/detail';
class GradeDetailPage extends Page {
constructor() {
super();
this.view = {
gradeGraph: $('#gradeGraph')
};
this.eGadeGraph = echarts.init(this.view.gradeGraph[0]);
let option = {
backgroundColor: '#2d2d2d',
grid: {
show: false
},
tooltip: {
trigger: 'none'
},
dataZoom: [{
type: 'inside',
startValue: '2月',
endValue: '5月',
zoomOnMouseWheel: false,
filterMode: 'none'
}],
xAxis: {
type: 'category',
boundaryGap: false,
axisLine: {
show: false
},
axisTick: {
show: false
},
data: [{
value: '1月',
textStyle: {
color: '#fff',
fontSize: 12
}
}, {
value: '2月',
textStyle: {
color: '#fff',
fontSize: 12
}
}, {
value: '3月',
textStyle: {
color: '#fff',
fontSize: 12
}
}, {
value: '4月',
textStyle: {
color: '#fff',
fontSize: 12
}
}, {
value: '5月',
textStyle: {
color: '#000',
fontWeight: 'bold',
fontSize: 18,
backgroundColor: '#fff'
}
}, {
value: '6月',
textStyle: {
color: '#fff',
fontSize: 12
}
}]
},
yAxis: {
type: 'value',
show: false,
},
series: [{
data: [820, 932, 901, 934, 1290, 1330, 1320],
color: ['#A59075'],
symbol: 'circle',
symbolSize: 8,
type: 'line',
label: {
normal: {
show: true,
position: 'top'
}
},
}]
};
this.eGadeGraph.setOption(option);
this.eGadeGraph.on('click', event => {
console.log('当前是：' + event.name);
});
}
}
export default new GradeDetailPage();
new GradeDetailPage();
... ...
import 'activity/grade-detail.page.css';
import $ from 'yoho-jquery';
import echarts from 'echarts';
import Page from 'yoho-page';
import graphOptions from './graph-options';
class GradeDetailPage extends Page {
constructor() {
super();
this.view = {
gradeGraph: $('#gradeGraph'),
gradeBillList: $('#gradeBillList')
};
this.eGadeGraph = echarts.init(this.view.gradeGraph[0]);
this.eGadeGraph.on('click', this.monthDetailRender.bind(this));
this.graphRender();
}
/**
* 折线图渲染
*/
graphRender() {
this.ajax({
url: '/activity/grade/graph'
}).then(graphData => {
this.eGadeGraph.setOption(graphOptions(graphData));
});
}
/**
* 月度数据渲染
*/
monthDetailRender(event) {
console.log(event);
this.ajax({
url: '/activity/grade/monthDetail'
}).then(monthDetailPage => {
this.view.gradeBillList.html(monthDetailPage);
});
}
}
export default GradeDetailPage;
... ...
export default () => {
return {
backgroundColor: '#2d2d2d',
tooltip: {
trigger: 'none'
},
dataZoom: [{
type: 'inside',
startValue: '2月',
endValue: '6 月',
zoomLock: true,
zoomOnMouseWheel: false,
filterMode: 'none'
}],
xAxis: {
type: 'category',
boundaryGap: false,
axisLine: {
show: false
},
axisTick: {
show: false
},
data: [{
value: '1月',
textStyle: {
color: '#fff',
fontSize: 14
}
}, {
value: '2月',
textStyle: {
color: '#fff',
fontSize: 14
}
}, {
value: '3月',
textStyle: {
color: '#fff',
fontSize: 14
}
}, {
value: '4月',
textStyle: {
color: '#fff',
fontSize: 14
}
}, {
value: '5月',
textStyle: {
color: '#fff',
fontSize: 14
}
}, {
value: '6 月',
textStyle: {
color: '#000',
fontSize: 18,
padding: [3, 2, 2, 5],
backgroundColor: {
image: 'http://cdn.yoho.cn/grade/yuefen@2x.png'
}
}
}],
// axisLabel: {
// formatter: function(value) {
// if (value === '6月') {
// return '{current|6} {current|月}';
// }
// },
// rich: {
// normal: {
// color: '#fff',
// fontSize: 14
// },
// current: {
// color: '#fff',
// fontSize: 18
// }
// }
// }
},
yAxis: {
type: 'value',
show: false,
},
series: [{
data: [820, 932, 901, 934, 1290, 1330],
color: ['#A59075'],
symbol: 'circle',
symbolSize: 8,
type: 'line',
label: {
normal: {
show: true,
position: 'top'
}
},
}]
};
};
... ...
... ... @@ -47,8 +47,12 @@
}
.grade-bill-title {
text-align: center;
display: flex;
align-items: center;
justify-content: center;
margin-top: 32px;
height: 60px;
background-image: resolve("activity/grade/BG@2x.png");
}
.grade-bill-list > .grade-bill {
... ...