CheckSettleModal.js 4.42 KB
'use strict';

import React from 'react';
import ReactNative from 'react-native';

const {
    AppRegistry,
    StyleSheet,
    Text,
    View,
    Dimensions,
    TouchableOpacity,
    Modal,
} = ReactNative;


export default class CheckSettleModal extends React.Component {
    constructor(props) {
        super(props);
    }

    render() {
      let data = this.props.data.settlementData;
        return (
            <Modal
                visible={this.props.isShowWithCheck}
                animationType={'none'}
                transparent={true}
                onRequestClose={() => {}}>
                <View style={styles.modalContainer}>
                    <View style={styles.modalView}>
                        <View style={styles.confirmTitleContainer}>
                          <Text>
                              <Text style={styles.priceText}>税后总收益:</Text>
                              <Text style={styles.allPriceText}>{data.afterTaxAmountStr}</Text>
                          </Text>

                            <Text style={styles.priceText}>提现总金额:{data.settlementAmountStr}</Text>
                            <Text style={styles.priceText}>扣税总金额:{data.taxAmountStr}</Text>

                            <TouchableOpacity onPress={() => {
                                this.props.jumpWithActivityUrl && this.props.jumpWithActivityUrl();
                            }}>
                                <Text style={{marginTop: 15}}>
                                    <Text style={styles.tipText}>结算收益时需按照国家规定预扣个税,点击查看</Text>
                                    <Text style={[styles.tipText, {color:'blue'}]}>《提现扣税规则说明》</Text>
                                </Text>
                            </TouchableOpacity>
                                                    </View>
                        <View style={{width: '100%', height: 0.5, backgroundColor: '#e0e0e0'}}/>

                        <View style={styles.confirmBtnContainer}>
                            <TouchableOpacity style={styles.click} onPress={() => {
                                this.props.hiddenCheckSettleDialog && this.props.hiddenCheckSettleDialog();
                            }}>
                                <Text style={styles.cancel}>取消</Text>
                            </TouchableOpacity>

                            <View style={{height: '100%', width: 0.5, backgroundColor: '#e0e0e0'}}/>

                            <TouchableOpacity style={styles.click} onPress={() => {

                              this.props.hiddenCheckSettleDialog && this.props.hiddenCheckSettleDialog();
                              this.props.showWithdrawalDialog && this.props.showWithdrawalDialog();

                            }}>
                                <Text style={styles.sure}>确认提现</Text>
                            </TouchableOpacity>
                        </View>

                    </View>
                </View>
            </Modal>
        );
    }
};

let {width, height} = Dimensions.get('window');

let styles = StyleSheet.create({
    modalContainer: {
        flex: 1,
        width: width,
        height: height,
        alignItems: 'center',
        justifyContent: 'center',
        backgroundColor: 'rgba(0, 0, 0, 0.4)',
    },
    modalView: {
        width: 270,
        borderRadius: 5,
        alignItems: 'center',
        backgroundColor: '#ffffff',
    },
    confirmBtnContainer: {
        width: '100%',
        height: 44.5,
        flexDirection: 'row',
        alignItems: 'center'
    },
    confirmTitleContainer: {
        alignItems: 'flex-start',
        marginLeft: 30,
        marginRight: 30,
        marginTop: 20,
        marginBottom: 20,
    },
    click: {
        width: '50%',
        alignItems: 'center',
        justifyContent: 'center'
    },
    cancel: {
      fontFamily: 'PingFang-SC-Regular',
      fontSize: 17,
      color: '#444444',
      letterSpacing: -0.41,
    },
    sure: {
        fontSize: 17,
        color: '#D0021B',
        letterSpacing: -0.41,
        fontWeight: 'bold'
    },

    allPriceText:{
        fontFamily: 'PingFang-SC-Medium',
        fontSize: 14,
        color: '#D0021B',
    },
    priceText: {
        fontFamily: 'PingFang-SC-Regular',
        fontSize: 14,
        color: '#444444',
    },
    tipText: {
        fontFamily: 'PingFang-SC-Regular',
        fontSize: 12,
        color: '#B0B0B0',
    },
});