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/zone/[user_id]/page.jsx

@@ -60,14 +60,12 @@ export default function Zone({ params }) {
 
   return (
     <section className="flex flex-col flex-1 container">
-      <div className="absolute top-0 left-0 w-full">
-        <div className="relative">
-          <img
-            src={data?.streamer_ext?.cover?.images[0]?.urls[0]}
-            alt=""
-            className="w-full h-64 object-cover object-center opacity-30"
-          />
-        </div>
+      <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">
@@ -119,17 +117,20 @@ export default function Zone({ params }) {
           </div>
         </div>
       </div>
-      <div className="flex flex-col w-full bg-[#07050A] px-6 pt-4 z-10">
+      <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">
+        <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="basis-1/3 px-0.5">
+              <div
+                key={index}
+                className="flex flex-1 aspect-square overflow-hidden rounded"
+              >
                 <img
                   src={item?.urls[0]}
                   alt=""
-                  className="aspect-square w-full rounded"
+                  className="w-full object-cover"
                 />
               </div>
             );
@@ -175,9 +176,15 @@ export default function Zone({ params }) {
           </div>
         </div>
       </div>
-      <div className="flex flex-col w-full bg-[#07050A] px-6 pt-4 z-10">
+      <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">

app/zone/pay/[zid]/[product_id]/[moment_id]/page.jsx

@@ -14,7 +14,7 @@ export default function Pay({ params }) {
   //当前选购的商品数据
   const [data, setData] = useState({});
   //超粉商品数据
-  const [superfanshipData, setSuperfanshipData] = useState({});
+  const [superfanshipData, setSuperfanshipData] = useState();
   const [isFetching, setIsFetching] = useState(true);
   useEffect(() => {
     const getData = async () => {
@@ -72,12 +72,7 @@ export default function Pay({ params }) {
         );
         const temData = await response.json();
         console.log(temData);
-        if (temData.ret === -1) {
-          Toast.show({
-            content: temData.msg,
-          });
-          return;
-        }
+        if (temData.ret === -1) return;
         setSuperfanshipData(temData.data);
       } catch (error) {
         console.error(error);
@@ -159,14 +154,37 @@ export default function Pay({ params }) {
     );
   }
 
+  if (data?.has_bought === 1) {
+    return (
+      <section className="container flex flex-col flex-1 p-4 items-center">
+        <svg className="mt-32" viewBox="0 0 1024 1024" width="120" height="120">
+          <path
+            d="M512 512m-448 0a448 448 0 1 0 896 0 448 448 0 1 0-896 0Z"
+            fill="#07C160"
+          ></path>
+          <path
+            d="M466.7 679.8c-8.5 0-16.6-3.4-22.6-9.4l-181-181.1c-12.5-12.5-12.5-32.8 0-45.3s32.8-12.5 45.3 0l158.4 158.5 249-249c12.5-12.5 32.8-12.5 45.3 0s12.5 32.8 0 45.3L489.3 670.4c-6 6-14.1 9.4-22.6 9.4z"
+            fill="#FFFFFF"
+          ></path>
+        </svg>
+        <p className="text-center text-white text-base font-medium mx-4 mt-4">
+          您已购买成功，请返回空间刷新查看。
+        </p>
+      </section>
+    );
+  }
+
   return (
     <section className="flex justify-center container">
       {isLoading && (
         <span className="absolute top-1/2 loading loading-spinner loading-lg z-20"></span>
       )}
       <div className="flex flex-col p-4 mt-20">
-        <h1 className="text-[#FF669E] text-3xl font-medium text-center my-10">
-          ¥ {checked ? superfanshipData?.price / 100 : data?.price / 100}
+        <h1 className="text-[#FF669E] text-4xl font-medium text-center my-10">
+          ¥{" "}
+          {checked
+            ? (superfanshipData?.price / 100).toFixed(2)
+            : (data?.price / 100).toFixed(2)}
         </h1>
         <div className="flex flex-row justify-between">
           <p className="text-white text-base font-medium">付费商品：</p>
@@ -182,7 +200,7 @@ export default function Pay({ params }) {
           </p>
         </div>
         <Divider className="my-2" />
-        {params.product_id === "h5_zone_moment" && (
+        {params.product_id === "h5_zone_moment" && superfanshipData && (
           <div className="flex flex-row justify-between items-center bg-[#331F0B] py-2 px-4 rounded-2xl">
             <div className="flex flex-col items-center">
               <p className="text-[#FFD685] text-base font-medium">
@@ -233,13 +251,13 @@ export default function Pay({ params }) {
             <p className="text-secondary text-sm">
               1、开通超粉后可在有效期内免费查看当前空间内的所有动态内容；
               <br />
-              2、当前开通的超粉仅在当前空间内生效，请确认空间主人与超粉有效期；
+              2、当前开通的超粉仅在当前空间内生效，请确认空间名称与超粉有效期；
               <br />
               3、若空间主人提供了开通超粉赠送微信服务，请在开通后在空间内点击【查看微信】；
               <br />
               4、虚拟商品一经售出不予退款，请确认阅读上述条款并无异议后进行购买；
               <br />
-              5、本项特权内容最终解释权归铁粉空间运营方所有。
+              5、本项权益内容最终解释权归铁粉空间运营方所有。
             </p>
           </div>
         ) : params.product_id === "h5_zone_moment" ? (
@@ -248,24 +266,28 @@ export default function Pay({ params }) {
             <p className="text-secondary text-sm">
               1、当前购买内容为本空间内特定单条动态的查阅权限，如需要查阅空间内全部动态请开通超粉；
               <br />
-              2、本次消费将计入本空间内铁粉进度，铁粉进度达标后，可查看本空间内铁粉专享动态内容；
+              2、本次消费将计入当前空间内铁粉进度，铁粉进度达标后，可查看当前空间内铁粉专享动态内容；
               <br />
               3、虚拟商品一经售出不予退款，请确认阅读上述条款并无异议后进行购买；
               <br />
-              4、本项特权内容最终解释权归铁粉空间运营方所有。
+              4、本项权益内容最终解释权归铁粉空间运营方所有。
             </p>
           </div>
         ) : (
           <div className="flex flex-col mt-16">
             <p className="text-secondary text-base font-medium">购买须知：</p>
             <p className="text-secondary text-sm">
-              1、当前购买内容为本空间成员身份；
+              1、本空间由空间主人自行创建，加入空间前请确认相关风险，避免上当受骗；
               <br />
-              2、成为空间成员后可查看本空间内成员可见内容查阅权限；
+              2、当前开通的空间成员身份仅针对当前空间生效，请确认空间名称与与空间主人；
               <br />
-              3、虚拟商品一经售出不予退款，请确认阅读上述条款并无异议后进行购买；
+              3、当前购买内容为空间成员身份，开通后可获得当前空间内成员身份查阅权限；
               <br />
-              4、本项特权内容最终解释权归铁粉空间运营方所有。
+              4、虚拟商品一经售出不予退款，请确认阅读上述条款并无异议后进行购买；
+              <br />
+              5、本平台不提供违法及色情内容，如您发现空间内存在以上内容，请联系人工客服举报处理；
+              <br />
+              6、本项权益内容最终解释权归铁粉空间运营方所有。
             </p>
           </div>
         )}

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

@@ -0,0 +1,159 @@
+"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";
+import ID from "@/public/images/ID.png";
+
+export default function Share({ params }) {
+  //获取页面数据、生成二维码
+  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);
+        var QRCode = require("qrcode");
+        QRCode.toDataURL(
+          `https://tiefen.fun/zone/${params.user_id}`,
+          function (err, url) {
+            setQrcodeUrl(url);
+          }
+        );
+      } catch (error) {
+        console.error(error);
+      }
+    };
+    getData();
+  }, []);
+
+  //分享海报组件
+  const Poster = () => {
+    return (
+      <div className="flex flex-col">
+        <div id="print" className="flex flex-col overflow-hidden rounded-lg">
+          <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 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 shrink-0 rounded-full overflow-hidden aspect-square w-12 border border-white">
+                  <img
+                    className="w-full object-cover"
+                    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">
+                      <Image src={ID} alt="" className="w-4" />
+                      <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 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/${params.user_id}`,
+      })
+    );
+  };
+
+  return (
+    <section className="flex flex-1 flex-col items-center justify-center container">
+      <div className="w-4/5">
+        <Poster />
+      </div>
+    </section>
+  );
+}