Monk组件动态创建

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
+  })
+}

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">
+				<view class="monk-item" v-for="(item, idx) in monkList" :key="item.id">
-					<image class="monk-avatar" :src="item.avatar" mode="aspectFill"></image>
+					<image class="monk-avatar" :src="item.imgUrl" mode="aspectFill"></image>
 					<view class="monk-info">
-						<view class="monk-desc">{{ item.desc }}</view>
+						<view class="desc-row">
-						<view class="monk-detail" @click="goDetail(item)">查看详情></view>
+							<view class="monk-desc">{{ item.name }}，{{ stripHtmlTags(item.profile) }}</view>
+							<view class="monk-detail" @click="goDetail(item)">查看详情&gt;</view>
+						</view>
 					</view>
 				</view>
 			</view>
@@ -24,34 +26,54 @@
 </template>
 
 <script>
-import { CommonEnum } from '@/enum/common.js';
+	import {
-import { MonkEnum } from '@/enum/monk.js';
+		CommonEnum
+	} from '@/enum/common.js'
+	import {
+		MonkEnum
+	} from '@/enum/monk.js'
+	import {
+		getMonkList
+	} from '@/api/monk.js'
 
-export default {
+	export default {
 		data() {
 			return {
 				bgc: {
-				backgroundColor: "#F5F0E7",
+					backgroundColor: "#F5F0E7"
 				},
 				CommonEnum,
 				MonkEnum,
-			monkList: [
+				monkList: []
-				{
-					avatar: 'https://api.ccttiot.com/image-1753770000001.png',
-					desc: '释某某法师，现任平山寺方丈。法师于2000年在平山寺剃度出家，2001年平山寺龙坛受具足戒，师承临济宗第11代传人，深耕禅修。',
-				},
-				{
-					avatar: 'https://api.ccttiot.com/image-1753770000001.png',
-					desc: '释某某法师，现任平山寺方丈。法师于2000年在平山寺剃度出家，2001年平山寺龙坛受具足戒，师承临济宗第11代传人，深耕禅修。',
-				},
-				{
-					avatar: 'https://api.ccttiot.com/image-1753770000001.png',
-					desc: '释某某法师，现任平山寺方丈。法师于2000年在平山寺剃度出家，2001年平山寺龙坛受具足戒，师承临济宗第11代传人，深耕禅修。',
-				}
-			]
 			}
 		},
+		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'
+					})
+				}
+			},
+			// 去除 HTML 标签，返回纯文本
+			stripHtmlTags(html) {
+				if (!html) return ''; // 处理空值
+				return html.replace(/<[^>]+>/g, ''); // 正则替换所有 HTML 标签
+			},
 			goDetail(item) {
 				uni.showToast({
 					title: '详情功能待开发',
@@ -59,17 +81,18 @@ export default {
 				})
 			}
 		}
-}
+	}
 </script>
 
 <style lang="scss">
-.page {
+	.page {
 		width: 750rpx;
 		min-height: 100vh;
 		background: #F5F0E7;
 		border-radius: 0rpx 0rpx 0rpx 0rpx;
-}
+	}
-.container {
+
+	.container {
 		display: flex;
 		flex-direction: column;
 		align-items: center;
@@ -79,8 +102,9 @@ export default {
 		width: 694rpx;
 		border-radius: 16rpx;
 		position: relative;
-}
+	}
-.background-image {
+
+	.background-image {
 		position: absolute;
 		top: 0;
 		left: 0;
@@ -88,8 +112,9 @@ export default {
 		height: 100%;
 		z-index: -1;
 		border-radius: 16rpx;
-}
+	}
-.searchBox {
+
+	.searchBox {
 		display: flex;
 		align-items: center;
 		width: 660rpx;
@@ -99,18 +124,21 @@ export default {
 		border: 1rpx solid #C7A26D;
 		margin-top: 20rpx;
 		padding: 0 12rpx;
-}
+	}
-.search-icon {
+
+	.search-icon {
 		width: 32rpx;
 		height: 32rpx;
 		margin: 0 16rpx 0 0;
-}
+	}
-.search-text {
+
+	.search-text {
 		flex: 1;
 		font-size: 28rpx;
 		color: #bfa16b;
-}
+	}
-.search-btn {
+
+	.search-btn {
 		background: #bfa16b;
 		color: #fff;
 		font-size: 26rpx;
@@ -121,41 +149,59 @@ export default {
 		align-items: center;
 		justify-content: center;
 		margin-left: 16rpx;
-}
+	}
-.monk-list {
+
+	.monk-list {
 		width: 100%;
 		margin-top: 24rpx;
-}
+	}
-.monk-item {
+
+	.monk-item {
 		display: flex;
 		flex-direction: row;
 		align-items: flex-start;
 		background: transparent;
 		margin-bottom: 24rpx;
-}
+	}
-.monk-avatar {
+
-	width: 100rpx;
+	.monk-avatar {
-	height: 100rpx;
+		width: 184rpx;
+		height: 184rpx;
 		background: #e5e5e5;
 		border-radius: 8rpx;
 		margin-right: 18rpx;
-}
+	}
-.monk-info {
+
+	.monk-info {
 		flex: 1;
 		display: flex;
 		flex-direction: column;
-	justify-content: space-between;
+		justify-content: flex-start;
-}
+	}
-.monk-desc {
+
-	font-size: 26rpx;
+	.desc-row {
+		display: flex;
+		align-items: flex-end;
+		flex-direction: column;
+		width: 100%;
+	}
+
+	.monk-desc {
+		line-height: 38rpx;
+		font-size: 28rpx;
 		color: #695347;
-	line-height: 1.6;
+		margin-top: 8rpx;
-	margin-bottom: 8rpx;
 		word-break: break-all;
-}
+		// 让内容最多显示4行，超出省略
-.monk-detail {
+		display: -webkit-box;
+		-webkit-line-clamp: 4;
+		-webkit-box-orient: vertical;
+		overflow: hidden;
+	}
+
+	.monk-detail {
 		color: #bfa16b;
 		font-size: 24rpx;
-	align-self: flex-end;
+		white-space: nowrap;
-}
+	}
 </style>