buddhism/pages/monk/monk.vue

<template>
  <view class="page">
		<u-navbar title="寺庙高僧" :border-bottom="false" :background="bgc" back-icon-color="#262B37" title-color='#262B37'
			title-size='36' height='36' id="navbar">
		</u-navbar>
    <container>
      <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>
    </container>

  </view>
</template>

<script>
import {
  CommonEnum
} from '@/enum/common.js'
import {
  MonkEnum
} from '@/enum/monk.js'
import {
  getMonkList
} from '@/api/monk/monk.js'

export default {
  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 {
  position: relative;
  width: 750rpx;
  min-height: 100vh;
  background: #F5F0E7;
  border-radius: 0rpx 0rpx 0rpx 0rpx;
}

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