mobile / YH_RNComponent · Commits

Go to a project

Authored by chenl
Commit 1b210268cddfd13a0f642e2cfdedc1702a44ff61 1 parent 61fb0241

增加分期订单详情逻辑。review by 张丽霞。

Inline Side-by-side
Showing 12 changed files with 355 additions and 99 deletions
... ... @@ -24,6 +24,7 @@ import cardAddInitialState from './reducers/bankCardAdd/cardAddInitialState';
import cardListInitialState from './reducers/bankCardList/cardListInitialState';
import cardDetailInitialState from './reducers/bankCardDetail/cardDetailInitialState';
import orderListInitialState from './reducers/orderList/orderListInitialState';
import orderDetailInitialState from './reducers/orderDetail/orderDetailInitialState';
import InstallmentContainer from './containers/InstallmentContainer';
import OpenContainer from './containers/OpenContainer';
... ... @@ -61,6 +62,10 @@ import {
setCardIdNo,
} from './reducers/bankCardDetail/cardDetailActions';
import {
setOrderCode,
} from './reducers/orderDetail/orderDetailActions';
function getInitialState() {
const _initState = {
app: (new appInitialState()),
... ... @@ -72,6 +77,7 @@ function getInitialState() {
myCardList: (new cardListInitialState()),
myCardDetail: (new cardDetailInitialState()),
myOrderList: (new orderListInitialState()),
myOrderDetail: (new orderDetailInitialState()),
};
return _initState;
}
... ... @@ -169,6 +175,8 @@ export default function native(platform) {
</Provider>
)
} else if (type == 'installMyOrderDetail') {
let orderCode = this.props.orderCode;
store.dispatch(setOrderCode(orderCode));
return (
<Provider store={store}>
<InstallmentMyOrderDetailContainer />
... ...
... ... @@ -14,7 +14,8 @@ import ReactNative, {
import Immutable, {Map} from 'immutable';
import Toast from '../../../common/components/Toast';
import MyOrderDetailPayListCell from './MyOrderDetailPayListCell';
import YH_Image from '../../../common/components/YH_Image';
import SlicedImage from '../../../common/components/SlicedImage';
export default class MyOrderDetail extends React.Component {
constructor(props) {
... ... @@ -27,35 +28,53 @@ export default class MyOrderDetail extends React.Component {
renderRow(rowData, sectionID, rowID, highlightRow) {
return (
<MyOrderDetailPayListCell
data={rowData}
onPressOrder={this.props.onPressOrder}
/>
);
}
render() {
let goodsName = "Adidas Originals KS full size";
let orderCode = "订单编号：165965646564 ";
let orderTime = "2015.12.13";
let orderMoney = "￥ 455";
let isOrderPaying = false;
let orderStateText = "还款中1/3";
let colorStyle = isOrderPaying ? {color: '#444444'} : {color: '#b0b0b0'};
let cardList = [{'a':'A'},{'a':'A'},{'a':'A'},{'a':'A'},{'a':'A'},{'a':'A'}];
let orderInfo = this.props.orderInfo;
if(!orderInfo)
return null;
//订单商品
let orderGoods = orderInfo.get("order_goods") ? orderInfo.get("order_goods").get(0) : null;
let productName = orderGoods ? orderGoods.get("product_name") : "";
let goodsImage = orderGoods ? orderGoods.get("goods_image") : "";
goodsImage = goodsImage ? SlicedImage.getSlicedUrl(goodsImage, 45, 60, 2) : "";
let orderCode = orderInfo.get("order_code") ? ("订单编号：" + orderInfo.get("order_code")) : "";
let orderTime = orderInfo.get("create_time");
let orderAmount = orderInfo.get("amount");
let avgAmount = orderInfo.get("avg_principal_amt");
let avgFeeAmount = orderInfo.get("avg_fee_amt");
let totalAmount = orderInfo.get("total_amt");
//退款金额
let refundNum = orderInfo.get("refund_num");
//分期列表
let package_list = orderInfo.get("package_list") ? orderInfo.get("package_list").toArray() : [];
let checked = this.props.isChecked;
let checkboxIcon = require('../../image/uncheck_icon.png');
if (!checked) {
checkboxIcon = require('../../image/check_icon.png');
}
return (
<View style={styles.container}>
{
refundNum ? <Text style={styles.refundMsg} numberOfLines={1}>{"该订单已退款" + refundNum + "元"}</Text> : null
}
<View style={styles.goodsInfoContainer}>
<Image style={styles.goodsImage} source={require("../../image/bank/bank-ABC.png")} />
<Text style={styles.goodsName} numberOfLines={1}>{goodsName}</Text>
<YH_Image style={styles.goodsImage} url={goodsImage}/>
<Text style={styles.productName} numberOfLines={1}>{productName}</Text>
<Text style={styles.orderCode} numberOfLines={1}>{orderCode}</Text>
<Text style={styles.orderTime} numberOfLines={1}>{orderTime}</Text>
</View>
... ... @@ -63,15 +82,15 @@ export default class MyOrderDetail extends React.Component {
<View style={styles.installmentInfoContainer}>
<View style={styles.installmentInfoCell}>
<Text style={styles.installmentInfoCellText}>分期应还</Text>
<Text style={styles.installmentInfoCellText}>{"555"}</Text>
<Text style={styles.installmentInfoCellText}>{avgAmount}</Text>
</View>
<View style={styles.installmentInfoCell}>
<Text style={styles.installmentInfoCellText}>分期服务费</Text>
<Text style={styles.installmentInfoCellText}>{"555"}</Text>
<Text style={styles.installmentInfoCellText}>{avgFeeAmount}</Text>
</View>
<View style={styles.installmentInfoCell}>
<Text style={styles.installmentInfoCellText}>总计应还</Text>
<Text style={styles.installmentInfoCellText}>{"555"}</Text>
<Text style={styles.installmentInfoCellText}>{totalAmount}</Text>
</View>
</View>
<View style={styles.splitLine}></View>
... ... @@ -79,15 +98,24 @@ export default class MyOrderDetail extends React.Component {
<View style={styles.splitLine}></View>
<ListView
style={styles.payListContainer}
dataSource={this.dataSource.cloneWithRows(cardList)}
dataSource={this.dataSource.cloneWithRows(package_list)}
enableEmptySections={true}
renderRow={this.renderRow}
/>
<View style={styles.splitLine}></View>
<View style={styles.bottomContainer}>
<TouchableOpacity activeOpacity={1} onPress={() => {
<View style={styles.checkboxContainer}>
<Image style={styles.checkboxIcon} source={checkboxIcon}/>
</View>
<View style={styles.payMoneyContainer}>
<Text style={styles.payTitle} numberOfLines={1}>待支付</Text>
<Text style={styles.payAmount} numberOfLines={1}>{"￥ 555"}</Text>
</View>
<Text style={styles.payDesc} numberOfLines={1}>{"含服务费￥5.00"}</Text>
<TouchableOpacity style={styles.payButtonContainer} activeOpacity={1} onPress={() => {
this.props.onPressChangeCard && this.props.onPressChangeCard();}}>
<Text style={styles.changeButton}>立即还款</Text>
<Text style={styles.payButton}>立即还款</Text>
</TouchableOpacity>
</View>
... ... @@ -118,6 +146,16 @@ let styles = StyleSheet.create({
backgroundColor: "#f0f0f0",
},
refundMsg:{
width: width,
height: 35 * DEVICE_WIDTH_RATIO,
backgroundColor: "#707070",
color: "#ffffff",
fontSize: 14 * DEVICE_WIDTH_RATIO,
paddingTop: 8 * DEVICE_WIDTH_RATIO,
paddingLeft: 15 * DEVICE_WIDTH_RATIO,
},
goodsInfoContainer:{
width: width,
height: 80 * DEVICE_WIDTH_RATIO,
... ... @@ -131,7 +169,7 @@ let styles = StyleSheet.create({
height: 60 * DEVICE_WIDTH_RATIO,
},
goodsName:{
productName:{
position: 'absolute',
top: 15 * DEVICE_WIDTH_RATIO,
left: 70 * DEVICE_WIDTH_RATIO,
... ... @@ -184,19 +222,65 @@ let styles = StyleSheet.create({
height: 60 * DEVICE_WIDTH_RATIO,
},
checkboxContainer:{
position: 'absolute',
top: 0,
left: 0,
width: 50 * DEVICE_WIDTH_RATIO,
height: 60 * DEVICE_WIDTH_RATIO,
justifyContent: 'center',
alignItems: 'center',
},
checkboxIcon:{
width: 20 * DEVICE_WIDTH_RATIO,
height: 20 * DEVICE_WIDTH_RATIO,
},
payMoneyContainer:{
position: 'absolute',
top: 15 * DEVICE_WIDTH_RATIO,
left: 50 * DEVICE_WIDTH_RATIO,
flexDirection: 'row',
},
payTitle:{
color: "#444444",
fontSize: 14 * DEVICE_WIDTH_RATIO,
},
payAmount:{
color: "#ff0000",
fontSize: 14 * DEVICE_WIDTH_RATIO,
},
payDesc:{
position: 'absolute',
top: 35 * DEVICE_WIDTH_RATIO,
left: 50 * DEVICE_WIDTH_RATIO,
color: "#b0b0b0",
fontSize: 12 * DEVICE_WIDTH_RATIO,
},
payButtonContainer:{
position: 'absolute',
top: 10 * DEVICE_WIDTH_RATIO,
right: 15 * DEVICE_WIDTH_RATIO,
},
changeButton:{
width: 130 * DEVICE_WIDTH_RATIO,
height: 44 * DEVICE_WIDTH_RATIO,
payButton:{
width: 110 * DEVICE_WIDTH_RATIO,
height: 40 * DEVICE_WIDTH_RATIO,
fontSize:14 * DEVICE_WIDTH_RATIO,
paddingTop:12 * DEVICE_WIDTH_RATIO,
marginLeft: 8 * DEVICE_WIDTH_RATIO,
color: '#ffffff',
textAlign: 'center',
borderColor:'#cc0009',
borderWidth:2,
borderRadius: 6,
backgroundColor:'#cc0009',
paddingTop: 10 * DEVICE_WIDTH_RATIO,
},
... ...
... ... @@ -18,25 +18,51 @@ export default class MyOrderDetailPayListCell extends React.Component {
render() {
let goodsName = "Adidas Originals KS full size";
let goodsSkn = "FULXN 2526542";
let orderTime = "2015.12.13";
let orderMoney = "￥ 455";
let isOrderPaying = false;
let orderStateText = "还款中1/3";
let data = this.props.data;
let colorStyle = isOrderPaying ? {color: '#444444'} : {color: '#b0b0b0'};
if(!data)
return;
let sort = data.get("sort_id");
let currentTotalAmount = data.get("curr_amt");
let currentDate = data.get("curr_date");
let currentPAmount = data.get("curr_principal_amt");
let currentFee = data.get("curr_fee_amt");
let currentDelayFee = data.get("curr_dealy_fee_amt");
let desc = data.get("desc");
let status = data.get("status"); //1-还款中 2-结清 3-已逾期 4-已退货5-已取消
let isDelay = (status == 3);
let colorStyle = isDelay ? {color: '#444444'} : {color: '#b0b0b0'};
let isPayable = (status == 1 || status == 3);
let checked = data.get("isChecked");
let checkboxIcon = require('../../image/uncheck_icon.png');
if (!checked) {
checkboxIcon = require('../../image/check_icon.png');
}
return(
<TouchableOpacity activeOpacity={1} onPress={() => this.props.onPressOrder && this.props.onPressOrder()}>
<View style={styles.container} >
<Image style={styles.goodsImage} source={require("../../image/bank/bank-ABC.png")} />
<Text style={styles.goodsName} numberOfLines={1}>{goodsName}</Text>
<Text style={styles.goodsSkn} numberOfLines={1}>{goodsSkn}</Text>
<Text style={styles.orderTime} numberOfLines={1}>{orderTime}</Text>
<Text style={styles.orderMoney} numberOfLines={1}>{orderMoney}</Text>
<Text style={[styles.orderStateText, colorStyle]} numberOfLines={1}>{orderStateText}</Text>
<View style={styles.sortContainer}>
{
!isPayable ? <Image style={styles.checkboxIcon} source={checkboxIcon}/>
: <Text style={styles.sortText} numberOfLines={1}>{sort}</Text>
}
</View>
<Text style={styles.totalAmount} numberOfLines={1}>{currentTotalAmount}</Text>
<View style={styles.amountDetailContainer}>
<Text style={styles.amountText}>{currentDate}</Text>
<Text style={styles.amountText}>{"本金:" + currentPAmount}</Text>
<Text style={styles.amountText}>{"服务费:" + currentFee}</Text>
{
isDelay ? <Text style={styles.amountText}>{"逾期服务费:" + currentDelayFee}</Text> : null
}
</View>
<Text style={[styles.desc,colorStyle]} numberOfLines={1}>{desc}</Text>
</View>
</TouchableOpacity>
);
... ... @@ -56,59 +82,55 @@ let styles = StyleSheet.create({
container: {
flex: 1,
width: width,
height: 80 * DEVICE_WIDTH_RATIO,
height: 60 * DEVICE_WIDTH_RATIO,
borderBottomColor: '#e0e0e0',
borderBottomWidth: 0.5,
// alignItems: 'center',
// justifyContent: 'center',
// paddingTop: 10 * DEVICE_WIDTH_RATIO,
// paddingLeft: 15 * DEVICE_WIDTH_RATIO,
// paddingRight: 15 * DEVICE_WIDTH_RATIO,
},
goodsImage:{
sortContainer:{
position: 'absolute',
top: 10 * DEVICE_WIDTH_RATIO,
left: 15 * DEVICE_WIDTH_RATIO,
width: 45 * DEVICE_WIDTH_RATIO,
top: 0,
left: 0,
width: 50 * DEVICE_WIDTH_RATIO,
height: 60 * DEVICE_WIDTH_RATIO,
justifyContent: 'center',
alignItems: 'center',
},
goodsName:{
position: 'absolute',
top: 15 * DEVICE_WIDTH_RATIO,
left: 70 * DEVICE_WIDTH_RATIO,
checkboxIcon:{
width: 20 * DEVICE_WIDTH_RATIO,
height: 20 * DEVICE_WIDTH_RATIO,
},
sortText:{
color: "#444444",
fontSize: 12 * DEVICE_WIDTH_RATIO,
fontSize: 14 * DEVICE_WIDTH_RATIO,
},
goodsSkn:{
totalAmount:{
position: 'absolute',
top: 30 * DEVICE_WIDTH_RATIO,
left: 70 * DEVICE_WIDTH_RATIO,
top: 15 * DEVICE_WIDTH_RATIO,
left: 50 * DEVICE_WIDTH_RATIO,
color: "#444444",
fontSize: 12 * DEVICE_WIDTH_RATIO,
fontSize: 14 * DEVICE_WIDTH_RATIO,
},
orderTime:{
amountDetailContainer:{
position: 'absolute',
top: 50 * DEVICE_WIDTH_RATIO,
left: 70 * DEVICE_WIDTH_RATIO,
color: "#b0b0b0",
fontSize: 12 * DEVICE_WIDTH_RATIO,
top: 36 * DEVICE_WIDTH_RATIO,
left: 50 * DEVICE_WIDTH_RATIO,
flexDirection: 'row',
},
orderMoney:{
position: 'absolute',
top: 15 * DEVICE_WIDTH_RATIO,
right: 15 * DEVICE_WIDTH_RATIO,
amountText:{
color: "#444444",
fontSize: 14 * DEVICE_WIDTH_RATIO,
fontSize: 12 * DEVICE_WIDTH_RATIO,
marginRight: 5 * DEVICE_WIDTH_RATIO,
},
orderStateText:{
desc:{
position: 'absolute',
top: 45 * DEVICE_WIDTH_RATIO,
top: 15 * DEVICE_WIDTH_RATIO,
right: 15 * DEVICE_WIDTH_RATIO,
fontSize: 12 * DEVICE_WIDTH_RATIO,
},
... ...
... ... @@ -24,22 +24,23 @@ export default class MyOrderListCell extends React.Component {
if(!orderData)
return null;
let orderGoods = orderData.get("order_goods").get(0);
let orderGoods = orderData.get("order_goods") ? orderData.get("order_goods").get(0) : null;
let goodsImage = orderGoods ? orderGoods.get("goods_image") : "";
goodsImage = goodsImage ? SlicedImage.getSlicedUrl(goodsImage, 45, 60, 2) : "";
let productName = orderGoods ? orderGoods.get("product_name") : "";
let productSkn = orderGoods ? orderGoods.get("product_skn") : "";
let orderCode = orderData.get("order_code");
let orderTime = orderData.get("create_time");
let orderMoney = orderData.get("amount");
let orderStateText = orderData.get("install_status");
let isOrderPaying = (orderStateText == "已还清");
let status = orderData.get("status");
let isOrderPaying = (status == 1 || status == 3);
let colorStyle = isOrderPaying ? {color: '#444444'} : {color: '#b0b0b0'};
return(
<TouchableOpacity activeOpacity={1} onPress={() => this.props.onPressOrder && this.props.onPressOrder()}>
<TouchableOpacity activeOpacity={1} onPress={() => this.props.onPressOrder && this.props.onPressOrder(orderCode)}>
<View style={styles.container} >
<YH_Image style={styles.goodsImage} url={goodsImage}/>
<Text style={styles.productName} numberOfLines={1}>{productName}</Text>
... ...
... ... @@ -84,4 +84,10 @@ export default keyMirror({
GET_ORDER_LIST_REQUEST: null,
GET_ORDER_LIST_FAILURE: null,
GET_ORDER_LIST_SUCCESS: null,
SET_ORDER_CODE: null,
GET_ORDER_DETAIL_REQUEST: null,
GET_ORDER_DETAIL_FAILURE: null,
GET_ORDER_DETAIL_SUCCESS: null,
});
... ...
... ... @@ -67,8 +67,8 @@ class InstallmentMyOrderContainer extends Component {
this.props.actions.selectOrderType(type);
}
onPressOrder(){
this.props.actions.gotoOrderDetail();
onPressOrder(orderCode){
this.props.actions.gotoOrderDetail(orderCode);
}
render() {
... ...
... ... @@ -17,13 +17,13 @@ import {
import {bindActionCreators} from 'redux';
import {connect} from 'react-redux';
import {Map} from 'immutable';
import * as cardListActions from '../reducers/bankCardList/cardListActions';
import * as orderDetailActions from '../reducers/orderDetail/orderDetailActions';
import ServerError from '../components/installment/ServerError';
import MyOrderDetail from '../components/order/MyOrderDetail';
const actions = [
cardListActions,
orderDetailActions,
];
function mapStateToProps(state) {
return {
... ... @@ -49,17 +49,17 @@ class InstallmentMyOrderDetailContainer extends Component {
}
componentDidMount() {
// this.props.actions.getBankCards();
this.props.actions.getOrderDetail();
}
render() {
let cardList = ['65325165465321654','99999999999999'];
let {orderInfo} = this.props.myOrderDetail;
return (
<MyOrderDetail
style={styles.container}
cardList={cardList}
orderInfo={orderInfo}
/>
);
... ...
... ... @@ -8,6 +8,7 @@ import myCardAdd from './bankCardAdd/cardAddReducer';
import myCardList from './bankCardList/cardListReducer';
import myCardDetail from './bankCardDetail/cardDetailReducer';
import myOrderList from './orderList/orderListReducer';
import myOrderDetail from './orderDetail/orderDetailReducer';
const rootReducer = combineReducers({
... ... @@ -20,6 +21,8 @@ const rootReducer = combineReducers({
myCardList,
myCardDetail,
myOrderList,
myOrderDetail,
});
export default rootReducer;
... ...
'use strict';
import ReactNative from 'react-native';
import InstallmentService from '../../services/InstallmentService';
const {
SET_TIP_MESSAGE,
SET_ERROR,
SET_ORDER_CODE,
GET_ORDER_DETAIL_REQUEST,
GET_ORDER_DETAIL_FAILURE,
GET_ORDER_DETAIL_SUCCESS,
} = require('../../constants/actionTypes').default;
export function setOrderCode(orderCode){
return {
type: SET_ORDER_CODE,
payload: orderCode,
}
}
export function getOrderDetailRequest(){
return {
type: GET_ORDER_DETAIL_REQUEST,
}
}
export function getOrderDetailFailure(error){
return {
type: GET_ORDER_DETAIL_FAILURE,
payload: error,
}
}
export function getOrderDetailSuccess(json){
return {
type: GET_ORDER_DETAIL_SUCCESS,
payload: json,
}
}
export function getOrderDetail(orderCode) {
return (dispatch, getState) => {
let {app, myOrderDetail} = getState();
let orderCode = "1519816409";//myOrderDetail.get('orderCode');
console.log("chenlin___orderCode______", orderCode);
let queryOrderDetail = (uid) => {
return new InstallmentService(app.host).getInstallmentOrderDetail(uid, orderCode)
.then(json => {
dispatch(getOrderDetailSuccess(json));
})
.catch(error => {
dispatch(setTipMessage(error.message || '暂未获取到数据'));
});
};
ReactNative.NativeModules.YH_CommonHelper.uid()
.then(uid => {
queryOrderDetail(uid);
})
.catch(error => {
ReactNative.NativeModules.YH_CommonHelper.login()
.then(uid => {
queryOrderDetail(uid);
})
.catch(error => {
});
});
};
}
export function setTipMessage(message){
return {
type: SET_TIP_MESSAGE,
payload: message,
}
}
... ...
'use strict';
import Immutable,{Record, List, Map} from 'immutable';
let InitialState = Record({
isFetching: false,
error: null,
tipMessage: '',
orderCode: '',
orderInfo: Map(),
});
export default InitialState;
... ...
'use strict';
import InitialState from './orderDetailInitialState';
import Immutable, {Map} from 'immutable';
const {
SET_ERROR,
SET_TIP_MESSAGE,
SET_ORDER_CODE,
GET_ORDER_DETAIL_REQUEST,
GET_ORDER_DETAIL_FAILURE,
GET_ORDER_DETAIL_SUCCESS,
} = require('../../constants/actionTypes').default;
const initialState = new InitialState;
export default function appReducer(state = initialState, action) {
switch (action.type) {
case SET_ERROR:
return state.set('error',action.payload);
case SET_TIP_MESSAGE:
return state.set('tipMessage', action.payload);
case SET_ORDER_CODE:
return state.set('orderCode', action.payload);
case GET_ORDER_DETAIL_REQUEST:
return state.set('isFetching', true);
case GET_ORDER_DETAIL_FAILURE:
return state.set('isFetching', false);
case GET_ORDER_DETAIL_SUCCESS:
return state.set('isFetching', false)
.set('orderInfo', Immutable.fromJS(action.payload));
}
return state;
}
... ...
... ... @@ -24,7 +24,6 @@ export function selectOrderType(orderType = 1) {
dispatch(selectOrderTypeSuccess(orderType));
let list = myOrderList.get("orderList").get(orderType);
console.log("chenlin", JSON.stringify(list));
if(list){
dispatch(getOrderListSuccess(list.toJS()));
}
... ... @@ -73,8 +72,6 @@ export function getOrderList(orderType = 1) {
}
let page = myOrderList.get('currentPage') + 1;
console.log("chenlin_getOrderList");
let queryOrderList = (uid) => {
return new InstallmentService(app.host).getInstallmentOrderList(uid, orderType, page)
.then(json => {
... ... @@ -103,8 +100,6 @@ export function getOrderList(orderType = 1) {
dispatch(getOrderListSuccess(payload));
})
.catch(error => {
console.log("chenlin_Error", JSON.stringify(error));
dispatch(setTipMessage(error.message || '暂未获取到数据'));
});
};
... ... @@ -133,15 +128,9 @@ export function setTipMessage(message){
}
export function gotoOrderDetail() {
export function gotoOrderDetail(orderCode) {
return (dispatch, getState) => {
console.log("---onPressOrder");
let url = `http://m.yohobuy.com?openby:yohobuy={"action":"go.instalmentMyOrderDetail","params":{}}`;
let url = `http://m.yohobuy.com?openby:yohobuy={"action":"go.instalmentMyOrderDetail","params":{"order_code":"${orderCode}"}}`;
ReactNative.NativeModules.YH_CommonHelper.jumpWithUrl(url);
}
}
... ...