通过后端的json数据渲染首页
This commit is contained in:
minimaxagent1
parent
63e381de54
commit
2f52fcfa02
|
|
@ -8,7 +8,8 @@ import { request } from '@/utils/request'
|
|||
export function getHomeConfig() {
|
||||
return request({
|
||||
url: '/app/homeCfg',
|
||||
method: 'GET'
|
||||
method: 'GET',
|
||||
timeout: 10000 // 10秒超时
|
||||
})
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -1,5 +1,12 @@
|
|||
<template>
|
||||
<view class="page">
|
||||
<!-- 加载状态指示器 -->
|
||||
<view v-if="loading" class="loading-overlay">
|
||||
<view class="loading-content">
|
||||
<text>正在加载配置...</text>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<!-- 背景图 -->
|
||||
<image class="bj" :src="pageConfig.background.img" mode="aspectFill"></image>
|
||||
<!-- 公告 -->
|
||||
|
|
@ -107,49 +114,230 @@ import { getHomeConfig } from "../../api/index/index.js";
|
|||
* 获取首页配置
|
||||
*/
|
||||
async loadHomeConfig() {
|
||||
this.loading = true;
|
||||
try {
|
||||
const response = await getHomeConfig();
|
||||
// 添加调试信息
|
||||
console.log('=== 开始获取首页配置 ===');
|
||||
console.log('当前时间:', new Date().toISOString());
|
||||
console.log('页面路径:', this.$mp?.page?.route || 'unknown');
|
||||
|
||||
this.loading = true;
|
||||
console.log('开始获取首页配置...');
|
||||
|
||||
// 重试机制
|
||||
const maxRetries = 3;
|
||||
let retryCount = 0;
|
||||
|
||||
while (retryCount < maxRetries) {
|
||||
try {
|
||||
console.log(`第 ${retryCount + 1} 次尝试获取配置...`);
|
||||
|
||||
// 检查网络状态
|
||||
const isNetworkAvailable = await this.checkNetworkStatus();
|
||||
if (!isNetworkAvailable) {
|
||||
console.error('网络不可用，使用默认配置');
|
||||
this.useDefaultConfig();
|
||||
return;
|
||||
}
|
||||
|
||||
console.log('网络状态正常，开始请求API...');
|
||||
const response = await getHomeConfig();
|
||||
console.log('API响应:', response);
|
||||
|
||||
// 检查响应状态
|
||||
if (!response) {
|
||||
console.error('API响应为空');
|
||||
this.useDefaultConfig();
|
||||
return;
|
||||
}
|
||||
|
||||
// 检查响应码
|
||||
if (response.code !== 200) {
|
||||
console.error('API响应码错误:', response.code, response.msg);
|
||||
this.useDefaultConfig();
|
||||
return;
|
||||
}
|
||||
|
||||
// 检查数据是否存在
|
||||
if (!response.data) {
|
||||
console.error('API响应数据为空');
|
||||
this.useDefaultConfig();
|
||||
return;
|
||||
}
|
||||
|
||||
// 检查数据是否为数组且有内容
|
||||
if (!Array.isArray(response.data) || response.data.length === 0) {
|
||||
console.error('API响应数据格式错误或为空数组');
|
||||
this.useDefaultConfig();
|
||||
return;
|
||||
}
|
||||
|
||||
if (response.code === 200 && response.data && response.data.length > 0) {
|
||||
// 获取第一条配置数据
|
||||
const configData = response.data[0];
|
||||
console.log('配置数据:', configData);
|
||||
|
||||
// 如果后端返回的数据包含body字段，解析JSON
|
||||
if (configData.body) {
|
||||
// 检查body字段是否存在
|
||||
if (!configData.body) {
|
||||
console.error('配置数据缺少body字段');
|
||||
this.useDefaultConfig();
|
||||
return;
|
||||
}
|
||||
|
||||
// 解析JSON配置
|
||||
try {
|
||||
const parsedConfig = JSON.parse(configData.body);
|
||||
console.log('解析后的配置数据:', parsedConfig);
|
||||
|
||||
// 验证配置数据完整性
|
||||
if (!this.validateConfig(parsedConfig)) {
|
||||
console.error('配置数据验证失败');
|
||||
this.useDefaultConfig();
|
||||
return;
|
||||
}
|
||||
|
||||
// 更新页面配置
|
||||
if (parsedConfig.pageConfig) {
|
||||
this.pageConfig = parsedConfig.pageConfig;
|
||||
}
|
||||
if (parsedConfig.navigationItems) {
|
||||
this.navigationItems = parsedConfig.navigationItems;
|
||||
}
|
||||
if (parsedConfig.bottomSection) {
|
||||
this.bottomSection = parsedConfig.bottomSection;
|
||||
}
|
||||
this.updatePageConfig(parsedConfig);
|
||||
|
||||
// 重新启动跑马灯
|
||||
this.stopMarquee();
|
||||
this.startMarquee();
|
||||
|
||||
console.log('配置加载成功');
|
||||
|
||||
} catch (parseError) {
|
||||
console.error('解析配置JSON失败:', parseError);
|
||||
console.log('原始body数据:', configData.body);
|
||||
this.useDefaultConfig();
|
||||
}
|
||||
}
|
||||
} else {
|
||||
console.log('使用默认配置数据');
|
||||
}
|
||||
|
||||
// 如果成功获取到数据，跳出重试循环
|
||||
break;
|
||||
|
||||
} catch (error) {
|
||||
console.error('获取首页配置失败:', error);
|
||||
console.log('使用默认配置数据');
|
||||
} finally {
|
||||
this.loading = false;
|
||||
retryCount++;
|
||||
console.error(`第 ${retryCount} 次尝试失败:`, error);
|
||||
console.error('错误详情:', {
|
||||
message: error.message,
|
||||
stack: error.stack,
|
||||
name: error.name
|
||||
});
|
||||
|
||||
if (retryCount >= maxRetries) {
|
||||
console.error('所有重试都失败了，使用默认配置');
|
||||
this.useDefaultConfig();
|
||||
break;
|
||||
} else {
|
||||
console.log(`等待 ${retryCount * 1000}ms 后重试...`);
|
||||
await new Promise(resolve => setTimeout(resolve, retryCount * 1000));
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
this.loading = false;
|
||||
console.log('配置加载完成，loading状态:', this.loading);
|
||||
},
|
||||
|
||||
/**
|
||||
* 使用默认配置
|
||||
*/
|
||||
useDefaultConfig() {
|
||||
console.log('使用默认配置数据');
|
||||
// 确保默认配置可用
|
||||
if (!this.pageConfig || !this.pageConfig.announcement) {
|
||||
console.error('默认配置数据不完整');
|
||||
uni.showToast({
|
||||
title: '配置数据异常',
|
||||
icon: 'none',
|
||||
duration: 2000
|
||||
});
|
||||
return;
|
||||
}
|
||||
// 启动跑马灯
|
||||
this.stopMarquee();
|
||||
this.startMarquee();
|
||||
|
||||
// 显示提示信息
|
||||
uni.showToast({
|
||||
title: '使用本地配置',
|
||||
icon: 'none',
|
||||
duration: 1500
|
||||
});
|
||||
},
|
||||
|
||||
/**
|
||||
* 验证配置数据完整性
|
||||
*/
|
||||
validateConfig(config) {
|
||||
if (!config) {
|
||||
console.error('配置对象为空');
|
||||
return false;
|
||||
}
|
||||
|
||||
// 检查必需的配置项
|
||||
const requiredFields = ['pageConfig', 'navigationItems', 'bottomSection'];
|
||||
for (const field of requiredFields) {
|
||||
if (!config[field]) {
|
||||
console.error(`配置缺少必需字段: ${field}`);
|
||||
return false;
|
||||
}
|
||||
}
|
||||
|
||||
// 检查pageConfig的必需子字段
|
||||
const requiredPageConfigFields = ['background', 'announcement', 'topIcons'];
|
||||
for (const field of requiredPageConfigFields) {
|
||||
if (!config.pageConfig[field]) {
|
||||
console.error(`pageConfig缺少必需字段: ${field}`);
|
||||
return false;
|
||||
}
|
||||
}
|
||||
|
||||
// 检查announcement的必需子字段
|
||||
if (!config.pageConfig.announcement.text) {
|
||||
console.error('announcement缺少text字段');
|
||||
return false;
|
||||
}
|
||||
|
||||
console.log('配置数据验证通过');
|
||||
return true;
|
||||
},
|
||||
|
||||
/**
|
||||
* 更新页面配置
|
||||
*/
|
||||
updatePageConfig(parsedConfig) {
|
||||
if (parsedConfig.pageConfig) {
|
||||
this.pageConfig = parsedConfig.pageConfig;
|
||||
console.log('更新pageConfig成功');
|
||||
}
|
||||
if (parsedConfig.navigationItems) {
|
||||
this.navigationItems = parsedConfig.navigationItems;
|
||||
console.log('更新navigationItems成功');
|
||||
}
|
||||
if (parsedConfig.bottomSection) {
|
||||
this.bottomSection = parsedConfig.bottomSection;
|
||||
console.log('更新bottomSection成功');
|
||||
}
|
||||
},
|
||||
|
||||
/**
|
||||
* 检查网络状态
|
||||
*/
|
||||
checkNetworkStatus() {
|
||||
return new Promise((resolve) => {
|
||||
uni.getNetworkType({
|
||||
success: (res) => {
|
||||
console.log('网络类型:', res.networkType);
|
||||
if (res.networkType === 'none') {
|
||||
console.error('网络连接不可用');
|
||||
resolve(false);
|
||||
} else {
|
||||
resolve(true);
|
||||
}
|
||||
},
|
||||
fail: () => {
|
||||
console.error('获取网络状态失败');
|
||||
resolve(false);
|
||||
}
|
||||
});
|
||||
});
|
||||
},
|
||||
|
||||
startMarquee() {
|
||||
|
|
@ -380,4 +568,30 @@ import { getHomeConfig } from "../../api/index/index.js";
|
|||
z-index: -1;
|
||||
}
|
||||
|
||||
/* 加载状态指示器样式 */
|
||||
.loading-overlay {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background-color: rgba(0, 0, 0, 0.5);
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
z-index: 9999;
|
||||
}
|
||||
|
||||
.loading-content {
|
||||
background-color: rgba(255, 255, 255, 0.9);
|
||||
padding: 40rpx 60rpx;
|
||||
border-radius: 20rpx;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.loading-content text {
|
||||
font-size: 28rpx;
|
||||
color: #333;
|
||||
}
|
||||
|
||||
</style>
|
||||
|
|
@ -33,6 +33,7 @@ export function request(options = {}) {
|
|||
'Content-Type': 'application/json',
|
||||
...options.header
|
||||
},
|
||||
timeout: options.timeout || 60000, // 默认60秒超时
|
||||
success: (res) => {
|
||||
// 请求成功处理
|
||||
if (res.statusCode === 200) {
|
||||
|
|
|
|||
Loading…
Reference in New Issue
Block a user