From f325dfc79d17a9efe0ce57d8a99309b21a586bf5 Mon Sep 17 00:00:00 2001
From: zuiidea <zuiiidea@gmail.com>
Date: Tue, 20 Dec 2016 22:46:15 +0800
Subject: [PATCH] recentsales

---
 mock/dashboard.js                         |  6 ++---
 src/components/dashboard/recentSales.js   | 29 ++++++++++++++++++++---
 src/components/dashboard/recentSales.less |  6 +++++
 src/components/layout/common.less         | 12 +++++-----
 src/routes/dashboard.js                   |  3 +--
 src/utils/theme.js                        |  2 ++
 6 files changed, 44 insertions(+), 14 deletions(-)

diff --git a/mock/dashboard.js b/mock/dashboard.js
index 6dbe9f8..5f16526 100644
--- a/mock/dashboard.js
+++ b/mock/dashboard.js
@@ -5,9 +5,9 @@ import mockStorge from '../src/utils/mockStorge'
 import {color} from '../src/utils/theme'
 
 let dataKey = mockStorge('Dashboard', Mock.mock({
-  'sales|12': [
+  'sales|8': [
     {
-      'name|+1': 1,
+      'name|+1': 2008,
       'Clothes|200-500': 1,
       'Food|180-700': 1,
       'Electronics|300-850': 1
@@ -17,7 +17,7 @@ let dataKey = mockStorge('Dashboard', Mock.mock({
     {
       'id|+1': 1,
       name: '@last',
-      'status|1-5': 1,
+      'status|1-4': 1,
       date:function(){
         return Mock.Random.integer(2015, 2016)+'-'+Mock.Random.date('MM-dd')+' '+Mock.Random.time('HH:mm:ss')
       },
diff --git a/src/components/dashboard/recentSales.js b/src/components/dashboard/recentSales.js
index 29c19d6..da2ade5 100644
--- a/src/components/dashboard/recentSales.js
+++ b/src/components/dashboard/recentSales.js
@@ -1,7 +1,27 @@
 import React, {PropTypes} from 'react'
-import {Icon,Table} from 'antd'
+import {Icon,Table,Tag} from 'antd'
 import styles from './recentSales.less'
-import {classnames} from '../../utils'
+import {classnames,color} from '../../utils'
+
+
+const status = {
+  1:{
+    color:color.green,
+    text:'SALE'
+  },
+  2:{
+    color:color.yellow,
+    text:'REJECT'
+  },
+  3:{
+    color:color.red,
+    text:'TAX'
+  },
+  4:{
+    color:color.blue,
+    text:'EXTENDED'
+  }
+}
 
 function recentSales(props) {
   const columns = [
@@ -11,17 +31,20 @@ function recentSales(props) {
     }, {
       title: 'STATUS',
       dataIndex: 'status',
+      render:text => <Tag color={status[text].color}>{status[text].text}</Tag>,
     }, {
       title: 'DATE',
       dataIndex: 'date',
+      render:text => new Date(text).format('yyyy-MM-dd'),
     }, {
       title: 'PRICE',
       dataIndex: 'price',
+      render:(text,it) => <span style={{color:status[it.status].color}}>${text}</span>,
     }
   ]
   return (
     <div className={styles.recentsales}>
-      <Table columns={columns} key={(record,key)=>key} dataSource={props.data}/>
+      <Table pagination={false} columns={columns} key={(record,key)=>key} dataSource={props.data.filter((item,key) => key<5)}/>
     </div>
   )
 }
diff --git a/src/components/dashboard/recentSales.less b/src/components/dashboard/recentSales.less
index 9146181..2e47c63 100644
--- a/src/components/dashboard/recentSales.less
+++ b/src/components/dashboard/recentSales.less
@@ -1 +1,7 @@
 @import "../vars.less";
+.recentsales{
+  :global .ant-table-thead > tr > th{
+    background: #fff;
+    border-bottom: solid 1px @border-color-base;
+  }
+}
diff --git a/src/components/layout/common.less b/src/components/layout/common.less
index 7befa29..bd9d22c 100644
--- a/src/components/layout/common.less
+++ b/src/components/layout/common.less
@@ -16,18 +16,18 @@ body {
 }
 
 ::-webkit-scrollbar-thumb {
-  width: 7px;
-  background-color: #b4babf;
-  border-radius: 7px;
+  width: 2px;
+  background-color: rgba(0,0,0,.2);
+  border-radius: 2px;
 }
 
 ::-webkit-scrollbar {
-  width: 7px;
-  height: 7px;
+  width: 2px;
+  height: 2px;
 }
 
 ::-webkit-scrollbar-track {
-  width: 15px;
+  width: 5px;
 }
 
 ::-webkit-scrollbar:hover {
diff --git a/src/routes/dashboard.js b/src/routes/dashboard.js
index 123b2a4..40e0eae 100644
--- a/src/routes/dashboard.js
+++ b/src/routes/dashboard.js
@@ -41,7 +41,7 @@ function Dashboard({dashboard}) {
             <Card bordered={false} className={styles.quote} bodyStyle={{
               padding: 0,
               height: 204,
-              background: color.red
+              background: color.peach
             }}>
               <Quote {...quote}/>
             </Card>
@@ -50,7 +50,6 @@ function Dashboard({dashboard}) {
       </Col>
       <Col lg={12} md={24}>
         <Card bordered={false} bodyStyle={{
-          padding: 0,
           height: 432,
           background: '#fff'
         }}>
diff --git a/src/utils/theme.js b/src/utils/theme.js
index 1f762a3..b2c3225 100644
--- a/src/utils/theme.js
+++ b/src/utils/theme.js
@@ -4,6 +4,8 @@ module.exports = {
     blue:'#8fc9fb',
     purple:'#d897eb',
     red:'#f69899',
+    yellow:'#f8c82e',
+    peach:'#f797d6',
     borderBase:'#e5e5e5',
     borderSplit:'#f4f4f4'
   }