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

@@ -65,6 +65,7 @@ class Grade {
         res.render('grade/detail', {
             module: 'activity',
             page: 'grade-detail',
+            bgcolor: '#2b2b2b',
             width750: true,
             localCss: true,
             title: '成长值'
@@ -113,14 +114,14 @@ class Grade {
 
         req.ctx(GradeModel).vipIconList({uid}).then(result => {
             let vipNav = _.filter(_.get(result, 'data', {}), {status: 1});
-            let id = parseInt(`0${req.query.id}`, 10) || _.get(vipNav, '[0].id', 0);
+            let id = parseInt(`0${req.query.vrid}`, 10) || _.get(vipNav, '[0].id', 0);
+            let findex = _.findIndex(vipNav, {id: id});
 
-            _.each(vipNav, item => {
-                if (item.id === id) {
-                    item.active = true;
-                    return false;
-                }
-            });
+            if (vipNav[findex]) {
+                vipNav[findex].active = true;
+            } else {
+                vipNav[0].active = true;
+            }
 
             res.render('grade/droit', {
                 module: 'activity',
@@ -128,6 +129,7 @@ class Grade {
                 vipNav: droitUtil.droitHtml(vipNav),
                 width750: true,
                 title: '会员权益说明',
+                bgcolor: '#3e3e3e',
                 localCss: true
             });
         }).catch(next);

 'use strict';
 const _ = require('lodash');
 
+/*eslint-disable*/
+
 // 会员权益方案写死，后台未做，后期删除
 function droitHtml(contents) {
-    let banner = '//img10.static.yhbimg.com/article/2017/06/20/12/01a50a1f45b97365e758d6890858998310.jpg' +
-        '?imageView2/2/w/670/h/240/q/60/format/webp';
+    let banner = 'http://img10.static.yhbimg.com/article/2017/06/20/12/01a50a1f45b97365e758d6890858998310.jpg' +
+        '?imageView2/2/w/{width}/h/{height}';
 
     _.map(contents, item => {
         if (item.displayName === '7天退换货') {
             item.content = {
                 banner: banner,
                 intros: [
-                    {title: '特权介绍：', data: ['自物流签收之日起7天之内可以退货，15天之内可以换货（以快递公司的物流签收日期为准）。']},
-                    {title: '其他说明：', data: ['退换货政策详细说明请见app服务与反馈-售后问题-退换货政策。']},
+                    {title: '特权介绍', data: ['自物流签收之日起7天之内可以退货，15天之内可以换货（以快递公司的物流签收日期为准）。']},
+                    {title: '其他说明', data: ['退换货政策详细说明请见<a href=//m.yohobuy.com/service/chatQaList?openby:yohobuy＝{"action":"go.sfhome"} style="text-decoration: underline;color: red;">app服务与反馈-售后问题-退换货政策</a>。']},
                 ],
                 interlocution: []
             };
@@ -20,8 +22,8 @@ function droitHtml(contents) {
             item.content = {
                 banner: banner,
                 intros: [
-                    {title: '特权介绍：', data: ['普通商品下单后24小时安排发货，部分特殊商品除外。']},
-                    {title: '其他说明：', data: ['预售商品发货时间以商品页面标注为准。', '部分品牌需要调货，发货周期会有一定延长，发货时间以下单页面提示为准。']},
+                    {title: '特权介绍', data: ['普通商品下单后24小时安排发货，部分特殊商品除外。']},
+                    {title: '其他说明', data: ['预售商品发货时间以商品页面标注为准。', '部分品牌需要调货，发货周期会有一定延长，发货时间以下单页面提示为准。']},
                 ],
                 interlocution: []
             };
@@ -29,8 +31,8 @@ function droitHtml(contents) {
             item.content = {
                 banner: banner,
                 intros: [
-                    {title: '特权介绍：', data: ['会员在有货平台上购买符合活动范围的商品时，可享受固定的折扣。会员等级越高，享受的折扣力度越大。']},
-                    {title: '折扣说明：', data: ['银卡会员享9.5折优惠，金卡会员享9折优惠，白金卡会员享8.8折优惠。']},
+                    {title: '特权介绍', data: ['会员在有货平台上购买符合活动范围的商品时，可享受固定的折扣。会员等级越高，享受的折扣力度越大。']},
+                    {title: '折扣说明', data: ['银卡会员享9.5折优惠，金卡会员享9折优惠，白金卡会员享8.8折优惠。']},
                 ],
                 interlocution: []
             };
@@ -38,11 +40,11 @@ function droitHtml(contents) {
             item.content = {
                 banner: banner,
                 intros: [
-                    {title: '特权介绍：', data: ['会员专享生日福利，等级越高，价值越高，具体以你实际领取为准。']},
-                    {title: '权益对象：', data: ['银卡及以上会员、且已完善个人生日信息才可领取生日福利券。']},
-                    {title: '领取说明：', data: [
+                    {title: '特权介绍', data: ['会员专享生日福利，等级越高，价值越高，具体以你实际领取为准。']},
+                    {title: '权益对象', data: ['银卡及以上会员、且已完善个人生日信息才可领取生日福利券。']},
+                    {title: '领取说明', data: [
                         '生日福利券在你生日当月可领，领取后有效期15天。',
-                        '生日福利券可在消息中心-我的资产页面领取。',
+                        '生日福利券可在<a href=//m.yohobuy.com/service/chatQaList?openby:yohobuy＝{"action":"go.sfhome"} style="text-decoration: underline;color: red;">消息中心-我的资产</a>页面领取。',
                         '若你在上述时间段内未领取，将无法补发生日礼包哦。'
                     ]},
                 ],
@@ -55,8 +57,8 @@ function droitHtml(contents) {
             item.content = {
                 banner: banner,
                 intros: [
-                    {title: '特权介绍：', data: ['金卡会员每月可享3次普通快递免邮、白金会员每月可享5次顺丰快递免邮（顺丰无法触达地区将改发其他快递）。']},
-                    {title: '使用说明：', data: ['免邮次数每月一日更新，会员等级升级时，免邮次数当天更新。', '金卡会员可消耗一次免邮次数将已达到免邮门槛的普通快递订单升级至顺丰快递。']},
+                    {title: '特权介绍', data: ['金卡会员每月可享3次普通快递免邮、白金会员每月可享5次顺丰快递免邮（顺丰无法触达地区将改发其他快递）。']},
+                    {title: '使用说明', data: ['免邮次数每月一日更新，会员等级升级时，免邮次数当天更新。', '金卡会员可消耗一次免邮次数将已达到免邮门槛的普通快递订单升级至顺丰快递。']},
                 ],
                 interlocution: []
             };
@@ -72,7 +74,7 @@ function droitHtml(contents) {
     return contents;
 }
 
-
+/* eslint-enable */
 module.exports = {
     droitHtml,
 };

 <div class="grade-detail-page">
+     {{> grade/user-defined-header}}
     <div id="gradeGraph" class="grade-graph"></div>
     <div class="loading-mask" id="loadingMask">
         <div class="loading-logo"></div>

 <div class="grade-droit-page">
+    {{> grade/user-defined-header}}
+
     <div class="droit-nav">
         {{#vipNav}}
             <div class="droit-nav-item {{#if active}}active{{/if}}">
-                <img class="droit-nav-icon" src="{{iosSmallImage}}">
+                <img class="droit-nav-icon" src="{{image iosSmallImage 100 100}}" />
                 <span class="name">{{displayName}}</span>
             </div>
         {{/vipNav}}
@@ -10,19 +12,20 @@
     <div class="grade-droit-content">
         {{#vipNav}}
         <div class="droit-nav-content {{#unless active}}hide{{/unless}}">
+            {{#if content.banner}}
+                <div class="banner">
+                    <img src="{{image content.banner 670 240}}" />
+                </div>
+            {{/if}}
             {{#if content.intros}}
-                {{#if content.banner}}
-                    <div class="banner">
-                        <img src="{{content.banner}}">
-                    </div>
-                {{/if}}
                 <div class="intro">
-                    <h2 class="leaguer">{{displayName}}</h2>
                     {{#content.intros}}
-                        <h4>{{title}}</h4>
-                        {{#data}}
-                            <p>{{.}}</p>
-                        {{/data}}
+                        <div class="intro-item">
+                            <h4>{{title}}</h4>
+                            {{#data}}
+                                <p>{{{.}}}</p>
+                            {{/data}}
+                        </div>
                     {{/content.intros}}
                 </div>
                 <div class="interlocution">

+<header class="yoho-header user-defined-header" {{#if bgcolor}}style="background-color: {{bgcolor}};"{{/if}}>
+    <a href="javascript:history.go(-1);" class="iconfont nav-back">&#xe610;</a>
+    <p class="nav-title">{{title}}</p>
+</header> 

 import 'activity/grade-droit.page.css';
 import $ from 'yoho-jquery';
 import Page from 'yoho-page';
+import yoho from 'yoho-app';
 
 class GradeDroitPage extends Page {
     constructor() {
@@ -16,6 +17,7 @@ class GradeDroitPage extends Page {
             $gradeDroitContent: $('.grade-droit-content'),
             $droitNavItem: $('.droit-nav').find('.droit-nav-item'),
             $q: $('.interlocution').find('.interlocution-item .q'),
+            $back: $('.nav-back'),
         };
 
         this.bindEvents();
@@ -23,8 +25,9 @@ class GradeDroitPage extends Page {
     }
 
     bindEvents() {
-        this.selector.$droitNavItem.on('click', this._navEvent.bind(this));
-        this.selector.$q.on('click', this._interlocutionQA.bind(this));
+        this.selector.$droitNavItem.on('touchstart', this._navEvent.bind(this));
+        this.selector.$q.on('touchstart', this._interlocutionQA.bind(this));
+        this.selector.$back.on('click', this.goBack.bind(this));
     }
 
     _navEvent(e) {
@@ -39,7 +42,7 @@ class GradeDroitPage extends Page {
         let $activeDom = this.selector.$droitNav.find('.droit-nav-item.active');
         let aOffset = $activeDom.offset();
 
-        if (aOffset.left > winWidth) {
+        if (aOffset && aOffset.left > winWidth) {
             this.selector.$droitNav.animate({
                 scrollLeft: (aOffset.left - winWidth / 2 + $activeDom.width() / 2) + 'px'
             }, 1000);
@@ -62,6 +65,13 @@ class GradeDroitPage extends Page {
             $dom.addClass('active');
         }
     }
+
+    // 返回上一页
+    goBack() {
+        if (yoho.isApp) {
+            yoho.invokeMethod('go.back');
+        }
+    }
 }
 
 export default new GradeDroitPage();

 import 'activity/grade-detail.page.css';
 import $ from 'yoho-jquery';
-import echarts from 'echarts';
+import echarts from 'echarts/lib/echarts';
+import 'echarts/lib/chart/line';
+import 'echarts/lib/component/dataZoom';
+import 'echarts/lib/component/markLine';
 import tip from 'plugin/tip';
 import Page from 'yoho-page';
 import graphOptions from './graph-options';
+import yoho from 'yoho-app';
 
 class GradeDetailPage extends Page {
     constructor() {
@@ -13,11 +17,13 @@ class GradeDetailPage extends Page {
             levelStr: $('#levelStr'),
             gradeGraph: $('#gradeGraph'),
             gradeBillList: $('#gradeBillList'),
-            loadingMask: $('#loadingMask')
+            loadingMask: $('#loadingMask'),
+            navBack: $('.nav-back')
         };
 
         this.eGradeGraph = echarts.init(this.view.gradeGraph[0]);
         this.eGradeGraph.on('click', this.monthDetailInit.bind(this));
+        this.view.navBack.on('click', this.goBack.bind(this));
 
         this.beforeScroll = document.body.scrollTop;
         this.year = 0;
@@ -129,6 +135,13 @@ class GradeDetailPage extends Page {
             this.monthDetailRender();
         }
     }
+
+    // 返回上一页
+    goBack() {
+        if (yoho.isApp) {
+            yoho.invokeMethod('go.back');
+        }
+    }
 }
 
 export default GradeDetailPage;

 export default (graphData) => {
     return {
-        backgroundColor: '#2d2d2d',
+        animationDuration: 500,
+        backgroundColor: {
+            type: 'linear',
+            x: 0,
+            y: 0,
+            x2: 0,
+            y2: 1,
+            colorStops: [{
+                offset: 0, color: '#2b2b2b'
+            }, {
+                offset: 1, color: '#444141'
+            }],
+            globalCoord: false
+        },
         tooltip: {
             trigger: 'none'
         },
@@ -31,7 +44,7 @@ export default (graphData) => {
             data: graphData.seriesData,
             color: ['#A59075'],
             symbol: 'circle',
-            symbolSize: 8,
+            symbolSize: 10,
             type: 'line',
             label: {
                 normal: {

@@ -13,7 +13,7 @@
         top: 0;
         left: 0;
         z-index: 2;
-        background-color: #303030;
+        background-color: #2b2b2b;
         display: flex;
         flex-direction: column;
         justify-content: center;
@@ -60,7 +60,7 @@
     }
 
     .grade-bill-box {
-        margin-top: -12px;
+        margin-top: -14px;
         margin-left: auto;
         margin-right: auto;
         width: 600px;
@@ -95,12 +95,12 @@
             }
 
             .grade-bill-left > .order {
-                font-size: 16px;
+                font-size: 22px;
             }
 
             .grade-bill-left > .time {
                 margin-top: 4px;
-                font-size: 14px;
+                font-size: 18px;
                 font-weight: 300;
                 color: #444;
             }
@@ -108,7 +108,7 @@
             .grade-bill-right {
                 display: flex;
                 align-items: center;
-                font-size: 10px;
+                font-size: 18px;
                 font-weight: 300;
                 color: #ccc;
             }

 .grade-droit-page {
     width: 750px;
+    -webkit-overflow-scrolling: touch;
 
     .droit-nav {
         width: inherit;
         overflow: hidden;
         overflow-x: auto;
         white-space: nowrap;
-        background-color: #444;
+        background-color: #3e3e3e;
 
         .droit-nav-item {
             text-align: center;
@@ -49,30 +50,18 @@
         width: inherit;
 
         .banner {
-            padding: 40px 40px 24px;
+            padding: 40px 40px 10px;
         }
 
         .intro {
-            padding: 0 40px 26px 40px;
-
-            .leaguer {
-                font-size: 28px;
-                color: #444;
-
-                &:before {
-                    content: "";
-                    width: 10px;
-                    height: 10px;
-                    background-color: #444;
-                    display: inline-block;
-                    margin-right: 10px;
-                    vertical-align: middle;
-                }
-            }
+            padding: 0 40px 30px 40px;
+        }
 
+        .intro .intro-item {
             h4 {
-                margin: 10px 0;
-                font-size: 26px;
+                margin: 30px 0 15px;
+                font-size: 28px;
+                font-weight: bold;
             }
 
             h4,
@@ -83,7 +72,7 @@
             }
 
             p {
-                margin-bottom: 10px;
+                line-height: 40px;
             }
         }
     }
@@ -169,6 +158,6 @@
         height: 300px;
         line-height: 300px;
         text-align: center;
-        font-size: 28px;
+        font-size: 36px;
     }
 }

@@ -81,6 +81,11 @@
         height: 355px;
         top: 93px;
     }
+
+    .user-defined-header {
+        background: none;
+        background-color: #3e3e3e;
+    }
 }
 
 .yoho-header {