Merge pull request 'zone' (#77) from zone into main

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

app/[user_id]/_components/WechatBar/index.jsx

@@ -127,7 +127,7 @@ export default function WechatBar({
         </div>
       </div>
       <dialog id="comfirm_modal" className="modal">
-        <div className="modal-box bg-[#13121F]">
+        <div className="modal-box bg-[#17161A]">
           <p className="text-white text-base font-medium">
             购买成功后请到"账号"-"已购"添加Ta的微信，若超72小时未添加成功请联系客服
           </p>

app/[user_id]/page.jsx

@@ -65,11 +65,11 @@ export default function StreamerDetail({ params }) {
     <section className="flex flex-1 flex-col container relative">
       <InOtherApp />
       <div className="absolute top-0 left-0 w-full">
-        <div className="relative">
+        <div className="flex relative h-64 overflow-hidden">
           <img
             src={data?.cover?.images[0].urls[0]}
             alt=""
-            className="w-full h-64 object-cover object-center opacity-30"
+            className="w-full object-cover opacity-30"
           />
           <div className="absolute top-0 left-0 w-full h-64 bg-gradient-to-t from-[#07050A] to-[#00000000]"></div>
         </div>

app/bill/layout.jsx

@@ -9,16 +9,6 @@ export default function BillLayout({ children }) {
     <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/cost"
-                ? "tab-active text-[#FF669E] bg-[#FF61B030] rounded-full"
-                : "text-[#FFFFFF80]"
-            }`}
-            href="cost"
-          >
-            消费
-          </Link>
           <Link
             className={`tab basis-1/4 ${
               pathname === "/bill/recharge"
@@ -29,6 +19,16 @@ export default function BillLayout({ children }) {
           >
             充值
           </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"

app/purchased/page.jsx

@@ -171,7 +171,7 @@ export default function Purchased() {
     };
     return (
       <dialog id="get_wechat_modal" className="modal">
-        <div className="modal-box bg-[#13121F]">
+        <div className="modal-box bg-[#17161A]">
           <p className="text-white text-base font-medium text-center mb-4">
             Ta的微信号：<span>{currentWechat}</span>
           </p>

app/tool/[user_id]/_components/WechatBar/index.jsx

@@ -98,7 +98,7 @@ export default function WechatBar({ price, streamerMid }) {
         </div>
       </div>
       <dialog id="comfirm_modal" className="modal">
-        <div className="modal-box bg-[#13121F]">
+        <div className="modal-box bg-[#17161A]">
           <p className="text-white text-base font-medium">
             购买成功后请到"账号"-"已购"添加Ta的微信，若超72小时未添加成功请联系客服
           </p>

app/vip/page.jsx

@@ -36,44 +36,49 @@ export default function Vip() {
   const [isVip, setIsVip] = useState(false);
   const [name, setName] = useState("");
   const [isFetching, setIsFetching] = useState(true);
-  useEffect(() => {
+  const getUserData = async () => {
-    const getUserData = async () => {
+    try {
-      try {
+      const base = webviewBaseRequest();
-        const base = webviewBaseRequest();
+      const signature = generateSignature({
-        const signature = generateSignature({
+        ...base,
-          ...base,
+        mid: base.b_mid,
-          mid: base.b_mid,
+      });
-        });
+      const detailResponse = await fetch(
-        const detailResponse = await fetch(
+        `/api/account/list_by_mid?signature=${signature}`,
-          `/api/account/list_by_mid?signature=${signature}`,
+        {
-          {
+          method: "POST",
-            method: "POST",
+          headers: {
-            headers: {
+            "Content-Type": "application/json",
-              "Content-Type": "application/json",
+          },
-            },
+          body: JSON.stringify({
-            body: JSON.stringify({
+            ...base,
-              ...base,
+            mid: base.b_mid,
-              mid: base.b_mid,
+          }),
-            }),
-          }
-        );
-        const detailData = await detailResponse.json();
-        if (detailData.ret === -1) {
-          Toast.show({
-            content: detailData.msg,
-          });
-          return;
         }
-        setName(detailData.data.account.name);
+      );
-        if (detailData.data.account.is_a_member === 1) setIsVip(true);
+      const detailData = await detailResponse.json();
-        setIsFetching(false);
+      if (detailData.ret === -1) {
-      } catch (error) {
+        Toast.show({
-        console.error(error);
+          content: detailData.msg,
+        });
+        return;
       }
-    };
+      setName(detailData.data.account.name);
+      if (detailData.data.account.is_a_member === 1) setIsVip(true);
+      setIsFetching(false);
+    } catch (error) {
+      console.error(error);
+    }
+  };
+  //轮询请求
+  useEffect(() => {
     setTimeout(() => {
       getUserData();
     }, 500);
+    const intervalId = setInterval(() => {
+      getUserData();
+    }, 2000);
+    return () => clearInterval(intervalId);
   }, []);
 
   //创建充值订单

app/withdrawal/page.jsx

@@ -403,7 +403,7 @@ export default function WithDrawal() {
         4.自助提现渠道每日只能提现一次，若有更多提现需求，请联系客服。
       </p>
       <dialog id="comfirm_modal" className="modal">
-        <div className="modal-box bg-[#13121F]">
+        <div className="modal-box bg-[#17161A]">
           <p className="text-white text-base font-medium">
             提现金额：
             <span className="text-secondary">¥{withdrawalNum / 10}</span>

app/zone/[user_id]/page.jsx

@@ -0,0 +1,212 @@
+"use client";
+
+import React, { useState, useEffect } from "react";
+import Image from "next/image";
+import pinkline from "@/public/images/pinkline.png";
+import ID from "@/public/images/ID.png";
+import tiefen from "@/public/images/tiefen.png";
+import wechat from "@/public/images/wechat.png";
+import { Toast } from "antd-mobile";
+import baseRequest from "@/utils/baseRequest";
+import { generateSignature } from "@/utils/crypto";
+import copy from "@/utils/copy";
+import { setCookie } from "cookies-next";
+import Link from "next/link";
+
+export default function Zone({ params }) {
+  //页面数据
+  const [data, setData] = useState({});
+  useEffect(() => {
+    const getData = async () => {
+      try {
+        const base = baseRequest();
+        const body = {
+          user_id: parseInt(params.user_id, 10),
+          ...base,
+        };
+        const signature = generateSignature(body);
+        const _response = await fetch(
+          `/api/zone/list_by_user_id_from_outside?signature=${signature}`,
+          {
+            method: "POST",
+            headers: {
+              "Content-Type": "application/json",
+            },
+            body: JSON.stringify(body),
+          }
+        );
+        const _data = await _response.json();
+        if (_data.ret === -1) {
+          Toast.show({
+            content: _data.msg,
+          });
+          return;
+        }
+        setData(_data.data.list[0]);
+      } catch (error) {
+        console.error(error);
+      }
+    };
+    getData();
+  }, []);
+
+  //将主播链接复制到剪贴板，并存cookie
+  const copyAndSetCookieInviter = () => {
+    setCookie("inviter", data?.streamer_ext?.user_id);
+    copy(
+      `【${data?.streamer_ext?.name}】『ID：${data?.streamer_ext?.user_id}』，复制此条消息，打开铁粉空间APP，查看详情https://tiefen.fun/zone/${data?.streamer_ext?.user_id}`
+    );
+  };
+
+  return (
+    <section className="flex flex-col flex-1 container">
+      <div className="flex absolute top-0 left-0 w-full h-64 overflow-hidden">
+        <img
+          src={data?.streamer_ext?.cover?.images[0]?.urls[0]}
+          alt=""
+          className="w-full object-cover opacity-30"
+        />
+      </div>
+      <div className="flex flex-row items-center gap-3 px-6 pt-12 z-10">
+        <div className="flex w-[4.6rem] aspect-square rounded-full border-2 border-white overflow-hidden">
+          <img
+            src={data?.streamer_ext?.avatar?.images[0]?.urls[0]}
+            alt=""
+            className="w-full object-cover"
+          />
+        </div>
+        <div className="flex flex-col gap-1">
+          <p className="text-white font-medium text-[22px] w-64 truncate">
+            {data?.streamer_ext?.name}
+          </p>
+          <div className="flex flex-row">
+            <div className="flex flex-row items-center py-0.5 px-2 mr-2 bg-[#FFFFFF1A] rounded-full">
+              <Image src={ID} alt="" className="w-4" />
+              <p className="text-white text-xs font-medium ml-0.5">
+                {data?.streamer_ext?.user_id}
+              </p>
+            </div>
+          </div>
+        </div>
+      </div>
+      <div className="flex flex-row justify-around p-6 z-10">
+        <div className="flex flex-col items-center">
+          <p className="text-white text-2xl font-medium">
+            {data?.zone_moment_count}
+          </p>
+          <p className="text-white text-sm font-medium">动态</p>
+        </div>
+        <div className="flex flex-col items-center">
+          <p className="text-white text-2xl font-medium">{data?.image_count}</p>
+          <p className="text-white text-sm font-medium">照片</p>
+        </div>
+        <div className="flex flex-col items-center">
+          <p className="text-white text-2xl font-medium">{data?.video_count}</p>
+          <p className="text-white text-sm font-medium">视频</p>
+        </div>
+      </div>
+      <div className="flex flex-col w-full rounded-t-3xl bg-[#07050A] p-6 pb-0 z-10">
+        <div className="flex">
+          <div className="relative">
+            <p className="text-lg text-white font-medium">空间介绍</p>
+            <Image
+              src={pinkline}
+              alt=""
+              className="absolute w-9 bottom-0 -right-2"
+            />
+          </div>
+        </div>
+      </div>
+      <div className="flex flex-col w-full bg-[#07050A] px-6 pt-3 z-10">
+        <p className="text-white text-base">{data?.profile}</p>
+        <div className="flex flex-row flex-wrap mt-2 justify-between gap-1">
+          {data?.streamer_ext?.album?.images?.map((item, index) => {
+            if (index > 2) return;
+            return (
+              <div
+                key={index}
+                className="flex flex-1 aspect-square overflow-hidden rounded"
+              >
+                <img
+                  src={item?.urls[0]}
+                  alt=""
+                  className="w-full object-cover"
+                />
+              </div>
+            );
+          })}
+        </div>
+      </div>
+      <div className="flex flex-row justify-around px-6 pt-6 z-10">
+        <div
+          className="flex flex-row items-center gap-1 cursor-pointer"
+          onClick={() => document.getElementById("comfirm_modal").showModal()}
+        >
+          <Image src={tiefen} alt="" className="w-5" />
+          <p className="text-white text-sm font-meidum">查看更多内容</p>
+        </div>
+        <div
+          className="flex flex-row items-center gap-1 cursor-pointer"
+          onClick={() => document.getElementById("comfirm_modal").showModal()}
+        >
+          <Image src={wechat} alt="" className="w-5" />
+          <p className="text-white text-sm font-meidum">解锁Ta的微信</p>
+        </div>
+      </div>
+      <div className="px-6 pt-6">
+        <div
+          className="btn bg-gradient-to-r from-[#FF668B] to-[#FF66F0] rounded-full text-white text-lg font-medium w-full"
+          onClick={() => {
+            copyAndSetCookieInviter();
+            document.getElementById("comfirm_modal").showModal();
+          }}
+        >
+          立即加入
+        </div>
+      </div>
+      <div className="flex flex-col w-full bg-[#07050A] p-6 pb-0 z-10">
+        <div className="flex">
+          <div className="relative">
+            <p className="text-lg text-white font-medium">加入须知</p>
+            <Image
+              src={pinkline}
+              alt=""
+              className="absolute w-9 bottom-0 -right-2"
+            />
+          </div>
+        </div>
+      </div>
+      <div className="flex flex-col w-full bg-[#07050A] px-6 pt-3 z-10 gap-1">
+        <p className="text-white text-base">
+          1、加入后，您可以查看空间内相关内容；
+        </p>
+        <p className="text-white text-base">
+          2、本空间由空间主人自行创建，加入空间前请确认相关风险，本平台不提供相关保证，请避免上当受骗；
+        </p>
+        <p className="text-white text-base">
+          3、本平台不提供违法及色情内容，如您发现空间内存在以上内容，请联系人工客服举报处理。
+        </p>
+      </div>
+      <dialog id="comfirm_modal" className="modal">
+        <div className="modal-box bg-[#17161A]">
+          <p className="text-white text-base font-medium">
+            {`请打开或下载【铁粉空间】APP，根据APP内弹窗指引加入空间。如未弹出，请在APP搜索ID：${data?.streamer_ext?.user_id}，加入空间。`}
+          </p>
+          <div className="flex flex-row mt-4">
+            <Link
+              className="flex flex-row flex-1 mx-2 items-center justify-center bg-[#FF669E] rounded-lg py-2"
+              href="/"
+            >
+              <p className="text-white text-base ml-1">确认</p>
+            </Link>
+            <form method="dialog" className="flex flex-row flex-1 mx-2">
+              <button className="flex flex-row flex-1 items-center justify-center border border-secondary rounded-lg py-2">
+                <p className="text-secondary text-base ml-1">取消</p>
+              </button>
+            </form>
+          </div>
+        </div>
+      </dialog>
+    </section>
+  );
+}

app/zone/share/[user_id]/page.jsx

@@ -0,0 +1,164 @@
+"use client";
+
+import React, { useState, useEffect } from "react";
+import html2canvas from "html2canvas";
+import baseRequest from "@/utils/baseRequest";
+import { Toast } from "antd-mobile";
+import { generateSignature } from "@/utils/crypto";
+
+export default function Share({ params }) {
+  //获取页面数据、生成二维码
+  const [data, setData] = useState({});
+  const [qrcodeUrl, setQrcodeUrl] = useState("");
+  const [isFetching, setIsFetching] = useState(true);
+  useEffect(() => {
+    const getData = async () => {
+      try {
+        const base = baseRequest();
+        const signature = generateSignature({
+          user_id: parseInt(params.user_id, 10),
+          ...base,
+        });
+        const detailResponse = await fetch(
+          `/api/streamer/list_ext_by_user_id?signature=${signature}`,
+          {
+            method: "POST",
+            headers: {
+              "Content-Type": "application/json",
+            },
+            body: JSON.stringify({
+              user_id: parseInt(params.user_id, 10),
+              ...base,
+            }),
+          }
+        );
+        const detailData = await detailResponse.json();
+        if (detailData.ret === -1) {
+          Toast.show({
+            content: detailData.msg,
+          });
+          return;
+        }
+        setData(detailData.data.streamer_ext);
+        var QRCode = require("qrcode");
+        QRCode.toDataURL(
+          `https://tiefen.fun/zone/${params.user_id}`,
+          function (err, url) {
+            setQrcodeUrl(url);
+          }
+        );
+        setIsFetching(false);
+      } catch (error) {
+        console.error(error);
+      }
+    };
+    getData();
+  }, []);
+
+  //分享海报组件
+  const Poster = () => {
+    return (
+      <div className="flex flex-col">
+        <div id="print" className="flex flex-col overflow-hidden bg-[#07050A]">
+          <div className="flex w-full justify-center items-center aspect-square overflow-hidden">
+            <img
+              className="w-full"
+              src={data?.cover?.images[0].urls[0]}
+              alt=""
+            />
+          </div>
+          <div className="flex flex-row items-center w-full p-2 bg-[#07050A]">
+            <div className="flex flex-col justify-around items-start shrink min-w-0">
+              <div className="flex flex-row items-center w-full">
+                <div className="flex items-center justify-center shrink-0 rounded-full overflow-hidden aspect-square w-12 border border-white">
+                  <img
+                    className="w-full"
+                    src={data?.avatar?.images[0].urls[0]}
+                    alt=""
+                  />
+                </div>
+                <div className="flex flex-col ml-2 shrink min-w-0">
+                  <p className="font-medium text-base text-white truncate">
+                    {data?.name}
+                  </p>
+                  <div className="flex justify-start flex-1">
+                    <div className="flex flex-row items-center py-0.5 px-2 bg-[#FFFFFF1A] rounded-full">
+                      <p className="text-xs text-white font-medium">ID</p>
+                      <p className="text-white text-xs font-medium ml-0.5">
+                        {data?.user_id}
+                      </p>
+                    </div>
+                  </div>
+                </div>
+              </div>
+              <div className="flex flex-col px-2 py-1 mt-2 bg-[#FF61B030] rounded-full justify-center">
+                <p className="text-xs text-[#FF669E] rounded-full text-center">
+                  邀您加入我的
+                  <span className="text-xs text-[#FF669E] font-semibold">
+                    「铁粉空间」
+                  </span>
+                </p>
+              </div>
+            </div>
+            <div className="h-20 aspect-square ml-auto overflow-hidden rounded shrink-0">
+              <img className="object-cover scale-110 w-full" src={qrcodeUrl} />
+            </div>
+          </div>
+        </div>
+        <button
+          onClick={saveImage}
+          className="btn btn-md bg-gradient-to-r from-[#FF668B] to-[#FF66F0] rounded-full text-white text-base font-medium w-full mt-4"
+        >
+          保存图片
+        </button>
+        <button
+          onClick={copyUrl}
+          className="btn btn-md bg-gradient-to-r from-[#FF668B] to-[#FF66F0] rounded-full text-white text-base font-medium w-full mt-4"
+        >
+          复制链接
+        </button>
+      </div>
+    );
+  };
+
+  //保存图片
+  const saveImage = async () => {
+    const element = document.getElementById("print");
+    const canvas = await html2canvas(element, {
+      useCORS: true,
+    });
+    const data = canvas.toDataURL("image/jpg");
+    window.ReactNativeWebView.postMessage(
+      JSON.stringify({
+        type: "SAVE_IMAGE",
+        data: data,
+      })
+    );
+  };
+
+  //复制链接
+  const copyUrl = () => {
+    window.ReactNativeWebView.postMessage(
+      JSON.stringify({
+        type: "COPY_URL",
+        data: `https://tiefen.fun/zone/${params.user_id}`,
+      })
+    );
+  };
+
+  if (isFetching) {
+    return (
+      <section className="flex flex-1 justify-center container">
+        <span className="absolute top-1/2 loading loading-spinner loading-lg"></span>
+      </section>
+    );
+  }
+
+  return (
+    <section className="flex flex-1 flex-col items-center justify-center container">
+      <div className="w-4/5">
+        <Poster />
+      </div>
+    </section>
+  );
+}