TaxControlApp/components/onlinePreviewPDF/preview_pdf.js

import React, {Component} from 'react';
import {
  StyleSheet,
  Dimensions,
  View,
  Text,
  SafeAreaView,
  ScrollView,
  TouchableOpacity,
  TextInput,
  Platform,
  Image,
  Alert,
} from 'react-native';
import Pdf from 'react-native-pdf';
import public_css from '../../source/css/public_css';
import {WhiteSpace, Modal, WingBlank} from '@ant-design/react-native';
import {IndividualStorageData, RetrieveData} from '../../data/storage';
import {GetNetworkUrl, RequestNetwork} from '../../data/encryption';
import {ToastShow} from '../toast/toast';
import RNFS from 'react-native-fs';
import {CleanAll} from '../abnormalMessage/abnormal_message';
import { CheckEmail, CheckPhoneNumber } from "../../source/inspect/inspect";

export default class preview_pdf extends Component {
  constructor(props) {
    super(props);
    this.state = {
      uri: this.props.route.params.url + '.pdf',
      number: this.props.route.params.number,
      cache: true,
      isShow: false,
      receiveType: 1,
      receiveAddress: '',
      receiveBack: 'rgba(42,103,254, 1)',
      receiveBackFont: '#ffffff',
      receiveBackCompany: 'rgba(42,103,254, 0.07)',
      receiveBackCompanyFont: '#2A67FE',
    };
  }

  render() {
    return (
      <SafeAreaView style={public_css.body}>
        <ScrollView>
          <Pdf
            source={{uri: this.state.uri, cache: true}}
            onLoadComplete={(numberOfPages, filePath) => {
              console.log(`number of pages: ${numberOfPages}`);
            }}
            onPageChanged={(page, numberOfPages) => {
              console.log(`current page: ${page}`);
            }}
            onError={(error) => {
              console.log(error);
            }}
            onPressLink={(uri) => {
              console.log(`Link presse: ${uri}`);
            }}
            style={styles.pdf}
          />
        </ScrollView>
        <View style={{height: 50, justifyContent: 'center'}}>
          <View style={{flexDirection: 'row'}}>
            <View
              style={{flex: 1, justifyContent: 'center', alignItems: 'center'}}>
              <TouchableOpacity
                style={{
                  alignItems: 'center',
                  justifyContent: 'center',
                  flexDirection: 'row',
                  height: 40,
                  width: 200,
                  borderRadius: 8,
                  borderColor: '#2A67FE',
                  borderWidth: 1,
                }}
                onPress={() => {
                  this.setState({
                    isShow: true,
                  });
                }}>
                <Image
                  source={require('../../source/img/push.png')}
                  style={{height: 22, width: 22, marginRight: 5}}
                />
                <Text style={{color: '#2A67FE'}}>再次推送</Text>
              </TouchableOpacity>
            </View>
            <View
              style={{flex: 1, justifyContent: 'center', alignItems: 'center'}}>
              <TouchableOpacity
                style={{
                  alignItems: 'center',
                  justifyContent: 'center',
                  flexDirection: 'row',
                  height: 40,
                  width: 200,
                  backgroundColor: '#2A67FE',
                  borderRadius: 8,
                }}
                onPress={() => {
                  this.downloadFile();
                }}>
                <Image
                  source={require('../../source/img/dowload.png')}
                  style={{height: 22, width: 22, marginRight: 5}}
                />
                <Text style={{color: '#FFFFFF'}}>发票下载</Text>
              </TouchableOpacity>
            </View>
          </View>
        </View>
        <Modal
          popup
          visible={this.state.isShow}
          animationType="slide-up"
          onClose={this.getModalHide}
          maskClosable>
          <View style={{paddingVertical: 20, paddingHorizontal: 20}}>
            <WingBlank>
              <View
                style={{
                  flexDirection: 'row',
                  justifyContent: 'flex-start',
                  borderBottomWidth: 1,
                  borderColor: 'rgb(208,208,208)',
                }}>
                <View>
                  <TouchableOpacity
                    onPress={() => {
                      this.getReceive(1);
                    }}
                    style={{
                      alignItems: 'center',
                      justifyContent: 'center',
                      backgroundColor: this.state.receiveBack,
                      width: 90,
                      height: 40,
                      borderRadius: 39,
                      margin: 10,
                    }}>
                    <Text
                      style={{
                        color: this.state.receiveBackFont,
                        fontWeight: 'bold',
                        fontSize: 16,
                      }}>
                      邮箱
                    </Text>
                  </TouchableOpacity>
                </View>
                <View>
                  <TouchableOpacity
                    onPress={() => {
                      this.getReceive(2);
                    }}
                    style={{
                      alignItems: 'center',
                      justifyContent: 'center',
                      backgroundColor: this.state.receiveBackCompany,
                      width: 90,
                      height: 40,
                      borderRadius: 39,
                      margin: 10,
                    }}>
                    <Text
                      style={{
                        color: this.state.receiveBackCompanyFont,
                        fontWeight: 'bold',
                        fontSize: 16,
                      }}>
                      短信
                    </Text>
                  </TouchableOpacity>
                </View>
              </View>
            </WingBlank>
            <WingBlank>
              {this.state.receiveType === 1 ? (
                <View
                  style={[
                    public_css.view,
                    public_css.lineTopBottom,
                    {alignItems: 'center'},
                  ]}>
                  <View style={{flexDirection: 'row', alignItems: 'center'}}>
                    <Text style={{color: 'red', marginRight: 5}}>*</Text>
                    <Text style={{fontSize: 16}}>邮箱：</Text>
                  </View>
                  <TextInput
                    style={public_css.textInputStyle}
                    placeholder="请输入邮箱"
                    clearButtonMode="while-editing"
                    secureTextEntry={false}
                    value={this.state.receiveAddress}
                    onChangeText={(text) => {
                      this.setState({
                        receiveAddress: text,
                      });
                    }}
                  />
                </View>
              ) : (
                <View
                  style={[
                    public_css.view,
                    public_css.lineTopBottom,
                    {alignItems: 'center'},
                  ]}>
                  <View style={{flexDirection: 'row', alignItems: 'center'}}>
                    <Text style={{color: 'red', marginRight: 5}}>*</Text>
                    <Text style={{fontSize: 16}}>手机号：</Text>
                  </View>
                  <TextInput
                    style={public_css.textInputStyle}
                    placeholder="请输入手机号码"
                    clearButtonMode="while-editing"
                    secureTextEntry={false}
                    value={this.state.receiveAddress}
                    onChangeText={(text) => {
                      this.setState({
                        receiveAddress: text,
                      });
                    }}
                  />
                </View>
              )}
            </WingBlank>
            <View
              style={{
                flex: 1,
                justifyContent: 'center',
                alignItems: 'center',
                marginTop: 10,
              }}>
              <TouchableOpacity
                style={{
                  alignItems: 'center',
                  justifyContent: 'center',
                  flexDirection: 'row',
                  height: 40,
                  width: 200,
                  borderWidth: 1,
                  borderColor: '#2A67FE',
                  borderRadius: 8,
                }}
                onPress={() => {
                  this.invoicePush();
                }}>
                <Image
                  source={require('../../source/img/push.png')}
                  style={{height: 22, width: 22, marginRight: 5}}
                />
                <Text style={{color: '#2A67FE'}}>推送</Text>
              </TouchableOpacity>
            </View>
          </View>
          {/*<Button type="primary" onPress={this.onClose2}>*/}
          {/*  close modal*/}
          {/*</Button>*/}
        </Modal>
      </SafeAreaView>
    );
  }

  componentDidMount() {
    this.props.navigation.setOptions({
      headerRight: () => (
        <View style={{marginRight: 20}}>
          <TouchableOpacity
            style={{
              height: 30,
              width: 70,
              justifyContent: 'center',
              alignItems: 'center',
            }}
            onPress={() => {
              this.invoiceHongChong();
            }}>
            <Text style={{color: '#FD4444'}}>发票红冲</Text>
          </TouchableOpacity>
        </View>
      ),
    });
  }

  //发票红冲
  invoiceHongChong = async () => {
    await Alert.alert(
      '发票红冲',
      '是否红冲当前发票！',
      [
        {
          text: '取消',
          onPress: () => console.log('Cancel Pressed'),
          style: 'cancel',
        },
        {
          text: '确定',
          onPress: async () => {
            let account = await RetrieveData('account');
            let token = await RetrieveData('token');
            if (token && account) {
              const url = '/sys/invoice/quickyHongchong';
              let response = await RequestNetwork(
                url,
                token,
                {
                  oriInvoiceReqFlowNo: this.state.number,
                  mobile: account,
                  reqChannel: 3,
                },
                false,
                1,
              );
              if (response) {
                if (response.code === 0) {
                  ToastShow(1, '红冲成功！');
                } else {
                  ToastShow(1, response.msg);
                }
              }
            }
          },
        },
      ],
      {cancelable: false},
    );
  };

  //获取接收方式类型
  getReceive = (type) => {
    if (type === 1) {
      this.setState({
        receiveType: type,
        receiveBack: 'rgba(42,103,254, 1)',
        receiveBackFont: '#ffffff',
        receiveBackCompany: 'rgba(42,103,254, 0.07)',
        receiveBackCompanyFont: '#2A67FE',
        receiveAddress: '',
      });
    } else {
      this.setState({
        receiveType: type,
        receiveBack: 'rgba(42,103,254, 0.07)',
        receiveBackFont: '#2A67FE',
        receiveBackCompany: 'rgba(42,103,254, 1)',
        receiveBackCompanyFont: '#ffffff',
        receiveAddress: '',
      });
    }
  };

  // 发票信息再次推送
  invoicePush = async () => {
    if (this.state.receiveType === 1) {
      if (this.state.receiveAddress === '') {
        ToastShow(3, '邮箱信息不能为空!');
        return;
      } else {
        let {status, msg} = CheckEmail(`${this.state.receiveAddress}`);
        if (!status) {
          ToastShow(1, msg);
          return;
        }
      }
    } else {
      if (this.state.receiveAddress === '') {
        ToastShow(3, '手机号码信息不能为空!');
        return;
      } else {
        let {status, msg} = CheckPhoneNumber(`${this.state.receiveAddress}`);
        if (!status) {
          ToastShow(1, msg);
          return;
        }
      }
    }
    let account = await RetrieveData('account');
    let token = await RetrieveData('token');
    if (token && account) {
      const url = '/sys/invoice/delivery';
      let response = await RequestNetwork(
        url,
        token,
        {
          invoiceReqFlowNo: this.state.number,
          interactType: this.state.receiveType,
          interactTypeDetail: this.state.receiveAddress,
          reqChannel: 3,
        },
        false,
        1,
      );
      if (response) {
        if (response.code === 0) {
          this.setState({
            isShow: false,
          });
          this.getReceive(1);
          ToastShow(1, '推送成功！');
        } else {
          ToastShow(1, response.msg);
        }
      }
    }
  };

  // modal隐藏
  getModalHide = () => {
    this.setState({
      isShow: false,
    });
  };

  // 发票文件下载
  downloadFile = () => {
    let name = this.state.uri.split('/');
    let fileName = name[name.length - 1];
    let dirs =
      Platform.OS === 'ios'
        ? RNFS.LibraryDirectoryPath
        : RNFS.ExternalDirectoryPath; //外部文件，
    dirs = dirs + '/' + fileName;
    let DownloadFileOptions = {
      fromUrl: this.state.uri, // URL to download file from
      toFile: dirs, // Local filesystem path to save the file to
    };
    let result = RNFS.downloadFile(DownloadFileOptions);
    result.promise.then((res) => {
      if (res.statusCode === 200) {
        Alert.alert(
          '下载成功',
          '发票下载成功，保存地址为' + dirs,
          [
            {
              text: '取消',
              onPress: () => console.log('Cancel Pressed'),
              style: 'cancel',
            },
            {
              text: '确定',
              onPress: async () => {
                console.log('OK Pressed');
              },
            },
          ],
          {cancelable: false},
        );
      }
    });
  };
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'flex-start',
    alignItems: 'center',
    marginTop: 25,
  },
  pdf: {
    flex: 1,
    width: Dimensions.get('window').width,
    height: Dimensions.get('window').height,
  },
});