CouponsBagListCell.js
3.49 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
'use strict';
import React from 'react';
import ReactNative from 'react-native';
const {
StyleSheet,
Text,
View,
Image,
Dimensions,
TouchableOpacity,
} = ReactNative;
export default class CouponsBagListCell extends React.Component {
constructor(props) {
super(props);
}
render() {
let {data} = this.props;
let nameStyle = data.get('notExpired') ? {color: '#222222'} : {color: '#B0B0B0'};
let bgStyle = data.get('status') === 0 && data.get('notExpired') ? {backgroundColor: '#A69073'} : {backgroundColor: '#B0B0B0'};
let textStyle = data.get('status') === 0 && data.get('notExpired') ? {fontFamily: 'PingFang-SC-Bold'} : {fontFamily: 'PingFang-SC-Medium'};
//"status": 是否已领取 未领取：0，已领取：1，已作废：2；
//"notExpired": 未过期：true，过期：false；
let text = data.get('status') === 2 ? '已作废' : data.get('status') === 1 ? '已领取' : data.get('notExpired') ? '领取' : '已失效';
return (
<View style={styles.container}>
<View style={styles.contentContainer}>
<Image style={styles.imgIconBg}
source={data.get('notExpired') ? require('../images/bg_use.png') : require('../images/bg_used.png')}/>
<View style={styles.contentText}>
<Text style={[styles.name, nameStyle]}>{data.get('name')}</Text>
<Text style={[styles.dateTitle, nameStyle]}>{data.get('dateTitle')}</Text>
<Text style={styles.desc}>{data.get('desc')}</Text>
</View>
<TouchableOpacity activeOpacity={1} onPress={() => {
data.get('status') === 0 && data.get('notExpired') && this.props.onPressGiftBag && this.props.onPressGiftBag(data.get('id'));
}}>
<View style={[styles.buttonBg, bgStyle]}>
<Text style={[styles.textStyle, textStyle]}>{text}</Text>
</View>
</TouchableOpacity>
</View>
</View>
);
}
};
let {width, height} = Dimensions.get('window');
let styles = StyleSheet.create({
container: {
width: width,
alignItems: 'center',
backgroundColor: '#444444',
},
contentContainer: {
width: 345,
height: 70,
marginLeft: 15,
marginRight: 15,
marginBottom: 10,
borderRadius: 2,
flexDirection: 'row',
backgroundColor: 'white',
},
imgIconBg: {
width: 50,
height: 50,
marginTop: 10,
marginLeft: 16,
marginRight: 10,
marginBottom: 10,
},
contentText: {
width: 194,
},
name: {
marginTop: 10,
fontFamily: 'PingFang-SC-Medium',
fontSize: 12,
color: '#222222',
},
dateTitle: {
marginTop: 2,
fontFamily: 'PingFang-SC-Regular',
fontSize: 10,
color: '#222222',
},
desc: {
marginTop: 2,
fontFamily: 'PingFang-SC-Regular',
fontSize: 10,
color: '#B0B0B0',
},
buttonBg: {
width: 60,
height: 26,
marginTop: 22,
borderRadius: 30,
alignItems: 'center',
justifyContent: 'center',
backgroundColor: '#A69073',
},
textStyle: {
fontFamily: 'PingFang-SC-Bold',
fontSize: 14,
color: 'white',
},
});