buddhism/pages/nearbystores/index.vue

<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>
		<!-- 公告 -->
		<view class="announcement">
			<image class="ggimg" :src="pageConfig.announcement.icon" mode="" />
			<view class="marquee-wrap">
				<view class="marquee" :style="{ transform: `translateX(${marqueeX}rpx)` }">
					{{ pageConfig.announcement.text }}
				</view>
			</view>
		</view>
		<!-- 右侧图标 -->
		<view class="tubiao">
			<view class="">
				<image v-if="pageConfig.topIcons.leftIcon.hidden" :src="pageConfig.topIcons.leftIcon.img" mode=""></image>
				<image :src="pageConfig.topIcons.rightIcon.img" mode=""></image>
			</view>
			<view class="tubiao-item">
				<image :src="pageConfig.topIcons.bottomIcon.img" mode=""></image>
			</view>
		</view>
		<!-- 底部 -->
		<view class="bot">
			<view class="name">
			       <image :src="bottomSection.openingTime.decorationImg" mode=""></image>	<text>{{ bottomSection.openingTime.title }}</text>  <image :src="bottomSection.openingTime.decorationImg" mode=""></image>
			</view>
			<view class="time">
				{{ bottomSection.openingTime.time }}
			</view>
			<view class="hua">
				<image src="https://api.ccttiot.com/smartmeter/img/static/uyz1LDPTjPqeOzBMjLZ7" mode=""></image>
			</view>
              <view class="list-scroll">
          <view class="list">
            <view 
              class="li" 
              v-for="item in navigationItems" 
              :key="item.id"
              @click="navigateToPage(item.page)"
            >
              <image :src="item.img" mode=""></image>
              <view class="da">
                {{ item.title }}
              </view>
              <view class="xiao">
                {{ item.subtitle }}
              </view>
            </view>
          </view>
			</view>
			<view class="bottom">
				<image :src="bottomSection.prayerSection.backgroundImg" mode=""></image>
				<view class="rixing">
					{{ bottomSection.prayerSection.title }}
				</view>
				<view class="qifu">
					<image :src="bottomSection.prayerSection.prayerButton.icon" mode=""></image>
					<view class="zaixian">
						<view class="da">
							{{ bottomSection.prayerSection.prayerButton.title }}
						</view>
						<view class="xiao">
							{{ bottomSection.prayerSection.prayerButton.subtitle }}
						</view>
					</view>
				</view>
			</view>
		</view>
	</view>
	
</template>

<script>
import navigationData from "../../enum/navigationData.json";
import { navigateToPage } from "../../utils/router.js";
import { getHomeConfig } from "../../api/index/index.js";

	export default {
		data() {
			return {
				marqueeX: '', // 初始位置，和marquee-wrap宽度一致
				timer: null,
				loading: false,
				// 默认配置，如果API获取失败则使用本地配置
				pageConfig: navigationData.pageConfig,
				navigationItems: navigationData.navigationItems,
				bottomSection: navigationData.bottomSection
			}
		},
		onLoad() {
			// 页面加载时获取配置
			this.loadHomeConfig();
		},
		onShow() {
			// 如果配置已加载，启动跑马灯
			if (this.pageConfig && this.pageConfig.announcement) {
				this.startMarquee();
			}
		},
		onUnload() {
			this.stopMarquee();
		},
		methods: {
			/**
			 * 获取首页配置
			 */
			async loadHomeConfig() {
				// 添加调试信息
				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;
					}
					
					// 获取第一条配置数据
					const configData = response.data[0];
					console.log('配置数据:', configData);
					
					// 检查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;
						}
						
						// 更新页面配置
						this.updatePageConfig(parsedConfig);
						
						// 重新启动跑马灯
						this.stopMarquee();
						this.startMarquee();
						
						console.log('配置加载成功');
						
					} catch (parseError) {
						console.error('解析配置JSON失败:', parseError);
						console.log('原始body数据:', configData.body);
						this.useDefaultConfig();
					}
					
						// 如果成功获取到数据，跳出重试循环
						break;
						
					} catch (error) {
						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() {
				// 确保配置数据存在
				if (!this.pageConfig || !this.pageConfig.announcement || !this.pageConfig.announcement.text) {
					console.warn('配置数据不完整，无法启动跑马灯');
					return;
				}
				
				// 停止之前的定时器
				this.stopMarquee();
				
				// 估算文字宽度（每个字24rpx，可根据实际字体大小调整）
				const textWidth = this.pageConfig.announcement.text.length * 24;
				this.timer = setInterval(() => {
					this.marqueeX--;
					if (this.marqueeX < -textWidth) {
						this.marqueeX = 600;
					}
				}, 16); // 约60帧
			},
			
			stopMarquee() {
				if (this.timer) {
					clearInterval(this.timer);
					this.timer = null;
				}
			},
			
			// 页面跳转方法 - 使用路由仓库
			navigateToPage(pageType) {
				navigateToPage(pageType);
			}
		}
	}
</script>

<style lang="scss">
	page {
		background-color: #fff;
	}
	.bot{
		position: fixed;
		left: 50%;
		transform: translateX(-50%);
		bottom: 56rpx;
		width: 100%;
		max-width: 750rpx;
		/* 确保不会限制子元素的滚动 */
		overflow: visible;
		.bottom{
			margin-top: 64rpx;
			display: flex;
			padding: 0 118rpx;
			box-sizing: border-box;
			image{
				width: 64rpx;
				height: 64rpx;
			}
			.rixing{
				width: 206rpx;
				height: 64rpx;
				background: #522510;
				border-radius: 45rpx 45rpx 45rpx 45rpx;
				text-align: center;
				line-height: 64rpx;
				font-weight: 600;
				font-size: 24rpx;
				color: #FFFFFF;
				border-radius: 50rpx;
				margin-left: 26rpx;
				margin-right: 26rpx;
			}
			.qifu{
				width: 194rpx;
				height: 64rpx;
				border-radius: 41rpx 41rpx 41rpx 41rpx;
				border: 1rpx solid #522510;
				display: flex;
				align-items: center;
				justify-content: center;
				image{
					width: 32rpx;
					height: 32rpx;
				}
				.zaixian{
					margin-left: 12rpx;
					.da{
						font-size: 24rpx;
						color: #522510;
						font-weight: 600;
					}
					.xiao{
						font-size: 12rpx;
						color: #522510;
					}
				}
			}
		}
		.list-scroll {
			width: 100%;
			margin-top: 20rpx;
			height: 120rpx;
			overflow-x: auto;
			overflow-y: hidden;
			-webkit-overflow-scrolling: touch;
			/* 确保滚动容器不被父元素限制 */
			position: relative;
			z-index: 1;
			/* 隐藏滚动条 */
			scrollbar-width: none;
			-ms-overflow-style: none;
			&::-webkit-scrollbar {
				display: none;
			}
		}
		.list{
			display: flex;
			width: 1600rpx; /* 更大的宽度确保滚动 */
			padding: 0 20rpx;
			box-sizing: border-box;
			/* 确保内容不被压缩 */
			flex-shrink: 0;
			.li{
				width: 150rpx;
				flex: 0 0 150rpx;
				text-align: center;
				margin-right: 20rpx;
				image{
					width: 56rpx;
					height: 56rpx;
				}
				.da{
					font-size: 24rpx;
					color: #522510;
					margin-top: 8rpx;
				}
				.xiao{
					font-size: 12rpx;
					color: #522510;
				}
			}
		}
		.hua{
			width: 100%;
			text-align: center;
			margin-top: 30rpx;
			image{
				width: 656rpx;
				height: 108rpx;
			}
		}
		.time{
			font-weight: 600;
			font-size: 32rpx;
			color: #522510;
			margin-top: 8rpx;
			width: 100%;
			text-align: center;
		}
		.name{
			display: flex;
			align-items: center;
			width: 100%;
			justify-content: center;
			text{
				font-weight: 600;
				font-size: 32rpx;
				color: #522510;
				margin-left: 24rpx;
				margin-right: 24rpx;
			}
			image{
				width: 12rpx;
				height: 12rpx;
			}
		}
	}
	.tubiao{
		width: 100%;
		display: flex;
		padding: 0 30rpx;
		box-sizing: border-box;
		justify-content: space-between;
		image{
			width: 82rpx;
			height: 82rpx;
			display: block;
			margin-top: 50rpx;
		}
	}
	.announcement {
		width: 100%;
		margin-top: 184rpx;
		padding: 0 48rpx;
		box-sizing: border-box;
		display: flex;
		align-items: center;
		white-space: nowrap;
		.ggimg {
			width: 32rpx;
			height: 32rpx;
			margin-right: 14rpx;
		}
		.marquee-wrap {
			width: 600rpx;
			overflow: hidden;
			position: relative;
			height: 32rpx;
			display: flex;
			align-items: center;
		}
		.marquee {
			white-space: nowrap;
			position: absolute;
			left: 0;
			top: 0;
			font-size: 24rpx;
			color: #522510;
		}
	}
    	.bj{
		width: 100%;
		height: 100vh;
		position: fixed;
		top: 0;
		left: 0;
		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>