feat: dynamic price example

price.json

@@ -0,0 +1,38 @@
+[
+    {
+        "desc": "初级3k",
+        "url": "https://preview.soyootech.com/temp/A.html"
+    },
+    {
+        "desc": "初级5k",
+        "url": "https://preview.soyootech.com/temp/A.html"
+    },
+    {
+        "desc": "初级1w",
+        "url": "https://preview.soyootech.com/temp/A.html"
+    },
+    {
+        "desc": "中级3k",
+        "url": "https://preview.soyootech.com/temp/A.html"
+    },
+    {
+        "desc": "中级1w",
+        "url": "https://preview.soyootech.com/temp/A.html"
+    },
+    {
+        "desc": "中级1.5w",
+        "url": "https://preview.soyootech.com/temp/A.html"
+    },
+    {
+        "desc": "高级3k",
+        "url": "https://preview.soyootech.com/temp/A.html"
+    },
+    {
+        "desc": "高级2w",
+        "url": "https://static.soyootech.com/case/bubble/bubble.html"
+    },
+    {
+        "desc": "高级2w",
+        "url": "https://preview.soyootech.com/temp/A.html"
+    }
+]

src/app/price/page.tsx

@@ -1,19 +1,21 @@
 "use client";
-import { useState } from "react";
+import { useState, useEffect } from "react";
 import "./price.css";
 
 const Page = () => {
-  // https://www-soyootech.oss-cn-hangzhou.aliyuncs.com/public/
   const [tip, setTip] = useState("");
-  const [price] = useState({
+
-    mp4: `https://static.soyootech.com/public/price/%E8%A7%86%E9%A2%91%E7%B1%BB%E5%9E%8B.html`,
+  const [prices, setPrices] = useState<{ desc: ""; url: "" }[]>([]);
-    _2d_5k: `https://static.soyootech.com/public/price/2d-5k.html`,
+
-    _2d_1w: `https://static.soyootech.com/public/price/2d-1w.html`,
+  useEffect(() => {
-    _2d_2w: `https://static.soyootech.com/public/price/2d-2w.html`,
+    const fetchData = async () => {
-    _3d_1w: `https://static.soyootech.com/public/price/3d-1w.html`,
+      const res = await fetch(`https://www-soyootech.oss-cn-hangzhou.aliyuncs.com/price.json`);
-    _3d_1_5w: `https://static.soyootech.com/public/price/3d-1.5w.html`,
+      const dataSource = await res.json();
-    _3d_2w: `https://static.soyootech.com/public/price/3d-2w.html`,
+      setPrices(dataSource);
-  });
+    };
+
+    fetchData();
+  }, []);
 
   const [previewInfo, setPreviewInfo] = useState({
     url: "",
@@ -32,8 +34,8 @@ const Page = () => {
           }}
         />
 
+        <div className=" absolute left-[50%] top-[50%] translate-x-[-50%] translate-y-[-50%]">
           <h2 className="text-gradient">参考价格</h2>
-
           <div className="formmenu">
             <div className="formmenus">
               <ul>
@@ -59,7 +61,7 @@ const Page = () => {
                         onClick={() => {
                           setTip("用户需要提供视频原素材");
                           setPreviewInfo({
-                          url: price["mp4"],
+                            url: prices[0].url,
                             preview: true,
                           });
                         }}
@@ -74,7 +76,7 @@ const Page = () => {
                         onClick={() => {
                           setTip("用户需要提供所有美术资源");
                           setPreviewInfo({
-                          url: price["_2d_5k"],
+                            url: prices[1].url,
                             preview: true,
                           });
                         }}
@@ -89,7 +91,7 @@ const Page = () => {
                         onClick={() => {
                           setTip("用户需要提供所有美术资源");
                           setPreviewInfo({
-                          url: price["_3d_1w"],
+                            url: prices[2].url,
                             preview: true,
                           });
                         }}
@@ -107,7 +109,7 @@ const Page = () => {
                         onClick={() => {
                           setTip("用户需要提供视频原素材");
                           setPreviewInfo({
-                          url: price["mp4"],
+                            url: prices[3].url,
                             preview: true,
                           });
                         }}
@@ -123,7 +125,7 @@ const Page = () => {
                         onClick={() => {
                           setTip("用户只需要提供游戏特征资源即可(如人物,logo等)");
                           setPreviewInfo({
-                          url: price["_2d_1w"],
+                            url: prices[4].url,
                             preview: true,
                           });
                         }}
@@ -139,7 +141,7 @@ const Page = () => {
                         onClick={() => {
                           setTip("用户只需要提供游戏特征资源即可(如人物,logo等)");
                           setPreviewInfo({
-                          url: price["_3d_1_5w"],
+                            url: prices[5].url,
                             preview: true,
                           });
                         }}
@@ -157,7 +159,7 @@ const Page = () => {
                         onClick={() => {
                           setTip("用户需要提供视频原素材");
                           setPreviewInfo({
-                          url: price["mp4"],
+                            url: prices[6].url,
                             preview: true,
                           });
                         }}
@@ -172,7 +174,7 @@ const Page = () => {
                         onClick={() => {
                           setTip("适用于定制化程度高的playable项目,用户只需要提供游戏特征资源即可(如logo,人物等)");
                           setPreviewInfo({
-                          url: price["_2d_2w"],
+                            url: prices[7].url,
                             preview: true,
                           });
                         }}
@@ -187,7 +189,7 @@ const Page = () => {
                         onClick={() => {
                           setTip("适用于定制化程度高的playable项目,用户只需要提供游戏特征资源即可(如logo,人物等)");
                           setPreviewInfo({
-                          url: price["_3d_2w"],
+                            url: prices[8].url,
                             preview: true,
                           });
                         }}
@@ -200,6 +202,7 @@ const Page = () => {
             <p className="annotation">标价为人民币</p>
           </div>
         </div>
+      </div>
       {previewInfo.preview && (
         <div
           className="fixed left-0 right-0 top-0 bottom-0 bg-black/60 z-[2000]"