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

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

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

es/components/common/qrCode/index.js

@@ -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) {
+            if (qrCodeURL) {
-                base64Data = qrcodeURL;
+                base64Data = qrCodeURL;
             }
             const pureBase64 = base64Data.replace(/^data:image\/\w+;base64,/, '');
             this.saveBase64Image(pureBase64);

es/components/common/qrCode/index.xml

@@ -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">
+            <view class="mask" style="background: {{maskBgColor}}; color: {{maskTextColor}};">
-                {{t('disabled')}}
+                {{maskText}}
             </view>
         </block>
         </view>

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

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

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, } = 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`}>
+                {disabled ? <div className={`${prefixCls}-qrCodeBox_mask`} style={{
-                    {t('disabled')}
+                background: maskBgColor,
+                color: maskTextColor,
+            }}>
+                    {maskText}
                 </div> : null}
             </div>
 

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

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

es/components/userEntityGrant/share/index.js

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

es/components/userEntityGrant/share/index.xml

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

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

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

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

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

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

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

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

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

es/components/wechatQrCode/share/index.js

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

es/components/wechatQrCode/share/index.xml

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

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

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

es/components/wechatQrCode/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 } = 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;
 }

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

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

es/components/wechatQrCode/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 } = 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;
 }

src/components/common/qrCode/index.ts

@@ -22,10 +22,26 @@ 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: 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) {
+            if (qrCodeURL) {
-                base64Data = qrcodeURL as string;
+                base64Data = qrCodeURL as string;
             }
             const pureBase64 = base64Data.replace(
                 /^data:image\/\w+;base64,/,
@@ -230,6 +244,9 @@ export default OakComponent({
             disabled: boolean; //二维码禁用
             color: string,
             bgColor: string,
+            maskBgColor: string;
+            maskTextColor: string;
+            maskText: string;    
         }
     >
 ) => React.ReactElement;

src/components/common/qrCode/index.xml

@@ -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">
+            <view class="mask" style="background: {{maskBgColor}}; color: {{maskTextColor}};">
-                {{t('disabled')}}
+                {{maskText}}
             </view>
         </block>
         </view>

src/components/common/qrCode/web.tsx

@@ -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`}>
+                {disabled ? <div className={`${prefixCls}-qrCodeBox_mask`} style={{
-                    {t('disabled')}
+                    background: maskBgColor,
+                    color: maskTextColor,
+                }} >
+                    {maskText}
                 </div> : null}
             </div>
 

src/components/userEntityGrant/share/index.ts

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

src/components/userEntityGrant/share/index.xml

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

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

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

src/components/userEntityGrant/share/web.tsx

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

src/components/wechatQrCode/share/index.ts

@@ -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 {
@@ -54,5 +54,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)',
     }
 });

src/components/wechatQrCode/share/index.xml

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

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

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

src/components/wechatQrCode/share/web.tsx

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