ProductCell.js
4.17 KB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
'use strict';
import React, {Component} from 'react';
import {Dimensions, StyleSheet, Text, TouchableOpacity, View, Image} from 'react-native';
import YH_Image from '../../../common/components/YH_Image';
export default class ProductCell extends Component {
constructor(props) {
super(props);
}
render() {
let data = this.props.data;
let prdImage = YH_Image.getSlicedUrl(data.get('default_images', ''), 80, 109, 2);
let yh_exposureData = this.props.yh_exposureData ? this.props.yh_exposureData : null;
let activityId = data.get('collage_activity_id');
let salesPrice = activityId && activityId != 0 ? data.get('collage_price') : data.get('sales_price');
let rebatesPrice = activityId && activityId != 0 ? data.get('collage_rebates_amount') : data.get('rebates_amount');
let groupWidth = activityId && activityId != 0 ? 50 : 0;
return (
<View>
<View style={styles.fatherContainer}>
<TouchableOpacity
yh_exposureData={yh_exposureData} activeOpacity={1} style={[styles.container]}
onPress={() => {
this.props.onPressProduct && this.props.onPressProduct(data);
}}>
<View style={styles.container}>
<YH_Image style={styles.prdImage} url={prdImage}/>
<Text style={styles.prdName} numberOfLines={2}>{data.get('product_name', '')}</Text>
<View style={styles.priceContainer}>
<Text style={styles.nowPrice} numberOfLines={1}>¥{salesPrice}</Text>
<Image source={require('../../images/Group3.png')} style={{marginLeft: 10, height: 17, width: groupWidth}} />
</View>
<View style={[styles.bottomView, styles.returnTextContainer]}>
<Text style={styles.returnText}>最高返</Text>
<Text style={[styles.returnText, {
marginLeft: 4,
fontSize: 16
}]}>¥{rebatesPrice}</Text>
</View>
<View style={styles.shareContainer}>
<Text style={styles.share}>去分享</Text>
</View>
</View>
</TouchableOpacity>
</View>
<View style={styles.separator}/>
</View>
);
}
};
let {width} = Dimensions.get('window');
let nameWidth = width - 15 - 80 - 15 - 15;
let styles = StyleSheet.create({
fatherContainer: {
flexDirection: 'row',
alignItems: 'center',
backgroundColor: 'white',
padding: 15,
},
container: {
flexDirection: 'row',
width: width,
},
prdImage: {
width: 80,
height: 109
},
prdName: {
fontFamily: 'PingFang-SC-Regular',
fontSize: 14,
color: '#444444',
marginTop: 3,
marginLeft: 15,
width: nameWidth,
letterSpacing: -0.34,
},
priceContainer: {
position: 'absolute',
flexDirection: 'row',
left: 95,
top: 48
},
nowPrice: {
fontSize: 14,
color: '#B0B0B0',
},
bottomView: {
position: 'absolute',
left: 95,
bottom: 11,
width: nameWidth,
},
returnTextContainer: {
flexDirection: 'row',
},
returnText: {
fontSize: 14,
color: '#D0021B',
textAlign: 'center',
textAlignVertical: 'center',
alignSelf: 'center',
},
shareContainer: {
position: 'absolute',
width: 60,
height: 30,
right: 30,
bottom: 5,
borderRadius: 3,
backgroundColor: '#D0021B',
justifyContent: 'center',
},
share: {
fontSize: 14,
color: 'white',
textAlign: 'center',
},
separator: {
width,
height: 1,
backgroundColor: '#f0f0f0'
},
});