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

微信扫码 生成二维码组件 增加 disabled和disableText

This commit is contained in:
Wang Kejun 2023-01-16 20:18:09 +08:00
parent 814e478222
commit 2e6ecdec5c
9 changed files with 115 additions and 12 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

5
lib/components/common/weChatLoginQrCode/index.d.ts vendored
View File

@ -1,3 +1,4 @@
import React from 'react';
import './index.less';
interface QrCodeProps {
id?: string;
@ -8,6 +9,10 @@ interface QrCodeProps {
style?: string;
href?: string;
dev?: boolean;
disabled?: boolean;
disableText?: string;
rootStyle?: React.CSSProperties;
rootClassName?: string;
}
declare function QrCode(props: QrCodeProps): JSX.Element;
export default QrCode;

20
lib/components/common/weChatLoginQrCode/index.js
View File

@ -3,13 +3,19 @@ Object.defineProperty(exports, "__esModule", { value: true });
var tslib_1 = require("tslib");
var jsx_runtime_1 = require("react/jsx-runtime");
var react_1 = require("react");
require("./index.less");
var string_1 = require("oak-domain/lib/utils/string");
var classnames_1 = tslib_1.__importDefault(require("classnames"));
require("./index.less");
function QrCode(props) {
var _a = props.id, id = _a === void 0 ? 'login_qr_container' : _a, appId = props.appId, scope = props.scope, redirectUri = props.redirectUri, state = props.state, _b = props.style, style = _b === void 0 ? '' : _b, _c = props.href, href = _c === void 0 ? '' : _c, _d = props.dev, dev = _d === void 0 ? process.env.NODE_ENV === 'development' : _d;
var _e = tslib_1.__read((0, react_1.useState)(''), 2), code = _e[0], setCode = _e[1];
var _a = props.id, id = _a === void 0 ? 'login_qr_container' : _a, appId = props.appId, scope = props.scope, redirectUri = props.redirectUri, state = props.state, _b = props.style, style = _b === void 0 ? '' : _b, _c = props.href, href = _c === void 0 ? '' : _c, _d = props.dev, dev = _d === void 0 ? process.env.NODE_ENV === 'development' : _d, // 默认本地为true 发布时为false
_e = props.disabled, // 默认本地为true 发布时为false
disabled = _e === void 0 ? false : _e, disableText = props.disableText, rootStyle = props.rootStyle, rootClassName = props.rootClassName;
var _f = tslib_1.__read((0, react_1.useState)(''), 2), code = _f[0], setCode = _f[1];
(0, react_1.useEffect)(function () {
if (appId) {
if (disabled) {
return;
}
// 由于本地不能微信扫码测试 所以只能模拟 输入code使用weChatLogin
if (dev) {
setCode((0, string_1.random)(6));
@ -28,7 +34,7 @@ function QrCode(props) {
});
});
}
}, [appId]);
}, [appId, disabled]);
function loadScript(url, callback) {
var script = document.createElement('script');
// @ts-ignore
@ -60,6 +66,10 @@ function QrCode(props) {
var prefixCls = 'oak';
var prefixCls2 = "".concat(prefixCls, "-loginQrCode");
var V;
var DisableV;
if (disabled) {
DisableV = ((0, jsx_runtime_1.jsxs)("div", tslib_1.__assign({ className: (0, classnames_1.default)(prefixCls2, rootClassName), style: rootStyle }, { children: [(0, jsx_runtime_1.jsx)("div", tslib_1.__assign({ className: "".concat(prefixCls2, "_disable") }, { children: (0, jsx_runtime_1.jsx)("div", tslib_1.__assign({ className: "".concat(prefixCls2, "_disable_border") }, { children: disableText || '禁用微信二维码' })) })), (0, jsx_runtime_1.jsx)("div", tslib_1.__assign({ className: "".concat(prefixCls2, "_disable_info") }, { children: (0, jsx_runtime_1.jsx)("span", { children: "\u5FAE\u4FE1\u626B\u4E00\u626B" }) }))] })));
}
if (dev) {
V = ((0, jsx_runtime_1.jsxs)("div", tslib_1.__assign({ className: "".concat(prefixCls2, "_dev") }, { children: [(0, jsx_runtime_1.jsxs)("div", tslib_1.__assign({ className: "".concat(prefixCls2, "_dev_header") }, { children: [(0, jsx_runtime_1.jsx)("input", { maxLength: 6, value: code, className: "".concat(prefixCls2, "_dev_header_input"), onChange: function (e) {
setCode(e.target.value);
@ -69,6 +79,6 @@ function QrCode(props) {
"?code=".concat(code, "&state=").concat(state);
} }, { children: "\u767B\u5F55" }))] })), (0, jsx_runtime_1.jsxs)("div", tslib_1.__assign({ className: "".concat(prefixCls2, "_dev_bottom") }, { children: [(0, jsx_runtime_1.jsx)("span", tslib_1.__assign({ className: "".concat(prefixCls2, "_dev_bottom_title") }, { children: "\u6A21\u62DF\u5FAE\u4FE1\u626B\u4E00\u626B" })), (0, jsx_runtime_1.jsx)("span", tslib_1.__assign({ className: "".concat(prefixCls2, "_dev_bottom_desc") }, { children: "1\u3001\u7531\u4E8E\u672C\u5730\u5F00\u53D1\u73AF\u5883\u9650\u5236\uFF0C\u6A21\u62DF\u5FAE\u4FE1\u626B\u7801\u540E\u52A8\u4F5C" })), (0, jsx_runtime_1.jsx)("span", tslib_1.__assign({ className: "".concat(prefixCls2, "_dev_bottom_desc") }, { children: "2\u3001CODE\u53EF\u4FEE\u6539" }))] }))] })));
}
return ((0, jsx_runtime_1.jsx)("div", tslib_1.__assign({ className: prefixCls2, id: id }, { children: V })));
return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [DisableV, (0, jsx_runtime_1.jsx)("div", tslib_1.__assign({ className: (0, classnames_1.default)(prefixCls2, rootClassName), id: id, style: disabled ? { display: 'none' } : rootStyle }, { children: V }))] }));
}
exports.default = QrCode;

4
lib/components/config/application/web/index.js
View File

@ -5,7 +5,7 @@ var jsx_runtime_1 = require("react/jsx-runtime");
var antd_1 = require("antd");
var web_module_less_1 = tslib_1.__importDefault(require("./web.module.less"));
function Web(props) {
var _a, _b;
var _a, _b, _c;
var config = props.config, setValue = props.setValue;
return ((0, jsx_runtime_1.jsxs)(antd_1.Space, tslib_1.__assign({ direction: "vertical", size: "middle", style: { display: 'flex' } }, { children: [(0, jsx_runtime_1.jsx)(antd_1.Row, { children: (0, jsx_runtime_1.jsx)(antd_1.Card, tslib_1.__assign({ className: web_module_less_1.default.tips }, { children: "\u6BCF\u79CD\u5747\u53EF\u914D\u7F6E\u4E00\u4E2A\uFF0C\u76F8\u5E94\u7684\u670D\u52A1\u6240\u4F7F\u7528\u7684\u5E10\u53F7\u8BF7\u51C6\u786E\u5BF9\u5E94" })) }), (0, jsx_runtime_1.jsxs)(antd_1.Col, tslib_1.__assign({ flex: "auto" }, { children: [(0, jsx_runtime_1.jsx)(antd_1.Divider, tslib_1.__assign({ orientation: "left", className: web_module_less_1.default.title }, { children: "\u7F51\u7AD9-\u5FAE\u4FE1\u626B\u7801" })), (0, jsx_runtime_1.jsx)(antd_1.Tabs, { tabPosition: 'top', size: 'middle', type: "card", items: [
{
@ -15,6 +15,8 @@ function Web(props) {
return setValue("wechat.appId", e.target.value);
} }) }) })), (0, jsx_runtime_1.jsx)(antd_1.Form.Item, tslib_1.__assign({ label: "appSecret", name: "appSecret" }, { children: (0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: (0, jsx_runtime_1.jsx)(antd_1.Input, { placeholder: "\u8BF7\u8F93\u5165appSecret", type: "text", value: (_b = config === null || config === void 0 ? void 0 : config.wechat) === null || _b === void 0 ? void 0 : _b.appSecret, onChange: function (e) {
return setValue("wechat.appSecret", e.target.value);
} }) }) })), (0, jsx_runtime_1.jsx)(antd_1.Form.Item, tslib_1.__assign({ label: "\u6388\u6743\u56DE\u8C03\u57DF", name: "domain", tooltip: "\u6388\u6743\u56DE\u8C03\u57DF\u53EF\u9009\u586B\uFF0C\u672A\u586B\u5199\u7684\u8BDD\uFF0C\u4F7F\u7528\u7F51\u9875\u8BBF\u95EE\u7684\u57DF\u540D\u5F53\u4F5C\u6388\u6743\u56DE\u8C03\u57DF" }, { children: (0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: (0, jsx_runtime_1.jsx)(antd_1.Input, { placeholder: "\u8BF7\u8F93\u5165\u6388\u6743\u56DE\u8C03\u57DF", type: "text", value: (_c = config === null || config === void 0 ? void 0 : config.wechat) === null || _c === void 0 ? void 0 : _c.domain, onChange: function (e) {
return setValue("wechat.domain", e.target.value);
} }) }) }))] }))),
},
] })] })), (0, jsx_runtime_1.jsxs)(antd_1.Col, tslib_1.__assign({ flex: "auto" }, { children: [(0, jsx_runtime_1.jsx)(antd_1.Divider, tslib_1.__assign({ orientation: "left", className: web_module_less_1.default.title }, { children: "\u7F51\u7AD9-\u6388\u6743\u65B9\u5F0F" })), (0, jsx_runtime_1.jsx)(antd_1.Tabs, { tabPosition: 'top', size: 'middle', type: "card", items: [

1
lib/entities/Application.d.ts vendored
View File

@ -15,6 +15,7 @@ export declare type WebConfig = {
wechat?: {
appId: string;
appSecret: string;
domain?: string;
};
passport: Passport[];
};

1
lib/general-app-domain/Application/Schema.d.ts vendored
View File

@ -22,6 +22,7 @@ export declare type WebConfig = {
wechat?: {
appId: string;
appSecret: string;
domain?: string;
};
passport: Passport[];
};

28
src/components/common/weChatLoginQrCode/index.less
View File

@ -1,4 +1,7 @@
.oak-loginQrCode {
display: flex;
flex-direction: column;
align-items: center;
iframe {
height: 280px !important;
}
@ -80,7 +83,7 @@
margin-top: 16px;
&_title {
font-size: 16px;
font-size: 13px;
line-height: 26px;
color: var(--oak-text-color-primary);
text-align: center;
@ -95,4 +98,27 @@
}
}
}
&_disable {
&_border {
height: 202px;
width: 202px;
margin: 15px;
background-color: #f5f7fa;
color: rgba(0, 0, 0, .4);
font-size: 14px;
display: flex;
flex-direction: column;
justify-content: center;
padding: 15px;
}
&_info {
padding: 7px 14px;
font-size: 13px;
color: #373737;
}
}
}

48
src/components/common/weChatLoginQrCode/index.tsx
View File

@ -1,6 +1,7 @@
import React, { useState, useEffect } from 'react';
import './index.less';
import { random } from 'oak-domain/lib/utils/string';
import classNames from 'classnames';
import './index.less';
interface QrCodeProps {
id?: string;
@ -11,6 +12,10 @@ interface QrCodeProps {
style?: string;
href?: string;
dev?: boolean;
disabled?: boolean;
disableText?: string;
rootStyle?: React.CSSProperties;
rootClassName?: string;
}
function QrCode(props: QrCodeProps) {
@ -23,11 +28,18 @@ function QrCode(props: QrCodeProps) {
style = '',
href = '',
dev = process.env.NODE_ENV === 'development', // 默认本地为true 发布时为false
disabled = false,
disableText,
rootStyle,
rootClassName,
} = props;
const [code, setCode] = useState('');
useEffect(() => {
if (appId) {
if (disabled) {
return;
}
// 由于本地不能微信扫码测试 所以只能模拟 输入code使用weChatLogin
if (dev) {
setCode(random(6));
@ -49,7 +61,7 @@ function QrCode(props: QrCodeProps) {
}
);
}
}, [appId]);
}, [appId, disabled]);
function loadScript(url: string, callback: () => void) {
const script = document.createElement('script');
@ -83,6 +95,25 @@ function QrCode(props: QrCodeProps) {
const prefixCls2 = `${prefixCls}-loginQrCode`;
let V;
let DisableV;
if (disabled) {
DisableV = (
<div
className={classNames(prefixCls2, rootClassName)}
style={rootStyle}
>
<div className={`${prefixCls2}_disable`}>
<div className={`${prefixCls2}_disable_border`}>
{disableText || '禁用微信二维码'}
</div>
</div>
<div className={`${prefixCls2}_disable_info`}>
<span>微信扫一扫</span>
</div>
</div>
);
}
if (dev) {
V = (
<div className={`${prefixCls2}_dev`}>
@ -122,9 +153,16 @@ function QrCode(props: QrCodeProps) {
}
return (
<div className={prefixCls2} id={id}>
{V}
</div>
<>
{DisableV}
<div
className={classNames(prefixCls2, rootClassName)}
id={id}
style={disabled ? { display: 'none' } : rootStyle}
>
{V}
</div>
</>
);
}

19
src/components/config/application/web/index.tsx
View File

@ -88,6 +88,25 @@ export default function Web(props: {
/>
</>
</Form.Item>
<Form.Item
label="授权回调域"
name="domain"
tooltip="授权回调域可选填，未填写的话，使用网页访问的域名当作授权回调域"
>
<>
<Input
placeholder="请输入授权回调域"
type="text"
value={config?.wechat?.domain}
onChange={(e) =>
setValue(
`wechat.domain`,
e.target.value
)
}
/>
</>
</Form.Item>
</Form>
),
},

1
src/entities/Application.ts
View File

@ -18,6 +18,7 @@ export type WebConfig = {
wechat?: {
appId: string;
appSecret: string; //网站 微信扫码登录
domain?: string
};
passport: Passport[];
};