改造订单支付页面

src/pages/BarCode/BarCode.tsx

@@ -193,14 +193,7 @@ class BarCode extends Component {
         {showPayOrder && (
           <View className='OrderBox'>
             <OrderTitle price={orderInfo.payableMoney} />
-            <OrderInfo
-              serviceName={orderInfo.serviceName}
-              createAt={orderInfo.createAt}
-              orderNumber={orderInfo.orderNumber}
-              areaName={orderInfo.areaName}
-              equipmentNum={orderInfo.equipmentNum}
-              equipmentPosition={orderInfo.equipmentPosition}
-            />
+            <OrderInfo orderInfo={orderInfo} />
             <OrderPayway
               payDoneCallback={this.payDoneHandle}
               userinfo={userinfo}

src/pages/Order/OrderPay/OrderPay.tsx

 import { ComponentClass } from 'react';
 import Taro, { Component, Config } from '@tarojs/taro';
-import { View, Text, Image, Button } from '@tarojs/components';
+import { View } from '@tarojs/components';
 
 import OrderTitle from '../components/OrderTitle/OrderTitle';
 import OrderInfo from '../components/OrderInfo/OrderInfo';
-import payWayWxLogo from '../../../images/order/pay_wechat_icon@2x.png';
-import payWayAimiLogo from '../../../images/order/pay_aimi_icon@2x.png';
-import payWayHairLogo from '../../../images/order/pay_chuifengdou_icon@2x.png';
-import payWayComLogo from '../../../images/order/pay_tongyongdou_icon@2x.png';
-import {
-  fetchOrderDetail,
-  fetchOrderDetailAndPay,
-  fetchDeductionInfo,
-  confirmPay,
-} from '../../../api/order';
+import { fetchOrderDetailAndPay, fetchDeductionInfo } from '../../../api/order';
 
 import './OrderPay.scss';
 import {
   ConsumeOrder,
-  PaymentAndActiveVo,
   CustomerBeanAccountVo,
   PaymentAndActiveInfo,
-  ConsumeOrderDeductionInfoVo,
 } from '../../../api/baseClass';
-import { getPayType } from '../../../utils/payType';
 import { connect } from '@tarojs/redux';
 import { UserState } from 'src/store/rootReducers/userinfo';
-import AES from 'crypto-js/aes';
-import Utf8 from 'crypto-js/enc-utf8';
-import ECBmode from 'crypto-js/mode-ecb';
-import PaddingPkcs7 from 'crypto-js/pad-pkcs7';
+import OrderPayway from '../components/OrderPayway/OrderPayway';
 
 type PageStateProps = {
   userinfo: UserState;
@@ -39,15 +24,6 @@ type PageProps = {
 };
 type PageState = {
   prePay: boolean;
-  payWay: null | {
-    activeId: number | undefined;
-    amount: number | undefined;
-    avtiveComment: string;
-    deductionValue: number | undefined;
-    isDeduction: number | undefined;
-    payType: string;
-    payVersion: string;
-  };
   accounts: CustomerBeanAccountVo[];
   orderInfo: ConsumeOrder;
   payInfos: {
@@ -81,7 +57,6 @@ class OrderPay extends Component {
     super(props);
     this.state = {
       prePay: true,
-      payWay: null,
       accounts: [],
       orderInfo: {
         actualMoney: undefined,
@@ -171,221 +146,25 @@ class OrderPay extends Component {
       });
   }
 
-  changePayState() {
-    const { payWay } = this.state;
-    if (payWay) {
-      this.setState({
-        prePay: false,
-      });
-    } else {
-      Taro.showToast({
-        title: '请选择支付方式',
-        icon: 'none',
-      });
-    }
-  }
-
-  changePayWay(payWay: PaymentAndActiveInfo) {
-    this.setState({
-      payWay: payWay,
-    });
-  }
-
-  callNativePay() {
-    const {
-      userinfo: { customerId },
-    } = this.props;
-    const { orderInfo, payWay, payInfos } = this.state;
-    confirmPay({
-      orderId: orderInfo.id,
-      payType: payWay.payType,
-      [payWay.activeId ? 'activeId' : 'notUse']: payWay.activeId,
-      returnUrl: '',
-      callType: '1',
-      paymentConfId: payInfos.paymentConfId,
-    })
-      .then(res => {
-        console.log(res);
-        const { payStr } = res;
-        const key = customerId.toString().padEnd(16, '0');
-        console.log(key);
-        const payData = JSON.parse(
-          AES.decrypt(payStr, Utf8.parse(key), {
-            mode: ECBmode,
-            padding: PaddingPkcs7,
-          }).toString(Utf8)
-        );
-        console.log(payData);
-
-        Taro.requestPayment({
-          timeStamp: payData.msg.timestamp.toString(),
-          nonceStr: payData.msg.noncestr,
-          package: payData.msg.package,
-          signType: 'MD5',
-          paySign: payData.msg.sign,
-          success(res) {
-            console.log(res);
-          },
-          fail(res) {
-            Taro.showToast({
-              title: res.msg || '发起支付失败',
-              icon: 'none',
-            });
-          },
-        });
-      })
-      .catch(err => {
-        console.log(err);
-
-        Taro.showToast({
-          title: err.msg || '发起支付失败',
-          icon: 'none',
-        });
-      });
+  payDoneHandle() {
+    Taro.navigateBack();
   }
 
   render() {
-    const {
-      prePay,
-      payWay,
-      orderInfo: {
-        payableMoney,
-        serviceName,
-        createAt,
-        orderNumber,
-        areaName,
-        equipmentNum,
-        equipmentPosition,
-      },
-      payInfos: { paymentAndActiveInfos },
-      deductionInfos: {
-        payMoney,
-        deductionType,
-        titlePerfix,
-        deductionMoney,
-        beanAccount,
-        amiAccount,
-      },
-    } = this.state;
-    const payInfoList = paymentAndActiveInfos.filter(
-      item =>
-        item.payType === '2' ||
-        item.payType === '6' ||
-        item.payType === '7' ||
-        item.payType === '8'
-    );
-    const payInfo = prePay
-      ? {}
-      : payInfoList.find(item => item.payType === payWay.payType);
+    const { userinfo } = this.props;
+    const { orderInfo, payInfos, deductionInfos } = this.state;
     return (
       <View className='OrderPay topBr'>
-        <OrderTitle price={payableMoney} />
-        <OrderInfo
-          serviceName={serviceName}
-          createAt={createAt}
-          orderNumber={orderNumber}
-          areaName={areaName}
-          equipmentNum={equipmentNum}
-          equipmentPosition={equipmentPosition}
-        />
+        <OrderTitle price={orderInfo.payableMoney} />
+        <OrderInfo orderInfo={orderInfo} />
         <View className='OrderPay-line' />
-        {prePay ? (
-          payInfoList.length ? (
-            payInfoList.map((payway, index) => (
-              <View
-                key={index}
-                className='OrderPay-payway'
-                onClick={() => this.changePayWay(payway)}
-              >
-                {payway.payType === '2' ? (
-                  <Image className='OrderPay-icon' src={payWayWxLogo} />
-                ) : payway.payType === '6' ? (
-                  <Image className='OrderPay-icon' src={payWayAimiLogo} />
-                ) : payway.payType === '7' ? (
-                  <Image className='OrderPay-icon' src={payWayHairLogo} />
-                ) : payway.payType === '8' ? (
-                  <Image className='OrderPay-icon' src={payWayComLogo} />
-                ) : null}
-                {payway.payType === '2' ? (
-                  <Text className='OrderPay-text'>
-                    {getPayType(payway.payType)}
-                  </Text>
-                ) : payway.payType === '6' ? (
-                  <Text className='OrderPay-text'>
-                    {getPayType(payway.payType)}(余额：{amiAccount.toFixed(2)})
-                  </Text>
-                ) : (
-                  <Text className='OrderPay-text'>
-                    {getPayType(payway.payType)}(余额：
-                    {beanAccount ? beanAccount.toFixed(2) : '0.00'})
-                  </Text>
-                )}
-
-                <View
-                  className={`OrderPay-check ${
-                    payWay.payType === payway.payType ? 'checked' : ''
-                  }`}
-                />
-              </View>
-            ))
-          ) : null
-        ) : (
-          <View>
-            <View className='OrderPay-payinfo'>
-              <Text>订单金额</Text>
-              <Text>{payMoney}</Text>
-            </View>
-            {deductionType === '1' ? (
-              <View>
-                <View className='OrderPay-payinfo'>
-                  <Text>
-                    {titlePerfix}豆抵扣金额（余额:{beanAccount.toFixed(2)}）
-                  </Text>
-                  <Text>{deductionMoney.toFixed(2)}</Text>
-                </View>
-                <View className='OrderPay-DeductionInfo'>
-                  豆抵扣总消费额的
-                  {payWay.deductionValue ? payWay.deductionValue * 100 : 0}
-                  %，不满0.01元，累计算1分
-                </View>
-              </View>
-            ) : deductionType === '2' ? (
-              <View>
-                <View className='OrderPay-payinfo'>
-                  <Text>通用豆抵扣金额（余额:{beanAccount.toFixed(2)}）</Text>
-                  <Text>{deductionMoney.toFixed(2)}</Text>
-                </View>
-                <View className='OrderPay-DeductionInfo'>
-                  豆抵扣总消费额的
-                  {payWay.deductionValue ? payWay.deductionValue * 100 : 0}
-                  %，不满0.01元，累计算1分
-                </View>
-              </View>
-            ) : deductionType === '3' ? (
-              <View className='OrderPay-payinfo'>
-                <Text>艾米抵扣金额（余额:{amiAccount.toFixed(2)}）</Text>
-                <Text>{deductionMoney.toFixed(2)}</Text>
-              </View>
-            ) : null}
-
-            <View className='OrderPay-payinfo'>
-              <Text>{payInfo.payTypeName}金额</Text>
-              <Text>{payMoney}</Text>
-            </View>
-          </View>
-        )}
-        {prePay ? (
-          <Button
-            className='button OrderPay-next'
-            onClick={this.changePayState}
-          >
-            下一步
-          </Button>
-        ) : (
-          <Button className='button OrderPay-next' onClick={this.callNativePay}>
-            确认支付
-          </Button>
-        )}
+        <OrderPayway
+          payDoneCallback={this.payDoneHandle}
+          userinfo={userinfo}
+          orderId={orderInfo.id}
+          payInfos={payInfos}
+          deductionInfos={deductionInfos}
+        />
       </View>
     );
   }