mobile / YH_RNComponent · Commits

Go to a project

Authored by 孙凯
Commit da6a9a828bf1422e533f5bfe8dd84264ccd98676 1 parent f7a0d209

add UI review by daiqiang

Inline Side-by-side
Showing 12 changed files with 434 additions and 3 deletions
... ... @@ -147,4 +147,12 @@ let styles = StyleSheet.create({
color: '#B0B0B0',
alignItems: 'center',
},
deleteLine: {
position: 'absolute',
top: (16 / 2) - 3,
left: 0,
right: 0,
height: 1,
backgroundColor: '#b0b0b0',
},
});
... ...
'use strict';
import React from 'react';
import ReactNative from 'react-native';
const {
AppRegistry,
StyleSheet,
Image,
View,
Dimensions,
TouchableOpacity,
Modal,
Text,
} = ReactNative;
export default class ShareViewModal extends React.Component {
constructor(props) {
super(props);
}
render() {
return (
<Modal
visible={this.props.show}
animationType={'none'}
transparent={true}
onRequestClose={() => {
}}>
<View style={styles.modalContainer}>
<View style={styles.shareView}>
<View style={styles.image}>
</View>
<View style={styles.buttons}>
<TouchableOpacity activeOpacity={0.5} style={styles.button1} onPress={() => {
this.props.showSnapshootShare && this.props.showSnapshootShare(1,false);
}}>
<Image source={require('../images/weixin.png')} style={styles.icon} />
<Text style={styles.text}>分享给好友</Text>
</TouchableOpacity>
<TouchableOpacity activeOpacity={0.5} style={styles.button2} onPress={() => {
this.props.showSnapshootShare && this.props.showSnapshootShare(2,true);
}}>
<Image source={require('../images/pengyou.png')} style={styles.icon} />
<Text style={styles.text}>微信快照</Text>
</TouchableOpacity>
</View>
<View style={styles.line}/>
<TouchableOpacity activeOpacity={0.5} style={styles.cancel} onPress={() => {
this.props.showShareView && this.props.showShareView(false);
}}>
<Text style={styles.canceltext}>取消</Text>
</TouchableOpacity>
</View>
</View>
</Modal>
);
}
};
let {width, height} = Dimensions.get('window');
const DEVICE_WIDTH_RATIO = width / 375;
let styles = StyleSheet.create({
modalContainer: {
flex: 1,
width: width,
height: height,
justifyContent: 'flex-end',
backgroundColor: 'rgba(0, 0, 0, 0.6)',
},
shareView: {
width,
height: 284*DEVICE_WIDTH_RATIO,
backgroundColor: 'white',
alignItems: 'center',
},
image :{
width: 305*DEVICE_WIDTH_RATIO,
height: 88*DEVICE_WIDTH_RATIO,
marginTop: 25*DEVICE_WIDTH_RATIO,
backgroundColor: 'red',
},
buttons: {
width,
height: 115*DEVICE_WIDTH_RATIO,
alignItems: 'center',
flexDirection: 'row',
},
button1: {
marginLeft: 90*DEVICE_WIDTH_RATIO,
alignItems: 'center',
},
button2: {
marginLeft: 105*DEVICE_WIDTH_RATIO,
alignItems: 'center',
},
icon: {
width: 45*DEVICE_WIDTH_RATIO,
height: 45*DEVICE_WIDTH_RATIO,
},
text: {
marginTop: 8*DEVICE_WIDTH_RATIO,
fontSize: 12,
color: '#444444',
},
line: {
width: width - 52,
height: 1,
backgroundColor: '#CCCCCC',
},
cancel: {
width,
height: 54*DEVICE_WIDTH_RATIO,
justifyContent: 'center',
alignItems: 'center',
},
canceltext: {
fontSize: 17,
color: '#444444',
},
});
... ...
'use strict';
import React from 'react';
import ReactNative from 'react-native';
import YH_Image from '../../common/components/YH_Image';
import {getSlicedUrl} from '../../classify/utils/Utils';
import DeleteLineText from '../../common/components/DeleteLineText';
const {
AppRegistry,
StyleSheet,
Image,
View,
Dimensions,
TouchableOpacity,
Modal,
Text,
} = ReactNative;
export default class SnapshootShare extends React.Component {
constructor(props) {
super(props);
this.saveImage = this.saveImage.bind(this);
}
saveImage(){
this.props.showSnapshootShare && this.props.showSnapshootShare(2,false);
}
render() {
let { groupDetail } = this.props;
let productDetail = groupDetail ? groupDetail.toJS():null;
if(!productDetail){
return null;
}
let lackNum = productDetail.lackNum;
let membershipItems = productDetail.membershipItems;
let resource = membershipItems ? membershipItems[0]: null;
if (!resource) {
return null;
}
let productIcon = resource.productIcon ? getSlicedUrl(resource.productIcon,109*DEVICE_WIDTH_RATIO, 141*DEVICE_WIDTH_RATIO, 2) : '';
let productGroupPrice = resource.productGroupPrice;
let productName = resource.productName;
let productSalePrice = resource.productSalePrice;
let productSkn = resource.productSkn;
let perpleNum = membershipItems.length + lackNum;
return (
<Modal
visible={this.props.show}
animationType={'none'}
transparent={true}
onRequestClose={() => {
}}>
<View style={styles.modalContainer}>
<View style={styles.container}>
<View style={styles.titleV}>
<Text style={styles.name}>54666</Text>
<Text style={styles.commonText}>邀请你参团</Text>
</View>
<View style={styles.product}>
<YH_Image style={styles.image} url={productIcon}></YH_Image>
<View style={styles.right}>
<View style={styles.titleView}>
<Text style={styles.title} numberOfLines={2}>{productName}</Text>
</View>
<View style={styles.priceView}>
<Text style={styles.iconText}>{perpleNum}人团</Text>
<Text style={styles.price1}>{productGroupPrice}</Text>
</View>
<View style={styles.subPriceView}>
<Text style={styles.subPrice1}>单人购买：</Text>
<DeleteLineText
style={styles.oldPriceContainer}
textStyle={styles.price2}
lineStyle={styles.deleteLine}
text={productSalePrice}
/>
</View>
</View>
</View>
<Image source={require('../images/share-logo.png')} resizeMode={'contain'} style={styles.logo} />
<Image source={require('../images/pengyou.png')} resizeMode={'contain'} style={styles.qr} />
<Text style={styles.tip}>长按扫码立即参团</Text>
<View style={styles.tipDetailView}>
<Image source={require('../images/PT_tip_ic.png')} resizeMode={'contain'} style={styles.tipicon} />
<Text style={styles.tipDetailText}>实际价格以页面展示为准</Text>
</View>
</View>
<TouchableOpacity activeOpacity={1} style={styles.saveButton} onPress={() => {
this.saveImage();
}}>
<Text style={styles.saveButtonText}>保存图片分享到朋友圈</Text>
</TouchableOpacity>
</View>
</Modal>
);
}
};
let {width, height} = Dimensions.get('window');
const DEVICE_WIDTH_RATIO = width / 375;
const sc = 0.8;
let styles = StyleSheet.create({
modalContainer: {
flex: 1,
width: width,
height: height,
alignItems: 'center',
backgroundColor: 'rgba(0, 0, 0, 0.6)',
},
saveButton: {
width: 300*DEVICE_WIDTH_RATIO,
height: 44*DEVICE_WIDTH_RATIO,
backgroundColor: 'white',
alignItems: 'center',
marginTop: 10*DEVICE_WIDTH_RATIO,
borderRadius: 4,
justifyContent: 'center',
},
saveButtonText: {
fontSize: 16*DEVICE_WIDTH_RATIO,
color: '#444444',
},
container: {
width: 300*DEVICE_WIDTH_RATIO,
height: 482*DEVICE_WIDTH_RATIO,
backgroundColor: 'white',
alignItems: 'center',
marginTop: 60*DEVICE_WIDTH_RATIO,
},
titleV: {
width: 300*DEVICE_WIDTH_RATIO,
height: 22*DEVICE_WIDTH_RATIO*sc,
flexDirection: 'row',
alignItems: 'center',
justifyContent: 'center',
marginTop: 34*DEVICE_WIDTH_RATIO*sc,
},
name: {
fontSize: 16*sc,
color: '#D0021B',
},
commonText: {
fontSize: 16*sc,
color: '#000000',
},
product: {
width: 300*DEVICE_WIDTH_RATIO*sc,
height: 141*DEVICE_WIDTH_RATIO*sc,
shadowColor: 'rgba(0,0,0,0.4)',
shadowOffset: {width: 0, height: 5},
shadowOpacity: 0.5,
shadowRadius: 5,
elevation: 4,
flexDirection: 'row',
backgroundColor: 'white',
marginTop: 34*DEVICE_WIDTH_RATIO*sc,
},
image: {
width: 109*DEVICE_WIDTH_RATIO*sc,
height: 141*DEVICE_WIDTH_RATIO*sc,
},
right: {
width: 191*DEVICE_WIDTH_RATIO*sc,
height: 141*DEVICE_WIDTH_RATIO*sc,
flexDirection: 'column',
},
titleView: {
width: 174*DEVICE_WIDTH_RATIO*sc,
height: 32*DEVICE_WIDTH_RATIO*sc,
marginTop: 17*DEVICE_WIDTH_RATIO*sc,
marginLeft: 10*DEVICE_WIDTH_RATIO*sc,
},
title: {
fontSize: 12*sc,
color: '#444444',
lineHeight: 19*sc,
},
subPriceView: {
width: 174*DEVICE_WIDTH_RATIO*sc,
height: 14*DEVICE_WIDTH_RATIO*sc,
marginLeft: 10*DEVICE_WIDTH_RATIO*sc,
marginTop: 5*DEVICE_WIDTH_RATIO*sc,
flexDirection: 'row',
alignItems: 'center',
},
subPrice1: {
fontSize: 10*sc,
color: '#B0B0B0',
lineHeight: 10*DEVICE_WIDTH_RATIO*sc,
},
priceView: {
width: 174*DEVICE_WIDTH_RATIO*sc,
height: 21*DEVICE_WIDTH_RATIO*sc,
marginLeft: 10*DEVICE_WIDTH_RATIO*sc,
marginTop: 33*DEVICE_WIDTH_RATIO*sc,
flexDirection: 'row',
alignItems: 'center',
},
iconText: {
width: 40*DEVICE_WIDTH_RATIO*sc,
height: 14*DEVICE_WIDTH_RATIO*sc,
backgroundColor: '#D0021B',
color: 'white',
fontSize: 9*sc,
textAlign: 'center',
lineHeight: 14*DEVICE_WIDTH_RATIO*sc,
},
price1: {
fontSize: 18*sc,
marginLeft: 10*DEVICE_WIDTH_RATIO*sc,
color: '#444444',
lineHeight: 18*DEVICE_WIDTH_RATIO*sc,
fontWeight: 'bold',
},
oldPriceContainer: {
flexDirection: 'row',
height: 12*sc,
marginTop: 2*sc,
},
price2: {
fontSize: 12*sc,
lineHeight: 12*sc,
color: '#B0B0B0',
alignItems: 'center',
},
deleteLine: {
position: 'absolute',
top: (16 / 2) - 4,
left: 0,
right: 0,
height: 1,
backgroundColor: '#b0b0b0',
},
logo: {
height: 19*DEVICE_WIDTH_RATIO*sc,
width: 300*DEVICE_WIDTH_RATIO,
marginTop: 80*DEVICE_WIDTH_RATIO*sc,
},
qr: {
height: 120*DEVICE_WIDTH_RATIO*sc,
width: 120*DEVICE_WIDTH_RATIO*sc,
marginTop: 25*DEVICE_WIDTH_RATIO*sc,
},
tip: {
fontSize: 14*sc,
color:'#444444',
marginTop: 16*DEVICE_WIDTH_RATIO*sc,
},
tipDetailView: {
flexDirection: 'row',
},
tipicon: {
marginTop: 5*DEVICE_WIDTH_RATIO*sc,
height: 15*DEVICE_WIDTH_RATIO*sc,
width: 15*DEVICE_WIDTH_RATIO*sc,
},
tipDetailText: {
fontSize: 12,
color: '#B0B0B0',
marginTop: 5*DEVICE_WIDTH_RATIO*sc,
marginLeft: 5*DEVICE_WIDTH_RATIO*sc,
},
});
... ...
... ... @@ -8,6 +8,8 @@ import {connect} from 'react-redux';
import {Map} from 'immutable';
import * as groupPurchaseDetailActions from '../reducers/groupPurchaseDetail/groupPurchaseDetailActions';
import GroupPurchaseDetail from '../components/GroupPurchaseDetail'
import ShareViewModal from '../components/ShareViewModal'
import SnapshootShare from '../components/SnapshootShare'
const actions = [
groupPurchaseDetailActions,
... ... @@ -39,6 +41,7 @@ class GroupPurchaseDetailContainer extends Component {
this._onEndReached = this._onEndReached.bind(this);
this.updateTime = this.updateTime.bind(this);
this.didTouchButton = this.didTouchButton.bind(this);
this.showShareView = this.showShareView.bind(this);
this.showSnapshootShare = this.showSnapshootShare.bind(this);
}
... ... @@ -60,6 +63,7 @@ class GroupPurchaseDetailContainer extends Component {
}
didTouchButton(resource){
let pageGo = resource.pageGo ? resource.pageGo : 0;
if(pageGo == 1) {
this.props.actions.showShareView(true);
}else if (pageGo == 2) {
... ... @@ -72,8 +76,17 @@ class GroupPurchaseDetailContainer extends Component {
}
}
showSnapshootShare(show){
this.props.actions.showSnapshootShare(show);
showShareView(show){
this.props.actions.showShareView(show);
}
showSnapshootShare(index,show){
this.props.actions.showShareView(false);
if(index == 1){
}else if (index == 2) {
this.props.actions.showSnapshootShare(show);
}
}
_onEndReached() {
... ... @@ -87,14 +100,21 @@ class GroupPurchaseDetailContainer extends Component {
groupDetail,
productList,
} = this.props.groupPurchaseDetail;
return (
<View style={styles.container}>
<ShareViewModal show={showShareView} showShareView={this.showShareView} showSnapshootShare={this.showSnapshootShare}/>
<SnapshootShare
show={showSnapshootShare}
groupDetail={groupDetail}
showSnapshootShare={this.showSnapshootShare}
/>
<GroupPurchaseDetail
productList={productList}
groupDetail={groupDetail}
onEndReached={this._onEndReached}
updateTime={this.updateTime}
showShareView={this.showShareView}
didTouchButton={this.didTouchButton}
/>
</View>
);
... ...
... ... @@ -5,6 +5,8 @@ import {List, Map, Record} from 'immutable';
let InitialState = Record({
activityId: 0,
groupNo: 0,
showShareView: false,
showSnapshootShare: false,
productList: new (Record({
isFetching: false,
error: null,
... ...