Oak-Team
/
oak-general-business
9
0
Fork 0
Code Issues Pull Requests Packages Projects Releases 38 Wiki Activity

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

This commit is contained in:
wkj 2025-09-23 18:24:38 +08:00
parent 0a359eb287
commit 7463494fce
14 changed files with 116 additions and 92 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
es/components/common/qrCode/web.d.ts vendored
View File

@ -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;

71
es/components/common/qrCode/web.js
View File

@ -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={{
// width: size,
// height: size,
<div className={`${prefixCls}-qrCodeBox_qrcode`} style={mode === 'default' ? {
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}
{tips}
{<Space className={`${prefixCls}-qrCodeBox_actions`}>
{!!url && !disableDownload && !disabled && (<Button type="text" onClick={() => {
if (typeof onDownload === 'function') {
onDownload(url, filename);
return;
}
const canvas = document
.getElementById('oakQrCode')
?.querySelector('canvas');
if (canvas) {
const url = canvas.toDataURL();
const a = document.createElement('a');
a.download = filename;
a.href = url;
document.body.appendChild(a);
a.click();
document.body.removeChild(a);
}
}}>
<DownloadOutlined className={`${prefixCls}-qrCodeBox_actions_downloadIcon`}/>
</Button>)}
{onRefresh && (<Button type="text" onClick={() => {
onRefresh();
}} size="small">
<ReloadOutlined className={`${prefixCls}-qrCodeBox_actions_refreshIcon`}/>
</Button>)}
</Space>}
{mode === 'default' ?
<>
{V}
{tips}
{<Space className={`${prefixCls}-qrCodeBox_actions`}>
{!!url && !disableDownload && !disabled && (<Button type="text" onClick={() => {
if (typeof onDownload === 'function') {
onDownload(url, filename);
return;
}
const canvas = document
.getElementById('oakQrCode')
?.querySelector('canvas');
if (canvas) {
const url = canvas.toDataURL();
const a = document.createElement('a');
a.download = filename;
a.href = url;
document.body.appendChild(a);
a.click();
document.body.removeChild(a);
}
}}>
<DownloadOutlined className={`${prefixCls}-qrCodeBox_actions_downloadIcon`}/>
</Button>)}
{onRefresh && (<Button type="text" onClick={() => {
onRefresh();
}} size="small">
<ReloadOutlined className={`${prefixCls}-qrCodeBox_actions_refreshIcon`}/>
</Button>)}
</Space>}
</>
: null}
</div>);
}

1
es/components/userEntityGrant/share/index.d.ts vendored
View File

@ -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;

1
es/components/userEntityGrant/share/index.js
View File

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

4
es/components/userEntityGrant/share/index.xml
View File

@ -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>

1
es/components/userEntityGrant/share/web.d.ts vendored
View File

@ -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;

4
es/components/userEntityGrant/share/web.js
View File

@ -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;
}

1
es/components/userEntityGrant/share/web.pc.d.ts vendored
View File

@ -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;

4
es/components/userEntityGrant/share/web.pc.js
View File

@ -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;
}

107
src/components/common/qrCode/web.tsx
View File

@ -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={{
// width: size,
// height: size,
style={mode === 'default' ? {
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`}>
{!!url && !disableDownload && !disabled && (
<Button
type="text"
onClick={() => {
if (typeof onDownload === 'function') {
onDownload(url, filename);
return;
}
const canvas = document
.getElementById('oakQrCode')
?.querySelector<HTMLCanvasElement>(
'canvas'
);
if (canvas) {
const url = canvas.toDataURL();
const a = document.createElement('a');
a.download = filename;
a.href = url;
document.body.appendChild(a);
a.click();
document.body.removeChild(a);
}
}}
>
<DownloadOutlined
className={`${prefixCls}-qrCodeBox_actions_downloadIcon`}
/>
</Button>
)}
{onRefresh && (
<Button
type="text"
onClick={() => {
onRefresh();
}}
size="small"
>
<ReloadOutlined
className={`${prefixCls}-qrCodeBox_actions_refreshIcon`}
/>
</Button>
)}
</Space>
mode === 'default' ?
<>
{V}
{tips}
{
<Space className={`${prefixCls}-qrCodeBox_actions`}>
{!!url && !disableDownload && !disabled && (
<Button
type="text"
onClick={() => {
if (typeof onDownload === 'function') {
onDownload(url, filename);
return;
}
const canvas = document
.getElementById('oakQrCode')
?.querySelector<HTMLCanvasElement>(
'canvas'
);
if (canvas) {
const url = canvas.toDataURL();
const a = document.createElement('a');
a.download = filename;
a.href = url;
document.body.appendChild(a);
a.click();
document.body.removeChild(a);
}
}}
>
<DownloadOutlined
className={`${prefixCls}-qrCodeBox_actions_downloadIcon`}
/>
</Button>
)}
{onRefresh && (
<Button
type="text"
onClick={() => {
onRefresh();
}}
size="small"
>
<ReloadOutlined
className={`${prefixCls}-qrCodeBox_actions_refreshIcon`}
/>
</Button>
)}
</Space>
}
</>
: null
}
</div>
);
}

1
src/components/userEntityGrant/share/index.ts
View File

@ -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',
},
});

4
src/components/userEntityGrant/share/index.xml
View File

@ -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>

4
src/components/userEntityGrant/share/web.pc.tsx
View File

@ -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}
/>
);
}

4
src/components/userEntityGrant/share/web.tsx
View File

@ -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}
/>
);
}