errorPage和增加了一种error定义

This commit is contained in:
Xu Chang 2023-01-07 16:57:44 +08:00
parent 09be4a7a73
commit 4e4ce86eec
8 changed files with 90 additions and 210 deletions

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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