buddhism/pages/monk/monk.vue

<template>
  <view class="page">
    <!-- 使用自定义导航栏组件 -->
    <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 CustomNavbar from "../../components/custom-navbar/custom-navbar.vue";

	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 {
		width: 750rpx;
		min-height: 100vh;
		background: #F5F0E7;
		border-radius: 0rpx 0rpx 0rpx 0rpx;
		/* 移除padding-top，因为导航栏已经处理了状态栏适配 */
	}

	.header {
  display: flex;
  flex-direction: column;
  align-items: center;
  min-height: 100vh;
  background-color: transparent;
  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;
		/* 确保背景图不被导航栏遮挡 */
	}

	.searchBox {
  display: flex;
  align-items: center;
  width: 660rpx;
  height: 70rpx;
  background: #FFFBF5;
  border-radius: 10rpx;
  border: 1rpx solid #C7A26D;
  margin-top: 10rpx; /* 进一步减少顶部间距 */
  padding: 0 12rpx;
}

	.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-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;
	}

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