生成二维码增加mode参数web端调整

es/components/common/qrCode/web.d.ts

@@ -18,6 +18,7 @@ type IQrCodeProps = {
     maskColor: string;
     maskTextColor: string;
     maskText: string;
+    mode: 'default' | 'simple';
 };
 export default function Render(props: WebComponentProps<EntityDict, keyof EntityDict, false, IQrCodeProps & {
     isBase64: boolean;

es/components/common/qrCode/web.js

@@ -6,7 +6,7 @@ import './web.less';
 export default function Render(props) {
     const { data, methods } = props;
     const { t } = methods;
-    const { filename = 'qrCode.png', expiresAt, tips, onDownload, onRefresh, size = 280, url, loading = false, disableDownload = false, disabled = false, isBase64, expired, expiresAtStr, color, bgColor, maskColor, maskTextColor, maskText, } = data;
+    const { filename = 'qrCode.png', expiresAt, tips, onDownload, onRefresh, size = 280, url, loading = false, disableDownload = false, disabled = false, isBase64, expired, expiresAtStr, color, bgColor, maskColor, maskTextColor, maskText, mode, } = data;
     const prefixCls = 'oak';
     let V;
     if (expiresAtStr) {
@@ -24,12 +24,10 @@ export default function Render(props) {
         }
     }
     return (<div id="oakQrCode" className={`${prefixCls}-qrCodeBox`}>
-            <div className={`${prefixCls}-qrCodeBox_qrcode`} style={{
+            <div className={`${prefixCls}-qrCodeBox_qrcode`} style={mode === 'default' ? {
-            // width: size,
-            // height: size,
             marginBottom: 16,
             marginTop: 16,
-        }}>
+        } : {}}>
                 <Spin spinning={loading}>
                     {isBase64 ? (<img src={url} alt="qrCode" width={size} height={size}/>) : url ? (<QRCodeCanvas value={url} size={size} fgColor={color} bgColor={bgColor}/>) : null}
                 </Spin>
@@ -41,34 +39,39 @@ export default function Render(props) {
                 </div> : null}
             </div>
 
-            {V}
+            {mode === 'default' ?
-            {tips}
+            <>
-            {<Space className={`${prefixCls}-qrCodeBox_actions`}>
+                    {V}
-                    {!!url && !disableDownload && !disabled && (<Button type="text" onClick={() => {
+                    {tips}
-                    if (typeof onDownload === 'function') {
+                    {<Space className={`${prefixCls}-qrCodeBox_actions`}>
-                        onDownload(url, filename);
+                            {!!url && !disableDownload && !disabled && (<Button type="text" onClick={() => {
-                        return;
+                            if (typeof onDownload === 'function') {
-                    }
+                                onDownload(url, filename);
-                    const canvas = document
+                                return;
-                        .getElementById('oakQrCode')
+                            }
-                        ?.querySelector('canvas');
+                            const canvas = document
-                    if (canvas) {
+                                .getElementById('oakQrCode')
-                        const url = canvas.toDataURL();
+                                ?.querySelector('canvas');
-                        const a = document.createElement('a');
+                            if (canvas) {
-                        a.download = filename;
+                                const url = canvas.toDataURL();
-                        a.href = url;
+                                const a = document.createElement('a');
-                        document.body.appendChild(a);
+                                a.download = filename;
-                        a.click();
+                                a.href = url;
-                        document.body.removeChild(a);
+                                document.body.appendChild(a);
-                    }
+                                a.click();
-                }}>
+                                document.body.removeChild(a);
-                            <DownloadOutlined className={`${prefixCls}-qrCodeBox_actions_downloadIcon`}/>
+                            }
-                        </Button>)}
+                        }}>
-                    {onRefresh && (<Button type="text" onClick={() => {
+                                    <DownloadOutlined className={`${prefixCls}-qrCodeBox_actions_downloadIcon`}/>
-                    onRefresh();
+                                </Button>)}
-                }} size="small">
+                            {onRefresh && (<Button type="text" onClick={() => {
-                            <ReloadOutlined className={`${prefixCls}-qrCodeBox_actions_refreshIcon`}/>
+                            onRefresh();
-                        </Button>)}
+                        }} size="small">
-                </Space>}
+                                    <ReloadOutlined className={`${prefixCls}-qrCodeBox_actions_refreshIcon`}/>
+                                </Button>)}
+                        </Space>}
+                </>
+            : null}
+
         </div>);
 }

es/components/userEntityGrant/share/index.d.ts

@@ -7,5 +7,6 @@ declare const _default: (props: import("oak-frontend-base").ReactComponentProps<
     maskColor: string;
     maskText: string;
     maskTextColor: string;
+    mode: "default" | "simple";
 }>) => React.ReactElement;
 export default _default;

es/components/userEntityGrant/share/index.js

@@ -76,5 +76,6 @@ export default OakComponent({
         maskColor: 'rgba(255,255,255,0.96)',
         maskText: '',
         maskTextColor: 'rgba(0,0,0,0.88)',
+        mode: 'default',
     },
 });

es/components/userEntityGrant/share/index.xml

@@ -7,7 +7,9 @@
         <block wx:elif="{{url}}">
             <qrCode url="{{url}}" expiresAt="{{expiresAt}}" disableDownload="{{disableDownload}}"
                 size="{{size}}" disabled="{{disabled}}" color="{{color}}" bgColor="{{bgColor}}"
-                maskColor="{{maskColor}}" maskText="{{maskText}}" maskTextColor="{{maskTextColor}}" />
+                maskColor="{{maskColor}}" maskText="{{maskText}}" maskTextColor="{{maskTextColor}}"
+                mode="{{mode}}"
+            />
         </block>
         <block wx:else>   
         </block>

es/components/userEntityGrant/share/web.d.ts

@@ -12,4 +12,5 @@ export default function Render(props: WebComponentProps<EntityDict, 'userEntityG
     maskColor: string;
     maskText: string;
     maskTextColor: string;
+    mode: 'default' | 'simple';
 }, {}>): React.JSX.Element | null;

es/components/userEntityGrant/share/web.js

@@ -2,12 +2,12 @@ import React from 'react';
 import QrCode from '../../common/qrCode';
 import { DotLoading } from 'antd-mobile';
 export default function Render(props) {
-    const { url, expiresAt, oakLoading, disableDownload, size, disabled, color, bgColor, maskColor, maskText, maskTextColor } = props.data;
+    const { url, expiresAt, oakLoading, disableDownload, size, disabled, color, bgColor, maskColor, maskText, maskTextColor, mode } = props.data;
     if (oakLoading) {
         return <DotLoading color="primary"/>;
     }
     if (url) {
-        return (<QrCode url={url} expiresAt={expiresAt} disableDownload={disableDownload} size={size} disabled={disabled} color={color} bgColor={bgColor} maskColor={maskColor} maskText={maskText} maskTextColor={maskTextColor}/>);
+        return (<QrCode url={url} expiresAt={expiresAt} disableDownload={disableDownload} size={size} disabled={disabled} color={color} bgColor={bgColor} maskColor={maskColor} maskText={maskText} maskTextColor={maskTextColor} mode={mode}/>);
     }
     return null;
 }

es/components/userEntityGrant/share/web.pc.d.ts

@@ -12,4 +12,5 @@ export default function Render(props: WebComponentProps<EntityDict, 'userEntityG
     maskColor: string;
     maskText: string;
     maskTextColor: string;
+    mode: 'default' | 'simple';
 }, {}>): React.JSX.Element | null;

es/components/userEntityGrant/share/web.pc.js

@@ -2,12 +2,12 @@ import React from 'react';
 import QrCode from '../../common/qrCode';
 import { Spin } from 'antd';
 export default function Render(props) {
-    const { url, expiresAt, oakLoading, disableDownload, size, disabled, color, bgColor, maskColor, maskText, maskTextColor } = props.data;
+    const { url, expiresAt, oakLoading, disableDownload, size, disabled, color, bgColor, maskColor, maskText, maskTextColor, mode } = props.data;
     if (oakLoading) {
         return <Spin />;
     }
     if (url) {
-        return (<QrCode url={url} expiresAt={expiresAt} disableDownload={disableDownload} size={size} disabled={disabled} color={color} bgColor={bgColor} maskColor={maskColor} maskText={maskText} maskTextColor={maskTextColor}/>);
+        return (<QrCode url={url} expiresAt={expiresAt} disableDownload={disableDownload} size={size} disabled={disabled} color={color} bgColor={bgColor} maskColor={maskColor} maskText={maskText} maskTextColor={maskTextColor} mode={mode}/>);
     }
     return null;
 }

src/components/common/qrCode/web.tsx

@@ -23,6 +23,7 @@ type IQrCodeProps = {
     maskColor: string;
     maskTextColor: string;
     maskText: string;
+    mode: 'default' | 'simple';
 };
 
 export default function Render(
@@ -60,6 +61,7 @@ export default function Render(
         maskColor,
         maskTextColor,
         maskText,
+        mode,
     } = data;
     const prefixCls = 'oak';
     let V;
@@ -85,12 +87,10 @@ export default function Render(
         <div id="oakQrCode" className={`${prefixCls}-qrCodeBox`}>
             <div
                 className={`${prefixCls}-qrCodeBox_qrcode`}
-                style={{
+                style={mode === 'default' ? {
-                    // width: size,
-                    // height: size,
                     marginBottom: 16,
                     marginTop: 16,
-                }}
+                }: {}}
             >
                 <Spin spinning={loading}>
                     {isBase64 ? (
@@ -112,54 +112,61 @@ export default function Render(
                 </div> : null}
             </div>
 
-            {V}
-            {tips}
             {
-                <Space className={`${prefixCls}-qrCodeBox_actions`}>
+                mode === 'default' ?
-                    {!!url && !disableDownload && !disabled && (
+                <>
-                        <Button
+                    {V}
-                            type="text"
+                    {tips}
-                            onClick={() => {
+                    {
-                                if (typeof onDownload === 'function') {
+                        <Space className={`${prefixCls}-qrCodeBox_actions`}>
-                                    onDownload(url, filename);
+                            {!!url && !disableDownload && !disabled && (
-                                    return;
+                                <Button
-                                }
+                                    type="text"
-                                const canvas = document
+                                    onClick={() => {
-                                    .getElementById('oakQrCode')
+                                        if (typeof onDownload === 'function') {
-                                    ?.querySelector<HTMLCanvasElement>(
+                                            onDownload(url, filename);
-                                        'canvas'
+                                            return;
-                                    );
+                                        }
-                                if (canvas) {
+                                        const canvas = document
-                                    const url = canvas.toDataURL();
+                                            .getElementById('oakQrCode')
-                                    const a = document.createElement('a');
+                                            ?.querySelector<HTMLCanvasElement>(
-                                    a.download = filename;
+                                                'canvas'
-                                    a.href = url;
+                                            );
-                                    document.body.appendChild(a);
+                                        if (canvas) {
-                                    a.click();
+                                            const url = canvas.toDataURL();
-                                    document.body.removeChild(a);
+                                            const a = document.createElement('a');
-                                }
+                                            a.download = filename;
-                            }}
+                                            a.href = url;
-                        >
+                                            document.body.appendChild(a);
-                            <DownloadOutlined
+                                            a.click();
-                                className={`${prefixCls}-qrCodeBox_actions_downloadIcon`}
+                                            document.body.removeChild(a);
-                            />
+                                        }
-                        </Button>
+                                    }}
-                    )}
+                                >
-                    {onRefresh && (
+                                    <DownloadOutlined
-                        <Button
+                                        className={`${prefixCls}-qrCodeBox_actions_downloadIcon`}
-                            type="text"
+                                    />
-                            onClick={() => {
+                                </Button>
-                                onRefresh();
+                            )}
-                            }}
+                            {onRefresh && (
-                            size="small"
+                                <Button
-                        >
+                                    type="text"
-                            <ReloadOutlined
+                                    onClick={() => {
-                                className={`${prefixCls}-qrCodeBox_actions_refreshIcon`}
+                                        onRefresh();
-                            />
+                                    }}
-                        </Button>
+                                    size="small"
-                    )}
+                                >
-                </Space>
+                                    <ReloadOutlined
+                                        className={`${prefixCls}-qrCodeBox_actions_refreshIcon`}
+                                    />
+                                </Button>
+                            )}
+                        </Space>
+                    }
+                </>
+                : null
             }
+
         </div>
     );
 }

src/components/userEntityGrant/share/index.ts

@@ -78,5 +78,6 @@ export default OakComponent({
         maskColor: 'rgba(255,255,255,0.96)',
         maskText: '',
         maskTextColor: 'rgba(0,0,0,0.88)',
+        mode: 'default' as 'default' | 'simple',
     },
 });

src/components/userEntityGrant/share/index.xml

@@ -7,7 +7,9 @@
         <block wx:elif="{{url}}">
             <qrCode url="{{url}}" expiresAt="{{expiresAt}}" disableDownload="{{disableDownload}}"
                 size="{{size}}" disabled="{{disabled}}" color="{{color}}" bgColor="{{bgColor}}"
-                maskColor="{{maskColor}}" maskText="{{maskText}}" maskTextColor="{{maskTextColor}}" />
+                maskColor="{{maskColor}}" maskText="{{maskText}}" maskTextColor="{{maskTextColor}}"
+                mode="{{mode}}"
+            />
         </block>
         <block wx:else>   
         </block>

src/components/userEntityGrant/share/web.pc.tsx

@@ -20,11 +20,12 @@ export default function Render(
             maskColor: string;
             maskText: string;
             maskTextColor: string;
+            mode: 'default' | 'simple';
         },
         {}
     >
 ) {
-    const { url, expiresAt, oakLoading, disableDownload, size, disabled, color, bgColor, maskColor, maskText, maskTextColor } = props.data;
+    const { url, expiresAt, oakLoading, disableDownload, size, disabled, color, bgColor, maskColor, maskText, maskTextColor, mode } = props.data;
     if (oakLoading) {
         return <Spin />;
     }
@@ -41,6 +42,7 @@ export default function Render(
                 maskColor={maskColor}
                 maskText={maskText}
                 maskTextColor={maskTextColor}
+                mode={mode}
             />
         );
     }

src/components/userEntityGrant/share/web.tsx

@@ -20,11 +20,12 @@ export default function Render(
             maskColor: string;
             maskText: string;
             maskTextColor: string;
+            mode: 'default' | 'simple';
         },
         {}
     >
 ) {
-    const { url, expiresAt, oakLoading, disableDownload, size, disabled, color, bgColor, maskColor, maskText, maskTextColor } = props.data;
+    const { url, expiresAt, oakLoading, disableDownload, size, disabled, color, bgColor, maskColor, maskText, maskTextColor, mode } = props.data;
     if (oakLoading) {
         return <DotLoading color="primary" />;
     }
@@ -41,6 +42,7 @@ export default function Render(
                 maskColor={maskColor}
                 maskText={maskText}
                 maskTextColor={maskTextColor}
+                mode={mode}
             />
         );
     }