|
@@ -0,0 +1,304 @@
|
|
|
|
+import React, {Component} from 'react';
|
|
|
|
+import {
|
|
|
|
+ View,
|
|
|
|
+ Text,
|
|
|
|
+ StyleSheet,
|
|
|
|
+ ScrollView,
|
|
|
|
+ Dimensions, DeviceEventEmitter,
|
|
|
|
+} from 'react-native';
|
|
|
|
+import {Tabs, Provider, Button, List,} from '@ant-design/react-native';
|
|
|
|
+import {createAction} from '../../utils';
|
|
|
|
+import {connect} from 'react-redux';
|
|
|
|
+import CallPhone from '../../components/CallPhone';
|
|
|
|
+import ComponentsStyles from '../../components/ComponentsStyles';
|
|
|
|
+import RefreshFlatList from 'react-native-refresh-flatlist';
|
|
|
|
+const tabs = [
|
|
|
|
+ {title: '基本信息', id: 1},
|
|
|
|
+ {title: '进度明细', id: 2},
|
|
|
|
+];
|
|
|
|
+const {width} = Dimensions.get('window');
|
|
|
|
+
|
|
|
|
+@connect(customer => ({...customer}))
|
|
|
|
+class ProcessDetail extends Component {
|
|
|
|
+ // 潜客跟踪
|
|
|
|
+ constructor(props) {
|
|
|
|
+ super(props);
|
|
|
|
+ this.state = {
|
|
|
|
+ page: 1,
|
|
|
|
+ rows: 10,
|
|
|
|
+ order_id: this.props.navigation.state.params.order_id,
|
|
|
|
+ source: this.props.navigation.state.params.source,
|
|
|
|
+ };
|
|
|
|
+ };
|
|
|
|
+
|
|
|
|
+ componentDidMount() {
|
|
|
|
+ this._fetchProcessReoprt();
|
|
|
|
+ this._fetchData();
|
|
|
|
+ this.refeshReport = DeviceEventEmitter.addListener('refeshReport', (param) => {
|
|
|
|
+ this._fetchProcessReoprt(1);
|
|
|
|
+ });
|
|
|
|
+ this.refeshProcessDetail = DeviceEventEmitter.addListener('refeshProcessDetail', (param) => {
|
|
|
|
+ this._fetchData();
|
|
|
|
+ });
|
|
|
|
+ }
|
|
|
|
+
|
|
|
|
+ componentWillUnmount() {
|
|
|
|
+ this.refeshReport.remove();
|
|
|
|
+ this.refeshProcessDetail.remove();
|
|
|
|
+ }
|
|
|
|
+
|
|
|
|
+ _fetchData = () => {
|
|
|
|
+ this.props.dispatch({
|
|
|
|
+ type: 'customer/fetchProcessDetail',
|
|
|
|
+ payload: {id: this.state.order_id},
|
|
|
|
+ });
|
|
|
|
+ };
|
|
|
|
+ _fetchMore = () => {
|
|
|
|
+ const {page, totalRecord} = this.props.customer;
|
|
|
|
+ if (page * this.state.rows >= totalRecord) {
|
|
|
|
+ return;
|
|
|
|
+ }
|
|
|
|
+ const currentPage = page + 1;
|
|
|
|
+ this._fetchProcessReoprt(currentPage);
|
|
|
|
+ };
|
|
|
|
+
|
|
|
|
+ _keyExtractor = (item, index) => {
|
|
|
|
+ return index.toString();
|
|
|
|
+ };
|
|
|
|
+
|
|
|
|
+ _fetchProcessReoprt = (page) => {
|
|
|
|
+ if (page) {
|
|
|
|
+ this.state.page = page;
|
|
|
|
+ }
|
|
|
|
+ this.props.dispatch(createAction('customer/fetchProcessRecord')(this.state));
|
|
|
|
+ };
|
|
|
|
+
|
|
|
|
+ baseInfo = (ProcessDetailData) => {
|
|
|
|
+ return <View style={{marginTop: 5}}>
|
|
|
|
+ <List>
|
|
|
|
+ <List.Item extra={<Text style={ComponentsStyles.font15}>{ProcessDetailData.name}</Text>} arrow="empty">
|
|
|
|
+ <Text style={ComponentsStyles.font15}>单号</Text>
|
|
|
|
+ </List.Item>
|
|
|
|
+ <List.Item extra={<Text style={ComponentsStyles.font15}>{ProcessDetailData.no}</Text>} arrow="empty">
|
|
|
|
+ <Text style={ComponentsStyles.font15}>姓名</Text>
|
|
|
|
+ </List.Item>
|
|
|
|
+ <View style={styles.telItemView}>
|
|
|
|
+ <Text style={ComponentsStyles.font15}>电话</Text>
|
|
|
|
+ <View style={styles.telView}>
|
|
|
|
+ <Text style={ComponentsStyles.icon}>{'\ue61a'}</Text>
|
|
|
|
+ <Text
|
|
|
|
+ style={styles.telText}
|
|
|
|
+ onPress={() => CallPhone(ProcessDetailData.tel, 1)}>
|
|
|
|
+ {ProcessDetailData.tel}
|
|
|
|
+ </Text>
|
|
|
|
+ </View>
|
|
|
|
+ </View>
|
|
|
|
+
|
|
|
|
+ <List.Item extra={<Text style={ComponentsStyles.IDText}>{ProcessDetailData.address}</Text>}
|
|
|
|
+ wrap
|
|
|
|
+ multipleLine arrow="empty">
|
|
|
|
+ <Text style={ComponentsStyles.font15}>地址</Text>
|
|
|
|
+ </List.Item>
|
|
|
|
+
|
|
|
|
+ <List.Item extra={<Text style={ComponentsStyles.IDText}>{ProcessDetailData.village}</Text>}
|
|
|
|
+ wrap
|
|
|
|
+ multipleLine arrow="empty">
|
|
|
|
+ <Text style={ComponentsStyles.font15}>小区</Text>
|
|
|
|
+ </List.Item>
|
|
|
|
+
|
|
|
|
+ <List.Item extra={<Text style={ComponentsStyles.font15}>{ProcessDetailData.project_text}</Text>}
|
|
|
|
+ arrow="empty">
|
|
|
|
+ <Text style={ComponentsStyles.font15}>项目</Text>
|
|
|
|
+ </List.Item>
|
|
|
|
+ <List.Item extra={<Text style={ComponentsStyles.font15}>{ProcessDetailData.status_text}</Text>}
|
|
|
|
+ arrow="empty">
|
|
|
|
+ <Text style={ComponentsStyles.font15}>订单状态</Text>
|
|
|
|
+ </List.Item>
|
|
|
|
+ <List.Item extra={<Text style={ComponentsStyles.font15}>{ProcessDetailData.stage_progress_text}</Text>}
|
|
|
|
+ arrow="empty">
|
|
|
|
+ <Text style={ComponentsStyles.font15}>阶段进度</Text>
|
|
|
|
+ </List.Item>
|
|
|
|
+
|
|
|
|
+ <List.Item extra={<Text style={ComponentsStyles.font15}>{ProcessDetailData.service_user_text}</Text>}
|
|
|
|
+ arrow="empty">
|
|
|
|
+ <Text style={ComponentsStyles.font15}>当前服务人员</Text>
|
|
|
|
+ </List.Item>
|
|
|
|
+ <List.Item extra={<Text style={ComponentsStyles.font15}>{ProcessDetailData.create_time_f}</Text>}
|
|
|
|
+ arrow="empty">
|
|
|
|
+ <Text style={ComponentsStyles.font15}>下单时间</Text>
|
|
|
|
+ </List.Item>
|
|
|
|
+ </List>
|
|
|
|
+ </View>;
|
|
|
|
+ };
|
|
|
|
+
|
|
|
|
+ renderItem = (data) => {
|
|
|
|
+ const item = data.item;
|
|
|
|
+ return <View style={styles.reportMain}>
|
|
|
|
+ <View style={styles.row5}>
|
|
|
|
+ <View style={ComponentsStyles.itemView}>
|
|
|
|
+ <Text style={ComponentsStyles.icon}>{'\ue619'} <Text
|
|
|
|
+ style={ComponentsStyles.font15}>{item.user_text}</Text>
|
|
|
|
+ </Text>
|
|
|
|
+ </View>
|
|
|
|
+ <View style={ComponentsStyles.itemViewEnd}>
|
|
|
|
+ <Text style={ComponentsStyles.icon}>{'\ue6cc'}</Text>
|
|
|
|
+ <Text style={ComponentsStyles.font15}>{item.operation_time_f}</Text>
|
|
|
|
+ </View>
|
|
|
|
+ </View>
|
|
|
|
+ <View style={styles.row5}>
|
|
|
|
+ <Text style={ComponentsStyles.icon}>{'\ue6ed'} </Text>
|
|
|
|
+ <Text style={ComponentsStyles.font15}>{item.operation}</Text>
|
|
|
|
+ </View>
|
|
|
|
+ <View style={styles.row5}>
|
|
|
|
+ <Text style={ComponentsStyles.font15}>备注:</Text>
|
|
|
|
+ <Text style={ComponentsStyles.font15}>{item.notes}</Text>
|
|
|
|
+ </View>
|
|
|
|
+ </View>;
|
|
|
|
+ };
|
|
|
|
+
|
|
|
|
+ render() {
|
|
|
|
+ const {processRecordData, processRecordRState, processDetail} = this.props.customer;
|
|
|
|
+
|
|
|
|
+ return (
|
|
|
|
+ <Provider>
|
|
|
|
+ <Tabs
|
|
|
|
+ tabs={tabs}
|
|
|
|
+ initialPage={1}
|
|
|
|
+ tabBarPosition="top"
|
|
|
|
+ styles={{
|
|
|
|
+ topTabBarSplitLine: {
|
|
|
|
+ borderBottomWidth: 0,
|
|
|
|
+ },
|
|
|
|
+ }}
|
|
|
|
+ tabBarUnderlineStyle={{
|
|
|
|
+ backgroundColor: '#03C762',
|
|
|
|
+ width: 40,
|
|
|
|
+ marginLeft: (width / 2 - 38) / 2,
|
|
|
|
+ height: 3,
|
|
|
|
+ borderRadius: 2,
|
|
|
|
+ }}
|
|
|
|
+ tabBarActiveTextColor="#000"
|
|
|
|
+ >
|
|
|
|
+ {/*基本信息*/}
|
|
|
|
+ <ScrollView>
|
|
|
|
+ {this.baseInfo(processDetail)}
|
|
|
|
+ </ScrollView>
|
|
|
|
+ {/* 跟踪记录*/}
|
|
|
|
+ <View>
|
|
|
|
+ <RefreshFlatList
|
|
|
|
+ data={processRecordData}
|
|
|
|
+ renderItem={(item) => this.renderItem(item)}
|
|
|
|
+ keyExtractor={this._keyExtractor}
|
|
|
|
+ themeColor="#5eafe4"
|
|
|
|
+ refreshState={processRecordRState}
|
|
|
|
+ footerRefreshingText="正在加载"
|
|
|
|
+ footerFailureText="加载失败"
|
|
|
|
+ onHeaderRefresh={() => this._fetchProcessReoprt(1)}
|
|
|
|
+ onFooterRefresh={() => this._fetchMore()}
|
|
|
|
+ ListHeaderComponent={() => <View style={{height: 0}}/>}
|
|
|
|
+ ItemSeparatorComponent={() => <View style={{height: 0}}/>}
|
|
|
|
+ />
|
|
|
|
+ </View>
|
|
|
|
+ </Tabs>
|
|
|
|
+ {this.state.source === 1 ?
|
|
|
|
+ <Button
|
|
|
|
+ type="primary"
|
|
|
|
+ onPress={() => this.props.navigation.navigate('UpdateProcess',
|
|
|
|
+ {
|
|
|
|
+ customer: processDetail.customer,
|
|
|
|
+ })}
|
|
|
|
+ style={ComponentsStyles.button}
|
|
|
|
+ >
|
|
|
|
+ <Text
|
|
|
|
+ style={{color: '#fff'}}>更新进度</Text>
|
|
|
|
+ </Button>
|
|
|
|
+ :
|
|
|
|
+ <Button
|
|
|
|
+ type="primary"
|
|
|
|
+ onPress={() => this.props.navigation.navigate('WriteTrackReport',
|
|
|
|
+ {
|
|
|
|
+ item: 1,
|
|
|
|
+ })}
|
|
|
|
+ style={ComponentsStyles.button}
|
|
|
|
+ >
|
|
|
|
+ <Text
|
|
|
|
+ style={{color: '#fff'}}>分配</Text>
|
|
|
|
+ </Button>
|
|
|
|
+ }
|
|
|
|
+ </Provider>
|
|
|
|
+ );
|
|
|
|
+ }
|
|
|
|
+}
|
|
|
|
+
|
|
|
|
+const styles = StyleSheet.create({
|
|
|
|
+ modalText: {
|
|
|
|
+ color: '#333',
|
|
|
|
+ fontSize: 16,
|
|
|
|
+ textAlign: 'center',
|
|
|
|
+ textAlignVertical: 'center',
|
|
|
|
+ },
|
|
|
|
+ textInput: {
|
|
|
|
+ width: '80%',
|
|
|
|
+ textAlign: 'left',
|
|
|
|
+ paddingHorizontal: 10,
|
|
|
|
+ },
|
|
|
|
+ modalContainer: {
|
|
|
|
+ flexDirection: 'row',
|
|
|
|
+ paddingHorizontal: 10,
|
|
|
|
+ paddingLeft: 13,
|
|
|
|
+ borderBottomWidth: 1,
|
|
|
|
+ borderBottomColor: '#eee',
|
|
|
|
+ },
|
|
|
|
+ textStyle: {
|
|
|
|
+ fontSize: 16,
|
|
|
|
+ paddingVertical: 10,
|
|
|
|
+ },
|
|
|
|
+ telItemView: {
|
|
|
|
+ flex: 1,
|
|
|
|
+ flexDirection: 'row',
|
|
|
|
+ marginLeft: 15,
|
|
|
|
+ paddingRight: 18,
|
|
|
|
+ paddingVertical: 8,
|
|
|
|
+ borderBottomWidth: 0.5,
|
|
|
|
+ borderBottomColor: '#eaeaea',
|
|
|
|
+ },
|
|
|
|
+ telName: {
|
|
|
|
+ color: '#333',
|
|
|
|
+ fontSize: 18,
|
|
|
|
+ },
|
|
|
|
+ telView: {
|
|
|
|
+ flex: 1,
|
|
|
|
+ flexDirection: 'row',
|
|
|
|
+ justifyContent: 'flex-end',
|
|
|
|
+ alignItems: 'center',
|
|
|
|
+ },
|
|
|
|
+ telText: {
|
|
|
|
+ color: '#2b90ea',
|
|
|
|
+ fontSize: 15,
|
|
|
|
+ },
|
|
|
|
+ listStyle: {
|
|
|
|
+ // borderBottomWidth: 10,
|
|
|
|
+ borderBottomColor: '#f6f7f8',
|
|
|
|
+ },
|
|
|
|
+ reportMain: {
|
|
|
|
+ marginTop: 5,
|
|
|
|
+ backgroundColor: '#fff',
|
|
|
|
+ paddingHorizontal: 10,
|
|
|
|
+ // borderWidth:1,
|
|
|
|
+ },
|
|
|
|
+ customerText: {
|
|
|
|
+ color: '#333',
|
|
|
|
+ fontSize: 16,
|
|
|
|
+ },
|
|
|
|
+ row5: {
|
|
|
|
+ flexDirection: 'row',
|
|
|
|
+ paddingVertical: 5,
|
|
|
|
+ },
|
|
|
|
+ red5: {
|
|
|
|
+ fontSize: 15,
|
|
|
|
+ color: 'red',
|
|
|
|
+ padding: 2,
|
|
|
|
+ },
|
|
|
|
+});
|
|
|
|
+
|
|
|
|
+export default ProcessDetail;
|