122 lines
4.0 KiB
TypeScript
122 lines
4.0 KiB
TypeScript
import React, { useEffect, useState } from "react";
|
|
import { Card, NavBar, TabBar, Grid } from "antd-mobile";
|
|
import {
|
|
AppOutline,
|
|
UserOutline,
|
|
PieOutline, // 替换 BarChartOutline
|
|
ShopbagOutline,
|
|
} from "antd-mobile-icons";
|
|
import MeauMobile from "@/components/MeauMobile/MeauMoible";
|
|
import Layout from "@/components/Layout/Layout";
|
|
import style from "./index.module.scss";
|
|
import LineChart from "@/components/LineChart";
|
|
import { getPlanStats } from "./api";
|
|
|
|
const sceneStats = [
|
|
{
|
|
label: "公众号获客",
|
|
value: 234,
|
|
icon: <ShopbagOutline style={{ fontSize: 28, color: "#4caf50" }} />,
|
|
},
|
|
{
|
|
label: "海报获客",
|
|
value: 167,
|
|
icon: <AppOutline style={{ fontSize: 28, color: "#ff9800" }} />,
|
|
},
|
|
{
|
|
label: "抖音获客",
|
|
value: 156,
|
|
icon: <PieOutline style={{ fontSize: 28, color: "#2196f3" }} />,
|
|
},
|
|
{
|
|
label: "小红书获客",
|
|
value: 89,
|
|
icon: <UserOutline style={{ fontSize: 28, color: "#e91e63" }} />,
|
|
},
|
|
];
|
|
|
|
const todayStats = [
|
|
{ label: "朋友圈同步", value: 12 },
|
|
{ label: "群发任务", value: 8 },
|
|
{ label: "获客转化", value: "85%" },
|
|
{ label: "系统活跃度", value: "98%" },
|
|
];
|
|
|
|
const Home: React.FC = () => {
|
|
useEffect(() => {
|
|
getPlanStats({ num: 4 }).then((res: any) => {
|
|
console.log(res);
|
|
});
|
|
}, []);
|
|
|
|
return (
|
|
<Layout
|
|
header={
|
|
<NavBar back={null} style={{ background: "#fff" }}>
|
|
<span style={{ color: "#1677ff", fontWeight: 700 }}>存客宝</span>
|
|
</NavBar>
|
|
}
|
|
footer={<MeauMobile />}
|
|
>
|
|
<div className={style["home-page"]}>
|
|
{/* 统计卡片 */}
|
|
<div className={style["home-cards"]}>
|
|
<Card className={style["home-card"]}>
|
|
<div className={style["home-card-title"]}>设备数量</div>
|
|
<div className={style["home-card-value"]}>0</div>
|
|
</Card>
|
|
<Card className={style["home-card"]}>
|
|
<div className={style["home-card-title"]}>微信号数量</div>
|
|
<div className={style["home-card-value"]}>0</div>
|
|
</Card>
|
|
<Card className={style["home-card"]}>
|
|
<div className={style["home-card-title"]}>在线微信号</div>
|
|
<div className={style["home-card-value"]}>0</div>
|
|
</Card>
|
|
</div>
|
|
|
|
{/* 场景获客统计 */}
|
|
<Card className={style["home-section"]}>
|
|
<div className={style["home-section-title"]}>场景获客统计</div>
|
|
<div className={style["home-scene-stats"]}>
|
|
{sceneStats.map((item) => (
|
|
<div key={item.label} className={style["home-scene-item"]}>
|
|
<div className={style["home-scene-icon"]}>{item.icon}</div>
|
|
<div className={style["home-scene-value"]}>{item.value}</div>
|
|
<div className={style["home-scene-label"]}>{item.label}</div>
|
|
</div>
|
|
))}
|
|
</div>
|
|
</Card>
|
|
|
|
{/* 今日数据 */}
|
|
<Card className={style["home-section"]}>
|
|
<div className={style["home-section-title"]}>今日数据</div>
|
|
<Grid columns={2} gap={12}>
|
|
{todayStats.map((item) => (
|
|
<Grid.Item key={item.label}>
|
|
<div className={style["home-today-item"]}>
|
|
<div className={style["home-today-value"]}>{item.value}</div>
|
|
<div className={style["home-today-label"]}>{item.label}</div>
|
|
</div>
|
|
</Grid.Item>
|
|
))}
|
|
</Grid>
|
|
</Card>
|
|
|
|
{/* 每日获客趋势（静态图表占位） */}
|
|
<Card className={style["home-section"]}>
|
|
<div className={style["home-section-title"]}>每日获客趋势</div>
|
|
<div className={style["home-chart"]}>
|
|
<LineChart
|
|
xData={["周一", "周二", "周三", "周四", "周五", "周六", "周日"]}
|
|
yData={[120, 150, 180, 200, 230, 210, 190]}
|
|
/>
|
|
</div>
|
|
</Card>
|
|
</div>
|
|
</Layout>
|
|
);
|
|
};
|
|
export default Home;
|