添加app拉起支付页

src/api/account.ts

-import { ResponseDataEntity, baseFetch, customerFetch } from './index';
+import { ResponseDataEntity, baseFetch, customerFetch } from "./index";
 
 export type PayConfigParams = {
   areaId: number;
@@ -28,14 +28,14 @@ type PayConfigResponse = {
 };
 
 export const fetchPayConfig = (
-  params: PayConfigParams,
+  params: PayConfigParams
 ): Promise<ResponseDataEntity<PayConfigResponse>> =>
   baseFetch({
-    url: '/dcxy/api/paymentAndActiveConf/getRechargeConf',
-    data: params,
+    url: "/dcxy/api/paymentAndActiveConf/getRechargeConf",
+    data: params
   });
 
-type RechargeOrderParams = {
+export type RechargeOrderParams = {
   customerId: number;
   id: number;
   isFirstRecharge: number;
@@ -43,7 +43,7 @@ type RechargeOrderParams = {
 };
 
 export const rechargeOrder = (
-  params: RechargeOrderParams,
+  params: RechargeOrderParams
 ): Promise<{
   canCall: number;
   code: number;
@@ -52,9 +52,25 @@ export const rechargeOrder = (
   payStr: string;
 }> =>
   customerFetch({
-    url: '/dcxy/app/rechargeOrder/rechargeOrder/smallProPay',
-    method: 'POST',
-    data: { ...params, appId: 'wxf2cac8f84183c8fc' },
+    url: "/dcxy/app/rechargeOrder/rechargeOrder/smallProPay",
+    method: "POST",
+    data: { ...params, appId: "wxf2cac8f84183c8fc" }
+  });
+
+export const rechargeFromAppOrder = (
+  params: RechargeOrderParams & { token: string; clientIp: string }
+): Promise<{
+  canCall: number;
+  code: number;
+  msg: string;
+  outTradeNo: string;
+  payStr: string;
+}> =>
+  customerFetch({
+    url: "/dcxy/app/rechargeOrder/rechargeOrder/smallProPay",
+    method: "POST",
+    header: { token: params.token },
+    data: { ...params, appId: "wxf2cac8f84183c8fc" }
   });
 
 type CreditInfo = {
@@ -68,18 +84,16 @@ export const fetchCreditDeposites = (params: {
   areaId: number;
 }): Promise<ResponseDataEntity<CreditInfo>> =>
   baseFetch({
-    url: '/dcxy/api/creditDeposits',
-    data: params,
+    url: "/dcxy/api/creditDeposits",
+    data: params
   });
 
 export const fetchOperationMode = (params: {
   areaId: number;
-}): Promise<
-  ResponseDataEntity<{
-    mode: string;
-  }>
-> =>
+}): Promise<ResponseDataEntity<{
+  mode: string;
+}>> =>
   baseFetch({
-    url: '/dcxy/api/operationModeConf',
-    data: params,
+    url: "/dcxy/api/operationModeConf",
+    data: params
   });

src/api/index.ts

-import Taro, { request } from '@tarojs/taro';
-import store from '../store/index';
+import Taro, { request } from "@tarojs/taro";
+import store from "../store/index";
 import {
   BASE_SERVER_URL,
   CUSTOMER_SERVER_URL,
@@ -10,8 +10,8 @@ import {
   SMPRO_URL,
   GX_URL,
   APP_HOME_URL,
-  WSAHING_MACHINE_URL,
-} from '../constants/index';
+  WSAHING_MACHINE_URL
+} from "../constants/index";
 
 export type ResponseDataEntity<T> = {
   code: number;
@@ -33,12 +33,14 @@ const createFetch = (basePath: string) => {
       header: token
         ? {
             token: token,
-            reqSource: 'wxmini',
+            reqSource: "wxmini",
+            ...entity.header
           }
         : {
-            reqSource: 'wxmini',
+            reqSource: "wxmini",
+            ...entity.header
           },
-      url: basePath + entity.url,
+      url: basePath + entity.url
     }).then(
       ({ data }: ResponseEntity): ResponseDataEntity<any> => {
         if (data.code === SuccessCode) {
@@ -46,16 +48,16 @@ const createFetch = (basePath: string) => {
         }
         if (data.code === LogoutCode) {
           Taro.reLaunch({
-            url: '/pages/Login/Login',
+            url: "/pages/Login/Login"
           });
           throw data;
         }
         Taro.showToast({
-          title: data.msg || '网络错误',
-          icon: 'none',
+          title: data.msg || "网络错误",
+          icon: "none"
         });
         throw data;
-      },
+      }
     );
   };
 };

src/app.tsx

@@ -45,6 +45,7 @@ class App extends Component {
       'pages/WashingMachine/WasherStart',
       'pages/WashingMachine/AppointmentPay',
       'pages/stringPay/stringPay',
+      'pages/AppPay/AppPay',
     ],
     window: {
       backgroundTextStyle: 'light',

src/pages/AppPay/AppPay.scss

+.AppPay{
+
+}

src/pages/AppPay/AppPay.tsx

+import "./AppPay.scss";
+import Taro, { Component, useState, useCallback } from "@tarojs/taro";
+import { View, Button } from "@tarojs/components";
+import { rechargeFromAppOrder } from "@/api/account";
+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 AppBackButton from "../../components/AppBackButton/AppBackButton";
+
+class AppPay extends Component {
+  constructor(props) {
+    super(props);
+    this.state = {
+      showBack: false,
+      showError: false,
+      errorMsg: ""
+    };
+  }
+
+  componentWillMount() {
+    console.log("AppPayPathParams: ", this.$router.params);
+    const pathParams = this.$router.params;
+    const { clientIp, id, isFirstRecharge, customerId, token } = pathParams;
+    let entity = {
+      token,
+      clientIp,
+      id: Number(id),
+      isFirstRecharge: Number(isFirstRecharge),
+      customerId: Number(customerId),
+      rechargeType: "10"
+    };
+    // wx.showModal({
+    //   content: JSON.stringify(entity)
+    // });
+    rechargeFromAppOrder(entity)
+      .then(res => {
+        const { payStr } = res;
+        console.log(res);
+        if (payStr) {
+          const payData = JSON.parse(payStr);
+          console.log(payData);
+          Taro.requestPayment({
+            timeStamp: payData.timeStamp.toString(),
+            nonceStr: payData.nonceStr,
+            package: payData.package,
+            signType: payData.signType,
+            paySign: payData.paySign
+          })
+            .then(res => {
+              console.log(res);
+              Taro.showToast({
+                title: "支付成功！",
+                icon: "success",
+                mask: true
+              });
+              this.setState({
+                showBack: true,
+                errorMsg: JSON.stringify({ code: 1, msg: res.errMsg })
+              });
+            })
+            .catch(err => {
+              Taro.showToast({
+                title: err.msg || "发起支付失败",
+                icon: "none"
+              });
+              this.setState({
+                showError: true,
+                errorMsg: JSON.stringify({ code: 0, msg: err.errMsg })
+              });
+            });
+        }
+      })
+      .catch(err => {
+        Taro.showToast({
+          title: err.msg || "呼起失败！",
+          icon: "none"
+        });
+        this.setState({
+          showError: true,
+          errorMsg: JSON.stringify({ code: 0, msg: err.msg })
+        });
+      });
+  }
+
+  goBackAppError() {
+    Taro.showModal({
+      title: "提示",
+      content: "呼起APP失败,请手动回到APP"
+    });
+  }
+
+  render() {
+    const { showBack, showError, errorMsg } = this.state;
+
+    return (
+      <View className="AppPay">
+        {showBack && (
+          <View className="AppPay-info">
+            支付成功
+            <Button
+              className="AppBackButton"
+              open-type="launchApp"
+              app-parameter={errorMsg}
+              onError={this.goBackAppError}
+            >
+              返回App
+            </Button>
+          </View>
+        )}
+        {showError && (
+          <View className="AppPay-info">
+            支付失败
+            <Button
+              className="AppBackButton"
+              open-type="launchApp"
+              app-parameter={errorMsg}
+              onError={this.goBackAppError}
+            >
+              返回App
+            </Button>
+          </View>
+        )}
+      </View>
+    );
+  }
+}
+export default AppPay;