tiefen_space_web/app/vip/page.jsx

"use client";

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() {
  //检查用户是否是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-6 rounded-full"
              >
                <Image src={alipay} width={22} alt="" />
                <p className="text-white text-base font-medium whitespace-nowrap">
                  支付宝支付
                </p>
              </div>
              <div
                onClick={handleContact}
                className="flex flex-row cursor-pointer gap-1.5 h-11 items-center bg-[#2E2E2E] px-6 rounded-full"
              >
                <Image src={contact} width={22} alt="" />
                <p className="text-white text-base font-medium whitespace-nowrap">
                  联系人工充值
                </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>
  );
}