<template>
  <view class="article-container">
    <!-- 标题 -->
    <view class="article-title">{{title}}</view>
    <!-- 时间 -->
    <view class="article-time">{{updateTime}}</view>
    <!-- 富文本内容展示 -->
    <rich-text :nodes="content"></rich-text>
  </view>
</template>

<script>
import { indexmenuDetail } from '@/config/api.js';

export default {
  data() {
    return {
      content: '', // 富文本内容
      title: '', // 文章标题
      updateTime: '', // 更新时间
      id: '' // 文章ID
    }
  },
  
  onLoad(options) {
    if (options.id) {
      this.id = options.id;
      this.getArticleDetail();
    }
  },
  
  methods: {
    // 获取文章详情
    getArticleDetail() {
      indexmenuDetail(this.id).then(res => {
        if (res.code === 200) {
          const detail = res.data;
          this.title = detail.title;
          this.content = detail.context;
          this.updateTime = detail.updateTime;
        } else {
          uni.showToast({
            title: res.msg || '获取文章详情失败',
            icon: 'none'
          });
        }
      }).catch(err => {
        console.error('获取文章详情失败:', err);
        uni.showToast({
          title: '获取文章详情失败',
          icon: 'none'
        });
      });
    }
  }
}
</script>

<style lang="scss">
.article-container {
  padding: 30rpx;
  background: #fff;
  min-height: 100vh;
}

.article-title {
  font-size: 36rpx;
  font-weight: bold;
  color: #333;
  margin-bottom: 20rpx;
}

.article-time {
  font-size: 24rpx;
  color: #999;
  margin-bottom: 30rpx;
}
</style> 