From c67c2e14b812fc60b65a190389e3760c8d74157a Mon Sep 17 00:00:00 2001
From: minimaxagent1 <minimaxagent1@gmail.com>
Date: Thu, 31 Jul 2025 09:36:28 +0800
Subject: [PATCH] =?UTF-8?q?Monk=E9=A1=B5=E9=9D=A2=E4=BC=98=E5=8C=96?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 pages/monk/monk.vue | 392 ++++++++++++++++++++++----------------------
 1 file changed, 197 insertions(+), 195 deletions(-)

diff --git a/pages/monk/monk.vue b/pages/monk/monk.vue
index c4608af..2a58681 100644
--- a/pages/monk/monk.vue
+++ b/pages/monk/monk.vue
@@ -1,141 +1,142 @@
 <template>
   <view class="page">
-		<u-navbar title="寺庙高僧" :border-bottom="false" :background="bgc" back-icon-color="#262B37" title-color='#262B37'
-			title-size='36' height='36' id="navbar">
-		</u-navbar>
-    <container>
-      <view class="header">
-        <image class="background-image" :src="CommonEnum.BACKGROUND" mode="aspectFill"></image>
-        <view class='searchBox'>
-          <image class="search-icon" :src="MonkEnum.SEARCH" mode="aspectFit"></image>
-          <input
-              class="search-input"
-              v-model="searchName"
-              placeholder="请输入高僧姓名"
-              placeholder-class="search-placeholder"
-              @confirm="onSearch"
-              confirm-type="search"
-          />
-          <view class="search-btn" @click="onSearch">搜索</view>
-        </view>
-        <view class="monk-list">
-          <view class="monk-item" v-for="(item, idx) in monkList" :key="item.id">
-            <image class="monk-avatar" :src="item.imgUrl" mode="aspectFill"></image>
-            <view class="monk-info">
-              <view class="desc-row">
-                <view class="monk-desc">{{ item.name }}，{{ stripHtmlTags(item.profile) }}</view>
-                <view class="monk-detail" @click="goDetail(item)">查看详情&gt;</view>
-              </view>
-            </view>
-          </view>
-        </view>
-      </view>
-    </container>
-
-  </view>
+    <!-- 使用自定义导航栏组件 -->
+    <custom-navbar title="寺庙高僧" />
+		<view class="header">
+			<image class="background-image" :src="CommonEnum.BACKGROUND" mode="aspectFill"></image>
+			<view class='searchBox'>
+				<image class="search-icon" :src="MonkEnum.SEARCH" mode="aspectFit"></image>
+				<input
+					class="search-input"
+					v-model="searchName"
+					placeholder="请输入高僧姓名"
+					placeholder-class="search-placeholder"
+					@confirm="onSearch"
+					confirm-type="search"
+				/>
+				<view class="search-btn" @click="onSearch">搜索</view>
+			</view>
+			<view class="monk-list">
+				<view class="monk-item" v-for="(item, idx) in monkList" :key="item.id">
+					<image class="monk-avatar" :src="item.imgUrl" mode="aspectFill"></image>
+					<view class="monk-info">
+						<view class="desc-row">
+							<view class="monk-desc">{{ item.name }}，{{ stripHtmlTags(item.profile) }}</view>
+							<view class="monk-detail" @click="goDetail(item)">查看详情&gt;</view>
+						</view>
+					</view>
+				</view>
+			</view>
+		</view>
+	</view>
 </template>
 
 <script>
-import {
-  CommonEnum
-} from '@/enum/common.js'
-import {
-  MonkEnum
-} from '@/enum/monk.js'
-import {
-  getMonkList
-} from '@/api/monk/monk.js'
+	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";
 
-export default {
-  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'
-        })
-      }
-    },
-    onSearch() {
-      this.fetchMonkList()
-    },
-    // 去除 HTML 标签，返回纯文本
-    stripHtmlTags(html) {
-      if (!html) return ''; // 处理空值
-      return html.replace(/<[^>]+>/g, ''); // 正则替换所有 HTML 标签
-    },
-    goDetail(item) {
-      uni.navigateTo({
-        url: `/pages/monk/monkDetail?id=${item.id}`,
-        fail: (err) => {
-          console.error('跳转失败:', err);
-          uni.showToast({
-            title: '页面跳转失败',
-            icon: 'none'
-          });
-        }
-      });
-    }
-  }
-}
+	export default {
+		components: {
+			CustomNavbar
+		},
+		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'
+					})
+				}
+			},
+			onSearch() {
+				this.fetchMonkList()
+			},
+			// 去除 HTML 标签，返回纯文本
+			stripHtmlTags(html) {
+				if (!html) return ''; // 处理空值
+				return html.replace(/<[^>]+>/g, ''); // 正则替换所有 HTML 标签
+			},
+			goDetail(item) {
+				uni.navigateTo({
+					url: `/pages/monk/monkDetail?id=${item.id}`,
+					fail: (err) => {
+						console.error('跳转失败:', err);
+						uni.showToast({
+							title: '页面跳转失败',
+							icon: 'none'
+						});
+					}
+				});
+			}
+		}
+	}
 </script>
 
 <style lang="scss">
-.page {
-  position: relative;
-  width: 750rpx;
-  min-height: 100vh;
-  background: #F5F0E7;
-  border-radius: 0rpx 0rpx 0rpx 0rpx;
-}
+	.page {
+		width: 750rpx;
+		min-height: 100vh;
+		background: #F5F0E7;
+		border-radius: 0rpx 0rpx 0rpx 0rpx;
+		/* 移除padding-top，因为导航栏已经处理了状态栏适配 */
+	}
 
-.header {
+	.header {
   display: flex;
   flex-direction: column;
   align-items: center;
   min-height: 100vh;
   background-color: transparent;
-  margin: 20px 14px 40rpx 14px;
+  margin: 10px 14px 40rpx 14px; /* 减少顶部间距 */
   width: 694rpx;
   border-radius: 16rpx;
   position: relative;
 }
 
-.background-image {
-  position: absolute;
-  top: 0;
-  left: 0;
-  width: 100%;
-  height: 100%;
-  z-index: -1;
-  border-radius: 16rpx;
-}
+	.background-image {
+		position: absolute;
+		top: 0;
+		left: 0;
+		width: 100%;
+		height: 100%;
+		z-index: -1;
+		border-radius: 16rpx;
+		/* 确保背景图不被导航栏遮挡 */
+	}
 
-.searchBox {
+	.searchBox {
   display: flex;
   align-items: center;
   width: 660rpx;
@@ -143,95 +144,96 @@ export default {
   background: #FFFBF5;
   border-radius: 10rpx;
   border: 1rpx solid #C7A26D;
-  margin-top: 20rpx;
+  margin-top: 10rpx; /* 进一步减少顶部间距 */
   padding: 0 12rpx;
 }
 
-.search-icon {
-  width: 32rpx;
-  height: 32rpx;
-  margin: 0 28rpx;
-}
+	.search-icon {
+		width: 32rpx;
+		height: 32rpx;
+		margin: 0 28rpx;
+	}
 
-.search-input {
-  flex: 1;
-  font-size: 28rpx;
-  color: #333;
-  background: transparent;
-  border: none;
-  outline: none;
-  height: 100%;
-}
+	.search-input {
+		flex: 1;
+		font-size: 28rpx;
+		color: #333;
+		background: transparent;
+		border: none;
+		outline: none;
+		height: 100%;
+	}
 
-.search-placeholder {
-  color: #bfa16b;
-  font-size: 28rpx;
-}
+	.search-placeholder {
+		color: #bfa16b;
+		font-size: 28rpx;
+	}
 
-.search-btn {
-  background: #bfa16b;
-  color: #fff;
-  font-size: 26rpx;
-  border-radius: 6rpx;
-  padding: 0 24rpx;
-  height: 48rpx;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  margin-left: 16rpx;
-}
+	.search-btn {
+		background: #bfa16b;
+		color: #fff;
+		font-size: 26rpx;
+		border-radius: 6rpx;
+		padding: 0 24rpx;
+		height: 48rpx;
+		display: flex;
+		align-items: center;
+		justify-content: center;
+		margin-left: 16rpx;
+	}
 
-.monk-list {
-  width: 100%;
-  margin-top: 24rpx;
-}
+	.monk-list {
+		width: 100%;
+		margin-top: 24rpx;
+		/* 确保列表内容正常显示 */
+	}
 
-.monk-item {
-  display: flex;
-  flex-direction: row;
-  align-items: flex-start;
-  background: transparent;
-  margin-bottom: 24rpx;
-}
+	.monk-item {
+		display: flex;
+		flex-direction: row;
+		align-items: flex-start;
+		background: transparent;
+		margin-bottom: 24rpx;
+	}
 
-.monk-avatar {
-  width: 184rpx;
-  height: 184rpx;
-  background: #e5e5e5;
-  border-radius: 8rpx;
-  margin-right: 18rpx;
-}
+	.monk-avatar {
+		width: 184rpx;
+		height: 184rpx;
+		background: #e5e5e5;
+		border-radius: 8rpx;
+		margin-right: 18rpx;
+	}
 
-.monk-info {
-  flex: 1;
-  display: flex;
-  flex-direction: column;
-  justify-content: flex-start;
-}
+	.monk-info {
+		flex: 1;
+		display: flex;
+		flex-direction: column;
+		justify-content: flex-start;
+	}
 
-.desc-row {
-  display: flex;
-  align-items: flex-end;
-  flex-direction: column;
-  width: 100%;
-}
+	.desc-row {
+		display: flex;
+		align-items: flex-end;
+		flex-direction: column;
+		width: 100%;
+	}
 
-.monk-desc {
-  line-height: 38rpx;
-  font-size: 28rpx;
-  color: #695347;
-  margin-top: 8rpx;
-  word-break: break-all;
-  // 让内容最多显示4行，超出省略
-  display: -webkit-box;
-  -webkit-line-clamp: 4;
-  -webkit-box-orient: vertical;
-  overflow: hidden;
-}
+	.monk-desc {
+		line-height: 38rpx;
+		font-size: 28rpx;
+		color: #695347;
+		margin-top: 8rpx;
+		word-break: break-all;
+		// 让内容最多显示4行，超出省略
+		display: -webkit-box;
+		-webkit-line-clamp: 4;
+		-webkit-box-orient: vertical;
+		overflow: hidden;
+	}
 
-.monk-detail {
-  color: #bfa16b;
-  font-size: 24rpx;
-  white-space: nowrap;
-}
+	.monk-detail {
+		color: #bfa16b;
+		font-size: 24rpx;
+		white-space: nowrap;
+	}
 </style>
\ No newline at end of file