xntalk / xntalk-rnapp

/**
 * Created by yzdd on 2018/3/18.
 */
import React, {Component} from 'react';
import {
  View,
  Text,
  StyleSheet,
  Image,
  TextInput,
  TouchableOpacity
} from 'react-native';
import {line, width} from '../../utils/publiscStyle';

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: "#FFFFFF"
  },
  headerRightBtn: {
    paddingRight: 15
  },
  font1: {
    fontSize: 18,
    color: "#ffffff"
  },
  topView: {
    width,
    height: 67,
    flexDirection: "row",
    alignItems: "center"
  },
  item: {
    width,
    height: 67,
    backgroundColor: "#FFFFFF",
    flexDirection: "row",
    alignItems: 'center',
    paddingLeft: 15,
    paddingRight: 15,
    borderBottomWidth: line,
    borderBottomColor: "#eeeeee"
  },
  icon1: {
    width: 36,
    height: 36,
    marginRight: 15,
  },
  font2: {
    fontSize: 17,
    color: "#000000"
  },
  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"
  },
  infoView: {
    flex: 1,
  },
  lineItem: {
    flexDirection: 'row',
    paddingLeft: 15,
    paddingRight: 15,
    marginTop: 17
  },
  leftLine: {
    width: 102 - 15,
  },
  rightLine: {
    width: width - (102 - 15) - 15,
  },
  font5: {
    fontSize: 14,
    color: "#808080"
  },
  font6: {
    fontSize: 14,
    color: "#000000"
  },
  icon3: {
    width: 50,
    height: 50,
    marginRight: 20,
    marginTop: 10
  }
});

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 Mask = require("../../assets/Mask.png");


export default class NotesDetail extends Component {
  static navigationOptions = ({navigation}) => {
    return {
      title: "消费明细",
      headerRight:
        <TouchableOpacity style={styles.headerRightBtn} onPress={() => navigation.state.params.rightClick()}>
          <Text style={styles.font1}>编辑</Text>
        </TouchableOpacity>
    }
  };

  componentDidMount() {
    this.props.navigation.setParams({
      rightClick: () => this.rightClick()
    })
  }

  rightClick = () => {
    const {navigate} = this.props.navigation;
    navigate("AddNote", {type: "edit"});
  };

  render() {
    return (
      <View style={styles.container}>
        <View style={styles.item}>
          <Image
            resizeMode={"contain"}
            source={car}
            style={styles.icon1}
          />
          <View style={styles.itemCon}>
            <View style={styles.itemConTop}>
              <Text style={styles.font3}>餐饮</Text>
              {
                false &&
                <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>

        <View style={styles.infoView}>
          <View style={styles.lineItem}>
            <View style={styles.leftLine}>
              <Text style={styles.font5}>经营单元</Text>
            </View>
            <View style={styles.rightLine}>
              <Text style={styles.font6}>苏州企新动信息技术有限公司</Text>
            </View>
          </View>
          <View style={styles.lineItem}>
            <View style={styles.leftLine}>
              <Text style={styles.font5}>日期</Text>
            </View>
            <View style={styles.rightLine}>
              <Text style={styles.font6}>2017-09-09 12:34</Text>
            </View>
          </View>
          <View style={styles.lineItem}>
            <View style={styles.leftLine}>
              <Text style={styles.font5}>备注信息</Text>
            </View>
            <View style={styles.rightLine}>
              <Text style={[styles.font6, {lineHeight: 16}]}>每消费10.00元，赠送1积分</Text>
              <Text style={[styles.font6, {lineHeight: 16}]}>每使用1积分，抵扣1.00元</Text>
              <Text style={[styles.font6, {lineHeight: 16}]}>会员可享受免费品尝新品机会</Text>
            </View>
          </View>
          <View style={styles.lineItem}>
            <View style={styles.leftLine}>
              <Text style={styles.font5}>所属项目</Text>
            </View>
            <View style={styles.rightLine}>
              <Text style={styles.font6}>国发app</Text>
            </View>
          </View>
          <View style={styles.lineItem}>
            <View style={styles.leftLine}>
              <Text style={styles.font5}>商家名称</Text>
            </View>
            <View style={styles.rightLine}>
              <Text style={styles.font6}>杨过生煎</Text>
            </View>
          </View>
          <View style={styles.lineItem}>
            <View style={styles.leftLine}>
              <Text style={styles.font5}>税率</Text>
            </View>
            <View style={styles.rightLine}>
              <Text style={styles.font6}>0.3</Text>
            </View>
          </View>
          <View style={styles.lineItem}>
            <View style={styles.leftLine}>
              <Text style={styles.font5}>附件</Text>
            </View>
            <View style={[styles.rightLine, {flexDirection: "row", flexWrap: "wrap"}]}>
              <Image
                source={Mask}
                resizeMode={"contain"}
                style={styles.icon3}
              />
              <Image
                source={Mask}
                resizeMode={"contain"}
                style={styles.icon3}
              />
              <Image
                source={Mask}
                resizeMode={"contain"}
                style={styles.icon3}
              />
            </View>
          </View>
        </View>

      </View>
    );
  }
}