完善会员充值页面

app/vip/page.jsx

@@ -3,7 +3,6 @@
 import React, { useState, useEffect } from "react";
 import { generateSignature } from "@/utils/crypto";
 import webviewBaseRequest from "@/utils/webviewBaseRequest";
-import { getCookies } from "cookies-next";
 import Image from "next/image";
 import vipbackground from "@/public/images/vipbackground.png";
 import isvip from "@/public/images/isvip.png";
@@ -24,6 +23,7 @@ export default function Vip() {
   //检查用户是否是vip
   const [isVip, setIsVip] = useState(false);
   const [name, setName] = useState("");
+  const [isFetching, setIsFetching] = useState(true);
   useEffect(() => {
     const getUserData = async () => {
       try {
@@ -54,11 +54,14 @@ export default function Vip() {
         }
         setName(detailData.data.account.name);
         if (detailData.data.account.is_a_member === 1) setIsVip(true);
+        setIsFetching(false);
       } catch (error) {
         console.error(error);
       }
     };
-    getUserData();
+    setTimeout(() => {
+      getUserData();
+    }, 500);
   }, []);
 
   //创建充值订单
@@ -120,6 +123,14 @@ export default function Vip() {
     }
   };
 
+  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 justify-center container">
       {isLoading && (
@@ -132,7 +143,7 @@ export default function Vip() {
       />
       <div className="flex flex-col z-10">
         <Image className="pt-24" src={viptitle} alt="" />
-        <div className="flex flex-col px-4 pb-24">
+        <div className="flex flex-col px-4 pb-32">
           {isVip ? (
             <div className="relative">
               <Image src={isvip} alt="" />
@@ -153,12 +164,12 @@ export default function Vip() {
             }}
           >
             <p className="text-[#F5C4CC] text-2xl font-bold">会员权益</p>
-            <div className="flex flex-row flex-wrap">
+            <div className="flex flex-row flex-wrap gap-y-3.5 mt-4">
               <div className="flex flex-row items-center basis-1/2">
                 <Image className="w-11" src={vipright1} alt="" />
                 <div className="flex flex-col ml-1.5">
                   <p className="text-[#F5C4CC] text-sm">解锁动态</p>
-                  <p className="text-[#613F46] text-xs">专属标识</p>
+                  <p className="text-[#613F46] text-xs">永久查看</p>
                 </div>
               </div>
               <div className="flex flex-row items-center basis-1/2">
@@ -172,14 +183,14 @@ export default function Vip() {
                 <Image className="w-11" src={vipright3} alt="" />
                 <div className="flex flex-col ml-1.5">
                   <p className="text-[#F5C4CC] text-sm">专属客服</p>
-                  <p className="text-[#613F46] text-xs">专属标识</p>
+                  <p className="text-[#613F46] text-xs">极速服务</p>
                 </div>
               </div>
               <div className="flex flex-row items-center basis-1/2">
                 <Image className="w-11" src={vipright4} alt="" />
                 <div className="flex flex-col ml-1.5">
                   <p className="text-[#F5C4CC] text-sm">期待更多</p>
-                  <p className="text-[#613F46] text-xs">专属标识</p>
+                  <p className="text-[#613F46] text-xs">惊喜福利</p>
                 </div>
               </div>
             </div>
@@ -193,19 +204,22 @@ export default function Vip() {
           >
             <p className="text-base font-medium text-[#F5C4CC]">会员规则</p>
             <p className="text-xs font-medium text-[#F5C4CC] mt-2">
-              1、阿巴阿巴阿巴阿巴阿巴阿巴阿巴阿巴
+              1、会员权限永久有效，开通后请勿传播平台付费内容；
             </p>
             <p className="text-xs font-medium text-[#F5C4CC]">
-              2、阿巴阿巴阿巴阿巴阿巴阿巴阿巴阿巴
+              2、更多特权内容敬请期待，详情请关注本页面会员权益信息变化。
             </p>
             <p className="text-base font-medium text-[#F5C4CC] mt-6">
               注意事项
             </p>
             <p className="text-xs font-medium text-[#F5C4CC] mt-2">
-              1、阿巴阿巴阿巴阿巴阿巴阿巴阿巴阿巴
+              1、会员特权属于虚拟商品，一经售出概不退换；
             </p>
             <p className="text-xs font-medium text-[#F5C4CC]">
-              2、阿巴阿巴阿巴阿巴阿巴阿巴阿巴阿巴
+              2、请确保支付时您的网络环境保持畅通，避免因第三方网络环境导致的支付失败；
+            </p>
+            <p className="text-xs font-medium text-[#F5C4CC]">
+              3、本项特权内容最终解释权归铁粉空间运营方所有。
             </p>
           </div>
         </div>