WithNotes.js 6.5 KB
/**
 * Created by yzdd on 2018/3/17.
 */
import React, {Component} from 'react';
import {
  View,
  Text,
  StyleSheet,
  Image,
  TextInput,
  TouchableOpacity,
  SectionList
} from 'react-native';
import {line, publicStyle, width} from "../utils/publiscStyle";
import Row from "../components/Row";
import AddNote from "./note/AddNote";
import moment from "moment";
import "moment/locale/zh-cn";
import NotesDetail from "./note/NotesDetail";

const styles = StyleSheet.create({
  searchBtn: {
    width: width,
    height: 37,
    alignItems: 'center',
    justifyContent: 'flex-end',
    backgroundColor: "#FFFFFF"
  },
  btnCon: {
    width: width - 16,
    height: 28,
    alignItems: 'center',
    justifyContent: 'center',
    backgroundColor: "#eeeff3",
    borderRadius: 3
  },
  font7: {
    fontSize: 14,
    color: "#999999"
  },
  info: {
    width,
    height: 34,
    backgroundColor: "#FFFFFF",
    flexDirection: "row",
    alignItems: 'center',
    justifyContent: "space-between",
    paddingLeft: 15,
    paddingRight: 15
  },
  font1: {
    fontSize: 12,
    color: "#999999"
  },
  item: {
    width,
    height: 57,
    backgroundColor: "#FFFFFF",
    flexDirection: "row",
    alignItems: 'center',
    paddingLeft: 15,
    paddingRight: 15
  },
  icon1: {
    width: 36,
    height: 36,
    marginRight: 15,
  },
  font2: {
    fontSize: 17,
    color: "#666666"
  },
  itemCon: {
    flex: 1
  },
  icon2: {
    width: 13,
    height: 11,
    marginLeft: 6
  },
  itemConTop: {
    flexDirection: 'row',
    alignItems: 'center'
  },
  font3: {
    fontSize: 17,
    color: "#333333"
  },
  font4: {
    fontSize: 12,
    color: "#808080"
  },
  addItem: {
    width,
    height: 57,
    backgroundColor: "#FFFFFF",
    flexDirection: 'row',
    alignItems: 'center',
    paddingLeft: 15,
    paddingRight: 15
  },
  inputItem: {
    width: width - 39 - 15 - 12 - 15,
    height: 57,
    borderBottomWidth: line,
    borderBottomColor: "#eeeeee",
    justifyContent: 'center'
  },
  icon6: {
    width: 39,
    height: 37,
    marginRight: 12
  },
  addInput: {
    fontSize: 17,
    padding: 0,
    textAlignVertical: "center",
    flex: 1
  },
  font16: {
    fontSize: 17,
    color: "#333333"
  },
  font19: {
    fontSize: 17,
    color: "#bdbdbd"
  }
});

const bangong = require("../assets/bangong.png");
const car = require("../assets/car.png");
const food = require("../assets/food.png");
const fuli = require("../assets/fuli.png");
const other = require("../assets/other.png");
const shangwu = require("../assets/shangwu.png");
const zhusu = require("../assets/zhusu.png");
const addCircle = require("../assets/addCircle.png");
const fujian = require("../assets/fujian.png");

const sections = [
  {
    key: "2017-12-21  星期五",
    data: [{type: bangong, fujian: false}, {type: car, fujian: false}, {type: food, fujian: true},]
  },
  {
    key: "2017-12-20  星期五",
    data: [{type: fuli, fujian: true}, {type: other, fujian: false}, {type: shangwu, fujian: true},]
  },
  {key: "2017-12-19  星期五", data: [{type: zhusu, fujian: false},]},
  {key: "2017-12-18  星期五", data: [{type: zhusu, fujian: false},]},
  {key: "2017-12-17  星期五", data: [{type: zhusu, fujian: false},]}
];

export default class WithNotes extends Component {

  static navigationOptions = ({navigation}) => {
    return {
      title: "随手记"
    }
  };

  componentWillMount() {

    console.log(moment(new Date()).format("YYYY-MM-DD dddd"))
    if (sections[0].key !== moment(new Date()).format("YYYY-MM-DD dddd")) {
      sections.unshift(
        {
          key: moment(new Date()).format("YYYY-MM-DD dddd"),
          data: [
            {type: "add"},
          ]
        }
      )
    } else {
      sections[0].data.unshift({type: "add"})
    }

  }

  constructor(props) {
    super(props);
    this.state = {
      damping: 1 - 0.6,
      tension: 300
    };
  }

  sectionHeader = (info) => {
    console.log(info)
    return (
      <View style={styles.info}>
        <Text style={styles.font1}>{info.section.key}</Text>
        <Text style={styles.font1}>支出:20.00</Text>
      </View>
    )
  };

  //跳转到消费明细
  toDetail = () => {
    const {navigate} = this.props.navigation;
    navigate("NotesDetail");
  };

  toAddDetail = () => {
    const {navigate} = this.props.navigation;
    navigate("AddNote", {type: 'add'})
  };
  _renderItem = (info) => {
    if (info.item.type === "add") {
      return (
        <TouchableOpacity style={styles.addItem} onPress={this.toAddDetail}>
          <Image
            source={addCircle}
            resizeMode={"contain"}
            style={styles.icon6}
          />
          <View style={styles.inputItem}>
            <Text style={styles.font19}>新增随手记</Text>
          </View>
        </TouchableOpacity>
      )
    }
    return (
      <Row
        onButtonPress={this.btnDelete}
        damping={this.state.damping}
        tension={this.state.tension}>
        <TouchableOpacity style={styles.item} onPress={this.toDetail}>
          <Image
            resizeMode={"contain"}
            source={info.item.type}
            style={styles.icon1}
          />
          <View style={{
            flex: 1,
            height: 55,
            flexDirection: 'row',
            alignItems: 'center',
            borderBottomWidth: line,
            borderBottomColor: "#eeeeee"
          }}>
            <View style={styles.itemCon}>
              <View style={styles.itemConTop}>
                <Text style={styles.font3}>餐饮</Text>
                {
                  info.item.fujian &&
                  <Image
                    source={fujian}
                    resizeMode={"contain"}
                    style={styles.icon2}
                  />
                }

              </View>
              <Text style={styles.font4} numberOfLines={1}>差旅费-餐饮-产品&项目&研发</Text>
            </View>
            <Text style={styles.font2}>20.00</Text>
          </View>
        </TouchableOpacity>
      </Row>

    )
  };

  render() {
    return (
      <View style={publicStyle.container}>
        <View style={styles.searchBtn}>
          <TouchableOpacity style={styles.btnCon} onPress={this.toSearch}>
            <Text style={styles.font7}>搜索</Text>
          </TouchableOpacity>
        </View>


        <SectionList
          renderItem={this._renderItem}
          renderSectionHeader={this.sectionHeader}
          sections={sections}
          keyExtractor={(item, index) => index}
          bounces={false}
          showsVerticalScrollIndicator={false}
        />

      </View>
    );
  }
}