Merge pull request 'anln' (#85) from anln into main

Reviewed-on: https://git.wishpal.cn/wishpal_ironfan/tiefen_space_web/pulls/85

app/bill/[type]/income_querry/page.jsx

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

app/bill/[type]/page.jsx

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

app/bill/layout.jsx

@@ -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">
+      {pathname.split("/").length < 4 && (
-        <div className="tabs tab-boxed w-full">
+        <div className="flex h-10">
-          <Link
+          <div className="tabs tab-boxed w-full">
-            className={`tab basis-1/4 ${
+            <Link
-              pathname === "/bill/recharge"
+              className={`tab basis-1/4 ${
-                ? "tab-active text-[#FF669E] bg-[#FF61B030] rounded-full"
+                pathname === "/bill/recharge"
-                : "text-[#FFFFFF80]"
+                  ? "tab-active text-[#FF669E] bg-[#FF61B030] rounded-full"
-            }`}
+                  : "text-[#FFFFFF80]"
-            href="recharge"
+              }`}
-          >
+              href="recharge"
-            充值
+            >
-          </Link>
+              充值
-          <Link
+            </Link>
-            className={`tab basis-1/4 ${
+            <Link
-              pathname === "/bill/cost"
+              className={`tab basis-1/4 ${
-                ? "tab-active text-[#FF669E] bg-[#FF61B030] rounded-full"
+                pathname === "/bill/cost"
-                : "text-[#FFFFFF80]"
+                  ? "tab-active text-[#FF669E] bg-[#FF61B030] rounded-full"
-            }`}
+                  : "text-[#FFFFFF80]"
-            href="cost"
+              }`}
-          >
+              href="cost"
-            消费
+            >
-          </Link>
+              消费
-          <Link
+            </Link>
-            className={`tab basis-1/4 ${
+            <Link
-              pathname === "/bill/income"
+              className={`tab basis-1/4 ${
-                ? "tab-active text-[#FF669E] bg-[#FF61B030] rounded-full"
+                pathname === "/bill/income"
-                : "text-[#FFFFFF80]"
+                  ? "tab-active text-[#FF669E] bg-[#FF61B030] rounded-full"
-            }`}
+                  : "text-[#FFFFFF80]"
-            href="income"
+              }`}
-          >
+              href="income"
-            收益
+            >
-          </Link>
+              收益
-          <Link
+            </Link>
-            className={`tab basis-1/4 ${
+            <Link
-              pathname === "/bill/withdrawal"
+              className={`tab basis-1/4 ${
-                ? "tab-active text-[#FF669E] bg-[#FF61B030] rounded-full"
+                pathname === "/bill/withdrawal"
-                : "text-[#FFFFFF80]"
+                  ? "tab-active text-[#FF669E] bg-[#FF61B030] rounded-full"
-            }`}
+                  : "text-[#FFFFFF80]"
-            href="withdrawal"
+              }`}
-          >
+              href="withdrawal"
-            提现
+            >
-          </Link>
+              提现
+            </Link>
+          </div>
         </div>
-      </div>
+      )}
+
       <div className="flex flex-1">{children}</div>
     </section>
   );

package.json

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