首页数据打包json,通过json渲染

api/index/index.js

@@ -0,0 +1,51 @@
+// 首页配置相关API
+import { request } from '@/utils/request'
+
+/**
+ * 获取首页配置
+ * @returns {Promise} 返回首页配置数据
+ */
+export function getHomeConfig() {
+  return request({
+    url: '/app/homeCfg',
+    method: 'GET'
+  })
+}
+
+/**
+ * 更新首页配置
+ * @param {Object} data - 首页配置数据
+ * @returns {Promise} 返回更新结果
+ */
+export function updateHomeConfig(data) {
+  return request({
+    url: '/app/homeCfg',
+    method: 'PUT',
+    data
+  })
+}
+
+/**
+ * 创建首页配置
+ * @param {Object} data - 首页配置数据
+ * @returns {Promise} 返回创建结果
+ */
+export function createHomeConfig(data) {
+  return request({
+    url: '/app/homeCfg',
+    method: 'POST',
+    data
+  })
+}
+
+/**
+ * 删除首页配置
+ * @param {string} id - 配置ID
+ * @returns {Promise} 返回删除结果
+ */
+export function deleteHomeConfig(id) {
+  return request({
+    url: `/app/homeCfg/${id}`,
+    method: 'DELETE'
+  })
+}

enum/navigationData.json

@@ -0,0 +1,97 @@
+{
+  "pageConfig": {
+    "background": {
+      "img": "https://api.ccttiot.com/smartmeter/img/static/uz3vQk44WkGnJPVjKrw1"
+    },
+    "announcement": {
+      "icon": "https://api.ccttiot.com/smartmeter/img/static/uIm0UpcFxyLwYpwCIVcg",
+      "text": "为保障广大善信的出行安全，营造有序、庄严的朝堂之上，不得懈怠神明"
+    },
+    "topIcons": {
+      "leftIcon": {
+        "hidden": true,
+        "img": "https://api.ccttiot.com/smartmeter/img/static/uEC23p8oHigfvliOKvkL"
+      },
+      "rightIcon": {
+        "img": "https://api.ccttiot.com/smartmeter/img/static/u0xTi5R31GxYwd7WxRhy"
+      },
+      "bottomIcon": {
+        "img": "https://api.ccttiot.com/image-1753692152175.png"
+      }
+    }
+  },
+  "navigationItems": [
+    {
+      "id": "walkInto",
+      "img": "https://api.ccttiot.com/smartmeter/img/static/uET6o6pB2IDzfJb4BCv3",
+      "title": "走进平山",
+      "subtitle": "WALK INTO PINGSHAN",
+      "page": "walkInto"
+    },
+    {
+      "id": "institutionalStructure",
+      "img": "https://api.ccttiot.com/smartmeter/img/static/uOOpKw4AVVYPpvpcqmrZ",
+      "title": "寺庙建制",
+      "subtitle": "TEMPLE INSTITUTIONAL STRUCTURE",
+      "page": "institutionalStructure"
+    },
+    {
+      "id": "abbot",
+      "img": "https://api.ccttiot.com/smartmeter/img/static/utmlRwjQwf73DjXntneL",
+      "title": "主持法师",
+      "subtitle": "ABBOT MASTER",
+      "page": "abbot"
+    },
+    {
+      "id": "ancient",
+      "img": "https://api.ccttiot.com/smartmeter/img/static/upCsFSxrBjwmeX6f3ykL",
+      "title": "古刹巡礼",
+      "subtitle": "ATOUR OF ANCIENT TEMPLE",
+      "page": "ancient"
+    },
+    {
+      "id": "monk",
+      "img": "https://api.ccttiot.com/image-1753687164375.png",
+      "title": "寺庙高僧",
+      "subtitle": "VENERABLE MONK IN THE TEMPLE",
+      "page": "monk"
+    },
+    {
+      "id": "activity",
+      "img": "https://api.ccttiot.com/image-1753691910959.png",
+      "title": "活动预告",
+      "subtitle": "ACTIVITY NOTICE",
+      "page": "activity"
+    },
+    {
+      "id": "news",
+      "img": "https://api.ccttiot.com/image-1753691974607.png",
+      "title": "新闻动态",
+      "subtitle": "DYNAMICS",
+      "page": "news"
+    },
+    {
+      "id": "future",
+      "img": "https://api.ccttiot.com/image-1753854286566.png",
+      "title": "未来规划",
+      "subtitle": "FUTURE PLANNING",
+      "page": "future"
+    }
+  ],
+  "bottomSection": {
+    "openingTime": {
+      "title": "寺庙开放时间",
+      "time": "08:00~18:00",
+      "decorationImg": "https://api.ccttiot.com/smartmeter/img/static/ugNHTwXFgOT8JGofruez"
+    },
+    "prayerSection": {
+      "backgroundImg": "https://api.ccttiot.com/smartmeter/img/static/ucPuJT9zaH3VSoWzGwSE",
+      "title": "日行一善",
+      "prayerButton": {
+        "icon": "https://api.ccttiot.com/smartmeter/img/static/u9muibj6c472a87zd6tp",
+        "title": "在线祈福",
+        "subtitle": "ONLINE PRAYER"
+      }
+    }
+  }
+}

pages/nearbystores/index.vue

@@ -1,129 +1,68 @@
 <template>
 	<view class="page">
 		<!-- 背景图 -->
-        <image class="bj" src="https://api.ccttiot.com/smartmeter/img/static/uz3vQk44WkGnJPVjKrw1" mode="aspectFill"></image>
+        <image class="bj" :src="pageConfig.background.img" mode="aspectFill"></image>
 		<!-- 公告 -->
 		<view class="announcement">
-			<image class="ggimg" src="https://api.ccttiot.com/smartmeter/img/static/uIm0UpcFxyLwYpwCIVcg" mode="" />
+			<image class="ggimg" :src="pageConfig.announcement.icon" mode="" />
 			<view class="marquee-wrap">
 				<view class="marquee" :style="{ transform: `translateX(${marqueeX}rpx)` }">
-					{{ marqueeText }}
+					{{ pageConfig.announcement.text }}
 				</view>
 			</view>
 		</view>
 		<!-- 右侧图标 -->
 		<view class="tubiao">
-			<view class="tubiao-item">
+			<view class="">
-				<image v-if="false" src="https://api.ccttiot.com/smartmeter/img/static/uEC23p8oHigfvliOKvkL" mode=""></image>
+				<image v-if="pageConfig.topIcons.leftIcon.hidden" :src="pageConfig.topIcons.leftIcon.img" mode=""></image>
-				<image src="https://api.ccttiot.com/smartmeter/img/static/u0xTi5R31GxYwd7WxRhy" mode=""></image>
+				<image :src="pageConfig.topIcons.rightIcon.img" mode=""></image>
 			</view>
 			<view class="tubiao-item">
-				<image src="https://api.ccttiot.com/image-1753692152175.png" mode=""></image>
+				<image :src="pageConfig.topIcons.bottomIcon.img" mode=""></image>
 			</view>
 		</view>
 		<!-- 底部 -->
 		<view class="bot">
-      <view class="list">
-        <view class="li" @click="navigateToPage('monk')">
-          <image :src="NearbyImageEnum().MONK" mode=""></image>
-          <view class="da">
-            寺庙高僧
-          </view>
-          <view class="xiao">
-            VENERABLE MONK IN THE TEMPLE
-          </view>
-        </view>
-        <view class="li" @click="navigateToPage('activity')">
-          <image :src="NearbyImageEnum().ACTIVITY" mode=""></image>
-          <view class="da">
-            活动预告
-          </view>
-          <view class="xiao">
-            ACTIVITY NOTICE
-          </view>
-        </view>
-        <view class="li" @click="navigateToPage('news')">
-          <image :src="NearbyImageEnum().NEW" mode=""></image>
-          <view class="da">
-            新闻动态
-          </view>
-          <view class="xiao">
-            DYNAMICS
-          </view>
-        </view>
-        <view class="li" @click="navigateToPage('future')">
-          <image :src="NearbyImageEnum().FUTURE" mode=""></image>
-          <view class="da">
-            未来规划
-          </view>
-          <view class="xiao">
-            FUTURE PLANNING
-          </view>
-        </view>
-        <view class="li">
-        </view>
-      </view>
-
 			<view class="name">
-			       <image src="https://api.ccttiot.com/smartmeter/img/static/ugNHTwXFgOT8JGofruez" mode=""></image>	<text>寺庙开放时间</text>  <image src="https://api.ccttiot.com/smartmeter/img/static/ugNHTwXFgOT8JGofruez" mode=""></image>
+			       <image :src="bottomSection.openingTime.decorationImg" mode=""></image>	<text>{{ bottomSection.openingTime.title }}</text>  <image :src="bottomSection.openingTime.decorationImg" mode=""></image>
 			</view>
 			<view class="time">
-				08:00~18:00
+				{{ bottomSection.openingTime.time }}
 			</view>
 			<view class="hua">
 				<image src="https://api.ccttiot.com/smartmeter/img/static/uyz1LDPTjPqeOzBMjLZ7" mode=""></image>
 			</view>
-			<view class="list">
+              <view class="list-scroll">
-				<view class="li" @click="navigateToPage('walkInto')">
+          <view class="list">
-					<image :src="NearbyImageEnum().WALK" mode=""></image>
+            <view 
-					<view class="da">
+              class="li" 
-						走进平山
+              v-for="item in navigationItems" 
-					</view>
+              :key="item.id"
-					<view class="xiao">
+              @click="navigateToPage(item.page)"
-						WALK INTO PINGSHAN
+            >
-					</view>
+              <image :src="item.img" mode=""></image>
-				</view>
+              <view class="da">
-				<view class="li" @click="navigateToPage('institutionalStructure')">
+                {{ item.title }}
-					<image :src="NearbyImageEnum().INSTITUTION" mode=""></image>
+              </view>
-					<view class="da">
+              <view class="xiao">
-						寺庙建制
+                {{ item.subtitle }}
-					</view>
+              </view>
-					<view class="xiao">
+            </view>
-						TEMPLE INSTITUTIONAL STRUCTURE
+          </view>
-					</view>
-				</view>
-				<view class="li" @click="navigateToPage('abbot')">
-					<image :src="NearbyImageEnum().ABBOT" mode=""></image>
-					<view class="da">
-						主持法师
-					</view>
-					<view class="xiao">
-						ABBOT MASTER
-					</view>
-				</view>
-				<view class="li" @click="navigateToPage('ancient')">
-					<image :src="NearbyImageEnum().ANCIENT" mode=""></image>
-					<view class="da">
-						古刹巡礼
-					</view>
-					<view class="xiao">
-						ATOUR OF ANCIENT TEMPLE
-					</view>
-				</view>
 			</view>
 			<view class="bottom">
-				<image src="https://api.ccttiot.com/smartmeter/img/static/ucPuJT9zaH3VSoWzGwSE" mode=""></image>
+				<image :src="bottomSection.prayerSection.backgroundImg" mode=""></image>
 				<view class="rixing">
-					日行一善
+					{{ bottomSection.prayerSection.title }}
 				</view>
 				<view class="qifu">
-					<image src="https://api.ccttiot.com/smartmeter/img/static/u9muibj6c472a87zd6tp" mode=""></image>
+					<image :src="bottomSection.prayerSection.prayerButton.icon" mode=""></image>
 					<view class="zaixian">
 						<view class="da">
-							在线祈福
+							{{ bottomSection.prayerSection.prayerButton.title }}
 						</view>
 						<view class="xiao">
-							ONLINE PRAYER
+							{{ bottomSection.prayerSection.prayerButton.subtitle }}
 						</view>
 					</view>
 				</view>
@@ -134,30 +73,97 @@
 </template>
 
 <script>
-import NearbyImageEnum from "../../enum/nearbyEnum";
+import navigationData from "../../enum/navigationData.json";
 import { navigateToPage } from "../../utils/router.js";
+import { getHomeConfig } from "../../api/index/index.js";
 
 	export default {
 		data() {
 			return {
-				marqueeText: '为保障广大善信的出行安全，营造有序、庄严的朝堂之上，不得懈怠神明',
 				marqueeX: '', // 初始位置，和marquee-wrap宽度一致
-				timer: null
+				timer: null,
+				loading: false,
+				// 默认配置，如果API获取失败则使用本地配置
+				pageConfig: navigationData.pageConfig,
+				navigationItems: navigationData.navigationItems,
+				bottomSection: navigationData.bottomSection
 			}
 		},
-		mounted() {
+		onLoad() {
-			this.startMarquee();
+			// 页面加载时获取配置
+			this.loadHomeConfig();
 		},
-		beforeDestroy() {
+		onShow() {
-			clearInterval(this.timer);
+			// 如果配置已加载，启动跑马灯
+			if (this.pageConfig && this.pageConfig.announcement) {
+				this.startMarquee();
+			}
+		},
+		onUnload() {
+			this.stopMarquee();
 		},
 		methods: {
-      NearbyImageEnum() {
+			/**
-        return NearbyImageEnum
+			 * 获取首页配置
-      },
+			 */
+			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.marqueeText.length * 24;
+				const textWidth = this.pageConfig.announcement.text.length * 24;
 				this.timer = setInterval(() => {
 					this.marqueeX--;
 					if (this.marqueeX < -textWidth) {
@@ -165,6 +171,14 @@ import { navigateToPage } from "../../utils/router.js";
 					}
 				}, 16); // 约60帧
 			},
+			
+			stopMarquee() {
+				if (this.timer) {
+					clearInterval(this.timer);
+					this.timer = null;
+				}
+			},
+			
 			// 页面跳转方法 - 使用路由仓库
 			navigateToPage(pageType) {
 				navigateToPage(pageType);
@@ -177,30 +191,15 @@ import { navigateToPage } from "../../utils/router.js";
 	page {
 		background-color: #fff;
 	}
-	.page {
-		/* H5环境下的优化 */
-		/* #ifdef H5 */
-		position: relative;
-		z-index: 1;
-		/* #endif */
-	}
-	.bj{
-		width: 100%;
-		height: 100vh;
-		position: fixed;
-		top: 0;
-		left: 0;
-		z-index: -1;
-		/* H5环境下的背景优化 */
-		/* #ifdef H5 */
-		object-fit: cover;
-		/* #endif */
-	}
 	.bot{
 		position: fixed;
 		left: 50%;
 		transform: translateX(-50%);
 		bottom: 56rpx;
+		width: 100%;
+		max-width: 750rpx;
+		/* 确保不会限制子元素的滚动 */
+		overflow: visible;
 		.bottom{
 			margin-top: 64rpx;
 			display: flex;
@@ -250,15 +249,35 @@ import { navigateToPage } from "../../utils/router.js";
 				}
 			}
 		}
+		.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;
-			justify-content: space-between;
+			width: 1600rpx; /* 更大的宽度确保滚动 */
-			padding: 0 40rpx;
+			padding: 0 20rpx;
 			box-sizing: border-box;
-			margin-top: 20rpx;
+			/* 确保内容不被压缩 */
+			flex-shrink: 0;
 			.li{
 				width: 150rpx;
+				flex: 0 0 150rpx;
 				text-align: center;
+				margin-right: 20rpx;
 				image{
 					width: 56rpx;
 					height: 56rpx;
@@ -315,16 +334,6 @@ import { navigateToPage } from "../../utils/router.js";
 		padding: 0 30rpx;
 		box-sizing: border-box;
 		justify-content: space-between;
-		/* H5环境下的透明度和触摸优化 */
-		/* #ifdef H5 */
-		background: transparent;
-		pointer-events: none;
-		/* #endif */
-		.tubiao-item {
-			/* #ifdef H5 */
-			pointer-events: auto;
-			/* #endif */
-		}
 		image{
 			width: 82rpx;
 			height: 82rpx;
@@ -340,11 +349,6 @@ import { navigateToPage } from "../../utils/router.js";
 		display: flex;
 		align-items: center;
 		white-space: nowrap;
-		/* H5环境下的透明度和触摸优化 */
-		/* #ifdef H5 */
-		background: transparent;
-		pointer-events: none;
-		/* #endif */
 		.ggimg {
 			width: 32rpx;
 			height: 32rpx;
@@ -367,8 +371,13 @@ import { navigateToPage } from "../../utils/router.js";
 			color: #522510;
 		}
 	}
-	.bot .list .li image {
+    .bj{
-  width: 56rpx;
+		width: 100%;
-  height: 56rpx;
+		height: 100vh;
-}
+		position: fixed;
+		top: 0;
+		left: 0;
+		z-index: -1;
+	}
+	
 </style>