buddhism/pages/walkInto/walkInto.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(/&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 {
  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>