小程序二维码分享组件, 支持传入disableDownload隐藏下载按钮

This commit is contained in:
wkj 2025-09-13 16:43:58 +08:00
parent 24f328047d
commit 983d55e97a
44 changed files with 117 additions and 50 deletions

View File

@ -0,0 +1,3 @@
{
"goBack": "返回"
}

View File

@ -4,7 +4,6 @@
justify-content: center;
align-items: center;
height: 75vh;
// padding: 24px;
min-height: 400px;
color: var(--oak-color-primary);

View File

@ -14,5 +14,5 @@ interface GrantProps {
rootStyle?: React.CSSProperties;
rootClassName?: string;
}
declare function Grant(props: GrantProps): React.JSX.Element;
export default Grant;
declare function WeChatLoginGrant(props: GrantProps): React.JSX.Element;
export default WeChatLoginGrant;

View File

@ -3,7 +3,7 @@ import { message, Button } from 'antd';
import { random, template } from 'oak-domain/lib/utils/string';
import './index.less';
const WeChatLoginUrl = template `https://open.weixin.qq.com/connect/oauth2/authorize?redirect_uri=${0}&appid=${1}&response_type=code&scope=${2}${3}&#wechat_redirect`;
function Grant(props) {
function WeChatLoginGrant(props) {
const { id = 'login_grant_container', appId, scope, redirectUri, state, style = {}, className, dev = process.env.NODE_ENV === 'development', // 默认本地为true 发布时为false
disabled = false, disableText, rootStyle, rootClassName, } = props;
const [code, setCode] = useState('');
@ -108,4 +108,4 @@ function Grant(props) {
</div>
</>);
}
export default Grant;
export default WeChatLoginGrant;

View File

@ -14,5 +14,5 @@ interface QrCodeProps {
rootStyle?: React.CSSProperties;
rootClassName?: string;
}
declare function QrCode(props: QrCodeProps): React.JSX.Element;
export default QrCode;
declare function WeChatLoginQrCode(props: QrCodeProps): React.JSX.Element;
export default WeChatLoginQrCode;

View File

@ -2,7 +2,7 @@ import React, { useState, useEffect } from 'react';
import { random } from 'oak-domain/lib/utils/string';
import classNames from 'classnames';
import './index.less';
function QrCode(props) {
function WeChatLoginQrCode(props) {
const { id = 'login_qr_container', appId, scope, redirectUri, state, style = '', href = "data:text/css;base64,LmltcG93ZXJCb3ggLnFyY29kZSB7d2lkdGg6IDIwMHB4O30KLmltcG93ZXJCb3ggLnRpdGxlIHtkaXNwbGF5OiBub25lO30KLmltcG93ZXJCb3ggLmluZm8ge3dpZHRoOiAyMDBweDt9Ci5zdGF0dXNfaWNvbiB7ZGlzcGxheTogbm9uZX0KLmltcG93ZXJCb3ggLnN0YXR1cyB7dGV4dC1hbGlnbjogY2VudGVyO30gCg==", dev = process.env.NODE_ENV === 'development', // 默认本地为true 发布时为false
disabled = false, disableText, rootStyle, rootClassName, } = props;
const [code, setCode] = useState('');
@ -126,4 +126,4 @@ function QrCode(props) {
</div>
</>);
}
export default QrCode;
export default WeChatLoginQrCode;

View File

@ -1,3 +1,5 @@
/// <reference types="wechat-miniprogram" />
declare const _default: (props: import("oak-frontend-base").ReactComponentProps<import("../../../oak-app-domain").EntityDict, "parasite", false, WechatMiniprogram.Component.DataOption>) => React.ReactElement;
declare const _default: (props: import("oak-frontend-base").ReactComponentProps<import("../../../oak-app-domain").EntityDict, "parasite", false, {
disableDownload: boolean;
oakId: string;
}>) => React.ReactElement;
export default _default;

View File

@ -15,7 +15,7 @@ export default OakComponent({
const hostname = window.location.hostname;
const port = window.location.port ? `:${window.location.port}` : '';
const colon = window.location.protocol.endsWith(':') ? '' : ':';
url = `${window.location.protocol}${colon}//${hostname}${port}/parasite/excess?oakId=${props.oakId}`;
url = `${window.location.protocol}${colon}//${hostname}${port}/parasite/excess?oakId=${parasite?.id}`;
}
return {
entity: parasite?.entity,
@ -35,5 +35,9 @@ export default OakComponent({
});
}
},
},
properties: {
disableDownload: false,
oakId: '',
}
});

View File

@ -5,7 +5,7 @@
<l-loading show="{{true}}" type="circle"></l-loading>
</block>
<block wx:elif="{{url}}">
<qrCode url="{{url}}" expiresAt="{{expiresAt}}" />
<qrCode url="{{url}}" expiresAt="{{expiresAt}}" disableDownload="{{disableDownload}}" />
</block>
<block wx:else>
</block>

View File

@ -7,4 +7,5 @@ export default function Render(props: WebComponentProps<EntityDict, 'userEntityG
url: string;
expiresAt: number;
title?: string;
disableDownload: boolean;
}, {}>): React.JSX.Element;

View File

@ -4,7 +4,7 @@ import { Spin, Button, Space, Input, Tooltip, Alert } from 'antd';
import { CopyOutlined } from '@ant-design/icons';
import copy from 'copy-to-clipboard';
export default function Render(props) {
const { url, expiresAt, oakLoading } = props.data;
const { url, expiresAt, oakLoading, disableDownload } = props.data;
const { setMessage } = props.methods;
return oakLoading ? (<div style={{
display: 'flex',
@ -24,7 +24,7 @@ export default function Render(props) {
maxWidth: 800,
}}>
<Alert message="将二维码或下方链接发送给使用者" type="info"/>
<QrCode url={url} expiresAt={expiresAt}/>
<QrCode url={url} expiresAt={expiresAt} disableDownload={disableDownload}/>
<Space.Compact block style={{ marginTop: 16 }}>
<Input value={url} readOnly/>

View File

@ -1,3 +1,4 @@
/// <reference types="wechat-miniprogram" />
declare const _default: (props: import("oak-frontend-base").ReactComponentProps<import("../../../oak-app-domain").EntityDict, "userEntityGrant", false, WechatMiniprogram.Component.DataOption>) => React.ReactElement;
declare const _default: (props: import("oak-frontend-base").ReactComponentProps<import("../../../oak-app-domain").EntityDict, "userEntityGrant", false, {
disableDownload: boolean;
}>) => React.ReactElement;
export default _default;

View File

@ -17,7 +17,7 @@ export default OakComponent({
id: 1,
entity: 1,
entityId: 1,
type: 1,
type: 1, //类型
ticket: 1,
url: 1,
buffer: 1,
@ -67,4 +67,7 @@ export default OakComponent({
expiresAt: userEntityGrant?.expiresAt,
};
},
properties: {
disableDownload: false,
},
});

View File

@ -5,7 +5,7 @@
<l-loading show="{{true}}" type="circle"></l-loading>
</block>
<block wx:elif="{{url}}">
<qrCode url="{{url}}" expiresAt="{{expiresAt}}" />
<qrCode url="{{url}}" expiresAt="{{expiresAt}}" disableDownload="{{disableDownload}}" />
</block>
<block wx:else>
</block>

View File

@ -4,4 +4,5 @@ import { EntityDict } from '../../../oak-app-domain';
export default function Render(props: WebComponentProps<EntityDict, 'userEntityGrant', false, {
url: string;
expiresAt: number;
disableDownload: boolean;
}, {}>): React.JSX.Element | null;

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 } = props.data;
const { url, expiresAt, oakLoading, disableDownload } = props.data;
if (oakLoading) {
return <DotLoading color="primary"/>;
}
if (url) {
return <QrCode url={url} expiresAt={expiresAt}/>;
return <QrCode url={url} expiresAt={expiresAt} disableDownload={disableDownload}/>;
}
return null;
}

View File

@ -4,4 +4,5 @@ import { EntityDict } from '../../../oak-app-domain';
export default function Render(props: WebComponentProps<EntityDict, 'userEntityGrant', false, {
url: string;
expiresAt: number;
disableDownload: boolean;
}, {}>): React.JSX.Element | null;

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 } = props.data;
const { url, expiresAt, oakLoading, disableDownload } = props.data;
if (oakLoading) {
return <Spin />;
}
if (url) {
return <QrCode url={url} expiresAt={expiresAt}/>;
return <QrCode url={url} expiresAt={expiresAt} disableDownload={disableDownload}/>;
}
return null;
}

View File

@ -1,3 +1,4 @@
/// <reference types="wechat-miniprogram" />
declare const _default: (props: import("oak-frontend-base").ReactComponentProps<import("../../../oak-app-domain").EntityDict, "wechatQrCode", false, WechatMiniprogram.Component.DataOption>) => React.ReactElement;
declare const _default: (props: import("oak-frontend-base").ReactComponentProps<import("../../../oak-app-domain").EntityDict, "wechatQrCode", false, {
disableDownload: boolean;
}>) => React.ReactElement;
export default _default;

View File

@ -44,4 +44,7 @@ export default OakComponent({
expiresAt: wechatQrCode?.expiresAt,
};
},
properties: {
disableDownload: false
}
});

View File

@ -5,7 +5,7 @@
<l-loading show="{{true}}" type="circle"></l-loading>
</block>
<block wx:elif="{{url}}">
<qrCode url="{{url}}" expiresAt="{{expiresAt}}" />
<qrCode url="{{url}}" expiresAt="{{expiresAt}}" disableDownload="{{disableDownload}}" />
</block>
<block wx:else>
</block>

View File

@ -4,4 +4,5 @@ import { EntityDict } from '../../../oak-app-domain';
export default function Render(props: WebComponentProps<EntityDict, 'wechatQrCode', false, {
url: string;
expiresAt: number;
disableDownload: boolean;
}, {}>): React.JSX.Element | null;

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 } = props.data;
const { url, expiresAt, oakLoading, disableDownload } = props.data;
if (oakLoading) {
return <DotLoading color="primary"/>;
}
if (url) {
return <QrCode url={url} expiresAt={expiresAt}/>;
return <QrCode url={url} expiresAt={expiresAt} disableDownload={disableDownload}/>;
}
return null;
}

View File

@ -4,4 +4,5 @@ import { EntityDict } from '../../../oak-app-domain';
export default function Render(props: WebComponentProps<EntityDict, 'wechatQrCode', false, {
url: string;
expiresAt: number;
disableDownload: boolean;
}, {}>): React.JSX.Element | null;

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 } = props.data;
const { url, expiresAt, oakLoading, disableDownload } = props.data;
if (oakLoading) {
return <Spin />;
}
if (url) {
return <QrCode url={url} expiresAt={expiresAt}/>;
return <QrCode url={url} expiresAt={expiresAt} disableDownload={disableDownload}/>;
}
return null;
}

View File

@ -37,6 +37,16 @@ const i18ns = [
"login": "登录"
}
},
{
id: "f4a25e4b81590e035fa1f738924f2495",
namespace: "oak-general-business-c-common-errorPage",
language: "zh-CN",
module: "oak-general-business",
position: "src/components/common/errorPage",
data: {
"goBack": "返回"
}
},
{
id: "d790bd454c420a031bbde799c83bbe71",
namespace: "oak-general-business-c-common-qrCode",

View File

@ -39,6 +39,16 @@ const i18ns = [
"login": "登录"
}
},
{
id: "f4a25e4b81590e035fa1f738924f2495",
namespace: "oak-general-business-c-common-errorPage",
language: "zh-CN",
module: "oak-general-business",
position: "src/components/common/errorPage",
data: {
"goBack": "返回"
}
},
{
id: "d790bd454c420a031bbde799c83bbe71",
namespace: "oak-general-business-c-common-qrCode",

View File

@ -0,0 +1,3 @@
{
"goBack": "返回"
}

View File

@ -4,7 +4,6 @@
justify-content: center;
align-items: center;
height: 75vh;
// padding: 24px;
min-height: 400px;
color: var(--oak-color-primary);

View File

@ -1,7 +1,6 @@
import React, { useState, useEffect } from 'react';
import { Button, Space, Spin } from 'antd';
import { DownloadOutlined, ReloadOutlined } from '@ant-design/icons';
import dayjs from 'dayjs';
import { QRCodeCanvas } from 'qrcode.react';
import { WebComponentProps } from 'oak-frontend-base';

View File

@ -21,7 +21,7 @@ interface GrantProps {
const WeChatLoginUrl = template`https://open.weixin.qq.com/connect/oauth2/authorize?redirect_uri=${0}&appid=${1}&response_type=code&scope=${2}${3}&#wechat_redirect`;
function Grant(props: GrantProps) {
function WeChatLoginGrant(props: GrantProps) {
const {
id = 'login_grant_container',
appId,
@ -180,4 +180,4 @@ function Grant(props: GrantProps) {
);
}
export default Grant;
export default WeChatLoginGrant;

View File

@ -18,7 +18,7 @@ interface QrCodeProps {
rootClassName?: string;
}
function QrCode(props: QrCodeProps) {
function WeChatLoginQrCode(props: QrCodeProps) {
const {
id = 'login_qr_container',
appId,
@ -197,4 +197,4 @@ function QrCode(props: QrCodeProps) {
);
}
export default QrCode;
export default WeChatLoginQrCode;

View File

@ -16,7 +16,7 @@ export default OakComponent({
const hostname = window.location.hostname;
const port = window.location.port ? `:${window.location.port}` : '';
const colon = window.location.protocol.endsWith(':') ? '' : ':';
url = `${window.location.protocol}${colon}//${hostname}${port}/parasite/excess?oakId=${props.oakId}`;
url = `${window.location.protocol}${colon}//${hostname}${port}/parasite/excess?oakId=${parasite?.id}`;
}
return {
@ -37,5 +37,9 @@ export default OakComponent({
});
}
},
},
properties: {
disableDownload: false,
oakId: '',
}
});

View File

@ -5,7 +5,7 @@
<l-loading show="{{true}}" type="circle"></l-loading>
</block>
<block wx:elif="{{url}}">
<qrCode url="{{url}}" expiresAt="{{expiresAt}}" />
<qrCode url="{{url}}" expiresAt="{{expiresAt}}" disableDownload="{{disableDownload}}" />
</block>
<block wx:else>
</block>

View File

@ -18,11 +18,12 @@ export default function Render(
url: string;
expiresAt: number;
title?: string;
disableDownload: boolean;
},
{}
>
) {
const { url, expiresAt, oakLoading } = props.data;
const { url, expiresAt, oakLoading, disableDownload } = props.data;
const { setMessage } = props.methods;
return oakLoading ? (
<div
@ -51,7 +52,7 @@ export default function Render(
}}
>
<Alert message="将二维码或下方链接发送给使用者" type="info" />
<QrCode url={url} expiresAt={expiresAt} />
<QrCode url={url} expiresAt={expiresAt} disableDownload={disableDownload} />
<Space.Compact block style={{ marginTop: 16 }}>
<Input

View File

@ -69,4 +69,7 @@ export default OakComponent({
expiresAt: userEntityGrant?.expiresAt,
};
},
properties: {
disableDownload: false,
},
});

View File

@ -5,7 +5,7 @@
<l-loading show="{{true}}" type="circle"></l-loading>
</block>
<block wx:elif="{{url}}">
<qrCode url="{{url}}" expiresAt="{{expiresAt}}" />
<qrCode url="{{url}}" expiresAt="{{expiresAt}}" disableDownload="{{disableDownload}}" />
</block>
<block wx:else>
</block>

View File

@ -12,16 +12,17 @@ export default function Render(
{
url: string;
expiresAt: number;
disableDownload: boolean;
},
{}
>
) {
const { url, expiresAt, oakLoading } = props.data;
const { url, expiresAt, oakLoading, disableDownload } = props.data;
if (oakLoading) {
return <Spin />;
}
if (url) {
return <QrCode url={url} expiresAt={expiresAt} />;
return <QrCode url={url} expiresAt={expiresAt} disableDownload={disableDownload} />;
}
return null;
}

View File

@ -12,16 +12,17 @@ export default function Render(
{
url: string;
expiresAt: number;
disableDownload: boolean;
},
{}
>
) {
const { url, expiresAt, oakLoading } = props.data;
const { url, expiresAt, oakLoading, disableDownload } = props.data;
if (oakLoading) {
return <DotLoading color="primary" />;
}
if (url) {
return <QrCode url={url} expiresAt={expiresAt} />;
return <QrCode url={url} expiresAt={expiresAt} disableDownload={disableDownload} />;
}
return null;
}

View File

@ -45,4 +45,7 @@ export default OakComponent({
expiresAt: wechatQrCode?.expiresAt,
};
},
properties: {
disableDownload: false
}
});

View File

@ -5,7 +5,7 @@
<l-loading show="{{true}}" type="circle"></l-loading>
</block>
<block wx:elif="{{url}}">
<qrCode url="{{url}}" expiresAt="{{expiresAt}}" />
<qrCode url="{{url}}" expiresAt="{{expiresAt}}" disableDownload="{{disableDownload}}" />
</block>
<block wx:else>
</block>

View File

@ -12,16 +12,17 @@ export default function Render(
{
url: string;
expiresAt: number;
disableDownload: boolean
},
{}
>
) {
const { url, expiresAt, oakLoading } = props.data;
const { url, expiresAt, oakLoading, disableDownload } = props.data;
if (oakLoading) {
return <Spin />;
}
if (url) {
return <QrCode url={url} expiresAt={expiresAt} />;
return <QrCode url={url} expiresAt={expiresAt} disableDownload={disableDownload} />;
}
return null;
}

View File

@ -12,16 +12,17 @@ export default function Render(
{
url: string;
expiresAt: number;
disableDownload: boolean;
},
{}
>
) {
const { url, expiresAt, oakLoading } = props.data;
const { url, expiresAt, oakLoading, disableDownload } = props.data;
if (oakLoading) {
return <DotLoading color="primary" />;
}
if (url) {
return <QrCode url={url} expiresAt={expiresAt} />;
return <QrCode url={url} expiresAt={expiresAt} disableDownload={disableDownload} />;
}
return null;
}

View File

@ -39,6 +39,16 @@ const i18ns: I18n[] = [
"login": "登录"
}
},
{
id: "f4a25e4b81590e035fa1f738924f2495",
namespace: "oak-general-business-c-common-errorPage",
language: "zh-CN",
module: "oak-general-business",
position: "src/components/common/errorPage",
data: {
"goBack": "返回"
}
},
{
id: "d790bd454c420a031bbde799c83bbe71",
namespace: "oak-general-business-c-common-qrCode",