From 364a52b5536011caa6fa528a805ed29c626985e3 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E8=B6=85=E7=BA=A7=E8=80=81=E7=99=BD=E5=85=94?= Date: Mon, 27 Oct 2025 17:07:10 +0800 Subject: [PATCH] Remove Dexie database implementation and related initialization logic. Update Recharge component to fetch and display subscription packages dynamically, enhancing user experience with improved payment handling and UI updates. --- Cunkebao/package.json | 1 - Cunkebao/src/main.tsx | 38 +-- .../pages/mobile/mine/recharge/index/api.ts | 35 ++ .../mine/recharge/index/index.module.scss | 8 + .../mobile/mine/recharge/index/index.tsx | 175 +++++++--- Cunkebao/src/utils/db.ts | 319 ------------------ 6 files changed, 177 insertions(+), 399 deletions(-) create mode 100644 Cunkebao/src/pages/mobile/mine/recharge/index/api.ts delete mode 100644 Cunkebao/src/utils/db.ts diff --git a/Cunkebao/package.json b/Cunkebao/package.json index 0277589c..1e1baa4b 100644 --- a/Cunkebao/package.json +++ b/Cunkebao/package.json @@ -10,7 +10,6 @@ "antd-mobile-icons": "^0.3.0", "axios": "^1.6.7", "dayjs": "^1.11.13", - "dexie": "^4.2.0", "echarts": "^5.6.0", "echarts-for-react": "^3.0.2", "react": "^18.2.0", diff --git a/Cunkebao/src/main.tsx b/Cunkebao/src/main.tsx index e442b9c1..ef303df7 100644 --- a/Cunkebao/src/main.tsx +++ b/Cunkebao/src/main.tsx @@ -7,38 +7,14 @@ import dayjs from "dayjs"; import "dayjs/locale/zh-cn"; import App from "./App"; import "./styles/global.scss"; -import { db } from "@/utils/db"; // 引入数据库实例 // 设置dayjs为中文 dayjs.locale("zh-cn"); -// 数据库初始化 -async function initializeApp() { - try { - // 确保数据库已打开 - await db.open(); - console.log("数据库初始化成功"); - - // 调试模式：清理所有数据 - console.log("调试模式：开始清理数据库数据..."); - await db.kfUsers.clear(); - await db.weChatGroup.clear(); - await db.contracts.clear(); - await db.newContractList.clear(); - console.log("数据库数据清理完成"); - } catch (error) { - console.error("数据库初始化失败:", error); - // 可以选择显示错误提示或使用降级方案 - } - - // 渲染应用 - const root = createRoot(document.getElementById("root")!); - root.render( - - - , - ); -} - -// 启动应用 -initializeApp(); +// 渲染应用 +const root = createRoot(document.getElementById("root")!); +root.render( + + + , +); diff --git a/Cunkebao/src/pages/mobile/mine/recharge/index/api.ts b/Cunkebao/src/pages/mobile/mine/recharge/index/api.ts new file mode 100644 index 00000000..c2034d7e --- /dev/null +++ b/Cunkebao/src/pages/mobile/mine/recharge/index/api.ts @@ -0,0 +1,35 @@ +import request from "@/api/request"; + +interface taocanItem { + id: 1; + name: "试用套餐"; + tokens: "2,800"; + price: 9800; + originalPrice: 140; + description: ["适合新用户体验", "包含基础AI功能", "永久有效", "客服支持"]; + sort: 1; + isTrial: 1; + isRecommend: 0; + isHot: 0; + isVip: 0; + status: 1; + isDel: 0; + delTime: null; + createTime: "2025-09-29 16:53:06"; + updateTime: "2025-09-29 16:53:06"; + discount: 30; + unitPrice: 3.5; +} + +interface taocanList { + list: taocanItem[]; +} +// 套餐列表 +export function getTaocanList(): Promise { + return request("/v1/tokens/list", {}, "GET"); +} + +// 支付id和price 从套餐列表取对应的价格 +export function pay(params: { id: string; price: number }) { + return request("/v1/tokens/pay", params, "POST"); +} diff --git a/Cunkebao/src/pages/mobile/mine/recharge/index/index.module.scss b/Cunkebao/src/pages/mobile/mine/recharge/index/index.module.scss index c7e3615a..46a297c1 100644 --- a/Cunkebao/src/pages/mobile/mine/recharge/index/index.module.scss +++ b/Cunkebao/src/pages/mobile/mine/recharge/index/index.module.scss @@ -123,10 +123,18 @@ margin: 4px 0; font-size: 16px; border-radius: 8px; + padding: 12px 16px; + + div { + display: flex; + flex-direction: column; + align-items: center; + } } .quick-btn-active { @extend .quick-btn; font-weight: 600; + border: 2px solid var(--primary-color); } .recharge-main-btn { margin-top: 16px; diff --git a/Cunkebao/src/pages/mobile/mine/recharge/index/index.tsx b/Cunkebao/src/pages/mobile/mine/recharge/index/index.tsx index 9507b73c..c0a493b1 100644 --- a/Cunkebao/src/pages/mobile/mine/recharge/index/index.tsx +++ b/Cunkebao/src/pages/mobile/mine/recharge/index/index.tsx @@ -1,7 +1,6 @@ -import React, { useState } from "react"; +import React, { useState, useEffect } from "react"; import { useNavigate } from "react-router-dom"; -import { Card, Button, Toast, Tabs } from "antd-mobile"; -import { useUserStore } from "@/store/module/user"; +import { Card, Button, Toast, Tabs, Dialog } from "antd-mobile"; import style from "./index.module.scss"; import { WalletOutlined, @@ -12,36 +11,7 @@ import { } from "@ant-design/icons"; import NavCommon from "@/components/NavCommon"; import Layout from "@/components/Layout/Layout"; - -const quickAmounts = [50, 100, 200, 500, 1000]; - -// AI服务套餐数据 -const aiServicePackages = [ - { - id: 1, - name: "入门套餐", - tag: "推荐", - tagColor: "blue", - description: "适合个人用户体验AI服务", - usage: "可使用AI服务约110次", - price: 100, - originalPrice: 110, - gift: 10, - actualAmount: 110, - }, - { - id: 2, - name: "标准套餐", - tag: "热门", - tagColor: "green", - description: "适合小团队日常使用", - usage: "可使用AI服务约580次", - price: 500, - originalPrice: 580, - gift: 80, - actualAmount: 580, - }, -]; +import { getTaocanList, pay } from "./api"; // AI服务列表数据 const aiServices = [ @@ -120,25 +90,77 @@ const versionPackages = [ const Recharge: React.FC = () => { const navigate = useNavigate(); - const { user } = useUserStore(); // 假设余额从后端接口获取，实际可用props或store传递 - const [balance, setBalance] = useState(0); - const [selected, setSelected] = useState(null); + const [balance] = useState(0); + const [selected, setSelected] = useState(null); const [loading, setLoading] = useState(false); const [activeTab, setActiveTab] = useState("account"); + const [taocanList, setTaocanList] = useState([]); + + // 加载套餐列表 + useEffect(() => { + const loadTaocanList = async () => { + try { + const res = await getTaocanList(); + if (res.list) { + setTaocanList(res.list); + } + } catch (error) { + console.error("加载套餐列表失败:", error); + Toast.show({ content: "加载套餐列表失败", position: "top" }); + } + }; + loadTaocanList(); + }, []); // 充值操作 const handleRecharge = async () => { if (!selected) { - Toast.show({ content: "请选择充值金额", position: "top" }); + Toast.show({ content: "请选择充值套餐", position: "top" }); return; } setLoading(true); - setTimeout(() => { - setBalance(b => b + selected); - Toast.show({ content: `充值成功，已到账￥${selected}` }); + try { + const res = await pay({ + id: selected.id, + price: selected.price, + }); + // 假设返回的是二维码链接，存储在res中 + if (res) { + // 显示二维码弹窗 + Dialog.show({ + content: ( +
+
+ 请使用微信扫码支付 +
+ 支付二维码 +
+ 支付金额: ¥{selected.price / 100} +
+
+ ), + closeOnMaskClick: true, + }); + } + } catch (error) { + console.error("支付失败:", error); + Toast.show({ content: "支付失败，请重试", position: "top" }); + } finally { setLoading(false); - }, 1200); + } }; // 渲染账户充值tab内容 @@ -156,23 +178,80 @@ const Recharge: React.FC = () => { -
快捷充值
+
选择套餐
- {quickAmounts.map(amt => ( + {taocanList.map(item => ( ))}
+ {selected && ( +
+
+ {selected.name} + {selected.isRecommend === 1 && ( + + 推荐 + + )} + {selected.isHot === 1 && ( + + 热门 + + )} +
+
+ 包含 {selected.tokens} Tokens +
+ {selected.originalPrice && ( +
+ 原价: ¥{selected.originalPrice / 100} +
+ )} +
+ )}