detail.vue 1.6 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778
  1. <template>
  2. <view class="article-container">
  3. <!-- 标题 -->
  4. <view class="article-title">{{title}}</view>
  5. <!-- 时间 -->
  6. <view class="article-time">{{updateTime}}</view>
  7. <!-- 富文本内容展示 -->
  8. <rich-text :nodes="content"></rich-text>
  9. </view>
  10. </template>
  11. <script>
  12. import { indexmenuDetail } from '@/config/api.js';
  13. export default {
  14. data() {
  15. return {
  16. content: '', // 富文本内容
  17. title: '', // 文章标题
  18. updateTime: '', // 更新时间
  19. id: '' // 文章ID
  20. }
  21. },
  22. onLoad(options) {
  23. if (options.id) {
  24. this.id = options.id;
  25. this.getArticleDetail();
  26. }
  27. },
  28. methods: {
  29. // 获取文章详情
  30. getArticleDetail() {
  31. indexmenuDetail(this.id).then(res => {
  32. if (res.code === 200) {
  33. const detail = res.data;
  34. this.title = detail.title;
  35. this.content = detail.context;
  36. this.updateTime = detail.updateTime;
  37. } else {
  38. uni.showToast({
  39. title: res.msg || '获取文章详情失败',
  40. icon: 'none'
  41. });
  42. }
  43. }).catch(err => {
  44. console.error('获取文章详情失败:', err);
  45. uni.showToast({
  46. title: '获取文章详情失败',
  47. icon: 'none'
  48. });
  49. });
  50. }
  51. }
  52. }
  53. </script>
  54. <style lang="scss">
  55. .article-container {
  56. padding: 30rpx;
  57. background: #fff;
  58. min-height: 100vh;
  59. }
  60. .article-title {
  61. font-size: 36rpx;
  62. font-weight: bold;
  63. color: #333;
  64. margin-bottom: 20rpx;
  65. }
  66. .article-time {
  67. font-size: 24rpx;
  68. color: #999;
  69. margin-bottom: 30rpx;
  70. }
  71. </style>