174 lines
4.1 KiB
Vue
174 lines
4.1 KiB
Vue
<template>
|
||
<view class="page">
|
||
<base-background />
|
||
<!-- 使用自定义导航栏组件 -->
|
||
<custom-navbar title="寺庙高僧" ref="customNavbar" />
|
||
<view class="header">
|
||
<monk-search-box
|
||
v-model="searchName"
|
||
:width="'690rpx'"
|
||
:search-icon="CommonEnum.SEARCH"
|
||
placeholder="请输入高僧姓名"
|
||
btn-text="搜索"
|
||
@search="onSearch"
|
||
/>
|
||
<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)">查看详情></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'
|
||
import BaseBackground from '../../components/base-background/base-background.vue'
|
||
import SearchBox from '../../components/search-box/search-box.vue'
|
||
|
||
export default {
|
||
components: {
|
||
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',
|
||
})
|
||
}
|
||
},
|
||
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: 100%;
|
||
min-height: 100vh;
|
||
border-radius: 0rpx 0rpx 0rpx 0rpx;
|
||
}
|
||
|
||
.header {
|
||
display: flex;
|
||
flex-direction: column;
|
||
align-items: center;
|
||
|
||
margin: 10px 14px 40rpx 14px; /* 减少顶部间距 */
|
||
width: 694rpx;
|
||
border-radius: 16rpx;
|
||
position: relative;
|
||
}
|
||
|
||
.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>
|