WindowBird/buddhism
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

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

Browse Source
This commit is contained in:
minimaxagent1 2025-08-01 17:35:40 +08:00
parent 4bd881de4b
commit 63e381de54
3 changed files with 301 additions and 144 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

51
api/index/index.js Normal file
View File

@ -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'
})
}

97
enum/navigationData.json Normal file
View File

@ -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"
}
}
}
}

297
pages/nearbystores/index.vue
View File

@ -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">
<image v-if="false" src="https://api.ccttiot.com/smartmeter/img/static/uEC23p8oHigfvliOKvkL" mode=""></image>
<image src="https://api.ccttiot.com/smartmeter/img/static/u0xTi5R31GxYwd7WxRhy" mode=""></image>
<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="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="li" @click="navigateToPage('walkInto')">
<image :src="NearbyImageEnum().WALK" mode=""></image>
<view class="da">
走进平山
</view>
<view class="xiao">
WALK INTO PINGSHAN
</view>
</view>
<view class="li" @click="navigateToPage('institutionalStructure')">
<image :src="NearbyImageEnum().INSTITUTION" mode=""></image>
<view class="da">
寺庙建制
</view>
<view class="xiao">
TEMPLE INSTITUTIONAL STRUCTURE
</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 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="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() {
this.startMarquee();
onLoad() {
// 页面加载时获取配置
this.loadHomeConfig();
},
beforeDestroy() {
clearInterval(this.timer);
onShow() {
// 如果配置已加载，启动跑马灯
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;
padding: 0 40rpx;
width: 1600rpx; /* 更大的宽度确保滚动 */
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 {
width: 56rpx;
height: 56rpx;
}
.bj{
width: 100%;
height: 100vh;
position: fixed;
top: 0;
left: 0;
z-index: -1;
}
</style>