mirror of
https://github.com/Megghy/vtsuru.live.git
synced 2025-12-07 02:46:55 +08:00
feat: 更新用户中心组件,增强数据加载和刷新功能
- 在 PointOrderView 和 PointUserHistoryView 中新增数据加载完成事件,优化数据获取逻辑。 - 在 PointUserLayout 中实现标签页数据加载状态管理,提升用户体验。 - 为各组件添加重置方法,支持父组件调用,增强灵活性。 - 更新 PointUserSettings 组件,提供重置功能,确保状态管理一致性。
This commit is contained in:
@@ -3,7 +3,7 @@ import { ResponsePointOrder2UserModel } from '@/api/api-models'
|
||||
import PointOrderCard from '@/components/manage/PointOrderCard.vue'
|
||||
import { POINT_API_URL } from '@/data/constants'
|
||||
import { useAuthStore } from '@/store/useAuthStore'
|
||||
import { NEmpty, NSpin, useMessage } from 'naive-ui'
|
||||
import { NButton, NEmpty, NFlex, NSpin, useMessage } from 'naive-ui'
|
||||
import { onMounted, ref } from 'vue'
|
||||
|
||||
const message = useMessage()
|
||||
@@ -12,11 +12,17 @@ const useAuth = useAuthStore()
|
||||
const orders = ref<ResponsePointOrder2UserModel[]>([])
|
||||
const isLoading = ref(false)
|
||||
|
||||
// 定义加载完成的事件
|
||||
const emit = defineEmits(['dataLoaded'])
|
||||
|
||||
async function getOrders() {
|
||||
try {
|
||||
isLoading.value = true
|
||||
const data = await useAuth.QueryBiliAuthGetAPI<ResponsePointOrder2UserModel[]>(POINT_API_URL + 'user/get-orders')
|
||||
if (data.code == 200) {
|
||||
orders.value = data.data
|
||||
// 触发数据加载完成事件
|
||||
emit('dataLoaded')
|
||||
return data.data
|
||||
} else {
|
||||
message.error('获取订单失败: ' + data.message)
|
||||
@@ -30,6 +36,17 @@ async function getOrders() {
|
||||
return []
|
||||
}
|
||||
|
||||
// 提供给父组件调用的重置方法
|
||||
function reset() {
|
||||
orders.value = []
|
||||
}
|
||||
|
||||
// 暴露方法给父组件
|
||||
defineExpose({
|
||||
getOrders,
|
||||
reset
|
||||
})
|
||||
|
||||
onMounted(async () => {
|
||||
orders.value = await getOrders()
|
||||
})
|
||||
@@ -37,6 +54,9 @@ onMounted(async () => {
|
||||
|
||||
<template>
|
||||
<NSpin :show="isLoading">
|
||||
<NFlex justify="end" style="margin-bottom: 10px">
|
||||
<NButton size="small" type="primary" @click="getOrders">刷新订单</NButton>
|
||||
</NFlex>
|
||||
<NEmpty
|
||||
v-if="orders.length == 0"
|
||||
description="暂无订单"
|
||||
|
||||
Reference in New Issue
Block a user