errorPage和增加了一种error定义
This commit is contained in:
parent
09be4a7a73
commit
4e4ce86eec
|
|
@ -1,19 +1,2 @@
|
|||
import React from 'react';
|
||||
import './index.less';
|
||||
declare enum ECode {
|
||||
forbidden = 403,
|
||||
notFount = 404,
|
||||
error = 500,
|
||||
networkError = "network-error",
|
||||
browserIncompatible = "browser-incompatible",
|
||||
maintenance = "maintenance"
|
||||
}
|
||||
interface IErrorPageProps {
|
||||
code: ECode;
|
||||
title?: string;
|
||||
desc?: string;
|
||||
children?: React.ReactNode;
|
||||
icon?: React.ReactNode;
|
||||
}
|
||||
declare function ErrorPage(props: IErrorPageProps): JSX.Element;
|
||||
export default ErrorPage;
|
||||
declare const _default: string;
|
||||
export default _default;
|
||||
|
|
|
|||
|
|
@ -1,65 +1,71 @@
|
|||
"use strict";
|
||||
var _a;
|
||||
Object.defineProperty(exports, "__esModule", { value: true });
|
||||
var tslib_1 = require("tslib");
|
||||
var jsx_runtime_1 = require("react/jsx-runtime");
|
||||
var antd_1 = require("antd");
|
||||
var react_router_dom_1 = require("react-router-dom");
|
||||
var assets_result_403_svg_1 = require("./assets/svg/assets-result-403.svg");
|
||||
var assets_result_404_svg_1 = require("./assets/svg/assets-result-404.svg");
|
||||
var assets_result_500_svg_1 = require("./assets/svg/assets-result-500.svg");
|
||||
var assets_result_maintenance_svg_1 = require("./assets/svg/assets-result-maintenance.svg");
|
||||
var assets_result_browser_incompatible_svg_1 = require("./assets/svg/assets-result-browser-incompatible.svg");
|
||||
var assets_result_network_error_svg_1 = require("./assets/svg/assets-result-network-error.svg");
|
||||
require("./index.less");
|
||||
var ECode;
|
||||
(function (ECode) {
|
||||
ECode[ECode["forbidden"] = 403] = "forbidden";
|
||||
ECode[ECode["notFount"] = 404] = "notFount";
|
||||
ECode[ECode["error"] = 500] = "error";
|
||||
ECode["forbidden"] = "403";
|
||||
ECode["notFount"] = "404";
|
||||
ECode["error"] = "500";
|
||||
ECode["networkError"] = "network-error";
|
||||
ECode["browserIncompatible"] = "browser-incompatible";
|
||||
ECode["maintenance"] = "maintenance";
|
||||
})(ECode || (ECode = {}));
|
||||
var errorInfo = (_a = {},
|
||||
;
|
||||
var DefaultErrorInfo = (_a = {},
|
||||
_a[ECode.forbidden] = {
|
||||
title: '403 Forbidden',
|
||||
desc: '抱歉,您无权限访问此页面',
|
||||
icon: (0, jsx_runtime_1.jsx)(assets_result_403_svg_1.ReactComponent, {}),
|
||||
imagePath: './assets/svg/assets-result-403.svg',
|
||||
},
|
||||
_a[ECode.notFount] = {
|
||||
title: '404 Not Found',
|
||||
desc: '抱歉,您访问的页面不存在。',
|
||||
icon: (0, jsx_runtime_1.jsx)(assets_result_404_svg_1.ReactComponent, {}),
|
||||
imagePath: './assets/svg/assets-result-404.svg',
|
||||
},
|
||||
_a[ECode.error] = {
|
||||
title: '500 Internal Server Error',
|
||||
desc: '抱歉,服务器出错啦!',
|
||||
icon: (0, jsx_runtime_1.jsx)(assets_result_500_svg_1.ReactComponent, {}),
|
||||
imagePath: './assets/svg/assets-result-500.svg',
|
||||
},
|
||||
_a[ECode.networkError] = {
|
||||
title: '网络异常',
|
||||
desc: '网络异常,请稍后再试',
|
||||
icon: (0, jsx_runtime_1.jsx)(assets_result_network_error_svg_1.ReactComponent, {}),
|
||||
},
|
||||
_a[ECode.browserIncompatible] = {
|
||||
title: '浏览器版本低',
|
||||
desc: '抱歉,您正在使用的浏览器版本过低,无法打开当前网页。',
|
||||
icon: (0, jsx_runtime_1.jsx)(assets_result_browser_incompatible_svg_1.ReactComponent, {}),
|
||||
imagePath: './assets/svg/assets-result-network-error.svg',
|
||||
},
|
||||
_a[ECode.maintenance] = {
|
||||
title: '系统维护中',
|
||||
desc: '系统维护中,请稍后再试。',
|
||||
icon: (0, jsx_runtime_1.jsx)(assets_result_maintenance_svg_1.ReactComponent, {}),
|
||||
imagePath: './assets/svg/assets-result-maintenance.svg',
|
||||
},
|
||||
_a);
|
||||
function ErrorPage(props) {
|
||||
var navigate = (0, react_router_dom_1.useNavigate)();
|
||||
var code = props.code;
|
||||
var info = errorInfo[code];
|
||||
var prefixCls = 'oak';
|
||||
return ((0, jsx_runtime_1.jsxs)("div", tslib_1.__assign({ className: "".concat(prefixCls, "-errorBox") }, { children: [props.icon || (info === null || info === void 0 ? void 0 : info.icon), (0, jsx_runtime_1.jsx)("div", tslib_1.__assign({ className: "".concat(prefixCls, "-errorBox__title") }, { children: props.title || (info === null || info === void 0 ? void 0 : info.title) })), (0, jsx_runtime_1.jsx)("div", tslib_1.__assign({ className: "".concat(prefixCls, "-errorBox__description") }, { children: props.desc || (info === null || info === void 0 ? void 0 : info.desc) })), props.children || ((0, jsx_runtime_1.jsx)(antd_1.Button, tslib_1.__assign({ type: "primary", onClick: function () {
|
||||
navigate(-1);
|
||||
} }, { children: "\u8FD4\u56DE" })))] })));
|
||||
}
|
||||
exports.default = ErrorPage;
|
||||
exports.default = Component({
|
||||
properties: {
|
||||
code: String,
|
||||
title: String,
|
||||
desc: String,
|
||||
icon: String,
|
||||
imagePath: String,
|
||||
},
|
||||
lifetimes: {
|
||||
ready: function () {
|
||||
var _a = this.data, title = _a.title, desc = _a.desc, code = _a.code, imagePath = _a.imagePath;
|
||||
var title2 = title;
|
||||
if (code) {
|
||||
this.setData({
|
||||
desc: desc || DefaultErrorInfo[code].desc,
|
||||
imagePath: imagePath || DefaultErrorInfo[code].imagePath,
|
||||
});
|
||||
if (!title2) {
|
||||
title2 = DefaultErrorInfo[code].title;
|
||||
}
|
||||
wx.setNavigationBarTitle({
|
||||
title: title2,
|
||||
});
|
||||
}
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
goBack: function () {
|
||||
wx.navigateBack();
|
||||
}
|
||||
}
|
||||
});
|
||||
|
|
|
|||
|
|
@ -1,35 +1,17 @@
|
|||
.oak-errorBox {
|
||||
@import "../../../config/styles/mp/index.less";
|
||||
@import "../../../config/styles/mp/mixins.less";
|
||||
.content {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
height: 75vh;
|
||||
// padding: 24px;
|
||||
min-height: 400px;
|
||||
color: var(--oak-color-primary);
|
||||
width: 60%;
|
||||
|
||||
img {
|
||||
width: 200px;
|
||||
height: 140px;
|
||||
color: var(--oak-color-primary);
|
||||
.desc {
|
||||
color: red;
|
||||
font-size: large;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
&__title {
|
||||
font-weight: 500;
|
||||
font-size: 20px;
|
||||
line-height: 28px;
|
||||
margin-top: 8px;
|
||||
color: var(--oak-text-color-primary);
|
||||
image {
|
||||
max-width: 65%;
|
||||
}
|
||||
|
||||
&__description {
|
||||
margin: 8px 0 32px;
|
||||
font-size: 14px;
|
||||
line-height: 22px;
|
||||
color: var(--oak-text-color-secondary);
|
||||
}
|
||||
|
||||
&__rightButton {
|
||||
margin-left: 8px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -19,6 +19,9 @@ export declare class OakChangeLoginWayException extends OakUserException {
|
|||
constructor(userId: string, usingIdCard: boolean, usingWechatUser: boolean, usingEmail: boolean, message?: string);
|
||||
toString(): string;
|
||||
}
|
||||
export declare class OakMobileUnsetException extends OakUserException {
|
||||
constructor(message?: string);
|
||||
}
|
||||
export declare class OakUserDisabledException extends OakUserException {
|
||||
constructor(message?: string);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,6 +1,6 @@
|
|||
"use strict";
|
||||
Object.defineProperty(exports, "__esModule", { value: true });
|
||||
exports.makeException = exports.OakTokenExpiredException = exports.OakUserDisabledException = exports.OakChangeLoginWayException = exports.OakDistinguishUserException = exports.OakNotEnoughMoneyException = void 0;
|
||||
exports.makeException = exports.OakTokenExpiredException = exports.OakUserDisabledException = exports.OakMobileUnsetException = exports.OakChangeLoginWayException = exports.OakDistinguishUserException = exports.OakNotEnoughMoneyException = void 0;
|
||||
var tslib_1 = require("tslib");
|
||||
var types_1 = require("oak-domain/lib/types");
|
||||
var OakNotEnoughMoneyException = /** @class */ (function (_super) {
|
||||
|
|
@ -61,6 +61,14 @@ var OakChangeLoginWayException = /** @class */ (function (_super) {
|
|||
return OakChangeLoginWayException;
|
||||
}(types_1.OakUserException));
|
||||
exports.OakChangeLoginWayException = OakChangeLoginWayException;
|
||||
var OakMobileUnsetException = /** @class */ (function (_super) {
|
||||
tslib_1.__extends(OakMobileUnsetException, _super);
|
||||
function OakMobileUnsetException(message) {
|
||||
return _super.call(this, message || '您需要先登记手机号') || this;
|
||||
}
|
||||
return OakMobileUnsetException;
|
||||
}(types_1.OakUserException));
|
||||
exports.OakMobileUnsetException = OakMobileUnsetException;
|
||||
var OakUserDisabledException = /** @class */ (function (_super) {
|
||||
tslib_1.__extends(OakUserDisabledException, _super);
|
||||
function OakUserDisabledException(message) {
|
||||
|
|
@ -96,6 +104,9 @@ function makeException(data) {
|
|||
case 'OakTokenExpiredException': {
|
||||
return new OakTokenExpiredException(message);
|
||||
}
|
||||
case 'OakMobileUnsetException': {
|
||||
return new OakMobileUnsetException(message);
|
||||
}
|
||||
default: {
|
||||
return;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,35 +1,17 @@
|
|||
.oak-errorBox {
|
||||
@import "../../../config/styles/mp/index.less";
|
||||
@import "../../../config/styles/mp/mixins.less";
|
||||
.content {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
height: 75vh;
|
||||
// padding: 24px;
|
||||
min-height: 400px;
|
||||
color: var(--oak-color-primary);
|
||||
width: 60%;
|
||||
|
||||
img {
|
||||
width: 200px;
|
||||
height: 140px;
|
||||
color: var(--oak-color-primary);
|
||||
.desc {
|
||||
color: red;
|
||||
font-size: large;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
&__title {
|
||||
font-weight: 500;
|
||||
font-size: 20px;
|
||||
line-height: 28px;
|
||||
margin-top: 8px;
|
||||
color: var(--oak-text-color-primary);
|
||||
image {
|
||||
max-width: 65%;
|
||||
}
|
||||
|
||||
&__description {
|
||||
margin: 8px 0 32px;
|
||||
font-size: 14px;
|
||||
line-height: 22px;
|
||||
color: var(--oak-text-color-secondary);
|
||||
}
|
||||
|
||||
&__rightButton {
|
||||
margin-left: 8px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -1,96 +0,0 @@
|
|||
import React from 'react';
|
||||
|
||||
import { Button } from 'antd';
|
||||
import { useNavigate } from 'react-router-dom';
|
||||
|
||||
import { ReactComponent as Light403Icon } from './assets/svg/assets-result-403.svg';
|
||||
import { ReactComponent as Light404Icon } from './assets/svg/assets-result-404.svg';
|
||||
import { ReactComponent as Light500Icon } from './assets/svg/assets-result-500.svg';
|
||||
import { ReactComponent as LightMaintenanceIcon } from './assets/svg/assets-result-maintenance.svg';
|
||||
import { ReactComponent as LightBrowserIncompatibleIcon } from './assets/svg/assets-result-browser-incompatible.svg';
|
||||
import { ReactComponent as LightNetworkErrorIcon } from './assets/svg/assets-result-network-error.svg';
|
||||
import './index.less';
|
||||
|
||||
enum ECode {
|
||||
forbidden = 403,
|
||||
notFount = 404,
|
||||
error = 500,
|
||||
|
||||
networkError = 'network-error',
|
||||
browserIncompatible = 'browser-incompatible',
|
||||
maintenance = 'maintenance',
|
||||
}
|
||||
|
||||
interface IErrorPageProps {
|
||||
code: ECode;
|
||||
title?: string;
|
||||
desc?: string;
|
||||
children?: React.ReactNode;
|
||||
icon?: React.ReactNode;
|
||||
}
|
||||
|
||||
const errorInfo = {
|
||||
[ECode.forbidden]: {
|
||||
title: '403 Forbidden',
|
||||
desc: '抱歉,您无权限访问此页面',
|
||||
icon: <Light403Icon />,
|
||||
},
|
||||
[ECode.notFount]: {
|
||||
title: '404 Not Found',
|
||||
desc: '抱歉,您访问的页面不存在。',
|
||||
icon: <Light404Icon />,
|
||||
},
|
||||
[ECode.error]: {
|
||||
title: '500 Internal Server Error',
|
||||
desc: '抱歉,服务器出错啦!',
|
||||
icon: <Light500Icon />,
|
||||
},
|
||||
[ECode.networkError]: {
|
||||
title: '网络异常',
|
||||
desc: '网络异常,请稍后再试',
|
||||
icon: <LightNetworkErrorIcon />,
|
||||
},
|
||||
[ECode.browserIncompatible]: {
|
||||
title: '浏览器版本低',
|
||||
desc: '抱歉,您正在使用的浏览器版本过低,无法打开当前网页。',
|
||||
icon: <LightBrowserIncompatibleIcon />,
|
||||
},
|
||||
[ECode.maintenance]: {
|
||||
title: '系统维护中',
|
||||
desc: '系统维护中,请稍后再试。',
|
||||
icon: <LightMaintenanceIcon />,
|
||||
},
|
||||
};
|
||||
|
||||
|
||||
function ErrorPage(props: IErrorPageProps) {
|
||||
const navigate = useNavigate();
|
||||
const { code } = props;
|
||||
const info = errorInfo[code];
|
||||
const prefixCls = 'oak';
|
||||
|
||||
|
||||
return (
|
||||
<div className={`${prefixCls}-errorBox`}>
|
||||
{props.icon || info?.icon}
|
||||
<div className={`${prefixCls}-errorBox__title`}>
|
||||
{props.title || info?.title}
|
||||
</div>
|
||||
<div className={`${prefixCls}-errorBox__description`}>
|
||||
{props.desc || info?.desc}
|
||||
</div>
|
||||
{props.children || (
|
||||
<Button
|
||||
type="primary"
|
||||
onClick={() => {
|
||||
navigate(-1);
|
||||
}}
|
||||
>
|
||||
返回
|
||||
</Button>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
export default ErrorPage;
|
||||
|
|
@ -60,6 +60,12 @@ export class OakChangeLoginWayException extends OakUserException {
|
|||
}
|
||||
}
|
||||
|
||||
export class OakMobileUnsetException extends OakUserException {
|
||||
constructor(message?: string) {
|
||||
super(message || '您需要先登记手机号');
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
export class OakUserDisabledException extends OakUserException {
|
||||
constructor(message?: string) {
|
||||
|
|
@ -99,6 +105,9 @@ export function makeException(data: {
|
|||
case 'OakTokenExpiredException': {
|
||||
return new OakTokenExpiredException(message);
|
||||
}
|
||||
case 'OakMobileUnsetException': {
|
||||
return new OakMobileUnsetException(message);
|
||||
}
|
||||
default: {
|
||||
return;
|
||||
}
|
||||
|
|
|
|||
Loading…
Reference in New Issue