页面跳转加载显示异常的修正

This commit is contained in:
minimaxagent1 2025-08-02 11:14:12 +08:00
parent 5d3031d9f0
commit d94caddd8b
9 changed files with 496 additions and 36 deletions

View File

@ -16,5 +16,7 @@ import { get, post } from '@/utils/request'
* @returns {Promise} 返回捐款记录列表
*/
export function getDonorList(params) {
return get('/app/donor/listDonor', params)
return get('/app/donor/listDonor', params, {
showLoading: false // 使用页面级别的loading管理
})
}

View File

@ -7,7 +7,9 @@ import { get, put, del } from '@/utils/request'
* @returns {Promise} 返回建制详情
*/
export function getInstitutionalDetail(formedId) {
return get('/app/formed/formedDetail', { formedId })
return get('/app/formed/formedDetail', { formedId }, {
showLoading: false // 使用页面级别的loading管理
})
}
/**

View File

@ -1,7 +1,7 @@
/**
* 高僧详情相关API
*/
import { request } from '../../utils/request.js';
import { get, post, put, del } from '../../utils/request.js';
/**
* 获取高僧详情
@ -9,10 +9,8 @@ import { request } from '../../utils/request.js';
* @returns {Promise} 返回高僧详情数据
*/
export function getMonkDetail(monkId) {
return request({
url: '/app/monk/monkById',
method: 'GET',
params: { monkId }
return get('/app/monk/monkById', { monkId }, {
showLoading: false // 使用页面级别的loading管理
});
}
@ -25,14 +23,12 @@ export function getMonkDetail(monkId) {
* @returns {Promise} 返回高僧列表数据
*/
export function getMonkList(params = {}) {
return request({
url: '/app/monk/listMonk',
method: 'GET',
params: {
pageNum: 1,
pageSize: 10,
...params
}
return get('/app/monk/listMonk', {
pageNum: 1,
pageSize: 10,
...params
}, {
showLoading: false // 使用页面级别的loading管理
});
}
@ -42,11 +38,7 @@ export function getMonkList(params = {}) {
* @returns {Promise} 返回创建结果
*/
export function createMonk(data) {
return request({
url: '/app/monk/createMonk',
method: 'POST',
data
});
return post('/app/monk/createMonk', data);
}
/**
@ -55,11 +47,7 @@ export function createMonk(data) {
* @returns {Promise} 返回更新结果
*/
export function updateMonk(data) {
return request({
url: '/app/monk/updateMonk',
method: 'PUT',
data
});
return put('/app/monk/updateMonk', data);
}
/**
@ -68,9 +56,5 @@ export function updateMonk(data) {
* @returns {Promise} 返回删除结果
*/
export function deleteMonk(id) {
return request({
url: '/app/monk/deleteMonk',
method: 'DELETE',
params: { id }
});
return del('/app/monk/deleteMonk', { id });
}

View File

@ -51,6 +51,7 @@ import ProjectInfo from "./components/project-info.vue";
import DonationSummary from "./components/donation-summary.vue";
import DonationList from "./components/donation-list.vue";
import { donationMixin } from "./mixins/donation-mixin.js";
import { PageLoadingManager } from "../../utils/request.js";
export default {
mixins: [donationMixin],
@ -69,10 +70,19 @@ export default {
}
},
onLoad(options) {
// loading
this.pageLoading = new PageLoadingManager()
//
if (options.formedId) {
this.initData(options.formedId)
}
},
onUnload() {
// loading
if (this.pageLoading) {
this.pageLoading.destroy()
}
}
}
</script>

View File

@ -44,9 +44,27 @@ export const donationMixin = {
try {
const response = await getInstitutionalDetail(this.formedId)
console.log('项目详情API响应:', response)
if (response.code === 200) {
this.projectInfo = response.data
// 根据实际后端数据结构获取项目信息
console.log('项目详情数据结构:', {
hasData: !!response.data,
hasRows: !!response.rows,
dataType: typeof response.data,
rowsType: typeof response.rows
})
if (response.data) {
this.projectInfo = response.data
console.log('使用 response.data 作为项目信息')
} else if (response.rows) {
this.projectInfo = response.rows
console.log('使用 response.rows 作为项目信息')
} else {
this.projectInfo = {}
console.log('未找到项目信息,使用空对象')
}
console.log('项目信息:', this.projectInfo)
} else {
console.error('获取项目信息失败:', response.msg)
@ -89,10 +107,44 @@ export const donationMixin = {
}
const response = await getDonorList(params)
console.log('捐款记录API响应:', response)
if (response.code === 200) {
// 根据实际后端数据结构获取数据数组
let dataArray = []
console.log('解析数据结构:', {
hasData: !!response.data,
hasDataList: !!(response.data && response.data.list),
hasDataListRows: !!(response.data && response.data.list && response.data.list.rows),
dataIsArray: Array.isArray(response.data),
hasRows: !!response.rows,
rowsIsArray: Array.isArray(response.rows)
})
if (response.data && response.data.list && response.data.list.rows) {
// 标准结构response.data.list.rows
dataArray = response.data.list.rows
console.log('使用标准结构: response.data.list.rows')
} else if (response.data && Array.isArray(response.data)) {
// 备用结构response.data 直接是数组
dataArray = response.data
console.log('使用备用结构: response.data')
} else if (response.rows && Array.isArray(response.rows)) {
// 备用结构response.rows 是数组
dataArray = response.rows
console.log('使用备用结构: response.rows')
} else {
console.error('无法找到数据数组API响应结构:', response)
uni.showToast({
title: '数据格式错误',
icon: 'none'
})
return
}
// 转换数据格式
const newData = response.data.map(item => ({
const newData = dataArray.map(item => ({
id: item.id,
name: item.realName,
amount: item.amount,
@ -162,10 +214,32 @@ export const donationMixin = {
* 初始化数据
* @param {string} formedId 建制ID
*/
initData(formedId) {
this.formedId = formedId
this.loadProjectInfo()
this.loadDonationRecords()
async initData(formedId) {
console.log('初始化捐款记录数据, formedId:', formedId)
// 显示页面loading
if (this.pageLoading) {
this.pageLoading.show('努力加载中~')
}
try {
this.formedId = formedId
await this.loadProjectInfo()
await this.loadDonationRecords()
console.log('捐款记录数据初始化完成')
} catch (error) {
console.error('初始化捐款记录数据失败:', error)
uni.showToast({
title: '初始化数据失败',
icon: 'none'
})
} finally {
// 隐藏页面loading
if (this.pageLoading) {
this.pageLoading.hide()
console.log('页面loading已隐藏')
}
}
}
}
}

View File

@ -50,6 +50,7 @@ import MonkEnum from "../../enum/monk";
import {getMonkDetail} from "../../api/monk/monkDetail.js";
import CustomNavbar from "../../components/custom-navbar/custom-navbar.vue";
import BaseBackground from "../../components/base-background/base-background.vue";
import { PageLoadingManager } from "../../utils/request.js";
export default {
components: {
@ -72,11 +73,20 @@ export default {
}
},
onLoad(options) {
// loading
this.pageLoading = new PageLoadingManager()
//
if (options.id) {
this.fetchMonkDetail(options.id);
}
},
onUnload() {
// loading
if (this.pageLoading) {
this.pageLoading.destroy()
}
},
methods: {
//
switchTab(index) {
@ -84,13 +94,24 @@ export default {
},
//
async fetchMonkDetail(monkId) {
console.log('开始获取高僧详情, monkId:', monkId)
// loading
if (this.pageLoading) {
this.pageLoading.show('努力加载中~')
}
try {
const res = await getMonkDetail(monkId);
console.log('高僧详情API响应:', res)
if (res.code === 200 && res.data) {
this.monkInfo = res.data;
//
this.updateTabsContent();
console.log('高僧详情加载完成:', this.monkInfo)
} else {
console.error('API响应异常:', res)
uni.showToast({
title: res.msg || '获取详情失败',
icon: 'none'
@ -102,6 +123,12 @@ export default {
title: '网络错误',
icon: 'none'
});
} finally {
// loading
if (this.pageLoading) {
this.pageLoading.hide()
console.log('页面loading已隐藏')
}
}
},
//

View File

@ -0,0 +1,167 @@
<template>
<view class="data-structure-test-page">
<view class="test-section">
<text class="section-title">数据结构测试</text>
<button @click="testStandardStructure" class="test-btn">测试标准结构</button>
<button @click="testAlternativeStructure" class="test-btn">测试备用结构</button>
<button @click="testInvalidStructure" class="test-btn">测试无效结构</button>
</view>
<view class="result-section">
<text class="section-title">测试结果</text>
<text class="result-text">{{ testResult }}</text>
</view>
</view>
</template>
<script>
export default {
data() {
return {
testResult: ''
}
},
methods: {
// response.data.list.rows
testStandardStructure() {
const mockResponse = {
code: 200,
msg: "操作成功",
data: {
donorCount: 3,
proProfile: "简介",
list: {
total: 2,
rows: [
{
id: "13",
formedId: "5",
realName: "吴键辉",
amount: 100.10,
donationDate: "2025-07-23 00:00:00"
},
{
id: "14",
formedId: "5",
realName: "张三",
amount: 200.50,
donationDate: "2025-07-24 00:00:00"
}
]
}
}
}
this.parseDataStructure(mockResponse, '标准结构测试')
},
// response.data
testAlternativeStructure() {
const mockResponse = {
code: 200,
msg: "操作成功",
data: [
{
id: "13",
formedId: "5",
realName: "李四",
amount: 150.00,
donationDate: "2025-07-25 00:00:00"
}
]
}
this.parseDataStructure(mockResponse, '备用结构测试')
},
//
testInvalidStructure() {
const mockResponse = {
code: 200,
msg: "操作成功",
data: {
someOtherField: "不是数组"
}
}
this.parseDataStructure(mockResponse, '无效结构测试')
},
//
parseDataStructure(response, testName) {
this.testResult = `${testName}开始...\n`
this.testResult += `原始响应: ${JSON.stringify(response, null, 2)}\n\n`
if (response.code === 200) {
let dataArray = []
const structureInfo = {
hasData: !!response.data,
hasDataList: !!(response.data && response.data.list),
hasDataListRows: !!(response.data && response.data.list && response.data.list.rows),
dataIsArray: Array.isArray(response.data),
hasRows: !!response.rows,
rowsIsArray: Array.isArray(response.rows)
}
this.testResult += `数据结构分析: ${JSON.stringify(structureInfo, null, 2)}\n\n`
if (response.data && response.data.list && response.data.list.rows) {
dataArray = response.data.list.rows
this.testResult += '✅ 使用标准结构: response.data.list.rows\n'
} else if (response.data && Array.isArray(response.data)) {
dataArray = response.data
this.testResult += '✅ 使用备用结构: response.data\n'
} else if (response.rows && Array.isArray(response.rows)) {
dataArray = response.rows
this.testResult += '✅ 使用备用结构: response.rows\n'
} else {
this.testResult += '❌ 无法找到数据数组\n'
return
}
this.testResult += `✅ 成功解析数据,共 ${dataArray.length} 条记录\n`
this.testResult += `数据内容: ${JSON.stringify(dataArray, null, 2)}\n`
} else {
this.testResult += `❌ API响应失败: ${response.msg}\n`
}
}
}
}
</script>
<style lang="scss">
.data-structure-test-page {
padding: 40rpx;
}
.test-section {
margin-bottom: 40rpx;
}
.section-title {
font-size: 32rpx;
font-weight: bold;
margin-bottom: 20rpx;
display: block;
}
.test-btn {
margin: 20rpx 0;
padding: 20rpx;
background-color: #007aff;
color: white;
border-radius: 10rpx;
}
.result-section {
margin-top: 40rpx;
}
.result-text {
font-size: 24rpx;
color: #666;
word-break: break-all;
white-space: pre-wrap;
}
</style>

View File

@ -0,0 +1,100 @@
<template>
<view class="donation-test-page">
<view class="test-section">
<text class="section-title">捐款记录API测试</text>
<input v-model="formedId" placeholder="请输入建制ID" class="input-field" />
<button @click="testDonorList" class="test-btn">测试捐款记录API</button>
<button @click="testInstitutionalDetail" class="test-btn">测试项目详情API</button>
</view>
<view class="result-section">
<text class="section-title">测试结果</text>
<text class="result-text">{{ testResult }}</text>
</view>
</view>
</template>
<script>
import { getDonorList } from '@/api/donor/donor.js'
import { getInstitutionalDetail } from '@/api/institutionalStructure/institutionalStructureDetail.js'
export default {
data() {
return {
testResult: '',
formedId: '1' // ID
}
},
methods: {
async testDonorList() {
try {
this.testResult = '正在测试捐款记录API...'
const params = {
formedId: this.formedId,
pageNum: 1,
pageSize: 5
}
const result = await getDonorList(params)
this.testResult = `捐款记录API测试成功:\n${JSON.stringify(result, null, 2)}`
} catch (error) {
this.testResult = `捐款记录API测试失败: ${error.message}`
}
},
async testInstitutionalDetail() {
try {
this.testResult = '正在测试项目详情API...'
const result = await getInstitutionalDetail(this.formedId)
this.testResult = `项目详情API测试成功:\n${JSON.stringify(result, null, 2)}`
} catch (error) {
this.testResult = `项目详情API测试失败: ${error.message}`
}
}
}
}
</script>
<style lang="scss">
.donation-test-page {
padding: 40rpx;
}
.test-section {
margin-bottom: 40rpx;
}
.section-title {
font-size: 32rpx;
font-weight: bold;
margin-bottom: 20rpx;
display: block;
}
.input-field {
width: 100%;
height: 80rpx;
border: 1px solid #ccc;
border-radius: 10rpx;
padding: 0 20rpx;
margin-bottom: 20rpx;
}
.test-btn {
margin: 20rpx 0;
padding: 20rpx;
background-color: #007aff;
color: white;
border-radius: 10rpx;
}
.result-section {
margin-top: 40rpx;
}
.result-text {
font-size: 24rpx;
color: #666;
word-break: break-all;
white-space: pre-wrap;
}
</style>

View File

@ -0,0 +1,94 @@
<template>
<view class="monk-detail-test-page">
<view class="test-section">
<text class="section-title">高僧详情API测试</text>
<input v-model="monkId" placeholder="请输入高僧ID" class="input-field" />
<button @click="testMonkDetail" class="test-btn">测试高僧详情API</button>
<button @click="testMonkList" class="test-btn">测试高僧列表API</button>
</view>
<view class="result-section">
<text class="section-title">测试结果</text>
<text class="result-text">{{ testResult }}</text>
</view>
</view>
</template>
<script>
import { getMonkDetail, getMonkList } from '@/api/monk/monkDetail.js'
export default {
data() {
return {
testResult: '',
monkId: '1' // ID
}
},
methods: {
async testMonkDetail() {
try {
this.testResult = '正在测试高僧详情API...'
const result = await getMonkDetail(this.monkId)
this.testResult = `高僧详情API测试成功:\n${JSON.stringify(result, null, 2)}`
} catch (error) {
this.testResult = `高僧详情API测试失败: ${error.message}`
}
},
async testMonkList() {
try {
this.testResult = '正在测试高僧列表API...'
const result = await getMonkList({ name: '' })
this.testResult = `高僧列表API测试成功:\n${JSON.stringify(result, null, 2)}`
} catch (error) {
this.testResult = `高僧列表API测试失败: ${error.message}`
}
}
}
}
</script>
<style lang="scss">
.monk-detail-test-page {
padding: 40rpx;
}
.test-section {
margin-bottom: 40rpx;
}
.section-title {
font-size: 32rpx;
font-weight: bold;
margin-bottom: 20rpx;
display: block;
}
.input-field {
width: 100%;
height: 80rpx;
border: 1px solid #ccc;
border-radius: 10rpx;
padding: 0 20rpx;
margin-bottom: 20rpx;
}
.test-btn {
margin: 20rpx 0;
padding: 20rpx;
background-color: #007aff;
color: white;
border-radius: 10rpx;
}
.result-section {
margin-top: 40rpx;
}
.result-text {
font-size: 24rpx;
color: #666;
word-break: break-all;
white-space: pre-wrap;
}
</style>