detail.vue 1.4 KB

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061
  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 Vue from 'vue'
  15. import network from '@/utils/network'
  16. import tool from '@/utils/tool'
  17. import store from '@/utils/vuexStore'
  18. import {SERVER_API_HTTP_TYPE,SERVER_API_DOMAIN} from '@/utils/config'
  19. export default {
  20. name: 'article_detail',
  21. mounted () {
  22. this.getData()
  23. },
  24. data () {
  25. return {
  26. title: null,
  27. content: null,
  28. createdAt: '',
  29. loading: true,
  30. tool: tool,
  31. }
  32. },
  33. methods: {
  34. handleCurrentChange (page) {
  35. this.getData(page, this.pageSize)
  36. },
  37. handleSizeChange (pageSize) {
  38. this.getData(this.currentPage, pageSize)
  39. },
  40. getData () {
  41. network.getData(`article/detail/${this.$route.params.id}`).then(response => {
  42. this.title = response.TITLE
  43. this.content = response.CONTENT
  44. this.createdAt = response.CREATED_AT
  45. this.loading = false
  46. })
  47. },
  48. getLink(fileUrl) {
  49. return fileUrl.indexOf('http') > -1 ? fileUrl : SERVER_API_HTTP_TYPE + SERVER_API_DOMAIN + '/uploads/' + fileUrl;
  50. },
  51. }
  52. }
  53. </script>
  54. <style scoped>
  55. .white-box-title span{color: #999}
  56. .white-box-content{font-size: 16px;padding: 15px 0;line-height: 2;}
  57. </style>