|
|
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
|
+
|
|
|
8
|
+const {
|
|
|
9
|
+ AppRegistry,
|
|
|
10
|
+ StyleSheet,
|
|
|
11
|
+ Image,
|
|
|
12
|
+ View,
|
|
|
13
|
+ Dimensions,
|
|
|
14
|
+ TouchableOpacity,
|
|
|
15
|
+ Modal,
|
|
|
16
|
+ Text,
|
|
|
17
|
+ CameraRoll,
|
|
|
18
|
+ Alert,
|
|
|
19
|
+ ScrollView,
|
|
|
20
|
+} = ReactNative;
|
|
|
21
|
+
|
|
|
22
|
+
|
|
|
23
|
+export default class SnapshootShare extends React.Component {
|
|
|
24
|
+ constructor(props) {
|
|
|
25
|
+ super(props);
|
|
|
26
|
+ this.saveImage = this.saveImage.bind(this);
|
|
|
27
|
+ this.shareImage = this.shareImage.bind(this);
|
|
|
28
|
+ }
|
|
|
29
|
+
|
|
|
30
|
+ shareImage(shareType){
|
|
|
31
|
+ ReactNative.takeSnapshot(this.refs.container, {format: 'png', quality: 10}).then(
|
|
|
32
|
+ (uri) => {
|
|
|
33
|
+ this.props.shareSnapshootAction && this.props.shareSnapshootAction(shareType,uri);
|
|
|
34
|
+ }).catch(
|
|
|
35
|
+ (error) => {
|
|
|
36
|
+ Alert.alert('图片生成失败!')
|
|
|
37
|
+ });
|
|
|
38
|
+ }
|
|
|
39
|
+
|
|
|
40
|
+ saveImage(){
|
|
|
41
|
+ ReactNative.takeSnapshot(this.refs.container, {format: 'png', quality: 10}).then(
|
|
|
42
|
+ (uri) => {
|
|
|
43
|
+ var promise = CameraRoll.saveToCameraRoll(uri);
|
|
|
44
|
+ promise.then(function(result) {
|
|
|
45
|
+ Alert.alert('保存成功!')
|
|
|
46
|
+ }).catch(function(error) {
|
|
|
47
|
+ Alert.alert('保存失败!')
|
|
|
48
|
+ });
|
|
|
49
|
+ }).catch(
|
|
|
50
|
+ (error) => {
|
|
|
51
|
+ Alert.alert('保存失败!')
|
|
|
52
|
+ });
|
|
|
53
|
+ }
|
|
|
54
|
+
|
|
|
55
|
+ render() {
|
|
|
56
|
+ let { groupDetail ,qrCode, unionType} = this.props;
|
|
|
57
|
+ let productDetail = groupDetail ? groupDetail.toJS():null;
|
|
|
58
|
+ if(!productDetail){
|
|
|
59
|
+ return null;
|
|
|
60
|
+ }
|
|
|
61
|
+ let lackNum = productDetail.lackNum;
|
|
|
62
|
+ let membershipItems = productDetail.membershipItems;
|
|
|
63
|
+ let resource = membershipItems ? membershipItems[0]: null;
|
|
|
64
|
+
|
|
|
65
|
+ if (!resource) {
|
|
|
66
|
+ return null;
|
|
|
67
|
+ }
|
|
|
68
|
+ let productIcon = resource.productIcon ? getSlicedUrl(resource.productIcon,218*DEVICE_WIDTH_RATIO, 282*DEVICE_WIDTH_RATIO, 2) : '';
|
|
|
69
|
+ let productGroupPrice = resource.productGroupPrice;
|
|
|
70
|
+ let productName = resource.productName;
|
|
|
71
|
+ let productSalePrice = resource.productSalePrice;
|
|
|
72
|
+ let productSkn = resource.productSkn;
|
|
|
73
|
+ let perpleNum = membershipItems.length + lackNum;
|
|
|
74
|
+ let nickName = resource.nickName;
|
|
|
75
|
+
|
|
|
76
|
+
|
|
|
77
|
+ return (
|
|
|
78
|
+ <Modal
|
|
|
79
|
+ visible={this.props.show}
|
|
|
80
|
+ animationType={'none'}
|
|
|
81
|
+ transparent={true}
|
|
|
82
|
+ onRequestClose={() => {
|
|
|
83
|
+ }}>
|
|
|
84
|
+ <View style={styles.modalContainer}>
|
|
|
85
|
+ <ScrollView
|
|
|
86
|
+ style={styles.scrollView}
|
|
|
87
|
+ vertical={true}
|
|
|
88
|
+ showsVerticalScrollIndicator={false}
|
|
|
89
|
+ >
|
|
|
90
|
+ <View style={styles.container} ref='container'>
|
|
|
91
|
+
|
|
|
92
|
+ <Image source={require('../images/share-logo.png')} resizeMode={'contain'} style={styles.logo} />
|
|
|
93
|
+ <View style={styles.product}>
|
|
|
94
|
+ <YH_Image style={styles.productimage} url={productIcon}></YH_Image>
|
|
|
95
|
+ <View style={styles.productDetail}>
|
|
|
96
|
+ <View style={styles.productDetailTop}>
|
|
|
97
|
+ <Text style={styles.productDetailTopText}>{productName}</Text>
|
|
|
98
|
+ </View>
|
|
|
99
|
+ <View style={styles.productDetailBottom}>
|
|
|
100
|
+ <Image source={require('../images/Group5.png')} style={styles.priceIcon} />
|
|
|
101
|
+ <Text style={styles.price}>{productGroupPrice}</Text>
|
|
|
102
|
+ <Text style={[styles.price2, {textDecorationLine: 'line-through'}]}>{productSalePrice}</Text>
|
|
|
103
|
+ </View>
|
|
|
104
|
+ </View>
|
|
|
105
|
+ <Image source={require('../images/Page.png')} resizeMode={'contain'} style={styles.mianyouIcon} />
|
|
|
106
|
+ </View>
|
|
|
107
|
+ <View style={styles.bottom}>
|
|
|
108
|
+ <Image source={{uri: qrCode}} resizeMode={'contain'} style={styles.qr} />
|
|
|
109
|
+ <View style={styles.bottomDetail}>
|
|
|
110
|
+ <View style={styles.titleV}>
|
|
|
111
|
+ <Text style={[styles.titleText, styles.titleWidth]} numberOfLines={1}>{nickName}</Text>
|
|
|
112
|
+ <Text style={styles.titleText}>邀请你拼潮货</Text>
|
|
|
113
|
+ </View>
|
|
|
114
|
+ <Text style={styles.tipDetailText}>长按图片识别小程序参团</Text>
|
|
|
115
|
+ </View>
|
|
|
116
|
+ </View>
|
|
|
117
|
+ </View>
|
|
|
118
|
+ <View style={styles.spaceV}/>
|
|
|
119
|
+ </ScrollView>
|
|
|
120
|
+ <View style={styles.shareView}>
|
|
|
121
|
+ <View style={styles.buttons}>
|
|
|
122
|
+ <TouchableOpacity activeOpacity={0.5} style={styles.button1} onPress={() => {
|
|
|
123
|
+ this.shareImage && this.shareImage('WXSceneSession');
|
|
|
124
|
+ }}>
|
|
|
125
|
+ <Image source={unionType ? require('../images/unionShare_wx_icon.png') : require('../images/weixin.png')} style={styles.icon} />
|
|
|
126
|
+ <Text style={styles.text}>微信好友</Text>
|
|
|
127
|
+ </TouchableOpacity>
|
|
|
128
|
+ <TouchableOpacity activeOpacity={0.5} style={styles.button2} onPress={() => {
|
|
|
129
|
+ this.shareImage && this.shareImage('WXSceneTimeline');
|
|
|
130
|
+ }}>
|
|
|
131
|
+ <Image source={unionType ? require('../images/unionShare_timeline_icon.png') : require('../images/share_timeline_icon.png')} style={styles.icon} />
|
|
|
132
|
+ <Text style={styles.text}>微信朋友圈</Text>
|
|
|
133
|
+ </TouchableOpacity>
|
|
|
134
|
+ </View>
|
|
|
135
|
+ <View style={styles.line}/>
|
|
|
136
|
+ <TouchableOpacity activeOpacity={0.5} style={styles.save} onPress={() => {
|
|
|
137
|
+ this.saveImage && this.saveImage();
|
|
|
138
|
+ }}>
|
|
|
139
|
+ <Text style={styles.savetext}>保存图片</Text>
|
|
|
140
|
+ </TouchableOpacity>
|
|
|
141
|
+ </View>
|
|
|
142
|
+
|
|
|
143
|
+ <TouchableOpacity activeOpacity={0.5} style={styles.cancelBtn} onPress={() => {
|
|
|
144
|
+ this.props.showSnapshootShare && this.props.showSnapshootShare(false);
|
|
|
145
|
+ }}>
|
|
|
146
|
+ <Image source={require('../images/imageShareClose.png')} style={styles.cancelBtnicon} resizeMode={'contain'}/>
|
|
|
147
|
+ </TouchableOpacity>
|
|
|
148
|
+
|
|
|
149
|
+ </View>
|
|
|
150
|
+ </Modal>
|
|
|
151
|
+ );
|
|
|
152
|
+ }
|
|
|
153
|
+};
|
|
|
154
|
+
|
|
|
155
|
+let {width, height} = Dimensions.get('window');
|
|
|
156
|
+const DEVICE_WIDTH_RATIO = width / 375;
|
|
|
157
|
+
|
|
|
158
|
+let styles = StyleSheet.create({
|
|
|
159
|
+ modalContainer: {
|
|
|
160
|
+ flex: 1,
|
|
|
161
|
+ width: width,
|
|
|
162
|
+ height: height,
|
|
|
163
|
+ },
|
|
|
164
|
+ backContainer: {
|
|
|
165
|
+ flex: 1,
|
|
|
166
|
+ width: width,
|
|
|
167
|
+ height: height,
|
|
|
168
|
+ alignItems: 'center',
|
|
|
169
|
+ backgroundColor: 'white',
|
|
|
170
|
+ },
|
|
|
171
|
+
|
|
|
172
|
+ container: {
|
|
|
173
|
+ width,
|
|
|
174
|
+ height,
|
|
|
175
|
+ backgroundColor: 'white',
|
|
|
176
|
+ alignItems: 'center',
|
|
|
177
|
+ },
|
|
|
178
|
+
|
|
|
179
|
+ scrollView: {
|
|
|
180
|
+ backgroundColor: 'white',
|
|
|
181
|
+ },
|
|
|
182
|
+ spaceV: {
|
|
|
183
|
+ backgroundColor: 'white',
|
|
|
184
|
+ height: 150*DEVICE_WIDTH_RATIO,
|
|
|
185
|
+ width,
|
|
|
186
|
+ },
|
|
|
187
|
+
|
|
|
188
|
+ logo: {
|
|
|
189
|
+ height: 22*DEVICE_WIDTH_RATIO,
|
|
|
190
|
+ width: 112*DEVICE_WIDTH_RATIO,
|
|
|
191
|
+ marginTop: 37*DEVICE_WIDTH_RATIO,
|
|
|
192
|
+ },
|
|
|
193
|
+
|
|
|
194
|
+ productimage: {
|
|
|
195
|
+ height: 433*DEVICE_WIDTH_RATIO,
|
|
|
196
|
+ width: 325*DEVICE_WIDTH_RATIO,
|
|
|
197
|
+ },
|
|
|
198
|
+
|
|
|
199
|
+ product: {
|
|
|
200
|
+ height: 433*DEVICE_WIDTH_RATIO,
|
|
|
201
|
+ width: 325*DEVICE_WIDTH_RATIO,
|
|
|
202
|
+ marginTop: 24*DEVICE_WIDTH_RATIO,
|
|
|
203
|
+ },
|
|
|
204
|
+ productDetail: {
|
|
|
205
|
+ height: 80*DEVICE_WIDTH_RATIO,
|
|
|
206
|
+ width: 325*DEVICE_WIDTH_RATIO,
|
|
|
207
|
+ backgroundColor: 'rgba(0,0,0,0.4)',
|
|
|
208
|
+ position: 'absolute',
|
|
|
209
|
+ bottom: 0,
|
|
|
210
|
+ },
|
|
|
211
|
+ productDetailTop: {
|
|
|
212
|
+ height: 20*DEVICE_WIDTH_RATIO,
|
|
|
213
|
+ width: 325*DEVICE_WIDTH_RATIO,
|
|
|
214
|
+ marginTop: 14*DEVICE_WIDTH_RATIO,
|
|
|
215
|
+ justifyContent: 'center',
|
|
|
216
|
+ alignItems: 'center',
|
|
|
217
|
+ },
|
|
|
218
|
+ productDetailTopText: {
|
|
|
219
|
+ fontSize: 14,
|
|
|
220
|
+ color: '#FFFFFF',
|
|
|
221
|
+ },
|
|
|
222
|
+ productDetailBottom: {
|
|
|
223
|
+ height: 30*DEVICE_WIDTH_RATIO,
|
|
|
224
|
+ width: 325*DEVICE_WIDTH_RATIO,
|
|
|
225
|
+ marginTop: 7*DEVICE_WIDTH_RATIO,
|
|
|
226
|
+ flexDirection: 'row',
|
|
|
227
|
+ justifyContent: 'center',
|
|
|
228
|
+ alignItems: 'center',
|
|
|
229
|
+ },
|
|
|
230
|
+ priceIcon: {
|
|
|
231
|
+ height: 17,
|
|
|
232
|
+ width: 50,
|
|
|
233
|
+ },
|
|
|
234
|
+ price: {
|
|
|
235
|
+ fontSize: 24,
|
|
|
236
|
+ color: '#FFFFFF',
|
|
|
237
|
+ marginLeft: 15*DEVICE_WIDTH_RATIO,
|
|
|
238
|
+ fontWeight: 'bold',
|
|
|
239
|
+ },
|
|
|
240
|
+ price2: {
|
|
|
241
|
+ fontSize: 14,
|
|
|
242
|
+ lineHeight: 14,
|
|
|
243
|
+ color: '#B0B0B0',
|
|
|
244
|
+ alignItems: 'center',
|
|
|
245
|
+ marginLeft: 13*DEVICE_WIDTH_RATIO,
|
|
|
246
|
+ height: 14,
|
|
|
247
|
+ marginTop: 2,
|
|
|
248
|
+ },
|
|
|
249
|
+ mianyouIcon: {
|
|
|
250
|
+ position: 'absolute',
|
|
|
251
|
+ top: 262*DEVICE_WIDTH_RATIO,
|
|
|
252
|
+ right: 28*DEVICE_WIDTH_RATIO,
|
|
|
253
|
+ height: 63*DEVICE_WIDTH_RATIO,
|
|
|
254
|
+ width: 63*DEVICE_WIDTH_RATIO,
|
|
|
255
|
+ },
|
|
|
256
|
+
|
|
|
257
|
+ bottom: {
|
|
|
258
|
+ height: 141*DEVICE_WIDTH_RATIO,
|
|
|
259
|
+ width: 325*DEVICE_WIDTH_RATIO,
|
|
|
260
|
+ alignItems: 'center',
|
|
|
261
|
+ flexDirection: 'row',
|
|
|
262
|
+ },
|
|
|
263
|
+ qr: {
|
|
|
264
|
+ height: 80*DEVICE_WIDTH_RATIO,
|
|
|
265
|
+ width: 80*DEVICE_WIDTH_RATIO,
|
|
|
266
|
+ },
|
|
|
267
|
+
|
|
|
268
|
+ bottomDetail: {
|
|
|
269
|
+ height: 80*DEVICE_WIDTH_RATIO,
|
|
|
270
|
+ width: 245*DEVICE_WIDTH_RATIO,
|
|
|
271
|
+ },
|
|
|
272
|
+ titleV: {
|
|
|
273
|
+ width: 218*DEVICE_WIDTH_RATIO,
|
|
|
274
|
+ height: 20*DEVICE_WIDTH_RATIO,
|
|
|
275
|
+ flexDirection: 'row',
|
|
|
276
|
+ alignItems: 'center',
|
|
|
277
|
+ marginTop: 16*DEVICE_WIDTH_RATIO,
|
|
|
278
|
+ marginLeft: 27*DEVICE_WIDTH_RATIO,
|
|
|
279
|
+ },
|
|
|
280
|
+ titleText: {
|
|
|
281
|
+ fontSize: 16,
|
|
|
282
|
+ color: '#444444',
|
|
|
283
|
+ },
|
|
|
284
|
+ titleWidth: {
|
|
|
285
|
+ maxWidth: 80,
|
|
|
286
|
+ },
|
|
|
287
|
+ tipDetailText: {
|
|
|
288
|
+ fontSize: 12,
|
|
|
289
|
+ color: '#B0B0B0',
|
|
|
290
|
+ marginTop: 12*DEVICE_WIDTH_RATIO,
|
|
|
291
|
+ marginLeft: 27*DEVICE_WIDTH_RATIO,
|
|
|
292
|
+ },
|
|
|
293
|
+
|
|
|
294
|
+ shareView: {
|
|
|
295
|
+ position: 'absolute',
|
|
|
296
|
+ width,
|
|
|
297
|
+ height: 171*DEVICE_WIDTH_RATIO,
|
|
|
298
|
+ backgroundColor: 'rgb(241,241,241)',
|
|
|
299
|
+ alignItems: 'center',
|
|
|
300
|
+ bottom : 0,
|
|
|
301
|
+ },
|
|
|
302
|
+ image :{
|
|
|
303
|
+ width: 305*DEVICE_WIDTH_RATIO,
|
|
|
304
|
+ height: 88*DEVICE_WIDTH_RATIO,
|
|
|
305
|
+ marginTop: 25*DEVICE_WIDTH_RATIO,
|
|
|
306
|
+ backgroundColor: 'red',
|
|
|
307
|
+ },
|
|
|
308
|
+ buttons: {
|
|
|
309
|
+ width,
|
|
|
310
|
+ height: 115*DEVICE_WIDTH_RATIO,
|
|
|
311
|
+ alignItems: 'center',
|
|
|
312
|
+ flexDirection: 'row',
|
|
|
313
|
+ },
|
|
|
314
|
+ button1: {
|
|
|
315
|
+ alignItems: 'center',
|
|
|
316
|
+ marginLeft: (width - 180*DEVICE_WIDTH_RATIO)/3,
|
|
|
317
|
+ },
|
|
|
318
|
+
|
|
|
319
|
+ button2: {
|
|
|
320
|
+ marginLeft: (width - 180*DEVICE_WIDTH_RATIO)/3,
|
|
|
321
|
+ alignItems: 'center',
|
|
|
322
|
+ },
|
|
|
323
|
+ icon: {
|
|
|
324
|
+ width: 45*DEVICE_WIDTH_RATIO,
|
|
|
325
|
+ height: 45*DEVICE_WIDTH_RATIO,
|
|
|
326
|
+ },
|
|
|
327
|
+ text: {
|
|
|
328
|
+ marginTop: 8*DEVICE_WIDTH_RATIO,
|
|
|
329
|
+ fontSize: 12,
|
|
|
330
|
+ width: 90*DEVICE_WIDTH_RATIO,
|
|
|
331
|
+ textAlign: 'center',
|
|
|
332
|
+ color: '#444444',
|
|
|
333
|
+ },
|
|
|
334
|
+ line: {
|
|
|
335
|
+ width: width - 52,
|
|
|
336
|
+ height: 1,
|
|
|
337
|
+ backgroundColor: '#CCCCCC',
|
|
|
338
|
+ },
|
|
|
339
|
+ save: {
|
|
|
340
|
+ width,
|
|
|
341
|
+ height: 54*DEVICE_WIDTH_RATIO,
|
|
|
342
|
+ justifyContent: 'center',
|
|
|
343
|
+ alignItems: 'center',
|
|
|
344
|
+ },
|
|
|
345
|
+ savetext: {
|
|
|
346
|
+ fontSize: 17,
|
|
|
347
|
+ color: '#444444',
|
|
|
348
|
+ },
|
|
|
349
|
+
|
|
|
350
|
+ cancelBtn: {
|
|
|
351
|
+ position: 'absolute',
|
|
|
352
|
+ width: 54*DEVICE_WIDTH_RATIO,
|
|
|
353
|
+ height: 54*DEVICE_WIDTH_RATIO,
|
|
|
354
|
+ top: 44,
|
|
|
355
|
+ right: 34,
|
|
|
356
|
+ alignItems: 'flex-end',
|
|
|
357
|
+ },
|
|
|
358
|
+ cancelBtnicon: {
|
|
|
359
|
+ width: 30*DEVICE_WIDTH_RATIO,
|
|
|
360
|
+ height: 30*DEVICE_WIDTH_RATIO,
|
|
|
361
|
+ },
|
|
|
362
|
+}); |