修改收益明细

2024-07-24 17:12:11 +08:00 · 2024-07-24 17:12:11 +08:00 · 3d3af31c61
parent 9b5c67640a
commit 3d3af31c61
9 changed files with 204 additions and 172 deletions
--- a/app/bill/[type]/income_querry/page.jsx
+++ b/app/bill/[type]/income_querry/page.jsx
@ -1,18 +1,59 @@
 "use client";

-import Link from "next/link";
 import * as echarts from "echarts";
-import { useEffect, useRef } from "react";
-export default function IncomeQuerry({ children }) {
+import { useEffect, useRef, useState } from "react";
+import webviewBaseRequest from "@/utils/webviewBaseRequest";
+import { generateSignature } from "@/utils/crypto";
+export default function IncomeQuerry() {
  var databoard = useRef();
  var incomeOrgin = useRef();
+  const [data, setData] = useState({
+    withdraw_diamonds: 0,
+    today_income: 0,
+    wait_deal_income: 0,
+    weekIncom: 0,
+  });
  useEffect(() => {
-    createDataBoard();
-    createIncomeOrgin();
+    getData();
  }, []);
+  useEffect(() => {
+    if(databoard.current&&data.week_dashboard){
+      createDataBoard(data.week_dashboard);
+    }
+  }, [databoard.current,data]);
+  useEffect(() => {
+    if(incomeOrgin.current && data.income_from_dashboard){
+      createIncomeOrgin(data.income_from_dashboard);
+    }
+  }, [incomeOrgin.current,data]);
+  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 });
+      
+    } catch (error) {}
+  };

-  const createDataBoard = () => {
-    if (databoard.current) {
+  const createDataBoard = (data) => {
      var myChart = echarts.init(databoard.current, "dark");
      var option;
      option = {
@ -32,16 +73,24 @@ export default function IncomeQuerry({ children }) {
            },
          ],
        },
+        // tooltip: {
+        //   trigger: 'axis'
+        // },
+        tooltip: {
+          trigger: 'axis',
+          formatter: '{b} : {c}'
+        },
        xAxis: {
          type: "category",
-          data: getDateStr(),
+          boundaryGap: false,
+          data: getDateStr(data),
        },
        yAxis: {
          splitLine: {
            // show: false,
            lineStyle: {
              type: "dashed",
-                color: '#ffffff30'
+              color: "#ffffff30",
              // ...
            },
          },
@ -56,24 +105,25 @@ export default function IncomeQuerry({ children }) {
        },
        series: [
          {
-            data: [150, 230, 224, 218, 135, 147, 260],
+            name: '',
+            symbolSize: 10,
+            data:data.map(item=>item.income),
            type: "line",
+            stack: 'Total',
            lineStyle: {
-                  color: '#ffffff'
-                // ...
-              },
-              itemStyle: {
-                color:"#fff",
-                backgroundColor:"#fff"
-              }
+              color: "#ffffff",
+              // ...
+            },
+            itemStyle: {
+              color: "#fff",
+              backgroundColor: "#fff",
+            },
          },
        ],
      };
      option && myChart.setOption(option);
-    }
  };
-  const createIncomeOrgin = () => {
-    if (incomeOrgin.current) {
+  const createIncomeOrgin = (data) => {
      var myChart = echarts.init(incomeOrgin.current, "dark");
      var option;
      option = {
@ -100,14 +150,14 @@ export default function IncomeQuerry({ children }) {
          type: "scroll",
          orient: "vertical",
          right: 10,
-          top: 20,
+          top: 32,
          bottom: 20,
          color: "#fff",
          // data: data.legendData
        },
        series: [
          {
-            name: "Access From",
+            name: "",
            type: "pie",
            radius: ["40%", "70%"],
            center: ["30%", "50%"],
@ -122,7 +172,7 @@ export default function IncomeQuerry({ children }) {
            },
            emphasis: {
              label: {
-                show: true,
+                show: false,
                fontSize: 40,
                fontWeight: "bold",
              },
@ -130,61 +180,65 @@ export default function IncomeQuerry({ children }) {
            labelLine: {
              show: false,
            },
-            data: [
-              { value: 1048, name: "空间解锁" },
-              { value: 735, name: "付费贴" },
-              { value: 580, name: "超粉解锁" },
-              { value: 484, name: "个人微信" },
-              { value: 300, name: "其他分成" },
-            ],
+            data: data.map(item=>({value:item.income,name:item.desc})),
          },
        ],
      };
      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)
-    })
-  }
+  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">可提现钻石</p>
+          <p className=" text-lg mb-4 font-medium">可提现钻石</p>
          <div className="flex justify-between items-center">
-            <span className="text-3xl font-bold">{39900}</span>
-            <Link href={"#"} className="text-sm text-[#7d304c]">
+            <span className="text-3xl font-bold">{data.withdraw_diamonds}</span>
+            {/* <Link href={"#"} className="text-sm text-[#7d304c]">
              <span>前往提现</span>
-            </Link>
+            </Link> */}
          </div>
        </div>
-        <div className="flex justify-between items-center">
+        <div className="grid grid-cols-3 items-center">
          <div className="text-center">
            <p className="text-sm">今日收益</p>
-            <p className="text-lg font-bold">{9900}</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">{1500}</p>
+            <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">{15200}</p>
+            <p className="text-lg font-bold">{data.weekIncom}</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 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-lg 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-lg mb-4 font-medium text-white">收益来源</p>
+          <div className="h-40" ref={incomeOrgin}></div>
+        </div>
+        }
      </div>
    </div>
  );
--- a/app/bill/[type]/page.jsx
+++ b/app/bill/[type]/page.jsx
@ -1,71 +1,58 @@
 "use client";

 import React, { useState, useEffect } from "react";
-import Link from "next/link";
-
+import {useRouter} from "next/navigation";
+import requireAPI from "@/utils/requireAPI";
 export default function BillDetail({ params }) {
  const [data, setData] = useState([]);
  const [isFetching, setIsFetching] = useState(true);
+  const router = useRouter();
  useEffect(() => {
-    // const getData = async () => {
-    //   let type;
-    //   switch (params.type) {
-    //     case "cost":
-    //       type = 1;
-    //       break;
-    //     case "recharge":
-    //       type = 2;
-    //       break;
-    //     case "income":
-    //       type = 3;
-    //       break;
-    //     case "withdrawal":
-    //       type = 4;
-    //       break;
-    //     default:
-    //       break;
-    //   }
-    //   try {
-    //     const base = webviewBaseRequest();
-    //     const signature = generateSignature({
-    //       type: type,
-    //       offset: 0,
-    //       limit: 99,
-    //       ...base,
-    //     });
-    //     const response = await fetch(
-    //       `/api/vas/get_ch_list?signature=${signature}`,
-    //       {
-    //         method: "POST",
-    //         headers: {
-    //           "Content-Type": "application/json",
-    //         },
-    //         body: JSON.stringify({
-    //           type: type,
-    //           offset: 0,
-    //           limit: 99,
-    //           ...base,
-    //         }),
-    //       }
-    //     );
-    //     const temData = await response.json();
-    //     if (temData.ret === -1) {
-    //       Toast.show({
-    //         content: temData.msg,
-    //       });
-    //       return;
-    //     }
-    //     setData(temData.data.list);
-    //     setIsFetching(false);
-    //   } catch (error) {
-    //     console.error(error);
-    //   }
-    // };
-    // setTimeout(() => {
-    //   getData();
-    // }, 500);
+    
+    setTimeout(() => {
+      getData();
+    }, 500);
  }, []);
-
+  const getData = async () => {
+    let type;
+    switch (params.type) {
+      case "cost":
+        type = 1;
+        break;
+      case "recharge":
+        type = 2;
+        break;
+      case "income":
+        type = 3;
+        break;
+      case "withdrawal":
+        type = 4;
+        break;
+      default:
+        break;
+    }
+    try {
+      const _data = await requireAPI(
+        "POST",
+        "/api/vas/get_ch_list",
+        {body: {
+          type: type,
+          offset: 0,
+          limit: 99,
+        }}
+      );
+      if (_data.ret === -1) {
+        Toast.show({
+          content: _data.msg,
+        });
+        return;
+      }
+      setData(_data.data.list);
+      setIsFetching(false);
+    } catch (error) {
+      console.error(error);
+    }
+  };
  const RenderItem = ({ item }) => {
    return (
      <div className="flex flex-col">
@ -94,9 +81,9 @@ 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"}>
+        <div className="flex flex-col mt-4 btn border-none bg-[#FF61B030] items-center text-base font-medium" onClick={()=>router.push("income/income_querry")}>
          <p className="text-primary">查看近一周收益情况</p>
-        </Link>
+        </div>
      )}
      {data.length === 0 && (
        <div className="flex flex-col mt-4 w-full items-center">
@ -130,9 +117,11 @@ export default function BillDetail({ params }) {
          <p className="text-base text-secondary mt-2 font-medium">暂无数据</p>
        </div>
      )}
-      {/* {data.map((item, index) => (
+      <div>
+      {data.map((item, index) => (
        <RenderItem key={index} item={item} />
-      ))} */}
+      ))}
+      </div>
    </section>
  );
 }
--- a/app/bill/layout.jsx
+++ b/app/bill/layout.jsx
@ -3,13 +3,16 @@
 import { usePathname } from "next/navigation";
 import Link from "next/link";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
-import {
-  faAngleLeft,
-} from "@fortawesome/free-solid-svg-icons";
+import { faAngleLeft } from "@fortawesome/free-solid-svg-icons";
 import { useRouter } from "next/navigation";
+import { useEffect, useState } from "react";
 export default function BillLayout({ children }) {
  const pathname = usePathname();
  const router = useRouter();
+  const [scrollHeight, setScrollHeight] = useState(0);
+  useEffect(() => {
+    setScrollHeight(window.innerHeight - 44);
+  }, []);
  return (
    <section className="flex flex-1 flex-col container">
      <div className="p-4 fixed top-0 z-10 w-full">
@ -18,15 +21,20 @@ export default function BillLayout({ children }) {
            icon={faAngleLeft}
            size="xl"
            onClick={() => {
-              router.push("/my/wallet");
+              pathname.split("/").length < 4?
+              router.push("/my/wallet"):
+              router.back();
            }}
          />
        </div>
        <p className="text-base text-center leading-9">收支明细</p>
      </div>
      {pathname.split("/").length < 4 && (
-        <div className="flex h-10 mt-16 p-4">
-          <div className="tabs tab-boxed w-full">
+        <div
+          className="flex flex-col mt-14 px-4 overflow-y-auto"
+          style={{ maxHeight: scrollHeight }}
+        >
+          <div className="tabs tab-boxed w-full py-2  sticky top-0 bg-deepBg">
            <Link
              className={`tab basis-1/4 ${
                pathname === "/bill/recharge"
@ -68,10 +76,11 @@ export default function BillLayout({ children }) {
              提现
            </Link>
          </div>
+          <div className="flex flex-1">{children}</div>
        </div>
      )}

-      <div className="flex flex-1">{children}</div>
+      {pathname.split("/").length >3 && <div className="mt-14 px-4 flex flex-1">{children}</div>}
    </section>
  );
 }
--- a/app/bill/page.js
+++ b/app/bill/page.js
@ -1,33 +0,0 @@
-"use client";
-
-import React, { useEffect, useState } from "react";
-import { useRouter } from "next/navigation";
-import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
-import {
-  faAngleLeft,
-} from "@fortawesome/free-solid-svg-icons";
-export default function Recharge() {
-  const router = useRouter();
-  // 获取屏幕高度
-  // const scrollHeight = 600;
-  useEffect(() => {}, []);
-  return (
-    <div className="">
-      <div className="p-4 fixed top-0 z-10 w-full">
-        <div className="w-9 h-9 flex items-center justify-center bg-[#FFFFFF1A] rounded-full float-left">
-          <FontAwesomeIcon
-            icon={faAngleLeft}
-            size="xl"
-            onClick={() => {
-              router.push("/my/wallet");
-            }}
-          />
-        </div>
-        <p className="text-base text-center leading-9">收支明细</p>
-      </div>
-      {/* 内容 */}
-      <div className="p-4 pt-24">
-      </div>
-    </div>
-  );
-}
--- a/app/my/wallet/page.js
+++ b/app/my/wallet/page.js
@ -24,13 +24,17 @@ export default function Wallet() {
  // 获取屏幕高度
  // const scrollHeight = 600;
  useEffect(() => {
-    getData()
+    getData();
  }, []);
  const getData = async () => {
    try {
      //获取账号基本信息
-      const _data =
-        await requireAPI("POST", "/api/account/list_by_mid", null, true);
+      const _data = await requireAPI(
+        "POST",
+        "/api/account/list_by_mid",
+        null,
+        true
+      );
      if (_data.ret === -1) {
        Toast.show({
          icon: "fail",
@ -69,7 +73,9 @@ export default function Wallet() {
              width={48}
              height={48}
            />
-            <p className="text-2xl font-semibold text-white">{data?.gold_num || 0}</p>
+            <p className="text-2xl font-semibold text-white">
+              {data?.gold_num || 0}
+            </p>
            <p className="text-sm text-white">金币</p>
          </div>
          <Divider
@ -83,7 +89,9 @@ export default function Wallet() {
              width={48}
              height={48}
            />
-            <p className="text-2xl font-semibold text-white">{data?.diamond_num || 0}</p>
+            <p className="text-2xl font-semibold text-white">
+              {data?.diamond_num || 0}
+            </p>
            <p className="text-sm text-white">钻石</p>
          </div>
        </div>
@ -95,10 +103,14 @@ export default function Wallet() {
                //   title: "充值中心",
                //   uri: process.env.EXPO_PUBLIC_WEB_URL + "/pay",
                // })
-                {console.log("base,base",base);
-                router.push(
-                  `/webView/${encodeURIComponent(`pay?base=${encodeURIComponent(JSON.stringify(base))}`)}`
-                )}
+                {
+                  console.log("base,base", base);
+                  router.push(
+                    `/webView/${encodeURIComponent(
+                      `pay?base=${encodeURIComponent(JSON.stringify(base))}`
+                    )}`
+                  );
+                }
              }
              className="flex justify-between items-center py-4 w-full"
            >
@ -143,7 +155,8 @@ export default function Wallet() {
            </div>
            <div
              onClick={() =>
-                window && window.open(
+                window &&
+                window.open(
                  `${process.env.NEXT_PUBLIC_WEB_URL}/withdrawal?mid=${data?.mid}&mobile_phone=${mobilePhone}&token=${temToken}`
                )
              }
--- a/app/space/[id]/page.js
+++ b/app/space/[id]/page.js
@ -316,7 +316,7 @@ export default function PersonSpace() {
                                data?.id +
                                "/h5_zone_superfanship/0" +
                                "?base=" +
-                                encodeURIComponent(base)
+                                encodeURIComponent(JSON.stringify(base))
                            )
                        );
                  }}
--- a/app/space/person_space_introduce/[mid]/page.js
+++ b/app/space/person_space_introduce/[mid]/page.js
@ -302,7 +302,7 @@ export default function PersonSpaceIntroduce() {
                            data?.id +
                            "/h5_zone_admission/0" +
                            "?base=" +
-                            encodeURIComponent(base)
+                            encodeURIComponent(JSON.stringify(base))
                        )
                    );
                  }
--- a/components/PaySpacePost/index.js
+++ b/components/PaySpacePost/index.js
@ -103,7 +103,7 @@ export default function PaySpacePost({
                          "/zone/pay/" +
                            data?.id +
                            "/h5_zone_moment/" +
-                            data?.id+"?base="+encodeURIComponent(base)
+                            data?.id+"?base="+encodeURIComponent(JSON.stringify(base))
                        )
                    )
                  }
--- a/components/Photos/index.js
+++ b/components/Photos/index.js
@ -141,7 +141,7 @@ export default function Photos({ isUnlocked, mediaAmount, media, type, data }) {
                    "/h5_zone_moment/" +
                    data?.id +
                    "?base=" +
-                    encodeURIComponent(base)
+                    encodeURIComponent(JSON.stringify(base))
                )
            );
          }}