feat: 全局请求拦截器自动显示loading,移除页面单独loading逻辑
This commit is contained in:
parent
a75f1d04b4
commit
f0c7180286
@ -1,12 +1,5 @@
|
||||
<template>
|
||||
<view class="page-container">
|
||||
<!-- 全局加载遮罩 -->
|
||||
<view class="loading-overlay" v-if="loading">
|
||||
<view class="loading-content">
|
||||
<uni-icons type="spinner-cycle" size="40" color="#064E3B" class="loading-spin"></uni-icons>
|
||||
<text class="loading-text">加载中...</text>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
|
||||
<view class="header-section">
|
||||
@ -285,8 +278,6 @@ const getCurrencySymbol = (currency) => {
|
||||
};
|
||||
|
||||
const portfolioId = ref('');
|
||||
const loading = ref(false);
|
||||
|
||||
const portfolioData = ref({
|
||||
id: '',
|
||||
name: '',
|
||||
@ -400,7 +391,6 @@ const selectStock = (result) => {
|
||||
|
||||
const fetchPortfolioData = async () => {
|
||||
try {
|
||||
loading.value = true;
|
||||
const pages = getCurrentPages();
|
||||
const currentPage = pages[pages.length - 1];
|
||||
const id = currentPage.options?.id;
|
||||
@ -421,14 +411,11 @@ const fetchPortfolioData = async () => {
|
||||
} catch (error) {
|
||||
console.error('获取投资组合数据失败:', error);
|
||||
uni.showToast({ title: '加载失败,请重试', icon: 'none' });
|
||||
} finally {
|
||||
loading.value = false;
|
||||
}
|
||||
};
|
||||
|
||||
const fetchTransactions = async () => {
|
||||
try {
|
||||
loading.value = true;
|
||||
if (!portfolioId.value) return;
|
||||
|
||||
const response = await api.assets.getTransactions({
|
||||
@ -444,8 +431,6 @@ const fetchTransactions = async () => {
|
||||
} catch (error) {
|
||||
console.error('获取交易记录失败:', error);
|
||||
uni.showToast({ title: '加载交易记录失败', icon: 'none' });
|
||||
} finally {
|
||||
loading.value = false;
|
||||
}
|
||||
};
|
||||
|
||||
@ -592,42 +577,6 @@ const deletePortfolio = async () => {
|
||||
/* 关键:底部留出空间,防止内容被固定按钮遮挡 */
|
||||
padding-bottom: 180rpx;
|
||||
}
|
||||
|
||||
/* 加载遮罩 */
|
||||
.loading-overlay {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
background-color: rgba(0, 0, 0, 0.4);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
z-index: 9999;
|
||||
}
|
||||
.loading-content {
|
||||
background-color: #FFFFFF;
|
||||
border-radius: 16rpx;
|
||||
padding: 40rpx;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
gap: 16rpx;
|
||||
box-shadow: 0 8rpx 24rpx rgba(0, 0, 0, 0.15);
|
||||
}
|
||||
.loading-spin {
|
||||
animation: rotate 1s linear infinite;
|
||||
}
|
||||
@keyframes rotate {
|
||||
from { transform: rotate(0deg); }
|
||||
to { transform: rotate(360deg); }
|
||||
}
|
||||
.loading-text {
|
||||
font-size: 26rpx;
|
||||
color: #374151;
|
||||
font-weight: 500;
|
||||
}
|
||||
.flex-row { display: flex; flex-direction: row; }
|
||||
.flex-col { display: flex; flex-direction: column; }
|
||||
.items-center { align-items: center; }
|
||||
|
||||
28
utils/api.js
28
utils/api.js
@ -13,6 +13,25 @@ const TIMEOUT = 10000;
|
||||
// 登录锁,防止并发登录
|
||||
let loginLock = null;
|
||||
|
||||
// 全局loading计数,避免多个请求重复显示/隐藏loading
|
||||
let loadingCount = 0;
|
||||
const showLoading = () => {
|
||||
if (loadingCount === 0) {
|
||||
uni.showLoading({
|
||||
title: '加载中...',
|
||||
mask: true
|
||||
});
|
||||
}
|
||||
loadingCount++;
|
||||
};
|
||||
const hideLoading = () => {
|
||||
loadingCount--;
|
||||
if (loadingCount <= 0) {
|
||||
loadingCount = 0;
|
||||
uni.hideLoading();
|
||||
}
|
||||
};
|
||||
|
||||
/**
|
||||
* 获取微信登录码
|
||||
* @returns {Promise<string>} - 返回微信登录码
|
||||
@ -128,6 +147,9 @@ const requestWithRetry = async (url, method = 'GET', data = {}, headers = {}, re
|
||||
timestamp: new Date().toISOString()
|
||||
});
|
||||
|
||||
// 显示全局loading
|
||||
showLoading();
|
||||
|
||||
const res = await new Promise((resolve, reject) => {
|
||||
uni.request({
|
||||
url: fullUrl,
|
||||
@ -153,6 +175,9 @@ const requestWithRetry = async (url, method = 'GET', data = {}, headers = {}, re
|
||||
data: res.data
|
||||
});
|
||||
|
||||
// 隐藏loading
|
||||
hideLoading();
|
||||
|
||||
if (res.statusCode === 200) {
|
||||
return res.data;
|
||||
} else if (res.statusCode === 401) {
|
||||
@ -185,6 +210,9 @@ const requestWithRetry = async (url, method = 'GET', data = {}, headers = {}, re
|
||||
throw new Error(`请求失败: ${res.statusCode}`);
|
||||
}
|
||||
} catch (error) {
|
||||
// 隐藏loading
|
||||
hideLoading();
|
||||
|
||||
// 请求失败日志
|
||||
console.log('❌ API 请求失败:', {
|
||||
url,
|
||||
|
||||
Loading…
Reference in New Issue
Block a user