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
  1 +const co = require('bluebird').coroutine;
  2 +const GradeModel = require('../models/grade-model');
1 const headerModel = require('../../../doraemon/models/header'); // 头部model 3 const headerModel = require('../../../doraemon/models/header'); // 头部model
2 4
3 class Grade { 5 class Grade {
4 - detail(req, res) { 6 + /**
  7 + * 成长值明细页面
  8 + */
  9 + page(req, res) {
5 res.render('grade/detail', { 10 res.render('grade/detail', {
6 module: 'activity', 11 module: 'activity',
7 page: 'grade-detail', 12 page: 'grade-detail',
@@ -9,6 +14,31 @@ class Grade { @@ -9,6 +14,31 @@ class Grade {
9 }); 14 });
10 } 15 }
11 16
  17 + /**
  18 + * 折线图数据
  19 + */
  20 + graph(req, res, next) {
  21 + co(function* () {
  22 + let graphData = yield req.ctx(GradeModel).graph();
  23 +
  24 + res.json(graphData);
  25 + })().catch(next);
  26 + }
  27 +
  28 + /**
  29 + * 月度数据视图
  30 + */
  31 + monthDetail(req, res, next) {
  32 + co(function* () {
  33 + let monthDetailData = yield req.ctx(GradeModel).monthDetail();
  34 +
  35 + res.render('grade/month-detail', {
  36 + layout: false,
  37 + list: monthDetailData
  38 + });
  39 + })().catch(next);
  40 + }
  41 +
12 droit(req, res) { 42 droit(req, res) {
13 res.render('grade/droit', { 43 res.render('grade/droit', {
14 module: 'activity', 44 module: 'activity',
  1 +class GradeModel extends global.yoho.BaseModel {
  2 + constructor(ctx) {
  3 + super(ctx);
  4 + }
  5 +
  6 + /**
  7 + * 折线的数据
  8 + */
  9 + graph() {
  10 + return this.get({
  11 + data: {
  12 + method: ''
  13 + }
  14 + });
  15 + }
  16 +
  17 + /**
  18 + * 月度详细数据
  19 + */
  20 + monthDetail() {
  21 + return this.get({
  22 + data: {
  23 + method: ''
  24 + }
  25 + });
  26 + }
  27 +}
  28 +
  29 +module.exports = GradeModel;
@@ -314,7 +314,9 @@ router.get('/coupon-list', auth, couponList.index); // 优惠券领取页 @@ -314,7 +314,9 @@ router.get('/coupon-list', auth, couponList.index); // 优惠券领取页
314 router.get('/coupon-list/receive', couponList.receive); // 个人优惠券领取 314 router.get('/coupon-list/receive', couponList.receive); // 个人优惠券领取
315 router.get('/coupon-list/receiveAll', couponList.receiveAll); // 全场优惠券领取 315 router.get('/coupon-list/receiveAll', couponList.receiveAll); // 全场优惠券领取
316 316
317 -router.get('/grade/detail', auth, grade.detail); // 成长值明细 317 +router.get('/grade/detail', auth, grade.page); // 成长值明细页面
  318 +router.get('/grade/graph', auth, grade.graph); // 成长值明细图表数据
  319 +router.get('/grade/monthDetail', auth, grade.monthDetail); // 成长值明细图表数据
318 router.get('/grade/droit', auth, grade.droit); // 权益说明 320 router.get('/grade/droit', auth, grade.droit); // 权益说明
319 321
320 module.exports = router; 322 module.exports = router;
@@ -6,30 +6,13 @@ @@ -6,30 +6,13 @@
6 <hr class="box-entry-line"> 6 <hr class="box-entry-line">
7 <div class="grade-bill-box"> 7 <div class="grade-bill-box">
8 <div class="grade-level"> 8 <div class="grade-level">
9 - 您当前的会员等级为：银卡会员 9 + <span>您当前的会员等级为：银卡会员</span>
10 </div> 10 </div>
11 <div class="grade-bill-title"> 11 <div class="grade-bill-title">
12 - 成长值来源 12 + <span>成长值来源</span>
13 </div> 13 </div>
14 - <div class="grade-bill-list">  
15 - <div class="grade-bill">  
16 - <div class="grade-bill-left">  
17 - <div class="order">订单22423498</div>  
18 - <div class="time">2018-02-22 18:32:32</div>  
19 - </div>  
20 - <div class="grade-bill-right">  
21 - <span>+80</span>  
22 - </div>  
23 - </div>  
24 - <div class="grade-bill">  
25 - <div class="grade-bill-left">  
26 - <div class="order">订单22423498</div>  
27 - <div class="time">2018-02-22 18:32:32</div>  
28 - </div>  
29 - <div class="grade-bill-right">  
30 - <span>+80</span>  
31 - </div>  
32 - </div> 14 + <div class="grade-bill-list" id="gradeBillList">
  15 +
33 </div> 16 </div>
34 </div> 17 </div>
35 </div> 18 </div>
  1 +<div class="grade-bill">
  2 + <div class="grade-bill-left">
  3 + <div class="order">订单22423498</div>
  4 + <div class="time">2018-02-22 18:32:32</div>
  5 + </div>
  6 + <div class="grade-bill-right">
  7 + <span>+80</span>
  8 + </div>
  9 +</div>
1 -import 'activity/grade-detail.page.css';  
2 -import $ from 'yoho-jquery';  
3 -import echarts from 'echarts';  
4 -import Page from 'yoho-page'; 1 +import GradeDetailPage from './grade/detail';
5 2
6 -  
7 -class GradeDetailPage extends Page {  
8 - constructor() {  
9 - super();  
10 -  
11 - this.view = {  
12 - gradeGraph: $('#gradeGraph')  
13 - };  
14 -  
15 - this.eGadeGraph = echarts.init(this.view.gradeGraph[0]);  
16 -  
17 - let option = {  
18 - backgroundColor: '#2d2d2d',  
19 - grid: {  
20 - show: false  
21 - },  
22 - tooltip: {  
23 - trigger: 'none'  
24 - },  
25 - dataZoom: [{  
26 - type: 'inside',  
27 - startValue: '2月',  
28 - endValue: '5月',  
29 - zoomOnMouseWheel: false,  
30 - filterMode: 'none'  
31 - }],  
32 - xAxis: {  
33 - type: 'category',  
34 - boundaryGap: false,  
35 - axisLine: {  
36 - show: false  
37 - },  
38 - axisTick: {  
39 - show: false  
40 - },  
41 - data: [{  
42 - value: '1月',  
43 - textStyle: {  
44 - color: '#fff',  
45 - fontSize: 12  
46 - }  
47 - }, {  
48 - value: '2月',  
49 - textStyle: {  
50 - color: '#fff',  
51 - fontSize: 12  
52 - }  
53 - }, {  
54 - value: '3月',  
55 - textStyle: {  
56 - color: '#fff',  
57 - fontSize: 12  
58 - }  
59 - }, {  
60 - value: '4月',  
61 - textStyle: {  
62 - color: '#fff',  
63 - fontSize: 12  
64 - }  
65 - }, {  
66 - value: '5月',  
67 - textStyle: {  
68 - color: '#000',  
69 - fontWeight: 'bold',  
70 - fontSize: 18,  
71 - backgroundColor: '#fff'  
72 - }  
73 - }, {  
74 - value: '6月',  
75 - textStyle: {  
76 - color: '#fff',  
77 - fontSize: 12  
78 - }  
79 - }]  
80 - },  
81 - yAxis: {  
82 - type: 'value',  
83 - show: false,  
84 - },  
85 - series: [{  
86 - data: [820, 932, 901, 934, 1290, 1330, 1320],  
87 - color: ['#A59075'],  
88 - symbol: 'circle',  
89 - symbolSize: 8,  
90 - type: 'line',  
91 - label: {  
92 - normal: {  
93 - show: true,  
94 - position: 'top'  
95 - }  
96 - },  
97 - }]  
98 - };  
99 -  
100 - this.eGadeGraph.setOption(option);  
101 -  
102 - this.eGadeGraph.on('click', event => {  
103 - console.log('当前是：' + event.name);  
104 - });  
105 - }  
106 -}  
107 -  
108 -export default new GradeDetailPage(); 3 +new GradeDetailPage();
  1 +import 'activity/grade-detail.page.css';
  2 +import $ from 'yoho-jquery';
  3 +import echarts from 'echarts';
  4 +import Page from 'yoho-page';
  5 +import graphOptions from './graph-options';
  6 +
  7 +class GradeDetailPage extends Page {
  8 + constructor() {
  9 + super();
  10 +
  11 + this.view = {
  12 + gradeGraph: $('#gradeGraph'),
  13 + gradeBillList: $('#gradeBillList')
  14 + };
  15 +
  16 + this.eGadeGraph = echarts.init(this.view.gradeGraph[0]);
  17 + this.eGadeGraph.on('click', this.monthDetailRender.bind(this));
  18 +
  19 + this.graphRender();
  20 + }
  21 +
  22 + /**
  23 + * 折线图渲染
  24 + */
  25 + graphRender() {
  26 + this.ajax({
  27 + url: '/activity/grade/graph'
  28 + }).then(graphData => {
  29 + this.eGadeGraph.setOption(graphOptions(graphData));
  30 + });
  31 + }
  32 +
  33 + /**
  34 + * 月度数据渲染
  35 + */
  36 + monthDetailRender(event) {
  37 + console.log(event);
  38 +
  39 + this.ajax({
  40 + url: '/activity/grade/monthDetail'
  41 + }).then(monthDetailPage => {
  42 + this.view.gradeBillList.html(monthDetailPage);
  43 + });
  44 + }
  45 +}
  46 +
  47 +export default GradeDetailPage;
  1 +export default () => {
  2 + return {
  3 + backgroundColor: '#2d2d2d',
  4 + tooltip: {
  5 + trigger: 'none'
  6 + },
  7 + dataZoom: [{
  8 + type: 'inside',
  9 + startValue: '2月',
  10 + endValue: '6 月',
  11 + zoomLock: true,
  12 + zoomOnMouseWheel: false,
  13 + filterMode: 'none'
  14 + }],
  15 + xAxis: {
  16 + type: 'category',
  17 + boundaryGap: false,
  18 + axisLine: {
  19 + show: false
  20 + },
  21 + axisTick: {
  22 + show: false
  23 + },
  24 + data: [{
  25 + value: '1月',
  26 + textStyle: {
  27 + color: '#fff',
  28 + fontSize: 14
  29 + }
  30 + }, {
  31 + value: '2月',
  32 + textStyle: {
  33 + color: '#fff',
  34 + fontSize: 14
  35 + }
  36 + }, {
  37 + value: '3月',
  38 + textStyle: {
  39 + color: '#fff',
  40 + fontSize: 14
  41 + }
  42 + }, {
  43 + value: '4月',
  44 + textStyle: {
  45 + color: '#fff',
  46 + fontSize: 14
  47 + }
  48 + }, {
  49 + value: '5月',
  50 + textStyle: {
  51 + color: '#fff',
  52 + fontSize: 14
  53 + }
  54 + }, {
  55 + value: '6 月',
  56 + textStyle: {
  57 + color: '#000',
  58 + fontSize: 18,
  59 + padding: [3, 2, 2, 5],
  60 + backgroundColor: {
  61 + image: 'http://cdn.yoho.cn/grade/yuefen@2x.png'
  62 + }
  63 + }
  64 + }],
  65 +
  66 + // axisLabel: {
  67 + // formatter: function(value) {
  68 + // if (value === '6月') {
  69 + // return '{current|6} {current|月}';
  70 + // }
  71 + // },
  72 + // rich: {
  73 + // normal: {
  74 + // color: '#fff',
  75 + // fontSize: 14
  76 + // },
  77 + // current: {
  78 + // color: '#fff',
  79 + // fontSize: 18
  80 + // }
  81 + // }
  82 + // }
  83 + },
  84 + yAxis: {
  85 + type: 'value',
  86 + show: false,
  87 + },
  88 + series: [{
  89 + data: [820, 932, 901, 934, 1290, 1330],
  90 + color: ['#A59075'],
  91 + symbol: 'circle',
  92 + symbolSize: 8,
  93 + type: 'line',
  94 + label: {
  95 + normal: {
  96 + show: true,
  97 + position: 'top'
  98 + }
  99 + },
  100 + }]
  101 + };
  102 +};
@@ -47,8 +47,12 @@ @@ -47,8 +47,12 @@
47 } 47 }
48 48
49 .grade-bill-title { 49 .grade-bill-title {
50 - text-align: center; 50 + display: flex;
  51 + align-items: center;
  52 + justify-content: center;
51 margin-top: 32px; 53 margin-top: 32px;
  54 + height: 60px;
  55 + background-image: resolve("activity/grade/BG@2x.png");
52 } 56 }
53 57
54 .grade-bill-list > .grade-bill { 58 .grade-bill-list > .grade-bill {