初步完成vip页面功能

app/vip/page.jsx

@@ -1,9 +1,216 @@
 "use client";
 
-import React from "react";
+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";
+import notvip from "@/public/images/notvip.png";
+import alipay from "@/public/images/alipay.png";
+import contact from "@/public/images/contact.png";
+import vipright1 from "@/public/images/vipright1.png";
+import vipright2 from "@/public/images/vipright2.png";
+import vipright3 from "@/public/images/vipright3.png";
+import vipright4 from "@/public/images/vipright4.png";
+import viptitle from "@/public/images/viptitle.png";
+import Link from "next/link";
+import { Toast } from "antd-mobile";
 
 export default function Vip() {
-  return <section className="flex flex-col container">Vip</section>;
+  //检查用户是否是vip
+  const [isVip, setIsVip] = useState(false);
+  const [name, setName] = useState("");
+  useEffect(() => {
+    const cookies = getCookies();
+    const is_a_member = cookies.is_a_member;
+    const _name = cookies.name;
+    setName(_name);
+    const int_is_a_member = parseInt(is_a_member, 10);
+    if (int_is_a_member === 1) setIsVip(true);
+  }, []);
+
+  //创建充值订单
+  const [isLoading, setIsLoading] = useState(false);
+  const createOrder = async () => {
+    setIsLoading(true);
+    const base = webviewBaseRequest();
+    const body = {
+      ...base,
+      product_id: "membership",
+      pay_type: "alipay_h5",
+      from: "app",
+    };
+    const signature = generateSignature(body);
+    try {
+      const response = await fetch(
+        `/api/vas/create_order?signature=${signature}`,
+        {
+          method: "POST",
+          headers: {
+            "Content-Type": "application/json",
+          },
+          body: JSON.stringify(body),
+        }
+      );
+      const data = await response.json();
+      console.log(data);
+      if (data.ret === -1) {
+        Toast.show({
+          content: data.msg,
+        });
+        return;
+      }
+      router.push(`${data.data.alipay_h5_param_str}`);
+    } catch (error) {
+      console.error(error);
+    } finally {
+      setIsLoading(false);
+    }
+  };
+
+  //跳转联系客服
+  const handleContact = () => {
+    if (navigator.userAgent.includes("FromWebview")) {
+      window.ReactNativeWebView.postMessage(
+        JSON.stringify({
+          type: "NAVIGATE",
+          data: {
+            page: "MessageDetail",
+            params: {
+              mid: 1,
+            },
+          },
+        })
+      );
+    } else {
+      Toast.show({
+        content: "请下载app联系客服充值",
+      });
+    }
+  };
+
+  return (
+    <section className="flex flex-1 justify-center container">
+      {isLoading && (
+        <span className="absolute top-1/2 loading loading-spinner loading-lg z-20"></span>
+      )}
+      <Image
+        className="absolute top-0 left-0 z-0 w-full"
+        src={vipbackground}
+        alt=""
+      />
+      <div className="flex flex-col z-10">
+        <Image className="pt-24" src={viptitle} alt="" />
+        <div className="flex flex-col px-4 pb-24">
+          {isVip ? (
+            <div className="relative">
+              <Image src={isvip} alt="" />
+              <p className="absolute bottom-5 left-5 text-[#521824B2] text-sm font-medium">
+                {name}
+              </p>
+            </div>
+          ) : (
+            <Image src={notvip} alt="" />
+          )}
+          <div
+            className="flex flex-col p-4 rounded-2xl mt-4"
+            style={{
+              background:
+                "linear-gradient(94.52deg, #241018 3.66%, #0F080B 100%), linear-gradient(90deg, rgba(66, 50, 56, 0.5) 0%, rgba(61, 42, 48, 0.5) 100%)",
+              border: "2px solid",
+              borderColor: "#42323880",
+            }}
+          >
+            <p className="text-[#F5C4CC] text-2xl font-bold">会员权益</p>
+            <div className="flex flex-row flex-wrap">
+              <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>
+                </div>
+              </div>
+              <div className="flex flex-row items-center basis-1/2">
+                <Image className="w-11" src={vipright2} alt="" />
+                <div className="flex flex-col ml-1.5">
+                  <p className="text-[#F5C4CC] text-sm">身份标签</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={vipright3} alt="" />
+                <div className="flex flex-col ml-1.5">
+                  <p className="text-[#F5C4CC] text-sm">专属客服</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>
+                </div>
+              </div>
+            </div>
+          </div>
+          <div
+            className="flex flex-col p-4 rounded-2xl mt-4"
+            style={{
+              border: "2px solid",
+              borderColor: "#42323880",
+            }}
+          >
+            <p className="text-base font-medium text-[#F5C4CC]">会员规则</p>
+            <p className="text-xs font-medium text-[#F5C4CC] mt-2">
+              1、阿巴阿巴阿巴阿巴阿巴阿巴阿巴阿巴
+            </p>
+            <p className="text-xs font-medium text-[#F5C4CC]">
+              2、阿巴阿巴阿巴阿巴阿巴阿巴阿巴阿巴
+            </p>
+            <p className="text-base font-medium text-[#F5C4CC] mt-6">
+              注意事项
+            </p>
+            <p className="text-xs font-medium text-[#F5C4CC] mt-2">
+              1、阿巴阿巴阿巴阿巴阿巴阿巴阿巴阿巴
+            </p>
+            <p className="text-xs font-medium text-[#F5C4CC]">
+              2、阿巴阿巴阿巴阿巴阿巴阿巴阿巴阿巴
+            </p>
+          </div>
+        </div>
+        <div className="flex flex-col w-full fixed left-0 bottom-0 z-20">
+          <div className="h-12 bg-gradient-to-t from-[#07050AE5] to-[#07050A00]"></div>
+          <div className="flex flex-col pt-3 pb-11 px-4 bg-[#07050AE5]">
+            <div className="flex flex-row justify-between">
+              <div
+                onClick={createOrder}
+                className="flex flex-row cursor-pointer gap-1.5 h-11 items-center bg-primary px-7 rounded-full"
+              >
+                <Image src={alipay} width={22} alt="" />
+                <p className="text-white text-base font-medium">支付宝支付</p>
+              </div>
+              <div
+                onClick={handleContact}
+                className="flex flex-row cursor-pointer gap-1.5 h-11 items-center bg-[#2E2E2E] px-7 rounded-full"
+              >
+                <Image src={contact} width={22} alt="" />
+                <p className="text-white text-base font-medium">联系人工充值</p>
+              </div>
+            </div>
+            <p className="text-secondary text-xs font-medium mt-4 text-center mb-1">
+              确认购买即视为同意
+              <Link
+                className="link text-[#309EDC]"
+                href="/doc/rechargeagreement"
+              >
+                《用户充值协议》
+              </Link>
+            </p>
+          </div>
+        </div>
+      </div>
+    </section>
+  );
 }