200 lines
4.6 KiB
Vue
200 lines
4.6 KiB
Vue
<template>
|
|
<view class="page">
|
|
<!-- 使用自定义导航栏组件 -->
|
|
<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";
|
|
|
|
export default {
|
|
components: {
|
|
CustomNavbar
|
|
},
|
|
data() {
|
|
return {
|
|
CommonEnum,
|
|
templeInfo: {
|
|
id: '',
|
|
name: '',
|
|
title: '',
|
|
content: '',
|
|
imgUrl: '',
|
|
address: '',
|
|
phone: '',
|
|
startTime: '',
|
|
endTime: ''
|
|
},
|
|
loading: false
|
|
}
|
|
},
|
|
onLoad() {
|
|
this.fetchTempleInfo()
|
|
},
|
|
methods: {
|
|
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(/ /g, ' ');
|
|
text = text.replace(/&/g, '&');
|
|
text = text.replace(/</g, '<');
|
|
text = text.replace(/>/g, '>');
|
|
text = text.replace(/"/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 {
|
|
background: #F5F0E7;
|
|
width: 100%;
|
|
min-height: 100vh;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
}
|
|
|
|
.header {
|
|
margin: 26rpx 28rpx;
|
|
min-height: 100vh;
|
|
display: flex;
|
|
flex-direction: column;
|
|
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> |