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

 const _ = require('lodash');
 const co = require('bluebird').coroutine;
 const GradeModel = require('../models/grade-model');
-const headerModel = require('../../../doraemon/models/header'); // 头部model
+const droitUtil = require('../models/droit-util');
 
 /**
  * 处理接口数据，绘制成长值图表
@@ -9,9 +9,15 @@ const headerModel = require('../../../doraemon/models/header'); // 头部model
 const _processGraphData = (rawListData) => {
     let xAxisData = [];
     let seriesData = [];
+    let start = 0;
+
     let currentIndex = 1;
     let rawListDataLength = rawListData.length;
 
+    if (rawListDataLength > 4) {
+        start = _.parseInt(((rawListDataLength - 4) / rawListDataLength) * 100);
+    }
+
     _.forEach(rawListData, monthRawData => {
         let yearValue = _.get(monthRawData, 'year');
         let monthValue = _.get(monthRawData, 'month');
@@ -25,7 +31,7 @@ const _processGraphData = (rawListData) => {
                     fontSize: 18,
                     padding: [3, 2, 2, 5],
                     backgroundColor: {
-                        image: 'http://cdn.yoho.cn/grade/yuefen@2x.png'
+                        image: '//cdn.yoho.cn/grade/yuefen@2x.png'
                     }
                 }
             });
@@ -34,7 +40,8 @@ const _processGraphData = (rawListData) => {
                 value: `${monthValue}月`,
                 textStyle: {
                     color: '#fff',
-                    fontSize: 14
+                    fontSize: 14,
+                    padding: [4, 0, 0, 0]
                 }
             });
         }
@@ -47,7 +54,7 @@ const _processGraphData = (rawListData) => {
         currentIndex++;
     });
 
-    return {xAxisData, seriesData};
+    return { start, xAxisData, seriesData };
 };
 
 class Grade {
@@ -59,7 +66,8 @@ class Grade {
             module: 'activity',
             page: 'grade-detail',
             width750: true,
-            localCss: true
+            localCss: true,
+            title: '成长值'
         });
     }
 
@@ -100,17 +108,29 @@ class Grade {
         })().catch(next);
     }
 
-    droit(req, res) {
-        res.render('grade/droit', {
-            module: 'activity',
-            page: 'grade-droit',
-            pageHeader: headerModel.setNav({
-                navTitle: '会员权益说明',
-            }),
-            width750: true,
-            title: '会员权益说明',
-            localCss: true
-        });
+    droit(req, res, next) {
+        let uid = req.user.uid;
+
+        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);
+
+            _.each(vipNav, item => {
+                if (item.id === id) {
+                    item.active = true;
+                    return false;
+                }
+            });
+
+            res.render('grade/droit', {
+                module: 'activity',
+                page: 'grade-droit',
+                vipNav: droitUtil.droitHtml(vipNav),
+                width750: true,
+                title: '会员权益说明',
+                localCss: true
+            });
+        }).catch(next);
     }
 }
 

+'use strict';
+const _ = require('lodash');
+
+// 会员权益方案写死，后台未做，后期删除
+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';
+
+    _.map(contents, item => {
+        if (item.displayName === '7天退换货') {
+            item.content = {
+                banner: banner,
+                intros: [
+                    {title: '特权介绍：', data: ['自物流签收之日起7天之内可以退货，15天之内可以换货（以快递公司的物流签收日期为准）。']},
+                    {title: '其他说明：', data: ['退换货政策详细说明请见app服务与反馈-售后问题-退换货政策。']},
+                ],
+                interlocution: []
+            };
+        } else if (item.displayName === '极速发货') {
+            item.content = {
+                banner: banner,
+                intros: [
+                    {title: '特权介绍：', data: ['普通商品下单后24小时安排发货，部分特殊商品除外。']},
+                    {title: '其他说明：', data: ['预售商品发货时间以商品页面标注为准。', '部分品牌需要调货，发货周期会有一定延长，发货时间以下单页面提示为准。']},
+                ],
+                interlocution: []
+            };
+        } else if (item.displayName === '专享折扣') {
+            item.content = {
+                banner: banner,
+                intros: [
+                    {title: '特权介绍：', data: ['会员在有货平台上购买符合活动范围的商品时，可享受固定的折扣。会员等级越高，享受的折扣力度越大。']},
+                    {title: '折扣说明：', data: ['银卡会员享9.5折优惠，金卡会员享9折优惠，白金卡会员享8.8折优惠。']},
+                ],
+                interlocution: []
+            };
+        } else if (item.displayName === '生日礼包') {
+            item.content = {
+                banner: banner,
+                intros: [
+                    {title: '特权介绍：', data: ['会员专享生日福利，等级越高，价值越高，具体以你实际领取为准。']},
+                    {title: '权益对象：', data: ['银卡及以上会员、且已完善个人生日信息才可领取生日福利券。']},
+                    {title: '领取说明：', data: [
+                        '生日福利券在你生日当月可领，领取后有效期15天。',
+                        '生日福利券可在消息中心-我的资产页面领取。',
+                        '若你在上述时间段内未领取，将无法补发生日礼包哦。'
+                    ]},
+                ],
+                interlocution: [
+                    {q: '如何完善生日信息？', a: ['未填写生日的会员，可至“个人中心”点击头像填写生日。']},
+                    {q: '为什么没有领取到生日礼包？', a: ['a. 请确认个人资料中是否已维护生日信息。', 'b. 生日福利仅针对银卡及以上会员发放。', 'c. 生日福利每年（365天）仅限领取一次。']}
+                ]
+            };
+        } else if (item.displayName === '免邮服务') {
+            item.content = {
+                banner: banner,
+                intros: [
+                    {title: '特权介绍：', data: ['金卡会员每月可享3次普通快递免邮、白金会员每月可享5次顺丰快递免邮（顺丰无法触达地区将改发其他快递）。']},
+                    {title: '使用说明：', data: ['免邮次数每月一日更新，会员等级升级时，免邮次数当天更新。', '金卡会员可消耗一次免邮次数将已达到免邮门槛的普通快递订单升级至顺丰快递。']},
+                ],
+                interlocution: []
+            };
+        } else if (item.displayName === '购物返币') {
+            item.content = {};
+        } else if (item.displayName === '升级礼包') {
+            item.content = {};
+        } else if (item.displayName === '专属客服') {
+            item.content = {};
+        }
+    });
+
+    return contents;
+}
+
+
+module.exports = {
+    droitHtml,
+};

@@ -35,6 +35,20 @@ class GradeModel extends global.yoho.BaseModel {
             data: apiParams
         });
     }
+
+    /**
+     * 会员权益icon
+     */
+    vipIconList(params) {
+        let apiParams = {
+            method: 'app.passport.vipIconList',
+            uid: params.uid
+        };
+
+        return this.get({
+            data: apiParams
+        });
+    }
 }
 
 module.exports = GradeModel;

 <div class="grade-droit-page">
     <div class="droit-nav">
-        <div class="droit-nav-item">
-            <div class="droit-nav-icon"></div>
-            <span class="name">运费卷</span>
-        </div>
-        <div class="droit-nav-item">
-            <div class="droit-nav-icon"></div>
-            <span class="name">运费卷</span>
-        </div>
-        <div class="droit-nav-item">
-            <div class="droit-nav-icon"></div>
-            <span class="name">运费卷</span>
-        </div>
-        <div class="droit-nav-item">
-            <div class="droit-nav-icon"></div>
-            <span class="name">运费卷</span>
-        </div>
-        <div class="droit-nav-item">
-            <div class="droit-nav-icon"></div>
-            <span class="name">运费卷</span>
-        </div>
-        <div class="droit-nav-item">
-            <div class="droit-nav-icon"></div>
-            <span class="name">运费卷</span>
-        </div>
+        {{#vipNav}}
+            <div class="droit-nav-item {{#if active}}active{{/if}}">
+                <img class="droit-nav-icon" src="{{iosSmallImage}}">
+                <span class="name">{{displayName}}</span>
+            </div>
+        {{/vipNav}}
     </div>
-    <div class="droit-nav-content">
-        <div class="banner">
-            <img src="//img10.static.yhbimg.com/article/2017/06/20/12/01a50a1f45b97365e758d6890858998310.jpg?imageView2/2/w/750/h/250/q/60/format/webp">
-        </div>
-        <div class="intro">
-            <h2 class="leaguer">会员权益</h2>
-            <h4>特权介绍</h4>
-            <p>会员专享生日礼包，等级越高，礼包价值越高，具体以您实际领取为准。</p>
-            <h4>权益对象</h4>
-            <p>银卡及以上会员、且已完善个人生日信息才可领取生日礼包。</p>
-            <h4>领取说明</h4>
-            <p>生日礼包在您生日前7天至生日后7天可领，领取后有效期15天。</p>
-            <p>生日礼包可在会员中心-我的礼包页面领取。</p>
-            <p>若您在上述时间段内未领取，将无法补发生日礼包哦。</p>
-        </div>
+    <div class="grade-droit-content">
+        {{#vipNav}}
+        <div class="droit-nav-content {{#unless active}}hide{{/unless}}">
+            {{#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}}
+                    {{/content.intros}}
+                </div>
+                <div class="interlocution">
+                    {{#content.interlocution}}
+                        <div class="interlocution-item">
+                            <div class="q">{{q}}</div>
+                            <div class="a" style="display: none;">
+                                <div class="a-left"></div>
+                                <div class="a-right">
+                                    {{#a}}
+                                        <p>{{.}}</p>
+                                    {{/a}}
+                                </div>
+                            </div>
+                        </div>
+                    {{/content.interlocution}}
+                </div>
+            {{else}}
+                <div class="empty">敬请期待…</div>
+            {{/if}}
+        </div>
+        {{/vipNav}}
     </div>
 </div>

@@ -5,7 +5,7 @@
         <div class="time">{{createTimeStr}}</div>
     </div>
     <div class="grade-bill-right">
-        <span>{{growthValue}}</span>
+        <span>{{growthValueStr}}</span>
     </div>
 </div>
 {{/list}}

 import 'activity/grade-droit.page.css';
-
+import $ from 'yoho-jquery';
 import Page from 'yoho-page';
 
 class GradeDroitPage extends Page {
     constructor() {
         super();
+
+        this.init();
+    }
+
+    init() {
+
+        this.selector = {
+            $droitNav: $('.droit-nav'),
+            $gradeDroitContent: $('.grade-droit-content'),
+            $droitNavItem: $('.droit-nav').find('.droit-nav-item'),
+            $q: $('.interlocution').find('.interlocution-item .q'),
+        };
+
+        this.bindEvents();
+        this._setScroll();
+    }
+
+    bindEvents() {
+        this.selector.$droitNavItem.on('click', this._navEvent.bind(this));
+        this.selector.$q.on('click', this._interlocutionQA.bind(this));
+    }
+
+    _navEvent(e) {
+        let $dom = $(e.target);
+
+        $dom.closest('.droit-nav-item').addClass('active').siblings().removeClass('active');
+        this._setNavIndex($dom.closest('.droit-nav-item').index() || 0);
+    }
+
+    _setScroll() {
+        let winWidth = $(window).width();
+        let $activeDom = this.selector.$droitNav.find('.droit-nav-item.active');
+        let aOffset = $activeDom.offset();
+
+        if (aOffset.left > winWidth) {
+            this.selector.$droitNav.animate({
+                scrollLeft: (aOffset.left - winWidth / 2 + $activeDom.width() / 2) + 'px'
+            }, 1000);
+        }
+    }
+
+    _setNavIndex(index) {
+        this.selector.$gradeDroitContent.find('.droit-nav-content')
+            .addClass('hide').siblings().eq(index).removeClass('hide');
+    }
+
+    _interlocutionQA(e) {
+        let $dom = $(e.target);
+
+        $dom.closest('.interlocution-item').find('.a').slideToggle('slow');
+
+        if ($dom.hasClass('active')) {
+            $dom.removeClass('active');
+        } else {
+            $dom.addClass('active');
+        }
     }
 }
 

@@ -6,7 +6,7 @@ export default (graphData) => {
         },
         dataZoom: [{
             type: 'inside',
-            start: 50,
+            start: graphData.start,
             end: 100,
             zoomLock: true,
             zoomOnMouseWheel: false,

@@ -3,35 +3,57 @@
 
     .droit-nav {
         width: inherit;
+        overflow: hidden;
         overflow-x: auto;
         white-space: nowrap;
+        background-color: #444;
 
         .droit-nav-item {
             text-align: center;
-            padding: 14px 0;
-            margin: 0 20px;
+            padding: 40px 0 34px;
+            margin: 0 40px;
             display: inline-block;
+            position: relative;
 
             .droit-nav-icon {
                 width: 100px;
                 height: 100px;
-                border-radius: 50%;
-                background-image: url("/activity/grade/iconYF@2x.png");
-                background-repeat: no-repeat;
-                background-size: contain;
             }
 
             .name {
+                margin-top: 8px;
                 height: 34px;
                 font-size: 24px;
                 color: #a69073;
+                font-family: PingFang-SC-Medium, sans-serif;
+                display: inline-block;
+            }
+
+            &.active:after {
+                content: "";
+                display: inline-block;
+                width: 16px;
+                height: 16px;
+                background-color: #fff;
+                position: absolute;
+                bottom: 0;
+                left: 50%;
+                margin-left: -8px;
+                margin-bottom: -8px;
+                transform: rotate(45deg);
             }
         }
     }
 
     .droit-nav-content {
+        width: inherit;
+
+        .banner {
+            padding: 40px 40px 24px;
+        }
+
         .intro {
-            padding: 26px 40px;
+            padding: 0 40px 26px 40px;
 
             .leaguer {
                 font-size: 28px;
@@ -53,10 +75,100 @@
                 font-size: 26px;
             }
 
-            h4, p {
+            h4,
+            p {
+                font-family: PingFang-SC-Regular, sans-serif;
                 font-size: 24px;
                 color: #444;
             }
+
+            p {
+                margin-bottom: 10px;
+            }
+        }
+    }
+
+    .droit-nav-content .interlocution {
+        .interlocution-item {
+            border-top: 1px solid #d8d8d8;
+            padding: 30px 0;
+        }
+
+        .q {
+            padding-left: 44px;
+            padding-right: 10px;
+            font-family: PingFang-SC-Regular, sans-serif;
+            font-size: 24px;
+            color: #444;
+            position: relative;
+
+            &:before {
+                content: "";
+                display: inline-block;
+                width: 30px;
+                height: 30px;
+                background: resolve("activity/grade/q@2x.png") no-repeat;
+                background-size: contain;
+                vertical-align: middle;
+                margin-right: 14px;
+            }
+
+            &:after,
+            &.active:after {
+                content: "";
+                display: inline-block;
+                width: 22px;
+                height: 12px;
+                background: resolve("activity/grade/down@2x.png") no-repeat;
+                background-size: contain;
+                vertical-align: middle;
+                right: 20px;
+                position: absolute;
+                margin-top: 10px;
+            }
+
+            &.active:after {
+                background: resolve("activity/grade/up@2x.png") no-repeat;
+                background-size: contain;
+            }
+        }
+
+        .a {
+            padding-left: 44px;
+            padding-right: 10px;
+            font-family: PingFang-SC-Regular, sans-serif;
+            font-size: 24px;
+            color: #b0b0b0;
+            display: flex;
+            flex-direction: row;
+            margin-top: 14px;
+
+            .a-left {
+                width: 30px;
+                background: resolve("activity/grade/a@2x.png") no-repeat;
+                background-size: contain;
+                margin-right: 10px;
+                margin-top: 3px;
+            }
+
+            .a-right {
+                width: 690px;
+
+                p {
+                    margin-top: 10px;
+                }
+
+                p:first-child {
+                    margin-top: 0;
+                }
+            }
         }
     }
+
+    .empty {
+        height: 300px;
+        line-height: 300px;
+        text-align: center;
+        font-size: 28px;
+    }
 }