decorate_touch/jscore/pages/Sales/ReportCustomerDetail.js

import React, {Component} from 'react';
import {
    View,
    Text,
    StatusBar,
    ScrollView, DeviceEventEmitter,
} from 'react-native';
import {
    Provider,
    Picker,
    Button,
    List,
    Modal, Toast,
} from '@ant-design/react-native';
import {connect} from 'react-redux';
import CallPhone from '../../components/CallPhone';
import ComponentsStyles from '../../components/ComponentsStyles';

@connect(customer => ({...customer}))
class ReportCustomerDetail extends Component {
    //  报备客户详情
    constructor(props) {
        super(props);
        this.state = {
            dispatchVisible: false,
            user: '',
            USERS: [],
        };
    };

    componentDidMount() {
        this._fetchData();
    }

    _fetchData = () => {
        this.props.dispatch({
            type: 'customer/getUser',
            callback: (data) => {
                let USERS = [];
                data.map((item, index) => {
                    USERS.push({
                        value: item.value, label: item.lable,
                    });
                });
                this.setState({USERS});
            },
        });
    };
    onSignRepeat = (item) => {
        Modal.alert('提醒', '确定要标记为撞单客户吗?', [
            {
                text: '取消',
                style: 'cancel',
            },
            {
                text: '确定',
                onPress: () => this.props.dispatch({
                    type: 'customer/signRepeat',
                    payload: {id: item.id},
                    callback: () => {
                        DeviceEventEmitter.emit('backRefesh');
                        this.props.navigation.goBack();
                    },
                }),
            },
        ]);
    };

    dispatch = (item) => {
        if (!this.state.user) {
            Toast.info('请选择人员', 1);
            return;
        }

        this.props.dispatch({
            type: 'customer/dispatchUser',
            payload: {id: item.id, user: this.state.user},
            callback: () => {
                DeviceEventEmitter.emit('backRefesh');
                this.props.navigation.goBack();
            },
        });
    };

    render() {
        const item = this.props.navigation.state.params.item;
        const dispatchButtons = [
            {text: '取消', onPress: () => this.setState({dispatchVisible: false})},
            {text: '保存', onPress: () => this.dispatch(item)},
        ];
        return (
            <View style={{flex: 1, backgroundColor: '#fff'}}>
                <Provider>
                    <ScrollView style={{marginBottom: 5}}>
                        <StatusBar backgroundColor={'#fff'} barStyle='dark-content'/>
                        <List>
                            <List.Item extra={<Text style={ComponentsStyles.font15}>{item.name}</Text>} arrow="empty">
                                <Text style={ComponentsStyles.font15}>姓名</Text>
                            </List.Item>
                            <List.Item extra={<Text style={ComponentsStyles.font15}>{item.gender_text}</Text>}
                                       arrow="empty">
                                <Text style={ComponentsStyles.font15}>性别</Text>
                            </List.Item>
                            <View style={ComponentsStyles.telItemView}>
                                <Text style={ComponentsStyles.telName}>电话</Text>
                                <View style={ComponentsStyles.telView}>
                                    <Text style={[ComponentsStyles.icon, {marginLeft: 8}]}>{'\ue61a'}</Text>
                                    <Text style={ComponentsStyles.telText}
                                          onPress={() => CallPhone(item.tel, 1)}>
                                        {item.tel}
                                    </Text>
                                </View>
                            </View>

                            <List.Item extra={<Text style={ComponentsStyles.font15}>{item.village}</Text>}
                                       arrow="empty">
                                <Text style={ComponentsStyles.font15}>小区</Text>
                            </List.Item>
                            <List.Item extra={<Text style={ComponentsStyles.IDText}>{item.address}</Text>}
                                       arrow="empty">
                                <Text style={ComponentsStyles.font15}>地址</Text>
                            </List.Item>
                            <List.Item extra={<Text style={ComponentsStyles.font15}>{item.source_text}</Text>}
                                       arrow="empty">
                                <Text style={ComponentsStyles.font15}>来源</Text>
                            </List.Item>
                            <List.Item extra={<Text style={ComponentsStyles.font15}>{item.project_text}</Text>}
                                       arrow="empty">
                                <Text style={ComponentsStyles.font15}>项目</Text>
                            </List.Item>
                            <List.Item extra={<Text style={ComponentsStyles.IDText}>{item.report_status_text}</Text>}
                                       arrow="empty">
                                <Text style={ComponentsStyles.font15}>报备状态</Text>
                            </List.Item>
                            <List.Item extra={<Text style={ComponentsStyles.font15}>{item.create_time_f}</Text>}
                                       arrow="empty">
                                <Text style={ComponentsStyles.font15}>报备时间</Text>
                            </List.Item>
                            <List.Item extra={<Text style={ComponentsStyles.font15}>{item.create_user_text}</Text>}
                                       arrow="empty">
                                <Text style={ComponentsStyles.font15}>报备人</Text>
                            </List.Item>
                            <List.Item extra={<Text style={ComponentsStyles.font15}>{item.check_time_f}</Text>}
                                       arrow="empty">
                                <Text style={ComponentsStyles.font15}>审核时间</Text>
                            </List.Item>
                            <List.Item extra={<Text style={ComponentsStyles.font15}>{item.check_user_text}</Text>}
                                       arrow="empty">
                                <Text style={ComponentsStyles.font15}>审核人</Text>
                            </List.Item>

                            <List.Item extra={<Text style={ComponentsStyles.IDText}>{item.notes}</Text>}
                                       arrow="empty">
                                <Text style={ComponentsStyles.font15}>备注</Text>
                            </List.Item>
                        </List>
                    </ScrollView>
                    {item.report_status === 0 &&
                    <View style={{flexDirection: 'row', justifyContent: 'center', backgroundColor: '#fff'}}>
                        <Button
                            type="primary"
                            onPress={() => this.setState({dispatchVisible: true})}
                            style={{width: '45%', margin: 5}}
                        >
                            <Text
                                style={{color: '#fff'}}>分配</Text></Button>
                        <Button
                            type="warning"
                            onPress={() => this.onSignRepeat(item)}
                            style={{width: '45%', margin: 5}}
                        >
                            <Text
                                style={{color: '#fff'}}>标记撞单</Text></Button>

                    </View>
                    }
                    <Modal
                        transparent
                        maskClosable
                        visible={this.state.dispatchVisible}
                        footer={dispatchButtons}
                    >
                        <Picker
                            data={this.state.USERS}
                            cols={1}
                            value={this.state.user}
                            onChange={(val) => this.setState({user: val})}
                        >
                            <List.Item arrow="horizontal">
                                选择人员
                            </List.Item>
                        </Picker>
                    </Modal>
                </Provider>
            </View>
        );
    }
}

export default ReportCustomerDetail;