autobots-lib/lib/exception.js

汽车人基础库

import React, { Component } from 'react';
import ReactNative from 'react-native';
import Icons from '../util/icons';
import Jump from './jump';

const {
  View,
  Image,
  Text,
  Dimensions,
  TouchableOpacity,
} = ReactNative;

class exception extends Component {
  constructor(props) {
    super(props);
    this.state = {
      type: 1, // 异常类型 (1:系统报错 2:无权限 3:无数据/无记录/无单据等空状态 4:无网络/加载失败/请求超时 5:找不到内容/文件 6:公众号文章下线)
      msg: '', // 文案
      contact: '', // 联系人
      showSmart: false, // 智能客服入口
      smartStyle: {},
      firstImgStyle: {},
      showBtn: false,
    }
  }
  componentDidMount() {
    const { type = 1, msg = '', contact = '', showBtn = false, showSmart = false, smartStyle = {}, firstImgStyle = {} } = this.props;
    this.setState({
      type,
      msg,
      contact,
      showSmart,
      smartStyle,
      showBtn,
      firstImgStyle,
    })
  }
  render() {
    let imgLoadStyle = null;
    switch (this.state.type) {
      case 1:
        imgLoadStyle = Icons.type14;
        break;
      case 2:
        imgLoadStyle = Icons.type2;
        break;
      case 3:
        imgLoadStyle = Icons.type356;
        break;
      case 4:
        imgLoadStyle = Icons.type14;
        break;
      case 5:
        imgLoadStyle = Icons.type356;
        break;
      case 6:
        imgLoadStyle = Icons.type356;
        break;
      default:
        break;
    }
    return (
      <React.Fragment>
        <View style={{
          flexDirection: 'column',
          alignItems: 'center',
        }}>
          <Image
            style={{
              width: 160,
              height: 112,
              marginTop: 110,
              ...this.state.firstImgStyle,
            }}
            source={imgLoadStyle}
          />
          <Text style={{
            color: '#666666',
            fontSize: 14,
            marginTop: 20,
          }}>
            {this.state.msg}
          </Text>
          {
            !!this.state.contact &&
            <Text style={{
              color: '#666666',
              fontSize: 14,
              marginTop: 5,
            }}>
              {`联系人：${this.state.contact}`}
            </Text>
          }
          {
            ((this.state.type === 2 || this.state.type === 4) && !!this.state.showBtn) &&
            <TouchableOpacity
              style={{
                justifyContent: 'center',
                alignItems: 'center',
                width: 140,
                height: 48,
                backgroundColor: '#3773FF',
                borderRadius: 4,
                marginTop: 25,
              }}
              onPress={() => {
                this.props.btnHandler();
              }}
            >
              <Text
                style={{
                  color: '#FFFFFF',
                  fontSize: 16,
                }}>
                {`${this.state.type === 2 ? '开通权限' : '重新加载'}`}
              </Text>
            </TouchableOpacity>
          }
          {
            !!this.state.showSmart &&
            <View style={{
              marginTop: 180,
              height: 50,
              flexDirection: 'column',
              alignItems: 'center',
              ...this.state.smartStyle,
            }}>
              <Image
                style={{
                  width: 22,
                  height: 22,
                  marginBottom: 5,
                }}
                source={require('../img/robot_new.png')} />
              <TouchableOpacity
                onPress={() => {
                  Jump.Open('INTELLIGENT_SERVICE', 0, null, 1, null)
                }}>
                <Text
                  style={{
                    color: '#000000',
                    fontSize: 12,
                    lineHeight: 20,
                  }}>
                  {`联系智能客服小Q，获得更多解答 >`}
                </Text>
              </TouchableOpacity>
            </View>
          }
        </View>
      </React.Fragment>
    )
  }
}
export default exception;