mobile / YH_RNComponent · Commits

Go to a project

Authored by 孙凯
Commit f8af50bce7f47e9a83aa0a718dc695ddd1ebf8f0 2 parents ccb8f46e d2d52636

Merge branch '5.6.0' of http://git.yoho.cn/mobile/YH_RNComponent into 5.6.0

Inline Side-by-side
Showing 10 changed files with 657 additions and 190 deletions
@@ -8,68 +8,89 @@ import ReactNative, { @@ -8,68 +8,89 @@ import ReactNative, {
8 Dimensions, 8 Dimensions,
9 PixelRatio, 9 PixelRatio,
10 TouchableOpacity, 10 TouchableOpacity,
  11 + ListView,
11 } from 'react-native'; 12 } from 'react-native';
12 13
13 import Immutable, {Map} from 'immutable'; 14 import Immutable, {Map} from 'immutable';
14 import Toast from '../../../common/components/Toast'; 15 import Toast from '../../../common/components/Toast';
  16 +import MyOrderDetailPayListCell from './MyOrderDetailPayListCell';
15 17
16 18
17 export default class MyOrderDetail extends React.Component { 19 export default class MyOrderDetail extends React.Component {
18 constructor(props) { 20 constructor(props) {
19 super(props); 21 super(props);
  22 + this.dataSource = new ListView.DataSource({
  23 + rowHasChanged: (r1, r2) => !Immutable.is(r1, r2),
  24 + });
  25 + this.renderRow = this.renderRow.bind(this);
  26 + }
  27 +
  28 +
  29 + renderRow(rowData, sectionID, rowID, highlightRow) {
  30 + return (
  31 + <MyOrderDetailPayListCell
  32 + data={rowData}
  33 + onPressOrder={this.props.onPressOrder}
  34 +
  35 + />
  36 + );
20 } 37 }
21 38
22 render() { 39 render() {
23 40
24 - let bankName = "农业银行";  
25 - let cardNo = "4561";  
26 - let userName = "**聪";  
27 - let mobile = "*****5865";  
28 - let isMaster = false; 41 + let goodsName = "Adidas Originals KS full size";
  42 + let orderCode = "订单编号：165965646564 ";
  43 + let orderTime = "2015.12.13";
  44 + let orderMoney = "￥ 455";
  45 + let isOrderPaying = false;
  46 + let orderStateText = "还款中1/3";
  47 +
  48 + let colorStyle = isOrderPaying ? {color: '#444444'} : {color: '#b0b0b0'};
  49 +
  50 + let cardList = [{'a':'A'},{'a':'A'},{'a':'A'},{'a':'A'},{'a':'A'},{'a':'A'}];
  51 +
29 52
30 - let cardDesc = isMaster ? "主卡，用于支付验证和还款验证。" : "副卡，仅用于还款验证。";  
31 - let cardTip = isMaster ? "如果您更换银行预留手机号，请先新增其他还款银行卡，并将新增银行卡切换为主卡。然后解除绑定此卡，重新绑定即可。"  
32 - : "如果您更换银行预留手机号，请先将银行卡解除绑定，再次重新绑定即可。";  
33 53
34 return ( 54 return (
35 <View style={styles.container}> 55 <View style={styles.container}>
36 - <View style={styles.cardDetailContainer}>  
37 - <Image style={styles.cardDetailImg} source={require("../../image/bank/b-ABC.png")}/>  
38 - <Text style={styles.cardDetailName}>{bankName}</Text>  
39 - <Text style={styles.cardDetailNo}>储蓄卡 | 尾号{cardNo}</Text>  
40 - </View>  
41 - <View style={styles.cardInfoContainer}>  
42 - <Text style={styles.cardInfoLabel}>持卡人</Text>  
43 - <Text style={styles.cardInfoData}>{userName}</Text> 56 + <View style={styles.goodsInfoContainer}>
  57 + <Image style={styles.goodsImage} source={require("../../image/bank/bank-ABC.png")} />
  58 + <Text style={styles.goodsName} numberOfLines={1}>{goodsName}</Text>
  59 + <Text style={styles.orderCode} numberOfLines={1}>{orderCode}</Text>
  60 + <Text style={styles.orderTime} numberOfLines={1}>{orderTime}</Text>
44 </View> 61 </View>
45 - <View style={styles.cardInfoLine}></View>  
46 - <View style={styles.cardInfoContainer}>  
47 - <Text style={styles.cardInfoLabel}>预留手机号</Text>  
48 - <Text style={styles.cardInfoData}>{mobile}</Text> 62 + <View style={styles.splitLine}></View>
  63 + <View style={styles.installmentInfoContainer}>
  64 + <View style={styles.installmentInfoCell}>
  65 + <Text style={styles.installmentInfoCellText}>分期应还</Text>
  66 + <Text style={styles.installmentInfoCellText}>{"555"}</Text>
  67 + </View>
  68 + <View style={styles.installmentInfoCell}>
  69 + <Text style={styles.installmentInfoCellText}>分期服务费</Text>
  70 + <Text style={styles.installmentInfoCellText}>{"555"}</Text>
  71 + </View>
  72 + <View style={styles.installmentInfoCell}>
  73 + <Text style={styles.installmentInfoCellText}>总计应还</Text>
  74 + <Text style={styles.installmentInfoCellText}>{"555"}</Text>
  75 + </View>
49 </View> 76 </View>
50 - <View style={styles.cardInfoLine}></View>  
51 - <View style={styles.cardInfoContainer}>  
52 - <Text style={styles.cardInfoLabel}>分期银行</Text>  
53 - <Text style={styles.cardInfoData}>{cardDesc}</Text>  
54 - </View>  
55 - <View style={styles.cardTipContainer}>  
56 - <Text style={styles.cardTip}>{cardTip}</Text>  
57 - {  
58 - isMaster ? null :  
59 - <View style={styles.buttonContainer}>  
60 - <TouchableOpacity activeOpacity={1} onPress={() => {  
61 - this.props.onPressReleaseCard && this.props.onPressReleaseCard();}}>  
62 - <Text style={styles.releaseButton}>解除绑定</Text>  
63 - </TouchableOpacity>  
64 - <TouchableOpacity activeOpacity={1} onPress={() => { 77 + <View style={styles.splitLine}></View>
  78 + <View style={styles.splitBlank}></View>
  79 + <View style={styles.splitLine}></View>
  80 + <ListView
  81 + style={styles.payListContainer}
  82 + dataSource={this.dataSource.cloneWithRows(cardList)}
  83 + enableEmptySections={true}
  84 + renderRow={this.renderRow}
  85 + />
  86 + <View style={styles.splitLine}></View>
  87 + <View style={styles.bottomContainer}>
  88 + <TouchableOpacity activeOpacity={1} onPress={() => {
65 this.props.onPressChangeCard && this.props.onPressChangeCard();}}> 89 this.props.onPressChangeCard && this.props.onPressChangeCard();}}>
66 - <Text style={styles.changeButton}>切换为主卡</Text>  
67 - </TouchableOpacity>  
68 - </View>  
69 - } 90 + <Text style={styles.changeButton}>立即还款</Text>
  91 + </TouchableOpacity>
70 </View> 92 </View>
71 -  
72 - <Toast text="解绑成功" isVisible={false} /> 93 +
73 94
74 </View> 95 </View>
75 ); 96 );
@@ -85,102 +106,85 @@ let styles = StyleSheet.create({ @@ -85,102 +106,85 @@ let styles = StyleSheet.create({
85 backgroundColor: "#ffffff", 106 backgroundColor: "#ffffff",
86 }, 107 },
87 108
88 - cardDetailContainer:{ 109 + splitLine:{
89 width: width, 110 width: width,
90 - height: 60 * DEVICE_WIDTH_RATIO,  
91 - backgroundColor: "#f8555b", 111 + height: 0.5 * DEVICE_WIDTH_RATIO,
  112 + backgroundColor: "#b4b4b4",
92 }, 113 },
93 114
94 - cardDetailImg:{ 115 + splitBlank:{
  116 + width: width,
  117 + height: 15 * DEVICE_WIDTH_RATIO,
  118 + backgroundColor: "#f0f0f0",
  119 + },
  120 +
  121 + goodsInfoContainer:{
  122 + width: width,
  123 + height: 80 * DEVICE_WIDTH_RATIO,
  124 + },
  125 +
  126 + goodsImage:{
95 position: 'absolute', 127 position: 'absolute',
96 top: 10 * DEVICE_WIDTH_RATIO, 128 top: 10 * DEVICE_WIDTH_RATIO,
97 left: 15 * DEVICE_WIDTH_RATIO, 129 left: 15 * DEVICE_WIDTH_RATIO,
98 - width: 40 * DEVICE_WIDTH_RATIO,  
99 - height: 40 * DEVICE_WIDTH_RATIO, 130 + width: 45 * DEVICE_WIDTH_RATIO,
  131 + height: 60 * DEVICE_WIDTH_RATIO,
100 }, 132 },
101 133
102 - cardDetailName:{ 134 + goodsName:{
103 position: 'absolute', 135 position: 'absolute',
104 - top: 10 * DEVICE_WIDTH_RATIO,  
105 - left: 65 * DEVICE_WIDTH_RATIO,  
106 - width: 150 * DEVICE_WIDTH_RATIO,  
107 - height: 20 * DEVICE_WIDTH_RATIO,  
108 - fontSize: 15 * DEVICE_WIDTH_RATIO,  
109 - color: "white",  
110 - fontWeight: 'bold', 136 + top: 15 * DEVICE_WIDTH_RATIO,
  137 + left: 70 * DEVICE_WIDTH_RATIO,
  138 + color: "#444444",
  139 + fontSize: 12 * DEVICE_WIDTH_RATIO,
111 }, 140 },
112 141
113 - cardDetailNo:{ 142 + orderCode:{
114 position: 'absolute', 143 position: 'absolute',
115 top: 30 * DEVICE_WIDTH_RATIO, 144 top: 30 * DEVICE_WIDTH_RATIO,
116 - left: 65 * DEVICE_WIDTH_RATIO,  
117 - width: 150 * DEVICE_WIDTH_RATIO,  
118 - height: 30 * DEVICE_WIDTH_RATIO,  
119 - fontSize: 13 * DEVICE_WIDTH_RATIO,  
120 - color: "white",  
121 - },  
122 -  
123 - cardInfoContainer:{  
124 - width: width,  
125 - height: 44 * DEVICE_WIDTH_RATIO,  
126 - backgroundColor: "#ffffff",  
127 - flexDirection: 'row',  
128 - alignItems: 'center', 145 + left: 70 * DEVICE_WIDTH_RATIO,
  146 + color: "#444444",
  147 + fontSize: 12 * DEVICE_WIDTH_RATIO,
129 }, 148 },
130 149
131 - cardInfoLabel:{  
132 - width: 125 * DEVICE_WIDTH_RATIO,  
133 - paddingLeft: 15 * DEVICE_WIDTH_RATIO,  
134 - fontSize: 14 * DEVICE_WIDTH_RATIO, 150 + orderTime:{
  151 + position: 'absolute',
  152 + top: 50 * DEVICE_WIDTH_RATIO,
  153 + left: 70 * DEVICE_WIDTH_RATIO,
  154 + color: "#b0b0b0",
  155 + fontSize: 12 * DEVICE_WIDTH_RATIO,
135 }, 156 },
136 157
137 - cardInfoData:{  
138 - width: 150 * DEVICE_WIDTH_RATIO,  
139 - fontSize: 13 * DEVICE_WIDTH_RATIO,  
140 - },  
141 158
142 - cardInfoLine:{  
143 - width: width - 15 * DEVICE_WIDTH_RATIO,  
144 - height: 0.5 * DEVICE_WIDTH_RATIO,  
145 - marginLeft: 15 * DEVICE_WIDTH_RATIO,  
146 - backgroundColor: "#b4b4b4", 159 + installmentInfoContainer:{
  160 + width: width,
  161 + height: 60 * DEVICE_WIDTH_RATIO,
  162 + flexDirection: 'row',
147 }, 163 },
148 164
149 - cardTipContainer:{ 165 + installmentInfoCell:{
150 flex: 1, 166 flex: 1,
151 - backgroundColor: "#f0f0f0", 167 + justifyContent: 'center',
  168 + alignItems: 'center',
  169 + flexDirection: 'column',
152 }, 170 },
153 171
154 - cardTip: {  
155 - width: width,  
156 - paddingLeft: 15 * DEVICE_WIDTH_RATIO,  
157 - paddingRight: 10 * DEVICE_WIDTH_RATIO,  
158 - paddingTop: 10 * DEVICE_WIDTH_RATIO, 172 + installmentInfoCellText:{
  173 + color: "#444444",
159 fontSize: 12 * DEVICE_WIDTH_RATIO, 174 fontSize: 12 * DEVICE_WIDTH_RATIO,
160 - color: "#b0b0b0",  
161 }, 175 },
162 176
163 - buttonContainer:{ 177 + payListContainer:{
164 width: width, 178 width: width,
165 - height: 100,  
166 - flexDirection: 'row',  
167 - alignItems: 'center',  
168 - justifyContent: 'center', 179 + height: 200 * DEVICE_WIDTH_RATIO,
169 }, 180 },
170 181
171 - releaseButton:{  
172 - width: 130 * DEVICE_WIDTH_RATIO,  
173 - height: 44 * DEVICE_WIDTH_RATIO,  
174 - fontSize:14 * DEVICE_WIDTH_RATIO,  
175 - paddingTop:12 * DEVICE_WIDTH_RATIO,  
176 - marginRight: 8 * DEVICE_WIDTH_RATIO,  
177 - color: '#000000',  
178 - textAlign: 'center',  
179 - borderColor:'#444444',  
180 - borderWidth:2,  
181 - borderRadius: 6, 182 + bottomContainer:{
  183 + width: width,
  184 + height: 60 * DEVICE_WIDTH_RATIO,
182 }, 185 },
183 186
  187 +
184 changeButton:{ 188 changeButton:{
185 width: 130 * DEVICE_WIDTH_RATIO, 189 width: 130 * DEVICE_WIDTH_RATIO,
186 height: 44 * DEVICE_WIDTH_RATIO, 190 height: 44 * DEVICE_WIDTH_RATIO,
@@ -189,10 +193,10 @@ let styles = StyleSheet.create({ @@ -189,10 +193,10 @@ let styles = StyleSheet.create({
189 marginLeft: 8 * DEVICE_WIDTH_RATIO, 193 marginLeft: 8 * DEVICE_WIDTH_RATIO,
190 color: '#ffffff', 194 color: '#ffffff',
191 textAlign: 'center', 195 textAlign: 'center',
192 - borderColor:'#444444', 196 + borderColor:'#cc0009',
193 borderWidth:2, 197 borderWidth:2,
194 borderRadius: 6, 198 borderRadius: 6,
195 - backgroundColor:'#444444', 199 + backgroundColor:'#cc0009',
196 }, 200 },
197 201
198 202
  1 +'use strict';
  2 +import React from 'react';
  3 +import ReactNative, {
  4 + View,
  5 + Text,
  6 + Image,
  7 + StyleSheet,
  8 + Dimensions,
  9 + TouchableOpacity,
  10 +} from 'react-native';
  11 +
  12 +import Immutable, {Map} from 'immutable';
  13 +
  14 +export default class MyOrderDetailPayListCell extends React.Component {
  15 + constructor(props) {
  16 + super(props);
  17 + }
  18 +
  19 + render() {
  20 + let{cardNo, cardBank} = this.props.data;
  21 +
  22 + let goodsName = "Adidas Originals KS full size";
  23 + let goodsSkn = "FULXN 2526542";
  24 + let orderTime = "2015.12.13";
  25 + let orderMoney = "￥ 455";
  26 + let isOrderPaying = false;
  27 + let orderStateText = "还款中1/3";
  28 +
  29 + let colorStyle = isOrderPaying ? {color: '#444444'} : {color: '#b0b0b0'};
  30 +
  31 +
  32 + return(
  33 + <TouchableOpacity activeOpacity={1} onPress={() => this.props.onPressOrder && this.props.onPressOrder()}>
  34 + <View style={styles.container} >
  35 + <Image style={styles.goodsImage} source={require("../../image/bank/bank-ABC.png")} />
  36 + <Text style={styles.goodsName} numberOfLines={1}>{goodsName}</Text>
  37 + <Text style={styles.goodsSkn} numberOfLines={1}>{goodsSkn}</Text>
  38 + <Text style={styles.orderTime} numberOfLines={1}>{orderTime}</Text>
  39 + <Text style={styles.orderMoney} numberOfLines={1}>{orderMoney}</Text>
  40 + <Text style={[styles.orderStateText, colorStyle]} numberOfLines={1}>{orderStateText}</Text>
  41 + </View>
  42 + </TouchableOpacity>
  43 + );
  44 + }
  45 +
  46 +
  47 +
  48 +};
  49 +
  50 +
  51 +
  52 +
  53 +let {width, height} = Dimensions.get('window');
  54 +const DEVICE_WIDTH_RATIO = width / 320;
  55 +
  56 +let styles = StyleSheet.create({
  57 + container: {
  58 + flex: 1,
  59 + width: width,
  60 + height: 80 * DEVICE_WIDTH_RATIO,
  61 + borderBottomColor: '#e0e0e0',
  62 + borderBottomWidth: 0.5,
  63 + // alignItems: 'center',
  64 + // justifyContent: 'center',
  65 + // paddingTop: 10 * DEVICE_WIDTH_RATIO,
  66 + // paddingLeft: 15 * DEVICE_WIDTH_RATIO,
  67 + // paddingRight: 15 * DEVICE_WIDTH_RATIO,
  68 +
  69 + },
  70 + goodsImage:{
  71 + position: 'absolute',
  72 + top: 10 * DEVICE_WIDTH_RATIO,
  73 + left: 15 * DEVICE_WIDTH_RATIO,
  74 + width: 45 * DEVICE_WIDTH_RATIO,
  75 + height: 60 * DEVICE_WIDTH_RATIO,
  76 + },
  77 +
  78 + goodsName:{
  79 + position: 'absolute',
  80 + top: 15 * DEVICE_WIDTH_RATIO,
  81 + left: 70 * DEVICE_WIDTH_RATIO,
  82 + color: "#444444",
  83 + fontSize: 12 * DEVICE_WIDTH_RATIO,
  84 + },
  85 +
  86 + goodsSkn:{
  87 + position: 'absolute',
  88 + top: 30 * DEVICE_WIDTH_RATIO,
  89 + left: 70 * DEVICE_WIDTH_RATIO,
  90 + color: "#444444",
  91 + fontSize: 12 * DEVICE_WIDTH_RATIO,
  92 + },
  93 +
  94 + orderTime:{
  95 + position: 'absolute',
  96 + top: 50 * DEVICE_WIDTH_RATIO,
  97 + left: 70 * DEVICE_WIDTH_RATIO,
  98 + color: "#b0b0b0",
  99 + fontSize: 12 * DEVICE_WIDTH_RATIO,
  100 + },
  101 +
  102 + orderMoney:{
  103 + position: 'absolute',
  104 + top: 15 * DEVICE_WIDTH_RATIO,
  105 + right: 15 * DEVICE_WIDTH_RATIO,
  106 + color: "#444444",
  107 + fontSize: 14 * DEVICE_WIDTH_RATIO,
  108 + },
  109 +
  110 + orderStateText:{
  111 + position: 'absolute',
  112 + top: 45 * DEVICE_WIDTH_RATIO,
  113 + right: 15 * DEVICE_WIDTH_RATIO,
  114 + fontSize: 12 * DEVICE_WIDTH_RATIO,
  115 + },
  116 +
  117 +});
@@ -15,6 +15,7 @@ import ReactNative, { @@ -15,6 +15,7 @@ import ReactNative, {
15 import Immutable, {Map} from 'immutable'; 15 import Immutable, {Map} from 'immutable';
16 import LoadingIndicator from '../../../common/components/LoadingIndicator'; 16 import LoadingIndicator from '../../../common/components/LoadingIndicator';
17 import MyOrderListCell from './MyOrderListCell'; 17 import MyOrderListCell from './MyOrderListCell';
  18 +import OrderTypeSelector from './OrderTypeSelector';
18 19
19 20
20 export default class MyOrderList extends React.Component { 21 export default class MyOrderList extends React.Component {
@@ -23,12 +24,15 @@ export default class MyOrderList extends React.Component { @@ -23,12 +24,15 @@ export default class MyOrderList extends React.Component {
23 this.dataSource = new ListView.DataSource({ 24 this.dataSource = new ListView.DataSource({
24 rowHasChanged: (r1, r2) => !Immutable.is(r1, r2), 25 rowHasChanged: (r1, r2) => !Immutable.is(r1, r2),
25 }); 26 });
  27 + this.renderRow = this.renderRow.bind(this);
26 } 28 }
27 29
28 renderRow(rowData, sectionID, rowID, highlightRow) { 30 renderRow(rowData, sectionID, rowID, highlightRow) {
29 return ( 31 return (
30 <MyOrderListCell 32 <MyOrderListCell
31 data={rowData} 33 data={rowData}
  34 + onPressOrder={this.props.onPressOrder}
  35 +
32 /> 36 />
33 ); 37 );
34 } 38 }
@@ -37,15 +41,20 @@ export default class MyOrderList extends React.Component { @@ -37,15 +41,20 @@ export default class MyOrderList extends React.Component {
37 41
38 42
39 let cardList = [{'cardNo':'6222024301058186063','cardBank':"ICBC"},{'cardNo':'6222024301058186063','cardBank':"BOC"}]; 43 let cardList = [{'cardNo':'6222024301058186063','cardBank':"ICBC"},{'cardNo':'6222024301058186063','cardBank':"BOC"}];
  44 + let currentOrderType = '1';
40 45
41 46
42 return ( 47 return (
43 - <ListView  
44 - style={styles.container}  
45 - dataSource={this.dataSource.cloneWithRows(cardList)}  
46 - enableEmptySections={true}  
47 - renderRow={this.renderRow}  
48 - /> 48 + <View style={styles.container}>
  49 + <OrderTypeSelector selectedTypeId={currentOrderType} onSelectType={this.props.onSelectType} />
  50 + <View style={styles.splitLine}></View>
  51 + <ListView
  52 + style={styles.listContainer}
  53 + dataSource={this.dataSource.cloneWithRows(cardList)}
  54 + enableEmptySections={true}
  55 + renderRow={this.renderRow}
  56 + />
  57 + </View>
49 ); 58 );
50 59
51 60
@@ -58,6 +67,22 @@ const DEVICE_WIDTH_RATIO = width / 320; @@ -58,6 +67,22 @@ const DEVICE_WIDTH_RATIO = width / 320;
58 let styles = StyleSheet.create({ 67 let styles = StyleSheet.create({
59 container: { 68 container: {
60 flex: 1, 69 flex: 1,
  70 + flexDirection: 'column',
  71 + },
  72 +
  73 + splitLine: {
  74 + width: width,
  75 + height: 15 * DEVICE_WIDTH_RATIO,
  76 + borderBottomColor: '#e0e0e0',
  77 + borderBottomWidth: 0.5,
  78 + backgroundColor:'#f0f0f0',
  79 + },
  80 +
  81 + listContainer: {
  82 + width: width,
  83 + height: height - 59 * DEVICE_WIDTH_RATIO,
  84 + backgroundColor:'#ffffff',
  85 +
61 }, 86 },
62 87
63 88
@@ -19,75 +19,32 @@ export default class MyOrderListCell extends React.Component { @@ -19,75 +19,32 @@ export default class MyOrderListCell extends React.Component {
19 render() { 19 render() {
20 let{cardNo, cardBank} = this.props.data; 20 let{cardNo, cardBank} = this.props.data;
21 21
22 - let bankImg = this.getBankImage(cardBank);  
23 - let newCardNo = this.processBankCardNo(cardNo); 22 + let goodsName = "Adidas Originals KS full size";
  23 + let goodsSkn = "FULXN 2526542";
  24 + let orderTime = "2015.12.13";
  25 + let orderMoney = "￥ 455";
  26 + let isOrderPaying = false;
  27 + let orderStateText = "还款中1/3";
  28 +
  29 + let colorStyle = isOrderPaying ? {color: '#444444'} : {color: '#b0b0b0'};
  30 +
24 31
25 return( 32 return(
26 - <TouchableOpacity activeOpacity={1} onPress={() => this.props.onPressCard && this.props.onPressCard()}> 33 + <TouchableOpacity activeOpacity={1} onPress={() => this.props.onPressOrder && this.props.onPressOrder()}>
27 <View style={styles.container} > 34 <View style={styles.container} >
28 - <Image style={styles.cardBg} source={bankImg} />  
29 - <Text style={styles.cardNo} numberOfLines={1}>  
30 - {newCardNo}  
31 - </Text> 35 + <Image style={styles.goodsImage} source={require("../../image/bank/bank-ABC.png")} />
  36 + <Text style={styles.goodsName} numberOfLines={1}>{goodsName}</Text>
  37 + <Text style={styles.goodsSkn} numberOfLines={1}>{goodsSkn}</Text>
  38 + <Text style={styles.orderTime} numberOfLines={1}>{orderTime}</Text>
  39 + <Text style={styles.orderMoney} numberOfLines={1}>{orderMoney}</Text>
  40 + <Text style={[styles.orderStateText, colorStyle]} numberOfLines={1}>{orderStateText}</Text>
32 </View> 41 </View>
33 </TouchableOpacity> 42 </TouchableOpacity>
34 ); 43 );
35 } 44 }
36 45
37 46
38 - //正则替换卡号，保留后4位  
39 - processBankCardNo(cardNo){  
40 -  
41 - let newCardNo = cardNo.replace(/(\d+)(\d{4})$/, (a, b, c)=> {  
42 - return b.replace(/\d/g, '*') + c;  
43 - });  
44 -  
45 - return newCardNo;  
46 - }  
47 -  
48 47
49 - getBankImage(bank){  
50 - let bankImg;  
51 - switch(bank){  
52 - case "ABC":  
53 - bankImg = require('../../image/bank/bank-ABC.png');  
54 - break;  
55 - case "BOC":  
56 - bankImg = require('../../image/bank/bank-BOC.png');  
57 - break;  
58 - case "CCB":  
59 - bankImg = require('../../image/bank/bank-CCB.png');  
60 - break;  
61 - case "CEB":  
62 - bankImg = require('../../image/bank/bank-CEB.png');  
63 - break;  
64 - case "CGB":  
65 - bankImg = require('../../image/bank/bank-CGB.png');  
66 - break;  
67 - case "CIB":  
68 - bankImg = require('../../image/bank/bank-CIB.png');  
69 - break;  
70 - case "CITIC":  
71 - bankImg = require('../../image/bank/bank-CITIC.png');  
72 - break;  
73 - case "CMBC":  
74 - bankImg = require('../../image/bank/bank-CMBC.png');  
75 - break;  
76 - case "ICBC":  
77 - bankImg = require('../../image/bank/bank-ICBC.png');  
78 - break;  
79 - case "PAYH":  
80 - bankImg = require('../../image/bank/bank-PAYH.png');  
81 - break;  
82 - case "PSBC":  
83 - bankImg = require('../../image/bank/bank-PSBC.png');  
84 - break;  
85 - default:  
86 - bankImg = require('../../image/bank/bank-EMPTY.png');  
87 - break;  
88 - }  
89 - return bankImg;  
90 - }  
91 }; 48 };
92 49
93 50
@@ -99,24 +56,62 @@ const DEVICE_WIDTH_RATIO = width / 320; @@ -99,24 +56,62 @@ const DEVICE_WIDTH_RATIO = width / 320;
99 let styles = StyleSheet.create({ 56 let styles = StyleSheet.create({
100 container: { 57 container: {
101 flex: 1, 58 flex: 1,
102 - alignItems: 'center',  
103 - justifyContent: 'center',  
104 - paddingTop: 15 * DEVICE_WIDTH_RATIO,  
105 - paddingLeft: 15 * DEVICE_WIDTH_RATIO,  
106 - paddingRight: 15 * DEVICE_WIDTH_RATIO, 59 + width: width,
  60 + height: 80 * DEVICE_WIDTH_RATIO,
  61 + borderBottomColor: '#e0e0e0',
  62 + borderBottomWidth: 0.5,
  63 + // alignItems: 'center',
  64 + // justifyContent: 'center',
  65 + // paddingTop: 10 * DEVICE_WIDTH_RATIO,
  66 + // paddingLeft: 15 * DEVICE_WIDTH_RATIO,
  67 + // paddingRight: 15 * DEVICE_WIDTH_RATIO,
107 68
108 }, 69 },
109 - cardBg:{  
110 - width: 290 * DEVICE_WIDTH_RATIO,  
111 - height: 100 * DEVICE_WIDTH_RATIO, 70 + goodsImage:{
  71 + position: 'absolute',
  72 + top: 10 * DEVICE_WIDTH_RATIO,
  73 + left: 15 * DEVICE_WIDTH_RATIO,
  74 + width: 45 * DEVICE_WIDTH_RATIO,
  75 + height: 60 * DEVICE_WIDTH_RATIO,
112 }, 76 },
113 77
114 - cardNo:{ 78 + goodsName:{
115 position: 'absolute', 79 position: 'absolute',
116 - top: 85,  
117 - left: 100,  
118 - color: "white",  
119 - fontSize: 22 * DEVICE_WIDTH_RATIO, 80 + top: 15 * DEVICE_WIDTH_RATIO,
  81 + left: 70 * DEVICE_WIDTH_RATIO,
  82 + color: "#444444",
  83 + fontSize: 12 * DEVICE_WIDTH_RATIO,
  84 + },
  85 +
  86 + goodsSkn:{
  87 + position: 'absolute',
  88 + top: 30 * DEVICE_WIDTH_RATIO,
  89 + left: 70 * DEVICE_WIDTH_RATIO,
  90 + color: "#444444",
  91 + fontSize: 12 * DEVICE_WIDTH_RATIO,
  92 + },
  93 +
  94 + orderTime:{
  95 + position: 'absolute',
  96 + top: 50 * DEVICE_WIDTH_RATIO,
  97 + left: 70 * DEVICE_WIDTH_RATIO,
  98 + color: "#b0b0b0",
  99 + fontSize: 12 * DEVICE_WIDTH_RATIO,
  100 + },
  101 +
  102 + orderMoney:{
  103 + position: 'absolute',
  104 + top: 15 * DEVICE_WIDTH_RATIO,
  105 + right: 15 * DEVICE_WIDTH_RATIO,
  106 + color: "#444444",
  107 + fontSize: 14 * DEVICE_WIDTH_RATIO,
  108 + },
  109 +
  110 + orderStateText:{
  111 + position: 'absolute',
  112 + top: 45 * DEVICE_WIDTH_RATIO,
  113 + right: 15 * DEVICE_WIDTH_RATIO,
  114 + fontSize: 12 * DEVICE_WIDTH_RATIO,
  115 + },
120 116
121 - }  
122 }); 117 });
  1 +'use strict';
  2 +
  3 +import React from 'react';
  4 +import ReactNative from 'react-native';
  5 +import Immutable, {Map} from 'immutable';
  6 +
  7 +const {
  8 + View,
  9 + Text,
  10 + ListView,
  11 + TouchableOpacity,
  12 + Dimensions,
  13 + StyleSheet,
  14 + Platform,
  15 +} = ReactNative;
  16 +
  17 +
  18 +export default class OrderTypeSelector extends React.Component {
  19 +
  20 + constructor(props) {
  21 + super (props);
  22 +
  23 + this._renderRow = this._renderRow.bind(this);
  24 + this._renderSeparator = this._renderSeparator.bind(this);
  25 +
  26 + this.dataSource = new ListView.DataSource({
  27 + rowHasChanged: (r1, r2) => r1.id != r2.id,
  28 + });
  29 +
  30 + this.types = [
  31 + {
  32 + value: '全部',
  33 + id: 1,
  34 + isSelect: false,
  35 + },
  36 + {
  37 + value: '还款中',
  38 + id: 2,
  39 + isSelect: false,
  40 + },
  41 + {
  42 + value: '已还清',
  43 + id: 3,
  44 + isSelect: false,
  45 + },
  46 + ];
  47 + }
  48 +
  49 + shouldComponentUpdate(nextProps){
  50 + if (nextProps.selectedTypeId == this.props.selectedTypeId) {
  51 + return false;
  52 + } else {
  53 + return true;
  54 + }
  55 + }
  56 +
  57 + _renderRow(rowData, sectionID, rowID) {
  58 + let isRowSelected = false;
  59 + if (this.props.selectedTypeId >= 1) {
  60 + isRowSelected = (rowID == (this.props.selectedTypeId - 1));
  61 + }
  62 +
  63 + let colorStyle = isRowSelected ? {color: '#444444', fontFamily: 'HelveticaNeue', fontSize: 17} : {color: '#b0b0b0', fontFamily: 'HelveticaNeue', fontSize: 17,};
  64 +
  65 + return (
  66 + <TouchableOpacity activeOpacity={1} onPress={() => {
  67 + if (isRowSelected) {
  68 + return;
  69 + }
  70 +
  71 + let type = this.types[rowID];
  72 +
  73 + this.props.onSelectType && this.props.onSelectType(type);
  74 + }}>
  75 + <View key={'row' + rowID} style={styles.rowContainer}>
  76 + <Text style={colorStyle}>{rowData.value}</Text>
  77 + </View>
  78 + </TouchableOpacity>
  79 + );
  80 + }
  81 +
  82 + _renderSeparator(sectionID, rowID, adjacentRowHighlighted) {
  83 + if(rowID == 2)
  84 + return null;
  85 + else{
  86 + return (
  87 + <View key={'sep' + rowID} style={styles.separator}></View>
  88 + );
  89 + }
  90 + }
  91 +
  92 + render() {
  93 +
  94 + let {style} = this.props;
  95 +
  96 + return (
  97 + <View style={[styles.container, style]}>
  98 + <ListView
  99 + contentContainerStyle={[styles.contentContainer, style]}
  100 + enableEmptySections={true}
  101 + dataSource={this.dataSource.cloneWithRows(this.types)}
  102 + renderRow={this._renderRow}
  103 + renderSeparator={this._renderSeparator}
  104 + scrollEnabled={false}
  105 + scrollsToTop={false}
  106 + />
  107 + </View>
  108 + );
  109 + }
  110 +}
  111 +
  112 +let {width, height} = Dimensions.get('window');
  113 +const DEVICE_WIDTH_RATIO = width / 320;
  114 +
  115 +let viewHeight = 44 * DEVICE_WIDTH_RATIO;
  116 +
  117 +
  118 +let styles = StyleSheet.create({
  119 + container: {
  120 + width: width,
  121 + height: viewHeight,
  122 + borderTopColor: 'transparent',
  123 + borderBottomColor: '#e0e0e0',
  124 + borderBottomWidth: 0.5,
  125 + backgroundColor:'white',
  126 + justifyContent: 'center',
  127 + alignItems: 'center',
  128 + },
  129 + contentContainer: {
  130 + flexDirection: 'row',
  131 + },
  132 + rowContainer: {
  133 + flexDirection: 'row',
  134 + justifyContent: 'center',
  135 + alignItems: 'center',
  136 + height: viewHeight - 1,
  137 +
  138 + },
  139 + separator: {
  140 + width: 45 * DEVICE_WIDTH_RATIO,
  141 + backgroundColor: 'white',
  142 + },
  143 +});
@@ -60,4 +60,9 @@ export default keyMirror({ @@ -60,4 +60,9 @@ export default keyMirror({
60 QUERY_REPAY_RECORD_LIST_REQUEST: null, 60 QUERY_REPAY_RECORD_LIST_REQUEST: null,
61 QUERY_REPAY_RECORD_LIST_FAILURE: null, 61 QUERY_REPAY_RECORD_LIST_FAILURE: null,
62 QUERY_REPAY_RECORD_LIST_SUCCESS: null, 62 QUERY_REPAY_RECORD_LIST_SUCCESS: null,
  63 +
  64 +
  65 + GET_CARD_LIST_REQUEST: null,
  66 + GET_CARD_LIST_FAILURE: null,
  67 + GET_CARD_LIST_SUCCESS: null,
63 }); 68 });
@@ -17,13 +17,14 @@ import { @@ -17,13 +17,14 @@ import {
17 import {bindActionCreators} from 'redux'; 17 import {bindActionCreators} from 'redux';
18 import {connect} from 'react-redux'; 18 import {connect} from 'react-redux';
19 import {Map} from 'immutable'; 19 import {Map} from 'immutable';
20 -import * as cardListActions from '../reducers/bankCardList/cardListActions'; 20 +import * as orderListActions from '../reducers/orderList/orderListActions';
  21 +import * as installmentActions from '../reducers/installment/installmentActions';
21 import ServerError from '../components/installment/ServerError'; 22 import ServerError from '../components/installment/ServerError';
22 import MyOrderList from '../components/order/MyOrderList'; 23 import MyOrderList from '../components/order/MyOrderList';
23 24
24 25
25 const actions = [ 26 const actions = [
26 - cardListActions, 27 + installmentActions,orderListActions,
27 ]; 28 ];
28 function mapStateToProps(state) { 29 function mapStateToProps(state) {
29 return { 30 return {
@@ -46,18 +47,24 @@ class InstallmentMyOrderContainer extends Component { @@ -46,18 +47,24 @@ class InstallmentMyOrderContainer extends Component {
46 47
47 constructor(props) { 48 constructor(props) {
48 super(props); 49 super(props);
  50 + this.onPressOrder = this.onPressOrder.bind(this);
49 } 51 }
50 52
51 componentDidMount() { 53 componentDidMount() {
52 // this.props.actions.getBankCards(); 54 // this.props.actions.getBankCards();
53 } 55 }
54 56
  57 + onPressOrder(){
  58 + this.props.actions.onPressOrder();
  59 + }
  60 +
55 render() { 61 render() {
56 62
57 return ( 63 return (
58 <MyOrderList 64 <MyOrderList
59 style={styles.container} 65 style={styles.container}
60 - orderList={[]} 66 + orderList={[1,1]}
  67 + onPressOrder={this.onPressOrder}
61 68
62 /> 69 />
63 ); 70 );
  1 +'use strict';
  2 +
  3 +import ReactNative from 'react-native';
  4 +// import InstallmentService from '../../services/InstallmentService';
  5 +
  6 +// const {
  7 +
  8 +// SET_TIP_MESSAGE,
  9 +// SET_ERROR,
  10 +
  11 +
  12 +
  13 +// } = require('../../constants/actionTypes').default;
  14 +
  15 +
  16 +// export function getCardListRequest(){
  17 +// return {
  18 +// type: GET_CARD_LIST_REQUEST,
  19 +// }
  20 +// }
  21 +
  22 +// export function getCardListFailure(error){
  23 +// return {
  24 +// type: GET_CARD_LIST_FAILURE,
  25 +// payload: error,
  26 +// }
  27 +// }
  28 +
  29 +// export function getCardListSuccess(list){
  30 +// return {
  31 +// type: GET_CARD_LIST_SUCCESS,
  32 +// payload: list,
  33 +// }
  34 +// }
  35 +
  36 +export function onPressOrder() {
  37 + return (dispatch, getState) => {
  38 + console.log("---onPressOrder");
  39 + let url = `http://m.yohobuy.com?openby:yohobuy={"action":"go.instalmentMyOrderDetail","params":{}}`;
  40 + ReactNative.NativeModules.YH_CommonHelper.jumpWithUrl(url);
  41 + }
  42 +}
  43 +
  44 +// export function getBankCards() {
  45 +// return (dispatch, getState) => {
  46 +// let {app, repayList} = getState();
  47 +// let queryBankCards = (uid) => {
  48 +// return new InstallmentService(app.host).getBankCards(uid)
  49 +// .then(json => {
  50 +// console.log("chenlin", JSON.stringify(json));
  51 +// dispatch(getCardListSuccess(json));
  52 +// })
  53 +// .catch(error => {
  54 +// console.log("chenlin", JSON.stringify(error));
  55 +
  56 +// dispatch(setTipMessage(error.message || '暂未获取到数据'));
  57 +// });
  58 +// };
  59 +
  60 +// ReactNative.NativeModules.YH_CommonHelper.uid()
  61 +// .then(uid => {
  62 +// console.log("chenlin", uid);
  63 +
  64 +// queryBankCards(uid);
  65 +// })
  66 +// .catch(error => {
  67 +
  68 +// console.log("chenlin", JSON.stringify(error));
  69 +
  70 +// ReactNative.NativeModules.YH_CommonHelper.login()
  71 +// .then(uid => {
  72 +// queryBankCards(uid);
  73 +// })
  74 +// .catch(error => {
  75 +
  76 +// });
  77 +// });
  78 +// };
  79 +// }
  80 +
  81 +// export function setTipMessage(message){
  82 +// return {
  83 +// type: SET_TIP_MESSAGE,
  84 +// payload: message,
  85 +// }
  86 +// }
  1 +'use strict';
  2 +
  3 +import Immutable,{Record, List, Map} from 'immutable';
  4 +
  5 +let InitialState = Record({
  6 + isFetching: false,
  7 + queryDays: '',
  8 + repaymentList: List(),
  9 + formateData: Map(),
  10 + showBottom: true,
  11 + tipMessage: '',
  12 + bankCardsList: List(),
  13 + payCard: Map(),
  14 + showBankSafePayView: false,
  15 + showConfirmPayView: false,
  16 + repayTermList:List(),
  17 + prePaySuccessParam: Map(),
  18 + error: null,
  19 +});
  20 +
  21 +export default InitialState;
  1 +'use strict';
  2 +
  3 +import InitialState from './repayListInitialState';
  4 +import Immutable, {Map} from 'immutable';
  5 +
  6 +const {
  7 + SET_QUERY_DAYS,
  8 + SET_ERROR,
  9 +
  10 + QUERY_REPAYMENT_LIST_REQUEST,
  11 + QUERY_REPAYMENT_LIST_FAILURE,
  12 + QUERY_REPAYMENT_LIST_SUCCESS,
  13 + SET_FORMATE_DATA,
  14 + SET_TIP_MESSAGE,
  15 + UPDATE_REPAYMENT_LIST_AND_FORMATE_DATA,
  16 + SET_BANK_CARDS_LIST_AND_PAY_CARD,
  17 + SET_BANK_SAFE_PAY_VIEW_STATUS,
  18 + UPDATE_REPAY_TERM_LIST,
  19 + UPDATE_PREPAY_SUCCESS_PARAM,
  20 + SET_SHOW_CONFIRM_PAY_VIEW_STATUS,
  21 +
  22 +} = require('../../constants/actionTypes').default;
  23 +
  24 +const initialState = new InitialState;
  25 +
  26 +export default function appReducer(state = initialState, action) {
  27 + if (!(state instanceof InitialState)) return initialState.merge(state);
  28 +
  29 + switch (action.type) {
  30 + case SET_QUERY_DAYS:
  31 + return state.set('queryDays', action.payload);
  32 + case QUERY_REPAYMENT_LIST_REQUEST:
  33 + return state.set('isFetching', true)
  34 + .set('error', null);
  35 + case SET_ERROR:
  36 + case QUERY_REPAYMENT_LIST_FAILURE:
  37 + return state.set('isFetching', false)
  38 + .set('error',action.payload);
  39 + case UPDATE_REPAYMENT_LIST_AND_FORMATE_DATA:
  40 + return state.set('repaymentList', Immutable.fromJS(action.payload.repaymentList))
  41 + .set('formateData', Immutable.fromJS(action.payload.formateData));
  42 + case QUERY_REPAYMENT_LIST_SUCCESS:
  43 + return state.set('repaymentList', Immutable.fromJS(action.payload))
  44 + .set('isFetching', false);
  45 + case SET_FORMATE_DATA:
  46 + return state.set('formateData', Immutable.fromJS(action.payload));
  47 + case SET_TIP_MESSAGE:
  48 + return state.set('tipMessage', action.payload);
  49 + case SET_BANK_CARDS_LIST_AND_PAY_CARD:
  50 + return state.set('bankCardsList', Immutable.fromJS(action.payload))
  51 + .set('payCard', Immutable.fromJS(action.payload[0]));
  52 + case SET_BANK_SAFE_PAY_VIEW_STATUS:
  53 + return state.set('showBankSafePayView',action.payload);
  54 + case UPDATE_REPAY_TERM_LIST:
  55 + return state.set('repayTermList', Immutable.fromJS(action.payload));
  56 + case UPDATE_PREPAY_SUCCESS_PARAM:
  57 + return state.set('prePaySuccessParam',Immutable.fromJS(action.payload))
  58 + .set('showConfirmPayView', true);
  59 + case SET_SHOW_CONFIRM_PAY_VIEW_STATUS:
  60 + return state.set('showConfirmPayView', action.payload);
  61 + }
  62 +
  63 + return state;
  64 +}