InterestCell.js
3.99 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
'use strict';
import React, {Component} from 'react';
import ReactNative, {
View,
Text,
Image,
ListView,
StyleSheet,
Dimensions,
TouchableOpacity,
} from 'react-native';
import {List} from 'immutable';
import SlicedImage from '../../../common/components/SlicedImage';
import InterestHeader from './InterestHeader';
import DeleteLineText from '../../../common/components/DeleteLineText';
export default class InterestCell extends Component {
constructor(props) {
super(props);
}
render() {
let {data, rowID} = this.props;
let products = data.get('product', List()).toJS().slice(0, 3);
return (
<View style={styles.container}>
<InterestHeader
data={data}
rowID={rowID}
onInterestLike={this.props.onInterestLike}
onPressBrand={this.props.onPressBrand}
/>
<View style={styles.products}>
{products.map((item, i) => {
let url = SlicedImage.getSlicedUrl(item.product_img, 213, 284, 2);
let salePrice = parseFloat(item.sale_price); // 售卖价
let originPrice = parseFloat(item.market_price); // 原价
let salePriceStr = '¥' + salePrice.toFixed(2); // 拼接的售卖价
let originPriceStr = '¥' + originPrice.toFixed(2); // 拼接的原价
let showOriginPrice = originPrice && (salePrice != originPrice);
let nowColor = showOriginPrice ? {} : {color: '#444444'};
let marginLeft = i != 0 ? 1 : 0;
return (
<TouchableOpacity
key={i}
activeOpacity={1}
onPress={() => {
this.props.onPressProduct && this.props.onPressProduct(item, i);
}}
>
<View style={[styles.product, {marginLeft}]}>
<Image style={styles.prdImage} source={{uri: url}} />
<View style={styles.priceContainer}>
<Text style={[styles.nowPrice, nowColor]} numberOfLines={1}>{salePriceStr}</Text>
{showOriginPrice ? <DeleteLineText text={originPriceStr} /> : null}
</View>
</View>
</TouchableOpacity>
);
})}
</View>
<View style={styles.bottomView} />
</View>
);
}
}
let {width, height} = Dimensions.get('window');
const DEVICE_WIDTH_RATIO = width / 320;
const IMAGE_WIDTH = 106;
const IMAGE_HEIGHT = 142;
const IMAGE_RATIO = IMAGE_HEIGHT / IMAGE_WIDTH;
let productWidth = Math.ceil(width / 3);
let productHeight = 178 * DEVICE_WIDTH_RATIO;
let imageHeight = productWidth * IMAGE_RATIO;
let priceHeight = productHeight - imageHeight;
let rowWidth = width;
let styles = StyleSheet.create({
container: {
width: rowWidth,
backgroundColor: '#f0f0f0',
},
products: {
flexDirection: 'row',
},
product: {
width: productWidth,
height: productHeight,
},
prdImage: {
width: productWidth,
height: imageHeight,
},
priceContainer: {
flex: 1,
flexDirection: 'column',
justifyContent: 'center',
alignSelf: 'center',
alignItems: 'center',
width: productWidth,
height: priceHeight,
backgroundColor: 'white',
},
nowPrice: {
fontSize: 11,
color: '#d0021b',
},
bottomView: {
width,
height: 15,
backgroundColor: '#f0f0f0',
},
});