tiefen_space_web/app/invite/[user_id]/page.jsx

"use client";

import React, { useState, useEffect } from "react";
import html2canvas from "html2canvas";
import baseRequest from "@/utils/baseRequest";
import { Toast } from "antd-mobile";
import Divider from "@/components/Divider";
import { generateSignature } from "@/utils/crypto";
import Image from "next/image";
import icon_without_bg from "@/public/images/icon_without_bg.png";
import invite_girl from "@/public/images/invite_girl.png";

export default function Invite({ params }) {
  return (
    <section className="flex flex-col mt-32 items-center">
      <svg viewBox="0 0 1143 1024" width="120" height="120">
        <path
          d="M230.78912 431.75424c-5.26848 0-10.54208-1.98656-14.57664-5.98016-8.17152-8.04864-8.24832-21.1968-0.2048-29.35296l14.57664-14.77632c8.04864-8.17152 21.22752-8.25344 29.35296-0.2048 8.17152 8.04864 8.24832 21.1968 0.19968 29.35296l-14.57664 14.78144C241.5104 429.68576 236.13952 431.75424 230.78912 431.75424L230.78912 431.75424zM289.09056 372.63872c-5.26848 0-10.54208-1.9968-14.59712-5.9904-8.15104-8.05888-8.22784-21.1968-0.18432-29.35296l14.59712-14.77632c8.0896-8.17152 21.20704-8.23296 29.37344-0.18432 8.15104 8.05888 8.23296 21.19168 0.18432 29.35296l-14.59712 14.77632C299.79648 370.58048 294.44096 372.63872 289.09056 372.63872L289.09056 372.63872zM347.41248 313.5232c-5.26848 0-10.54208-1.98656-14.57664-5.98016-8.17152-8.04864-8.24832-21.1968-0.2048-29.35296l14.57664-14.78144c8.04864-8.17152 21.22752-8.24832 29.35296-0.2048 8.17152 8.04864 8.24832 21.19168 0.19968 29.35296l-14.57664 14.77632C358.13888 311.45472 352.768 313.5232 347.41248 313.5232L347.41248 313.5232zM405.71904 254.40768c-5.26848 0-10.54208-1.98656-14.57664-5.98016-8.17152-8.04864-8.24832-21.19168-0.2048-29.35296l14.57664-14.78144c8.04864-8.17152 21.22752-8.24832 29.35296-0.2048 8.17152 8.04864 8.24832 21.19168 0.2048 29.35296l-14.57664 14.78144C416.44544 252.3392 411.06944 254.40768 405.71904 254.40768L405.71904 254.40768zM464.04096 195.28192c-5.26848 0-10.54208-1.98656-14.57664-5.98016-8.17152-8.04864-8.24832-21.19168-0.2048-29.35296l14.57664-14.78144c8.04864-8.17152 21.22752-8.24832 29.35296-0.19968 8.17152 8.04864 8.24832 21.19168 0.2048 29.35296l-14.57664 14.77632C474.76736 193.21856 469.39648 195.28192 464.04096 195.28192L464.04096 195.28192zM911.21152 431.75424c-5.3504 0-10.72128-2.06848-14.77632-6.18496l-14.57664-14.78144c-8.04864-8.16128-7.97184-21.30432 0.19968-29.35296 8.13056-8.04864 21.30944-7.96672 29.35296 0.2048l14.57664 14.77632c8.04864 8.16128 7.96672 21.30432-0.2048 29.35296C921.7536 429.76256 916.48 431.75424 911.21152 431.75424L911.21152 431.75424zM852.90496 372.63872c-5.3504 0-10.7008-2.05824-14.77632-6.17472l-14.59712-14.77632c-8.04864-8.16128-7.96672-21.29408 0.18432-29.35296 8.17152-8.04864 21.28384-7.9872 29.37344 0.18432l14.59712 14.77632c8.04864 8.16128 7.96672 21.2992-0.18432 29.35296C863.44704 370.64192 858.17856 372.63872 852.90496 372.63872L852.90496 372.63872zM794.58304 313.5232c-5.3504 0-10.7264-2.06848-14.77632-6.18496l-14.57664-14.77632c-8.04864-8.16128-7.96672-21.30432 0.2048-29.35296 8.13056-8.04864 21.30432-7.96672 29.35296 0.2048l14.57664 14.78144c8.04864 8.16128 7.96672 21.30432-0.2048 29.35296C805.12512 311.53664 799.85664 313.5232 794.58304 313.5232L794.58304 313.5232zM736.2816 254.40768c-5.3504 0-10.72128-2.06848-14.77632-6.18496l-14.57664-14.78144c-8.04864-8.16128-7.96672-21.30432 0.19968-29.35296 8.13056-8.04864 21.30944-7.96672 29.35296 0.2048l14.57664 14.78144c8.04864 8.16128 7.96672 21.30432-0.19968 29.35296C746.82368 252.42112 741.55008 254.40768 736.2816 254.40768L736.2816 254.40768zM677.95456 195.28192c-5.3504 0-10.72128-2.06848-14.77632-6.18496l-14.57664-14.77632c-8.04864-8.16128-7.97184-21.30432 0.19968-29.35296 8.13056-8.04864 21.32992-7.96672 29.35296 0.19968l14.57664 14.78144c8.04864 8.16128 7.96672 21.30432-0.19968 29.35296C688.49664 193.29536 683.22816 195.28192 677.95456 195.28192L677.95456 195.28192zM1026.84672 1024 115.19488 1024c-63.45216 0-115.06688-51.00544-115.06688-113.72544l0-364.25728c0-62.73536 51.61472-113.78176 115.06688-113.78176l911.65184 0c63.43168 0 115.02592 51.0464 115.02592 113.78176l0 364.25728C1141.87264 972.99456 1090.2784 1024 1026.84672 1024L1026.84672 1024zM115.19488 473.75872c-40.54528 0-73.5488 32.41472-73.5488 72.26368l0 364.25728c0 39.81312 33.00352 72.21248 73.5488 72.21248l911.65184 0c40.5248 0 73.50784-32.39424 73.50784-72.21248l0-364.25728c0-39.84384-32.98304-72.26368-73.50784-72.26368L115.19488 473.75872 115.19488 473.75872zM571.01824 171.76064c-47.35488 0-85.89312-38.528-85.89312-85.87264C485.12512 38.528 523.66336 0 571.01824 0s85.89312 38.528 85.89312 85.88288C656.91648 133.22752 618.37824 171.76064 571.01824 171.76064L571.01824 171.76064zM571.01
          fill="#838284"
        ></path>
        <path
          d="M148.59776 872.96 187.32032 732.16 148.59776 872.96Z"
          fill="#838284"
        ></path>
        <path
          d="M306.2016 766.47936l23.28064 5.87776c-4.87936 19.11808-13.66016 33.69984-26.3424 43.74016s-28.18048 15.05792-46.49984 15.05792c-18.95936 0-34.3808-3.86048-46.2592-11.58144s-20.92032-18.89792-27.12064-33.54112-9.29792-30.3616-9.29792-47.16032c0-18.31936 3.50208-34.29888 10.50112-47.93856s16.96256-24.00256 29.88032-31.0784 27.14112-10.61888 42.65984-10.61888c17.60256 0 32.39936 4.48 44.40064 13.44s20.36224 21.56032 25.07776 37.80096l-22.92224 5.4016c-4.08064-12.8-9.99936-22.1184-17.76128-27.96032s-17.52064-8.76032-29.28128-8.76032c-13.52192 0-24.82176 3.24096-33.89952 9.71776s-15.4624 15.1808-19.13856 26.10176-5.51936 22.17984-5.51936 33.78176c0 14.96064 2.18112 28.02176 6.53824 39.17824s11.14112 19.50208 20.34176 25.02144 19.15904 8.27904 29.88032 8.27904c13.04064 0 24.07936-3.75808 33.12128-11.27936S303.0016 781.28128 306.2016 766.47936z"
          fill="#838284"
        ></path>
        <path
          d="M357.20192 828.16l0-175.91808 23.28064 0 0 155.1616 86.64064 0 0 20.7616L357.20192 828.16512z"
          fill="#838284"
        ></path>
        <path
          d="M487.76192 742.48192c0-29.19936 7.83872-52.06016 23.52128-68.5824s35.92192-24.7808 60.71808-24.7808c16.24064 0 30.87872 3.88096 43.91936 11.63776s22.97856 18.58048 29.81888 32.4608 10.26048 29.6192 10.26048 47.22176c0 17.83808-3.59936 33.80224-10.79808 47.88224s-17.39776 24.73984-30.60224 31.97952-27.43808 10.85952-42.72128 10.85952c-16.55808 0-31.36-3.99872-44.40064-12.00128s-22.92224-18.9184-29.63968-32.75776S487.76192 757.91872 487.76192 742.48192zM511.75936 742.84032c0 21.20192 5.69856 37.89824 17.1008 50.0992s25.7024 18.29888 42.90048 18.29888c17.52064 0 31.93856-6.15936 43.25888-18.47808s16.97792-29.7984 16.97792-52.43904c0-14.32064-2.42176-26.81856-7.26016-37.49888s-11.91936-18.95936-21.23776-24.84224-19.77856-8.82176-31.38048-8.82176c-16.48128 0-30.65856 5.6576-42.54208 16.97792S511.75936 716.35968 511.75936 742.84032z"
          fill="#838284"
        ></path>
        <path
          d="M678.08256 771.64032l21.95968-1.92c1.03936 8.80128 3.46112 16.02048 7.26016 21.6576s9.7024 10.19904 17.69984 13.68064 16.9984 5.2224 26.99776 5.2224c8.87808 0 16.72192-1.32096 23.52128-3.95776s11.85792-6.26176 15.1808-10.85952 4.98176-9.62048 4.98176-15.05792c0-5.51936-1.60256-10.3424-4.80256-14.45888s-8.47872-7.5776-15.84128-10.37824c-4.72064-1.83808-15.16032-4.70016-31.31904-8.58112s-27.47904-7.54176-33.96096-10.9824c-8.40192-4.39808-14.65856-9.86112-18.78016-16.37888s-6.17984-13.81888-6.17984-21.89824c0-8.87808 2.51904-17.1776 7.56224-24.89856s12.40064-13.57824 22.08256-17.58208 20.43904-6.00064 32.2816-6.00064c13.04064 0 24.54016 2.0992 34.49856 6.2976s17.61792 10.37824 22.97856 18.53952 8.23808 17.39776 8.64256 27.71968l-22.31808 1.67936c-1.19808-11.12064-5.25824-19.52256-12.18048-25.20064s-17.14176-8.51968-30.65856-8.51968c-14.08 0-24.34048 2.58048-30.78144 7.74144s-9.66144 11.38176-9.66144 18.6624c0 6.31808 2.2784 11.52 6.84032 15.60064 4.48 4.08064 16.1792 8.25856 35.0976 12.53888s31.8976 8.01792 38.9376 11.21792c10.24 4.72064 17.80224 10.7008 22.6816 17.94048s7.3216 15.58016 7.3216 25.02144c0 9.35936-2.67776 18.18112-8.0384 26.46016s-13.06112 14.72-23.10144 19.31776-21.34016 6.90176-33.89952 6.90176c-15.91808 0-29.2608-2.31936-40.01792-6.95808s-19.2-11.6224-25.3184-20.9408S678.4 783.40096 678.08256 771.64032z"
          fill="#838284"
        ></path>
        <path
          d="M850.40128 828.16l0-175.91808 127.20128 0 0 20.7616-103.92064 0 0 53.87776 97.32096 0L971.00288 747.52l-97.32096 0 0 59.8784 108.00128 0 0 20.7616L850.40128 828.16z"
          fill="#838284"
        ></path>
      </svg>
      <p className="text-secondary text-base font-medium mt-2">
        邀请功能施工中，请等待开放。
      </p>
    </section>
  );

  //获取页面数据、生成二维码
  const [data, setData] = useState({});
  const [qrcodeUrl, setQrcodeUrl] = useState("");
  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);
      } catch (error) {
        console.error(error);
      }
    };
    getData();
    var QRCode = require("qrcode");
    QRCode.toDataURL("https://tiefen.fun", function (err, url) {
      setQrcodeUrl(url);
    });
  }, []);

  //分享海报组件
  const InvitePoster = () => {
    return (
      <div className="flex flex-col">
        <div id="print" className="flex flex-col">
          <div className="flex w-full aspect-square overflow-hidden">
            <img
              className="object-cover w-full"
              src={data?.cover?.images[0].urls[0]}
              alt=""
            />
          </div>
          <div className="flex flex-row justify-between p-2 bg-[#07050A] w-full">
            <div className="flex flex-col justify-around">
              <div className="flex flex-row items-center">
                <img
                  className="rounded-full w-12 h-12 object-cover border border-white"
                  src={data?.avatar?.images[0].urls[0]}
                  alt=""
                />
                <div className="flex flex-col ml-2">
                  <p className="font-medium text-base text-white">
                    {data?.name}
                  </p>
                  <p className="text-sm text-white">邀请码：{data?.user_id}</p>
                </div>
              </div>
              <div className="flex flex-col px-2 bg-[#FF61B030] rounded-full justify-center">
                <p className="text-sm text-[#FF669E] rounded-full text-center">
                  邀您加入
                  <span className="text-sm text-[#FF669E] font-semibold">
                    「铁粉空间」
                  </span>
                </p>
              </div>
            </div>
            <img
              className="h-24 aspect-square object-contain p-2 rounded-2xl"
              src={qrcodeUrl}
            />
          </div>
        </div>
        <button
          onClick={saveImage}
          className="flex flex-row w-full items-center justify-center bg-[#FF669E] rounded-lg py-2 mt-4"
        >
          <p className="text-white text-base ml-1">保存图片</p>
        </button>
        <button
          onClick={copyUrl}
          className="flex flex-row w-full items-center justify-center bg-[#FF669E] rounded-lg py-2 mt-4"
        >
          <p className="text-white text-base ml-1">复制链接</p>
        </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/${params.user_id}`,
      })
    );
  };

  return (
    <section className="flex flex-1 flex-col items-center container">
      <div className="flex flex-row w-full pt-6 justify-between bg-[#13121F]">
        <div className="flex flex-col justify-center ml-6">
          <Image src={icon_without_bg} alt="" />
          <div className="flex flex-row items-end mb-4">
            <p className="text-white text-xl text-center pb-2">
              邀请好友
              <br />
              额外收益
            </p>
            <p className="text-white text-8xl ml-2">
              5<span className="text-5xl">%</span>
            </p>
          </div>
          <p className="text-secondary text-base">
            邀请Ta在“申请入驻”时填写您的邀请码
          </p>
        </div>
        <Image className="w-40" src={invite_girl} alt="" />
      </div>
      <div className="flex flex-col w-full mt-4 items-center">
        <div className="flex flex-row justify-center items-center bg-[#13121F] px-4 pt-2 rounded-t-2xl">
          <div className="w-3 h-3 rounded-full bg-primary"></div>
          <p className="text-white text-base font-medium mx-2">我的邀请成绩</p>
          <div className="w-3 h-3 rounded-full bg-primary"></div>
        </div>
        <div className="flex flex-row w-80 justify-between bg-[#13121F] py-4 rounded-2xl">
          <div className="flex flex-col flex-1 items-center py-4">
            <p className="text-white text-3xl font-medium">5</p>
            <p className="text-white text-base mt-2">邀请人数</p>
          </div>
          <Divider vertical />
          <div className="flex flex-col flex-1 items-center py-4">
            <p className="text-white text-3xl font-medium">100000</p>
            <p className="text-white text-base mt-2">钻石收益</p>
          </div>
        </div>
      </div>
      <button
        onClick={() => document.getElementById("invitePoster").showModal()}
        className="btn bg-gradient-to-r from-[#FF668B] to-[#FF66F0] rounded-full text-white text-lg font-medium w-64 h-10 mt-4"
      >
        立即邀请
      </button>
      <div className="flex flex-col w-80 bg-[#13121F] p-4 rounded-2xl mt-4">
        <p className="text-error text-base font-medium">注意事项：</p>
        <p className="text-secondary text-sm">
          1.需要被邀请人在“申请入驻”时填写您的邀请码，并成功入驻才算邀请成功；
        </p>
        <p className="text-secondary text-sm">
          2.邀请收益为平台补助，不影响被邀请人原本钻石获取；
        </p>
        <p className="text-secondary text-sm">
          3.新增钻石收益需等待7x24小时方可提现；
        </p>
        <p className="text-secondary text-sm">
          4.如有其他疑问，请联系人工客服。
        </p>
      </div>
      <dialog id="invitePoster" className="modal bg-black/75">
        <div className="modal-box bg-black/10">
          <InvitePoster />
        </div>
        <form method="dialog" className="modal-backdrop">
          <button>close</button>
        </form>
      </dialog>
    </section>
  );
}