anln #85
|
|
@ -0,0 +1,240 @@
|
|||
"use client";
|
||||
|
||||
import Link from "next/link";
|
||||
import * as echarts from "echarts";
|
||||
import { useEffect, useRef, useState } from "react";
|
||||
import webviewBaseRequest from "@/utils/webviewBaseRequest";
|
||||
import { generateSignature } from "@/utils/crypto";
|
||||
export default function IncomeQuerry({ children }) {
|
||||
var databoard = useRef();
|
||||
var incomeOrgin = useRef();
|
||||
const [data, setData] = useState({
|
||||
withdraw_diamonds: 0,
|
||||
today_income: 0,
|
||||
wait_deal_income: 0,
|
||||
weekIncom: 0,
|
||||
});
|
||||
useEffect(() => {
|
||||
getData();
|
||||
}, []);
|
||||
const getData = async () => {
|
||||
const base = webviewBaseRequest();
|
||||
const signature = generateSignature({
|
||||
...base,
|
||||
});
|
||||
try {
|
||||
const response = await fetch(
|
||||
`/api/vas/income_page?signature=${signature}`,
|
||||
{
|
||||
method: "POST",
|
||||
headers: {
|
||||
"Content-Type": "application/json",
|
||||
},
|
||||
body: JSON.stringify({
|
||||
...base,
|
||||
}),
|
||||
}
|
||||
);
|
||||
const { data } = await response.json();
|
||||
const weekIncom = data.week_dashboard.reduce((total, item) => {
|
||||
return total + item.income;
|
||||
}, 0);
|
||||
data && setData({ ...data, weekIncom });
|
||||
createDataBoard(data.week_dashboard);
|
||||
createIncomeOrgin(data.income_from_dashboard);
|
||||
} catch (error) {}
|
||||
};
|
||||
const createDataBoard = (data) => {
|
||||
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",
|
||||
},
|
||||
],
|
||||
},
|
||||
// tooltip: {
|
||||
// trigger: 'axis'
|
||||
// },
|
||||
tooltip: {
|
||||
trigger: 'axis',
|
||||
formatter: '{b} : {c}'
|
||||
},
|
||||
xAxis: {
|
||||
type: "category",
|
||||
boundaryGap: false,
|
||||
data: getDateStr(data),
|
||||
},
|
||||
yAxis: {
|
||||
splitLine: {
|
||||
// show: false,
|
||||
lineStyle: {
|
||||
type: "dashed",
|
||||
color: "#ffffff30",
|
||||
// ...
|
||||
},
|
||||
},
|
||||
type: "value",
|
||||
},
|
||||
grid: {
|
||||
top: "8%",
|
||||
left: "3%",
|
||||
right: "4%",
|
||||
bottom: "3%",
|
||||
containLabel: true,
|
||||
},
|
||||
series: [
|
||||
{
|
||||
name: '',
|
||||
symbolSize: 10,
|
||||
data:data.map(item=>item.income),
|
||||
type: "line",
|
||||
stack: 'Total',
|
||||
lineStyle: {
|
||||
color: "#ffffff",
|
||||
// ...
|
||||
},
|
||||
itemStyle: {
|
||||
color: "#fff",
|
||||
backgroundColor: "#fff",
|
||||
},
|
||||
},
|
||||
],
|
||||
};
|
||||
option && myChart.setOption(option);
|
||||
}
|
||||
};
|
||||
const createIncomeOrgin = (data) => {
|
||||
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: 32,
|
||||
bottom: 20,
|
||||
color: "#fff",
|
||||
// data: data.legendData
|
||||
},
|
||||
series: [
|
||||
{
|
||||
name: "",
|
||||
type: "pie",
|
||||
radius: ["40%", "70%"],
|
||||
center: ["30%", "50%"],
|
||||
avoidLabelOverlap: false,
|
||||
padAngle: 5,
|
||||
itemStyle: {
|
||||
borderRadius: 10,
|
||||
},
|
||||
label: {
|
||||
show: false,
|
||||
position: "center",
|
||||
},
|
||||
emphasis: {
|
||||
label: {
|
||||
show: false,
|
||||
fontSize: 40,
|
||||
fontWeight: "bold",
|
||||
},
|
||||
},
|
||||
labelLine: {
|
||||
show: false,
|
||||
},
|
||||
data: data.map(item=>({value:item.income,name:item.desc})),
|
||||
},
|
||||
],
|
||||
};
|
||||
option && myChart.setOption(option);
|
||||
}
|
||||
};
|
||||
|
||||
const getDateStr = (data) => {
|
||||
return data.map(item=>{
|
||||
let newTimeStr = `${item.date.slice(0,4)}-${item.date.slice(4,6)}-${item.date.slice(6,8)}`
|
||||
return (new Date(newTimeStr).getMonth() + 1)+"."+(new Date(newTimeStr).getDate())
|
||||
})
|
||||
|
||||
};
|
||||
return (
|
||||
<div className="w-full">
|
||||
<p className="text-xs my-2">*当前页面所有统计单位均为钻石</p>
|
||||
<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 font-medium">可提现钻石</p>
|
||||
<div className="flex justify-between items-center">
|
||||
<span className="text-3xl font-bold">{data.withdraw_diamonds}</span>
|
||||
{/* <Link href={"#"} className="text-sm text-[#7d304c]">
|
||||
<span>前往提现</span>
|
||||
</Link> */}
|
||||
</div>
|
||||
</div>
|
||||
<div className="grid grid-cols-3 items-center">
|
||||
<div className="text-center">
|
||||
<p className="text-sm">今日收益</p>
|
||||
<p className="text-lg font-bold">{data.today_income}</p>
|
||||
</div>
|
||||
<div className="text-center">
|
||||
<p className="text-sm">待结算收益</p>
|
||||
<p className="text-lg font-bold">{data.wait_deal_income}</p>
|
||||
</div>
|
||||
<div className="text-center">
|
||||
<p className="text-sm">近一周收益</p>
|
||||
<p className="text-lg font-bold">{data.weekIncom}</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="mt-4">
|
||||
{(data.week_dashboard || data.income_from_dashboard) && <p className="text-xs my-2">*以下所有数据均为次日00:10更新</p>}
|
||||
{
|
||||
data.week_dashboard &&
|
||||
<div className="rounded-2xl bg-gradient-to-b from-[#ff668c80] to-[#FF668B30] text-white mb-4 p-4">
|
||||
<p className="text-md mb-4 font-medium">数据看板</p>
|
||||
<div className="h-40" ref={databoard}></div>
|
||||
</div>
|
||||
}
|
||||
{
|
||||
data.income_from_dashboard &&
|
||||
<div className="rounded-2xl bg-gradient-to-b from-[#ff668c80] to-[#FF668B30] text-white mb-4 p-4">
|
||||
<p className="text-md mb-4 font-medium text-white">收益来源</p>
|
||||
<div className="h-40" ref={incomeOrgin}></div>
|
||||
</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