From 6b394c7206326e66811dbd8d646874c8abb20e89 Mon Sep 17 00:00:00 2001
From: zxl <763096477@qq.com>
Date: 星期四, 26 六月 2025 09:47:34 +0800
Subject: [PATCH] 调整报名活动页面
---
pages/news/detail.vue | 212 +++++++++++++++++++++++++++++++++++++++++++++++++++++
1 files changed, 212 insertions(+), 0 deletions(-)
diff --git a/pages/news/detail.vue b/pages/news/detail.vue
new file mode 100644
index 0000000..ceabba6
--- /dev/null
+++ b/pages/news/detail.vue
@@ -0,0 +1,212 @@
+<template>
+ <view class="detail-page">
+ <!-- 鍔犺浇鐘舵�� -->
+ <view v-if="loading" class="loading-container">
+ <u-loading mode="circle" size="48"></u-loading>
+ <text class="loading-text">鍔犺浇涓�...</text>
+ </view>
+
+ <!-- 鍐呭鍖哄煙 -->
+ <template v-else>
+ <!-- 鏍囬鍖� -->
+ <view class="header">
+ <text class="title">{{ detailData.title }}</text>
+ <text class="meta">
+ <text class="date">{{ formatDate(detailData.publishDate) }}</text>
+ </text>
+ </view>
+
+ <!-- 瀵屾枃鏈唴瀹� -->
+ <scroll-view scroll-y class="content-wrapper">
+ <rich-text
+ :nodes="formatContent(detailData.content)"
+ class="content"
+ ></rich-text>
+ </scroll-view>
+ </template>
+
+ <!-- 閿欒鎻愮ず -->
+ <u-toast ref="uToast"></u-toast>
+ </view>
+</template>
+
+<script>
+import { detail } from '@/api/news.js'
+
+export default {
+ data() {
+ return {
+ detailId: '',
+ loading: true,
+ detailData: {
+ title: '',
+ content: '',
+ publishDate: ''
+ }
+ }
+ },
+ onLoad(options) {
+ if (options.id) {
+ this.detailId = options.id
+ this.loadDetailData()
+ }
+ },
+ methods: {
+ async loadDetailData() {
+ this.loading = true
+ try {
+ const res = await detail(this.detailId)
+ if (res.statusCode === 200) {
+ this.detailData = {
+ title: res.data.data.title || '鏃犳爣棰�',
+ content: res.data.data.content || '',
+ publishDate: res.data.data.publishDate || ''
+ }
+ } else {
+ this.showError('鍔犺浇澶辫触: ' + (res.message || '鏈煡閿欒'))
+ }
+ } catch (error) {
+ console.error('鍔犺浇璇︽儏鍑洪敊:', error)
+ this.showError('缃戠粶璇锋眰澶辫触')
+ } finally {
+ this.loading = false
+ }
+ },
+
+ formatDate(dateString) {
+ if (!dateString) return '鏈煡鏃堕棿'
+
+ try {
+ const date = new Date(dateString)
+ if (isNaN(date.getTime())) return dateString
+
+ const year = date.getFullYear()
+ const month = (date.getMonth() + 1).toString().padStart(2, '0')
+ const day = date.getDate().toString().padStart(2, '0')
+ const hours = date.getHours().toString().padStart(2, '0')
+ const minutes = date.getMinutes().toString().padStart(2, '0')
+
+ return `${year}-${month}-${day} ${hours}:${minutes}`
+ } catch (e) {
+ console.error('鏃ユ湡鏍煎紡鍖栭敊璇�:', e)
+ return dateString
+ }
+ },
+
+ formatContent(content) {
+ if (!content) return ''
+
+ // 鍩虹澶勭悊锛氱‘淇濆浘鐗囪嚜閫傚簲
+ const processedContent = content
+ .replace(/<img/gi, '<img style="max-width:100%;height:auto;display:block;margin:20rpx auto;"')
+ .replace(/<table/gi, '<table style="width:100%;border-collapse:collapse;"')
+ .replace(/<td/gi, '<td style="border:1px solid #ddd;padding:8px;"')
+
+ return processedContent
+ },
+
+ showError(message) {
+ this.$refs.uToast.show({
+ type: 'error',
+ message: message,
+ duration: 2000
+ })
+ }
+ }
+}
+</script>
+
+<style lang="scss" scoped>
+.detail-page {
+ padding: 30rpx;
+ min-height: 100vh;
+ background-color: #f8f8f8;
+}
+
+.loading-container {
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+ justify-content: center;
+ height: 60vh;
+
+ .loading-text {
+ margin-top: 20rpx;
+ font-size: 28rpx;
+ color: #999;
+ }
+}
+
+.header {
+ background-color: #fff;
+ border-radius: 16rpx;
+ padding: 30rpx;
+ margin-bottom: 30rpx;
+ box-shadow: 0 2rpx 12rpx rgba(0, 0, 0, 0.05);
+
+ .title {
+ display: block;
+ font-size: 36rpx;
+ font-weight: bold;
+ color: #333;
+ line-height: 1.5;
+ margin-bottom: 20rpx;
+ }
+
+ .meta {
+ display: flex;
+ justify-content: flex-end;
+ font-size: 24rpx;
+ color: #999;
+
+ .date {
+ margin-left: 15rpx;
+ }
+ }
+}
+
+.content-wrapper {
+ background-color: #fff;
+ border-radius: 16rpx;
+ padding: 30rpx;
+ box-shadow: 0 2rpx 12rpx rgba(0, 0, 0, 0.05);
+ height: calc(100vh - 300rpx);
+
+ .content {
+ font-size: 30rpx;
+ line-height: 1.8;
+ color: #333;
+
+ // 瑕嗙洊rich-text鍐呴儴鍏冪礌鏍峰紡
+ /deep/ p {
+ margin-bottom: 20rpx;
+ }
+
+ /deep/ h1, /deep/ h2, /deep/ h3 {
+ margin: 40rpx 0 20rpx;
+ font-weight: bold;
+ }
+
+ /deep/ ul, /deep/ ol {
+ padding-left: 40rpx;
+ margin-bottom: 20rpx;
+ }
+
+ /deep/ li {
+ margin-bottom: 10rpx;
+ }
+
+ /deep/ a {
+ color: #007aff;
+ word-break: break-all;
+ }
+
+ /deep/ blockquote {
+ border-left: 4rpx solid #ddd;
+ padding-left: 20rpx;
+ color: #666;
+ margin: 20rpx 0;
+ }
+ }
+}
+</style>
\ No newline at end of file
--
Gitblit v1.8.0