PointOrderDetail.js 6.87 KB
import React from "react"
import {View, StyleSheet, Text, Image, TouchableOpacity, Alert, ScrollView,Platform,PixelRatio,Dimensions} from "react-native"
import {observer} from 'mobx-react/native'
import Header from '../../components/Header';
import pointOrderDetailLogic from '../../../logic/pointOrderDetailLogic'
import {CarItem} from "../tabs/ShoppingCar";
import ActivePage from "../../components/ActivePage";
import { zoomW, zoomH } from '../../../../utils/getSize';

const width = Dimensions.get("window").width;
const line = 1 / PixelRatio.get();

const styles = StyleSheet.create({
    backWrap: {
        justifyContent: 'center',
        paddingLeft: 15 / zoomW,
        paddingRight: 15 / zoomW,
        height: 44 / zoomH,
    },
	container: {
		flex: 1,
		backgroundColor: "#f4f4f4"
	},
	addressView: {
		paddingRight: 15,
		justifyContent: 'center',
		paddingBottom: 15,
	},
	addressViewContent: {
		flex: 1,

	},
	name: {
		marginLeft: 22,
		fontSize: 16,
		color: "#333333",
		fontWeight: "600",
		marginBottom: 10,
		marginTop: 10
	},
	addressView1: {
		flexDirection: 'row',
		paddingRight: 15,
	},
	addressIcon: {
		height: 13,
		width: 13,
		marginRight: 10,
		marginTop: 2,
	},
	address: {
		fontSize: 14,
		color: "#333333",
		width: width - 80,
	},
	icon: {
		height: 12,
		width: 12,
	},
	titleView: {
		backgroundColor: "white",
		paddingLeft: 15,
		marginBottom: 10,
	},
	row: {

		borderBottomColor: "#f4f4f4",
		borderBottomWidth: line,
		alignItems: 'center',
		flexDirection: 'row',
		paddingRight: 15,
		height: 40,
	},
	rowIcon: {
		height: 12,
		width: 12,

	},
	rowText: {
		marginHorizontal: 7,
		fontSize: 14,
		flex: 1,
	},
	content: {
		backgroundColor: "white",
		borderBottomColor: "#f4f4f4",
		borderBottomWidth: line,
	},
	contentTitleView: {
		height: 45,
		alignItems: 'center',
		paddingHorizontal: 15,
		flexDirection: 'row',
		borderBottomColor: "#f4f4f4",
		borderBottomWidth: line,
	},
	title: {
		fontSize: 12,
		flex: 1,
		color: "#333333"
	},
	status: {
		fontSize: 14,
	},
	countView: {
		paddingHorizontal: 15,
		paddingTop: 10,
		flexDirection: 'row',
		backgroundColor: "white",
	},
	countName: {
		fontSize: 12,
		flex: 1,
		color: "#333333",
		lineHeight: 18,
	},
	count: {
		fontSize: 12,
		color: "#333333",
		lineHeight: 18,
		textAlign: 'right',
	},
	priceView: {
		paddingBottom: 10,
		backgroundColor: "white",
		flexDirection: "row",
	},
	countName1: {
		fontSize: 14,
		flex: 1,
		color: "#333333",
		paddingLeft: 15,
	},
	count1: {
		fontSize: 14,
		color: "#ea281a",
		paddingRight: 15,
	},
	bottomBar: {
		marginTop: 10,
		padding: 15,
		backgroundColor: 'white',
	},
	bottomText: {
		fontSize: 12,
		color: "#666666",
		lineHeight: 20
	},
	statusFont: {
		fontSize: 12,
	},
	markButton: {
		height: 26,
		width: 75,
		alignItems: "center",
		justifyContent: "center",
		borderWidth: line,
		borderColor: "#ea281a",
		borderRadius: 2,
		position: "absolute",
		right: 15,
		bottom: 12,
	},
	markButtonText: {
		fontSize: 14,
		color: "#ea281a"
	},
})
export const pointDetailStatus = (status,isVirtual) => {
	if(isVirtual){
		return <Text style={[styles.statusFont, {color: "#52c26e"}]}>已完成</Text>
	}
	if (status === "UN_PAID") {
		return <Text style={styles.statusFont}>待付款</Text>
	}
	if (status === "UN_SHIPMENT") {
		return <Text style={styles.statusFont}>待发货</Text>
	}
	if (status === "UN_SIGNED") {
		return <Text style={styles.statusFont}>待签收</Text>
	}
	return <Text style={[styles.statusFont, {color: "#52c26e"}]}>已完成</Text>
}
@observer
export default class PointOrderDetail extends React.Component {
    static navigationOptions=({ navigation, screenProps }) => ({
        title: '兑换详情',
        headerLeft: (
			<TouchableOpacity style={styles.backWrap} onPress={() => navigation.goBack(null)}>
				<Image source={require('../../../../img/back_gray.png')} resizeMode="contain" />
			</TouchableOpacity>
        ),
        headerRight: (
			<View />
        ),
    });

	logic = new pointOrderDetailLogic()

	async componentWillMount() {
		const {id} = this.props.navigation.state.params
		this.logic.id = id
		await this.logic.get()
	}

	address() {
		const {status} = this.logic
		return (
			<View style={styles.titleView}>
				{(status !== "UN_PAID" && status !== "UN_SHIPMENT"&&!this.logic.isVirtual) && <TouchableOpacity style={styles.row}
				                                                                         onPress={() => this.props.navigation.navigate("Express", {
					                                                                         id: this.props.navigation.state.params.id,
					                                                                         address: `${this.logic.address} ${this.logic.name} ${this.logic.phone}`
				                                                                         })}>
					<Image style={styles.rowIcon} resizeMode={"contain"} source={require("./imgs/car1.png")}/>
					<Text style={styles.rowText}>查看物流信息</Text>
					<Image style={styles.rowIcon} resizeMode={"contain"} source={require("../ShoppingCar/imgs/right.png")}/>
				</TouchableOpacity>}
				<View style={styles.addressView}>
					<Text style={styles.name}>{`${this.logic.name} ${this.logic.phone}`}</Text>
					<View style={styles.addressView1}>
						<Image resizeMode='contain' style={styles.addressIcon} source={require("../product/imgs/address.png")}/>
						<Text style={styles.address}>{this.logic.address}</Text>
					</View>
				</View>
			</View>
		)
	}

	content1() {
		// const status=this.logic.isReturn?"退货退款":statusToString(this.logic.orderStatus)
		return (
			<View style={styles.content}>
				<View style={styles.contentTitleView}>
					<Text style={styles.title}>订单编号:{this.logic.orderNum}</Text>
					{pointDetailStatus(this.logic.status,this.logic.isVirtual)}
				</View>
				{this.logic.items.map((v, i) => <CarItem
					key={i}
					data={v}
					nodel={true}
					noView={true}
					navigation={this.props.navigation}
					showPoint={v.pointValue}
					phone={this.logic.phone}
					getData={async () => {
					}}/>)}
				{this.logic.status==="UN_SIGNED"&&<TouchableOpacity style={styles.markButton} onPress={this.sign}>
					<Text style={styles.markButtonText}>确认收货</Text>
				</TouchableOpacity>}
			</View>
		)
	}

	sign = async () => {
		Alert.alert('注意', "确定签收吗?", [
			{text: '取消', onPress: () => console.log('Cancel Pressed!')},
			{
				text: '确定', onPress: async () => {
				const data = await this.logic.sign();
				if(data){
					await this.logic.get()
				}
			}
			},
		])

	}
	content(){
			if(this.logic.loading){
				return <ActivePage/>
			}
			return (
				<ScrollView>
					<View style={styles.container}>
						{this.address()}
						{this.content1()}
					</View>
				</ScrollView>
				)

	}
	render() {
		const {params}=this.props.navigation.state
		return (
			<View style={styles.container}>
				<View style={styles.container}>
				{this.content()}
				</View>
			</View>

		)
	}
}