From 7c7ebc6271f8e237e71e378acbbef2e64ece5443 Mon Sep 17 00:00:00 2001
From: minimaxagent1 <minimaxagent1@gmail.com>
Date: Tue, 29 Jul 2025 16:24:38 +0800
Subject: [PATCH] =?UTF-8?q?Monk=E7=BB=84=E4=BB=B6=E5=8A=A8=E6=80=81?=
 =?UTF-8?q?=E5=88=9B=E5=BB=BA?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 api/monk.js         |  14 ++
 pages/Monk/Monk.vue | 306 +++++++++++++++++++++++++-------------------
 2 files changed, 190 insertions(+), 130 deletions(-)

diff --git a/api/monk.js b/api/monk.js
index e69de29..a1222a5 100644
--- a/api/monk.js
+++ b/api/monk.js
@@ -0,0 +1,14 @@
+import { request } from '@/utils/request.js'
+
+/**
+ * 获取高僧列表
+ * @param {Object} params 查询参数
+ * @returns {Promise}
+ */
+export function getMonkList(params = {}) {
+  return request({
+    url: '/app/monk/listMonk',
+    method: 'GET',
+    params
+  })
+}
diff --git a/pages/Monk/Monk.vue b/pages/Monk/Monk.vue
index 9242134..71c5adb 100644
--- a/pages/Monk/Monk.vue
+++ b/pages/Monk/Monk.vue
@@ -11,11 +11,13 @@
 				<view class="search-btn">搜索</view>
 			</view>
 			<view class="monk-list">
-				<view class="monk-item" v-for="(item, idx) in monkList" :key="idx">
-					<image class="monk-avatar" :src="item.avatar" mode="aspectFill"></image>
+				<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="monk-desc">{{ item.desc }}</view>
-						<view class="monk-detail" @click="goDetail(item)">查看详情></view>
+						<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>
@@ -24,138 +26,182 @@
 </template>
 
 <script>
-import { CommonEnum } from '@/enum/common.js';
-import { MonkEnum } from '@/enum/monk.js';
+	import {
+		CommonEnum
+	} from '@/enum/common.js'
+	import {
+		MonkEnum
+	} from '@/enum/monk.js'
+	import {
+		getMonkList
+	} from '@/api/monk.js'
 
-export default {
-	data() {
-		return {
-			bgc: {
-				backgroundColor: "#F5F0E7",
-			},
-			CommonEnum,
-			MonkEnum,
-			monkList: [
-				{
-					avatar: 'https://api.ccttiot.com/image-1753770000001.png',
-					desc: '释某某法师，现任平山寺方丈。法师于2000年在平山寺剃度出家，2001年平山寺龙坛受具足戒，师承临济宗第11代传人，深耕禅修。',
+	export default {
+		data() {
+			return {
+				bgc: {
+					backgroundColor: "#F5F0E7"
 				},
-				{
-					avatar: 'https://api.ccttiot.com/image-1753770000001.png',
-					desc: '释某某法师，现任平山寺方丈。法师于2000年在平山寺剃度出家，2001年平山寺龙坛受具足戒，师承临济宗第11代传人，深耕禅修。',
-				},
-				{
-					avatar: 'https://api.ccttiot.com/image-1753770000001.png',
-					desc: '释某某法师，现任平山寺方丈。法师于2000年在平山寺剃度出家，2001年平山寺龙坛受具足戒，师承临济宗第11代传人，深耕禅修。',
+				CommonEnum,
+				MonkEnum,
+				monkList: []
+			}
+		},
+		onLoad() {
+			this.fetchMonkList()
+		},
+		methods: {
+			async fetchMonkList() {
+				try {
+					const res = await getMonkList()
+					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'
+					})
 				}
-			]
-		}
-	},
-	methods: {
-		goDetail(item) {
-			uni.showToast({
-				title: '详情功能待开发',
-				icon: 'none'
-			})
+			},
+			// 去除 HTML 标签，返回纯文本
+			stripHtmlTags(html) {
+				if (!html) return ''; // 处理空值
+				return html.replace(/<[^>]+>/g, ''); // 正则替换所有 HTML 标签
+			},
+			goDetail(item) {
+				uni.showToast({
+					title: '详情功能待开发',
+					icon: 'none'
+				})
+			}
 		}
 	}
-}
 </script>
 
 <style lang="scss">
-.page {
-	width: 750rpx;
-	min-height: 100vh;
-	background: #F5F0E7;
-	border-radius: 0rpx 0rpx 0rpx 0rpx;
-}
-.container {
-	display: flex;
-	flex-direction: column;
-	align-items: center;
-	min-height: 100vh;
-	background-color: transparent;
-	margin: 20px 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;
-}
-.searchBox {
-	display: flex;
-	align-items: center;
-	width: 660rpx;
-	height: 70rpx;
-	background: #FFFBF5;
-	border-radius: 10rpx;
-	border: 1rpx solid #C7A26D;
-	margin-top: 20rpx;
-	padding: 0 12rpx;
-}
-.search-icon {
-	width: 32rpx;
-	height: 32rpx;
-	margin: 0 16rpx 0 0;
-}
-.search-text {
-	flex: 1;
-	font-size: 28rpx;
-	color: #bfa16b;
-}
-.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-item {
-	display: flex;
-	flex-direction: row;
-	align-items: flex-start;
-	background: transparent;
-	margin-bottom: 24rpx;
-}
-.monk-avatar {
-	width: 100rpx;
-	height: 100rpx;
-	background: #e5e5e5;
-	border-radius: 8rpx;
-	margin-right: 18rpx;
-}
-.monk-info {
-	flex: 1;
-	display: flex;
-	flex-direction: column;
-	justify-content: space-between;
-}
-.monk-desc {
-	font-size: 26rpx;
-	color: #695347;
-	line-height: 1.6;
-	margin-bottom: 8rpx;
-	word-break: break-all;
-}
-.monk-detail {
-	color: #bfa16b;
-	font-size: 24rpx;
-	align-self: flex-end;
-}
+	.page {
+		width: 750rpx;
+		min-height: 100vh;
+		background: #F5F0E7;
+		border-radius: 0rpx 0rpx 0rpx 0rpx;
+	}
+
+	.container {
+		display: flex;
+		flex-direction: column;
+		align-items: center;
+		min-height: 100vh;
+		background-color: transparent;
+		margin: 20px 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;
+	}
+
+	.searchBox {
+		display: flex;
+		align-items: center;
+		width: 660rpx;
+		height: 70rpx;
+		background: #FFFBF5;
+		border-radius: 10rpx;
+		border: 1rpx solid #C7A26D;
+		margin-top: 20rpx;
+		padding: 0 12rpx;
+	}
+
+	.search-icon {
+		width: 32rpx;
+		height: 32rpx;
+		margin: 0 16rpx 0 0;
+	}
+
+	.search-text {
+		flex: 1;
+		font-size: 28rpx;
+		color: #bfa16b;
+	}
+
+	.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-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-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%;
+	}
+
+	.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;
+	}
 </style>
\ No newline at end of file