高僧详细界面1.0

2025-07-30 16:14:56 +08:00 · 2025-07-30 16:14:56 +08:00 · 967459409c
commit 967459409c
parent 9a0adde3b2
9 changed files with 453 additions and 52 deletions
--- a/api/monkDetail.js
+++ b/api/monkDetail.js
@ -0,0 +1,76 @@
+/**
+ * 高僧详情相关API
+ */
+import { request } from '../utils/request.js';
+
+/**
+ * 获取高僧详情
+ * @param {string} monkId - 高僧ID
+ * @returns {Promise} 返回高僧详情数据
+ */
+export function getMonkDetail(monkId) {
+  return request({
+    url: '/app/monk/monkById',
+    method: 'GET',
+    params: { monkId }
+  });
+}
+
+/**
+ * 获取高僧列表
+ * @param {Object} params - 查询参数
+ * @param {number} params.pageNum - 页码
+ * @param {number} params.pageSize - 每页数量
+ * @param {string} params.name - 高僧姓名（可选）
+ * @returns {Promise} 返回高僧列表数据
+ */
+export function getMonkList(params = {}) {
+  return request({
+    url: '/app/monk/listMonk',
+    method: 'GET',
+    params: {
+      pageNum: 1,
+      pageSize: 10,
+      ...params
+    }
+  });
+}
+
+/**
+ * 创建高僧信息
+ * @param {Object} data - 高僧信息
+ * @returns {Promise} 返回创建结果
+ */
+export function createMonk(data) {
+  return request({
+    url: '/app/monk/createMonk',
+    method: 'POST',
+    data
+  });
+}
+
+/**
+ * 更新高僧信息
+ * @param {Object} data - 高僧信息
+ * @returns {Promise} 返回更新结果
+ */
+export function updateMonk(data) {
+  return request({
+    url: '/app/monk/updateMonk',
+    method: 'PUT',
+    data
+  });
+}
+
+/**
+ * 删除高僧信息
+ * @param {string} id - 高僧ID
+ * @returns {Promise} 返回删除结果
+ */
+export function deleteMonk(id) {
+  return request({
+    url: '/app/monk/deleteMonk',
+    method: 'DELETE',
+    params: { id }
+  });
+} 
--- a/enum/monk.js
+++ b/enum/monk.js
@ -2,6 +2,8 @@
 export const MonkEnum = {

    SEARCH: "https://api.ccttiot.com/image-1753769500465.png", //返回的按钮图像
+    MONK_IMAGE:"https://api.ccttiot.com/image-1753859218129.png"
+
 };

 export default MonkEnum;
--- a/pages.json
+++ b/pages.json
@ -3,7 +3,7 @@
 		"^u-(.*)": "uview-ui/components/u-$1/u-$1.vue"
 	},
 	"lazyCodeLoading": "requiredComponents",
-	"entryPagePath": "pages/nearbystores/index",  // 专门指定登录页为初始页
+	"entryPagePath": "pages/monk/monkDetail",
 	"pages": [{
 			"path": "pages/nearbystores/index",
 			"style": {
@ -11,14 +11,14 @@
 				"enablePullDownRefresh": false,
 				"navigationStyle": "custom"
 			}
-		},{
-		"path": "pages/login/login",
-		"style": {
-			"navigationBarTitleText": "",
-			"enablePullDownRefresh": false,
-			"navigationStyle": "custom"
-		}
-	},{
+		}, {
+			"path": "pages/login/login",
+			"style": {
+				"navigationBarTitleText": "",
+				"enablePullDownRefresh": false,
+				"navigationStyle": "custom"
+			}
+		}, {
 			"path": "pages/index/index",
 			"style": {
 				"navigationBarTitleText": "首页",
@ -35,48 +35,60 @@
 				"enablePullDownRefresh": false,
 				"navigationStyle": "custom"
 			}
-		},{
+		}, {
 			"path": "pages/tj",
 			"style": {
 				"navigationBarTitleText": "",
 				"enablePullDownRefresh": false,
 				"navigationStyle": "custom"
 			}
-		},{
+		}, {
 			"path": "pages/myorder/index",
 			"style": {
 				"navigationBarTitleText": "",
 				"enablePullDownRefresh": false,
 				"navigationStyle": "custom"
 			}
-		},{
+		}, {
 			"path": "pages/myorder/returned/index",
 			"style": {
 				"navigationBarTitleText": "",
 				"enablePullDownRefresh": false,
 				"navigationStyle": "custom"
 			}
-		},{
-		"path": "pages/institutionalStructure/institutionalStructure",
-		"style": {
-			"navigationBarTitleText": "",
-			"enablePullDownRefresh": false,
-			"navigationStyle": "custom"
-			}
-		},
-		{
-			"path" : "pages/walkInto/walkInto",
-			"style" : 
-			{
+		}, {
+			"path": "pages/institutionalStructure/institutionalStructure",
+			"style": {
 				"navigationBarTitleText": "",
 				"enablePullDownRefresh": false,
 				"navigationStyle": "custom"
 			}
 		},
 		{
-			"path" : "pages/Monk/Monk",
-			"style" : 
-			{
+			"path": "pages/walkInto/walkInto",
+			"style": {
+				"navigationBarTitleText": "",
+				"enablePullDownRefresh": false,
+				"navigationStyle": "custom"
+			}
+		},
+		{
+			"path": "pages/monk/monk",
+			"style": {
+				"navigationBarTitleText": "",
+				"enablePullDownRefresh": false,
+				"navigationStyle": "custom"
+			}
+		}, {
+			"path": "pages/monk/monkDetail",
+			"style": {
+				"navigationBarTitleText": "",
+				"enablePullDownRefresh": false,
+				"navigationStyle": "custom"
+			}
+		}, {
+			"path": "pages/future/future",
+			"style": {
 				"navigationBarTitleText": "",
 				"enablePullDownRefresh": false,
 				"navigationStyle": "custom"
@ -88,16 +100,14 @@

 		{
 			"root": "page_user",
-			"pages": [
-				{
-					"path": "upload",
-					"style": {
-						"navigationBarTitleText": "上传",
-						"enablePullDownRefresh": false,
-						"navigationStyle": "custom"
-					}
+			"pages": [{
+				"path": "upload",
+				"style": {
+					"navigationBarTitleText": "上传",
+					"enablePullDownRefresh": false,
+					"navigationStyle": "custom"
 				}
-			]
+			}]
 		}
 	],
 	"tabBar": {
@ -105,9 +115,8 @@
 		"color": "#7C7C7C",
 		"selectedColor": "#48893B",
 		"borderStyle": "white",
-		"backgroundColor": "#ffffff", 
-		"list": [
-			{
+		"backgroundColor": "#ffffff",
+		"list": [{
 				"selectedIconPath": "/static/tabbar/oneactive.png",
 				"iconPath": "/static/tabbar/one.png",
 				"pagePath": "pages/index/index",
--- a/pages/future/future.vue
+++ b/pages/future/future.vue
@ -0,0 +1,13 @@
+<template>
+	<view class="">
+		
+	</view>
+</template>
+
+<script setup>
+	
+</script>
+
+<style lang="scss" scoped>
+	       
+</style>
--- a/pages/institutionalStructure/institutionalStructure.vue
+++ b/pages/institutionalStructure/institutionalStructure.vue
@ -8,7 +8,7 @@
        <image :src="tilesImageEnum.TILE" mode="aspectFit" class="tile-image"></image>
      </view>
    </view>
-    <view class="container">
+    <view class="header">
      <!-- 加载状态 -->
      <view v-if="loading" class="loading">
        <text>加载中...</text>
@ -162,7 +162,7 @@ export default {
 page {
  background: #F5F0E7;
 }
-.container {
+.header {
  width: 100%;
  min-height: 100vh;
  display: flex;
--- a/pages/monk/monk.vue
+++ b/pages/monk/monk.vue
@ -3,7 +3,7 @@
 		<u-navbar title="寺庙高僧" :border-bottom="false" :background="bgc" back-icon-color="#262B37" title-color='#262B37'
 			title-size='36' height='36' id="navbar">
 		</u-navbar>
-		<view class="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>
@ -86,10 +86,16 @@
 				return html.replace(/<[^>]+>/g, ''); // 正则替换所有 HTML 标签
 			},
 			goDetail(item) {
-				uni.showToast({
-					title: '详情功能待开发',
-					icon: 'none'
-				})
+				uni.navigateTo({
+					url: `/pages/monk/monkDetail?id=${item.id}`,
+					fail: (err) => {
+						console.error('跳转失败:', err);
+						uni.showToast({
+							title: '页面跳转失败',
+							icon: 'none'
+						});
+					}
+				});
 			}
 		}
 	}
@ -103,7 +109,7 @@
 		border-radius: 0rpx 0rpx 0rpx 0rpx;
 	}

-	.container {
+	.header {
 		display: flex;
 		flex-direction: column;
 		align-items: center;
--- a/pages/monk/monkDetail.vue
+++ b/pages/monk/monkDetail.vue
@ -0,0 +1,293 @@
+<template>
+	<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 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";
+
+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 || '暂无贡献'
+				}
+			];
+		}
+	}
+}
+</script>
+
+<style lang="scss" scoped>
+.background-image {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  z-index: -1;
+  border-radius: 16rpx;
+}
+
+.monk-detail-page {
+  min-height: 100vh;
+  position: relative;
+}
+
+.bg-image {
+  width: 100%;
+  height: 100vh;
+  position: fixed;
+  top: 0;
+  left: 0;
+  z-index: -1;
+}
+
+.header {
+  width: 100%;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+}
+
+.content {
+  padding: 20rpx;
+  position: relative;
+  z-index: 1;
+  width: 100%;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+}
+
+.monk-image {
+  width: 660rpx;
+  height: 290rpx;
+  background: #D8D8D8;
+  border-radius: 12rpx 12rpx 12rpx 12rpx;
+  display: block;
+  margin: 20rpx auto;
+  border: 20px darkviolet;
+  object-fit: cover;
+}
+
+.monk-info {
+  display: flex;
+  align-items: center;
+  padding: 30rpx;
+  background-color: rgba(255, 255, 255, 0.95);
+  border-radius: 16rpx;
+  margin-bottom: 20rpx;
+  backdrop-filter: blur(10rpx);
+
+  .monk-avatar {
+    width: 120rpx;
+    height: 120rpx;
+    border-radius: 60rpx;
+    margin-right: 30rpx;
+    border: 4rpx solid #695347;
+  }
+
+  .monk-basic {
+    flex: 1;
+
+    .monk-name {
+      font-size: 36rpx;
+      font-weight: bold;
+      color: #695347;
+      display: block;
+      margin-bottom: 10rpx;
+    }
+
+    .monk-duties {
+      font-size: 28rpx;
+      color: #8B7355;
+      display: block;
+    }
+  }
+}
+
+.nav-tabs {
+  display: flex;
+  justify-content: space-around;
+  background-color: rgba(255, 255, 255, 0.95);
+  border-radius: 16rpx;
+  padding: 10rpx 0;
+  margin: 20rpx;
+  box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.1);
+  backdrop-filter: blur(10rpx);
+}
+
+.nav-tab {
+  padding: 15rpx 25rpx;
+  font-size: 28rpx;
+  color: #666;
+  font-weight: 500;
+  border-radius: 10rpx;
+  transition: all 0.3s ease;
+  position: relative;
+  cursor: pointer;
+}
+
+.nav-tab.active {
+  color: #695347;
+  background-color: rgba(105, 83, 71, 0.1);
+  font-weight: bold;
+}
+
+.nav-tab.active::after {
+  content: '';
+  position: absolute;
+  bottom: -2rpx;
+  left: 50%;
+  transform: translateX(-50%);
+  width: 60%;
+  height: 4rpx;
+  background-color: #695347;
+  border-radius: 2rpx;
+}
+
+.detail-section {
+  background-color: rgba(255, 255, 255, 0.95);
+  border-radius: 16rpx;
+  padding: 30rpx;
+  margin-bottom: 20rpx;
+  backdrop-filter: blur(10rpx);
+
+  .section-title {
+    font-size: 32rpx;
+    font-weight: bold;
+    color: #695347;
+    margin-bottom: 20rpx;
+    border-left: 6rpx solid #695347;
+    padding-left: 20rpx;
+    display: flex;
+    align-items: center;
+
+    .title-icon {
+      width: 24rpx;
+      height: 24rpx;
+      margin-right: 10rpx;
+    }
+  }
+
+  .section-content {
+    font-size: 28rpx;
+    color: #666;
+    line-height: 1.6;
+
+    p {
+      margin-bottom: 16rpx;
+    }
+  }
+}
+</style>
--- a/pages/walkInto/walkInto.vue
+++ b/pages/walkInto/walkInto.vue
@ -3,7 +3,7 @@
    <u-navbar title="走进平山" :border-bottom="false" :background="bgc" back-icon-color="#262B37" title-color='#262B37'
              title-size='36' height='36' id="navbar">
    </u-navbar>
-    <view class="container">
+    <view class="header">
  <!--    <image src="" mode=""></image> -->
 	  <view>111</view>
    </view>
@ -35,7 +35,7 @@ page {
 	background: #F5F0E7;
 	border-radius: 0rpx 0rpx 0rpx 0rpx;
 }
-.container {
+.header {
  min-height: 100vh;
  display: flex;
  align-items: flex-start;
--- a/utils/router.js
+++ b/utils/router.js
@ -6,16 +6,17 @@
 // 页面路由配置
 export const PAGE_ROUTES = {
  // 主要功能页面
-  MONK: '/pages/Monk/Monk',
+  MONK: '/pages/monk/monk',
+  MONK_DETAIL: '/pages/monk/monkDetail',
  WALK_INTO: '/pages/walkInto/walkInto',
  INSTITUTIONAL_STRUCTURE: '/pages/institutionalStructure/institutionalStructure',
  
  // 待开发页面
  ACTIVITY: '/pages/activity/activity',
  NEWS: '/pages/news/news',
-  FUTURE: '/pages/future/future',
  ABBOT: '/pages/abbot/abbot',
  ANCIENT: '/pages/ancient/ancient',
+  FUTURE: '/pages/future/future',
  
  // 其他页面
  LOGIN: '/pages/login/login',
@ -28,13 +29,14 @@ export const PAGE_ROUTES = {
 // 页面类型映射
 export const PAGE_TYPE_MAP = {
  'monk': PAGE_ROUTES.MONK,
+  'monkDetail': PAGE_ROUTES.MONK_DETAIL,
  'walkInto': PAGE_ROUTES.WALK_INTO,
  'institutionalStructure': PAGE_ROUTES.INSTITUTIONAL_STRUCTURE,
  'activity': PAGE_ROUTES.ACTIVITY,
  'news': PAGE_ROUTES.NEWS,
-  'future': PAGE_ROUTES.FUTURE,
  'abbot': PAGE_ROUTES.ABBOT,
  'ancient': PAGE_ROUTES.ANCIENT,
+  'future': PAGE_ROUTES.FUTURE,
  'index': PAGE_ROUTES.INDEX,
 };