fix bugs

pages/event-info-detail/event-info-detail.vue

@@ -0,0 +1,233 @@
+<template>
+  <view class="info-detail-page">
+    <!-- 信息标题 -->
+    <view class="detail-header">
+      <view class="info-tag" :class="infoDetail.type">{{ infoDetail.typeText }}</view>
+      <view class="info-title">{{ infoDetail.title }}</view>
+      <view class="info-time">
+        <text class="time-icon">🕐</text>
+        <text>{{ infoDetail.time }}</text>
+      </view>
+    </view>
+
+    <!-- 分割线 -->
+    <view class="divider"></view>
+
+    <!-- 信息内容 -->
+    <view class="detail-content">
+      <text class="content-text">{{ infoDetail.content }}</text>
+    </view>
+
+    <!-- 附件区域（如果有） -->
+    <view class="attachments" v-if="infoDetail.attachments && infoDetail.attachments.length > 0">
+      <view class="attachment-title">附件</view>
+      <view class="attachment-item" v-for="(item, index) in infoDetail.attachments" :key="index">
+        <text class="attachment-icon">📎</text>
+        <text class="attachment-name">{{ item.name }}</text>
+      </view>
+    </view>
+
+    <!-- 底部操作栏 -->
+    <view class="bottom-bar">
+      <view class="bar-item" @click="handleShare">
+        <text class="bar-icon">📤</text>
+        <text class="bar-text">分享</text>
+      </view>
+      <view class="bar-item" @click="handleCollect">
+        <text class="bar-icon">⭐</text>
+        <text class="bar-text">收藏</text>
+      </view>
+    </view>
+  </view>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      infoId: '',
+      infoDetail: {
+        id: '',
+        type: 'notice',
+        typeText: '通知',
+        title: '',
+        content: '',
+        time: '',
+        attachments: []
+      }
+    };
+  },
+  onLoad(options) {
+    console.log('详情页接收参数:', options)
+
+    if (options.id) {
+      this.infoId = options.id
+    }
+
+    // 接收从列表页传递的数据
+    if (options.type) {
+      this.infoDetail.type = options.type
+    }
+    if (options.typeText) {
+      this.infoDetail.typeText = decodeURIComponent(options.typeText)
+    }
+    if (options.title) {
+      this.infoDetail.title = decodeURIComponent(options.title)
+    }
+    if (options.content) {
+      this.infoDetail.content = decodeURIComponent(options.content)
+    }
+    if (options.time) {
+      this.infoDetail.time = decodeURIComponent(options.time)
+    }
+  },
+  methods: {
+    handleShare() {
+      uni.showToast({
+        title: '分享功能开发中',
+        icon: 'none'
+      })
+    },
+    handleCollect() {
+      uni.showToast({
+        title: '收藏成功',
+        icon: 'success'
+      })
+    }
+  }
+};
+</script>
+
+<style lang="scss" scoped>
+.info-detail-page {
+  min-height: 100vh;
+  background-color: #f5f5f5;
+  padding-bottom: 120rpx;
+}
+
+.detail-header {
+  background-color: #fff;
+  padding: 40rpx 30rpx;
+}
+
+.info-tag {
+  display: inline-block;
+  font-size: 24rpx;
+  padding: 8rpx 20rpx;
+  border-radius: 8rpx;
+  color: #fff;
+  margin-bottom: 20rpx;
+}
+
+.info-tag.notice {
+  background-color: #C93639;
+}
+
+.info-tag.announcement {
+  background-color: #FF8C00;
+}
+
+.info-tag.important {
+  background-color: #DC143C;
+}
+
+.info-title {
+  font-size: 36rpx;
+  font-weight: bold;
+  color: #333333;
+  line-height: 1.5;
+  margin-bottom: 20rpx;
+}
+
+.info-time {
+  display: flex;
+  align-items: center;
+  gap: 10rpx;
+  font-size: 26rpx;
+  color: #999999;
+}
+
+.time-icon {
+  font-size: 28rpx;
+}
+
+.divider {
+  height: 20rpx;
+  background-color: #f5f5f5;
+}
+
+.detail-content {
+  background-color: #fff;
+  padding: 40rpx 30rpx;
+  min-height: 400rpx;
+}
+
+.content-text {
+  font-size: 30rpx;
+  color: #333333;
+  line-height: 1.8;
+  white-space: pre-wrap;
+  word-break: break-all;
+}
+
+.attachments {
+  background-color: #fff;
+  margin-top: 20rpx;
+  padding: 30rpx;
+}
+
+.attachment-title {
+  font-size: 28rpx;
+  font-weight: bold;
+  color: #333333;
+  margin-bottom: 20rpx;
+}
+
+.attachment-item {
+  display: flex;
+  align-items: center;
+  gap: 15rpx;
+  padding: 20rpx;
+  background-color: #f5f5f5;
+  border-radius: 12rpx;
+  margin-bottom: 15rpx;
+}
+
+.attachment-icon {
+  font-size: 32rpx;
+}
+
+.attachment-name {
+  flex: 1;
+  font-size: 28rpx;
+  color: #333333;
+}
+
+.bottom-bar {
+  position: fixed;
+  bottom: 0;
+  left: 0;
+  right: 0;
+  background-color: #fff;
+  display: flex;
+  padding: 20rpx 30rpx;
+  box-shadow: 0 -4rpx 20rpx rgba(0, 0, 0, 0.05);
+}
+
+.bar-item {
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 10rpx;
+}
+
+.bar-icon {
+  font-size: 40rpx;
+}
+
+.bar-text {
+  font-size: 24rpx;
+  color: #666666;
+}
+</style>