detail.vue 1.9 KB

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970717273747576777879808182
  1. <template>
  2. <view v-if="!isLoading" class="container b-f p-b">
  3. <view class="article-title">
  4. <text>{{ detail.title }}</text>
  5. </view>
  6. <view class="article-little dis-flex flex-x-between m-top10">
  7. <view class="article-little-left">
  8. <text class="article-views f-24 col-8">{{ detail.click }}次浏览</text>
  9. </view>
  10. <view class="article-little-right">
  11. <text class="article-views f-24 col-8">{{ detail.createTime | timeFormat('yyyy-mm-dd hh:MM') }}</text>
  12. </view>
  13. </view>
  14. <view class="article-content m-top20">
  15. <jyf-parser :html="detail.description"></jyf-parser>
  16. </view>
  17. <!-- 快捷导航 -->
  18. <shortcut />
  19. </view>
  20. </template>
  21. <script>
  22. import jyfParser from '@/components/jyf-parser/jyf-parser'
  23. import Shortcut from '@/components/shortcut'
  24. import * as ArticleApi from '@/api/article'
  25. export default {
  26. components: {
  27. Shortcut
  28. },
  29. data() {
  30. return {
  31. // 当前文章ID
  32. articleId: null,
  33. // 加载中
  34. isLoading: true,
  35. // 当前文章详情
  36. detail: null
  37. }
  38. },
  39. /**
  40. * 生命周期函数--监听页面加载
  41. */
  42. onLoad(options) {
  43. // 记录文章ID
  44. this.articleId = options.articleId;
  45. // 获取文章详情
  46. this.getArticleDetail();
  47. },
  48. methods: {
  49. // 获取文章详情
  50. getArticleDetail() {
  51. const app = this
  52. app.isLoading = true
  53. ArticleApi.detail(app.articleId)
  54. .then(result => {
  55. app.detail = result.data.articleInfo;
  56. })
  57. .finally(() => app.isLoading = false)
  58. }
  59. }
  60. }
  61. </script>
  62. <style lang="scss" scoped>
  63. .container {
  64. min-height: 100vh;
  65. padding: 30rpx;
  66. background: #fff;
  67. }
  68. .article-title {
  69. margin-bottom: 20rpx;
  70. font-size: 35rpx;
  71. display: block;
  72. }
  73. .article-content {
  74. font-size: 28rpx;
  75. }
  76. </style>