feat: 更新 @capp/eden 依赖至 0.0.38，优化充值记录和充值功能的实现
This commit is contained in:
14
pnpm-lock.yaml
generated
14
pnpm-lock.yaml
generated
@@ -52,8 +52,8 @@ catalogs:
|
||||
specifier: 8.0.0
|
||||
version: 8.0.0
|
||||
'@capp/eden':
|
||||
specifier: http://192.168.1.2:9538/api/capp-eden-0.0.37.tgz
|
||||
version: 0.0.37
|
||||
specifier: http://192.168.1.2:9538/api/capp-eden-0.0.38.tgz
|
||||
version: 0.0.38
|
||||
'@cloudflare/workers-types':
|
||||
specifier: ^4.20260113.0
|
||||
version: 4.20260116.0
|
||||
@@ -307,7 +307,7 @@ importers:
|
||||
version: 8.0.0(@capacitor/core@8.0.0)
|
||||
'@capp/eden':
|
||||
specifier: 'catalog:'
|
||||
version: http://192.168.1.2:9538/api/capp-eden-0.0.37.tgz(@elysiajs/eden@1.4.6(elysia@1.4.22(@sinclair/typebox@0.34.47)(exact-mirror@0.2.6(@sinclair/typebox@0.34.47))(file-type@21.3.0)(openapi-types@12.1.3)(typescript@5.9.3)))
|
||||
version: http://192.168.1.2:9538/api/capp-eden-0.0.38.tgz(@elysiajs/eden@1.4.6(elysia@1.4.22(@sinclair/typebox@0.34.47)(exact-mirror@0.2.6(@sinclair/typebox@0.34.47))(file-type@21.3.0)(openapi-types@12.1.3)(typescript@5.9.3)))
|
||||
'@elysiajs/eden':
|
||||
specifier: 'catalog:'
|
||||
version: 1.4.6(elysia@1.4.22(@sinclair/typebox@0.34.47)(exact-mirror@0.2.6(@sinclair/typebox@0.34.47))(file-type@21.3.0)(openapi-types@12.1.3)(typescript@5.9.3))
|
||||
@@ -1200,9 +1200,9 @@ packages:
|
||||
'@capacitor/synapse@1.0.4':
|
||||
resolution: {integrity: sha512-/C1FUo8/OkKuAT4nCIu/34ny9siNHr9qtFezu4kxm6GY1wNFxrCFWjfYx5C1tUhVGz3fxBABegupkpjXvjCHrw==}
|
||||
|
||||
'@capp/eden@http://192.168.1.2:9538/api/capp-eden-0.0.37.tgz':
|
||||
resolution: {tarball: http://192.168.1.2:9538/api/capp-eden-0.0.37.tgz}
|
||||
version: 0.0.37
|
||||
'@capp/eden@http://192.168.1.2:9538/api/capp-eden-0.0.38.tgz':
|
||||
resolution: {tarball: http://192.168.1.2:9538/api/capp-eden-0.0.38.tgz}
|
||||
version: 0.0.38
|
||||
peerDependencies:
|
||||
'@elysiajs/eden': ^1.4.6
|
||||
|
||||
@@ -6946,7 +6946,7 @@ snapshots:
|
||||
|
||||
'@capacitor/synapse@1.0.4': {}
|
||||
|
||||
'@capp/eden@http://192.168.1.2:9538/api/capp-eden-0.0.37.tgz(@elysiajs/eden@1.4.6(elysia@1.4.22(@sinclair/typebox@0.34.47)(exact-mirror@0.2.6(@sinclair/typebox@0.34.47))(file-type@21.3.0)(openapi-types@12.1.3)(typescript@5.9.3)))':
|
||||
'@capp/eden@http://192.168.1.2:9538/api/capp-eden-0.0.38.tgz(@elysiajs/eden@1.4.6(elysia@1.4.22(@sinclair/typebox@0.34.47)(exact-mirror@0.2.6(@sinclair/typebox@0.34.47))(file-type@21.3.0)(openapi-types@12.1.3)(typescript@5.9.3)))':
|
||||
dependencies:
|
||||
'@elysiajs/eden': 1.4.6(elysia@1.4.22(@sinclair/typebox@0.34.47)(exact-mirror@0.2.6(@sinclair/typebox@0.34.47))(file-type@21.3.0)(openapi-types@12.1.3)(typescript@5.9.3))
|
||||
|
||||
|
||||
@@ -19,7 +19,7 @@ catalog:
|
||||
'@capacitor/share': ^8.0.0
|
||||
'@capacitor/status-bar': 8.0.0
|
||||
'@capacitor/toast': ^8.0.0
|
||||
'@capp/eden': http://192.168.1.2:9538/api/capp-eden-0.0.37.tgz
|
||||
'@capp/eden': http://192.168.1.2:9538/api/capp-eden-0.0.38.tgz
|
||||
'@cloudflare/workers-types': ^4.20260113.0
|
||||
'@elysiajs/eden': ^1.4.6
|
||||
'@faker-js/faker': ^10.2.0
|
||||
|
||||
@@ -154,6 +154,13 @@ onMounted(() => {
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<ion-infinite-scroll threshold="100px" @ion-infinite="handleInfinite">
|
||||
<ion-infinite-scroll-content
|
||||
loading-spinner="bubbles"
|
||||
loading-text="加载更多产品..."
|
||||
/>
|
||||
</ion-infinite-scroll>
|
||||
</ion-content>
|
||||
</ion-page>
|
||||
</template>
|
||||
|
||||
@@ -1,7 +1,7 @@
|
||||
<script lang='ts' setup>
|
||||
import { alertController, toastController } from "@ionic/vue";
|
||||
import { cardOutline, checkmarkCircleOutline, documentTextOutline, logoAlipay, logoWechat, walletOutline } from "ionicons/icons";
|
||||
import { safeClient } from "@/api";
|
||||
import { client, safeClient } from "@/api";
|
||||
|
||||
const walletStore = useWalletStore();
|
||||
const balanceWallet = await walletStore.getWalletByType("balance");
|
||||
@@ -99,36 +99,26 @@ function goToRecords() {
|
||||
router.push("/recharge/records");
|
||||
}
|
||||
|
||||
async function showToast(message: string, color: "success" | "danger" | "warning" = "success") {
|
||||
const toast = await toastController.create({
|
||||
message,
|
||||
duration: 2000,
|
||||
position: "top",
|
||||
color,
|
||||
});
|
||||
await toast.present();
|
||||
}
|
||||
|
||||
async function handleSubmit() {
|
||||
const amount = Number.parseFloat(rechargeAmount.value);
|
||||
|
||||
if (!rechargeAmount.value || Number.isNaN(amount) || amount <= 0) {
|
||||
await showToast("请输入有效的充值金额", "warning");
|
||||
showToast("请输入有效的充值金额");
|
||||
return;
|
||||
}
|
||||
|
||||
if (amount < 10) {
|
||||
await showToast("充值金额不能低于10元", "warning");
|
||||
showToast("充值金额不能低于10元");
|
||||
return;
|
||||
}
|
||||
|
||||
if (!selectedPaymentType.value) {
|
||||
await showToast("请选择支付方式", "warning");
|
||||
showToast("请选择支付方式");
|
||||
return;
|
||||
}
|
||||
|
||||
if (!selectedPaymentId.value) {
|
||||
await showToast("请选择支付账号", "warning");
|
||||
showToast("请选择支付账号");
|
||||
return;
|
||||
}
|
||||
|
||||
@@ -143,13 +133,16 @@ async function handleSubmit() {
|
||||
{
|
||||
text: "确认",
|
||||
handler: async () => {
|
||||
// TODO: 调用充值 API
|
||||
await showToast("充值成功");
|
||||
await safeClient(client.api.deposit.fiat.post({
|
||||
amount: String(amount),
|
||||
paymentChannel: selectedPaymentType.value!,
|
||||
}));
|
||||
rechargeAmount.value = "";
|
||||
selectedPaymentType.value = null;
|
||||
selectedPaymentId.value = null;
|
||||
const data = await walletStore.getWalletByType("balance");
|
||||
balanceWallet.value = data.value;
|
||||
// TODO 刷新余额
|
||||
// const data = await walletStore.getWalletByType("balance");
|
||||
// balanceWallet.value = data.value;
|
||||
},
|
||||
},
|
||||
],
|
||||
@@ -169,7 +162,7 @@ async function handleSubmit() {
|
||||
<ion-title>充值</ion-title>
|
||||
<ion-buttons slot="end">
|
||||
<ion-button color="light" size="small" @click="goToRecords">
|
||||
<ion-icon slot="icon-only" :icon="documentTextOutline" />
|
||||
充值记录
|
||||
</ion-button>
|
||||
</ion-buttons>
|
||||
</ion-toolbar>
|
||||
|
||||
@@ -1,14 +1,37 @@
|
||||
<script lang='ts' setup>
|
||||
import type { Treaty } from "@elysiajs/eden";
|
||||
import type { InfiniteScrollCustomEvent } from "@ionic/vue";
|
||||
import type { TreatyQuery } from "@/api/types";
|
||||
import { cardOutline, listOutline, logoAlipay, logoWechat } from "ionicons/icons";
|
||||
import { client, safeClient } from "@/api";
|
||||
|
||||
interface RechargeRecord {
|
||||
id: number;
|
||||
amount: number;
|
||||
paymentType: "alipay" | "unionpay" | "wechat";
|
||||
paymentAccount: string;
|
||||
status: "success" | "pending" | "failed";
|
||||
time: string;
|
||||
orderNo: string;
|
||||
type DepositRecord = Treaty.Data<typeof client.api.deposit.orders.get>["data"][number];
|
||||
type DepositQuery = TreatyQuery<typeof client.api.deposit.orders.get>;
|
||||
|
||||
const [query] = useResetRef<DepositQuery>({
|
||||
offset: 0,
|
||||
limit: 10,
|
||||
});
|
||||
const data = ref<DepositRecord[]>([]);
|
||||
const isFinished = ref(false);
|
||||
const walletStore = useWalletStore();
|
||||
|
||||
async function fetchData() {
|
||||
const { data: responseData } = await safeClient(client.api.deposit.orders.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);
|
||||
}
|
||||
|
||||
// 支付方式选项
|
||||
@@ -18,121 +41,42 @@ const paymentTypes = [
|
||||
{ type: "wechat" as const, name: "微信", icon: logoWechat, color: "#07C160" },
|
||||
];
|
||||
|
||||
// 充值记录数据
|
||||
const rechargeRecords = ref<RechargeRecord[]>([
|
||||
{
|
||||
id: 1,
|
||||
amount: 1000.00,
|
||||
paymentType: "alipay",
|
||||
paymentAccount: "138****8000",
|
||||
status: "success",
|
||||
time: "2026-01-18 14:30:20",
|
||||
orderNo: "RCH202601181430001",
|
||||
},
|
||||
{
|
||||
id: 2,
|
||||
amount: 500.00,
|
||||
paymentType: "wechat",
|
||||
paymentAccount: "wxid_abc123",
|
||||
status: "success",
|
||||
time: "2026-01-17 10:15:30",
|
||||
orderNo: "RCH202601171015002",
|
||||
},
|
||||
{
|
||||
id: 3,
|
||||
amount: 2000.00,
|
||||
paymentType: "unionpay",
|
||||
paymentAccount: "6222 **** **** 1234",
|
||||
status: "pending",
|
||||
time: "2026-01-16 16:45:10",
|
||||
orderNo: "RCH202601161645003",
|
||||
},
|
||||
{
|
||||
id: 4,
|
||||
amount: 100.00,
|
||||
paymentType: "alipay",
|
||||
paymentAccount: "159****6666",
|
||||
status: "success",
|
||||
time: "2026-01-15 09:20:00",
|
||||
orderNo: "RCH202601150920004",
|
||||
},
|
||||
{
|
||||
id: 5,
|
||||
amount: 800.00,
|
||||
paymentType: "unionpay",
|
||||
paymentAccount: "6217 **** **** 5678",
|
||||
status: "failed",
|
||||
time: "2026-01-14 20:30:15",
|
||||
orderNo: "RCH202601142030005",
|
||||
},
|
||||
{
|
||||
id: 6,
|
||||
amount: 300.00,
|
||||
paymentType: "alipay",
|
||||
paymentAccount: "138****8000",
|
||||
status: "success",
|
||||
time: "2026-01-13 11:45:30",
|
||||
orderNo: "RCH202601131145006",
|
||||
},
|
||||
{
|
||||
id: 7,
|
||||
amount: 1500.00,
|
||||
paymentType: "wechat",
|
||||
paymentAccount: "wxid_abc123",
|
||||
status: "success",
|
||||
time: "2026-01-12 15:20:10",
|
||||
orderNo: "RCH202601121520007",
|
||||
},
|
||||
{
|
||||
id: 8,
|
||||
amount: 600.00,
|
||||
paymentType: "unionpay",
|
||||
paymentAccount: "6222 **** **** 1234",
|
||||
status: "success",
|
||||
time: "2026-01-11 09:30:45",
|
||||
orderNo: "RCH202601110930008",
|
||||
},
|
||||
]);
|
||||
|
||||
function getPaymentTypeName(type: "alipay" | "unionpay" | "wechat") {
|
||||
function getPaymentTypeName(type: string | null) {
|
||||
return paymentTypes.find(pt => pt.type === type)?.name || type;
|
||||
}
|
||||
|
||||
function getPaymentTypeIcon(type: "alipay" | "unionpay" | "wechat") {
|
||||
function getPaymentTypeIcon(type: string | null) {
|
||||
return paymentTypes.find(pt => pt.type === type)?.icon || cardOutline;
|
||||
}
|
||||
|
||||
function getPaymentTypeColor(type: "alipay" | "unionpay" | "wechat") {
|
||||
function getPaymentTypeColor(type: string | null) {
|
||||
return paymentTypes.find(pt => pt.type === type)?.color || "#999";
|
||||
}
|
||||
|
||||
function getStatusText(status: "success" | "pending" | "failed") {
|
||||
function getStatusText(status: DepositRecord["status"]) {
|
||||
const statusMap = {
|
||||
success: "成功",
|
||||
pending: "处理中",
|
||||
failed: "失败",
|
||||
pending: "待处理",
|
||||
approved: "已批准",
|
||||
completed: "已完成",
|
||||
rejected: "已拒绝",
|
||||
cancelled: "已取消",
|
||||
};
|
||||
return statusMap[status];
|
||||
}
|
||||
|
||||
function getStatusColor(status: "success" | "pending" | "failed") {
|
||||
function getStatusColor(status: DepositRecord["status"]) {
|
||||
const colorMap = {
|
||||
success: "#52c41a",
|
||||
pending: "#faad14",
|
||||
failed: "#f5222d",
|
||||
approved: "#52c41a",
|
||||
completed: "#52c41a",
|
||||
rejected: "#f5222d",
|
||||
cancelled: "#f5222d",
|
||||
};
|
||||
return colorMap[status];
|
||||
}
|
||||
|
||||
// 统计数据
|
||||
const totalAmount = computed(() => {
|
||||
return rechargeRecords.value
|
||||
.filter(r => r.status === "success")
|
||||
.reduce((sum, r) => sum + r.amount, 0);
|
||||
});
|
||||
|
||||
const totalCount = computed(() => {
|
||||
return rechargeRecords.value.filter(r => r.status === "success").length;
|
||||
onMounted(() => {
|
||||
fetchData();
|
||||
});
|
||||
</script>
|
||||
|
||||
@@ -148,50 +92,27 @@ const totalCount = computed(() => {
|
||||
</ion-header>
|
||||
|
||||
<ion-content>
|
||||
<!-- 统计卡片 -->
|
||||
<div class="stats-card">
|
||||
<div class="stat-item">
|
||||
<div class="stat-label">
|
||||
累计充值金额
|
||||
</div>
|
||||
<div class="stat-value">
|
||||
¥{{ totalAmount.toFixed(2) }}
|
||||
</div>
|
||||
</div>
|
||||
<div class="stat-divider" />
|
||||
<div class="stat-item">
|
||||
<div class="stat-label">
|
||||
充值成功次数
|
||||
</div>
|
||||
<div class="stat-value">
|
||||
{{ totalCount }}次
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 充值记录列表 -->
|
||||
<div class="records-section">
|
||||
<div v-if="rechargeRecords.length > 0" class="records-list">
|
||||
<div v-if="data.length > 0" class="records-list">
|
||||
<div
|
||||
v-for="record in rechargeRecords"
|
||||
v-for="record in data"
|
||||
:key="record.id"
|
||||
class="record-item"
|
||||
>
|
||||
<div class="record-left">
|
||||
<ion-icon
|
||||
:icon="getPaymentTypeIcon(record.paymentType)"
|
||||
:icon="getPaymentTypeIcon(record.paymentChannel)"
|
||||
class="record-icon"
|
||||
:style="{ color: getPaymentTypeColor(record.paymentType) }"
|
||||
:style="{ color: getPaymentTypeColor(record.paymentChannel) }"
|
||||
/>
|
||||
<div class="record-info">
|
||||
<div class="record-title">
|
||||
{{ getPaymentTypeName(record.paymentType) }}充值
|
||||
</div>
|
||||
<div class="record-account">
|
||||
{{ record.paymentAccount }}
|
||||
{{ getPaymentTypeName(record.paymentChannel) }}充值
|
||||
</div>
|
||||
|
||||
<div class="record-time">
|
||||
{{ record.time }}
|
||||
{{ useDateFormat(record.createdAt, 'YYYY-MM-DD HH:mm:ss') }}
|
||||
</div>
|
||||
<div class="record-order">
|
||||
订单号：{{ record.orderNo }}
|
||||
@@ -200,7 +121,7 @@ const totalCount = computed(() => {
|
||||
</div>
|
||||
<div class="record-right">
|
||||
<div class="record-amount">
|
||||
+¥{{ record.amount.toFixed(2) }}
|
||||
+¥{{ Number(record.amount) }}
|
||||
</div>
|
||||
<div
|
||||
class="record-status"
|
||||
@@ -219,6 +140,13 @@ const totalCount = computed(() => {
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<ion-infinite-scroll threshold="100px" @ion-infinite="handleInfinite">
|
||||
<ion-infinite-scroll-content
|
||||
loading-spinner="bubbles"
|
||||
loading-text="加载更多记录..."
|
||||
/>
|
||||
</ion-infinite-scroll>
|
||||
</ion-content>
|
||||
</ion-page>
|
||||
</template>
|
||||
|
||||
Reference in New Issue
Block a user