mobile / YH_RNComponent · Commits

Go to a project

Authored by 于良
Commit 2a944f46d6d5d34addcc0023c755ddcfef60692c 1 parent 108649e6

个人中心UI调整 review by liben

Inline Side-by-side
Showing 6 changed files with 124 additions and 152 deletions
... ... @@ -45,7 +45,6 @@ export default function native(platform) {
const store = configureStore(getInitialState());
store.dispatch(setPlatform(platform));
let channel = this.props.channel;
let uid = this.props.uid;
let profilesInfo = this.props.profilesInfo;
let memberBillNew = this.props.memberBillNew;
if (profilesInfo) {
... ...
... ... @@ -83,8 +83,8 @@ export default class MineList extends React.Component {
announcement,
globalOrderData
} = this.props;
let dataSource = null;
dataSource = productListForMineCenter.list.toArray();
let dataSource = productListForMineCenter.list.toArray();
return (
<View style={styles.container}>
... ...
... ... @@ -48,14 +48,15 @@ export default class MineListHeader extends React.Component {
right:offset,
top:0,
backgroundColor:'#d0021b',
paddingLeft:num<10?5:5,
paddingRight:num<10?5:5,
paddingLeft: 2.5,
paddingRight: 2.5,
paddingTop: 1.5,
borderRadius: 9,
height: 16,
borderRadius: 7,
height: 14,
minWidth: 14,
}}>
<Text style={{color: 'white',
fontSize:10,
fontSize:9,
textAlign: 'center',
textAlignVertical: 'center',
backgroundColor: 'transparent'}}>{num}</Text>
... ... @@ -70,17 +71,18 @@ export default class MineListHeader extends React.Component {
let offset = 0;
if (isNaN(num)) {
//兼容非数字
offset = 6;
} else if (num <= 0) {
//0不显示
return null;
} else if (num < 10) {
offset = 15;
offset = 25;
} else if (num < 100) {
offset = 15;
offset = 25;
} else if (num < 1000) {
offset = 10;
offset = 20;
} else if (num < 10000) {
offset = 5;
offset = 15;
} else {
offset = 0;
num = '9999+';
... ... @@ -90,14 +92,16 @@ export default class MineListHeader extends React.Component {
position:'absolute',
right:offset,
top:0,
backgroundColor:'black',
paddingLeft:num<10?4:1,
paddingRight:num<10?4:1,
borderRadius: 10,
borderWidth: (Platform.OS==='ios' ? 3 : 5) / PixelRatio.get(),
backgroundColor:'#444444',
paddingLeft: 2.5,
paddingRight: 2.5,
paddingTop: 1.5,
borderRadius: 7,
height: 14,
minWidth: 14,
}}>
<Text style={{color: 'white',
fontSize:10,
fontSize:9,
textAlign: 'center',
textAlignVertical: 'center',
backgroundColor: 'transparent'}}>{num}</Text>
... ... @@ -162,14 +166,15 @@ export default class MineListHeader extends React.Component {
}
oHigh = topHeight + oHigh;
let bgImage = Platform.OS === 'ios' ? require('../../image/mine_top_boy.png') : require('../../image/mine_banner_boy.jpg');
let bgHeight = Platform.OS === 'ios' ? 290 : 175;
let bgHeight = Platform.OS === 'ios' ? 284 : 175;
let bgMarginTop = Platform.OS === 'ios' ? -95 : 0;
let bgPaddingTop = Platform.OS === 'ios' ? 160: 45;
let paddingContainer =(width - 36*5)/16;
return (
<View style={[styles.container,{height:oHigh}]}>
<Image source={bgImage}
style={{width: width, height: bgHeight,paddingTop:bgPaddingTop, marginTop: bgMarginTop}}
style={{width: width, height: bgHeight, paddingTop: bgPaddingTop, marginTop: bgMarginTop}}
resizeMode={'cover'}>
{
... ... @@ -185,10 +190,10 @@ export default class MineListHeader extends React.Component {
source={{uri: YH_Image.getSlicedUrl(profile.head_ico, 60, 60, 2)}}
resizeMode={'cover'}/>
<View style={{
flexDirection:'column',
flex:1,
marginLeft:8,
}}>
flexDirection:'column',
flex:1,
marginLeft:8,
}}>
<Text style={{
alignItems: 'center',
justifyContent: 'center',
... ... @@ -199,18 +204,21 @@ export default class MineListHeader extends React.Component {
{profile.profile_name}
</Text>
<View style={{
flexDirection:'row',
marginTop:3,
}}>
flexDirection:'row',
marginTop:3,
}}>
{this._renderVip()}
{
profile.vip_info.is_student == 0 ? null :
<Image style={{
width: 36,
height: 15,
marginLeft:4,
}} resizeMode={'stretch'}
source={require('../../image/mine_vip_stu.png')}/>
<Image
style={{
width: 36,
height: 15,
marginLeft:4,
}}
resizeMode={'stretch'}
source={require('../../image/mine_vip_stu.png')}
/>
}
</View>
</View>
... ... @@ -243,8 +251,8 @@ export default class MineListHeader extends React.Component {
alignItems: 'center',
justifyContent: 'center',
color: 'white',
fontSize:14,
marginRight:5,
fontSize: 12,
marginRight: 5,
backgroundColor: 'transparent',
}} numberOfLines={1}>
设置收货地址
... ... @@ -283,12 +291,12 @@ export default class MineListHeader extends React.Component {
</View>
</TouchableOpacity>
<View style={{
width: 0.5,
height: 30,
marginTop:6,
marginBottom:6,
backgroundColor: '#e5e5e5',
}}/>
width: 0.5,
height: 22,
marginTop:6,
marginBottom:6,
backgroundColor: '#f0f0f0',
}}/>
<TouchableOpacity onPress={() => this.props.onPressItem('mineFavBrand','')}>
<View style={styles.topnum_content}>
{
... ... @@ -300,12 +308,12 @@ export default class MineListHeader extends React.Component {
</View>
</TouchableOpacity>
<View style={{
width: 0.5,
height: 30,
marginTop:6,
marginBottom:6,
backgroundColor: '#e5e5e5',
}}/>
width: 0.5,
height: 22,
marginTop:6,
marginBottom:6,
backgroundColor: '#f0f0f0',
}}/>
<TouchableOpacity onPress={() => this.props.onPressItem('mineBrowseHis','')}>
<View style={styles.topnum_content}>
{
... ... @@ -318,6 +326,11 @@ export default class MineListHeader extends React.Component {
</TouchableOpacity>
</View>
</Image>
<View style={{
width: width,
height: 10,
backgroundColor: '#f0f0f0',
}}/>
{certificationInfo && certificationInfo.isBindedOrRelated === 'N' ?
<TouchableOpacity onPress={() => this.props.onPressItem('mineCertification','')}>
... ... @@ -346,7 +359,7 @@ export default class MineListHeader extends React.Component {
<View style={{
width: width,
height: 0.5,
backgroundColor: '#e5e5e5',
backgroundColor: '#f0f0f0',
}}/>
</TouchableOpacity> : null
}
... ... @@ -361,12 +374,12 @@ export default class MineListHeader extends React.Component {
<View style={{
width: width,
height: 10,
backgroundColor: '#e5e5e5',
backgroundColor: '#f0f0f0',
}}/> : null
}
<TouchableOpacity onPress={() => this.props.onPressItem('mineOrder','')}>
<View style={styles.row}>
<Text style={[styles.icon_text,{fontSize:17, fontWeight:'400'}]} numberOfLines={1}>
<Text style={[styles.icon_text,{fontSize:17, fontWeight:'bold'}]} numberOfLines={1}>
我的订单
</Text>
<Text style={{
... ... @@ -382,7 +395,7 @@ export default class MineListHeader extends React.Component {
<View style={{
width: width,
height: 0.5,
backgroundColor: '#e5e5e5',
backgroundColor: '#f0f0f0',
}}/>
<View style={[styles.order_container,{paddingLeft: paddingContainer , paddingRight: paddingContainer ,}]}>
<TouchableOpacity onPress={() => this.props.onPressItem('dfkOrder','')}>
... ... @@ -444,7 +457,7 @@ export default class MineListHeader extends React.Component {
<View style={{
width: width,
height: 10,
backgroundColor: '#e5e5e5',
backgroundColor: '#f0f0f0',
}}/>
{(globalOrderData && globalOrderData.hasOrder === 'Y') ?
<TouchableOpacity onPress={() => this.props.onPressItem('mineGlobalOrder','')}>
... ... @@ -465,13 +478,13 @@ export default class MineListHeader extends React.Component {
<View style={{
width: width,
height: 10,
backgroundColor: '#e5e5e5',
backgroundColor: '#f0f0f0',
}}/>
</TouchableOpacity> : null
}
<View style={styles.row}>
<Text style={[styles.icon_text,{fontSize:17, fontWeight:'400'}]} numberOfLines={1}>
<Text style={[styles.icon_text,{fontSize:17, fontWeight:'bold'}]} numberOfLines={1}>
我的资产
</Text>
<Text style={{
... ... @@ -485,10 +498,10 @@ export default class MineListHeader extends React.Component {
<View style={{
width: width,
height: 0.5,
backgroundColor: '#e5e5e5',
backgroundColor: '#f0f0f0',
}}/>
<View style={styles.order_container}>
<View style={[styles.order_container, {paddingLeft: paddingContainer , paddingRight: paddingContainer }]}>
<TouchableOpacity onPress={() => this.props.onPressItem('mineCoupon','')}>
<View style={styles.asset_content}>
{
... ... @@ -552,7 +565,7 @@ export default class MineListHeader extends React.Component {
<View style={{
width: width,
height: 10,
backgroundColor: '#e5e5e5',
backgroundColor: '#f0f0f0',
}}/>
<TouchableOpacity onPress={() => this.props.onPressItem('mineGuang','')}>
<View style={styles.row}>
... ... @@ -569,7 +582,7 @@ export default class MineListHeader extends React.Component {
width: width-50,
height: 0.5,
marginLeft:50,
backgroundColor: '#e5e5e5',
backgroundColor: '#f0f0f0',
}}/>
<TouchableOpacity onPress={() => this.props.onPressItem('mineShareOrder','')}>
<View style={styles.row}>
... ... @@ -589,7 +602,7 @@ export default class MineListHeader extends React.Component {
width: width-50,
height: 0.5,
marginLeft:50,
backgroundColor: '#e5e5e5',
backgroundColor: '#f0f0f0',
}}/>
<View style={styles.row}>
{
... ... @@ -609,7 +622,7 @@ export default class MineListHeader extends React.Component {
<View style={{
width: width,
height: 10,
backgroundColor: '#e5e5e5',
backgroundColor: '#f0f0f0',
paddingLeft:30,
}}/>
... ... @@ -634,7 +647,7 @@ export default class MineListHeader extends React.Component {
width: width-50,
height: 0.5,
marginLeft:50,
backgroundColor: '#e5e5e5',
backgroundColor: '#f0f0f0',
}}/>
</TouchableOpacity> : null
);
... ... @@ -646,7 +659,7 @@ export default class MineListHeader extends React.Component {
(activityListInfo && (activityListInfo.list.size > 0)) ? <View style={{
width: width,
height: 10,
backgroundColor: '#e5e5e5',
backgroundColor: '#f0f0f0',
}}/> : null
}
... ... @@ -664,9 +677,9 @@ export default class MineListHeader extends React.Component {
<View style={{
width: width,
height: 10,
backgroundColor: '#e5e5e5',
backgroundColor: '#f0f0f0',
}}/>
<Text style={[styles.icon_text, {marginTop:15}]} numberOfLines={1}>
<Text style={[styles.icon_text, {fontSize: 16, height: 120, marginTop:15, marginBottom: bgMarginTop,}]} numberOfLines={1}>
为您优选新品
</Text>
</View>
... ... @@ -704,11 +717,12 @@ let styles = StyleSheet.create({
fav_container: {
flexDirection: 'row',
justifyContent: 'space-around',
alignItems: 'center',
width: width,
height: 50,
paddingTop: 3,
height: 44,
// paddingTop: 3,
backgroundColor: 'black',
opacity: 0.78,
opacity: 0.8,
},
mine_row_container: {
flexDirection: 'row',
... ... @@ -726,10 +740,12 @@ let styles = StyleSheet.create({
asset_content: {
flexDirection: 'column',
flex: 1,
justifyContent: 'center',
alignItems: 'center',
width: 80,
width: (width - 10) / 4,
paddingTop: 4,
paddingBottom: 4,
// backgroundColor:'red'
},
topnum_content: {
flexDirection: 'column',
... ... @@ -743,8 +759,8 @@ let styles = StyleSheet.create({
height: 30,
},
row_icon: {
width: 20,
height: 20,
width: 22,
height: 22,
marginRight: 10,
},
icon_right_arrow: {
... ... @@ -758,7 +774,8 @@ let styles = StyleSheet.create({
alignItems: 'center',
justifyContent: 'center',
marginLeft: 4,
fontSize: 16,
fontSize: 17,
color: '#444444',
},
order_text: {
flex: 1,
... ... @@ -771,7 +788,7 @@ let styles = StyleSheet.create({
alignItems: 'center',
justifyContent: 'center',
color: 'white',
fontSize: 14,
fontSize: 15,
textAlignVertical: 'center',
textAlign: 'center',
marginBottom: 0,
... ... @@ -780,10 +797,10 @@ let styles = StyleSheet.create({
alignItems: 'center',
justifyContent: 'center',
color: 'white',
fontSize: 13,
fontSize: 11,
textAlignVertical: 'center',
textAlign: 'center',
marginTop: 3,
// marginTop: 3,
},
open_text: {
marginTop: 30,
... ... @@ -849,11 +866,11 @@ let styles = StyleSheet.create({
paddingRight: 4,
borderRadius: 30,
borderColor: 'white',
borderWidth: (Platform.OS === 'ios' ? 1.0 : 1.5) / PixelRatio.get(),
borderWidth: 1.5,
},
user_level: {
width: 45,
height: 20,
width: 36,
height: 16,
},
renzheng: {
width: 80,
... ... @@ -869,6 +886,7 @@ let styles = StyleSheet.create({
textAlignVertical: 'center',
textAlign: 'center',
backgroundColor: 'transparent',
paddingTop: Platform.OS === 'ios' ? 7 : 0,
},
login_text: {
alignItems: 'center',
... ... @@ -890,18 +908,19 @@ let styles = StyleSheet.create({
},
globalDot:{
backgroundColor:'red',
borderColor:'red',
backgroundColor:'#d0021b',
marginRight:10,
borderRadius: 10,
paddingLeft:4,
paddingRight:4,
borderWidth: (Platform.OS==='ios' ? 3 : 5) / PixelRatio.get(),
paddingLeft: 2.5,
paddingRight: 2.5,
paddingTop: 1.5,
borderRadius: 7,
height: 14,
minWidth: 14,
},
globalDotText:{
color: 'white',
fontSize:10,
fontSize: 9,
textAlign: 'center',
textAlignVertical: 'center',
backgroundColor: 'transparent'
... ...
... ... @@ -271,25 +271,13 @@ export function setSimilarIndex(rowID) {
export function getProductListForMineCenter() {
return (dispatch, getState) => {
let {app, mine} = getState();
let {isFetching, open} = mine;
if (isFetching) {
return
}
console.log('----productListForInstallment-----');
dispatch(productListForMineCenterRequest());
return new MineService(app.host).fetchMineCenterProductList()
.then(json => {
console.log(json);
let payload = json;//product_list
if (payload.page > 1) {
let oldList = open.productListForMineCenter.list.toJS();
let list = [...oldList, ...payload.list];
payload.product_list = list;
}
dispatch(productListForMineCenterSuccess(payload));
dispatch(productListForMineCenterSuccess(json));
})
.catch(error => {
console.log(error);
dispatch(productListForMineCenterFailure());
});
}
... ... @@ -298,20 +286,18 @@ export function getProductListForMineCenter() {
export function getMineUserInfo() {
return (dispatch, getState) => {
let {app, mine} = getState();
let {isFetching, open} = mine;
let {isFetching} = mine;
let funGetMineUserinfo = () => {
if (isFetching) {
return
}
console.log('----getMineUserInfo-----');
return new MineService(app.host).getMineUserInfo()
.then(json => {
console.log(json);
dispatch(getMineUserInfoSuccess(json));
})
.catch(error => {
console.log(error);
dispatch(getMineUserInfoFailure());
});
};
... ... @@ -329,7 +315,7 @@ export function getMineUserInfo() {
export function getMineUserInfoNum() {
return (dispatch, getState) => {
let {app, mine} = getState();
let {isFetching, open} = mine;
let {isFetching} = mine;
if (isFetching) {
return;
... ... @@ -338,15 +324,13 @@ export function getMineUserInfoNum() {
dispatch(getMineUserInfoNumRequest());
let funGetMineUserInfoNum = () => {
console.log('----getMineUserInfoNum-----');
return new MineService(app.host).getMineUserInfoNum()
.then(json => {
ReactNative.NativeModules.YH_MineHelper.setShareOrderNum(json);
dispatch(getMineUserInfoNumSuccess(json));
})
.catch(error => {
console.log(error);
//dispatch(getMineUserInfoNumFailure());
});
};
... ... @@ -391,18 +375,14 @@ export function getMineUnreadMsg() {
export function getMineFavProNum() {
return (dispatch, getState) => {
let {app, mine} = getState();
let {isFetching, open} = mine;
let funGetMineFavProNum = () => {
console.log('----getMineFavProNum-----');
return new MineService(app.singleHost).getMineFavProNum()
.then(json => {
console.log(json);
dispatch(getMineFavProNumSuccess(json));
})
.catch(error => {
console.log(error);
//dispatch(getMineFavProNumFailure());
});
};
... ... @@ -419,17 +399,14 @@ export function getMineFavProNum() {
export function getMineRedPackageNum() {
return (dispatch, getState) => {
let {app, mine} = getState();
let {isFetching, open} = mine;
let funGetMineRedPackageNum = () => {
console.log('----getMineRedPackageNum-----');
return new MineService(app.host).getMineRedPackageNum()
.then(json => {
console.log(json);
dispatch(getMineRedPackageNumSuccess(json));
})
.catch(error => {
console.log(error);
});
};
... ... @@ -446,16 +423,13 @@ export function getMineRedPackageNum() {
export function getMineInstalemtInfo() {
return (dispatch, getState) => {
let {app, mine} = getState();
let {isFetching, open} = mine;
console.log('----getMineInstalemtInfo-----');
return new MineService(app.host).getMineInstalemtInfo()
.then(json => {
console.log(json);
ReactNative.NativeModules.YH_MineHelper.setInstalmentStatus(json);
dispatch(getMineInstalemtInfoSuccess(json));
})
.catch(error => {
console.log(error);
dispatch(getMineInstalemtInfoFailure());
});
}
... ... @@ -464,8 +438,7 @@ export function getMineInstalemtInfo() {
export function getMineActivity() {
return (dispatch, getState) => {
let {app, mine} = getState();
let {isFetching, open} = mine;
console.log('----getMineActivity-----');
return new MineService(app.host).getMineActivity()
.then(json => {
// 成功获取活动数据后，调用原生的getMineActivityWithClicked方法获取是否点击过该活动，决定页面是否展示小红点
... ... @@ -477,7 +450,7 @@ export function getMineActivity() {
if (Platform.OS === 'android') {
result = JSON.parse(result);
}
console.log(result);
dispatch(getMineActivitySuccess(result));
})
.catch(error => {
... ... @@ -495,16 +468,13 @@ export function getMineActivity() {
export function getMemberBillTask() {
return (dispatch, getState) => {
let {app, mine} = getState();
let {isFetching, open} = mine;
console.log('----getMemberBillTask-----');
return new MineService(app.billHost).getMemberBillTask()
.then(json => {
console.log(json);
dispatch(getMemberBillTaskSuccess(json));
})
.catch(error => {
console.log(error);
//dispatch(getMemberBillTaskFailure());
});
}
}
... ... @@ -512,16 +482,13 @@ export function getMemberBillTask() {
export function getEnvelopesItem() {
return (dispatch, getState) => {
let {app, mine} = getState();
let {isFetching, open} = mine;
console.log('----getEnvelopesItem-----');
return new MineService(app.host).getEnvelopesItem()
.then(json => {
console.log(json);
dispatch(getEnvelopesItemSuccess(json));
})
.catch(error => {
console.log(error);
//dispatch(getEnvelopesItemFailure());
});
}
}
... ... @@ -529,16 +496,13 @@ export function getEnvelopesItem() {
export function getCertificationData() {
return (dispatch, getState) => {
let {app, mine} = getState();
let {isFetching, open} = mine;
console.log('----getCertificationData-----');
return new MineService(app.host).getCertificationData()
.then(json => {
console.log(json);
dispatch(getCertificationDataSuccess(json));
})
.catch(error => {
console.log(error);
//dispatch(getCertificationDataFailure());
});
}
}
... ... @@ -546,16 +510,13 @@ export function getCertificationData() {
export function getAnnouncement() {
return (dispatch, getState) => {
let {app, mine} = getState();
let {isFetching, open} = mine;
console.log('----getAnnouncement-----');
return new MineService(app.host).getAnnouncement()
.then(json => {
console.log(json);
dispatch(getAnnouncementSuccess(json));
})
.catch(error => {
console.log(error);
//dispatch(getAnnouncementFailure());
});
}
}
... ... @@ -563,15 +524,14 @@ export function getAnnouncement() {
export function getGlobalOrderState() {
return (dispatch, getState) => {
let {app, mine} = getState();
let {isFetching, open} = mine;
let funGetGlobalOrderState = () => {
console.log('----getMineRedPackageNum-----');
return new MineService(app.globalApiHost).getGlobalOrderState()
.then(json => {
dispatch(getGlobalOrderStateSuccess(json));
})
.catch(error => {
});
};
... ... @@ -601,6 +561,7 @@ export function getMineAllIcon() {
dispatch(getMineAllIconSuccess(result));
})
.catch(error => {
});
}
}
... ...
... ... @@ -7,8 +7,6 @@ let InitialState = Record({
open: new (Record({
productListForMineCenter: new (Record({
list: List(),
page: 1,
totalPage: 1,
similarIndex: -1,
})),
mineCenterInfo: '',
... ...
... ... @@ -73,15 +73,10 @@ export default function appReducer(state = initialState, action) {
switch (action.type) {
case MINECENTER_PRODUCT_SUCCESS: {
let {
page,
page_total,
product_list,
} = action.payload;
let productListForMineCenter = state.open.productListForMineCenter.set('list', Immutable.fromJS(product_list))
.set('page', page)
.set('totalPage', page_total);
return state.setIn(['open', 'productListForMineCenter'], productListForMineCenter);
return state.setIn(['open', 'productListForMineCenter', 'list'], Immutable.fromJS(product_list));
}
case SET_SIMILAR_PRODUCT_INDEX: {
... ...