Skip to content

J
jinfa-admin
Commit 7c60ea56 authored by Bill's avatar Bill
Browse files
Options

Merge branch 'dev' of 10.0.0.22:lingxi/lingxi-business-system into dev

parents c7ddc3ef cb6b1f5d
Hide whitespace changes
Inline Side-by-side
Showing with 1506 additions and 75 deletions
config/routes/index.ts
View file @ 7c60ea56
......@@ -21,6 +21,7 @@ import commentRoutes from './commentRoutes';
import contentRoute from './contentRoute'; // 内容管理
import balancedRoute from './balancedRoute'; // 平台结算管理
import capitalAccount from './capitalAccountRoute'; // 会员资金账户
import messageRoute from './messgeRoute'; // 消息管理
const routeList = [
pageCustomized,
calssPropertyRoute,
......@@ -37,6 +38,7 @@ const routeList = [
requisitionRoute,
enquiryOfferRoute,
capitalAccount,
messageRoute,
]
const router = [
......
config/routes/messgeRoute.ts 0 → 100644
View file @ 7c60ea56
/*
* 消息管理路由
*/
const router = {
path: '/message',
name: 'message',
icon: 'SmileOutlined',
hidePageHeader: true,
routes: [
{
path: '/message/messageList',
name: 'messageList',
component: '@/pages/message',
},
{
path: '/message/messageList/add',
name: 'addMessage',
hideInMenu: true,
component: '@/pages/message/addMessage',
},
]
}
export default router
src/components/StatusTag/index.tsx
View file @ 7c60ea56
......@@ -5,13 +5,13 @@
* @LastEditTime: 2020-08-31 18:59:18
* @Description: 状态 tag
*/
import React from 'react';
import React, { ReactNode } from 'react';
import classNames from 'classnames';
import styles from './index.less';
interface StatusTagProps {
type: 'success' | 'warnning' | 'default' | 'danger' | 'primary';
title: string;
title: string | ReactNode;
};
const StatusTag: React.FC<StatusTagProps> = ({ type, title }) => {
......
src/locales/zh-CN/menu.ts
View file @ 7c60ea56
......@@ -196,5 +196,10 @@ export default {
'menu.capitalAccount.paymentWithdraw': '待支付提现',
'menu.capitalAccount.paymentDetails': '支付提现',
// 消息管理
'menu.message': '消息管理',
'menu.message.messageList': '消息列表',
'menu.message.addMessage': '新建消息',
}
// export default utils.transformDataPre(data, 'menu')
src/pages/home.tsx deleted 100644 → 0
View file @ c7ddc3ef
import React, { Component } from 'react';
class Home extends Component {
render() {
return (
<div
style={{
margin: '-24px',
}}
>
<img
src="https://shushangyun01.oss-cn-shenzhen.aliyuncs.com/bc7f3a2385c0438bafcf1b74212cc7721601275065050.png"
width="100%"
height="auto"
/>
</div>
);
}
}
export default Home
src/pages/home/component/columnChart.tsx 0 → 100644
View file @ 7c60ea56
import React from 'react';
import { Chart, Interval } from 'bizcharts';
interface IProps {
currentIndex: number,
}
const ColumnChart: React.FC<IProps> = (props) => {
const { currentIndex } = props
const data1 = [
{ day: '08-01', sales: 38 },
{ day: '08-02', sales: 52 },
{ day: '08-03', sales: 61 },
{ day: '08-04', sales: 45 },
{ day: '08-05', sales: 48 },
{ day: '08-06', sales: 38 },
{ day: '08-07', sales: 38 },
];
const data2 = [
{ day: '08-01', sales: 38 },
{ day: '08-02', sales: 52 },
{ day: '08-03', sales: 61 },
{ day: '08-04', sales: 45 },
{ day: '08-05', sales: 48 },
{ day: '08-06', sales: 38 },
{ day: '08-07', sales: 38 },
{ day: '08-08', sales: 38 },
{ day: '08-09', sales: 48 },
{ day: '08-10', sales: 23 },
{ day: '08-11', sales: 35 },
{ day: '08-12', sales: 54 },
{ day: '08-13', sales: 32 },
{ day: '08-14', sales: 45 },
{ day: '08-15', sales: 32 },
];
return (
<Chart height={302} autoFit data={currentIndex === 2 ? data2 : data1} >
<Interval position="day*sales" />
</Chart>
)
}
export default ColumnChart;
\ No newline at end of file
src/pages/home/component/lineChart.tsx 0 → 100644
View file @ 7c60ea56
import React from 'react';
import {
Chart,
Geom,
Axis,
Tooltip,
Legend,
Annotation,
Guide
} from 'bizcharts';
const { Line } = Guide;
interface IProps {
currentIndex: number,
}
const LineChart: React.FC<IProps> = (props) => {
const { currentIndex } = props
const data1 = [
{
"month": "2020-07-13",
"city": "供应链",
"revenue": 1
},
{
"month": "2020-07-13",
"city": "采购商",
"revenue": 1.56
},
{
"month": "2020-07-13",
"city": "加工企业",
"revenue": 1.66
},
{
"month": "2020-07-14",
"city": "供应链",
"revenue": 0.35
},
{
"month": "2020-07-14",
"city": "采购商",
"revenue": 0.89
},
{
"month": "2020-07-14",
"city": "加工企业",
"revenue": 0.89
},
{
"month": "2020-07-15",
"city": "供应链",
"revenue": 0.19
},
{
"month": "2020-07-15",
"city": "采购商",
"revenue": 0.18
},
{
"month": "2020-07-15",
"city": "加工企业",
"revenue": 0.28
},
{
"month": "2020-07-16",
"city": "供应链",
"revenue": 1.2
},
{
"month": "2020-07-16",
"city": "采购商",
"revenue": 0.59
},
{
"month": "2020-07-16",
"city": "加工企业",
"revenue": 0.28
},
{
"month": "2020-07-17",
"city": "供应链",
"revenue": 1.52
},
{
"month": "2020-07-17",
"city": "采购商",
"revenue": 0.3583
},
{
"month": "2020-07-17",
"city": "加工企业",
"revenue": 0.35
},
{
"month": "2020-07-18",
"city": "供应链",
"revenue": 1.15
},
{
"month": "2020-07-18",
"city": "采购商",
"revenue": 1.025
},
{
"month": "2020-07-18",
"city": "加工企业",
"revenue": 1.28
},
{
"month": "2020-07-19",
"city": "供应链",
"revenue": 1.132
},
{
"month": "2020-07-19",
"city": "采购商",
"revenue": 1.15
},
{
"month": "2020-07-19",
"city": "加工企业",
"revenue": 0.26
},
];
const data2 = [
{
"month": "2020-07-13",
"city": "供应链",
"revenue": 1
},
{
"month": "2020-07-13",
"city": "采购商",
"revenue": 1.56
},
{
"month": "2020-07-13",
"city": "加工企业",
"revenue": 1.66
},
{
"month": "2020-07-14",
"city": "供应链",
"revenue": 0.35
},
{
"month": "2020-07-14",
"city": "采购商",
"revenue": 0.89
},
{
"month": "2020-07-14",
"city": "加工企业",
"revenue": 0.89
},
{
"month": "2020-07-15",
"city": "供应链",
"revenue": 0.19
},
{
"month": "2020-07-15",
"city": "采购商",
"revenue": 0.18
},
{
"month": "2020-07-15",
"city": "加工企业",
"revenue": 0.28
},
{
"month": "2020-07-16",
"city": "供应链",
"revenue": 1.2
},
{
"month": "2020-07-16",
"city": "采购商",
"revenue": 0.59
},
{
"month": "2020-07-16",
"city": "加工企业",
"revenue": 0.28
},
{
"month": "2020-07-17",
"city": "供应链",
"revenue": 1.52
},
{
"month": "2020-07-17",
"city": "采购商",
"revenue": 0.3583
},
{
"month": "2020-07-17",
"city": "加工企业",
"revenue": 0.35
},
{
"month": "2020-07-18",
"city": "供应链",
"revenue": 1.15
},
{
"month": "2020-07-18",
"city": "采购商",
"revenue": 1.025
},
{
"month": "2020-07-18",
"city": "加工企业",
"revenue": 1.28
},
{
"month": "2020-07-19",
"city": "供应链",
"revenue": 1.132
},
{
"month": "2020-07-19",
"city": "采购商",
"revenue": 1.15
},
{
"month": "2020-07-19",
"city": "加工企业",
"revenue": 0.26
},
];
const scale = {
"revenue": {
"range": [
0,
1
],
"ticks": [
0,
1,
2,
3,
4
]
},
"month": {
"range":[0.05, 0.95]
}
};
return (
<Chart height={360} data={currentIndex === 2 ? data2 : data1} scale={scale} forceFit>
<Legend position="top-left" />
<Axis name="month" />
<Axis
name="revenue"
label={{
formatter: val => `${val}%`,
}}
/>
<Tooltip
showCrosshairs
shared
/>
<Geom type="line" tooltip={['revenue*city', (value, name) => {
return {
value: `${value.toFixed(3)} %`,
name
}
}]} position="month*revenue" size={2} color={'city'} />
<Geom
type="point"
tooltip={false}
position="month*revenue"
size={4}
shape={'circle'}
color={'city'}
style={{
stroke: '#fff',
lineWidth: 1,
}}
/>
<Annotation.Text
position={['50%', '50%']}
alignX="middle"
alignY="middle"
html={`<div style="color:#8c8c8c;font-size:1.16em;text-align: center;width: 10em;">项目总数<br><span style="color:red;font-size:2.5em;">${200}</span></div>`}
/>
</Chart>
);
}
export default LineChart;
\ No newline at end of file
src/pages/home/index.less 0 → 100644
View file @ 7c60ea56
// home页面样式
.homeCard{
border-radius: 3px;
position: relative;
:global {
.ant-card-head-title{
font-size: 12px;
color: #909399;
}
}
.numberDesc{
font-size: 32px;
font-weight: 500;
color: #303133;
}
.numberIcon{
text-align: right;
position: absolute;
top: -10px;
right: 0px;
}
}
.lineDesc{
display: flex;
align-items: center;
margin-top: 14px;
position: relative;
img{
display: block;
width: 48px;
height: 48px;
margin: 24px 16px 24px 24px;
}
.lineDescText{
p{
margin-bottom: 8px;
line-height: 1;
}
.lineDescTitle{
font-size: 24px;
font-weight: 500;
color: #303133;
}
.lineDescTip{
font-size: 12px;
font-weight: 400;
color: #909399;
}
}
a{
position: absolute;
right: 30px;
}
}
.chartBox{
margin-top: 24px;
}
.sideListBox{
:global{
.ant-list-item-meta-title{
font-size: 24px;
font-weight: 500;
color: #303133;
}
}
}
.sideAdBox{
height: 100px;
margin: 22px 24px 13px;
border-radius: 5px;
background-color: #6C9CEB;
position: relative;
a{
font-size: 16px;
font-weight: 500;
color: #FFFFFF;
height: 100px;
line-height: 100px;
margin-left: 24px;
}
img{
position: absolute;
right: 0;
bottom: 0;
}
}
.commodityTotalTitle{
text-align: center;
span{
font-size: 12px;
font-weight: 400;
color: #909399;
}
p{
height: 72px;
font-size: 24px;
font-weight: 500;
color: #303133;
line-height: 72px;
}
}
.commodityTotalDesc{
display: flex;
flex: 1;
.aHalfOfWidth {
width: 50%;
}
}
// 便签样式
.notePaperBox{
width: 100%;
height: 248px;
background: #6C9CEB;
border-radius: 3px;
.notePaperContainer{
width: calc(100% - 2px);
height: 50%;
border-top: 0;
.noteGap{
width: 96%;
height: calc(30% - 1px);
text-align: center;
border-top: 1px dashed #c5c5c5;
margin: 0 auto;
position: relative;
&::before{
content: '';
width: 10px;
height: 10px;
position: absolute;
border-radius: 50%;
border-left: 1px solid #F4F5F7;
background-color: #F4F5F7;
position:absolute;
left: -11px;
top: -5px;
}
&::after{
content: '';
width: 10px;
height: 10px;
position: absolute;
border-radius: 50%;
border-left: 1px solid #F4F5F7;
background-color: #F4F5F7;
position:absolute;
right: -11px;
top: -5px;
}
}
.noteHeader{
p{
display: flex;
align-items: center;
padding: 20px 0 8px;
color: #FFFFFF;
font-size: 14px;
font-weight: 500;
img{
padding: 0 16px 0 20px;
}
}
}
.noteBody{
width: 100%;
height: 70%;
text-align: center;
p{
color: #fff;
font-size: 24px;
font-weight: 500;
a{
color: #fff;
font-size: 14px;
font-weight: 400;
}
}
}
}
}
.notePaperBoxGreen{
background-color: #41CC9E;
}
.feeCustomCard{
background-color: #fff;
border-radius: 3px;
height: 110px;
}
.dataRiskTip{
font-size: 12px;
font-weight: 400;
color: #909399;
}
.dataRiskAction{
display: flex;
> p{
width: 240px;
height: 48px;
background: #FAFBFC;
line-height: 48px;
margin-right: 24px;
> img{
margin: 8px 16px;
}
}
}
// 适配
@media screen and (max-width: 1441px) {
.homeCard{
.numberDesc{
font-size: 28px;
}
}
.notePaperBox{
.notePaperContainer{
.noteHeader{
p{
font-size: 12px;
img{
padding: 0;
margin: 0 4px;
width: 36px;
height: 36px;
}
span{
padding-right: 4px;
}
}
}
}
}
}
\ No newline at end of file
src/pages/home/index.tsx 0 → 100644
View file @ 7c60ea56
import React, { useState, useEffect } from 'react'
import { PageHeaderWrapper } from '@ant-design/pro-layout'
import { Button, Card, Space, Radio, Row, Col, Table, Tabs, Tag, Avatar, Image, List, Badge } from 'antd'
import cx from 'classnames'
import styles from './index.less'
import StatusTag from '@/components/StatusTag'
import { CaretUpOutlined, RightCircleFilled, RightOutlined } from '@ant-design/icons'
// 图标图片集
import totalIcona1 from '../../asserts/home-icon-23.png'
import totalIcona2 from '../../asserts/home-icon-12.png'
import totalIcona3 from '../../asserts/home-icon-10.png'
import totalIcona4 from '../../asserts/home-icon-11.png'
// 折线图描述
import lineIcon1 from '../../asserts/home-icon-24.png'
import lineIcon2 from '../../asserts/home-icon-25.png'
import lineIcon3 from '../../asserts/home-icon-26.png'
import lineIcon4 from '../../asserts/home-icon-27.png'
// 侧边 商品品牌统计图标
import sideIcon from '../../asserts/home-icon-28.png'
import totalCommdity from '../../asserts/home-icon-13.png'
import totalBrand1 from '../../asserts/home-icon-21.png'
import totalBrand2 from '../../asserts/home-icon-22.png'
// 收付款图标
import feeIcon1 from '../../asserts/home-icon-15.png'
import feeIcon2 from '../../asserts/home-icon-16.png'
import feeIcon3 from '../../asserts/home-icon-17.png'
import feeIcon4 from '../../asserts/home-icon-18.png'
import feeIcon5 from '../../asserts/home-icon-19.png'
import feeIcon6 from '../../asserts/home-icon-20.png'
// 数据风控图标
import dataRiskIcon1 from '../../asserts/home-icon-1.png'
import dataRiskIcon2 from '../../asserts/home-icon-2.png'
import dataRiskIcon3 from '../../asserts/home-icon-3.png'
import dataRiskIcon4 from '../../asserts/home-icon-4.png'
import dataRiskIcon5 from '../../asserts/home-icon-5.png'
import dataRiskIcon6 from '../../asserts/home-icon-6.png'
import dataRiskIcon7 from '../../asserts/home-icon-7.png'
import dataRiskIcon8 from '../../asserts/home-icon-8.png'
import LineChart from './component/lineChart'
import ColumnChart from './component/columnChart'
const Home: React.FC<{}> = () => {
const [currentColumnAction, setCurrentColumnAction] = useState<number>(2)
const [currentLineAction, setCurrentLineAction] = useState<number>(2)
const onLineAction = (el) => {
setCurrentLineAction(el.target.value)
}
const onColumnAction = (el) => {
setCurrentColumnAction(el.target.value)
}
const data = [
{
title: 'Title 1',
},
{
title: 'Title 2',
},
];
return (
// 全局统计
<div>
<Space direction="vertical" style={{width:'100%'}}>
<Row gutter={[24, 12]}>
<Col span={6}>
<Card
headStyle={{borderBottom:'none'}}
title="今日新增订单(元)"
bordered={false}
className={styles.homeCard}
>
<Row>
<Col span={18}>
<p className={styles.numberDesc}>102,086.00</p>
</Col>
<Col span={6}>
<p className={styles.numberIcon}>
<img src={totalIcona1} alt=""/>
</p>
</Col>
</Row>
<p>
<StatusTag title={<><CaretUpOutlined />3.4%</>} type="success" />
<span>&nbsp;&nbsp;相比昨日</span>
</p>
</Card>
</Col>
<Col span={6}>
<Card
headStyle={{borderBottom:'none'}}
title="今日新增会员"
bordered={false}
className={styles.homeCard}
>
<Row>
<Col span={18}>
<p className={styles.numberDesc}>102,086.00</p>
</Col>
<Col span={6}>
<p className={styles.numberIcon}>
<img src={totalIcona2} alt=""/>
</p>
</Col>
</Row>
<p>
<StatusTag title={<><CaretUpOutlined />3.4%</>} type="success" />
<span>&nbsp;&nbsp;相比昨日</span>
</p>
</Card>
</Col>
<Col span={6}>
<Card
headStyle={{borderBottom:'none'}}
title="今日新增商品"
bordered={false}
className={styles.homeCard}
>
<Row>
<Col span={18}>
<p className={styles.numberDesc}>102,086.00</p>
</Col>
<Col span={6}>
<p className={styles.numberIcon}>
<img src={totalIcona3} alt=""/>
</p>
</Col>
</Row>
<p>
<StatusTag title={<><CaretUpOutlined />3.4%</>} type="success" />
<span>&nbsp;&nbsp;相比昨日</span>
</p>
</Card>
</Col>
<Col span={6}>
<Card
headStyle={{borderBottom:'none'}}
title="今日新增品牌"
bordered={false}
className={styles.homeCard}
>
<Row>
<Col span={18}>
<p className={styles.numberDesc}>102,086.00</p>
</Col>
<Col span={6}>
<p className={styles.numberIcon}>
<img src={totalIcona4} alt=""/>
</p>
</Col>
</Row>
<p>
<StatusTag title={<><CaretUpOutlined />3.4%</>} type="success" />
<span>&nbsp;&nbsp;相比昨日</span>
</p>
</Card>
</Col>
</Row>
</Space>
{/* 会员统计 */}
<Space direction="vertical" style={{width:'100%'}}>
<Row gutter={[24, 12]}>
<Col span={18}>
<Card
headStyle={{borderBottom:'none'}}
title="会员统计"
bordered={false}
extra={
<Radio.Group defaultValue={2} buttonStyle="solid" size="small" onChange={onLineAction}>
<Radio.Button value={1}>&nbsp;&nbsp;天&nbsp;&nbsp;</Radio.Button>
<Radio.Button value={2}>&nbsp;&nbsp;周&nbsp;&nbsp;</Radio.Button>
<Radio.Button value={3}>&nbsp;&nbsp;月&nbsp;&nbsp;</Radio.Button>
</Radio.Group>
}
>
<Row>
<Col span={24}>
{/* 折线图 */}
<LineChart currentIndex={currentColumnAction} />
</Col>
<Col span={24}>
<Row>
<Col span={6}>
<div className={styles.lineDesc}>
<img src={lineIcon1} alt=""/>
<div className={styles.lineDescText}>
<p className={styles.lineDescTitle}>86</p>
<p className={styles.lineDescTip}>今日注册</p>
</div>
</div>
</Col>
<Col span={6}>
<div className={styles.lineDesc}>
<img src={lineIcon2} alt=""/>
<div className={styles.lineDescText}>
<p className={styles.lineDescTitle}>86</p>
<p className={styles.lineDescTip}>今日注册</p>
</div>
</div>
</Col>
<Col span={6}>
<div className={styles.lineDesc}>
<img src={lineIcon3} alt=""/>
<div className={styles.lineDescText}>
<p className={styles.lineDescTitle}>86</p>
<p className={styles.lineDescTip}>今日注册</p>
</div>
</div>
</Col>
<Col span={6}>
<div className={styles.lineDesc}>
<img src={lineIcon4} alt=""/>
<div className={styles.lineDescText}>
<p className={styles.lineDescTitle}>86</p>
<p className={styles.lineDescTip}>今日注册</p>
</div>
</div>
</Col>
</Row>
</Col>
</Row>
</Card>
</Col>
<Col span={6}>
<Card
headStyle={{borderBottom:'none'}}
title="待处理会员"
bordered={false}
>
<Row>
<Col span={24}>
<List
itemLayout="horizontal"
className={styles.sideListBox}
>
<List.Item
actions={[<a key="list-loadmore-more">查看&nbsp;<RightOutlined /></a>]}
>
<List.Item.Meta
title="15"
description={<><span className="commonStatusModify"></span>待提交审核</>}
/>
</List.Item>
<List.Item
actions={[<a key="list-loadmore-more">查看&nbsp;<RightOutlined /></a>]}
>
<List.Item.Meta
title="15"
description={<><span className="commonStatusModify"></span>待提交审核</>}
/>
</List.Item>
<List.Item
actions={[<a key="list-loadmore-more">查看&nbsp;<RightOutlined /></a>]}
>
<List.Item.Meta
title="15"
description={<><span className="commonStatusModify"></span>待提交审核</>}
/>
</List.Item>
<List.Item
actions={[<a key="list-loadmore-more">查看&nbsp;<RightOutlined /></a>]}
>
<List.Item.Meta
title="15"
description={<><span className="commonStatusModify"></span>待提交审核</>}
/>
</List.Item>
</List>
</Col>
<Col span={24}>
<div className={styles.sideAdBox}>
<a href=""><span>会员维护&nbsp;<RightCircleFilled /></span></a>
<img src={sideIcon} alt=""/>
</div>
</Col>
</Row>
</Card>
</Col>
</Row>
</Space>
{/* 订单统计 */}
<Space direction="vertical" style={{width:'100%'}}>
<Row gutter={[24, 12]}>
<Col span={6}>
<Row gutter={[0, 0]}>
<Col span={24}>
<Card
headStyle={{borderBottom:'none'}}
title="待处理交易"
bordered={false}
>
<List
itemLayout="horizontal"
className={styles.sideListBox}
>
<List.Item
actions={[<a key="list-loadmore-more">查看&nbsp;<RightOutlined /></a>]}
>
<List.Item.Meta
title="15"
description={<><span className="commonStatusModify"></span>待提交审核</>}
/>
</List.Item>
<List.Item
actions={[<a key="list-loadmore-more">查看&nbsp;<RightOutlined /></a>]}
>
<List.Item.Meta
title="15"
description={<><span className="commonStatusModify"></span>待提交审核</>}
/>
</List.Item>
</List>
</Card>
</Col>
<Col span={24} style={{marginTop: 26}}>
<Card
headStyle={{borderBottom:'none'}}
title="待处理售后"
bordered={false}
>
<List
itemLayout="horizontal"
className={styles.sideListBox}
>
<List.Item
actions={[<a key="list-loadmore-more">查看&nbsp;<RightOutlined /></a>]}
>
<List.Item.Meta
title="15"
description={<><span className="commonStatusModify"></span>待提交审核</>}
/>
</List.Item>
<List.Item
actions={[<a key="list-loadmore-more">查看&nbsp;<RightOutlined /></a>]}
>
<List.Item.Meta
title="15"
description={<><span className="commonStatusModify"></span>待提交审核</>}
/>
</List.Item>
</List>
</Card>
</Col>
</Row>
</Col>
<Col span={18}>
<Card
headStyle={{borderBottom:'none'}}
title="订单统计"
bordered={false}
extra={
<Radio.Group defaultValue={2} buttonStyle="solid" size="small" onChange={onColumnAction}>
<Radio.Button value={1}>&nbsp;&nbsp;天&nbsp;&nbsp;</Radio.Button>
<Radio.Button value={2}>&nbsp;&nbsp;周&nbsp;&nbsp;</Radio.Button>
<Radio.Button value={3}>&nbsp;&nbsp;月&nbsp;&nbsp;</Radio.Button>
</Radio.Group>
}
>
<Row>
<Col span={24}>
{/* 柱状图 */}
<div className={styles.chartBox}>
<ColumnChart currentIndex={currentColumnAction} />
</div>
</Col>
<Col span={24}>
<Row>
<Col span={6}>
<div className={styles.lineDesc}>
<img src={lineIcon1} alt=""/>
<div className={styles.lineDescText}>
<p className={styles.lineDescTitle}>86</p>
<p className={styles.lineDescTip}>今日注册</p>
</div>
</div>
</Col>
<Col span={6}>
<div className={styles.lineDesc}>
<img src={lineIcon2} alt=""/>
<div className={styles.lineDescText}>
<p className={styles.lineDescTitle}>86</p>
<p className={styles.lineDescTip}>今日注册</p>
</div>
</div>
</Col>
<Col span={6}>
<div className={styles.lineDesc}>
<img src={lineIcon3} alt=""/>
<div className={styles.lineDescText}>
<p className={styles.lineDescTitle}>86</p>
<p className={styles.lineDescTip}>今日注册</p>
</div>
</div>
</Col>
<Col span={6}>
<div className={styles.lineDesc}>
<img src={lineIcon4} alt=""/>
<div className={styles.lineDescText}>
<p className={styles.lineDescTitle}>86</p>
<p className={styles.lineDescTip}>今日注册</p>
</div>
</div>
</Col>
</Row>
</Col>
</Row>
</Card>
</Col>
</Row>
</Space>
{/* 商品品牌统计 */}
<Space direction="vertical" style={{width:'100%'}}>
<Row gutter={[24, 12]}>
<Col span={12}>
<Row>
<Col span={24}>
<Card
headStyle={{borderBottom:'none'}}
title="商品统计"
bordered={false}
>
<div className={styles.commodityTotalTitle}>
<span>全部商品</span>
<p>124,754</p>
</div>
<div className={styles.commodityTotalDesc}>
<div className={cx(styles.lineDesc, styles.aHalfOfWidth)}>
<img src={totalCommdity} alt=""/>
<div className={styles.lineDescText}>
<p className={styles.lineDescTitle}>86</p>
<p className={styles.lineDescTip}>待审核商品</p>
</div>
<a key="list-loadmore-more">查看&nbsp;<RightOutlined /></a>
</div>
<div className={cx(styles.lineDesc, styles.aHalfOfWidth)}>
<img src={totalIcona3} alt=""/>
<div className={styles.lineDescText}>
<p className={styles.lineDescTitle}>86</p>
<p className={styles.lineDescTip}>今日新增商品</p>
</div>
<a key="list-loadmore-more">查看&nbsp;<RightOutlined /></a>
</div>
</div>
</Card>
</Col>
</Row>
</Col>
<Col span={12}>
<Row>
<Col span={24}>
<Card
headStyle={{borderBottom:'none'}}
title="品牌统计"
bordered={false}
>
<div className={styles.commodityTotalTitle}>
<span>全部品牌</span>
<p>124,754</p>
</div>
<div className={styles.commodityTotalDesc}>
<div className={cx(styles.lineDesc, styles.aHalfOfWidth)}>
<img src={totalBrand1} alt=""/>
<div className={styles.lineDescText}>
<p className={styles.lineDescTitle}>86</p>
<p className={styles.lineDescTip}>待审核品牌</p>
</div>
<a key="list-loadmore-more">查看&nbsp;<RightOutlined /></a>
</div>
<div className={cx(styles.lineDesc, styles.aHalfOfWidth)}>
<img src={totalBrand2} alt=""/>
<div className={styles.lineDescText}>
<p className={styles.lineDescTitle}>86</p>
<p className={styles.lineDescTip}>今日新增品牌</p>
</div>
<a key="list-loadmore-more">查看&nbsp;<RightOutlined /></a>
</div>
</div>
</Card>
</Col>
</Row>
</Col>
</Row>
</Space>
{/* 付款提现统计 */}
<Space direction="vertical" style={{width:'100%'}}>
<Row gutter={[24, 12]} style={{marginTop: 9, marginBottom: 0}}>
<Col span={4} style={{paddingBottom:0}}>
<div className={styles.notePaperBox}>
<div className={styles.notePaperContainer}>
<div className={styles.noteHeader}>
<p>
<img src={feeIcon1} alt=""/>
<span>待付款代收账款结算</span>
</p>
</div>
<div className={styles.noteGap}></div>
<div className={styles.noteBody}>
<p>15<br /><a>查看 <RightOutlined /></a></p>
</div>
</div>
</div>
</Col>
<Col span={4} style={{paddingBottom:0}}>
<div className={cx(styles.notePaperBox, styles.notePaperBoxGreen)}>
<div className={styles.notePaperContainer}>
<div className={styles.noteHeader}>
<p>
<img src={feeIcon2} alt=""/>
<span>已完成代收账款结算</span>
</p>
</div>
<div className={styles.noteGap}></div>
<div className={styles.noteBody}>
<p>152<br /><a>查看 <RightOutlined /></a></p>
</div>
</div>
</div>
</Col>
<Col span={8} style={{paddingBottom:0}}>
<Row gutter={[0, 24]}>
<Col span={24} style={{padding:0}}>
<div className={cx(styles.lineDesc, styles.feeCustomCard)}>
<img src={feeIcon3} alt=""/>
<div className={styles.lineDescText}>
<p className={styles.lineDescTitle}>86</p>
<p className={styles.lineDescTip}>待提现申请</p>
</div>
<a key="list-loadmore-more">查看&nbsp;<RightOutlined /></a>
</div>
</Col>
<Col span={24} style={{paddingBottom:0}}>
<div className={cx(styles.lineDesc, styles.feeCustomCard)}>
<img src={feeIcon4} alt=""/>
<div className={styles.lineDescText}>
<p className={styles.lineDescTitle}>86</p>
<p className={styles.lineDescTip}>待支付提现申请</p>
</div>
<a key="list-loadmore-more">查看&nbsp;<RightOutlined /></a>
</div>
</Col>
</Row>
</Col>
<Col span={8} style={{paddingBottom:0}}>
<Row gutter={[0, 24]}>
<Col span={24} style={{padding:0}}>
<div className={cx(styles.lineDesc, styles.feeCustomCard)}>
<img src={feeIcon5} alt=""/>
<div className={styles.lineDescText}>
<p className={styles.lineDescTitle}>86</p>
<p className={styles.lineDescTip}>待付款积分结算</p>
</div>
<a key="list-loadmore-more">查看&nbsp;<RightOutlined /></a>
</div>
</Col>
<Col span={24} style={{paddingBottom:0}}>
<div className={cx(styles.lineDesc, styles.feeCustomCard)}>
<img src={feeIcon6} alt=""/>
<div className={styles.lineDescText}>
<p className={styles.lineDescTitle}>86</p>
<p className={styles.lineDescTip}>已完成积分结算</p>
</div>
<a key="list-loadmore-more">查看&nbsp;<RightOutlined /></a>
</div>
</Col>
</Row>
</Col>
</Row>
</Space>
{/* 数据中心 */}
<Space direction="vertical" style={{width:'100%'}}>
<Row gutter={[24, 12]}>
<Col span={24}>
<Card
headStyle={{borderBottom:'none'}}
title={<><p>数据中心</p><p className={styles.dataRiskTip}>实时展示会员数据、交易数据等综合指标的动态趋势，满足数据化运营的需要</p></>}
bordered={false}
extra={<a href="#">进入数据中心</a>}
>
<div className={styles.dataRiskAction}>
<p>
<img src={dataRiskIcon3} alt=""/>
<span>网站运营数据</span>
</p>
<p>
<img src={dataRiskIcon4} alt=""/>
<span>APP运营数据</span>
</p>
<p>
<img src={dataRiskIcon5} alt=""/>
<span>用户分析</span>
</p>
<p>
<img src={dataRiskIcon6} alt=""/>
<span>商品分析</span>
</p>
<p>
<img src={dataRiskIcon7} alt=""/>
<span>交易分析</span>
</p>
<p>
<img src={dataRiskIcon8} alt=""/>
<span>售后分析</span>
</p>
</div>
</Card>
</Col>
</Row>
</Space>
{/* 风控中心 */}
<Space direction="vertical" style={{width:'100%'}}>
<Row gutter={[24, 12]}>
<Col span={24}>
<Card
headStyle={{borderBottom:'none'}}
title={<><p>风控中心</p><p className={styles.dataRiskTip}>全面的风控体系，监控交易异常、资金异常、行为异常，并实时预警</p></>}
bordered={false}
extra={<a href="#">进入风控中心</a>}
>
<div className={styles.dataRiskAction}>
<p>
<img src={dataRiskIcon1} alt=""/>
<span>预警规则</span>
</p>
<p>
<img src={dataRiskIcon2} alt=""/>
<span>预警控制台<Badge count={4} size="small" /></span>
</p>
<p>
<img src={dataRiskIcon1} alt=""/>
<span>预警处理</span>
</p>
</div>
</Card>
</Col>
</Row>
</Space>
</div>
);
}
export default Home
\ No newline at end of file
src/pages/index.less
View file @ 7c60ea56
.normal {
}
.title {
font-size: 24px;
color: #666;
}
// 500 error
// .wrapper{
// }
.errorBox{
width: 100%;
.desc{
......@@ -23,4 +14,4 @@
width: 100%;
height: 100%;
}
}
}
\ No newline at end of file
src/pages/message/addMessage.tsx 0 → 100644
View file @ 7c60ea56
import React, { useState, useEffect } from 'react'
import { PageHeaderWrapper } from '@ant-design/pro-layout'
import { Button, Card, Space, Radio, Row, Col, Table, Tabs, Tag, Avatar, Image, List, Badge } from 'antd'
import cx from 'classnames'
import {history} from 'umi'
import NiceForm from '@/components/NiceForm'
import { createFormActions, FormButtonGroup, Reset, Submit } from '@formily/antd'
import styles from './index.less'
import { usePageStatus, PageStatus } from '@/hooks/usePageStatus'
import ReutrnEle from '@/components/ReturnEle'
const addSchemaAction = createFormActions()
const AddMessage: React.FC<{}> = () => {
const {
pageStatus,
id
} = usePageStatus()
const handleSubmit = (val) => {
console.log(val, 'vvv')
}
return (
<PageHeaderWrapper
onBack={() => history.goBack()}
backIcon={<ReutrnEle description="返回" />}
title="新建消息"
>
<Card>
<NiceForm
labelCol={4}
labelAlign="left"
wrapperCol={12}
editable={pageStatus !== PageStatus.PREVIEW}
actions={addSchemaAction}
schema={{
type: 'object',
properties: {
roleName: {
type: 'string',
title: '发送对象',
required: true,
},
remark: {
type: 'textarea',
title: '发送标题',
"x-rules": [
{
required: true,
},
{
limitByte: true,
maxByte: 120,
}
],
"x-component-props": {
rows: 4
}
},
role123: {
type: 'string',
title: '消息跳转链接',
required: true,
},
remark123: {
type: 'textarea',
title: '消息内容',
required: true,
"x-rules": [
{
required: true,
},
{
limitByte: true,
maxByte: 200
}
],
"x-component-props": {
rows: 4
}
},
}
}}
onSubmit={handleSubmit}
>
<FormButtonGroup offset={4}>
<Submit>发送</Submit>
<Button onClick={()=>history.goBack()}>取消</Button>
</FormButtonGroup>
</NiceForm>
</Card>
</PageHeaderWrapper>
);
}
export default AddMessage
\ No newline at end of file
src/pages/message/index.less 0 → 100644
View file @ 7c60ea56
.customList{
:global{
.ant-list-item-meta{
align-items: center;
}
}
.messageText{
font-size: 14px;
font-weight: 400;
color: #606266;
}
.messageTitle{
margin: 0 30px;
font-size: 14px;
font-weight: 500;
color: #303133;
}
}
\ No newline at end of file
src/pages/message/index.tsx 0 → 100644
View file @ 7c60ea56
import React, { useState, useEffect } from 'react'
import { PageHeaderWrapper } from '@ant-design/pro-layout'
import { Button, Card, Space, Radio, Row, Col, Table, Tabs, Tag, Avatar, Image, List, Badge } from 'antd'
import cx from 'classnames'
import {history} from 'umi'
import styles from './index.less'
import StatusTag from '@/components/StatusTag'
import { PlusOutlined } from '@ant-design/icons'
//图标
import messageIcon1 from '../../asserts/home-icon-1.png'
import messageIcon2 from '../../asserts/home-icon-2.png'
import messageIcon3 from '../../asserts/home-icon-8.png'
const Message: React.FC<{}> = () => {
const data = [
{
id: 1,
icon: messageIcon1,
status: 'success',
type: '系统消息',
title: '订单发货',
message: '订单发货，请注意查收，清单发货，请注意查收！',
time: '2015-15-05',
},
{
id: 2,
icon: messageIcon2,
status: 'success',
type: '系统消息',
title: '订单收货',
message: '订单发货，请注意查收，清单发货，请注意查收！',
time: '2015-15-05',
},
{
id: 3,
icon: messageIcon1,
status: 'primary',
type: '系统消息',
title: '系统消息',
message: '账户异常，请注意账户资金安全！',
time: '2015-15-05',
},
{
id: 4,
icon: messageIcon3,
status: 'primary',
type: '系统消息',
title: '系统消息',
message: '账户支出300元，请注意账户资金安全！',
time: '2015-15-05',
},
];
const renderMessage = (data) => {
return (
<>
<StatusTag type={data.status} title={data.type} />
<span className={styles.messageTitle}>{data.title}</span>
<span className={styles.messageText}>{data.message}</span>
</>
)
}
const showTotal = (total) => {
return `共 ${total} 条`;
}
return (
<PageHeaderWrapper>
<Card>
<p>
<Button type="primary" icon={<PlusOutlined />} onClick={()=>history.push('/message/messageList/add')} >新建</Button>
</p>
<List
itemLayout="horizontal"
dataSource={data}
className={styles.customList}
pagination={{
onChange: page => {
console.log(page);
},
pageSize: 10,
size: "small",
showQuickJumper: true,
total: 4,
showTotal: showTotal
}}
renderItem={item => (
<List.Item>
<List.Item.Meta
avatar={<Avatar src={item.icon} />}
title={renderMessage(item)}
/>
<div>{item.time}</div>
</List.Item>
)}
/>
</Card>
</PageHeaderWrapper>
);
}
export default Message
\ No newline at end of file
src/pages/test.tsx deleted 100644 → 0
View file @ c7ddc3ef
import React, {Component} from 'react';
import { Button } from 'antd';
import styles from '../layouts/index.less';
import { inject, observer } from 'mobx-react'
import { ITestModule } from '@/module/testModule'
import { IStore } from '@/store';
import Loading from '@/components/Loading' // 测试loading组件
export interface ITestProps {
testStore?: ITestModule
}
@inject((store: IStore) => ({
testStore: store.testStore
}))
@observer
class Index extends Component<ITestProps, {}> {
render() {
const { testText, testNumber, testList,printInfo, setText, setNumber, getAsyncInfo } = this.props.testStore!
return <div>
{/* <Loading /> */}
<h3>{testText}|{testNumber}</h3>
<h3>{printInfo}</h3>
<h5>测试页面</h5>
<div>
<ul>
{
testList.length>0 && testList.map((item, index) => {
return (<li key={index}>{item}</li>)
})
}
</ul>
</div>
<Button onClick={() => {setText('调用mobx改变Text')}}>mobx改变Text</Button>
<Button onClick={() => {setNumber(10086)}}>mobx改变Number</Button>
<Button onClick={() => {getAsyncInfo()}}>mobx改变异步数据</Button>
</div>
}
}
export default Index
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment