buddhism/pages/monk/monk.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)">查看详情&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'
  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>