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

高僧详细界面2.0

Browse Source
This commit is contained in:
minimaxagent1 2025-07-30 16:37:13 +08:00
parent 967459409c
commit 40f79363fe
1 changed files with 141 additions and 131 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

272
pages/monk/monkDetail.vue
View File

@ -1,129 +1,127 @@
<template> <template>
<view class="monk-detail-page"> <view class="monk-detail-page">
<!-- 背景图 --> <!-- 背景图 -->
<image class="bg-image" src="https://api.ccttiot.com/smartmeter/img/static/uz3vQk44WkGnJPVjKrw1" <image class="bg-image" src="https://api.ccttiot.com/smartmeter/img/static/uz3vQk44WkGnJPVjKrw1"
mode="aspectFill"></image> mode="aspectFill"></image>
<u-navbar title="高僧详情" :border-bottom="false" back-icon-color="#262B37" title-color='#695347' title-size='36'
height='50' id="navbar">
</u-navbar>
<view class="container">
<view class="header">
<view class="content">
<image class="background-image" :src="CommonEnum.BACKGROUND" mode="aspectFill"></image>
<image class="monk-image" :src="monkInfo.imgUrl" mode="aspectFill"></image>
</view>
</view>
</view>
<!-- 导航标签 -->
<view class="nav-tabs">
<view
v-for="(tab, index) in tabs"
:key="index"
class="nav-tab"
:class="{ active: activeTab === index }"
@click="switchTab(index)"
>
{{ tab.title }}
</view>
</view>
<!-- 内容区域 -->
<view class="detail-section">
<view class="section-title">
{{ tabs[activeTab].title }}
</view>
<view class="monk-basic" v-if="activeTab === 0">
<text class="monk-name">{{ monkInfo.name }}</text>
<view class="duties-wrapper">
<text class="monk-duties">{{ monkInfo.duties }}</text>
</view>
</view>
<view class="section-content" v-html="tabs[activeTab].content"></view>
</view>
</view>
<u-navbar title="高僧详情" :border-bottom="false" back-icon-color="#262B37" title-color='#695347' title-size='36'
height='50' id="navbar">
</u-navbar>
<view class="container">
<view class="header">
<view class="content">
<image class="background-image" :src="CommonEnum.BACKGROUND" mode="aspectFill"></image>
<image class="monk-image" :src="monkInfo.imgUrl" mode="aspectFill"></image>
</view>
</view>
<!-- 高僧基本信息 -->
<view class="monk-info" v-if="monkInfo.name">
<image class="monk-avatar" :src="monkInfo.imgUrl || 'https://api.ccttiot.com/image-1753687164375.png'" mode="aspectFill"></image>
<view class="monk-basic">
<text class="monk-name">{{ monkInfo.name }}</text>
<text class="monk-duties">{{ monkInfo.duties }}</text>
</view>
</view>
<!-- 导航标签 -->
<view class="nav-tabs">
<view
v-for="(tab, index) in tabs"
:key="index"
class="nav-tab"
:class="{ active: activeTab === index }"
@click="switchTab(index)"
>
{{ tab.title }}
</view>
</view>
<!-- 内容区域 -->
<view class="detail-section">
<view class="section-title">
{{ tabs[activeTab].title }}
</view>
<view class="section-content" v-html="tabs[activeTab].content"></view>
</view>
</view>
</view>
</template> </template>
<script> <script>
import CommonEnum from "../../enum/common"; import CommonEnum from "../../enum/common";
import MonkEnum from "../../enum/monk"; import MonkEnum from "../../enum/monk";
import { getMonkDetail } from "../../api/monkDetail.js"; import {getMonkDetail} from "../../api/monkDetail.js";
export default { export default {
computed: { computed: {
MonkEnum() { MonkEnum() {
return MonkEnum return MonkEnum
}, },
CommonEnum() { CommonEnum() {
return CommonEnum return CommonEnum
} }
}, },
data() { data() {
return { return {
activeTab: 0, // 当前激活的标签索引 activeTab: 0, // 当前激活的标签索引
tabs: [], tabs: [],
monkInfo: {} monkInfo: {}
} }
}, },
onLoad(options) { onLoad(options) {
// 获取传递的参数 // 获取传递的参数
if (options.id) { if (options.id) {
this.getMonkDetail(options.id); this.fetchMonkDetail(options.id);
} }
}, },
methods: { methods: {
// 切换标签 // 切换标签
switchTab(index) { switchTab(index) {
this.activeTab = index; this.activeTab = index;
}, },
// 获取高僧详情 // 获取高僧详情
async getMonkDetail(id) { async fetchMonkDetail(monkId) {
try { try {
const res = await getMonkDetail(id); const res = await getMonkDetail(monkId);
if (res.code === 200 && res.data) { if (res.code === 200 && res.data) {
this.monkInfo = res.data; this.monkInfo = res.data;
// 更新标签内容 // 更新标签内容
this.updateTabsContent(); this.updateTabsContent();
} else { } else {
uni.showToast({ uni.showToast({
title: res.msg || '获取详情失败', title: res.msg || '获取详情失败',
icon: 'none' icon: 'none'
}); });
} }
} catch (error) { } catch (error) {
console.error('获取高僧详情失败:', error); console.error('获取高僧详情失败:', error);
uni.showToast({ uni.showToast({
title: '网络错误', title: '网络错误',
icon: 'none' icon: 'none'
}); });
} }
}, },
// 更新标签内容 // 更新标签内容
updateTabsContent() { updateTabsContent() {
this.tabs = [ this.tabs = [
{ {
title: '人物简介', title: '人物简介',
content: this.monkInfo.profile || '暂无简介' content: this.monkInfo.profile || '暂无简介'
}, },
{ {
title: '人物经历', title: '人物经历',
content: this.monkInfo.experience || '暂无经历' content: this.monkInfo.experience || '暂无经历'
}, },
{ {
title: '慈善事迹', title: '慈善事迹',
content: this.monkInfo.deeds || '暂无事迹' content: this.monkInfo.deeds || '暂无事迹'
}, },
{ {
title: '寺庙贡献', title: '寺庙贡献',
content: this.monkInfo.contribution || '暂无贡献' content: this.monkInfo.contribution || '暂无贡献'
} }
]; ];
} }
} }
} }
</script> </script>
@ -141,6 +139,7 @@ export default {
.monk-detail-page { .monk-detail-page {
min-height: 100vh; min-height: 100vh;
position: relative; position: relative;
background-color: rgba(255, 255, 255, 0.95);
} }
.bg-image { .bg-image {
@ -197,22 +196,33 @@ export default {
border: 4rpx solid #695347; border: 4rpx solid #695347;
} }
.monk-basic {
flex: 1;
.monk-name { }
font-size: 36rpx;
font-weight: bold; .monk-basic {
color: #695347; flex: 1;
display: block;
margin-bottom: 10rpx; .monk-name {
} font-size: 48rpx;
font-weight: bold;
color: #695347;
display: block;
margin-bottom: 10rpx;
}
.monk-duties {
font-size: 28rpx;
color: #8B7355;
display: block;
}
.duties-wrapper {
display: inline-block;
background-color: #f5f5f5;
border-radius: 8rpx;
padding: 8rpx 16rpx;
margin-top: 10rpx;
.monk-duties {
font-size: 28rpx;
color: #8B7355;
display: block;
}
} }
} }