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

二维码组件增加 maskBgColor、maskTextColor、maskText

This commit is contained in:
wkj 2025-09-13 22:10:45 +08:00
parent 2bce7a738e
commit c4c78aa885
30 changed files with 205 additions and 54 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
es/components/common/qrCode/index.d.ts vendored
View File

@ -14,5 +14,8 @@ declare const _default: <ED2 extends EntityDict & BaseEntityDict, T2 extends key
disabled: boolean;
color: string;
bgColor: string;
maskBgColor: string;
maskTextColor: string;
maskText: string;
}>) => React.ReactElement;
export default _default;

30
es/components/common/qrCode/index.js
View File

@ -16,16 +16,32 @@ export default OakComponent({
disabled: false,
color: '#000000',
bgColor: '#ffffff',
maskColor: 'rgba(255,255,255,0.96)',
maskText: '',
maskTextColor: 'rgba(0,0,0,0.88)',
},
lifetimes: {
ready() {
const { url, size, color, bgColor } = this.props;
const { color, bgColor } = this.props;
this.getQrCodeURL(color, bgColor);
},
},
listeners: {
'color,bgColor'(prev, next) {
if (prev.color !== next.color || prev.bgColor !== next.bgColor) {
this.getQrCodeURL(next.color, next.bgColor);
}
}
},
methods: {
getQrCodeURL(color, bgColor) {
const { url, size } = this.props;
if (process.env.OAK_PLATFORM === 'wechatMp') {
const isBase64 = /data:image\/[\w|\W]+(;base64,)[\w|\W]*/.test(url);
if (isBase64) {
return;
}
const qrcodeURL = qrcode.drawImg(url, {
const qrCodeURL = qrcode.drawImg(url, {
typeNumber: 4, // 密度
errorCorrectLevel: 'L', // 纠错等级
size: size, // 白色边框
@ -33,18 +49,16 @@ export default OakComponent({
bgColor
});
this.setState({
qrcodeURL,
qrCodeURL,
});
}
},
},
methods: {
onDownload() {
const { url } = this.props;
const { qrcodeURL } = this.state;
const { qrCodeURL } = this.state;
let base64Data = url;
if (qrcodeURL) {
base64Data = qrcodeURL;
if (qrCodeURL) {
base64Data = qrCodeURL;
}
const pureBase64 = base64Data.replace(/^data:image\/\w+;base64,/, '');
this.saveBase64Image(pureBase64);

8
es/components/common/qrCode/index.xml
View File

@ -9,12 +9,12 @@
</block>
</view>
</block>
<block wx:elif="{{qrcodeURL}}">
<block wx:elif="{{qrCodeURL}}">
<view class="qrcode" >
<image src="{{qrcodeURL}}" mode="aspectFit" class="image" style="width: {{size}}px; height: {{size}}px;" />
<image src="{{qrCodeURL}}" mode="aspectFit" class="image" style="width: {{size}}px; height: {{size}}px;" />
<block wx:if="{{disabled}}">
<view class="mask">
{{t('disabled')}}
<view class="mask" style="background: {{maskBgColor}}; color: {{maskTextColor}};">
{{maskText}}
</view>
</block>
</view>

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

@ -15,6 +15,9 @@ type IQrCodeProps = {
disabled: boolean;
color: string;
bgColor: string;
maskBgColor: string;
maskTextColor: string;
maskText: string;
};
export default function Render(props: WebComponentProps<EntityDict, keyof EntityDict, false, IQrCodeProps & {
isBase64: boolean;

9
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, } = data;
const { filename = 'qrCode.png', expiresAt, tips, onDownload, onRefresh, size = 280, url, loading = false, disableDownload = false, disabled = false, isBase64, expired, expiresAtStr, color, bgColor, maskBgColor, maskTextColor, maskText, } = data;
const prefixCls = 'oak';
let V;
if (expiresAtStr) {
@ -33,8 +33,11 @@ export default function Render(props) {
<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>
{disabled ? <div className={`${prefixCls}-qrCodeBox_mask`}>
{t('disabled')}
{disabled ? <div className={`${prefixCls}-qrCodeBox_mask`} style={{
background: maskBgColor,
color: maskTextColor,
}}>
{maskText}
</div> : null}
</div>

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

@ -4,5 +4,8 @@ declare const _default: (props: import("oak-frontend-base").ReactComponentProps<
disabled: boolean;
color: string;
bgColor: string;
maskColor: string;
maskText: string;
maskTextColor: string;
}>) => React.ReactElement;
export default _default;

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

@ -73,5 +73,8 @@ export default OakComponent({
disabled: false,
color: '#000000',
bgColor: '#ffffff',
maskColor: 'rgba(255,255,255,0.96)',
maskText: '',
maskTextColor: 'rgba(0,0,0,0.88)',
},
});

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

@ -5,7 +5,9 @@
<l-loading show="{{true}}" type="circle"></l-loading>
</block>
<block wx:elif="{{url}}">
<qrCode url="{{url}}" expiresAt="{{expiresAt}}" disableDownload="{{disableDownload}}" size="{{size}}" disabled="{{disabled}}" color="{{color}}" bgColor="{{bgColor}}" />
<qrCode url="{{url}}" expiresAt="{{expiresAt}}" disableDownload="{{disableDownload}}"
size="{{size}}" disabled="{{disabled}}" color="{{color}}" bgColor="{{bgColor}}"
maskColor="{{maskColor}}" maskText="{{maskText}}" maskTextColor="{{maskTextColor}}" />
</block>
<block wx:else>
</block>

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

@ -9,4 +9,7 @@ export default function Render(props: WebComponentProps<EntityDict, 'userEntityG
disabled: boolean;
color: string;
bgColor: string;
maskColor: string;
maskText: string;
maskTextColor: string;
}, {}>): 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 } = props.data;
const { url, expiresAt, oakLoading, disableDownload, size, disabled, color, bgColor, maskColor, maskText, maskTextColor } = 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}/>;
return (<QrCode url={url} expiresAt={expiresAt} disableDownload={disableDownload} size={size} disabled={disabled} color={color} bgColor={bgColor} maskColor={maskColor} maskText={maskText} maskTextColor={maskTextColor}/>);
}
return null;
}

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

@ -9,4 +9,7 @@ export default function Render(props: WebComponentProps<EntityDict, 'userEntityG
disabled: boolean;
color: string;
bgColor: string;
maskColor: string;
maskText: string;
maskTextColor: string;
}, {}>): 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 } = props.data;
const { url, expiresAt, oakLoading, disableDownload, size, disabled, color, bgColor, maskColor, maskText, maskTextColor } = props.data;
if (oakLoading) {
return <Spin />;
}
if (url) {
return <QrCode url={url} expiresAt={expiresAt} disableDownload={disableDownload} size={size} disabled={disabled} color={color} bgColor={bgColor}/>;
return (<QrCode url={url} expiresAt={expiresAt} disableDownload={disableDownload} size={size} disabled={disabled} color={color} bgColor={bgColor} maskColor={maskColor} maskText={maskText} maskTextColor={maskTextColor}/>);
}
return null;
}

3
es/components/wechatQrCode/share/index.d.ts vendored
View File

@ -4,5 +4,8 @@ declare const _default: (props: import("oak-frontend-base").ReactComponentProps<
disabled: boolean;
color: string;
bgColor: string;
maskColor: string;
maskText: string;
maskTextColor: string;
}>) => React.ReactElement;
export default _default;

3
es/components/wechatQrCode/share/index.js
View File

@ -53,5 +53,8 @@ export default OakComponent({
disabled: false,
color: '#000000',
bgColor: '#ffffff',
maskColor: 'rgba(255,255,255,0.96)',
maskText: '',
maskTextColor: 'rgba(0,0,0,0.88)',
}
});

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

@ -5,7 +5,9 @@
<l-loading show="{{true}}" type="circle"></l-loading>
</block>
<block wx:elif="{{url}}">
<qrCode url="{{url}}" expiresAt="{{expiresAt}}" disableDownload="{{disableDownload}}" size="{{size}}" disabled="{{disabled}}" color="{{color}}" bgColor="{{bgColor}}" />
<qrCode url="{{url}}" expiresAt="{{expiresAt}}" disableDownload="{{disableDownload}}"
size="{{size}}" disabled="{{disabled}}" color="{{color}}" bgColor="{{bgColor}}"
maskColor="{{maskColor}}" maskText="{{maskText}}" maskTextColor="{{maskTextColor}}" />
</block>
<block wx:else>
</block>

3
es/components/wechatQrCode/share/web.d.ts vendored
View File

@ -9,4 +9,7 @@ export default function Render(props: WebComponentProps<EntityDict, 'wechatQrCod
disabled: boolean;
color: string;
bgColor: string;
maskColor: string;
maskText: string;
maskTextColor: string;
}, {}>): React.JSX.Element | null;

4
es/components/wechatQrCode/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 } = props.data;
const { url, expiresAt, oakLoading, disableDownload, size, disabled, color, bgColor, maskColor, maskText, maskTextColor } = 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}/>;
return (<QrCode url={url} expiresAt={expiresAt} disableDownload={disableDownload} size={size} disabled={disabled} color={color} bgColor={bgColor} maskColor={maskColor} maskText={maskText} maskTextColor={maskTextColor}/>);
}
return null;
}

3
es/components/wechatQrCode/share/web.pc.d.ts vendored
View File

@ -9,4 +9,7 @@ export default function Render(props: WebComponentProps<EntityDict, 'wechatQrCod
disabled: boolean;
color: string;
bgColor: string;
maskColor: string;
maskText: string;
maskTextColor: string;
}, {}>): React.JSX.Element | null;

4
es/components/wechatQrCode/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 } = props.data;
const { url, expiresAt, oakLoading, disableDownload, size, disabled, color, bgColor, maskColor, maskText, maskTextColor } = props.data;
if (oakLoading) {
return <Spin />;
}
if (url) {
return <QrCode url={url} expiresAt={expiresAt} disableDownload={disableDownload} size={size} disabled={disabled} color={color} bgColor={bgColor}/>;
return (<QrCode url={url} expiresAt={expiresAt} disableDownload={disableDownload} size={size} disabled={disabled} color={color} bgColor={bgColor} maskColor={maskColor} maskText={maskText} maskTextColor={maskTextColor}/>);
}
return null;
}

37
src/components/common/qrCode/index.ts
View File

@ -21,11 +21,27 @@ export default OakComponent({
| undefined,
disabled: false,
color: '#000000',
bgColor: '#ffffff',
bgColor: '#ffffff',
maskColor: 'rgba(255,255,255,0.96)',
maskText: '',
maskTextColor: 'rgba(0,0,0,0.88)',
},
lifetimes: {
ready() {
const { url, size, color, bgColor } = this.props;
const { color, bgColor } = this.props;
this.getQrCodeURL(color, bgColor);
},
},
listeners: {
'color,bgColor'(prev, next) {
if (prev.color !== next.color || prev.bgColor !== next.bgColor) {
this.getQrCodeURL(next.color, next.bgColor);
}
}
},
methods: {
getQrCodeURL(color: string, bgColor: string) {
const { url, size } = this.props;
if (process.env.OAK_PLATFORM === 'wechatMp') {
const isBase64 = /data:image\/[\w|\W]+(;base64,)[\w|\W]*/.test(
url!
@ -33,7 +49,7 @@ export default OakComponent({
if (isBase64) {
return;
}
const qrcodeURL = qrcode.drawImg(url, {
const qrCodeURL = qrcode.drawImg(url, {
typeNumber: 4, // 密度
errorCorrectLevel: 'L', // 纠错等级
size: size, // 白色边框
@ -42,18 +58,16 @@ export default OakComponent({
});
this.setState({
qrcodeURL,
qrCodeURL,
});
}
},
},
methods: {
onDownload() {
const { url } = this.props;
const { qrcodeURL } = this.state;
const { qrCodeURL } = this.state;
let base64Data = url as string;
if (qrcodeURL) {
base64Data = qrcodeURL as string;
if (qrCodeURL) {
base64Data = qrCodeURL as string;
}
const pureBase64 = base64Data.replace(
/^data:image\/\w+;base64,/,
@ -229,7 +243,10 @@ export default OakComponent({
disableDownload?: boolean; //下载禁用
disabled: boolean; //二维码禁用
color: string,
bgColor: string,
bgColor: string,
maskBgColor: string;
maskTextColor: string;
maskText: string;
}
>
) => React.ReactElement;

8
src/components/common/qrCode/index.xml
View File

@ -9,12 +9,12 @@
</block>
</view>
</block>
<block wx:elif="{{qrcodeURL}}">
<block wx:elif="{{qrCodeURL}}">
<view class="qrcode" >
<image src="{{qrcodeURL}}" mode="aspectFit" class="image" style="width: {{size}}px; height: {{size}}px;" />
<image src="{{qrCodeURL}}" mode="aspectFit" class="image" style="width: {{size}}px; height: {{size}}px;" />
<block wx:if="{{disabled}}">
<view class="mask">
{{t('disabled')}}
<view class="mask" style="background: {{maskBgColor}}; color: {{maskTextColor}};">
{{maskText}}
</view>
</block>
</view>

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

@ -20,6 +20,9 @@ type IQrCodeProps = {
disabled: boolean;
color: string;
bgColor: string;
maskBgColor: string;
maskTextColor: string;
maskText: string;
};
export default function Render(
@ -54,6 +57,9 @@ export default function Render(
expiresAtStr,
color,
bgColor,
maskBgColor,
maskTextColor,
maskText,
} = data;
const prefixCls = 'oak';
let V;
@ -98,8 +104,11 @@ export default function Render(
<QRCodeCanvas value={url} size={size} fgColor={color} bgColor={bgColor} />
) : null}
</Spin>
{disabled ? <div className={`${prefixCls}-qrCodeBox_mask`}>
{t('disabled')}
{disabled ? <div className={`${prefixCls}-qrCodeBox_mask`} style={{
background: maskBgColor,
color: maskTextColor,
}} >
{maskText}
</div> : null}
</div>

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

@ -74,6 +74,9 @@ export default OakComponent({
size: 280,
disabled: false,
color: '#000000',
bgColor: '#ffffff',
bgColor: '#ffffff',
maskColor: 'rgba(255,255,255,0.96)',
maskText: '',
maskTextColor: 'rgba(0,0,0,0.88)',
},
});

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

@ -5,7 +5,9 @@
<l-loading show="{{true}}" type="circle"></l-loading>
</block>
<block wx:elif="{{url}}">
<qrCode url="{{url}}" expiresAt="{{expiresAt}}" disableDownload="{{disableDownload}}" size="{{size}}" disabled="{{disabled}}" color="{{color}}" bgColor="{{bgColor}}" />
<qrCode url="{{url}}" expiresAt="{{expiresAt}}" disableDownload="{{disableDownload}}"
size="{{size}}" disabled="{{disabled}}" color="{{color}}" bgColor="{{bgColor}}"
maskColor="{{maskColor}}" maskText="{{maskText}}" maskTextColor="{{maskTextColor}}" />
</block>
<block wx:else>
</block>

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

@ -17,16 +17,32 @@ export default function Render(
disabled: boolean;
color: string;
bgColor: string;
maskColor: string;
maskText: string;
maskTextColor: string;
},
{}
>
) {
const { url, expiresAt, oakLoading, disableDownload, size, disabled, color, bgColor } = props.data;
const { url, expiresAt, oakLoading, disableDownload, size, disabled, color, bgColor, maskColor, maskText, maskTextColor } = props.data;
if (oakLoading) {
return <Spin />;
}
if (url) {
return <QrCode url={url} expiresAt={expiresAt} disableDownload={disableDownload} size={size} disabled={disabled} color={color} bgColor={bgColor}/>;
return (
<QrCode
url={url}
expiresAt={expiresAt}
disableDownload={disableDownload}
size={size}
disabled={disabled}
color={color}
bgColor={bgColor}
maskColor={maskColor}
maskText={maskText}
maskTextColor={maskTextColor}
/>
);
}
return null;
}

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

@ -17,16 +17,32 @@ export default function Render(
disabled: boolean;
color: string;
bgColor: string;
maskColor: string;
maskText: string;
maskTextColor: string;
},
{}
>
) {
const { url, expiresAt, oakLoading, disableDownload, size, disabled, color, bgColor } = props.data;
const { url, expiresAt, oakLoading, disableDownload, size, disabled, color, bgColor, maskColor, maskText, maskTextColor } = 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}/>;
return (
<QrCode
url={url}
expiresAt={expiresAt}
disableDownload={disableDownload}
size={size}
disabled={disabled}
color={color}
bgColor={bgColor}
maskColor={maskColor}
maskText={maskText}
maskTextColor={maskTextColor}
/>
);
}
return null;
}

7
src/components/wechatQrCode/share/index.ts
View File

@ -38,7 +38,7 @@ export default OakComponent({
qrCodeUrl = 'data:image/png;base64,' + base64Str;
}
if (process.env.NODE_ENV === 'development') {
console.warn('使用微信api生成二维码，不支持二维码颜色更换[color、bgColor]')
console.warn('使用微信api生成二维码，不支持二维码颜色更换[color、bgColor]');
}
}
return {
@ -53,6 +53,9 @@ export default OakComponent({
size: 280,
disabled: false,
color: '#000000',
bgColor: '#ffffff',
bgColor: '#ffffff',
maskColor: 'rgba(255,255,255,0.96)',
maskText: '',
maskTextColor: 'rgba(0,0,0,0.88)',
}
});

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

@ -5,7 +5,9 @@
<l-loading show="{{true}}" type="circle"></l-loading>
</block>
<block wx:elif="{{url}}">
<qrCode url="{{url}}" expiresAt="{{expiresAt}}" disableDownload="{{disableDownload}}" size="{{size}}" disabled="{{disabled}}" color="{{color}}" bgColor="{{bgColor}}" />
<qrCode url="{{url}}" expiresAt="{{expiresAt}}" disableDownload="{{disableDownload}}"
size="{{size}}" disabled="{{disabled}}" color="{{color}}" bgColor="{{bgColor}}"
maskColor="{{maskColor}}" maskText="{{maskText}}" maskTextColor="{{maskTextColor}}" />
</block>
<block wx:else>
</block>

20
src/components/wechatQrCode/share/web.pc.tsx
View File

@ -17,16 +17,32 @@ export default function Render(
disabled: boolean;
color: string;
bgColor: string;
maskColor: string,
maskText: string,
maskTextColor: string,
},
{}
>
) {
const { url, expiresAt, oakLoading, disableDownload, size, disabled, color, bgColor } = props.data;
const { url, expiresAt, oakLoading, disableDownload, size, disabled, color, bgColor, maskColor, maskText, maskTextColor } = props.data;
if (oakLoading) {
return <Spin />;
}
if (url) {
return <QrCode url={url} expiresAt={expiresAt} disableDownload={disableDownload} size={size} disabled={disabled} color={color} bgColor={bgColor} />;
return (
<QrCode
url={url}
expiresAt={expiresAt}
disableDownload={disableDownload}
size={size}
disabled={disabled}
color={color}
bgColor={bgColor}
maskColor={maskColor}
maskText={maskText}
maskTextColor={maskTextColor}
/>
);
}
return null;
}

20
src/components/wechatQrCode/share/web.tsx
View File

@ -17,16 +17,32 @@ export default function Render(
disabled: boolean;
color: string;
bgColor: string;
maskColor: string;
maskText: string;
maskTextColor: string;
},
{}
>
) {
const { url, expiresAt, oakLoading, disableDownload, size, disabled, color, bgColor } = props.data;
const { url, expiresAt, oakLoading, disableDownload, size, disabled, color, bgColor, maskColor, maskText, maskTextColor } = 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} />;
return (
<QrCode
url={url}
expiresAt={expiresAt}
disableDownload={disableDownload}
size={size}
disabled={disabled}
color={color}
bgColor={bgColor}
maskColor={maskColor}
maskText={maskText}
maskTextColor={maskTextColor}
/>
);
}
return null;
}