积分乐园部分

@@ -53,7 +53,7 @@ class familyModel extends global.yoho.BaseModel {
                     head_ico: result[0].data.head_ico,
                     nickname: result[0].data.nickname,
                     gender: result[0].data.gender,
-                    birthday: moment(result[0].data.birthday).format('MM-DD')
+                    birthday: result[0].data.birthday ? moment(result[0].data.birthday).format('MM-DD') : ''
                 });
             }
 

@@ -61,8 +61,7 @@
     <div class="integral">
         <div class="title">积分乐园</div>
         <div class="integral-content">
-            <div class="charts"></div>
-            <div class="mark"></div>
+            <div class="charts" id="charts" style="width: 8rem; height: 8rem;"></div>
         </div>
     </div>
 

@@ -49,6 +49,7 @@
     "connect-multiparty": "^2.0.0",
     "cookie-parser": "^1.4.3",
     "cssnano": "^3.10.0",
+    "echarts": "^3.7.0",
     "express": "^4.15.3",
     "fast-safe-stringify": "^1.2.0",
     "feed": "^1.1.0",

+<a class="integral-total" href="{{totalHref}}">
+    <span class="total">{{total}}</span>
+    <span class="name">积分总计</span>
+</a>
+<div class="mark">
+    {{# data}}
+    <div class="mark-item">
+        <span class="item-name">{{name}}</span>
+        <span class="item-color" style="background-color: {{color}}"></span>
+        <span class="item-val">{{value}}</span>
+        <span class="item-percent">{{percent}}</span>
+    </div>
+    {{/data}}
+    <div class="instruction">
+        注：
+        <span>YOHO!Family 所有产品积分可通用</span>
+    </div>
+</div>

@@ -2,6 +2,12 @@ import 'home/family.page.css';
 import $ from 'yoho-jquery';
 import Page from 'yoho-page';
 import tip from 'plugin/tip';
+import yoho from 'yoho-app';
+import integral from 'home/integral-paradise.hbs';
+
+const echarts = require('echarts/lib/echarts');
+
+require('echarts/lib/chart/pie');
 
 class FamilyIndex extends Page {
     constructor() {
@@ -12,17 +18,26 @@ class FamilyIndex extends Page {
             $codeSet: $('.code-set'),
             $invition: $('.invition'),
             $invitonSet: $('.inviton-set'),
-            $textarea: $('textarea')
+            $textarea: $('textarea'),
+            integralCh: echarts.init(document.getElementById('charts')),
+            chartWidth: $('.charts').width(),
+            $integralContent: $('.integral-content')
+        };
+
+        this.view = {
+            integral
         };
 
         this.init();
 
         this.selector.$codeSet.on('click', this.setTrendPop.bind(this));
         this.selector.$textarea.on('blur', this.saveTrendWord.bind(this));
+        this.selector.integralCh.on('click', this.jump.bind(this));
     }
 
     init() {
         this.headIco();
+        this.integralCharts();
     }
 
     // 头像
@@ -32,6 +47,41 @@ class FamilyIndex extends Page {
         }
     }
 
+    // 积分乐园图表
+    integralCharts() {
+        let integralData = {
+            total: 18922,
+            totalHref: location.protocol + '//m.yohobuy.com/home/family/coinDetail?openby:yohobuy={"action":"go.h5","params":{"url":"' + location.protocol + '//m.yohobuy.com/home/family/coinDetail"}}', // eslint-disable-line
+            data: [
+                {value: 40, name: 'rose2', color: '#000', percent: '20%', plateType: 1},
+                {value: 35, name: 'rose3', plateType: 2},
+                {value: 30, name: 'rose4', plateType: 3},
+                {value: 25, name: 'rose5'},
+                {value: 20, name: 'rose6'},
+                {value: 15, name: 'rose7'},
+            ]
+        };
+
+        this.selector.$integralContent.append(this.view.integral(integralData));
+
+        this.selector.integralCh.setOption({
+            calculable: true,
+            color: ['#C1232B', '#B5C334', '#FCCE10'],
+            series: [
+                {
+                    type: 'pie',
+                    radius: [this.selector.chartWidth / 3, this.selector.chartWidth / 2],
+                    roseType: 'radius',
+                    center: ['50%', '50%'],
+                    label: {
+                        normal: false
+                    },
+                    data: integralData.data
+                }
+            ]
+        });
+    }
+
     // 设置潮流口令
     setTrendPop() {
         this.selector.$invition.hide();
@@ -63,6 +113,15 @@ class FamilyIndex extends Page {
             tip.show('服务异常，请稍后重试');
         });
     }
+
+    // 积分图表点击跳转
+    jump(params) {
+        if (yoho && yoho.isApp) {
+            yoho.goH5(`${location.protocol}//m.yohobuy.com/home/family/coinDetail?plateType=${params.data.plateType}`);
+        } else {
+            window.location.href = `${location.protocol}//m.yohobuy.com/home/family/coinDetail?plateType=${params.data.plateType}`; // eslint-disable-line
+        }
+    }
 }
 
 $(() => {

@@ -196,11 +196,87 @@
             background-color: #fff;
             padding-left: 30px;
             padding-bottom: 40px;
+            overflow: hidden;
+            position: relative;
+
+            canvas {
+                width: 100% !important;
+                height: 100% !important;
+            }
 
             .charts {
-                width: 320px;
-                height: 320px;
-                border: 1px solid red;
+                float: left;
+            }
+        }
+
+        .integral-total {
+            width: 200px;
+            position: relative;
+            top: 104px;
+            left: -260px;
+            text-align: center;
+            overflow: hidden;
+            border-radius: 39px;
+            display: block;
+
+            .total {
+                font-size: 55px;
+                color: #43b989;
+            }
+
+            .name {
+                font-size: 24px;
+                display: inline-block;
+            }
+        }
+
+        .mark {
+            width: 370px;
+            position: absolute;
+            right: 30px;
+            font-size: 24px;
+            top: 20px;
+        }
+
+        .mark-item {
+            color: #000;
+            display: inline-block;
+            line-height: 40px;
+            width: 100%;
+
+            .item-name {
+                margin-right: 14px;
+                text-align: right;
+                width: 120px;
+                display: inline-block;
+            }
+
+            .item-color {
+                display: inline-block;
+                width: 20px;
+                height: 20px;
+                border-radius: 10px;
+                margin-right: 14px;
+            }
+
+            .item-percent {
+                float: right;
+                color: #b0b0b0;
+                width: 50px;
+                margin-left: 77px;
+            }
+        }
+
+        .instruction {
+            color: #b0b0b0;
+            display: inline-block;
+            width: 100%;
+            line-height: 32px;
+            margin-top: 10px;
+
+            span {
+                width: 84%;
+                float: right;
             }
         }
     }