detail.vue 2.7 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130
  1. <template>
  2. <view class="rf-notice-detail">
  3. <view class="banner" v-if="announceDetail.cover">
  4. <rf-image class="banner-img" :src="announceDetail.cover"></rf-image>
  5. <view class="banner-title in2line">{{ announceDetail.title }}</view>
  6. </view>
  7. <view class="banner-title" v-if="!announceDetail.cover">{{
  8. announceDetail.title
  9. }}</view>
  10. <view class="article-meta" v-if="announceDetail.created_at">
  11. <text class="article-author">{{ announceDetail.author_name }}</text>
  12. <text class="article-text">发布于</text>
  13. <text class="article-time">{{ announceDetail.created_at | time }}</text>
  14. </view>
  15. <view class="article-content">
  16. <rf-parser lazy-load :html="announceDetail.content"></rf-parser>
  17. </view>
  18. <rf-empty
  19. info="暂无商城公告详情"
  20. v-if="!announceDetail && !loading"
  21. ></rf-empty>
  22. <!--加载动画-->
  23. <rfLoading isFullScreen :active="loading"></rfLoading>
  24. </view>
  25. </template>
  26. <script>
  27. import { notifyAnnounceView } from '@/api/basic';
  28. import moment from '@/common/moment';
  29. export default {
  30. data() {
  31. return {
  32. announceDetail: {},
  33. id: undefined,
  34. loading: true
  35. };
  36. },
  37. filters: {
  38. // 时间格式化
  39. time(val) {
  40. return moment(val * 1000).format('YYYY-MM-DD HH:mm');
  41. }
  42. },
  43. onLoad(event) {
  44. this.id = event.id;
  45. this.getNotifyAnnounceView(event.id);
  46. },
  47. onShareAppMessage() {
  48. return {
  49. title: this.banner.title,
  50. path: `/pages/index/notice/detail?id=${this.id}`
  51. };
  52. },
  53. methods: {
  54. // 获取通知列表
  55. async getNotifyAnnounceView(id) {
  56. await this.$http
  57. .get(`${notifyAnnounceView}`, { id })
  58. .then(r => {
  59. this.loading = false;
  60. this.announceDetail = r.data;
  61. uni.setNavigationBarTitle({
  62. title: r.data.title
  63. });
  64. })
  65. .catch(() => {
  66. this.loading = false;
  67. });
  68. }
  69. }
  70. };
  71. </script>
  72. <style lang="scss">
  73. .rf-notice-detail {
  74. .banner {
  75. overflow: hidden;
  76. position: relative;
  77. background-color: #ccc;
  78. .banner-img {
  79. height: 300upx;
  80. width: 100%;
  81. }
  82. .banner-title {
  83. max-height: 84upx;
  84. overflow: hidden;
  85. position: absolute;
  86. bottom: 0;
  87. width: 100%;
  88. font-size: 32upx;
  89. font-weight: 400;
  90. line-height: 42upx;
  91. color: white;
  92. z-index: 11;
  93. background-color: rgba(0, 0, 0, 0.25);
  94. padding: 4upx 20upx;
  95. }
  96. }
  97. .banner-title {
  98. padding: $spacing-lg $spacing-lg 0;
  99. font-size: $font-lg;
  100. }
  101. .article-meta {
  102. padding: 20upx 40upx;
  103. display: flex;
  104. flex-direction: row;
  105. justify-content: flex-start;
  106. color: gray;
  107. .article-text {
  108. font-size: 26upx;
  109. line-height: 50upx;
  110. margin: 0 20upx;
  111. }
  112. .article-author,
  113. .article-time {
  114. font-size: 30upx;
  115. }
  116. }
  117. .article-content {
  118. padding: 0 30upx;
  119. overflow: hidden;
  120. font-size: 30upx;
  121. margin-bottom: 30upx;
  122. }
  123. }
  124. </style>