生成二维码增加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,6 +39,8 @@ export default function Render(props) {
                 </div> : null}
             </div>
 
+            {mode === 'default' ?
+            <>
                     {V}
                     {tips}
                     {<Space className={`${prefixCls}-qrCodeBox_actions`}>
@@ -70,5 +70,8 @@ export default function Render(props) {
                                     <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,6 +112,9 @@ export default function Render(
                 </div> : null}
             </div>
 
+            {
+                mode === 'default' ?
+                <>
                     {V}
                     {tips}
                     {
@@ -160,6 +163,10 @@ export default function Render(
                             )}
                         </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}
             />
         );
     }