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({ @@ -147,4 +147,12 @@ let styles = StyleSheet.create({
147 color: '#B0B0B0', 147 color: '#B0B0B0',
148 alignItems: 'center', 148 alignItems: 'center',
149 }, 149 },
  150 + deleteLine: {
  151 + position: 'absolute',
  152 + top: (16 / 2) - 3,
  153 + left: 0,
  154 + right: 0,
  155 + height: 1,
  156 + backgroundColor: '#b0b0b0',
  157 + },
150 }); 158 });
  1 +'use strict';
  2 +
  3 +import React from 'react';
  4 +import ReactNative from 'react-native';
  5 +
  6 +const {
  7 + AppRegistry,
  8 + StyleSheet,
  9 + Image,
  10 + View,
  11 + Dimensions,
  12 + TouchableOpacity,
  13 + Modal,
  14 + Text,
  15 +} = ReactNative;
  16 +
  17 +
  18 +export default class ShareViewModal extends React.Component {
  19 + constructor(props) {
  20 + super(props);
  21 + }
  22 +
  23 + render() {
  24 + return (
  25 + <Modal
  26 + visible={this.props.show}
  27 + animationType={'none'}
  28 + transparent={true}
  29 + onRequestClose={() => {
  30 + }}>
  31 + <View style={styles.modalContainer}>
  32 + <View style={styles.shareView}>
  33 + <View style={styles.image}>
  34 + </View>
  35 + <View style={styles.buttons}>
  36 + <TouchableOpacity activeOpacity={0.5} style={styles.button1} onPress={() => {
  37 + this.props.showSnapshootShare && this.props.showSnapshootShare(1,false);
  38 + }}>
  39 + <Image source={require('../images/weixin.png')} style={styles.icon} />
  40 + <Text style={styles.text}>分享给好友</Text>
  41 + </TouchableOpacity>
  42 + <TouchableOpacity activeOpacity={0.5} style={styles.button2} onPress={() => {
  43 + this.props.showSnapshootShare && this.props.showSnapshootShare(2,true);
  44 + }}>
  45 + <Image source={require('../images/pengyou.png')} style={styles.icon} />
  46 + <Text style={styles.text}>微信快照</Text>
  47 + </TouchableOpacity>
  48 + </View>
  49 + <View style={styles.line}/>
  50 + <TouchableOpacity activeOpacity={0.5} style={styles.cancel} onPress={() => {
  51 + this.props.showShareView && this.props.showShareView(false);
  52 + }}>
  53 + <Text style={styles.canceltext}>取消</Text>
  54 + </TouchableOpacity>
  55 + </View>
  56 + </View>
  57 +
  58 + </Modal>
  59 + );
  60 + }
  61 +};
  62 +
  63 +let {width, height} = Dimensions.get('window');
  64 +const DEVICE_WIDTH_RATIO = width / 375;
  65 +
  66 +let styles = StyleSheet.create({
  67 + modalContainer: {
  68 + flex: 1,
  69 + width: width,
  70 + height: height,
  71 + justifyContent: 'flex-end',
  72 + backgroundColor: 'rgba(0, 0, 0, 0.6)',
  73 + },
  74 + shareView: {
  75 + width,
  76 + height: 284*DEVICE_WIDTH_RATIO,
  77 + backgroundColor: 'white',
  78 + alignItems: 'center',
  79 + },
  80 + image :{
  81 + width: 305*DEVICE_WIDTH_RATIO,
  82 + height: 88*DEVICE_WIDTH_RATIO,
  83 + marginTop: 25*DEVICE_WIDTH_RATIO,
  84 + backgroundColor: 'red',
  85 + },
  86 + buttons: {
  87 + width,
  88 + height: 115*DEVICE_WIDTH_RATIO,
  89 + alignItems: 'center',
  90 + flexDirection: 'row',
  91 + },
  92 + button1: {
  93 + marginLeft: 90*DEVICE_WIDTH_RATIO,
  94 + alignItems: 'center',
  95 + },
  96 +
  97 + button2: {
  98 + marginLeft: 105*DEVICE_WIDTH_RATIO,
  99 + alignItems: 'center',
  100 + },
  101 + icon: {
  102 + width: 45*DEVICE_WIDTH_RATIO,
  103 + height: 45*DEVICE_WIDTH_RATIO,
  104 + },
  105 + text: {
  106 + marginTop: 8*DEVICE_WIDTH_RATIO,
  107 + fontSize: 12,
  108 + color: '#444444',
  109 + },
  110 + line: {
  111 + width: width - 52,
  112 + height: 1,
  113 + backgroundColor: '#CCCCCC',
  114 + },
  115 + cancel: {
  116 + width,
  117 + height: 54*DEVICE_WIDTH_RATIO,
  118 + justifyContent: 'center',
  119 + alignItems: 'center',
  120 + },
  121 + canceltext: {
  122 + fontSize: 17,
  123 + color: '#444444',
  124 + },
  125 +});
  1 +'use strict';
  2 +
  3 +import React from 'react';
  4 +import ReactNative from 'react-native';
  5 +import YH_Image from '../../common/components/YH_Image';
  6 +import {getSlicedUrl} from '../../classify/utils/Utils';
  7 +import DeleteLineText from '../../common/components/DeleteLineText';
  8 +
  9 +const {
  10 + AppRegistry,
  11 + StyleSheet,
  12 + Image,
  13 + View,
  14 + Dimensions,
  15 + TouchableOpacity,
  16 + Modal,
  17 + Text,
  18 +} = ReactNative;
  19 +
  20 +
  21 +export default class SnapshootShare extends React.Component {
  22 + constructor(props) {
  23 + super(props);
  24 + this.saveImage = this.saveImage.bind(this);
  25 + }
  26 +
  27 + saveImage(){
  28 + this.props.showSnapshootShare && this.props.showSnapshootShare(2,false);
  29 + }
  30 +
  31 + render() {
  32 + let { groupDetail } = this.props;
  33 + let productDetail = groupDetail ? groupDetail.toJS():null;
  34 + if(!productDetail){
  35 + return null;
  36 + }
  37 + let lackNum = productDetail.lackNum;
  38 + let membershipItems = productDetail.membershipItems;
  39 + let resource = membershipItems ? membershipItems[0]: null;
  40 +
  41 + if (!resource) {
  42 + return null;
  43 + }
  44 + let productIcon = resource.productIcon ? getSlicedUrl(resource.productIcon,109*DEVICE_WIDTH_RATIO, 141*DEVICE_WIDTH_RATIO, 2) : '';
  45 + let productGroupPrice = resource.productGroupPrice;
  46 + let productName = resource.productName;
  47 + let productSalePrice = resource.productSalePrice;
  48 + let productSkn = resource.productSkn;
  49 + let perpleNum = membershipItems.length + lackNum;
  50 +
  51 + return (
  52 + <Modal
  53 + visible={this.props.show}
  54 + animationType={'none'}
  55 + transparent={true}
  56 + onRequestClose={() => {
  57 + }}>
  58 + <View style={styles.modalContainer}>
  59 + <View style={styles.container}>
  60 + <View style={styles.titleV}>
  61 + <Text style={styles.name}>54666</Text>
  62 + <Text style={styles.commonText}>邀请你参团</Text>
  63 + </View>
  64 + <View style={styles.product}>
  65 + <YH_Image style={styles.image} url={productIcon}></YH_Image>
  66 + <View style={styles.right}>
  67 + <View style={styles.titleView}>
  68 + <Text style={styles.title} numberOfLines={2}>{productName}</Text>
  69 + </View>
  70 + <View style={styles.priceView}>
  71 + <Text style={styles.iconText}>{perpleNum}人团</Text>
  72 + <Text style={styles.price1}>{productGroupPrice}</Text>
  73 + </View>
  74 + <View style={styles.subPriceView}>
  75 + <Text style={styles.subPrice1}>单人购买：</Text>
  76 + <DeleteLineText
  77 + style={styles.oldPriceContainer}
  78 + textStyle={styles.price2}
  79 + lineStyle={styles.deleteLine}
  80 + text={productSalePrice}
  81 + />
  82 + </View>
  83 + </View>
  84 + </View>
  85 + <Image source={require('../images/share-logo.png')} resizeMode={'contain'} style={styles.logo} />
  86 + <Image source={require('../images/pengyou.png')} resizeMode={'contain'} style={styles.qr} />
  87 + <Text style={styles.tip}>长按扫码立即参团</Text>
  88 + <View style={styles.tipDetailView}>
  89 + <Image source={require('../images/PT_tip_ic.png')} resizeMode={'contain'} style={styles.tipicon} />
  90 + <Text style={styles.tipDetailText}>实际价格以页面展示为准</Text>
  91 + </View>
  92 + </View>
  93 + <TouchableOpacity activeOpacity={1} style={styles.saveButton} onPress={() => {
  94 + this.saveImage();
  95 + }}>
  96 + <Text style={styles.saveButtonText}>保存图片分享到朋友圈</Text>
  97 + </TouchableOpacity>
  98 +
  99 + </View>
  100 + </Modal>
  101 + );
  102 + }
  103 +};
  104 +
  105 +let {width, height} = Dimensions.get('window');
  106 +const DEVICE_WIDTH_RATIO = width / 375;
  107 +const sc = 0.8;
  108 +
  109 +let styles = StyleSheet.create({
  110 + modalContainer: {
  111 + flex: 1,
  112 + width: width,
  113 + height: height,
  114 + alignItems: 'center',
  115 + backgroundColor: 'rgba(0, 0, 0, 0.6)',
  116 + },
  117 +
  118 + saveButton: {
  119 + width: 300*DEVICE_WIDTH_RATIO,
  120 + height: 44*DEVICE_WIDTH_RATIO,
  121 + backgroundColor: 'white',
  122 + alignItems: 'center',
  123 + marginTop: 10*DEVICE_WIDTH_RATIO,
  124 + borderRadius: 4,
  125 + justifyContent: 'center',
  126 + },
  127 + saveButtonText: {
  128 + fontSize: 16*DEVICE_WIDTH_RATIO,
  129 + color: '#444444',
  130 + },
  131 + container: {
  132 + width: 300*DEVICE_WIDTH_RATIO,
  133 + height: 482*DEVICE_WIDTH_RATIO,
  134 + backgroundColor: 'white',
  135 + alignItems: 'center',
  136 + marginTop: 60*DEVICE_WIDTH_RATIO,
  137 + },
  138 + titleV: {
  139 + width: 300*DEVICE_WIDTH_RATIO,
  140 + height: 22*DEVICE_WIDTH_RATIO*sc,
  141 + flexDirection: 'row',
  142 + alignItems: 'center',
  143 + justifyContent: 'center',
  144 + marginTop: 34*DEVICE_WIDTH_RATIO*sc,
  145 + },
  146 + name: {
  147 + fontSize: 16*sc,
  148 + color: '#D0021B',
  149 + },
  150 + commonText: {
  151 + fontSize: 16*sc,
  152 + color: '#000000',
  153 + },
  154 + product: {
  155 + width: 300*DEVICE_WIDTH_RATIO*sc,
  156 + height: 141*DEVICE_WIDTH_RATIO*sc,
  157 + shadowColor: 'rgba(0,0,0,0.4)',
  158 + shadowOffset: {width: 0, height: 5},
  159 + shadowOpacity: 0.5,
  160 + shadowRadius: 5,
  161 + elevation: 4,
  162 + flexDirection: 'row',
  163 + backgroundColor: 'white',
  164 + marginTop: 34*DEVICE_WIDTH_RATIO*sc,
  165 + },
  166 + image: {
  167 + width: 109*DEVICE_WIDTH_RATIO*sc,
  168 + height: 141*DEVICE_WIDTH_RATIO*sc,
  169 + },
  170 + right: {
  171 + width: 191*DEVICE_WIDTH_RATIO*sc,
  172 + height: 141*DEVICE_WIDTH_RATIO*sc,
  173 + flexDirection: 'column',
  174 + },
  175 + titleView: {
  176 + width: 174*DEVICE_WIDTH_RATIO*sc,
  177 + height: 32*DEVICE_WIDTH_RATIO*sc,
  178 + marginTop: 17*DEVICE_WIDTH_RATIO*sc,
  179 + marginLeft: 10*DEVICE_WIDTH_RATIO*sc,
  180 + },
  181 +
  182 + title: {
  183 + fontSize: 12*sc,
  184 + color: '#444444',
  185 + lineHeight: 19*sc,
  186 + },
  187 + subPriceView: {
  188 + width: 174*DEVICE_WIDTH_RATIO*sc,
  189 + height: 14*DEVICE_WIDTH_RATIO*sc,
  190 + marginLeft: 10*DEVICE_WIDTH_RATIO*sc,
  191 + marginTop: 5*DEVICE_WIDTH_RATIO*sc,
  192 + flexDirection: 'row',
  193 + alignItems: 'center',
  194 + },
  195 + subPrice1: {
  196 + fontSize: 10*sc,
  197 + color: '#B0B0B0',
  198 + lineHeight: 10*DEVICE_WIDTH_RATIO*sc,
  199 + },
  200 + priceView: {
  201 + width: 174*DEVICE_WIDTH_RATIO*sc,
  202 + height: 21*DEVICE_WIDTH_RATIO*sc,
  203 + marginLeft: 10*DEVICE_WIDTH_RATIO*sc,
  204 + marginTop: 33*DEVICE_WIDTH_RATIO*sc,
  205 + flexDirection: 'row',
  206 + alignItems: 'center',
  207 + },
  208 +
  209 + iconText: {
  210 + width: 40*DEVICE_WIDTH_RATIO*sc,
  211 + height: 14*DEVICE_WIDTH_RATIO*sc,
  212 + backgroundColor: '#D0021B',
  213 + color: 'white',
  214 + fontSize: 9*sc,
  215 + textAlign: 'center',
  216 + lineHeight: 14*DEVICE_WIDTH_RATIO*sc,
  217 + },
  218 +
  219 + price1: {
  220 + fontSize: 18*sc,
  221 + marginLeft: 10*DEVICE_WIDTH_RATIO*sc,
  222 + color: '#444444',
  223 + lineHeight: 18*DEVICE_WIDTH_RATIO*sc,
  224 + fontWeight: 'bold',
  225 + },
  226 +
  227 + oldPriceContainer: {
  228 + flexDirection: 'row',
  229 + height: 12*sc,
  230 + marginTop: 2*sc,
  231 + },
  232 +
  233 + price2: {
  234 + fontSize: 12*sc,
  235 + lineHeight: 12*sc,
  236 + color: '#B0B0B0',
  237 + alignItems: 'center',
  238 + },
  239 + deleteLine: {
  240 + position: 'absolute',
  241 + top: (16 / 2) - 4,
  242 + left: 0,
  243 + right: 0,
  244 + height: 1,
  245 + backgroundColor: '#b0b0b0',
  246 + },
  247 + logo: {
  248 + height: 19*DEVICE_WIDTH_RATIO*sc,
  249 + width: 300*DEVICE_WIDTH_RATIO,
  250 + marginTop: 80*DEVICE_WIDTH_RATIO*sc,
  251 + },
  252 + qr: {
  253 + height: 120*DEVICE_WIDTH_RATIO*sc,
  254 + width: 120*DEVICE_WIDTH_RATIO*sc,
  255 + marginTop: 25*DEVICE_WIDTH_RATIO*sc,
  256 + },
  257 + tip: {
  258 + fontSize: 14*sc,
  259 + color:'#444444',
  260 + marginTop: 16*DEVICE_WIDTH_RATIO*sc,
  261 + },
  262 + tipDetailView: {
  263 + flexDirection: 'row',
  264 + },
  265 + tipicon: {
  266 + marginTop: 5*DEVICE_WIDTH_RATIO*sc,
  267 + height: 15*DEVICE_WIDTH_RATIO*sc,
  268 + width: 15*DEVICE_WIDTH_RATIO*sc,
  269 + },
  270 + tipDetailText: {
  271 + fontSize: 12,
  272 + color: '#B0B0B0',
  273 + marginTop: 5*DEVICE_WIDTH_RATIO*sc,
  274 + marginLeft: 5*DEVICE_WIDTH_RATIO*sc,
  275 + },
  276 +});
@@ -8,6 +8,8 @@ import {connect} from 'react-redux'; @@ -8,6 +8,8 @@ import {connect} from 'react-redux';
8 import {Map} from 'immutable'; 8 import {Map} from 'immutable';
9 import * as groupPurchaseDetailActions from '../reducers/groupPurchaseDetail/groupPurchaseDetailActions'; 9 import * as groupPurchaseDetailActions from '../reducers/groupPurchaseDetail/groupPurchaseDetailActions';
10 import GroupPurchaseDetail from '../components/GroupPurchaseDetail' 10 import GroupPurchaseDetail from '../components/GroupPurchaseDetail'
  11 +import ShareViewModal from '../components/ShareViewModal'
  12 +import SnapshootShare from '../components/SnapshootShare'
11 13
12 const actions = [ 14 const actions = [
13 groupPurchaseDetailActions, 15 groupPurchaseDetailActions,
@@ -39,6 +41,7 @@ class GroupPurchaseDetailContainer extends Component { @@ -39,6 +41,7 @@ class GroupPurchaseDetailContainer extends Component {
39 this._onEndReached = this._onEndReached.bind(this); 41 this._onEndReached = this._onEndReached.bind(this);
40 this.updateTime = this.updateTime.bind(this); 42 this.updateTime = this.updateTime.bind(this);
41 this.didTouchButton = this.didTouchButton.bind(this); 43 this.didTouchButton = this.didTouchButton.bind(this);
  44 + this.showShareView = this.showShareView.bind(this);
42 this.showSnapshootShare = this.showSnapshootShare.bind(this); 45 this.showSnapshootShare = this.showSnapshootShare.bind(this);
43 } 46 }
44 47
@@ -60,6 +63,7 @@ class GroupPurchaseDetailContainer extends Component { @@ -60,6 +63,7 @@ class GroupPurchaseDetailContainer extends Component {
60 } 63 }
61 64
62 didTouchButton(resource){ 65 didTouchButton(resource){
  66 + let pageGo = resource.pageGo ? resource.pageGo : 0;
63 if(pageGo == 1) { 67 if(pageGo == 1) {
64 this.props.actions.showShareView(true); 68 this.props.actions.showShareView(true);
65 }else if (pageGo == 2) { 69 }else if (pageGo == 2) {
@@ -72,8 +76,17 @@ class GroupPurchaseDetailContainer extends Component { @@ -72,8 +76,17 @@ class GroupPurchaseDetailContainer extends Component {
72 } 76 }
73 } 77 }
74 78
75 - showSnapshootShare(show){  
76 - this.props.actions.showSnapshootShare(show); 79 + showShareView(show){
  80 + this.props.actions.showShareView(show);
  81 + }
  82 +
  83 + showSnapshootShare(index,show){
  84 + this.props.actions.showShareView(false);
  85 + if(index == 1){
  86 +
  87 + }else if (index == 2) {
  88 + this.props.actions.showSnapshootShare(show);
  89 + }
77 } 90 }
78 91
79 _onEndReached() { 92 _onEndReached() {
@@ -87,14 +100,21 @@ class GroupPurchaseDetailContainer extends Component { @@ -87,14 +100,21 @@ class GroupPurchaseDetailContainer extends Component {
87 groupDetail, 100 groupDetail,
88 productList, 101 productList,
89 } = this.props.groupPurchaseDetail; 102 } = this.props.groupPurchaseDetail;
  103 +
90 return ( 104 return (
91 <View style={styles.container}> 105 <View style={styles.container}>
  106 + <ShareViewModal show={showShareView} showShareView={this.showShareView} showSnapshootShare={this.showSnapshootShare}/>
  107 + <SnapshootShare
  108 + show={showSnapshootShare}
  109 + groupDetail={groupDetail}
  110 + showSnapshootShare={this.showSnapshootShare}
  111 + />
92 <GroupPurchaseDetail 112 <GroupPurchaseDetail
93 productList={productList} 113 productList={productList}
94 groupDetail={groupDetail} 114 groupDetail={groupDetail}
95 onEndReached={this._onEndReached} 115 onEndReached={this._onEndReached}
96 updateTime={this.updateTime} 116 updateTime={this.updateTime}
97 - showShareView={this.showShareView} 117 + didTouchButton={this.didTouchButton}
98 /> 118 />
99 </View> 119 </View>
100 ); 120 );
@@ -5,6 +5,8 @@ import {List, Map, Record} from 'immutable'; @@ -5,6 +5,8 @@ import {List, Map, Record} from 'immutable';
5 let InitialState = Record({ 5 let InitialState = Record({
6 activityId: 0, 6 activityId: 0,
7 groupNo: 0, 7 groupNo: 0,
  8 + showShareView: false,
  9 + showSnapshootShare: false,
8 productList: new (Record({ 10 productList: new (Record({
9 isFetching: false, 11 isFetching: false,
10 error: null, 12 error: null,