feat: 更新环境配置，修改 API 地址和版本，添加充值页面，集成支付方式选择和表单验证

src/views/product/index.vue

@@ -1,4 +1,7 @@
 <script lang='ts' setup>
+import type { Treaty } from "@elysiajs/eden";
+import type { InfiniteScrollCustomEvent } from "@ionic/vue";
+import type { TreatyQuery } from "@/api/types";
 import {
   calendarOutline,
   cardOutline,
@@ -7,54 +10,35 @@ import {
   trendingUpOutline,
   walletOutline,
 } from "ionicons/icons";
+import { client, safeClient } from "@/api";
 
-// 基金产品数据
-const fundProducts = ref([
-  {
-    id: 1,
-    name: "稳健增长基金",
-    endTime: "2026-01-25 23:59",
-    image: "https://picsum.photos/seed/fund1/200/200",
-    currentPrice: 1.258,
-    expectedReturn: "15.8%",
-    period: "90天",
-    tag: "稳健",
-    tagColor: "#1890ff",
-  },
-  {
-    id: 2,
-    name: "积极进取基金",
-    endTime: "2026-01-28 23:59",
-    image: "https://picsum.photos/seed/fund2/200/200",
-    currentPrice: 1.482,
-    expectedReturn: "22.5%",
-    period: "180天",
-    tag: "积极",
-    tagColor: "#c41e3a",
-  },
-  {
-    id: 3,
-    name: "均衡配置基金",
-    endTime: "2026-02-01 23:59",
-    image: "https://picsum.photos/seed/fund3/200/200",
-    currentPrice: 1.356,
-    expectedReturn: "18.6%",
-    period: "120天",
-    tag: "均衡",
-    tagColor: "#52c41a",
-  },
-  {
-    id: 4,
-    name: "价值投资基金",
-    endTime: "2026-02-05 23:59",
-    image: "https://picsum.photos/seed/fund4/200/200",
-    currentPrice: 1.189,
-    expectedReturn: "16.2%",
-    period: "90天",
-    tag: "价值",
-    tagColor: "#faad14",
-  },
-]);
+type Product = Treaty.Data<typeof client.api.subscription.products.get>["data"][number];
+type ProductQuery = TreatyQuery<typeof client.api.subscription.products.get>;
+
+const [query] = useResetRef<ProductQuery>({
+  offset: 0,
+  limit: 10,
+});
+const data = ref<Product[]>([]);
+const isFinished = ref(false);
+
+async function fetchData() {
+  const { data: responseData } = await safeClient(client.api.subscription.products.get({ query: { ...query.value } }));
+  data.value.push(...(responseData.value?.data || []));
+  isFinished.value = responseData.value?.pagination.hasNextPage === false;
+}
+async function handleInfinite(event: InfiniteScrollCustomEvent) {
+  if (isFinished.value) {
+    event.target.complete();
+    event.target.disabled = true;
+    return;
+  }
+  query.value.offset! += query.value.limit!;
+  await fetchData();
+  setTimeout(() => {
+    event.target.complete();
+  }, 500);
+}
 
 function handleProductClick(product: any) {
   console.log("查看产品:", product.name);
@@ -86,22 +70,22 @@ function handleSubscribe(product: any, event: Event) {
           </div>
         </div>
 
-        <div class="flex flex-col gap-4">
+        <empty v-if="data.length === 0" message="暂无基金产品信息" />
+        <div v-else class="flex flex-col gap-4">
           <div
-            v-for="product in fundProducts"
+            v-for="product in data"
             :key="product.id"
             class="bg-white rounded-2xl overflow-hidden shadow-sm cursor-pointer transition-all active:translate-y-0.5 active:shadow-sm flex"
             @click="handleProductClick(product)"
           >
             <!-- 左侧缩略图 -->
-            <div class="relative w-28 h-36 flex-shrink-0 overflow-hidden bg-gradient-to-br from-[#f5f5f5] to-[#e8e8e8]">
+            <div class="relative w-28 h-36 shrink-0 overflow-hidden bg-linear-to-br from-[#f5f5f5] to-[#e8e8e8]">
               <img :src="product.image" :alt="product.name" class="w-full h-full object-cover">
-              <div
+              <!-- <div
                 class="fund-tag absolute top-2 left-2 text-white px-2 py-0.5 rounded-lg text-xs font-semibold shadow-lg"
-                :style="{ background: product.tagColor }"
               >
                 {{ product.tag }}
-              </div>
+              </div> -->
             </div>
 
             <!-- 右侧信息 -->
@@ -112,27 +96,27 @@ function handleSubscribe(product: any, event: Event) {
                 </h4>
                 <div class="flex items-center gap-1 text-xs text-[#999] mb-2">
                   <ion-icon :icon="timeOutline" class="text-sm" />
-                  <span>申购截止：{{ product.endTime }}</span>
+                  <span>申购截止：{{ product.subscribeEndAt }}</span>
                 </div>
 
                 <!-- 产品信息 -->
                 <div class="grid grid-cols-3 gap-2 mb-2">
                   <div class="flex flex-col">
                     <span class="text-xs text-[#999]">当前价格</span>
-                    <span class="text-lg font-bold text-[#c41e3a]">¥{{ product.currentPrice }}</span>
+                    <span class="text-lg font-bold text-[#c41e3a]">¥{{ product.price }}</span>
                   </div>
                   <div class="flex flex-col">
                     <span class="text-xs text-[#999]">到期收益</span>
                     <span class="text-lg font-bold text-[#52c41a] flex items-center gap-0.5">
                       <ion-icon :icon="trendingUpOutline" class="text-xs" />
-                      {{ product.expectedReturn }}
+                      {{ product.maturityYield }}
                     </span>
                   </div>
                   <div class="flex flex-col">
                     <span class="text-xs text-[#999]">产品周期</span>
                     <span class="text-lg font-bold text-[#1a1a1a] flex items-center gap-0.5">
                       <ion-icon :icon="calendarOutline" class="text-xs" />
-                      {{ product.period }}
+                      {{ product.cycleDays }}
                     </span>
                   </div>
                 </div>