添加收益明细
This commit is contained in:
al
parent
f742022a2d
commit
27e2f36271
|
|
@ -0,0 +1,191 @@
|
|||
"use client";
|
||||
|
||||
import Link from "next/link";
|
||||
import * as echarts from "echarts";
|
||||
import { useEffect, useRef } from "react";
|
||||
export default function IncomeQuerry({ children }) {
|
||||
var databoard = useRef();
|
||||
var incomeOrgin = useRef();
|
||||
useEffect(() => {
|
||||
createDataBoard();
|
||||
createIncomeOrgin();
|
||||
}, []);
|
||||
|
||||
const createDataBoard = () => {
|
||||
if (databoard.current) {
|
||||
var myChart = echarts.init(databoard.current, "dark");
|
||||
var option;
|
||||
option = {
|
||||
backgroundColor: {
|
||||
type: "radial",
|
||||
x: 0.3,
|
||||
y: 0.3,
|
||||
r: 0.8,
|
||||
colorStops: [
|
||||
{
|
||||
offset: 0,
|
||||
color: "#ffffff00",
|
||||
},
|
||||
{
|
||||
offset: 1,
|
||||
color: "#ffffff00",
|
||||
},
|
||||
],
|
||||
},
|
||||
xAxis: {
|
||||
type: "category",
|
||||
data: getDateStr(),
|
||||
},
|
||||
yAxis: {
|
||||
splitLine: {
|
||||
// show: false,
|
||||
lineStyle: {
|
||||
type: "dashed",
|
||||
color: '#ffffff30'
|
||||
// ...
|
||||
},
|
||||
},
|
||||
type: "value",
|
||||
},
|
||||
grid: {
|
||||
top: "8%",
|
||||
left: "3%",
|
||||
right: "4%",
|
||||
bottom: "3%",
|
||||
containLabel: true,
|
||||
},
|
||||
series: [
|
||||
{
|
||||
data: [150, 230, 224, 218, 135, 147, 260],
|
||||
type: "line",
|
||||
lineStyle: {
|
||||
color: '#ffffff'
|
||||
// ...
|
||||
},
|
||||
itemStyle: {
|
||||
color:"#fff",
|
||||
backgroundColor:"#fff"
|
||||
}
|
||||
},
|
||||
],
|
||||
};
|
||||
option && myChart.setOption(option);
|
||||
}
|
||||
};
|
||||
const createIncomeOrgin = () => {
|
||||
if (incomeOrgin.current) {
|
||||
var myChart = echarts.init(incomeOrgin.current, "dark");
|
||||
var option;
|
||||
option = {
|
||||
backgroundColor: {
|
||||
type: "radial",
|
||||
x: 0.3,
|
||||
y: 0.3,
|
||||
r: 0.8,
|
||||
colorStops: [
|
||||
{
|
||||
offset: 0,
|
||||
color: "#ffffff00",
|
||||
},
|
||||
{
|
||||
offset: 1,
|
||||
color: "#ffffff00",
|
||||
},
|
||||
],
|
||||
},
|
||||
tooltip: {
|
||||
trigger: "item",
|
||||
},
|
||||
legend: {
|
||||
type: "scroll",
|
||||
orient: "vertical",
|
||||
right: 10,
|
||||
top: 20,
|
||||
bottom: 20,
|
||||
color: "#fff",
|
||||
// data: data.legendData
|
||||
},
|
||||
series: [
|
||||
{
|
||||
name: "Access From",
|
||||
type: "pie",
|
||||
radius: ["40%", "70%"],
|
||||
center: ["30%", "50%"],
|
||||
avoidLabelOverlap: false,
|
||||
padAngle: 5,
|
||||
itemStyle: {
|
||||
borderRadius: 10,
|
||||
},
|
||||
label: {
|
||||
show: false,
|
||||
position: "center",
|
||||
},
|
||||
emphasis: {
|
||||
label: {
|
||||
show: true,
|
||||
fontSize: 40,
|
||||
fontWeight: "bold",
|
||||
},
|
||||
},
|
||||
labelLine: {
|
||||
show: false,
|
||||
},
|
||||
data: [
|
||||
{ value: 1048, name: "空间解锁" },
|
||||
{ value: 735, name: "付费贴" },
|
||||
{ value: 580, name: "超粉解锁" },
|
||||
{ value: 484, name: "个人微信" },
|
||||
{ value: 300, name: "其他分成" },
|
||||
],
|
||||
},
|
||||
],
|
||||
};
|
||||
option && myChart.setOption(option);
|
||||
}
|
||||
};
|
||||
|
||||
const getDateStr = () => {
|
||||
const currentDay = new Date();
|
||||
return Array(7).fill(null).map((it,index)=>{
|
||||
const days = (6-index)
|
||||
return (currentDay.getMonth()+1)+"."+(currentDay.getDate()-days)
|
||||
})
|
||||
}
|
||||
return (
|
||||
<div className="w-full">
|
||||
<div className="rounded-2xl bg-gradient-to-r from-[#FF668B] to-[#FF66F0] text-white p-4 h-max mb-4">
|
||||
<div className="mb-4">
|
||||
<p className="text-md mb-4">可提现钻石</p>
|
||||
<div className="flex justify-between items-center">
|
||||
<span className="text-3xl font-bold">{39900}</span>
|
||||
<Link href={"#"} className="text-sm text-[#7d304c]">
|
||||
<span>前往提现</span>
|
||||
</Link>
|
||||
</div>
|
||||
</div>
|
||||
<div className="flex justify-between items-center">
|
||||
<div className="text-center">
|
||||
<p className="text-sm">今日收益</p>
|
||||
<p className="text-lg font-bold">{9900}</p>
|
||||
</div>
|
||||
<div className="text-center">
|
||||
<p className="text-sm">待结算</p>
|
||||
<p className="text-lg font-bold">{1500}</p>
|
||||
</div>
|
||||
<div className="text-center">
|
||||
<p className="text-sm">近一周收益</p>
|
||||
<p className="text-lg font-bold">{15200}</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="rounded-2xl bg-gradient-to-b from-[#ff668c80] to-[#FF668B30] text-white mb-4 p-4">
|
||||
<p className="text-md mb-4">数据看板</p>
|
||||
<div className="h-40" ref={databoard}></div>
|
||||
</div>
|
||||
<div className="rounded-2xl bg-gradient-to-b from-[#ff668c80] to-[#FF668B30] text-white mb-4 p-4">
|
||||
<p className="text-md mb-4">收益来源</p>
|
||||
<div className="h-40" ref={incomeOrgin}></div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
|
@ -4,6 +4,7 @@ import React, { useState, useEffect } from "react";
|
|||
import { Toast } from "antd-mobile";
|
||||
import { generateSignature } from "@/utils/crypto";
|
||||
import webviewBaseRequest from "@/utils/webviewBaseRequest";
|
||||
import Link from "next/link";
|
||||
|
||||
export default function BillDetail({ params }) {
|
||||
const [data, setData] = useState([]);
|
||||
|
|
@ -95,6 +96,11 @@ export default function BillDetail({ params }) {
|
|||
|
||||
return (
|
||||
<section className="flex flex-1 flex-col">
|
||||
{params.type == "income" && (
|
||||
<Link className="flex flex-col mt-4 btn bg-[#FF61B030] items-center text-base font-medium" href={"income/income_querry"}>
|
||||
<p className="text-primary">查看近一周收益情况</p>
|
||||
</Link>
|
||||
)}
|
||||
{data.length === 0 && (
|
||||
<div className="flex flex-col mt-4 w-full items-center">
|
||||
<svg viewBox="0 0 1024 1024" width="120" height="120">
|
||||
|
|
|
|||
|
|
@ -7,50 +7,53 @@ export default function BillLayout({ children }) {
|
|||
const pathname = usePathname();
|
||||
return (
|
||||
<section className="flex flex-1 flex-col container px-4 py-2">
|
||||
<div className="flex h-10">
|
||||
<div className="tabs tab-boxed w-full">
|
||||
<Link
|
||||
className={`tab basis-1/4 ${
|
||||
pathname === "/bill/recharge"
|
||||
? "tab-active text-[#FF669E] bg-[#FF61B030] rounded-full"
|
||||
: "text-[#FFFFFF80]"
|
||||
}`}
|
||||
href="recharge"
|
||||
>
|
||||
充值
|
||||
</Link>
|
||||
<Link
|
||||
className={`tab basis-1/4 ${
|
||||
pathname === "/bill/cost"
|
||||
? "tab-active text-[#FF669E] bg-[#FF61B030] rounded-full"
|
||||
: "text-[#FFFFFF80]"
|
||||
}`}
|
||||
href="cost"
|
||||
>
|
||||
消费
|
||||
</Link>
|
||||
<Link
|
||||
className={`tab basis-1/4 ${
|
||||
pathname === "/bill/income"
|
||||
? "tab-active text-[#FF669E] bg-[#FF61B030] rounded-full"
|
||||
: "text-[#FFFFFF80]"
|
||||
}`}
|
||||
href="income"
|
||||
>
|
||||
收益
|
||||
</Link>
|
||||
<Link
|
||||
className={`tab basis-1/4 ${
|
||||
pathname === "/bill/withdrawal"
|
||||
? "tab-active text-[#FF669E] bg-[#FF61B030] rounded-full"
|
||||
: "text-[#FFFFFF80]"
|
||||
}`}
|
||||
href="withdrawal"
|
||||
>
|
||||
提现
|
||||
</Link>
|
||||
{pathname.split("/").length < 4 && (
|
||||
<div className="flex h-10">
|
||||
<div className="tabs tab-boxed w-full">
|
||||
<Link
|
||||
className={`tab basis-1/4 ${
|
||||
pathname === "/bill/recharge"
|
||||
? "tab-active text-[#FF669E] bg-[#FF61B030] rounded-full"
|
||||
: "text-[#FFFFFF80]"
|
||||
}`}
|
||||
href="recharge"
|
||||
>
|
||||
充值
|
||||
</Link>
|
||||
<Link
|
||||
className={`tab basis-1/4 ${
|
||||
pathname === "/bill/cost"
|
||||
? "tab-active text-[#FF669E] bg-[#FF61B030] rounded-full"
|
||||
: "text-[#FFFFFF80]"
|
||||
}`}
|
||||
href="cost"
|
||||
>
|
||||
消费
|
||||
</Link>
|
||||
<Link
|
||||
className={`tab basis-1/4 ${
|
||||
pathname === "/bill/income"
|
||||
? "tab-active text-[#FF669E] bg-[#FF61B030] rounded-full"
|
||||
: "text-[#FFFFFF80]"
|
||||
}`}
|
||||
href="income"
|
||||
>
|
||||
收益
|
||||
</Link>
|
||||
<Link
|
||||
className={`tab basis-1/4 ${
|
||||
pathname === "/bill/withdrawal"
|
||||
? "tab-active text-[#FF669E] bg-[#FF61B030] rounded-full"
|
||||
: "text-[#FFFFFF80]"
|
||||
}`}
|
||||
href="withdrawal"
|
||||
>
|
||||
提现
|
||||
</Link>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
<div className="flex flex-1">{children}</div>
|
||||
</section>
|
||||
);
|
||||
|
|
|
|||
File diff suppressed because it is too large
Load Diff
|
|
@ -13,6 +13,7 @@
|
|||
"autoprefixer": "10.4.14",
|
||||
"cookies-next": "^4.0.0",
|
||||
"crypto-js": "4.2.0",
|
||||
"echarts": "^5.5.0",
|
||||
"eslint": "8.47.0",
|
||||
"eslint-config-next": "13.4.13",
|
||||
"html2canvas": "^1.4.1",
|
||||
|
|
|
|||
Loading…
Reference in New Issue