积分图表数据

@@ -23,7 +23,7 @@ exports.integralCharts = (req, res, next) => {
     let uid = req.user.uid;
 
     req.ctx(family).integralCharts(uid).then(result => {
-        res.josn(result);
+        res.json(result);
     }).catch(next);
 };
 

@@ -362,12 +362,28 @@ class familyModel extends global.yoho.BaseModel {
         }, {
             code: 200
         }).then((result) => {
-            // if(result && result.data) {
-            //     _.forEach(result.data, function(data) {
+            let chartsData = {};
+            let list = [];
+            let colorList = [];
 
-            //     });
-            // }
-            // console.log(result);
+            if (result && result.data) {
+                chartsData.total = _.get(result.data, 'total', '');
+
+                _.forEach(result.data.data, function(data) {
+                    list.push({
+                        value: data.num,
+                        name: data.source,
+                        percent: data.proportion,
+                        color: data.colour
+                    });
+
+                    colorList.push(data.colour);
+                });
+
+                chartsData.list = list;
+                chartsData.colorList = colorList;
+            }
+            return chartsData;
         });
     }
 

@@ -44,7 +44,7 @@
             <div class="content-item" data-login="{{login}}" data-name="{{nickname}}" data-code="{{code}}">
                 <img class="item-tag" src="{{image iconUrl 140 140}}">
                 <span class="name">{{sourceName}}</span>
-                <span class="level">{{level}}</span>
+                <span class="level">{{name}}</span>
             </div>
             {{/ appList}}
         </div>
@@ -52,7 +52,7 @@
     <div class="integral">
         <div class="title">积分乐园</div>
         <div class="integral-content">
-            <div class="charts" id="charts" style="width: 8.5rem; height: 8.5rem;"></div>
+            <div class="charts" id="charts" style="width: 8.6rem; height: 8.6rem;"></div>
         </div>
     </div>
 

@@ -3,14 +3,14 @@
     <span class="name">积分总计</span>
 </a>
 <div class="mark">
-    {{# data}}
+    {{# list}}
     <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}}
+    {{/list}}
     <div class="instruction">
         注：
         <span>YOHO!Family 所有产品积分可通用</span>

@@ -96,7 +96,7 @@ class FamilyIndex extends Page {
 
             this.selector.$trendWord.width(this.selector.$trendWord.width() + 40);
 
-            this.selector.$wordOuter.append('<span class="trend-word">' + this.selector.$trendWord.html() + '</span>').css({
+            this.selector.$wordOuter.append('<span class="trend-word">' + this.selector.$trendWord.html() + '</span>').css({  // eslint-disable-line
                 width: 2 * this.selector.$trendWord.width()
             });
 
@@ -118,36 +118,34 @@ 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: 50, 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: 'yoho!Bowb'},
-            ]
-        };
-
-        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 / 10, this.selector.chartWidth * 23 / 50],
-                    roseType: 'radius',
-                    center: ['48%', '50%'],
-                    label: {
-                        normal: false
-                    },
-                    data: integralData.data
-                }
-            ]
+        this.ajax({
+            type: 'GET',
+            url: location.protocol + '//m.yohobuy.com/home/family/integralCharts'
+        }).then(result => {
+            if (result) {
+                result.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
+
+                this.selector.$integralContent.append(this.view.integral(result));
+
+                this.selector.integralCh.setOption({
+                    calculable: true,
+                    color: result.colorList,
+                    series: [
+                        {
+                            type: 'pie',
+                            radius: [this.selector.chartWidth * 3 / 10, this.selector.chartWidth * 11 / 25],
+                            roseType: 'radius',
+                            center: ['50%', '50%'],
+                            label: {
+                                normal: false
+                            },
+                            data: result.list
+                        }
+                    ]
+                });
+            }
+        }).catch(() => {
+            tip.show('服务异常，请稍后重试');
         });
     }
 

@@ -193,6 +193,7 @@
             margin-bottom: 50px;
             float: left;
             text-align: center;
+            height: 240px;
 
             .item-tag {
                 width: 140px;
@@ -250,11 +251,12 @@
             .name {
                 font-size: 24px;
                 display: inline-block;
+                width: 100%;
             }
         }
 
         .mark {
-            width: 370px;
+            width: 350px;
             position: absolute;
             right: 30px;
             font-size: 24px;