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

<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>