CostDetail.js 5.2 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217
  1. import React, { Component } from 'react'
  2. import {
  3. StyleSheet,
  4. ScrollView,
  5. View,
  6. Image,
  7. ImageBackground,
  8. Text,
  9. Dimensions,
  10. StatusBar,
  11. TouchableOpacity,
  12. PixelRatio,
  13. FlatList,
  14. } from 'react-native'
  15. import { connect } from 'react-redux'
  16. import { Button } from '../../../components'
  17. import Icon from '../../../components/Iconfont/Iconfont'
  18. import { NavigationActions, createAction } from '../../../utils'
  19. import { ReturnDate } from '../../../utils/utils'
  20. import { HeaderView } from '../../common/HeaderView'
  21. const { width, height } = Dimensions.get('window')
  22. @connect(({ theme, mine_header }) => ({ ...theme, ...mine_header }))
  23. class CostDetail extends Component {
  24. constructor(props) {
  25. super(props)
  26. this.state = {}
  27. // console.disableYellowBox = true;
  28. }
  29. ViewList(itemLeft, itemRight) {
  30. return (
  31. <View
  32. style={{
  33. flexDirection: 'row',
  34. justifyContent: 'space-between',
  35. paddingVertical: 10,
  36. }}
  37. >
  38. <Text
  39. style={{
  40. fontSize: 14,
  41. lineHeight: 20,
  42. letterSpacing: 0.17,
  43. color: '#999',
  44. }}
  45. >
  46. {itemLeft}
  47. </Text>
  48. <Text
  49. style={{
  50. fontSize: 14,
  51. lineHeight: 20,
  52. letterSpacing: 0.17,
  53. color: '#333',
  54. }}
  55. >
  56. {itemRight}
  57. </Text>
  58. </View>
  59. )
  60. }
  61. jobIdList(item) {
  62. return (
  63. <View style={{ flexDirection: 'row', marginTop: 5 }}>
  64. <Text
  65. style={{
  66. flex: 3,
  67. fontSize: 13,
  68. lineHeight: 18,
  69. color: '#666',
  70. marginRight: 10,
  71. }}
  72. numberOfLines={1}
  73. >
  74. {item.customerOrderId}
  75. </Text>
  76. <Text style={{ flex: 2, fontSize: 13, lineHeight: 18, color: '#666' }}>
  77. {ReturnDate(item.billDate, true)}
  78. </Text>
  79. <Text
  80. style={{
  81. flex: 2,
  82. fontSize: 13,
  83. lineHeight: 18,
  84. color: '#666',
  85. textAlign: 'right',
  86. }}
  87. >
  88. {item.flushAmount}
  89. </Text>
  90. </View>
  91. )
  92. }
  93. render() {
  94. const { appTheme, castDetail } = this.props,
  95. { castData } = this.props.navigation.state.params
  96. return (
  97. <View
  98. style={[
  99. styles.container,
  100. { backgroundColor: appTheme.backgroundColor },
  101. ]}
  102. >
  103. <StatusBar
  104. animated={true}
  105. barStyle={appTheme.barStyle}
  106. // barStyle={"dark-content"}
  107. backgroundColor={'transparent'}
  108. translucent={true}
  109. />
  110. {HeaderView(this.props.dispatch, '费用余额')}
  111. <View style={{ backgroundColor: '#FFF', paddingHorizontal: 10 }}>
  112. {this.ViewList('单据号', castData.billCode)}
  113. {this.ViewList('单据状态', castData.billStatusName)}
  114. {this.ViewList('冲抵方式', castData.castTypeName)}
  115. {this.ViewList('销售组织', castData.saleOrgName)}
  116. {/* {this.ViewList("按销售组织冲抵", "是")} */}
  117. {/* {this.ViewList("产品线", "A产品线")} */}
  118. <View style={{ paddingVertical: 10, flexDirection: 'row' }}>
  119. <Text
  120. style={{
  121. fontSize: 14,
  122. lineHeight: 20,
  123. letterSpacing: 0.17,
  124. color: '#999',
  125. marginRight: 20,
  126. }}
  127. >
  128. 备注
  129. </Text>
  130. <Text
  131. style={{
  132. flex: 1,
  133. fontSize: 14,
  134. lineHeight: 20,
  135. letterSpacing: 0.17,
  136. color: '#333',
  137. }}
  138. >
  139. {castData.remark}
  140. </Text>
  141. </View>
  142. </View>
  143. <View
  144. style={{
  145. marginTop: 10,
  146. backgroundColor: '#FFF',
  147. padding: 10,
  148. }}
  149. >
  150. <View style={{ flexDirection: 'row' }}>
  151. <Text
  152. style={{ flex: 3, fontSize: 13, lineHeight: 18, color: '#666' }}
  153. >
  154. 订货单编码
  155. </Text>
  156. <Text
  157. style={{
  158. flex: 2,
  159. fontSize: 13,
  160. lineHeight: 18,
  161. color: '#666',
  162. marginLeft: 10,
  163. }}
  164. >
  165. 订单日期
  166. </Text>
  167. <Text
  168. style={{
  169. flex: 2,
  170. fontSize: 13,
  171. lineHeight: 18,
  172. color: '#666',
  173. textAlign: 'right',
  174. }}
  175. >
  176. 冲抵金额
  177. </Text>
  178. </View>
  179. <FlatList
  180. keyExtractor={(item, index) => index}
  181. data={castDetail}
  182. renderItem={({ item, index }) => this.jobIdList(item, index)}
  183. // legacyImplementation={true}
  184. />
  185. </View>
  186. </View>
  187. )
  188. }
  189. }
  190. const styles = StyleSheet.create({
  191. container: {
  192. flex: 1,
  193. },
  194. pngstyle: {
  195. width: width,
  196. },
  197. buttonStyle: {
  198. backgroundColor: 'transparent',
  199. flexDirection: 'column',
  200. alignItems: 'center',
  201. },
  202. buttonText: {
  203. marginTop: 9,
  204. fontSize: 14,
  205. color: '#FFF',
  206. },
  207. })
  208. export default CostDetail