occ-mobile/app/containers/order/orderamanage/OrderPay.js

import React, { Component } from 'react'
import {
  StyleSheet,
  View,
  Image,
  Dimensions,
  Text,
  TouchableOpacity,
  FlatList,
  PixelRatio,
  ActivityIndicator,
  ImageBackground,
} from 'react-native'
import { connect } from 'react-redux'
import ImgAliPay from '../../../static/images/order-AliPay.png'
import ImgWechatPay from '../../../static/images/order-WechatPay.png'
import ImgChanPay from '../../../static/images/order-ChanPay.png'
import PayBacg from '../../../static/images/Pay-bacg.png'
import PayLogo from '../../../static/images/Pay-Logo.png'
import { HeaderView } from '../../common/HeaderView'
import Checkbox from '../../../components/checkbox'
import * as authService from '../../../services/auth'
import { ScaleUtil, ReturnDate } from '../../../utils/utils'
import { NavigationActions, createAction } from '../../../utils'
import { _AliPay } from '../../../utils/payUtil'
import Toast from 'react-native-root-toast'

const { height, width } = Dimensions.get('window')

@connect(({ rechargeModels, router }) => ({ ...rechargeModels, ...router }))
class OrderPay extends Component {
  constructor(props) {
    super(props)
    /**
     * payChecked :0  支付宝支付
     * payChecked :1  微信支付
     * payChecked :2  畅捷支付
     */
    this.state = {
      payChecked: 0,
      submitLoading: false,
      // 支付等待状态
      payingState: false,
      alertState: false,
      totalAmount: props.navigation.state.params.totalAmount,
      submitData: props.navigation.state.params.submitData,
      comeFrom: props.navigation.state.params.comeFrom
        ? props.navigation.state.params.comeFrom
        : 'order',
    }
  }

  componentDidMount() {
    this.props.dispatch(createAction('rechargeModels/PaywaysSagas')())
  }

  paymentList(data, flag) {
    return (
      <TouchableOpacity
        onPress={() => this.setState({ payChecked: data.key })}
        style={{
          paddingTop: 10,
          paddingBottom: 10,
          flexDirection: 'row',
          justifyContent: 'space-between',
          alignItems: 'center',
          borderBottomColor: '#EEE',
          backgroundColor: '#FFF',
          paddingHorizontal: 10,
          borderBottomWidth: 1 / PixelRatio.get(),
        }}
      >
        <View style={{ flexDirection: 'row' }}>
          <Image
            resizeMode="contain"
            source={data.Img}
            style={{ width: 26, height: 26, marginRight: 10, borderRadius: 6 }}
          />
          <Text style={[styles.textFont14, { alignSelf: 'center' }]}>
            {data && data.name}
          </Text>
        </View>
        <Checkbox
          checkBoxColor={'#CCC'}
          checked={this.state.payChecked == data.key}
          size={28}
          onChange={bool => this.setState({ payChecked: data.key })}
        />
      </TouchableOpacity>
    )
  }

  //创建支付单
  async _createPayBill(payWay) {
    const searchInfo = { ...this.state.submitData, paymentModeId: payWay.code }
    this.props
      .dispatch(
        createAction('rechargeModels/submitPayBill')({
          searchInfo: searchInfo,
        })
      )
      .finally(() => {
        if (
          this.props.payBillData &&
          (this.props.payBillData.paymentAmount ||
            this.props.payBillData.paybillCode)
        ) {
          switch (payWay.name) {
            // 支付宝
            case '支付宝':
              _AliPay(
                this.props.payBillData,
                // 成功后操作
                () => {
                  this.setState({ payingState: false })
                  const routers = this.props.routes[0].routes
                  routers.forEach(element => {
                    if (element.routeName == 'RechargeAdd') {
                      this.props.navigation.goBack(element.key)
                    }
                  })
                  this.props.navigation.state.params.callBack()
                },
                // 验签失败操作
                () => this.setState({ payingState: false }),
                // 取消支付
                () => this.setState({ payingState: false })
              )
              break
            // 微信
            case '微信':
              this.toast = Toast.show('微信支付正在开发中', {
                position: toastHeight,
              })
              // _WechatPay();
              break
            // // 畅捷支付
            case '畅捷支付':
              this.toast = Toast.show('畅捷支付正在开发中', {
                position: toastHeight,
              })
              break
          }
        } else {
          this.toast = Toast.show('生成支付单报错', {
            position: toastHeight,
          })
        }
      })
      .catch(error => {
        this.setState({ payingState: false })
        this.toast = Toast.show('订单转支付单时异常', {
          position: toastHeight,
        })
      })
  }

  // 随单支付支付单
  _reqCreatePayBill(payWay) {
    const searchInfo = { ...this.state.submitData, paymentModeId: payWay.code }
    this.props
      .dispatch(
        createAction('rechargeModels/reqOrderpayBillPost')({
          searchInfo: searchInfo,
        })
      )
      .finally(() => {
        if (this.toast) {
          Toast.hide(this.toast)
        }
        if (
          this.props.reqPayBillData &&
          this.props.reqPayBillData.length == 1 &&
          (this.props.reqPayBillData[0].paymentAmount ||
            this.props.reqPayBillData[0].paybillCode)
        ) {
          switch (payWay.name) {
            // 支付宝
            case '支付宝':
              _AliPay(
                this.props.reqPayBillData[0],
                // 成功后操作
                () => {
                  this.setState({ alertState: true })
                },
                // 验签失败操作
                () => this.setState({ payingState: false }),
                // 取消支付
                () => this.setState({ payingState: false })
              )
              // this._AliPay(this.props.reqPayBillData[0]);
              break
            // 微信
            case '微信':
              this.toast = Toast.show('微信支付正在开发中', {
                position: toastHeight,
              })
              // _WechatPay();
              break
            // // 畅捷支付
            case '畅捷支付':
              this.toast = Toast.show('畅捷支付正在开发中', {
                position: toastHeight,
              })
              break
          }
        } else if (
          this.props.reqPayBillData &&
          this.props.reqPayBillData.length > 1 &&
          this.props.reqPayBillData.every(reqdata => reqdata.paybillCode)
        ) {
          // 如果有多个支付单，则跳转到支付单列表
          this.props.dispatch(
            NavigationActions.navigate({
              routeName: 'RechargeHome',
              params: {
                searchPayListInfo: this.props.reqPayBillData[0].srcBillCode,
              },
            })
          )
        } else {
          this.setState({ payingState: false })
          this.toast = Toast.show('订单转支付单时异常', {
            position: toastHeight,
          })
        }
      })
  }

  render() {
    const { totalAmount, submitData } = this.state,
      { payWays } = this.props
    let reqPayBillData = ''
    if (this.props.reqPayBillData && this.props.reqPayBillData.length > 0) {
      reqPayBillData = this.props.reqPayBillData[0]
    }
    if (payWays && payWays.length > 0) {
      for (let val in payWays) {
        payWays[val].key = val
        if (payWays[val].name == '支付宝') {
          payWays[val].Img = ImgAliPay
        } else if (payWays[val].name == '微信') {
          payWays[val].Img = ImgWechatPay
        } else {
          payWays[val].Img = ImgChanPay
        }
      }
    }
    return (
      <View style={styles.container}>
        {HeaderView(this.props.dispatch, '收银台')}
        <View style={{ flex: 1 }}>
          {/* 需支付金额 */}
          <View
            style={{
              padding: 10,
              flexDirection: 'row',
              backgroundColor: '#FFF',
            }}
          >
            <Text
              style={[
                styles.text333,
                { alignSelf: 'flex-end', marginBottom: 4 },
              ]}
            >
              待支付：
            </Text>
            <Text style={styles.textred}>
              {CURRENCY.currencySign + ' '}
              {ScaleUtil(
                totalAmount,
                submitData.currencyAmountScale || CURRENCY.currencyAmountScale
              )}
            </Text>
          </View>
          <FlatList
            keyExtractor={(item, index) => index}
            data={payWays}
            extraData={this.state}
            renderItem={({ item, index }) => this.paymentList(item)}
            style={{
              marginTop: 10,
            }}
          />
        </View>
        <TouchableOpacity
          onPress={() => {
            this.setState({ payingState: true })
            if (this.state.comeFrom == 'order') {
              this._reqCreatePayBill(payWays[this.state.payChecked])
            } else if (this.state.comeFrom == 'addPayBill') {
              this._createPayBill(payWays[this.state.payChecked])
            }
          }}
          style={{
            height: 50,
            backgroundColor: '#E70013',
            justifyContent: 'center',
            alignItems: 'center',
          }}
        >
          <Text style={styles.textWhite}>
            {payWays && payWays.length > 0
              ? payWays[this.state.payChecked].name
              : ''}
            {CURRENCY.currencySign}
            {ScaleUtil(
              totalAmount,
              submitData.currencyAmountScale || CURRENCY.currencyAmountScale
            )}
          </Text>
        </TouchableOpacity>
        {/* <TouchableOpacity
          onPress={() => {
            console.log(this.props);
            // this.props.navigation.replace("orderHome");
            this.props.dispatch(
              NavigationActions.replace({
                routeName: "RechargeHome"
              })
            );
            // this.props.dispatch(
            //   NavigationActions.reset({
            //     // 重置堆栈式导航的路由顺序
            //     index: 0, // 到哪个索引的路由中去
            //     actions: [
            //       NavigationActions.navigate({ routeName: "RechargeHome" })
            //     ]
            //   })
            // );
          }}
        >
          <Text>aaa</Text>
        </TouchableOpacity> */}
        {this.state.payingState ? (
          <View
            style={{
              height: height + 200,
              width: width,
              backgroundColor: '#000',
              position: 'absolute',
              opacity: 0.5,
              alignSelf: 'center',
              justifyContent: 'center',
            }}
          >
            <ActivityIndicator />
          </View>
        ) : null}
        {this.state.alertState ? (
          <ImageBackground
            source={PayBacg}
            style={{
              position: 'absolute',
              height: 243,
              width: width * 0.95,
              top: height * 0.35,
              alignSelf: 'center',
              paddingTop: 15,
            }}
          >
            <Image
              source={PayLogo}
              style={{ width: 50, height: 50, alignSelf: 'center' }}
            />
            <View
              style={{
                flex: 1,
                backgroundColor: '#FFF',
                paddingTop: 3,
                paddingHorizontal: 10,
              }}
            >
              <Text
                style={{
                  alignSelf: 'center',
                  fontSize: 16,
                  letterSpacing: 1.14,
                  lineHeight: 22,
                  color: '#333',
                }}
              >
                支付成功
              </Text>
              <Text
                style={{
                  alignSelf: 'center',
                  fontSize: 24,
                  lineHeight: 24,
                  color: '#333',
                  marginTop: 3,
                }}
              >
                {CURRENCY.currencySign}
                {' ' + ScaleUtil(totalAmount, CURRENCY.currencyAmountScale)}
              </Text>
              <View
                style={{
                  flexDirection: 'row',
                  justifyContent: 'space-between',
                  marginTop: 10,
                }}
              >
                <Text
                  style={{
                    fontSize: 12,
                    lineHeight: 20,
                    color: '#999',
                  }}
                >
                  支付时间
                </Text>
                <Text
                  style={{
                    fontSize: 12,
                    lineHeight: 20,
                    color: '#666',
                  }}
                >
                  {reqPayBillData && reqPayBillData.billDate
                    ? ReturnDate(reqPayBillData.billDate)
                    : ''}
                </Text>
              </View>
              <View
                style={{
                  flexDirection: 'row',
                  justifyContent: 'space-between',
                }}
              >
                <Text
                  style={{
                    fontSize: 12,
                    lineHeight: 20,
                    color: '#999',
                  }}
                >
                  收款方
                </Text>
                <Text
                  style={{
                    fontSize: 12,
                    lineHeight: 20,
                    color: '#666',
                  }}
                >
                  {reqPayBillData && reqPayBillData.payeeName
                    ? reqPayBillData.payeeName
                    : ''}
                </Text>
              </View>
            </View>
            <View
              style={{
                height: 58,
                borderTopColor: '#EEE',
                borderTopWidth: 1 / PixelRatio.get(),
                justifyContent: 'center',
              }}
            >
              <TouchableOpacity
                onPress={() => {
                  // 返回OrderHome
                  this.props.dispatch(
                    NavigationActions.navigate({
                      routeName: 'OrderHome',
                      action: NavigationActions.navigate({
                        routeName: 'OrderHome',
                      }),
                    })
                  )
                }}
                style={{
                  alignSelf: 'center',
                  backgroundColor: '#E70013',
                  paddingHorizontal: 40,
                  paddingVertical: 5,
                  borderRadius: 30,
                }}
              >
                <Text style={{ fontSize: 14, color: '#FFF', lineHeight: 17 }}>
                  知道了
                </Text>
              </TouchableOpacity>
            </View>
          </ImageBackground>
        ) : null}
      </View>
    )
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
  },
  text333: {
    fontSize: 12,
    letterSpacing: 0.17,
    color: '#333',
  },
  textFont14: {
    fontSize: 14,
    letterSpacing: 0.17,
    color: '#333',
  },
  text666: {
    fontSize: 13,
    letterSpacing: 0.17,
    color: '#666',
  },
  textWhite: {
    fontSize: 14,
    letterSpacing: 0.17,
    color: '#FFF',
  },
  textred: {
    fontSize: 22,
    color: '#E70013',
  },
})

export default OrderPay