|
@@ -4,129 +4,101 @@
|
|
* discount: 优惠信息
|
|
* discount: 优惠信息
|
|
*/
|
|
*/
|
|
|
|
|
|
-import React, { Component } from "react";
|
|
|
|
-import {
|
|
|
|
- StyleSheet,
|
|
|
|
- Text,
|
|
|
|
- View,
|
|
|
|
- Image,
|
|
|
|
- TouchableOpacity,
|
|
|
|
- ImageBackground,
|
|
|
|
-} from "react-native";
|
|
|
|
-import Dimensions from '../utils/dimensions'
|
|
|
|
|
|
+import React, { Component } from 'react';
|
|
|
|
+import { StyleSheet, Text, View, Image, TouchableOpacity, ImageBackground } from 'react-native';
|
|
|
|
+import Dimensions from '../utils/dimensions';
|
|
|
|
|
|
const styles = StyleSheet.create({
|
|
const styles = StyleSheet.create({
|
|
- bigWrapper: {
|
|
|
|
- flexDirection: 'column',
|
|
|
|
- },
|
|
|
|
- wrapper: {
|
|
|
|
- // width: Dimensions.width,
|
|
|
|
- // height: 45,
|
|
|
|
- justifyContent: "center",
|
|
|
|
- flexDirection: 'row',
|
|
|
|
- justifyContent: 'space-around',
|
|
|
|
- paddingHorizontal: 7
|
|
|
|
- },
|
|
|
|
- item: {
|
|
|
|
- width: Dimensions.width * 168 / 375,
|
|
|
|
- height: Dimensions.width * 168 / 375 * 120 / 168,
|
|
|
|
- paddingLeft: 10
|
|
|
|
- },
|
|
|
|
- title: {
|
|
|
|
- fontSize: 20,
|
|
|
|
- color: '#fff',
|
|
|
|
- marginTop: 15,
|
|
|
|
- },
|
|
|
|
- line2: {
|
|
|
|
- flexDirection: 'row',
|
|
|
|
- alignItems: 'center',
|
|
|
|
- // marginTop: 3
|
|
|
|
- },
|
|
|
|
- price: {
|
|
|
|
- fontSize: 24,
|
|
|
|
- color: '#fff',
|
|
|
|
- fontWeight: 'bold',
|
|
|
|
- marginRight: 5
|
|
|
|
- },
|
|
|
|
- originPrice: {
|
|
|
|
- fontSize: 11,
|
|
|
|
- color: '#fff',
|
|
|
|
- textDecorationLine: 'line-through'
|
|
|
|
- },
|
|
|
|
- line3: {
|
|
|
|
- alignItems: 'center',
|
|
|
|
- flexDirection: 'row',
|
|
|
|
- marginTop: 8
|
|
|
|
- },
|
|
|
|
- buy: {
|
|
|
|
- fontSize: 18,
|
|
|
|
- color: '#fff'
|
|
|
|
- },
|
|
|
|
- discount: {
|
|
|
|
- width: Dimensions.width,
|
|
|
|
- alignItems: 'center',
|
|
|
|
- justifyContent: 'center',
|
|
|
|
- height: 100
|
|
|
|
- },
|
|
|
|
- discountIcon: {
|
|
|
|
- width: Dimensions.width * 343 / 375,
|
|
|
|
- height: Dimensions.width * 343 / 375 * 80 / 343
|
|
|
|
- }
|
|
|
|
-
|
|
|
|
-})
|
|
|
|
|
|
+ bigWrapper: {
|
|
|
|
+ flexDirection: 'column'
|
|
|
|
+ },
|
|
|
|
+ wrapper: {
|
|
|
|
+ // width: Dimensions.width,
|
|
|
|
+ // height: 45,
|
|
|
|
+ justifyContent: 'center',
|
|
|
|
+ flexDirection: 'row',
|
|
|
|
+ justifyContent: 'space-around',
|
|
|
|
+ paddingHorizontal: 7
|
|
|
|
+ },
|
|
|
|
+ item: {
|
|
|
|
+ width: Dimensions.width * 168 / 375,
|
|
|
|
+ height: Dimensions.width * 168 / 375 * 120 / 168,
|
|
|
|
+ paddingLeft: 10
|
|
|
|
+ },
|
|
|
|
+ title: {
|
|
|
|
+ fontSize: 20,
|
|
|
|
+ color: '#fff',
|
|
|
|
+ marginTop: 15
|
|
|
|
+ },
|
|
|
|
+ line2: {
|
|
|
|
+ flexDirection: 'row',
|
|
|
|
+ alignItems: 'center'
|
|
|
|
+ // marginTop: 3
|
|
|
|
+ },
|
|
|
|
+ price: {
|
|
|
|
+ fontSize: 24,
|
|
|
|
+ color: '#fff',
|
|
|
|
+ fontWeight: 'bold',
|
|
|
|
+ marginRight: 5
|
|
|
|
+ },
|
|
|
|
+ originPrice: {
|
|
|
|
+ fontSize: 11,
|
|
|
|
+ color: '#fff',
|
|
|
|
+ textDecorationLine: 'line-through'
|
|
|
|
+ },
|
|
|
|
+ line3: {
|
|
|
|
+ alignItems: 'center',
|
|
|
|
+ flexDirection: 'row',
|
|
|
|
+ marginTop: 8
|
|
|
|
+ },
|
|
|
|
+ buy: {
|
|
|
|
+ fontSize: 18,
|
|
|
|
+ color: '#fff'
|
|
|
|
+ },
|
|
|
|
+ discount: {
|
|
|
|
+ width: Dimensions.width,
|
|
|
|
+ alignItems: 'center',
|
|
|
|
+ justifyContent: 'center',
|
|
|
|
+ height: 100
|
|
|
|
+ },
|
|
|
|
+ discountIcon: {
|
|
|
|
+ width: Dimensions.width * 343 / 375,
|
|
|
|
+ height: Dimensions.width * 343 / 375 * 80 / 343
|
|
|
|
+ }
|
|
|
|
+});
|
|
|
|
|
|
export default class ShopBox extends Component {
|
|
export default class ShopBox extends Component {
|
|
|
|
+ renderGoods = (item, index) => {
|
|
|
|
+ return (
|
|
|
|
+ <ImageBackground source={item.background} style={styles.item} key={index}>
|
|
|
|
+ <TouchableOpacity onPress={() => this.props.nav('Buy')}>
|
|
|
|
+ <Text style={styles.title}>{item.title}</Text>
|
|
|
|
+ <View style={styles.line2}>
|
|
|
|
+ <Text style={styles.price}>¥{item.price}</Text>
|
|
|
|
+ <Text style={styles.originPrice}>原价: {item.originPrice}</Text>
|
|
|
|
+ </View>
|
|
|
|
+ <View style={styles.line3}>
|
|
|
|
+ <Text style={styles.buy}>立即购买</Text>
|
|
|
|
+ <Image source={require('../images/shopBox/arrow.png')} style={styles.arrow} />
|
|
|
|
+ </View>
|
|
|
|
+ </TouchableOpacity>
|
|
|
|
+ </ImageBackground>
|
|
|
|
+ );
|
|
|
|
+ };
|
|
|
|
|
|
- renderGoods = (item, index) => {
|
|
|
|
- return (
|
|
|
|
- <ImageBackground
|
|
|
|
- source={item.background}
|
|
|
|
- style={styles.item}
|
|
|
|
- key={index}
|
|
|
|
-
|
|
|
|
- >
|
|
|
|
- <TouchableOpacity onPress={() => this.props.nav('Buy')}>
|
|
|
|
- <Text
|
|
|
|
- style={styles.title}
|
|
|
|
- >{item.title}</Text>
|
|
|
|
- <View
|
|
|
|
- style={styles.line2}
|
|
|
|
- >
|
|
|
|
- <Text style={styles.price}>¥{item.price}</Text>
|
|
|
|
- <Text style={styles.originPrice}>原价: {item.originPrice}</Text>
|
|
|
|
- </View>
|
|
|
|
- <View
|
|
|
|
- style={styles.line3}
|
|
|
|
- >
|
|
|
|
- <Text style={styles.buy}>立即购买</Text>
|
|
|
|
- <Image
|
|
|
|
- source={require('../images/shopBox/arrow.png')}
|
|
|
|
- style={styles.arrow}
|
|
|
|
- />
|
|
|
|
-
|
|
|
|
- </View>
|
|
|
|
- </TouchableOpacity>
|
|
|
|
-
|
|
|
|
- </ImageBackground>
|
|
|
|
- )
|
|
|
|
- }
|
|
|
|
-
|
|
|
|
- render() {
|
|
|
|
-
|
|
|
|
- return (
|
|
|
|
- <View style={styles.bigWrapper}>
|
|
|
|
- <View style={styles.wrapper}>
|
|
|
|
- {this.props.data.map((item, index) => this.renderGoods(item, index))}
|
|
|
|
- </View>
|
|
|
|
- <View style={styles.discount}>
|
|
|
|
- <Image
|
|
|
|
- source={this.props.discount.icon}
|
|
|
|
- stytle={styles.discountIcon}
|
|
|
|
- />
|
|
|
|
- </View>
|
|
|
|
-
|
|
|
|
- </View>
|
|
|
|
-
|
|
|
|
- );
|
|
|
|
- }
|
|
|
|
|
|
+ render() {
|
|
|
|
+ return (
|
|
|
|
+ <View style={styles.bigWrapper}>
|
|
|
|
+ <View style={styles.wrapper}>
|
|
|
|
+ {this.props.data.map((item, index) => this.renderGoods(item, index))}
|
|
|
|
+ </View>
|
|
|
|
+ <View style={styles.discount}>
|
|
|
|
+ <Image
|
|
|
|
+ source={this.props.discount.icon}
|
|
|
|
+ style={{ height: '80%', width: '95%', borderRadius: 10 }}
|
|
|
|
+ />
|
|
|
|
+ </View>
|
|
|
|
+ </View>
|
|
|
|
+ );
|
|
|
|
+ }
|
|
}
|
|
}
|