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

walkInto界面设计1.0

Browse Source
This commit is contained in:
minimaxagent1 2025-08-02 17:35:47 +08:00
parent 94fbb27d68
commit 2ef461a21d
6 changed files with 306 additions and 26 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

13
api/index/index.js
View File

@ -1,5 +1,16 @@
// 首页配置相关API
import { get } from '@/utils/request'
import { get, request } from '@/utils/request'
/**
* 获取寺庙介绍信息
* @returns {Promise} 返回寺庙介绍数据
*/
export function getTempleInfo() {
return get('/app/temple/introduced', {}, {
timeout: 10000,
showLoading: false
})
}
/**
* 获取首页配置

12
api/walkInto/walkInto.js Normal file
View File

@ -0,0 +1,12 @@
import { get } from '@/utils/request'
/**
* 获取寺庙介绍信息
* @returns {Promise} 返回寺庙介绍数据
*/
export function getTempleInfo() {
return get('/app/temple/introduced', {}, {
timeout: 10000,
showLoading: false
})
}

3
enum/common.js
View File

@ -7,7 +7,8 @@ export const CommonEnum = {
SEARCH: "https://api.ccttiot.com/image-1753769500465.png", //通用搜索图标
TILE: "https://api.ccttiot.com/image-1753750309203.png", //瓦片图片
FILTER: "https://api.ccttiot.com/image-1753954149098.png", //筛选图标
REFRESH:"https://api.ccttiot.com/%E5%AE%B9%E5%99%A8-1754011714179.png" //刷新图标
REFRESH:"https://api.ccttiot.com/%E5%AE%B9%E5%99%A8-1754011714179.png", //刷新图标
NAV_ARROW:"https://api.ccttiot.com/image-1754127104177.png" //导航箭头
};
export default CommonEnum;

9
pages.json
View File

@ -109,6 +109,15 @@
"enablePullDownRefresh": false,
"navigationStyle": "custom"
}
},
{
"path" : "pages/basePage/basePagePicture",
"style" :
{
"navigationBarTitleText": "",
"enablePullDownRefresh": false,
"navigationStyle": "custom"
}
}
],

105
pages/basePage/basePagePicture.vue Normal file
View File

@ -0,0 +1,105 @@
<template>
<view class="page">
<base-background />
<!-- 使用自定义导航栏组件 -->
<custom-navbar title="寺庙高僧" />
<view class="header" :style="{ backgroundColor: CommonEnum.BASE_COLOR }">
<!-- 状态展示 -->
<status-display
v-if="loading"
type="loading"
loading-text="加载中..."
/>
<!-- 页面内容将在这里添加 -->
</view>
</view>
</template>
<script>
import {
CommonEnum
} from '@/enum/common.js'
import {
MonkEnum
} from '@/enum/monk.js'
import {
getMonkList
} from '@/api/monk/monk.js'
import CustomNavbar from "../../components/custom-navbar/custom-navbar.vue";
import BaseBackground from "../../components/base-background/base-background.vue";
import SearchBox from "../../components/search-box/search-box.vue";
import StatusDisplay from "../../components/status-display/status-display.vue";
export default {
components: {
StatusDisplay,
CustomNavbar,
BaseBackground,
MonkSearchBox: SearchBox
},
data() {
return {
bgc: {
backgroundColor: "#F5F0E7"
},
CommonEnum,
MonkEnum,
monkList: [],
searchName: ''
}
},
onLoad() {
this.fetchMonkList()
},
methods: {
async fetchMonkList() {
try {
const res = await getMonkList({ name: this.searchName })
if (res.code === 200 && Array.isArray(res.rows)) {
this.monkList = res.rows
} else {
uni.showToast({
title: res.msg || '获取失败',
icon: 'none'
})
}
} catch (e) {
uni.showToast({
title: '网络错误',
icon: 'none'
})
}
},
// 去除 HTML 标签，返回纯文本
stripHtmlTags(html) {
if (!html) return ''; // 处理空值
return html.replace(/<[^>]+>/g, ''); // 正则替换所有 HTML 标签
},
}
}
</script>
<style lang="scss">
.page {
width: 100%;
min-height: 100vh;
background: transparent;
border-radius: 0rpx 0rpx 0rpx 0rpx;
/* 移除padding-top，因为导航栏已经处理了状态栏适配 */
}
.header {
width: 100%;
min-height: 100vh;
display: flex;
align-items: flex-start;
flex-direction: column;
padding: 0 15rpx;
padding-bottom: 40rpx;
}
</style>

190
pages/walkInto/walkInto.vue
View File

@ -1,20 +1,36 @@
<template>
<view class="page">
<!-- 自定义导航栏 -->
<custom-navbar
title="走进平山"
/>
<view class="header">
<!-- <image src="" mode=""></image> -->
<view>111222</view>
<!-- 使用自定义导航栏组件 -->
<custom-navbar title="走进平山" />
<view class="header" :style="{ backgroundColor: CommonEnum.BASE_COLOR }">
<image class="temple-image" :src="templeInfo.imgUrl" mode="aspectFill"></image>
<view class="temple-info">
<text class="temple-desc">{{ stripHtmlTags(templeInfo.content) || '暂无描述' }}</text>
</view>
<!-- 联系信息区域 -->
<view class="contact-info" v-if="templeInfo.phone || templeInfo.address">
<view class="contact-item" v-if="templeInfo.phone">
<text class="contact-label">电话：</text>
<text class="contact-value">{{ templeInfo.phone }}</text>
</view>
<view class="contact-item" v-if="templeInfo.address">
<text class="contact-label">地址：</text>
<text class="contact-value">{{ templeInfo.address }}</text>
</view>
</view>
</view>
</view>
</template>
<script>
import {
CommonEnum
} from '@/enum/common.js'
import {
getTempleInfo
} from '@/api/walkInto/walkInto.js'
import CustomNavbar from "../../components/custom-navbar/custom-navbar.vue";
import CommonEnum from "../../enum/common";
export default {
components: {
@ -23,36 +39,162 @@ export default {
data() {
return {
CommonEnum,
bgc: {
backgroundColor: CommonEnum.BASE_COLOR,
templeInfo: {
id: '',
name: '',
title: '',
content: '',
imgUrl: '',
address: '',
phone: '',
startTime: '',
endTime: ''
},
loading: false
}
},
onLoad() {
this.fetchTempleInfo()
},
methods: {
// 如果需要自定义返回逻辑，可以添加 @back 事件监听
async fetchTempleInfo() {
try {
this.loading = true
const res = await getTempleInfo()
if (res.code === 200 && res.data) {
this.templeInfo = res.data
} else {
uni.showToast({
title: res.msg || '获取寺庙信息失败',
icon: 'none'
})
}
} catch (e) {
console.error('获取寺庙信息失败:', e)
uni.showToast({
title: '网络错误',
icon: 'none'
})
} finally {
this.loading = false
}
},
// 去除 HTML 标签，返回纯文本，并根据空格进行换行
stripHtmlTags(html) {
if (!html) return ''; // 处理空值
// 先去除HTML标签
let text = html.replace(/<[^>]+>/g, '');
// 解码HTML实体
text = text.replace(/&nbsp;/g, ' ');
text = text.replace(/&amp;/g, '&');
text = text.replace(/&lt;/g, '<');
text = text.replace(/&gt;/g, '>');
text = text.replace(/&quot;/g, '"');
// 根据空格进行换行处理
// 将连续的空格替换为换行符
text = text.replace(/\s{2,}/g, '\n');
// 处理段落开头的空格
text = text.replace(/^\s+/gm, '');
// 去除多余的空行
text = text.replace(/\n\s*\n/g, '\n');
// 为每个段落添加缩进（在每行开头添加两个空格）
text = text.replace(/^/gm, ' ');
// 移除内容末尾的联系信息（因为我们在单独的区域显示）
text = text.replace(/电话：.*$/gm, '');
text = text.replace(/地址：.*$/gm, '');
return text.trim();
},
}
}
</script>
<style lang="scss">
page {
width: 750rpx;
height: 2492rpx;
background: v-bind('CommonEnum.BASE_COLOR');
border-radius: 0rpx 0rpx 0rpx 0rpx;
.page {
background: #F5F0E7;
width: 100%;
min-height: 100vh;
flex-direction: column;
align-items: center;
}
.header {
margin: 26rpx 28rpx;
min-height: 100vh;
display: flex;
align-items: flex-start;
flex-direction: column;
background-color: #FFFBF5;
margin: 20px 14px 40rpx 14px;
width: 694rpx;
background: #FFFBF5;
padding: 0 15rpx;
padding-bottom: rpx;
border-radius: 16rpx 16rpx 16rpx 16rpx;
}
.temple-image {
width: 610rpx;
height: 324rpx;
background: #D8D8D8; /* 灰色占位背景 */
border-radius: 12rpx 12rpx 12rpx 12rpx;
display: block;
margin: 34rpx auto;
object-fit: cover;
}
.temple-info {
width: 100%;
padding: 24rpx 42rpx;
border-radius: 20rpx 20rpx 20rpx 20rpx;
}
.temple-desc {
display: block;
font-weight: 400;
font-size: 28rpx;
color: #522510;
line-height: 45rpx;
text-align: left;
font-style: normal;
text-transform: none;
white-space: pre-line; /* 保留换行符 */
word-wrap: break-word; /* 长单词换行 */
}
/* 联系信息样式 */
.contact-info {
margin-top: 40rpx;
padding: 30rpx;
border-radius: 16rpx;
}
.contact-item {
display: flex;
align-items: flex-start;
margin-bottom: 20rpx;
line-height: 40rpx;
}
.contact-item:last-child {
margin-bottom: 0;
}
.contact-label {
font-size: 28rpx;
min-width: 100rpx;
color: #522510;
flex-shrink: 0;
}
.contact-value {
font-size: 28rpx;
color: #522510;
flex: 1;
word-wrap: break-word;
}
</style>