我的message 按钮图标 用来显示消息数
This commit is contained in:
parent
0b4813ffa6
commit
b69e9f775d
|
|
@ -0,0 +1,3 @@
|
|||
/// <reference types="react" />
|
||||
declare const _default: import("react").ComponentType<any>;
|
||||
export default _default;
|
||||
|
|
@ -0,0 +1,52 @@
|
|||
"use strict";
|
||||
Object.defineProperty(exports, "__esModule", { value: true });
|
||||
var tslib_1 = require("tslib");
|
||||
exports.default = OakComponent({
|
||||
isList: false,
|
||||
lifetimes: {
|
||||
attached: function () {
|
||||
this.getMessageCount();
|
||||
},
|
||||
},
|
||||
data: {
|
||||
count: undefined,
|
||||
},
|
||||
methods: {
|
||||
goMessageList: function () {
|
||||
this.navigateTo({
|
||||
url: '/message/list',
|
||||
});
|
||||
},
|
||||
getMessageCount: function () {
|
||||
return tslib_1.__awaiter(this, void 0, void 0, function () {
|
||||
var userId, application, systemId, result;
|
||||
return tslib_1.__generator(this, function (_a) {
|
||||
switch (_a.label) {
|
||||
case 0:
|
||||
userId = this.features.token.getUserId(true);
|
||||
application = this.features.application.getApplication();
|
||||
systemId = application.systemId;
|
||||
if (!userId) return [3 /*break*/, 2];
|
||||
return [4 /*yield*/, this.features.cache.count('message', {
|
||||
data: {
|
||||
id: 1,
|
||||
},
|
||||
filter: {
|
||||
userId: userId,
|
||||
systemId: systemId,
|
||||
visitState: 'unvisited',
|
||||
},
|
||||
})];
|
||||
case 1:
|
||||
result = _a.sent();
|
||||
this.setState({
|
||||
count: result,
|
||||
});
|
||||
_a.label = 2;
|
||||
case 2: return [2 /*return*/];
|
||||
}
|
||||
});
|
||||
});
|
||||
},
|
||||
},
|
||||
});
|
||||
|
|
@ -0,0 +1,4 @@
|
|||
.icon {
|
||||
font-size: 20px;
|
||||
color: var(--oak-color-primary);
|
||||
}
|
||||
|
|
@ -0,0 +1,7 @@
|
|||
import { WebComponentProps } from 'oak-frontend-base';
|
||||
import { EntityDict } from '../../../general-app-domain';
|
||||
export default function Render(props: WebComponentProps<EntityDict, 'user', false, {
|
||||
count?: number;
|
||||
}, {
|
||||
goMessageList: () => void;
|
||||
}>): JSX.Element;
|
||||
|
|
@ -0,0 +1,16 @@
|
|||
"use strict";
|
||||
Object.defineProperty(exports, "__esModule", { value: true });
|
||||
var tslib_1 = require("tslib");
|
||||
var jsx_runtime_1 = require("react/jsx-runtime");
|
||||
var antd_mobile_1 = require("antd-mobile");
|
||||
var icons_1 = require("@ant-design/icons");
|
||||
var mobile_module_less_1 = tslib_1.__importDefault(require("./mobile.module.less"));
|
||||
function Render(props) {
|
||||
var data = props.data, methods = props.methods;
|
||||
var count = data.count;
|
||||
var goMessageList = methods.goMessageList;
|
||||
return ((0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: (0, jsx_runtime_1.jsx)(antd_mobile_1.Badge, tslib_1.__assign({ content: count || '' }, { children: (0, jsx_runtime_1.jsx)(icons_1.BellOutlined, { className: mobile_module_less_1.default.icon, onClick: function () {
|
||||
goMessageList();
|
||||
} }) })) }));
|
||||
}
|
||||
exports.default = Render;
|
||||
|
|
@ -0,0 +1,8 @@
|
|||
.btn {
|
||||
padding-inline-start: 5px;
|
||||
padding-inline-end: 5px;
|
||||
}
|
||||
|
||||
.icon {
|
||||
font-size: 20px;
|
||||
}
|
||||
|
|
@ -0,0 +1,7 @@
|
|||
import { WebComponentProps } from 'oak-frontend-base';
|
||||
import { EntityDict } from '../../../general-app-domain';
|
||||
export default function Render(props: WebComponentProps<EntityDict, 'user', false, {
|
||||
count?: number;
|
||||
}, {
|
||||
goMessageList: () => void;
|
||||
}>): JSX.Element;
|
||||
|
|
@ -0,0 +1,20 @@
|
|||
"use strict";
|
||||
Object.defineProperty(exports, "__esModule", { value: true });
|
||||
var tslib_1 = require("tslib");
|
||||
var jsx_runtime_1 = require("react/jsx-runtime");
|
||||
var react_1 = require("react");
|
||||
var antd_1 = require("antd");
|
||||
var icons_1 = require("@ant-design/icons");
|
||||
var drawerList_1 = tslib_1.__importDefault(require("../../../pages/message/drawerList"));
|
||||
var web_module_less_1 = tslib_1.__importDefault(require("./web.module.less"));
|
||||
function Render(props) {
|
||||
var data = props.data;
|
||||
var count = data.count;
|
||||
var _a = tslib_1.__read((0, react_1.useState)(false), 2), open = _a[0], setOpen = _a[1];
|
||||
return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(antd_1.Badge, tslib_1.__assign({ count: count }, { children: (0, jsx_runtime_1.jsx)(antd_1.Button, { className: web_module_less_1.default.btn, type: "text", shape: "circle", icon: (0, jsx_runtime_1.jsx)(icons_1.BellOutlined, {}), onClick: function () {
|
||||
setOpen(true);
|
||||
} }) })), (0, jsx_runtime_1.jsx)(drawerList_1.default, { open: open, onClose: function () {
|
||||
setOpen(false);
|
||||
} })] }));
|
||||
}
|
||||
exports.default = Render;
|
||||
|
|
@ -75,8 +75,9 @@
|
|||
"scripts": {
|
||||
"make:domain": "ts-node ./scripts/make.ts",
|
||||
"clean": "rimraf lib/*",
|
||||
"copy-files": "copyfiles -u 1 src/**/*.less lib/ & copyfiles -u 1 src/**/*.svg lib/ & copyfiles -u 1 src/**/*.xml lib/ & copyfiles -u 1 src/**/*.wxml lib/ & copyfiles -u 1 src/**/*.wxs lib/ & copyfiles -u 1 src/miniprogram_npm/**/*.js lib/ ",
|
||||
"build": "tsc && npm run copy-files",
|
||||
"copy-files": "copyfiles -u 1 src/**/*.svg lib/ & copyfiles -u 1 src/**/*.xml lib/ & copyfiles -u 1 src/**/*.wxml lib/ & copyfiles -u 1 src/**/*.wxs lib/ & copyfiles -u 1 src/miniprogram_npm/**/*.js lib/ ",
|
||||
"copy-less": "copyfiles -u 1 src/**/*.less lib/",
|
||||
"build": "tsc && npm run copy-files && npm run copy-less",
|
||||
"gen:areaDebug": "ts-node ./scripts/generateAreaDebug.ts",
|
||||
"clean:dir": "ts-node ./scripts/cleanDtsAndJs",
|
||||
"test": "ts-node ./test/test.ts",
|
||||
|
|
|
|||
|
|
@ -1,5 +1,6 @@
|
|||
import { WebComponentProps } from 'oak-frontend-base';
|
||||
import React, { useState } from 'react';
|
||||
|
||||
import { WebComponentProps } from 'oak-frontend-base';
|
||||
import { EntityDict } from '../../../general-app-domain';
|
||||
import Styles from './web.pc.module.less';
|
||||
import { Button, List, Popup, Tag, Input, Radio, Form, Space } from 'antd-mobile';
|
||||
|
|
|
|||
|
|
@ -0,0 +1,39 @@
|
|||
|
||||
export default OakComponent({
|
||||
isList: false,
|
||||
lifetimes: {
|
||||
attached() {
|
||||
this.getMessageCount();
|
||||
},
|
||||
},
|
||||
data: {
|
||||
count: undefined,
|
||||
},
|
||||
methods: {
|
||||
goMessageList() {
|
||||
this.navigateTo({
|
||||
url: '/message/list',
|
||||
});
|
||||
},
|
||||
async getMessageCount() {
|
||||
const userId = this.features.token.getUserId(true);
|
||||
const application = this.features.application.getApplication();
|
||||
const { systemId } = application;
|
||||
if (userId) {
|
||||
const result = await this.features.cache.count('message', {
|
||||
data: {
|
||||
id: 1,
|
||||
},
|
||||
filter: {
|
||||
userId,
|
||||
systemId,
|
||||
visitState: 'unvisited',
|
||||
},
|
||||
});
|
||||
this.setState({
|
||||
count: result,
|
||||
});
|
||||
}
|
||||
},
|
||||
},
|
||||
});
|
||||
|
|
@ -0,0 +1,4 @@
|
|||
.icon {
|
||||
font-size: 20px;
|
||||
color: var(--oak-color-primary);
|
||||
}
|
||||
|
|
@ -0,0 +1,8 @@
|
|||
.btn {
|
||||
padding-inline-start: 5px;
|
||||
padding-inline-end: 5px;
|
||||
}
|
||||
|
||||
.icon {
|
||||
font-size: 20px;
|
||||
}
|
||||
|
|
@ -0,0 +1,48 @@
|
|||
import React, { useState } from 'react';
|
||||
import { Button, Badge } from 'antd';
|
||||
import { BellOutlined } from '@ant-design/icons';
|
||||
import { WebComponentProps } from 'oak-frontend-base';
|
||||
import { EntityDict } from '../../../general-app-domain';
|
||||
import MessageDrawerList from '../../../pages/message/drawerList';
|
||||
|
||||
import Style from './web.module.less';
|
||||
|
||||
export default function Render(
|
||||
props: WebComponentProps<
|
||||
EntityDict,
|
||||
'user',
|
||||
false,
|
||||
{
|
||||
count?: number;
|
||||
},
|
||||
{
|
||||
goMessageList: () => void;
|
||||
}
|
||||
>
|
||||
) {
|
||||
const { data } = props;
|
||||
const { count } = data;
|
||||
const [open, setOpen] = useState(false);
|
||||
|
||||
return (
|
||||
<>
|
||||
<Badge count={count}>
|
||||
<Button
|
||||
className={Style.btn}
|
||||
type="text"
|
||||
shape="circle"
|
||||
icon={<BellOutlined />}
|
||||
onClick={() => {
|
||||
setOpen(true);
|
||||
}}
|
||||
/>
|
||||
</Badge>
|
||||
<MessageDrawerList
|
||||
open={open}
|
||||
onClose={() => {
|
||||
setOpen(false);
|
||||
}}
|
||||
/>
|
||||
</>
|
||||
);
|
||||
}
|
||||
|
|
@ -0,0 +1,38 @@
|
|||
import React from 'react';
|
||||
import { Badge } from 'antd-mobile';
|
||||
import { BellOutlined } from '@ant-design/icons';
|
||||
import { WebComponentProps } from 'oak-frontend-base';
|
||||
import { EntityDict } from '../../../general-app-domain';
|
||||
|
||||
import Style from './mobile.module.less';
|
||||
|
||||
export default function Render(
|
||||
props: WebComponentProps<
|
||||
EntityDict,
|
||||
'user',
|
||||
false,
|
||||
{
|
||||
count?: number;
|
||||
},
|
||||
{
|
||||
goMessageList: () => void;
|
||||
}
|
||||
>
|
||||
) {
|
||||
const { data, methods } = props;
|
||||
const { count } = data;
|
||||
const { goMessageList } = methods;
|
||||
|
||||
return (
|
||||
<>
|
||||
<Badge content={count || ''}>
|
||||
<BellOutlined
|
||||
className={Style.icon}
|
||||
onClick={() => {
|
||||
goMessageList();
|
||||
}}
|
||||
/>
|
||||
</Badge>
|
||||
</>
|
||||
);
|
||||
}
|
||||
Loading…
Reference in New Issue