mobile / YH_RNComponent · Commits

Go to a project

Authored by 王海元
Commit f929a47ef5c8f020b08ea96854f7c7490f39f086 1 parent 89c60c50

更新RN会员礼包 --review by 孙凯

Inline Side-by-side
Showing 14 changed files with 482 additions and 93 deletions
... ... @@ -15,48 +15,103 @@ import {
import {Immutable, Map} from 'immutable';
import ReceiveGiftAlert from './ReceiveGiftAlert';
import ProductListCell from '../../common/components/ListCell/ProductListCell';
import CouponsBagListCell from "./CouponsBagListCell";
export default class AssociatorGift extends Component {
constructor(props) {
super(props);
this._renderRow = this._renderRow.bind(this);
this._renderHeader = this._renderHeader.bind(this);
this.dataSource = new ListView.DataSource({
rowHasChanged: (r1, r2) => !Immutable.is(r1, r2),
sectionHeaderHasChanged: (s1, s2) => !Immutable.is(s1, s2),
});
}
_renderHeader() {
let total = this.props.couponsBagCnt.total;
let title = total > 0 ? '您有' + total + '个礼包可领取' : '暂时没有获得任何礼包';
let desc = total > 0 ? '以下是近期礼包' : '';
return (
<View style={styles.bagBackground}>
<Image style={styles.bgImage} source={require('../images/xyzx_lb.png')}/>
<Text style={styles.bagTitle}>{title}</Text>
<Text style={styles.bagTips}>{desc}</Text>
</View>
)
}
_renderRow(rowData, sectionID, rowID) {
let paddingLeft = rowID % 2 === 1 ? rowMarginHorizontal / 2 : rowMarginHorizontal;
let customStyle = rowID === 0 || rowID === 1 ? {paddingLeft} : {paddingLeft};
return (
<ProductListCell
style={[styles.listContainer, customStyle]}
key={'row' + rowID}
rowID={rowID}
data={rowData}
onPressProduct={this.props.onPressProduct}
needShopCar={true}
onPressShopCar={this.props.onPressShopCar}
/>
);
switch (sectionID) {
case 'couponsBag': {
return (
<CouponsBagListCell
style={[styles.listContainer, customStyle]}
key={'row' + rowID}
rowID={rowID}
data={rowData}
onPressGiftBag={this.props.onPressGiftBag}
showGiftAlert={this.props.showGiftAlert}
hiddenGiftAlert={this.props.hiddenGiftAlert}
/>
);
}
case 'productListTitle': {
return (
<View>
<View style={styles.titleView}>
<View style={styles.titleLine}/>
<View style={styles.ViewForTextStyle}>
<Text style={styles.textStyle}>猜你喜欢</Text>
</View>
</View>
<View style={styles.titleBottomLine}/>
</View>
)
}
case 'productList': {
return (
<ProductListCell
style={[styles.listContainer, customStyle]}
key={'row' + rowID}
rowID={rowID}
data={rowData}
onPressProduct={this.props.onPressProduct}
needShopCar={true}
onPressShopCar={this.props.onPressShopCar}
/>
);
}
default:
return null;
}
}
render() {
let {
showGiftAlert,
productList
couponsBag,
productList,
drawCouponsBag
} = this.props;
let dataSource = productList.product_list.toArray();
let dataSource = {
couponsBag: couponsBag.couponsBag_list ? couponsBag.couponsBag_list.toArray(): [],
productListTitle: ['猜你喜欢'],
productList: productList.product_list ? productList.product_list.toArray() : [],
};
let drawCouponsBag_list = drawCouponsBag.drawCouponsBag_list.toArray();
return (
<View style={styles.container}>
<Text>aaaaa</Text>
<ReceiveGiftAlert
data={drawCouponsBag_list}
showGiftAlert={showGiftAlert}
hiddenGiftAlert={this.props.hiddenGiftAlert}
onPressCouponItem={this.props.onPressCouponItem}
... ... @@ -66,11 +121,12 @@ export default class AssociatorGift extends Component {
ref={(c) => {
this.listView = c;
}}
yh_viewVisible = {true}
yh_viewVisible={true}
contentContainerStyle={styles.contentContainer}
enableEmptySections={true}
dataSource={this.dataSource.cloneWithRows(dataSource)}
dataSource={this.dataSource.cloneWithRowsAndSections(dataSource)}
renderRow={this._renderRow}
renderHeader={this._renderHeader}
/>
</View>
);
... ... @@ -85,9 +141,59 @@ let styles = StyleSheet.create({
container: {
flex: 1,
},
bagBackground: {
width: width,
alignItems: 'center',
backgroundColor: '#444444',
},
bgImage: {
width: 50,
height: 57.4,
marginTop: 39,
marginBottom: 15.6
},
bagTitle: {
fontFamily: 'PingFang-SC-Medium',
fontSize: 14,
color: '#FFFFFF',
},
bagTips: {
height: 45,
fontFamily: 'PingFang-SC-Regula',
fontSize: 12,
color: '#B0B0B0',
paddingTop: 4,
},
titleView: {
width: width,
height: 40,
backgroundColor: 'white',
flexDirection: 'row',
},
titleLine: {
width: 2,
height: 15,
marginLeft: 15,
marginTop: 12.5,
backgroundColor: 'black'
},
ViewForTextStyle: {
height: 40,
marginLeft: 10,
justifyContent: 'center',
},
textStyle: {
fontSize: 16,
},
titleBottomLine: {
width: width,
height: 1,
backgroundColor: '#e0e0e0'
},
contentContainer: {
flexDirection: 'row',
flexWrap: 'wrap',
backgroundColor: 'white'
},
listContainer: {
width: width / 2,
... ...
'use strict';
import React from 'react';
import ReactNative from 'react-native';
const {
StyleSheet,
Text,
View,
Image,
Dimensions,
TouchableOpacity,
} = ReactNative;
export default class CouponsBagListCell extends React.Component {
constructor(props) {
super(props);
}
render() {
let {data} = this.props;
let nameStyle = data.get('notExpired') ? {color: '#222222'} : {color: '#B0B0B0'};
let bgStyle = data.get('status') === 0 && data.get('notExpired') ? {backgroundColor: '#A69073'} : {backgroundColor: '#B0B0B0'};
let textStyle = data.get('status') === 0 && data.get('notExpired') ? {fontFamily: 'PingFang-SC-Bold'} : {fontFamily: 'PingFang-SC-Medium'};
//"status": 是否已领取 未领取：0，已领取：1；
//"notExpired": 未过期：true，过期：false；
let text = data.get('status') === 1 ? '已领取' : data.get('notExpired') ? '领取' : '已失效';
return (
<View style={styles.container}>
<View style={styles.contentContainer}>
<Image style={styles.imgIconBg}
source={data.get('notExpired') ? require('../images/bg_use.png') : require('../images/bg_used.png')}/>
<View style={styles.contentText}>
<Text style={[styles.name, nameStyle]}>{data.get('name')}</Text>
<Text style={[styles.dateTitle, nameStyle]}>{data.get('dateTitle')}</Text>
<Text style={styles.desc}>{data.get('desc')}</Text>
</View>
<TouchableOpacity activeOpacity={1} onPress={() => {
this.props.onPressGiftBag && this.props.onPressGiftBag(data.get('id'));
// data.get('status') === 0 && data.get('notExpired') && this.props.onPressGiftBag && this.props.onPressGiftBag(data.get('id'));
}}>
<View style={[styles.buttonBg, bgStyle]}>
<Text style={[styles.textStyle, textStyle]}>{text}</Text>
</View>
</TouchableOpacity>
</View>
</View>
);
}
};
let {width, height} = Dimensions.get('window');
let styles = StyleSheet.create({
container: {
width: width,
alignItems: 'center',
backgroundColor: '#444444',
},
contentContainer: {
width: 345,
height: 70,
marginLeft: 15,
marginRight: 15,
marginBottom: 10,
borderRadius: 2,
flexDirection: 'row',
backgroundColor: 'white',
},
imgIconBg: {
width: 50,
height: 50,
marginTop: 10,
marginLeft: 16,
marginRight: 10,
marginBottom: 10,
},
contentText: {
width: 194,
},
name: {
marginTop: 10,
fontFamily: 'PingFang-SC-Medium',
fontSize: 12,
color: '#222222',
},
dateTitle: {
marginTop: 2,
fontFamily: 'PingFang-SC-Regular',
fontSize: 10,
color: '#222222',
},
desc: {
marginTop: 2,
fontFamily: 'PingFang-SC-Regular',
fontSize: 10,
color: '#B0B0B0',
},
buttonBg: {
width: 60,
height: 26,
marginTop: 22,
borderRadius: 30,
alignItems: 'center',
justifyContent: 'center',
backgroundColor: '#A69073',
},
textStyle: {
fontFamily: 'PingFang-SC-Bold',
fontSize: 14,
color: 'white',
},
});
... ...
... ... @@ -5,15 +5,15 @@ import ReactNative from 'react-native';
import Immutable, {Map} from 'immutable';
const {
AppRegistry,
StyleSheet,
Text,
View,
Image,
ListView,
Dimensions,
TouchableOpacity,
Modal,
AppRegistry,
StyleSheet,
Text,
View,
Image,
ListView,
Dimensions,
TouchableOpacity,
Modal,
} = ReactNative;
... ... @@ -29,93 +29,70 @@ export default class ReceiveGiftAlert extends React.Component {
}
_onRequestClose(){
_onRequestClose() {
console.log('_onRequestClose');
}
renderRow(rowData, sectionID, rowID, highlightRow) {
let price = rowData.couponName;
return(
return (
<View style={styles.row}>
<TouchableOpacity style={styles.row} activeOpacity={0.5} onPress={() => {
this.props.onPressCouponItem && this.props.onPressCouponItem(rowData);
}}>
<Image source={require('../images/hyzx_yhq_bg.png')} style={styles.rowIcon} resizeMode={'contain'}></Image>
<Text style={styles.price}>{price}</Text>
this.props.onPressCouponItem && this.props.onPressCouponItem(rowData);
}}>
<Image source={require('../images/hyzx_yhq_bg.png')} style={styles.rowIcon} resizeMode={'contain'}/>
<Text style={styles.price}>{rowData.get('couponName')}</Text>
</TouchableOpacity>
</View>
);
}
render() {
let {data} = this.props;
let dataSource = [{
"couponAmount": 50,
"couponCode": "",
"couponName": "满199-50",
"endTime": "2017-04-30 09:45:40",
"id": 2030,
"startTime": "2013-04-01 00:00:00",
"status": 1,
"useLimit": "199",
"useLimitType": "2"
},
{
"couponAmount": 300,
"couponCode": "",
"couponName": "12月生日券-满799减300",
"endTime": "2017-01-31 09:45:40",
"id": 2033,
"startTime": "2013-12-01 00:00:00",
"status": 1,
"useLimit": "799",
"useLimitType": "2"
}];
return (
return (
<Modal
visible={this.props.showGiftAlert}
animationType={'none'}
transparent = {true}
transparent={true}
onRequestClose={this._onRequestClose}
>
<View style={styles.modalStyle}>
<View style={styles.container}>
<Text style={styles.title}>恭喜你领取成功</Text>
<TouchableOpacity style={styles.delete} activeOpacity={0.5} onPress={() => {
<TouchableOpacity style={styles.delete} activeOpacity={0.5} onPress={() => {
this.props.hiddenGiftAlert && this.props.hiddenGiftAlert();
}}>
<Image source={require('../images/close.png')} style={styles.deleteIcon} resizeMode={'contain'}></Image>
<Image source={require('../images/close.png')} style={styles.deleteIcon} resizeMode={'contain'}/>
</TouchableOpacity>
<View style={styles.contentContainer}>
<ListView
ref='giftList'
contentContainerStyle={styles.listContainer}
enableEmptySections={true}
dataSource={this.dataSource.cloneWithRows(dataSource)}
dataSource={this.dataSource.cloneWithRows(data)}
renderRow={this.renderRow}
/>
</View>
<View style={styles.detailView}>
<TouchableOpacity activeOpacity={0.5} onPress={() => {
this.props.onPressLookDetail && this.props.onPressLookDetail();
}}>
this.props.onPressLookDetail && this.props.onPressLookDetail();
}}>
<Text style={styles.detail}>查看详情</Text>
</TouchableOpacity>
</View>
</View>
</View>
</Modal>
);
);
}
};
let {width, height} = Dimensions.get('window');
let styles = StyleSheet.create({
modalStyle: {
width: width,
height: height,
backgroundColor: 'rgba(0, 0, 0, 0.6)',
modalStyle: {
width: width,
height: height,
backgroundColor: 'rgba(0, 0, 0, 0.6)',
flex: 1,
justifyContent: 'center',
alignItems: 'center',
... ...
... ... @@ -20,4 +20,8 @@ export default keyMirror({
DRAW_COUPONS_BAG_SUCCESS: null,
DRAW_COUPONS_BAG_FAILURE: null,
COUPONS_BAG_CNT_REQUEST: null,
COUPONS_BAG_CNT_SUCCESS: null,
COUPONS_BAG_CNT_FAILURE: null,
});
... ...
... ... @@ -43,13 +43,16 @@ class AssociatorGiftContainer extends Component {
super(props);
this._displayGiftAlert = this._displayGiftAlert.bind(this);
this._hiddenGiftAlert = this._hiddenGiftAlert.bind(this);
this.onPressProduct = this.onPressProduct.bind(this);
this._onPressGiftBag = this._onPressGiftBag.bind(this);
this._onPressProduct = this._onPressProduct.bind(this);
this._onPressShopCar = this._onPressShopCar.bind(this);
this._onPressCouponItem = this._onPressCouponItem.bind(this);
this._onPressLookDetail = this._onPressLookDetail.bind(this);
}
componentDidMount() {
this.props.actions.getCouponsBagCnt();
this.props.actions.getCouponsBagList();
this.props.actions.getProductListForAssociatorGift();
}
... ... @@ -57,6 +60,10 @@ class AssociatorGiftContainer extends Component {
}
_onPressGiftBag(couponsBagId) {
this.props.actions.getDrawCouponsBag(couponsBagId);
}
_displayGiftAlert(){
this.props.actions.displayGiftAlert();
}
... ... @@ -83,7 +90,7 @@ class AssociatorGiftContainer extends Component {
ReactNative.NativeModules.YH_CommonHelper.showChooseInfoView(param)
}
onPressProduct(product){
_onPressProduct(product){
let productSkn = product && product.get('product_skn', 0);
let is_global = product && product.get('is_global', 'N');
... ... @@ -104,15 +111,22 @@ class AssociatorGiftContainer extends Component {
let {
showGiftAlert,
productList
couponsBagCnt,
couponsBag,
productList,
drawCouponsBag
} = this.props.associatorGift;
return (
<AssociatorGift
showGiftAlert={showGiftAlert}
displayGiftAlert={this._displayGiftAlert}
hiddenGiftAlert={this._hiddenGiftAlert}
couponsBagCnt={couponsBagCnt}
couponsBag={couponsBag}
productList={productList}
onPressProduct={this.onPressProduct}
drawCouponsBag={drawCouponsBag}
onPressGiftBag={this._onPressGiftBag}
onPressProduct={this._onPressProduct}
onPressShopCar={this._onPressShopCar}
onPressCouponItem={this._onPressCouponItem}
onPressLookDetail={this._onPressLookDetail}
... ...
... ... @@ -20,9 +20,11 @@ const {
DRAW_COUPONS_BAG_SUCCESS,
DRAW_COUPONS_BAG_FAILURE,
} = require('../../constants/actionTypes').default;
COUPONS_BAG_CNT_REQUEST,
COUPONS_BAG_CNT_SUCCESS,
COUPONS_BAG_CNT_FAILURE,
} = require('../../constants/actionTypes').default;
export function displayGiftAlert() {
return {
... ... @@ -96,6 +98,26 @@ export function drawCouponsBagFailure(error) {
};
}
export function couponsBagCntRequest() {
return {
type: COUPONS_BAG_CNT_REQUEST,
};
}
export function couponsBagCntSuccess(json) {
return {
type: COUPONS_BAG_CNT_SUCCESS,
payload: json
};
}
export function couponsBagCntFailure(error) {
return {
type: COUPONS_BAG_CNT_FAILURE,
payload: error
};
}
export function getCouponsBagList() {
return (dispatch, getState) => {
let {app} = getState();
... ... @@ -137,14 +159,16 @@ export function getProductListForAssociatorGift() {
}
export function getDrawCouponsBag() {
export function getDrawCouponsBag(couponsBagId) {
return (dispatch, getState) => {
let {app} = getState();
let fetchCouponsBag = (uid, couponsBagId) => {
let {app, associatorGift} = getState();
let fetchCouponsBag = (uid) => {
dispatch(drawCouponsBagRequest());
return new AssociatorGiftService(app.host).fetchDrawCouponsBag(uid, couponsBagId)
.then(json => {
dispatch(drawCouponsBagSuccess(json));
let result = parseResourceResources(json, associatorGift, couponsBagId);
dispatch(drawCouponsBagSuccess(result));
dispatch(getCouponsBagCnt());
})
.catch(error => {
dispatch(drawCouponsBagFailure(error));
... ... @@ -159,6 +183,48 @@ export function getDrawCouponsBag() {
.catch(error => {
fetchCouponsBag(uid)
});
};
}
export function getCouponsBagCnt() {
return (dispatch, getState) => {
let {app} = getState();
let fetchCouponsBagCnt = (uid) => {
dispatch(couponsBagCntRequest());
return new AssociatorGiftService(app.host).fetchCouponsBagCnt(uid)
.then(json => {
dispatch(couponsBagCntSuccess(json));
})
.catch(error => {
dispatch(couponsBagCntFailure(error));
});
};
let uid = 0;
ReactNative.NativeModules.YH_CommonHelper.uid()
.then(uid => {
fetchCouponsBagCnt(uid)
})
.catch(error => {
fetchCouponsBagCnt(uid)
});
};
}
export function parseResourceResources(json, associatorGift, couponsBagId) {
let isShow = json.length > 0;
let associatorGiftList = associatorGift.toJS();
let couponsBagList = associatorGiftList && associatorGiftList.couponsBag && associatorGiftList.couponsBag.couponsBag_list;
//更新礼包选中的状态
couponsBagList.map((item)=>{
if (item.id === couponsBagId) {
item.status = 1;
}
});
return {
isShow: isShow,
couponsBagList,
drawCouponsBagList: json,
};
}
\ No newline at end of file
... ...
... ... @@ -4,6 +4,13 @@ import {Record, List, Map} from 'immutable';
let InitialState = Record({
showGiftAlert: false,
couponsBagCnt: new (Record({
isFetching: false,
error: null,
total: 0,
})),
couponsBag: new (Record({
isFetching: false,
error: null,
... ... @@ -16,6 +23,12 @@ let InitialState = Record({
product_list: List(),
rec_id:'',
})),
drawCouponsBag: new (Record({
isFetching: false,
error: null,
drawCouponsBag_list: List(),
})),
});
export default InitialState;
... ...
... ... @@ -4,37 +4,112 @@ import InitialState from './associatorGiftInitialState';
import Immutable, {Map} from 'immutable';
const {
SHOWGIFTALERT,
DISMISSGIFTALERT,
SHOWGIFTALERT,
DISMISSGIFTALERT,
COUPONS_BAG_REQUEST,
COUPONS_BAG_SUCCESS,
COUPONS_BAG_FAILURE,
ASSOCIATORGIFT_PRODUCT_REQUEST,
ASSOCIATORGIFT_PRODUCT_SUCCESS,
ASSOCIATORGIFT_PRODUCT_FAILURE,
DRAW_COUPONS_BAG_REQUEST,
DRAW_COUPONS_BAG_SUCCESS,
DRAW_COUPONS_BAG_FAILURE,
COUPONS_BAG_CNT_REQUEST,
COUPONS_BAG_CNT_SUCCESS,
COUPONS_BAG_CNT_FAILURE,
} = require('../../constants/actionTypes').default;
const initialState = new InitialState;
export default function couponReducer(state=initialState, action) {
if (!(state instanceof InitialState)) {
export default function couponReducer(state = initialState, action) {
if (!(state instanceof InitialState)) {
return initialState.merge(state);
}
switch(action.type) {
case SHOWGIFTALERT: {
return state.set('showGiftAlert', true);
}
case DISMISSGIFTALERT: {
return state.set('showGiftAlert', false);
}
}
switch (action.type) {
case SHOWGIFTALERT: {
return state.set('showGiftAlert', true);
}
case DISMISSGIFTALERT: {
return state.set('showGiftAlert', false);
}
case COUPONS_BAG_REQUEST: {
return state.setIn(['couponsBag', 'isFetching'], true)
.setIn(['couponsBag', 'error'], null);
}
case COUPONS_BAG_SUCCESS: {
return state.setIn(['couponsBag', 'isFetching'], false)
.setIn(['couponsBag', 'couponsBag_list'], Immutable.fromJS(action.payload))
.setIn(['couponsBag', 'error'], null);
}
case COUPONS_BAG_FAILURE: {
return state.setIn(['couponsBag', 'isFetching'], false)
.setIn(['couponsBag', 'error'], action.payload);
}
case ASSOCIATORGIFT_PRODUCT_REQUEST: {
return state.setIn(['productList', 'isFetching'], true)
.setIn(['productList', 'error'], null);
}
case ASSOCIATORGIFT_PRODUCT_SUCCESS: {
let {
product_list,
rec_id,
} = action.payload;
return state.setIn(['productList', 'product_list'], Immutable.fromJS(product_list))
.setIn(['productList', 'rec_id'], rec_id);
return state.setIn(['productList', 'isFetching'], false)
.setIn(['productList', 'product_list'], Immutable.fromJS(product_list))
.setIn(['productList', 'rec_id'], rec_id)
.setIn(['productList', 'error'], null);
}
case ASSOCIATORGIFT_PRODUCT_FAILURE: {
return state.setIn(['productList', 'error'], Immutable.fromJS(action.payload));
return state.setIn(['productList', 'isFetching'], false)
.setIn(['productList', 'error'], action.payload);
}
case DRAW_COUPONS_BAG_REQUEST: {
return state.setIn(['drawCouponsBag', 'isFetching'], true)
.setIn(['drawCouponsBag', 'error'], null);
}
case DRAW_COUPONS_BAG_SUCCESS: {
return state.setIn(['drawCouponsBag', 'isFetching'], false)
.set('showGiftAlert', action.payload.isShow)
.setIn(['couponsBag', 'couponsBag_list'], Immutable.fromJS(action.payload.couponsBagList))
.setIn(['drawCouponsBag', 'drawCouponsBag_list'], Immutable.fromJS(action.payload.drawCouponsBagList))
.setIn(['drawCouponsBag', 'error'], null);
}
case DRAW_COUPONS_BAG_FAILURE: {
return state.setIn(['drawCouponsBag', 'isFetching'], false)
.setIn(['drawCouponsBag', 'error'], action.payload);
}
case COUPONS_BAG_CNT_REQUEST: {
return state.setIn(['couponsBagCnt', 'isFetching'], true)
.setIn(['couponsBagCnt', 'error'], null);
}
case COUPONS_BAG_CNT_SUCCESS: {
return state.setIn(['couponsBagCnt', 'isFetching'], false)
.setIn(['couponsBagCnt', 'total'], action.payload.total)
.setIn(['couponsBagCnt', 'error'], null);
}
case COUPONS_BAG_CNT_FAILURE: {
return state.setIn(['couponsBagCnt', 'isFetching'], false)
.setIn(['couponsBagCnt', 'error'], action.payload);
}
}
... ...
... ... @@ -17,6 +17,7 @@ export default class AssociatorGiftService {
url: '',
body: {
uid,
page: 1,
method: 'app.giftBag.getCouponsBagList',
}
})
... ... @@ -63,4 +64,20 @@ export default class AssociatorGiftService {
});
}
async fetchCouponsBagCnt(uid) {
return await this.api.get({
url: '',
body: {
uid,
method: 'app.giftBag.getCouponsBagCnt',
}
})
.then((json) => {
return json;
})
.catch((error) => {
throw(error);
});
}
}
... ...