buddhism/pages/nearbystores/index.vue

<template>
	<view class="page">
		<!-- 背景图 -->
        <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() {
				this.loading = true;
				try {
					const response = await getHomeConfig();
					
					if (response.code === 200 && response.data && response.data.length > 0) {
						// 获取第一条配置数据
						const configData = response.data[0];
						
						// 如果后端返回的数据包含body字段，解析JSON
						if (configData.body) {
							try {
								const parsedConfig = JSON.parse(configData.body);
								console.log('解析后的配置数据:', parsedConfig);
								
								// 更新页面配置
								if (parsedConfig.pageConfig) {
									this.pageConfig = parsedConfig.pageConfig;
								}
								if (parsedConfig.navigationItems) {
									this.navigationItems = parsedConfig.navigationItems;
								}
								if (parsedConfig.bottomSection) {
									this.bottomSection = parsedConfig.bottomSection;
								}
								
								// 重新启动跑马灯
								this.stopMarquee();
								this.startMarquee();
								
							} catch (parseError) {
								console.error('解析配置JSON失败:', parseError);
								console.log('原始body数据:', configData.body);
							}
						}
					} else {
						console.log('使用默认配置数据');
					}
				} catch (error) {
					console.error('获取首页配置失败:', error);
					console.log('使用默认配置数据');
				} finally {
					this.loading = 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;
	}
	
</style>