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>
<view class="monk-detail-page">
<!-- 背景图 -->
<image class="bg-image" src="https://api.ccttiot.com/smartmeter/img/static/uz3vQk44WkGnJPVjKrw1"
mode="aspectFill"></image>
<view class="monk-detail-page">
<!-- 背景图 -->
<image class="bg-image" src="https://api.ccttiot.com/smartmeter/img/static/uz3vQk44WkGnJPVjKrw1"
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>
<script>
import CommonEnum from "../../enum/common";
import MonkEnum from "../../enum/monk";
import { getMonkDetail } from "../../api/monkDetail.js";
import {getMonkDetail} from "../../api/monkDetail.js";
export default {
computed: {
MonkEnum() {
return MonkEnum
},
CommonEnum() {
return CommonEnum
}
},
data() {
return {
activeTab: 0, // 当前激活的标签索引
tabs: [],
monkInfo: {}
}
},
onLoad(options) {
// 获取传递的参数
if (options.id) {
this.getMonkDetail(options.id);
}
},
methods: {
// 切换标签
switchTab(index) {
this.activeTab = index;
},
// 获取高僧详情
async getMonkDetail(id) {
try {
const res = await getMonkDetail(id);
if (res.code === 200 && res.data) {
this.monkInfo = res.data;
// 更新标签内容
this.updateTabsContent();
} else {
uni.showToast({
title: res.msg || '获取详情失败',
icon: 'none'
});
}
} catch (error) {
console.error('获取高僧详情失败:', error);
uni.showToast({
title: '网络错误',
icon: 'none'
});
}
},
// 更新标签内容
updateTabsContent() {
this.tabs = [
{
title: '人物简介',
content: this.monkInfo.profile || '暂无简介'
},
{
title: '人物经历',
content: this.monkInfo.experience || '暂无经历'
},
{
title: '慈善事迹',
content: this.monkInfo.deeds || '暂无事迹'
},
{
title: '寺庙贡献',
content: this.monkInfo.contribution || '暂无贡献'
}
];
}
}
computed: {
MonkEnum() {
return MonkEnum
},
CommonEnum() {
return CommonEnum
}
},
data() {
return {
activeTab: 0, // 当前激活的标签索引
tabs: [],
monkInfo: {}
}
},
onLoad(options) {
// 获取传递的参数
if (options.id) {
this.fetchMonkDetail(options.id);
}
},
methods: {
// 切换标签
switchTab(index) {
this.activeTab = index;
},
// 获取高僧详情
async fetchMonkDetail(monkId) {
try {
const res = await getMonkDetail(monkId);
if (res.code === 200 && res.data) {
this.monkInfo = res.data;
// 更新标签内容
this.updateTabsContent();
} else {
uni.showToast({
title: res.msg || '获取详情失败',
icon: 'none'
});
}
} catch (error) {
console.error('获取高僧详情失败:', error);
uni.showToast({
title: '网络错误',
icon: 'none'
});
}
},
// 更新标签内容
updateTabsContent() {
this.tabs = [
{
title: '人物简介',
content: this.monkInfo.profile || '暂无简介'
},
{
title: '人物经历',
content: this.monkInfo.experience || '暂无经历'
},
{
title: '慈善事迹',
content: this.monkInfo.deeds || '暂无事迹'
},
{
title: '寺庙贡献',
content: this.monkInfo.contribution || '暂无贡献'
}
];
}
}
}
</script>
@ -141,6 +139,7 @@ export default {
.monk-detail-page {
min-height: 100vh;
position: relative;
background-color: rgba(255, 255, 255, 0.95);
}
.bg-image {
@ -197,22 +196,33 @@ export default {
border: 4rpx solid #695347;
}
.monk-basic {
flex: 1;
.monk-name {
font-size: 36rpx;
font-weight: bold;
color: #695347;
display: block;
margin-bottom: 10rpx;
}
}
.monk-basic {
flex: 1;
.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;
}
}
}