pay-detail增加了对wechatpay-native的渲染处理

es/components/AbstractComponents.d.ts

@@ -20,7 +20,7 @@ declare const List: <T extends keyof EntityDict>(props: ReactComponentProps<Enti
     rowSelection?: any;
     hideHeader?: boolean | undefined;
     disableSerialNumber?: boolean | undefined;
-    size?: "small" | "middle" | "large" | undefined;
+    size?: "small" | "large" | "middle" | undefined;
     scroll?: ({
         x?: string | number | true | undefined;
         y?: string | number | undefined;
@@ -45,7 +45,7 @@ declare const ListPro: <T extends keyof EntityDict>(props: {
     tablePagination?: any;
     rowSelection?: any;
     disableSerialNumber?: boolean | undefined;
-    size?: "small" | "middle" | "large" | undefined;
+    size?: "small" | "large" | "middle" | undefined;
     scroll?: any;
     locale?: any;
 }) => React.ReactElement;
@@ -56,14 +56,14 @@ declare const Detail: <T extends keyof EntityDict>(props: ReactComponentProps<En
     data: Partial<EntityDict[T]["Schema"]>;
     title?: string | undefined;
     bordered?: boolean | undefined;
-    layout?: "vertical" | "horizontal" | undefined;
+    layout?: "horizontal" | "vertical" | undefined;
 }>) => React.ReactElement;
 declare const Upsert: <T extends keyof EntityDict>(props: ReactComponentProps<EntityDict, T, false, {
     helps: Record<string, string>;
     entity: T;
     attributes: OakAbsAttrUpsertDef<EntityDict, T, string | number>[];
     data: EntityDict[T]["Schema"];
-    layout: "vertical" | "horizontal";
+    layout: "horizontal" | "vertical";
     mode: "default" | "card";
 }>) => React.ReactElement;
 export { FilterPanel, List, ListPro, Detail, Upsert, ReactComponentProps, ColumnProps, RowWithActions, OakExtraActionProps, OakAbsAttrDef, onActionFnDef, };

es/components/pay/detail/web.pc.js

@@ -1,7 +1,10 @@
-import React from 'react';
-import { Input, Tag, Card, QRCode, Form, Descriptions, Alert, Select, Button, Modal } from 'antd';
+import React, { useEffect, useState } from 'react';
+import { Input, Tag, Card, QRCode, Form, Descriptions, Typography, Alert, Select, Button, Modal } from 'antd';
 import { CentToString } from 'oak-domain/lib/utils/money';
 import Styles from './web.pc.module.less';
+import * as dayJs from 'dayjs';
+import duration from 'dayjs/plugin/duration';
+dayJs.extend(duration);
 import { PAY_CHANNEL_OFFLINE_NAME, PAY_CHANNEL_WECHAT_APP_NAME, PAY_CHANNEL_WECHAT_H5_NAME, PAY_CHANNEL_WECHAT_JS_NAME, PAY_CHANNEL_WECHAT_MP_NAME, PAY_CHANNEL_WECHAT_NATIVE_NAME } from '../../../types/PayConfig';
 export function RenderOffline(props) {
     const { pay, t, offline, updateMeta, metaUpdatable } = props;
@@ -29,19 +32,39 @@ export function RenderOffline(props) {
             </Form>
         </>);
 }
+function Counter(props) {
+    const { deadline } = props;
+    const [counter, setCounter] = useState('');
+    const timerFn = () => {
+        const now = Date.now();
+        if (now < deadline) {
+            const duration = dayJs.duration(deadline - now);
+            setCounter(duration.format('HH:mm:ss'));
+            setTimeout(timerFn, 1000);
+        }
+    };
+    useEffect(() => {
+        timerFn();
+    }, []);
+    return (<Typography.Title level={3}>{counter}</Typography.Title>);
+}
 function RenderWechatPay(props) {
     const { pay, t } = props;
-    const { externalId, channel } = pay;
+    const { externalId, channel, timeoutAt, iState } = pay;
     switch (channel) {
         case PAY_CHANNEL_WECHAT_NATIVE_NAME: {
-            return (<>
-                    <QRCode value={externalId} size={280}/>
-                    <div className={Styles.qrCodeTips}>
-                    {process.env.NODE_ENV === 'production' ?
-                    <Alert type="info" message={t('wechat.native.tips')}/> :
-                    <Alert type="warning" message={t('wechat.native.tips2')}/>}
-                    </div>
-                </>);
+            if (iState === 'paying') {
+                return (<>
+                        <Counter deadline={timeoutAt}/>
+                        <QRCode value={externalId} size={280}/>
+                        <div className={Styles.qrCodeTips}>
+                        {process.env.NODE_ENV === 'production' ?
+                        <Alert type="info" message={t('wechat.native.tips')}/> :
+                        <Alert type="warning" message={t('wechat.native.tips2')}/>}
+                        </div>
+                    </>);
+            }
+            break;
         }
     }
     return null;

es/features/Pay.d.ts

@@ -5,5 +5,5 @@ export default class Pay extends Feature {
     private application;
     constructor(application: GeneralFeatures<EntityDict>['application']);
     getPayChannels(): string[];
-    getPayConfigs(): (import("../types/PayConfig").WechatPayConfig | import("../types/PayConfig").AccountPayConfig | import("../types/PayConfig").OfflinePayConfig)[];
+    getPayConfigs(): (import("../types/PayConfig").OfflinePayConfig | import("../types/PayConfig").WechatPayConfig | import("../types/PayConfig").AccountPayConfig)[];
 }

src/components/pay/detail/web.pc.tsx

@@ -3,7 +3,6 @@ import { Input, Space, Tag, Card, QRCode, Form, Descriptions, Typography, Alert,
 import { RowWithActions, WebComponentProps } from 'oak-frontend-base';
 import { EntityDict } from '@project/oak-app-domain';
 import { CentToString } from 'oak-domain/lib/utils/money';
-import { Detail } from '../../AbstractComponents';
 import Styles from './web.pc.module.less';
 import classNames from 'classnames';
 import * as dayJs from 'dayjs';