|
|
import React, { Component } from 'react';
|
|
|
import {
|
|
|
Dimensions,
|
|
|
Image,
|
|
|
SectionList,
|
|
|
StyleSheet,
|
|
|
Text,
|
...
|
...
|
@@ -8,18 +10,240 @@ import { |
|
|
View,
|
|
|
} from 'react-native';
|
|
|
|
|
|
let {width, height} = Dimensions.get('window');
|
|
|
const DEVICE_WIDTH_RATIO = width / 375;
|
|
|
|
|
|
export default class CouponListCell extends Component {
|
|
|
state = { }
|
|
|
render() {
|
|
|
let { type } = this.props;
|
|
|
let data = this.props.data || {};
|
|
|
let coupon_value = data && data.coupon_value_str ? data.coupon_value_str : 0;
|
|
|
let coupon_name = data && data.coupon_name ? data.coupon_name : '';
|
|
|
let coupon_validity = data && data.coupon_validity ? data.coupon_validity : '';
|
|
|
let use_rule = data && data.use_rule ? data.use_rule : '';
|
|
|
let notes = data && data.notes ? data.notes : [];
|
|
|
let { catalog, catalog_name, is_online_avail, is_overdue_soon } = data;
|
|
|
let image, color;
|
|
|
if (catalog == '100') {
|
|
|
image = require('../../images/bgyellow.png');
|
|
|
color = '#ffa72e';
|
|
|
} else if (catalog == '200') {
|
|
|
image = require('../../images/bgred.png');
|
|
|
color = '#fc5960';
|
|
|
} else {
|
|
|
image = require('../../images/bgblack.png');
|
|
|
color = '#000000';
|
|
|
}
|
|
|
let arrowImage = this.state.showDetail ? require('../../images/up.png') : require('../../images/down.png');
|
|
|
let grayImage = type == 'use' ? require('../../images/yishiyong.png') : type == 'overtime' ? require('../../images/guoqi.png') : require('../../images/yishiyong.png');
|
|
|
if (type != 'notuse') {
|
|
|
color = '#b0b0b0';
|
|
|
image = require('../../images/bggrey.png');
|
|
|
}
|
|
|
return (
|
|
|
<View />
|
|
|
<View style={styles.container}>
|
|
|
<View style={[styles.row, this.state.showDetail && styles.shadow]}>
|
|
|
<View>
|
|
|
<Image source={image} resizeMode="stretch" style={styles.bgImg}/>
|
|
|
<View style={styles.leftAb}>
|
|
|
<Text style={[styles.price, {color}, (data.coupon_value != data.coupon_value_str) && {fontSize: 24 * DEVICE_WIDTH_RATIO}]} numberOfLines={1}>
|
|
|
{coupon_value}
|
|
|
</Text>
|
|
|
{use_rule ? <Text style={[styles.priceDetail, {color}]}>
|
|
|
{use_rule}
|
|
|
</Text> : null}
|
|
|
</View>
|
|
|
</View>
|
|
|
<View style={styles.right}>
|
|
|
<Text style={[styles.titleTip, {color}]} numberOfLines={2} >
|
|
|
[{catalog_name}]
|
|
|
<Text style={[styles.title, type != 'notuse' && {color}]} >
|
|
|
{' '} {coupon_name}
|
|
|
</Text>
|
|
|
</Text>
|
|
|
<Text style={styles.time}>
|
|
|
{coupon_validity}
|
|
|
</Text>
|
|
|
<TouchableOpacity
|
|
|
activeOpacity={1.0}
|
|
|
onPress={() => {
|
|
|
this.setState({showDetail: !this.state.showDetail})
|
|
|
}}>
|
|
|
<View style={styles.bottom}>
|
|
|
<Text style={styles.bottomText}>
|
|
|
使用说明
|
|
|
</Text>
|
|
|
<Image source={arrowImage} style={styles.bottomIcon} resizeMode="contain"/>
|
|
|
</View>
|
|
|
</TouchableOpacity>
|
|
|
{(type == 'notuse' && is_online_avail) ? <TouchableOpacity onPress={this.props.goCouponProductList} style={styles.immediatelyUse}>
|
|
|
<Text style={styles.immediatelyUseText}>立即使用</Text>
|
|
|
</TouchableOpacity> : null}
|
|
|
{type != 'notuse' ? <Image source={grayImage} style={styles.grayImage} /> : null}
|
|
|
{is_overdue_soon ? <Image source={require('../../images/tip.png')} style={styles.overDueSoon} resizeMode="stretch" /> : null}
|
|
|
</View>
|
|
|
</View>
|
|
|
{this.state.showDetail ?
|
|
|
<View style={styles.detail}>
|
|
|
{notes.map((item, i) => {
|
|
|
return (
|
|
|
<View key={i} style={styles.detailTextView}>
|
|
|
<Text style={styles.detailText} numberOfLines={2}>
|
|
|
{item}
|
|
|
</Text>
|
|
|
</View>
|
|
|
)
|
|
|
})}
|
|
|
</View>
|
|
|
: null
|
|
|
}
|
|
|
</View>
|
|
|
);
|
|
|
}
|
|
|
}
|
|
|
|
|
|
const styles = StyleSheet.create({
|
|
|
container: {
|
|
|
flex: 1,
|
|
|
backgroundColor: '#f0f0f0',
|
|
|
marginVertical: 5 * DEVICE_WIDTH_RATIO,
|
|
|
marginHorizontal: 10 * DEVICE_WIDTH_RATIO,
|
|
|
},
|
|
|
row: {
|
|
|
flexDirection: 'row',
|
|
|
zIndex: 1,
|
|
|
},
|
|
|
bgImg: {
|
|
|
width: 110 * DEVICE_WIDTH_RATIO,
|
|
|
height: 100 * DEVICE_WIDTH_RATIO,
|
|
|
},
|
|
|
right: {
|
|
|
width: 245 * DEVICE_WIDTH_RATIO,
|
|
|
height: 100 * DEVICE_WIDTH_RATIO,
|
|
|
backgroundColor: '#ffffff',
|
|
|
borderTopRightRadius: 4 * DEVICE_WIDTH_RATIO,
|
|
|
borderBottomRightRadius: 4 * DEVICE_WIDTH_RATIO,
|
|
|
},
|
|
|
price: {
|
|
|
fontSize: 30 * DEVICE_WIDTH_RATIO,
|
|
|
color: '#002B47',
|
|
|
letterSpacing: 0,
|
|
|
textAlign: 'center',
|
|
|
fontWeight: 'bold',
|
|
|
},
|
|
|
priceDetail: {
|
|
|
fontFamily: 'PingFang-SC-Regular',
|
|
|
fontSize: 12*DEVICE_WIDTH_RATIO,
|
|
|
color: '#002B47',
|
|
|
letterSpacing: 0,
|
|
|
textAlign: 'center',
|
|
|
},
|
|
|
leftAb: {
|
|
|
position: 'absolute',
|
|
|
top: 0,
|
|
|
left: 8*DEVICE_WIDTH_RATIO,
|
|
|
right: 5*DEVICE_WIDTH_RATIO,
|
|
|
bottom: 0,
|
|
|
justifyContent: 'center',
|
|
|
alignItems: 'center',
|
|
|
},
|
|
|
titleTip: {
|
|
|
fontFamily: 'PingFang-SC-Medium',
|
|
|
fontSize: 12*DEVICE_WIDTH_RATIO,
|
|
|
color: '#002B47',
|
|
|
letterSpacing: 0,
|
|
|
marginLeft: 10*DEVICE_WIDTH_RATIO,
|
|
|
marginTop: 10*DEVICE_WIDTH_RATIO,
|
|
|
height: 35*DEVICE_WIDTH_RATIO,
|
|
|
maxWidth: 185*DEVICE_WIDTH_RATIO,
|
|
|
fontWeight: 'bold'
|
|
|
},
|
|
|
title: {
|
|
|
fontFamily: 'PingFang-SC-Regular',
|
|
|
fontSize: 12*DEVICE_WIDTH_RATIO,
|
|
|
color: '#444444',
|
|
|
fontWeight: 'normal',
|
|
|
letterSpacing: 0,
|
|
|
lineHeight: 15*DEVICE_WIDTH_RATIO,
|
|
|
},
|
|
|
time: {
|
|
|
marginLeft: 10*DEVICE_WIDTH_RATIO,
|
|
|
fontFamily: 'PingFang-SC-Regular',
|
|
|
fontSize: 11*DEVICE_WIDTH_RATIO,
|
|
|
color: '#b0b0b0',
|
|
|
letterSpacing: 0,
|
|
|
|
|
|
},
|
|
|
bottom: {
|
|
|
marginTop: 5*DEVICE_WIDTH_RATIO,
|
|
|
height: 35*DEVICE_WIDTH_RATIO,
|
|
|
flexDirection: 'row',
|
|
|
marginLeft: 10*DEVICE_WIDTH_RATIO,
|
|
|
alignItems: 'center',
|
|
|
},
|
|
|
bottomText: {
|
|
|
fontFamily: 'PingFang-SC-Regular',
|
|
|
fontSize: 11*DEVICE_WIDTH_RATIO,
|
|
|
color: '#B0B0B0',
|
|
|
letterSpacing: 0,
|
|
|
},
|
|
|
bottomIcon: {
|
|
|
width: 10*DEVICE_WIDTH_RATIO,
|
|
|
height: 10*DEVICE_WIDTH_RATIO,
|
|
|
marginLeft: 5*DEVICE_WIDTH_RATIO,
|
|
|
},
|
|
|
immediatelyUse: {
|
|
|
position: 'absolute',
|
|
|
right: 10*DEVICE_WIDTH_RATIO,
|
|
|
bottom: 10*DEVICE_WIDTH_RATIO,
|
|
|
width: 65*DEVICE_WIDTH_RATIO,
|
|
|
height: 25*DEVICE_WIDTH_RATIO,
|
|
|
borderWidth: 1,
|
|
|
borderColor: '#444444',
|
|
|
borderRadius: 12.5*DEVICE_WIDTH_RATIO,
|
|
|
justifyContent: 'center',
|
|
|
alignItems: 'center',
|
|
|
},
|
|
|
immediatelyUseText: {
|
|
|
fontSize: 10*DEVICE_WIDTH_RATIO,
|
|
|
color: '#444444',
|
|
|
},
|
|
|
grayImage: {
|
|
|
position: 'absolute',
|
|
|
top: 21.5*DEVICE_WIDTH_RATIO,
|
|
|
right: 10*DEVICE_WIDTH_RATIO,
|
|
|
width: 63*DEVICE_WIDTH_RATIO,
|
|
|
height: 57*DEVICE_WIDTH_RATIO,
|
|
|
},
|
|
|
detail: {
|
|
|
width: 355*DEVICE_WIDTH_RATIO,
|
|
|
marginTop: -6*DEVICE_WIDTH_RATIO,
|
|
|
backgroundColor: 'rgba(255,255,255,0.7)',
|
|
|
paddingTop: 18*DEVICE_WIDTH_RATIO,
|
|
|
paddingBottom: 11*DEVICE_WIDTH_RATIO,
|
|
|
paddingHorizontal: 11*DEVICE_WIDTH_RATIO,
|
|
|
zIndex: 0,
|
|
|
},
|
|
|
detailTextView: {
|
|
|
flexDirection: 'row',
|
|
|
},
|
|
|
detailText: {
|
|
|
fontFamily: 'PingFang-SC-Regular',
|
|
|
fontSize: 11*DEVICE_WIDTH_RATIO,
|
|
|
color: '#444444',
|
|
|
letterSpacing: 0,
|
|
|
},
|
|
|
shadow: {
|
|
|
shadowColor: 'rgba(0,0,0,0.1)',
|
|
|
shadowOffset: {width: 0, height: 3},
|
|
|
shadowOpacity: 0.5,
|
|
|
shadowRadius: 5,
|
|
|
elevation: 1,
|
|
|
},
|
|
|
overDueSoon: {
|
|
|
position: 'absolute',
|
|
|
top: 0,
|
|
|
right: 0,
|
|
|
width: 42*DEVICE_WIDTH_RATIO,
|
|
|
height: 42*DEVICE_WIDTH_RATIO,
|
|
|
}
|
|
|
}) |
|
|
\ No newline at end of file |
...
|
...
|
|