换皮test1.3
公告,时间,背景图,已经可以使用temple/index接口进行修改
This commit is contained in:
parent
e30181e92a
commit
69c05c4911
|
|
@ -5,8 +5,8 @@ import { get, request } from '@/utils/request'
|
||||||
* 获取寺庙介绍信息
|
* 获取寺庙介绍信息
|
||||||
* @returns {Promise} 返回寺庙介绍数据
|
* @returns {Promise} 返回寺庙介绍数据
|
||||||
*/
|
*/
|
||||||
export function getTempleInfo() {
|
export function getTempleIndex() {
|
||||||
return get('/app/temple/introduced', {}, {
|
return get('/app/temple/index', {}, {
|
||||||
timeout: 10000,
|
timeout: 10000,
|
||||||
showLoading: false
|
showLoading: false
|
||||||
})
|
})
|
||||||
|
|
|
||||||
|
|
@ -8,13 +8,13 @@
|
||||||
</view>
|
</view>
|
||||||
|
|
||||||
<!-- 背景图 -->
|
<!-- 背景图 -->
|
||||||
<image class="bj" :src="pageConfig.background.img" mode="aspectFill"></image>
|
<image class="bj" :src="templeData.imgUrl" mode="aspectFill"></image>
|
||||||
<!-- 公告 -->
|
<!-- 公告 -->
|
||||||
<view class="announcement">
|
<view class="announcement">
|
||||||
<image class="ggimg" :src="pageConfig.announcement.icon" mode="" />
|
<image class="ggimg" :src="pageConfig.announcement.icon" mode="" />
|
||||||
<view class="marquee-wrap">
|
<view class="marquee-wrap">
|
||||||
<view class="marquee" :style="{ transform: `translateX(${marqueeX}rpx)` }">
|
<view class="marquee" :style="{ transform: `translateX(${marqueeX}rpx)` }">
|
||||||
{{ pageConfig.announcement.text }}
|
{{ templeData.bulletinContent }}
|
||||||
</view>
|
</view>
|
||||||
</view>
|
</view>
|
||||||
</view>
|
</view>
|
||||||
|
|
@ -34,7 +34,7 @@
|
||||||
<image :src="bottomSection.openingTime.decorationImg" mode=""></image> <text>{{ bottomSection.openingTime.title }}</text> <image :src="bottomSection.openingTime.decorationImg" mode=""></image>
|
<image :src="bottomSection.openingTime.decorationImg" mode=""></image> <text>{{ bottomSection.openingTime.title }}</text> <image :src="bottomSection.openingTime.decorationImg" mode=""></image>
|
||||||
</view>
|
</view>
|
||||||
<view class="time">
|
<view class="time">
|
||||||
{{ bottomSection.openingTime.time }}
|
{{ templeData.startTime }} - {{ templeData.endTime }}
|
||||||
</view>
|
</view>
|
||||||
<view class="hua">
|
<view class="hua">
|
||||||
<image src="https://api.ccttiot.com/smartmeter/img/static/uyz1LDPTjPqeOzBMjLZ7" mode=""></image>
|
<image src="https://api.ccttiot.com/smartmeter/img/static/uyz1LDPTjPqeOzBMjLZ7" mode=""></image>
|
||||||
|
|
@ -87,7 +87,7 @@
|
||||||
|
|
||||||
<script>
|
<script>
|
||||||
import { navigateToPage } from "../../utils/router.js";
|
import { navigateToPage } from "../../utils/router.js";
|
||||||
import { getHomeConfig } from "../../api/index/index.js";
|
import { getHomeConfig,getTempleIndex } from "../../api/index/index.js";
|
||||||
import { getArticleById } from "../../api/article/article.js";
|
import { getArticleById } from "../../api/article/article.js";
|
||||||
|
|
||||||
export default {
|
export default {
|
||||||
|
|
@ -113,42 +113,51 @@ import { getArticleById } from "../../api/article/article.js";
|
||||||
time: '',
|
time: '',
|
||||||
decorationImg: ''
|
decorationImg: ''
|
||||||
}
|
}
|
||||||
}
|
},
|
||||||
|
templeData: {
|
||||||
|
imgUrl: '',
|
||||||
|
bulletinContent: '',
|
||||||
|
startTime: '',
|
||||||
|
endTime: '',
|
||||||
|
audioUrl: ''
|
||||||
|
},
|
||||||
|
isAudioPlaying: false,
|
||||||
|
audioContext: null
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
onLoad() {
|
onLoad() {
|
||||||
// 页面加载时获取配置
|
// 页面加载时获取配置
|
||||||
this.loadHomeConfig();
|
this.loadHomeConfig();
|
||||||
|
// 获取寺庙数据
|
||||||
|
this.loadTempleData();
|
||||||
},
|
},
|
||||||
|
|
||||||
// 添加下拉刷新支持
|
// 添加下拉刷新支持
|
||||||
onPullDownRefresh() {
|
onPullDownRefresh() {
|
||||||
console.log('用户触发下拉刷新');
|
console.log('用户触发下拉刷新');
|
||||||
this.loadHomeConfig().finally(() => {
|
Promise.all([
|
||||||
|
this.loadHomeConfig(),
|
||||||
|
this.loadTempleData()
|
||||||
|
]).finally(() => {
|
||||||
uni.stopPullDownRefresh();
|
uni.stopPullDownRefresh();
|
||||||
});
|
});
|
||||||
},
|
},
|
||||||
onShow() {
|
onShow() {
|
||||||
// 如果配置已加载,启动跑马灯
|
// 启动跑马灯(方法内部会检查是否有文本)
|
||||||
if (this.pageConfig && this.pageConfig.announcement && this.pageConfig.announcement.text) {
|
|
||||||
this.startMarquee();
|
this.startMarquee();
|
||||||
}
|
|
||||||
},
|
},
|
||||||
onUnload() {
|
onUnload() {
|
||||||
this.stopMarquee();
|
this.stopMarquee();
|
||||||
|
// 停止音频播放
|
||||||
|
this.stopAudio();
|
||||||
},
|
},
|
||||||
methods: {
|
methods: {
|
||||||
/**
|
/**
|
||||||
* 获取首页配置
|
* 获取首页配置
|
||||||
*/
|
*/
|
||||||
async loadHomeConfig() {
|
async loadHomeConfig() {
|
||||||
// 添加调试信息
|
|
||||||
console.log('=== 开始获取首页配置 ===');
|
|
||||||
console.log('当前时间:', new Date().toISOString());
|
|
||||||
console.log('页面路径:', this.$mp?.page?.route || 'unknown');
|
|
||||||
|
|
||||||
this.loading = true;
|
|
||||||
console.log('开始获取首页配置...');
|
console.log('开始获取首页配置...');
|
||||||
|
this.loading = true;
|
||||||
|
|
||||||
// 重试机制
|
// 重试机制
|
||||||
const maxRetries = 3;
|
const maxRetries = 3;
|
||||||
|
|
@ -158,63 +167,12 @@ import { getArticleById } from "../../api/article/article.js";
|
||||||
try {
|
try {
|
||||||
console.log(`第 ${retryCount + 1} 次尝试获取配置...`);
|
console.log(`第 ${retryCount + 1} 次尝试获取配置...`);
|
||||||
|
|
||||||
// 检查网络状态
|
|
||||||
const isNetworkAvailable = await this.checkNetworkStatus();
|
|
||||||
if (!isNetworkAvailable) {
|
|
||||||
console.error('网络不可用,使用默认配置');
|
|
||||||
this.useDefaultConfig();
|
|
||||||
this.loading = false;
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
|
|
||||||
console.log('网络状态正常,开始请求API...');
|
|
||||||
const response = await getHomeConfig();
|
const response = await getHomeConfig();
|
||||||
console.log('API响应:', response);
|
console.log('API响应:', response);
|
||||||
|
|
||||||
// 检查响应状态
|
// 简化验证:只检查关键字段
|
||||||
if (!response) {
|
if (response?.code === 200 && response?.data?.[0]?.body) {
|
||||||
console.error('API响应为空');
|
const parsedConfig = JSON.parse(response.data[0].body);
|
||||||
throw new Error('API响应为空');
|
|
||||||
}
|
|
||||||
|
|
||||||
// 检查响应码
|
|
||||||
if (response.code !== 200) {
|
|
||||||
console.error('API响应码错误:', response.code, response.msg);
|
|
||||||
throw new Error(`API响应码错误: ${response.code}`);
|
|
||||||
}
|
|
||||||
|
|
||||||
// 检查数据是否存在
|
|
||||||
if (!response.data) {
|
|
||||||
console.error('API响应数据为空');
|
|
||||||
throw new Error('API响应数据为空');
|
|
||||||
}
|
|
||||||
|
|
||||||
// 检查数据是否为数组且有内容
|
|
||||||
if (!Array.isArray(response.data) || response.data.length === 0) {
|
|
||||||
console.error('API响应数据格式错误或为空数组');
|
|
||||||
throw new Error('API响应数据格式错误');
|
|
||||||
}
|
|
||||||
|
|
||||||
// 获取第一条配置数据
|
|
||||||
const configData = response.data[0];
|
|
||||||
console.log('配置数据:', configData);
|
|
||||||
|
|
||||||
// 检查body字段是否存在
|
|
||||||
if (!configData.body) {
|
|
||||||
console.error('配置数据缺少body字段');
|
|
||||||
throw new Error('配置数据缺少body字段');
|
|
||||||
}
|
|
||||||
|
|
||||||
// 解析JSON配置
|
|
||||||
try {
|
|
||||||
const parsedConfig = JSON.parse(configData.body);
|
|
||||||
console.log('解析后的配置数据:', parsedConfig);
|
|
||||||
|
|
||||||
// 验证配置数据完整性
|
|
||||||
if (!this.validateConfig(parsedConfig)) {
|
|
||||||
console.error('配置数据验证失败');
|
|
||||||
throw new Error('配置数据验证失败');
|
|
||||||
}
|
|
||||||
|
|
||||||
// 更新页面配置
|
// 更新页面配置
|
||||||
this.updatePageConfig(parsedConfig);
|
this.updatePageConfig(parsedConfig);
|
||||||
|
|
@ -224,38 +182,27 @@ import { getArticleById } from "../../api/article/article.js";
|
||||||
this.startMarquee();
|
this.startMarquee();
|
||||||
|
|
||||||
console.log('配置加载成功');
|
console.log('配置加载成功');
|
||||||
|
|
||||||
} catch (parseError) {
|
|
||||||
console.error('解析配置JSON失败:', parseError);
|
|
||||||
console.log('原始body数据:', configData.body);
|
|
||||||
throw new Error('解析配置JSON失败: ' + parseError.message);
|
|
||||||
}
|
|
||||||
|
|
||||||
// 如果成功获取到数据,跳出重试循环
|
|
||||||
break;
|
break;
|
||||||
|
} else {
|
||||||
|
throw new Error('API响应数据无效');
|
||||||
|
}
|
||||||
|
|
||||||
} catch (error) {
|
} catch (error) {
|
||||||
retryCount++;
|
retryCount++;
|
||||||
console.error(`第 ${retryCount} 次尝试失败:`, error);
|
console.error(`第 ${retryCount} 次尝试失败:`, error.message);
|
||||||
console.error('错误详情:', {
|
|
||||||
message: error.message,
|
|
||||||
stack: error.stack,
|
|
||||||
name: error.name
|
|
||||||
});
|
|
||||||
|
|
||||||
if (retryCount >= maxRetries) {
|
if (retryCount >= maxRetries) {
|
||||||
console.error('所有重试都失败了,使用默认配置');
|
console.error('所有重试都失败了');
|
||||||
this.useDefaultConfig();
|
this.useDefaultConfig();
|
||||||
break;
|
break;
|
||||||
} else {
|
} else {
|
||||||
console.log(`等待 ${retryCount * 1000}ms 后重试...`);
|
|
||||||
await new Promise(resolve => setTimeout(resolve, retryCount * 1000));
|
await new Promise(resolve => setTimeout(resolve, retryCount * 1000));
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
this.loading = false;
|
this.loading = false;
|
||||||
console.log('配置加载完成,loading状态:', this.loading);
|
console.log('配置加载完成');
|
||||||
},
|
},
|
||||||
|
|
||||||
/**
|
/**
|
||||||
|
|
@ -282,102 +229,74 @@ import { getArticleById } from "../../api/article/article.js";
|
||||||
});
|
});
|
||||||
},
|
},
|
||||||
|
|
||||||
/**
|
|
||||||
* 验证配置数据完整性
|
|
||||||
*/
|
|
||||||
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) {
|
updatePageConfig(parsedConfig) {
|
||||||
if (parsedConfig.pageConfig) {
|
// 直接更新配置,使用默认值防止undefined
|
||||||
this.pageConfig = parsedConfig.pageConfig;
|
this.pageConfig = parsedConfig.pageConfig || this.pageConfig;
|
||||||
console.log('更新pageConfig成功');
|
this.navigationItems = parsedConfig.navigationItems || [];
|
||||||
}
|
this.bottomSection = parsedConfig.bottomSection || this.bottomSection;
|
||||||
if (parsedConfig.navigationItems) {
|
console.log('配置更新完成');
|
||||||
this.navigationItems = parsedConfig.navigationItems;
|
|
||||||
console.log('更新navigationItems成功');
|
|
||||||
}
|
|
||||||
if (parsedConfig.bottomSection) {
|
|
||||||
this.bottomSection = parsedConfig.bottomSection;
|
|
||||||
console.log('更新bottomSection成功');
|
|
||||||
}
|
|
||||||
},
|
},
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* 检查网络状态
|
* 获取寺庙数据
|
||||||
*/
|
*/
|
||||||
checkNetworkStatus() {
|
async loadTempleData() {
|
||||||
return new Promise((resolve) => {
|
try {
|
||||||
uni.getNetworkType({
|
console.log('开始获取寺庙数据...');
|
||||||
success: (res) => {
|
const response = await getTempleIndex();
|
||||||
console.log('网络类型:', res.networkType);
|
console.log('寺庙数据API响应:', response);
|
||||||
if (res.networkType === 'none') {
|
|
||||||
console.error('网络连接不可用');
|
if (response?.code === 200 && response?.data) {
|
||||||
resolve(false);
|
this.templeData = {
|
||||||
|
imgUrl: response.data.imgUrl || '',
|
||||||
|
bulletinContent: response.data.bulletinContent || '',
|
||||||
|
startTime: response.data.startTime || '',
|
||||||
|
endTime: response.data.endTime || '',
|
||||||
|
audioUrl: response.data.audioUrl || ''
|
||||||
|
};
|
||||||
|
|
||||||
|
// 重新启动跑马灯
|
||||||
|
this.stopMarquee();
|
||||||
|
this.startMarquee();
|
||||||
|
|
||||||
|
console.log('寺庙数据加载成功');
|
||||||
} else {
|
} else {
|
||||||
resolve(true);
|
throw new Error('寺庙数据API响应无效');
|
||||||
}
|
}
|
||||||
},
|
} catch (error) {
|
||||||
fail: () => {
|
console.error('获取寺庙数据失败:', error);
|
||||||
console.error('获取网络状态失败');
|
uni.showToast({
|
||||||
resolve(false);
|
title: '获取寺庙数据失败',
|
||||||
|
icon: 'none'
|
||||||
|
});
|
||||||
}
|
}
|
||||||
});
|
|
||||||
});
|
|
||||||
},
|
},
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
startMarquee() {
|
startMarquee() {
|
||||||
// 确保配置数据存在
|
// 简单检查公告文本是否存在
|
||||||
if (!this.pageConfig || !this.pageConfig.announcement || !this.pageConfig.announcement.text) {
|
const announcementText = this.templeData?.bulletinContent || this.pageConfig?.announcement?.text;
|
||||||
console.warn('配置数据不完整,无法启动跑马灯');
|
if (!announcementText) {
|
||||||
return;
|
return;
|
||||||
}
|
}
|
||||||
|
|
||||||
// 停止之前的定时器
|
// 停止之前的定时器
|
||||||
this.stopMarquee();
|
this.stopMarquee();
|
||||||
|
|
||||||
// 估算文字宽度(每个字24rpx,可根据实际字体大小调整)
|
// 估算文字宽度(每个字24rpx)
|
||||||
const textWidth = this.pageConfig.announcement.text.length * 24;
|
const textWidth = announcementText.length * 24;
|
||||||
this.timer = setInterval(() => {
|
this.timer = setInterval(() => {
|
||||||
this.marqueeX--;
|
this.marqueeX--;
|
||||||
if (this.marqueeX < -textWidth) {
|
if (this.marqueeX < -textWidth) {
|
||||||
this.marqueeX = 600;
|
this.marqueeX = 600;
|
||||||
}
|
}
|
||||||
}, 16); // 约60帧
|
}, 16);
|
||||||
},
|
},
|
||||||
|
|
||||||
stopMarquee() {
|
stopMarquee() {
|
||||||
|
|
|
||||||
Loading…
Reference in New Issue
Block a user