增加首页轮播图详情

api/home.js

@@ -45,4 +45,14 @@ export function homeSetting(){
 		},
 		'method': 'get'
 	})
+}
+
+export function getSwiperDetail(id){
+	return request({
+		url: `/home/banner/${id}`,
+		headers: {
+			isToken: true
+		},
+		'method': 'get'
+	})
 }

pages.json

@@ -409,6 +409,17 @@
 					"titleNView": false
 				}
 			}
+		},
+		{
+			"path" : "pages/swiperDetail/swiperDetail",
+			"style" : 
+			{
+				"navigationBarTitleText": "内容详情",
+				"enablePullDownRefresh": false,
+				"app-plus": {
+					"titleNView": true
+				}
+			}
 		}
 	],
 	"globalStyle": {

pages/index/index.vue

@@ -280,7 +280,10 @@
 		}
 	}
 	const itemClick = (data) =>{
-		console.log("swiper", data)
+		// console.log("轮播图swiper", data)
+		uni.navigateTo({
+			url: "/pages/swiperDetail/swiperDetail?id=" + data.id 
+		})
 	}
 	const swiperClick = (data) => {
 		console.log(data, "课程预告数据")

pages/swiperDetail/swiperDetail.vue

@@ -0,0 +1,105 @@
+<template>
+	<view class="announcement-details">
+		<text class="title">{{ announcement.title }}</text>
+		<text class="date">{{ announcement.date }}</text>
+		<view class="content">
+			<u-parse :html="announcement.content" :selectable="true" :show-with-animation="true" style="width: 100%;"></u-parse>
+		</view>
+	</view>
+</template>
+
+<script setup>
+	import {
+		ref
+	} from 'vue'
+	import {
+		onLoad
+	} from '@dcloudio/uni-app'
+	import {
+		getSwiperDetail
+	} from '@/api/home.js'
+	const announcement = ref({
+		title: "",
+		content: "", // 假设这是后端返回的内容
+		date: "" // ISO格式日期
+	})
+
+	function formatDate(dateString) {
+		const options = {
+			year: 'numeric',
+			month: 'long',
+			day: 'numeric'
+		};
+		return new Date(dateString).toLocaleDateString('zh-CN', options);
+	}
+
+	function init(id) {
+		getSwiperDetail(id).then(res => {
+			if (res?.data) {
+				announcement.value = res.data
+			}
+		})
+	}
+	onLoad((option) => {
+		const {
+			id
+		} = option
+		init(id)
+	})
+</script>
+
+<style scoped>
+	.announcement-details {
+		padding: 20px;
+		background-color: #ffffff;
+		display: flex;
+		flex-direction: column;
+		justify-content: space-between;
+		/* height: 100vh; */
+		/* 让页面高度撑满 */
+		
+		margin-bottom: env(safe-area-inset-bottom, 0);
+	}
+
+	.title {
+		font-size: 24px;
+		font-weight: bold;
+		color: #333;
+		text-align: center;
+		/* 标题居中 */
+		margin-bottom: 15px;
+	}
+
+	.content {
+		flex: 1;
+		/* 占据剩余空间 */
+		display: flex;
+		flex-direction: column;
+		align-items: flex-start;
+		/* 内容左对齐 */
+	}
+
+	.body {
+		font-size: 16px;
+		color: #555;
+		text-align: left;
+		/* 内容左对齐 */
+	}
+
+	.body img {
+		width: 50%;
+		height: auto;
+	}
+
+	.date {
+		font-size: 14px;
+		color: #999;
+		text-align: right;
+		/* 时间右对齐 */
+		margin-top: 10px;
+		/* 与内容分离 */
+	}
+	
+	/* 全局样式穿透 */
+	
+</style>