添加根據日期统计收入支出函数

src/case/BillApp/src/App.css

@@ -1,4 +1,12 @@
 .billApp .pageWrap{
     position: relative;
-    z-index: 2
-}
+    z-index: 2;
+    height: 100%;
+}
+.scrollPage{
+    height: 440px;
+    overflow-y: hidden;
+    overflow:scroll;
+}
+
+

src/case/BillApp/src/App.js

@@ -7,7 +7,7 @@ import config from './api/url_config'
 
 import NavBars from './components/App/NavBar'
 import TabBarBottom from './components/App/TabBarBottom'
-import HomePage from './components/Bill/Bill'
+import Bill from './components/Bill/Bill'
 import Assets from './components/Assets/Assets'
 import My from './components/My/My'
 
@@ -22,7 +22,7 @@ class BillApp extends Component{
     //初始化状态
     this.state={
       page:"bill",
-      navBarText:'账单'
+      navBarText:'微记账本'
     }
 
     this.changePage=this.changePage.bind(this)
@@ -31,6 +31,7 @@ class BillApp extends Component{
 
   //更改页面
   changePage(page){
+    console.log(page)
     this.setState({page})
   }
 
@@ -51,19 +52,25 @@ class BillApp extends Component{
       case ('bill'):
         return(
           <div className="pageWrap">
-            <HomePage />
+            <div className="scrollPage">
+              <Bill setNavBarText={this.setNavBarText}/>
+            </div>
           </div>
           )
       case('assets'):
           return(
             <div className="pageWrap">
-              <Assets />
+              <div className="scrollPage">
+                <Assets setNavBarText={this.setNavBarText}/>
+              </div>
             </div>
           )
      case('my'):
           return(
             <div className="pageWrap">
-              <My />
+              <div className="scrollPage">
+                <My setNavBarText={this.setNavBarText}/>
+              </div>
             </div>
           )
       default:
@@ -72,7 +79,7 @@ class BillApp extends Component{
           )
     }
   }
-  
+
   render(){
     const changePage=this.changePage
     return(
@@ -80,7 +87,7 @@ class BillApp extends Component{
         <div className="phone6s">
           <div className="App billApp">
             <PageContext.Provider value={changePage}>
-              <NavBars navBarText={this.state.navBarText}/>
+              <NavBars navBarText={this.state.navBarText} changePage={this.changePage}/>
               {this.renderPage(this.state.page)}
               {this.renderBottom()}
             </PageContext.Provider>

src/case/BillApp/src/components/App/NavBar.jsx

@@ -13,7 +13,7 @@ export default class NavBars extends Component{
                 <NavBar
                 mode="dark"
                 icon={<Icon type="left" />}
-                onLeftClick={() => this.goBack()}
+                onLeftClick={() => this.props.changePage('bill')}
                 rightContent={[
                     <Icon key="0" type="search" style={{ marginRight: '16px' }} />,
                     <Icon key="1" type="ellipsis" />,

src/case/BillApp/src/components/Assets/Assets.jsx

@@ -1,6 +1,9 @@
 import React, { Component } from 'react'
 
 export default class Assets extends Component {
+  componentWillMount(){
+    this.props.setNavBarText('资产统计')
+  }
   render() {
     return (
       <div>

src/case/BillApp/src/components/Bill/Bill.css

@@ -26,6 +26,6 @@
 }
 
 .itemWrap > div:nth-child(2){
-    padding-left: 175px;
+    padding-left: 133px;
 }
 

src/case/BillApp/src/components/Bill/Bill.jsx

@@ -6,12 +6,16 @@ import IconList from './IconList'
 
 import {graphqls} from '../../api/graphql_request'
 import {getBill} from '../../api/graphql/bills'
+import {getMonDayAndSunDay} from '../../untils/date'
+
 
 
 
-import './Bill.css'
 
+import './Bill.css'
+//console.log(new Date().toLocaleString('chinese', { hour12: false }).slice(0,10))
 class Bill  extends Component{
+
     constructor(props){
         super(props)
         const month =new Date().getMonth()+1
@@ -19,31 +23,49 @@ class Bill  extends Component{
         this.state={
             month,
             year,
+            weekBottom:'',
+            weekTop:'',
             bills:[]
         }
     }
 
+
     getBills(){
         graphqls(getBill,{}).then((e)=>{
-            console.log(e.billbyprops)
+            console.log('1----',e.billbyprops)
             this.setState({
                 bills:e.billbyprops
             })
         })
     }
     componentDidMount(){
-        console.log('组件已加载')
+        //console.log('组件已加载')
+        this.props.setNavBarText('微记账本')
         this.getBills()
+        let today=new Date().toLocaleString('chinese', { hour12: false }).slice(0,10)
+
+        // 1: "118-12-10"
+        // 2: "118-12-16"
+        //console.log('110',getMonDayAndSunDay(today))
+        let result=getMonDayAndSunDay(today)
+
+        let weekBottom='20' + result[1].slice(1,10)
+        let weekTop='20'+ result[2].slice(1,10)
+        //console.log(weekTop,weekBottom)
+        this.setState({weekTop,weekBottom})
     }
+
     render(){
+        const weekTop=this.state.weekTop
+        const weekBottom=this.state.weekBottom
         return(
             <div>
-                <div className="dateWrap"><span className="month"> {this.state.month} </span> / {this.state.year}</div>
-               <Lists />
+               <div className="dateWrap"><span className="month"> {this.state.month} </span> / {this.state.year}</div>
+               <Lists bills={this.state.bills} year={this.state.year} month={this.state.month}/>
                <div className="buttonWrap">
                 <Buttons />
                </div>
-               <IconList />
+               <IconList bills={this.state.bills} week={{weekTop,weekBottom}}/>
             </div>
         )
     }

src/case/BillApp/src/components/Bill/Button.jsx

@@ -4,7 +4,8 @@ import { Button, WhiteSpace, WingBlank } from 'antd-mobile';
 
 export default function Buttons(){
     let buttonStyle={
-        background:"green"
+        background:"green",
+        margin:'0 10px'
     }
     return (
         <WingBlank>

src/case/BillApp/src/components/Bill/IconList.jsx

@@ -1,14 +1,92 @@
 import React, { Component } from 'react';
 import { List } from 'antd-mobile';
-
+import {collectByDate} from '../../untils/date'
 const Item = List.Item;
 
 
 
 export default class IconList extends Component{
-    // constructor(props){
-    //     super(props)
-    // }
+    constructor(props){
+        super(props)
+        this.state={
+            dayPay:0,
+            dayIncome:0.00,
+            weekPay:0.00,
+            weekIncome:0.00,
+            monthPay:0.00,
+            monthIncome:0.00,
+            allPay:0.00,
+            allIncome:0.00
+        }
+    }
+    componentWillReceiveProps(props){
+        let {bills,week}=props
+
+        this.getDayCollect(bills)
+        this.getWeekCollect(bills,week)
+        this.getMonthCollect(bills)
+        this.getAllCollect(bills)
+    }
+
+    
+    getDayCollect(bills=[]){
+        let day=new Date().toDateString()
+        console.log(day)
+
+        bills.forEach((item)=>{
+            let itemDay=new Date(item.createdAt).toDateString()
+            if(itemDay===day){
+                if(item.class==='pay'){
+                    this.setState({
+                        dayPay:item.money
+                    })
+                }else{
+                    this.setState({
+                        dayIncome:item.money
+                    })
+                }
+                return 0
+            }
+        })
+
+    }
+
+    getWeekCollect(bills,week){
+
+        let bottom=new Date(week.weekBottom).getTime(),
+            top=new Date(week.weekTop).getTime();
+       // console.log(bottom,top)
+        let weeks=collectByDate(bills,bottom,top)
+        //console.log('weeks',weeks)
+        this.setState({
+            weekPay:weeks.Pay,
+            weekIncome:weeks.Income
+        })
+    }
+
+    getMonthCollect(bills){
+        const month =new Date().getMonth()+1
+        const year=new Date().getFullYear()
+        let bottom=new Date(year+'/'+month+'/1').getTime(),
+        top=new Date(year+'/'+month+'/31').getTime();
+        let collect=collectByDate(bills,bottom,top)
+        this.setState({monthPay:collect.Pay,monthIncome:collect.Income})
+    }
+
+    getAllCollect(bills=[]){
+        let allPay=0,allIncome=0;
+        bills.forEach((item)=>{
+            if(item.class==='pay'){
+                allPay+=item.money
+            }else{
+                allIncome+=item.money
+            }
+        })
+
+        this.setState({allPay,allIncome})
+    }
+
+    
 
     render(){
         return (
@@ -22,8 +100,8 @@ export default class IconList extends Component{
                         <div className="itemWrap">
                             <div>今日</div>
                             <div>
-                                <div>收入:0.00</div>
-                                <div>支出:0.00</div>
+                                <div>收入:{this.state.dayIncome}</div>
+                                <div>支出:{this.state.dayPay}</div>
                             </div>
                         </div>
                     </Item>
@@ -37,8 +115,8 @@ export default class IconList extends Component{
                     <div className="itemWrap">
                             <div>本周</div>
                             <div>
-                                <div>收入:0.00</div>
-                                <div>支出:0.00</div>
+                                <div>收入:{this.state.weekIncome}</div>
+                                <div>支出:{this.state.weekPay}</div>
                             </div>
                         </div>
                     </Item>
@@ -52,8 +130,8 @@ export default class IconList extends Component{
                     <div className="itemWrap">
                             <div>本月</div>
                             <div>
-                                <div>收入:0.00</div>
-                                <div>支出:0.00</div>
+                                <div>收入:{this.state.monthIncome}</div>
+                                <div>支出:{this.state.monthPay}</div>
                             </div>
                         </div>
                     </Item>
@@ -67,8 +145,8 @@ export default class IconList extends Component{
                     <div className="itemWrap">
                             <div>所有</div>
                             <div>
-                                <div>收入:0.00</div>
-                                <div>支出:0.00</div>
+                                <div>收入:{this.state.allIncome}</div>
+                                <div>支出:{this.state.allPay}</div>
                             </div>
                         </div>
                     </Item>

src/case/BillApp/src/components/Bill/List.jsx

@@ -1,18 +1,32 @@
 import React, { Component } from 'react';
 import { List } from 'antd-mobile';
+import {collectByDate} from '../../untils/date'
 
 const Item = List.Item;
 
 export default class Lists extends React.Component {
   state = {
     disabled: false,
+    monthPay:0.00,
+    monthIncome:0.00
+  }
+
+  componentWillReceiveProps(props){
+    let {bills=[],year,month}=props
+    //console.log(bills)
+    let bottom=new Date(year+'/'+month+'/1').getTime(),
+        top=new Date(year+'/'+month+'/31').getTime();
+    let collect=collectByDate(bills,bottom,top)
+    this.setState({monthPay:collect.Pay,monthIncome:collect.Income})
+    
+    //console.log(monthPay,monthIncome)
   }
 
   render() {
     return (
       <List className="my-list">
-        <Item extra={'￥0.00'} >本月收入</Item>
-        <Item extra={'￥0.00'} >本月支出</Item>
+        <Item extra={'￥'+this.state.monthIncome} >本月收入</Item>
+        <Item extra={'￥'+this.state.monthPay} >本月支出</Item>
       </List>
       )
     }

src/case/BillApp/src/components/My/My.jsx

@@ -1,6 +1,9 @@
 import React, { Component } from 'react'
 
 export default class My extends Component {
+  componentWillMount(){
+    this.props.setNavBarText('我的')
+  }
   render() {
     return (
       <div>

src/case/BillApp/src/untils/date.js

@@ -0,0 +1,56 @@
+export function getMonDayAndSunDay(datevalue){  
+    var dateValue = datevalue;  
+    var arr = dateValue.split("/")  
+    //月份-1 因为月份从0开始 构造一个Date对象  
+    var date = new Date(arr[0],arr[1]-1,arr[2]);  
+  
+    var dateOfWeek = date.getDay();//返回当前日期的在当前周的某一天（0～6--周日到周一）  
+  
+    var dateOfWeekInt = parseInt(dateOfWeek,10);//转换为整型  
+  
+    if(dateOfWeekInt===0){//如果是周日  
+        dateOfWeekInt=7;  
+    }  
+    var aa = 7-dateOfWeekInt;//当前于周末相差的天数  
+  
+    var temp2 = parseInt(arr[2],10);//按10进制转换，以免遇到08和09的时候转换成0  
+    var sunDay = temp2+aa;//当前日期的周日的日期  
+    var monDay = sunDay-6//当前日期的周一的日期  
+  
+    var startDate = new Date(arr[0],arr[1]-1,monDay);  
+    var endDate = new Date(arr[0],arr[1]-1,sunDay);  
+  
+    var sm = parseInt(startDate.getMonth())+1;//月份+1 因为月份从0开始  
+    var em = parseInt(endDate.getMonth())+1;  
+  
+//  alert("星期一的日期："+startDate.getYear()+"-"+sm+"-"+startDate.getDate());  
+//  alert("星期日的日期："+endDate.getYear()+"-"+em+"-"+endDate.getDate());  
+    var start = startDate.getYear()+"/"+sm+"/"+startDate.getDate();  
+    var end = endDate.getYear()+"/"+em+"/"+endDate.getDate();  
+    var result = new Array([]);  
+    result.push(start);  
+    result.push(end); 
+      
+    return result;  
+}
+
+export function collectByDate(arr=[],bottom,top){
+
+    //console.log('log',bottom,top)
+    let Pay=0,Income=0;
+    arr=arr.filter((item)=>{
+        return (new Date(item.createdAt).getTime()>=bottom&&new Date(item.createdAt).getTime()<=top)
+    })
+
+    arr.forEach(item => {
+        if(item.class==='pay'){
+            Pay+=item.money
+        }else{
+            Income+=item.money
+        }
+    })
+
+    return{Pay,Income}
+}
+
+