ExchangeRecord.js 3.96 KB
import React from 'react'
import {View, Text, Image, StyleSheet, TouchableOpacity, Platform, FlatList,PixelRatio} from 'react-native'
import {observer} from 'mobx-react/native';
import Header from '../../components/Header'
import integralLogic from '../../../logic/integralLogic'
import ActivePage from "../../components/ActivePage";
import {pointDetailStatus} from "./PointOrderDetail";
import {withNavigationFocus} from 'react-navigation-is-focused-hoc'

const line = 1 / PixelRatio.get();
const styles = StyleSheet.create({
	container: {
		flex: 1,
		backgroundColor: "#f4f4f4",
	},
	item: {
		height: 115,
		backgroundColor: 'white',
		flexDirection: 'row',
		paddingLeft: 15,
		alignItems: 'center',
	},
	itemImage: {
		height: 100,
		width: 100,
		marginRight: 15,
	},
	other: {
		flex: 1,
		height: 115,
		borderBottomColor: "#f4f4f4",
		borderBottomWidth: line,
		paddingTop: 15,
		paddingRight: 15,
		paddingLeft: 5,
	},
	name: {
		fontSize: 16,
		color: "#333333",
		marginBottom: 15,
	},
	row: {
		flexDirection: 'row',
		alignItems: 'center',
	},
	count: {
		fontSize: 16,
		color: "#ea281a",
		flex: 1,
	},
	button: {
		width: 74,
		height: 26,
		alignItems: "center",
		justifyContent: 'center',
		borderWidth: line,
		borderColor: "#999999",
		borderRadius: 2,
	},
	status: {
		fontSize: 14,
	},
	content1: {
		flex: 1,
		alignItems: 'center',
		paddingTop: 160,
	},
	img: {
		height: 85,
		width: 85,
		marginBottom: 15,
	},
	text: {
		fontSize: 14,
		color: "#999999"
	},
	pic: {
		height: 85,
		width: 85,
		marginBottom: 15,
	},
	size: {
		fontSize: 12,
		color: "#999999",
		marginBottom: 15,
	}
})
@observer
class ExchangeRecord extends React.Component {
	logic = new integralLogic()
	item = (v) => {
		const {orderLineList, status,totalPoint,id} = v
		const {params}=this.props.navigation.state
		let hasOffset=false
		if(params){
			hasOffset=params.hasOffset
		}

		const {
			commodityTitle, itemSpec1AttributeName, itemSpec1ValueName, itemSpec2AttributeName,
			itemSpec2ValueName, quantity, pictureUrl, itemSpec3AttributeName, itemSpec3ValueName,commodityId,isVirtual
		} = orderLineList[0]
		console.log("render")
		return (
			<TouchableOpacity style={styles.item} onPress={()=>this.props.navigation.navigate("PointOrderDetail",{id,hasOffset})}>
				<Image style={styles.itemImage} source={{uri: pictureUrl}} resizeMode={"contain"}/>
				<View style={styles.other}>
					<Text style={styles.name}>{commodityTitle}</Text>
					<Text style={styles.size}>
						{!!itemSpec1ValueName && `${itemSpec1AttributeName}:${itemSpec1ValueName}`}
						{!!itemSpec2ValueName && `${itemSpec2AttributeName}:${itemSpec2ValueName}`}
						{!!itemSpec3ValueName && `${itemSpec3AttributeName}:${itemSpec3ValueName}`}
					</Text>
					<View style={styles.row}>
						<Text style={styles.count}>{totalPoint}积分</Text>
						<View style={styles.button}>
							{pointDetailStatus(status,isVirtual)}
						</View>
					</View>
				</View>

			</TouchableOpacity>
		)
	}

	async componentWillMount() {
		await this.logic.get()
	}
	async componentWillReceiveProps(props) {
		if(props.isFocused){
			console.log(11)
			await this.logic.get()
		}
	}
	content1() {
		if(this.logic.loading){
			return <ActivePage/>
		}
		if (this.logic.list.length === 0) {
			return (
				<View style={styles.content1}>
					<Image source={require("./imgs/exchange.png")} resizeMode={"contain"} style={styles.pic}/>
					<Text style={styles.text}>暂无兑换记录</Text>
				</View>
			)
		}
		return (
			<FlatList
				keyExtractor={item=>item.id}
				data={this.logic.list}
				extraData={this.logic.change}
				renderItem={({item}) => this.item(item)}
			/>)


	}

	render() {
		const {params}=this.props.navigation.state
		console.log(this.props.navigation)
		return (
			<View style={styles.container}>
				<Header title={"积分兑换记录"} pop navigation={this.props.navigation} offset={(params&&params.hasOffset)&&(Platform.OS==="android"?0:20)}/>
				{this.content1()}
			</View>
		)
	}
}
export default withNavigationFocus(ExchangeRecord,"ExchangeRecord")