walkInto界面设计1.0

api/index/index.js

@@ -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
+  })
+}
 
 /**
  * 获取首页配置

api/walkInto/walkInto.js

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

enum/common.js

@@ -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;

pages.json

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

pages/basePage/basePagePicture.vue

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

pages/walkInto/walkInto.vue

@@ -1,20 +1,36 @@
 <template>
   <view class="page">
-    <!-- 自定义导航栏 -->
+    <!-- 使用自定义导航栏组件 -->
-    <custom-navbar 
+    <custom-navbar title="走进平山" />
-      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="header">
+      <!-- 联系信息区域 -->
-  <!--    <image src="" mode=""></image> -->
+      <view class="contact-info" v-if="templeInfo.phone || templeInfo.address">
-	  <view>111222</view>
+        <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: {
+      templeInfo: {
-        backgroundColor: CommonEnum.BASE_COLOR,
+        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 {
+.page {
-	  width: 750rpx;
+  background: #F5F0E7;
-	height: 2492rpx;
+  width: 100%;
-	background: v-bind('CommonEnum.BASE_COLOR');
+  min-height: 100vh;
-	border-radius: 0rpx 0rpx 0rpx 0rpx;
+  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;
+  padding: 0 15rpx;
-  margin: 20px 14px 40rpx 14px;
+  padding-bottom: rpx;
-  width: 694rpx;
-  background: #FFFBF5;
   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>