wishpal_ironfan
/
tiefen_space_web
6
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

anln #85

Merged
yezian merged 4 commits from anln into main 2024-07-01 19:40:51 +08:00
Conversation 0 Commits 4 Files Changed 6 +9300 -43
7 changed files with 9300 additions and 43 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files
Showing only changes of commit 27e2f36271 - Show all commits

191
app/bill/[type]/income_querry/page.jsx Normal file
View File

@ -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>
);
}

6
app/bill/[type]/page.jsx
View File

@ -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">

89
app/bill/layout.jsx
View File

@ -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>
);

5782
package-lock.json generated Normal file
View File

File diff suppressed because it is too large Load Diff

1
package.json
View File

@ -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",

0
utils/tools.js Normal file
View File

3274
yarn.lock Normal file
View File

File diff suppressed because it is too large Load Diff