decorate_touch/jscore/pages/Sales/Home.js

import React, {Component} from 'react';
import {
    StyleSheet,
    View,
    Text,
    StatusBar,
    Dimensions,
    Image,
    TouchableOpacity,
    ScrollView,
    RefreshControl,
    DeviceEventEmitter,
    Platform,
} from 'react-native';
import {Provider} from '@ant-design/react-native';
import {connect} from 'react-redux';
import CheckPrem from '../../components/CheckPrem';
import IconBadge from 'react-native-icon-badge';
import {createAction} from '../../utils';
import {ComponentsStyles} from '../../components/ComponentsStyles';
import {Tooltip} from 'react-native-elements';
import SyncStorage from 'sync-storage';

const {width} = Dimensions.get('window');
const qkgl = [
    {
        name: '客户报备',
        img: require('../../../assets/images/jdws2.png'),
        navetion: 'ReceptionList',
        param: {},
        premission: 'customer.view_report_customer',
    },
    {
        name: '报备审核',
        img: require('../../../assets/images/qksh2.png'),
        navetion: 'VisitorList',
        param: {},
        badge: 'report_customer_count',
        premission: 'customer.check_report_customer',
    },
    {
        name: '客户跟踪',
        img: require('../../../assets/images/jrxg2.png'),
        navetion: 'CallList',
        param: {},
        premission: 'customer.view_new_customer',
    },
    {
        name: '跟踪审核',
        img: require('../../../assets/images/jryg2.png'),
        navetion: 'NetworkList',
        param: {},
        premission: 'customer.check_review',
        badge: 'review_count',
    },
    {
        name: '进度跟踪',
        img: require('../../../assets/images/jdgl2.png'),
        navetion: 'ReviewTodayList',
        param: {track_status: 'today', title: '今日需跟', status: ''},
        premission: 'order.view_order',
    },
    {
        name: '进度审核',
        img: require('../../../assets/images/jcgl2.png'),
        navetion: 'ReviewTodayList',
        param: {track_status: 'today_ok', title: '今日已跟', status: ''},
        badge: 'order_count',
        premission: 'order.order_process_dispatch',
    },
];

@connect(auth => ({...auth}))
class SalesHome extends Component {
    constructor(props) {
        super(props);
        this.state = {
            page: 1,
        };
    }

    static navigationOptions = {
        headerShown: false,  //隐藏顶部导航栏
    };

    componentDidMount() {
        this._entry = DeviceEventEmitter.addListener('ShowWhiteStatusBar', (param) => {
            this._setStatusBar();
        });
        this._fetchData();
    }

    _fetchData = () => {
        this.props.dispatch(createAction('auth/fetchHomeCount')());
        this.props.dispatch(createAction('auth/fetchTipsCount')());
    };

    componentWillUnmount() {
        this._entry.remove();
    }

    _setStatusBar = () => {
        StatusBar.setBarStyle('dark-content');
        if (Platform.OS === 'android') {
            StatusBar.setTranslucent(false);
            StatusBar.setBackgroundColor('#f2f2f2');
        }
    };

    onItemPrss = (navetion, param, premission) => {
        const prem = CheckPrem(navetion, premission);
        if (prem) {
            this.props.navigation.navigate(navetion, param);
        }
    };

    render() {
        const {homeCount, tipsCount, loading} = this.props.auth;
        const qinake = [
            {name: '今日新增', count: homeCount.today_report, tips: '管理范围内，新增报备且已审核的客户数量。'},
            {name: '本月新增', count: homeCount.mouth_report, tips: '管理范围内，新增报备且已审核的客户数量。'},
            {name: '总报备', count: homeCount.general_report, tips: '管理范围内，总的报备且已审核的客户数量。'},
        ];
        return (
            <View style={styles.container}>
                <StatusBar backgroundColor={'#f2f2f2'} barStyle='dark-content'/>
                <Provider>
                    <ScrollView
                        refreshControl={
                            <RefreshControl
                                refreshing={loading}
                                onRefresh={() => {
                                    this._fetchData();
                                }}
                            />}
                    >

                        <View style={styles.monthView}>
                            <View style={{flexDirection: 'row'}}>
                                {qinake.map((item, index) => (
                                    <Tooltip
                                        key={index}
                                        withOverlay={false}
                                        skipAndroidStatusBar={true}
                                        height={50}
                                        popover={<Text style={ComponentsStyles.toolTipText}>{item.tips}</Text>}>
                                        <View style={{
                                            padding: 10,
                                            width: (width - 20) / 3,
                                            alignItems: 'center',
                                        }}>
                                            <Text style={{color: '#fffe37'}}>{item.name}</Text>
                                            <Text style={styles.countText}>{item.count}</Text>
                                        </View>
                                    </Tooltip>
                                ))}
                            </View>
                        </View>
                        <View style={styles.itemView}>
                            <View style={[styles.titleView, {flexDirection: 'row'}]}>
                                <Text style={styles.titleText}>客户服务管理</Text>
                            </View>
                            <View style={styles.fixBody}>
                                {qkgl.map((item, index) => (
                                    <TouchableOpacity
                                        key={index}
                                        style={styles.fixBodyItem}
                                        onPress={() => this.onItemPrss(item.navetion, item.param, item.premission)}
                                    >
                                        <IconBadge
                                            MainElement={
                                                <Image
                                                    source={item.img}
                                                    style={styles.img}/>
                                            }
                                            BadgeElement={
                                                <Text style={{
                                                    color: '#FFFFFF',
                                                    fontSize: 10,
                                                }}>{tipsCount[item.badge]}</Text>
                                            }
                                            IconBadgeStyle={
                                                {
                                                    minWidth: 8 + 6 * (tipsCount[item.badge] ? tipsCount[item.badge] : '').toString().length,
                                                    height: 15,
                                                    left: 30,
                                                    top: -2,
                                                    borderRadius: 10,
                                                    backgroundColor: '#ff3d27',
                                                }
                                            }
                                            Hidden={!tipsCount[item.badge]}
                                        />
                                        <Text style={styles.nameText}>{item.name}</Text>
                                    </TouchableOpacity>
                                ))}
                            </View>
                        </View>
                    </ScrollView>
                </Provider>
            </View>
        );
    }

}

const styles = StyleSheet.create({
    monthText: {
        color: '#fff',
        fontSize: 18,
        padding: 10,
        paddingBottom: 0,
    },
    container: {
        flex: 1,
        paddingHorizontal: 10,
        marginTop: ComponentsStyles.top_margin,
    },
    fixBody: {
        flexDirection: 'row',
        flexWrap: 'wrap',
    },
    fixBodyItem: {
        alignItems: 'center',
        margin: 2,
        // borderWidth: 1,
        padding: 3,
        width: (width - 40) / 4,

    },
    img: {
        height: 30,
        width: 30,
    },
    nameText: {
        paddingVertical: 3,
    },
    itemView: {
        marginVertical: 5,
        borderRadius: 5,
        backgroundColor: '#fff',
    },
    titleView: {
        paddingVertical: 5,
        paddingLeft: 10,
    },
    titleText: {
        color: '#333',
        fontSize: 18,
    },
    monthView: {
        marginVertical: 10,
        backgroundColor: '#0f89f7',
        borderRadius: 5,
    },
    countText: {
        color: '#fff',
        fontSize: 18,
        paddingTop: 5,
    },
    searchBarIcon: {
        fontFamily: 'iconfont',
        fontSize: 14,
        paddingHorizontal: 5,
        color: '#ababab',
    },
    searchBarInput: {
        justifyContent: 'center',
        backgroundColor: '#fff',
        borderRadius: 15,
        flexDirection: 'row',
        flex: 1,
        margin: Platform.OS === 'ios' ? 0 : 5,
        padding: Platform.OS === 'ios' ? 0 : 5,
    },
});

export default SalesHome;