detail.vue 1.2 KB

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758
  1. <template>
  2. <div v-loading="loading">
  3. <div class="white-box">
  4. <div class="white-box-title">
  5. <h1>{{title}}</h1>
  6. <span>{{tool.formatDate(createdAt)}}</span>
  7. </div>
  8. <div v-html="content" class="white-box-content">
  9. </div>
  10. </div>
  11. </div>
  12. </template>
  13. <script>
  14. import network from '@/utils/network'
  15. import tool from '@/utils/tool'
  16. export default {
  17. name: 'article_detail',
  18. mounted () {
  19. this.getData()
  20. },
  21. data () {
  22. return {
  23. title: null,
  24. content: null,
  25. createdAt: '',
  26. loading: true,
  27. tool: tool,
  28. }
  29. },
  30. methods: {
  31. handleCurrentChange (page) {
  32. this.getData(page, this.pageSize)
  33. },
  34. handleSizeChange (pageSize) {
  35. this.getData(this.currentPage, pageSize)
  36. },
  37. getData () {
  38. network.getData(`article/detail/${this.$route.params.id}`).then(response => {
  39. this.title = response.TITLE
  40. this.content = response.CONTENT
  41. this.createdAt = response.CREATED_AT
  42. this.loading = false
  43. })
  44. },
  45. getLink(fileUrl) {
  46. return tool.getArImage(fileUrl, '/files/');
  47. },
  48. }
  49. }
  50. </script>
  51. <style scoped>
  52. .white-box-title span{color: #999}
  53. .white-box-content{font-size: 16px;padding: 15px 0;line-height: 2;}
  54. </style>