WindowBird/buddhism
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Monk页面优化

Browse Source
This commit is contained in:
minimaxagent1 2025-07-31 09:36:28 +08:00
parent 540e05c282
commit c67c2e14b8
1 changed files with 197 additions and 195 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

392
pages/monk/monk.vue
View File

@ -1,141 +1,142 @@
<template> <template>
<view class="page"> <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"> <custom-navbar title="寺庙高僧" />
</u-navbar> <view class="header">
<container> <image class="background-image" :src="CommonEnum.BACKGROUND" mode="aspectFill"></image>
<view class="header"> <view class='searchBox'>
<image class="background-image" :src="CommonEnum.BACKGROUND" mode="aspectFill"></image> <image class="search-icon" :src="MonkEnum.SEARCH" mode="aspectFit"></image>
<view class='searchBox'> <input
<image class="search-icon" :src="MonkEnum.SEARCH" mode="aspectFit"></image> class="search-input"
<input v-model="searchName"
class="search-input" placeholder="请输入高僧姓名"
v-model="searchName" placeholder-class="search-placeholder"
placeholder="请输入高僧姓名" @confirm="onSearch"
placeholder-class="search-placeholder" confirm-type="search"
@confirm="onSearch" />
confirm-type="search" <view class="search-btn" @click="onSearch">搜索</view>
/> </view>
<view class="search-btn" @click="onSearch">搜索</view> <view class="monk-list">
</view> <view class="monk-item" v-for="(item, idx) in monkList" :key="item.id">
<view class="monk-list"> <image class="monk-avatar" :src="item.imgUrl" mode="aspectFill"></image>
<view class="monk-item" v-for="(item, idx) in monkList" :key="item.id"> <view class="monk-info">
<image class="monk-avatar" :src="item.imgUrl" mode="aspectFill"></image> <view class="desc-row">
<view class="monk-info"> <view class="monk-desc">{{ item.name }}，{{ stripHtmlTags(item.profile) }}</view>
<view class="desc-row"> <view class="monk-detail" @click="goDetail(item)">查看详情&gt;</view>
<view class="monk-desc">{{ item.name }}，{{ stripHtmlTags(item.profile) }}</view> </view>
<view class="monk-detail" @click="goDetail(item)">查看详情&gt;</view> </view>
</view> </view>
</view> </view>
</view> </view>
</view> </view>
</view>
</container>
</view>
</template> </template>
<script> <script>
import { import {
CommonEnum CommonEnum
} from '@/enum/common.js' } from '@/enum/common.js'
import { import {
MonkEnum MonkEnum
} from '@/enum/monk.js' } from '@/enum/monk.js'
import { import {
getMonkList getMonkList
} from '@/api/monk/monk.js' } from '@/api/monk/monk.js'
import CustomNavbar from "../../components/custom-navbar/custom-navbar.vue";
export default { export default {
data() { components: {
return { CustomNavbar
bgc: { },
backgroundColor: "#F5F0E7" data() {
}, return {
CommonEnum, bgc: {
MonkEnum, backgroundColor: "#F5F0E7"
monkList: [], },
searchName: '' CommonEnum,
} MonkEnum,
}, monkList: [],
onLoad() { searchName: ''
this.fetchMonkList() }
}, },
methods: { onLoad() {
async fetchMonkList() { this.fetchMonkList()
try { },
const res = await getMonkList({name: this.searchName}) methods: {
if (res.code === 200 && Array.isArray(res.rows)) { async fetchMonkList() {
this.monkList = res.rows try {
} else { const res = await getMonkList({ name: this.searchName })
uni.showToast({ if (res.code === 200 && Array.isArray(res.rows)) {
title: res.msg || '获取失败', this.monkList = res.rows
icon: 'none' } else {
}) uni.showToast({
} title: res.msg || '获取失败',
} catch (e) { icon: 'none'
uni.showToast({ })
title: '网络错误', }
icon: 'none' } catch (e) {
}) uni.showToast({
} title: '网络错误',
}, icon: 'none'
onSearch() { })
this.fetchMonkList() }
}, },
// 去除 HTML 标签，返回纯文本 onSearch() {
stripHtmlTags(html) { this.fetchMonkList()
if (!html) return ''; // 处理空值 },
return html.replace(/<[^>]+>/g, ''); // 正则替换所有 HTML 标签 // 去除 HTML 标签，返回纯文本
}, stripHtmlTags(html) {
goDetail(item) { if (!html) return ''; // 处理空值
uni.navigateTo({ return html.replace(/<[^>]+>/g, ''); // 正则替换所有 HTML 标签
url: `/pages/monk/monkDetail?id=${item.id}`, },
fail: (err) => { goDetail(item) {
console.error('跳转失败:', err); uni.navigateTo({
uni.showToast({ url: `/pages/monk/monkDetail?id=${item.id}`,
title: '页面跳转失败', fail: (err) => {
icon: 'none' console.error('跳转失败:', err);
}); uni.showToast({
} title: '页面跳转失败',
}); icon: 'none'
} });
} }
} });
}
}
}
</script> </script>
<style lang="scss"> <style lang="scss">
.page { .page {
position: relative; width: 750rpx;
width: 750rpx; min-height: 100vh;
min-height: 100vh; background: #F5F0E7;
background: #F5F0E7; border-radius: 0rpx 0rpx 0rpx 0rpx;
border-radius: 0rpx 0rpx 0rpx 0rpx; /* 移除padding-top，因为导航栏已经处理了状态栏适配 */
} }
.header { .header {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
align-items: center; align-items: center;
min-height: 100vh; min-height: 100vh;
background-color: transparent; background-color: transparent;
margin: 20px 14px 40rpx 14px; margin: 10px 14px 40rpx 14px; /* 减少顶部间距 */
width: 694rpx; width: 694rpx;
border-radius: 16rpx; border-radius: 16rpx;
position: relative; position: relative;
} }
.background-image { .background-image {
position: absolute; position: absolute;
top: 0; top: 0;
left: 0; left: 0;
width: 100%; width: 100%;
height: 100%; height: 100%;
z-index: -1; z-index: -1;
border-radius: 16rpx; border-radius: 16rpx;
} /* 确保背景图不被导航栏遮挡 */
}
.searchBox { .searchBox {
display: flex; display: flex;
align-items: center; align-items: center;
width: 660rpx; width: 660rpx;
@ -143,95 +144,96 @@ export default {
background: #FFFBF5; background: #FFFBF5;
border-radius: 10rpx; border-radius: 10rpx;
border: 1rpx solid #C7A26D; border: 1rpx solid #C7A26D;
margin-top: 20rpx; margin-top: 10rpx; /* 进一步减少顶部间距 */
padding: 0 12rpx; padding: 0 12rpx;
} }
.search-icon { .search-icon {
width: 32rpx; width: 32rpx;
height: 32rpx; height: 32rpx;
margin: 0 28rpx; margin: 0 28rpx;
} }
.search-input { .search-input {
flex: 1; flex: 1;
font-size: 28rpx; font-size: 28rpx;
color: #333; color: #333;
background: transparent; background: transparent;
border: none; border: none;
outline: none; outline: none;
height: 100%; height: 100%;
} }
.search-placeholder { .search-placeholder {
color: #bfa16b; color: #bfa16b;
font-size: 28rpx; font-size: 28rpx;
} }
.search-btn { .search-btn {
background: #bfa16b; background: #bfa16b;
color: #fff; color: #fff;
font-size: 26rpx; font-size: 26rpx;
border-radius: 6rpx; border-radius: 6rpx;
padding: 0 24rpx; padding: 0 24rpx;
height: 48rpx; height: 48rpx;
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
margin-left: 16rpx; margin-left: 16rpx;
} }
.monk-list { .monk-list {
width: 100%; width: 100%;
margin-top: 24rpx; margin-top: 24rpx;
} /* 确保列表内容正常显示 */
}
.monk-item { .monk-item {
display: flex; display: flex;
flex-direction: row; flex-direction: row;
align-items: flex-start; align-items: flex-start;
background: transparent; background: transparent;
margin-bottom: 24rpx; margin-bottom: 24rpx;
} }
.monk-avatar { .monk-avatar {
width: 184rpx; width: 184rpx;
height: 184rpx; height: 184rpx;
background: #e5e5e5; background: #e5e5e5;
border-radius: 8rpx; border-radius: 8rpx;
margin-right: 18rpx; margin-right: 18rpx;
} }
.monk-info { .monk-info {
flex: 1; flex: 1;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
justify-content: flex-start; justify-content: flex-start;
} }
.desc-row { .desc-row {
display: flex; display: flex;
align-items: flex-end; align-items: flex-end;
flex-direction: column; flex-direction: column;
width: 100%; width: 100%;
} }
.monk-desc { .monk-desc {
line-height: 38rpx; line-height: 38rpx;
font-size: 28rpx; font-size: 28rpx;
color: #695347; color: #695347;
margin-top: 8rpx; margin-top: 8rpx;
word-break: break-all; word-break: break-all;
// 让内容最多显示4行，超出省略 // 让内容最多显示4行，超出省略
display: -webkit-box; display: -webkit-box;
-webkit-line-clamp: 4; -webkit-line-clamp: 4;
-webkit-box-orient: vertical; -webkit-box-orient: vertical;
overflow: hidden; overflow: hidden;
} }
.monk-detail { .monk-detail {
color: #bfa16b; color: #bfa16b;
font-size: 24rpx; font-size: 24rpx;
white-space: nowrap; white-space: nowrap;
} }
</style> </style>