|
|
'use strict';
|
|
|
|
|
|
import React, {Component} from 'react';
|
|
|
import {Animated, Dimensions, Easing, Image, Platform, StyleSheet, Text, TouchableOpacity, View} from 'react-native';
|
|
|
import {Dimensions, StyleSheet, Text, TouchableOpacity, View} from 'react-native';
|
|
|
|
|
|
import YH_Image from '../../../common/components/YH_Image';
|
|
|
import DeleteLineText from '../../../common/components/DeleteLineText';
|
|
|
|
|
|
export default class ProductCell extends Component {
|
|
|
|
|
|
constructor(props) {
|
|
|
super(props);
|
|
|
this.renderBottomView = this.renderBottomView.bind(this);
|
|
|
}
|
|
|
|
|
|
renderBottomView() {
|
|
|
let data = this.props.data;
|
|
|
|
|
|
let showSoldOut = data.get('storage', 0) == 0;
|
|
|
|
|
|
if (showSoldOut) {
|
|
|
return (
|
|
|
<View style={[styles.bottomView, styles.soldOutContainer]}>
|
|
|
<Text style={styles.soldOut}>最高返</Text>
|
|
|
<Text style={[styles.soldOut, {marginLeft: 4, fontSize: 16}]}>¥100</Text>
|
|
|
</View>
|
|
|
);
|
|
|
}
|
|
|
|
|
|
let showOffShelf = data.get('status', 0) == 0 ? true : false;
|
|
|
let showReduce = data.get('price_down', 0) == 0 ? false : true;
|
|
|
|
|
|
if (true) {
|
|
|
let reduceStr = '¥' + (parseFloat(data.get('price_down'))).toFixed(2);
|
|
|
|
|
|
return (
|
|
|
<View style={[styles.bottomView, styles.reduceContainer]}>
|
|
|
<Text style={styles.reduceText} numberOfLines={1}>
|
|
|
{'已降'} <Text style={{color: '#d0021b'}}>{'¥100'}</Text>
|
|
|
</Text>
|
|
|
</View>
|
|
|
);
|
|
|
}
|
|
|
|
|
|
return null;
|
|
|
}
|
|
|
|
|
|
render() {
|
|
|
|
|
|
let data = this.props.data;
|
|
|
|
|
|
let prdImage = YH_Image.getSlicedUrl(data.get('image', ''), 76, 102, 2);
|
|
|
|
|
|
let salePrice = 0; // 售卖价
|
|
|
let originPrice = 0; // 原价
|
|
|
let salePriceStr = ''; // 拼接的售卖价
|
|
|
let originPriceStr = ''; // 拼接的原价
|
|
|
let showOriginPrice = true; // 是否显示原价
|
|
|
let salePriceColor = '#d0021b'; // 不显示原价时,售卖价颜色
|
|
|
|
|
|
salePrice = parseFloat(data.get('sales_price'));
|
|
|
originPrice = parseFloat(data.get('market_price'));
|
|
|
salePriceStr = '¥' + salePrice.toFixed(2);
|
|
|
originPriceStr = '¥' + originPrice.toFixed(2);
|
|
|
|
|
|
if (!originPrice || (salePrice == originPrice)) {
|
|
|
showOriginPrice = false;
|
|
|
salePriceColor = '#444444';
|
|
|
}
|
|
|
|
|
|
let {editing, editedRow, rowID} = this.props;
|
|
|
|
|
|
let prdImage = YH_Image.getSlicedUrl(data.get('default_images', ''), 80, 109, 2);
|
|
|
let yh_exposureData = this.props.yh_exposureData ? this.props.yh_exposureData : null;
|
|
|
|
|
|
return (
|
|
|
<View>
|
|
|
<View style={styles.fatherContainer}>
|
|
|
<TouchableOpacity yh_exposureData={yh_exposureData} activeOpacity={1} style={[styles.container]}
|
|
|
<TouchableOpacity
|
|
|
yh_exposureData={yh_exposureData} activeOpacity={1} style={[styles.container]}
|
|
|
onPress={() => {
|
|
|
this.props.onPressProduct && this.props.onPressProduct(data);
|
|
|
this.props.onPressProduct && this.props.onPressProduct(data.get('product_skn'));
|
|
|
}}>
|
|
|
<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, {color: salePriceColor}]} numberOfLines={1}>{salePriceStr}</Text>
|
|
|
{showOriginPrice
|
|
|
? <DeleteLineText style={styles.oldPriceContainer} textStyle={styles.oldPrice}
|
|
|
lineStyle={styles.deleteLine} text={originPriceStr}/>
|
|
|
: null}
|
|
|
<Text style={styles.nowPrice} numberOfLines={1}>¥{data.get('sales_price')}</Text>
|
|
|
</View>
|
|
|
<View style={[styles.bottomView, styles.returnTextContainer]}>
|
|
|
<Text style={styles.returnText}>最高返</Text>
|
|
|
<Text style={[styles.returnText, {
|
|
|
marginLeft: 4,
|
|
|
fontSize: 16
|
|
|
}]}>¥{data.get('rebates_amount')}</Text>
|
|
|
</View>
|
|
|
|
|
|
{this.renderBottomView()}
|
|
|
|
|
|
<View style={styles.shareContainer}>
|
|
|
<Text style={styles.share}>去分享</Text>
|
|
|
</View>
|
...
|
...
|
@@ -105,10 +49,8 @@ export default class ProductCell extends Component { |
|
|
};
|
|
|
|
|
|
let {width} = Dimensions.get('window');
|
|
|
const DEVICE_WIDTH_RATIO = width / 375;
|
|
|
|
|
|
let nameWidth = width - 15 - 80 - 15 - 15;
|
|
|
let topLeftWidth = width - Math.ceil(84 * DEVICE_WIDTH_RATIO);
|
|
|
|
|
|
let styles = StyleSheet.create({
|
|
|
fatherContainer: {
|
...
|
...
|
@@ -119,48 +61,8 @@ let styles = StyleSheet.create({ |
|
|
},
|
|
|
container: {
|
|
|
flexDirection: 'row',
|
|
|
// justifyContent: 'space-between',
|
|
|
// alignItems: 'center',
|
|
|
width: width,
|
|
|
},
|
|
|
deleteContainer: {
|
|
|
width: 40,
|
|
|
height: 70,
|
|
|
alignItems: 'center',
|
|
|
justifyContent: 'center',
|
|
|
backgroundColor: 'white',
|
|
|
paddingLeft: 5
|
|
|
},
|
|
|
deleteCircle: {
|
|
|
width: 22,
|
|
|
height: 22,
|
|
|
borderRadius: 11,
|
|
|
backgroundColor: 'red',
|
|
|
flexDirection: 'row',
|
|
|
alignItems: 'center',
|
|
|
justifyContent: 'center'
|
|
|
},
|
|
|
deleteBar: {
|
|
|
width: 11,
|
|
|
height: 1.5,
|
|
|
backgroundColor: 'white'
|
|
|
},
|
|
|
tailContainer: {
|
|
|
width: 70,
|
|
|
height: 122,
|
|
|
alignItems: 'center',
|
|
|
justifyContent: 'center',
|
|
|
backgroundColor: 'red'
|
|
|
},
|
|
|
tailText: {
|
|
|
color: 'white',
|
|
|
fontSize: 17,
|
|
|
backgroundColor: 'red'
|
|
|
},
|
|
|
|
|
|
leftContainer: {
|
|
|
flexDirection: 'row'
|
|
|
},
|
|
|
prdImage: {
|
|
|
width: 80,
|
|
|
height: 109
|
...
|
...
|
@@ -168,6 +70,7 @@ let styles = StyleSheet.create({ |
|
|
prdName: {
|
|
|
fontFamily: 'PingFang-SC-Regular',
|
|
|
fontSize: 14,
|
|
|
color: '#444444',
|
|
|
marginTop: 3,
|
|
|
marginLeft: 15,
|
|
|
width: nameWidth,
|
...
|
...
|
@@ -181,25 +84,7 @@ let styles = StyleSheet.create({ |
|
|
},
|
|
|
nowPrice: {
|
|
|
fontSize: 14,
|
|
|
color: '#d0021b',
|
|
|
},
|
|
|
oldPriceContainer: {
|
|
|
flexDirection: 'row',
|
|
|
marginLeft: 5,
|
|
|
marginTop: 2
|
|
|
},
|
|
|
oldPrice: {
|
|
|
fontSize: 12,
|
|
|
color: '#b0b0b0',
|
|
|
height: 16
|
|
|
},
|
|
|
deleteLine: {
|
|
|
position: 'absolute',
|
|
|
top: (16 / 2) - 1,
|
|
|
left: 0,
|
|
|
right: 0,
|
|
|
height: 1,
|
|
|
backgroundColor: '#b0b0b0'
|
|
|
color: '#B0B0B0',
|
|
|
},
|
|
|
bottomView: {
|
|
|
position: 'absolute',
|
...
|
...
|
@@ -207,10 +92,10 @@ let styles = StyleSheet.create({ |
|
|
bottom: 11,
|
|
|
width: nameWidth,
|
|
|
},
|
|
|
soldOutContainer: {
|
|
|
returnTextContainer: {
|
|
|
flexDirection: 'row',
|
|
|
},
|
|
|
soldOut: {
|
|
|
returnText: {
|
|
|
fontSize: 14,
|
|
|
color: '#D0021B',
|
|
|
textAlign: 'center',
|
...
|
...
|
@@ -231,19 +116,6 @@ let styles = StyleSheet.create({ |
|
|
color: 'white',
|
|
|
textAlign: 'center',
|
|
|
},
|
|
|
reduceContainer: {
|
|
|
flexDirection: 'row',
|
|
|
},
|
|
|
reduceImage: {
|
|
|
width: 15,
|
|
|
height: 15
|
|
|
},
|
|
|
reduceText: {
|
|
|
marginLeft: 2,
|
|
|
fontSize: 12,
|
|
|
color: '#b0b0b0',
|
|
|
width: nameWidth - 15 - 2
|
|
|
},
|
|
|
separator: {
|
|
|
width,
|
|
|
height: 1,
|
...
|
...
|
|