list.vue 5.2 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200
  1. <template>
  2. <Container title="公告列表" :scrollStyle="{ padding: 0 }">
  3. <view ref="loadMoreTrigger" class="notice-page">
  4. <!-- 公告列表 -->
  5. <view class="notice-list" v-if="noticeList !='' && noticeList != null">
  6. <!-- 公告项1 -->
  7. <view class="notice-item" v-for="(item, index) in noticeList" :key="index" @click="handleItemClick(item)">
  8. <navigator class="navigator_item" open-type="navigate" :url="'/pages/notice/detail?id=' + item.id">
  9. <view class="notice-icon">
  10. <image
  11. class="notice-icon-image"
  12. src="https://openwork-oss.oss-cn-shenzhen.aliyuncs.com/uploads/question/2025/05/8DvVCq6w7CN97Mxdp68vje9WCi8RjKXDC5KwHOOY.png"
  13. mode="aspectFill"
  14. ></image>
  15. </view>
  16. <view class="notice-content" :id="'content-' + index">
  17. <view class="notice-title">{{ item.title }}</view>
  18. <view class="notice-time">{{ formatTimestamp(item.insert_time)}}</view>
  19. </view>
  20. <view class="notice-link" :style="{top: item.isTwoLines ? '67rpx' : '30rpx'}">
  21. <image
  22. class="notice-link-image"
  23. src="https://openwork-oss.oss-cn-shenzhen.aliyuncs.com/uploads/question/2025/05/jYNQJdKYavtqeVoq7bxwYFuF258jFm3sNWVSX1SS.png"
  24. mode="aspectFill"
  25. ></image>
  26. </view>
  27. </navigator>
  28. </view>
  29. </view>
  30. <!-- 加载状态提示 -->
  31. <view class="loading-status">
  32. <text v-if="loading">加载中...</text>
  33. <text v-if="noMore">——已经到底了——</text>
  34. </view>
  35. </view>
  36. </Container>
  37. </template>
  38. <script>
  39. import Container from '../../components/Container/Container.vue';
  40. import CustomerService from '@/components/CustomerService/CustomerService.vue';
  41. export default {
  42. data() {
  43. return {
  44. page: 1,
  45. limit: 10,
  46. noticeLink_top: [],
  47. noticeList: [],
  48. loading: false, // 是否正在加载
  49. noMore: false, // 是否没有更多数据
  50. observer: null
  51. };
  52. },
  53. onReady() {
  54. // this.handleScroll();
  55. },
  56. onLoad() {
  57. this.handleScroll();
  58. this.checkTitleLines();
  59. },
  60. methods: {
  61. checkTitleLines() {
  62. // 使用setTimeout确保DOM已经渲染完成
  63. setTimeout(() => {
  64. this.noticeList.forEach((item, index) => {
  65. const query = uni.createSelectorQuery().in(this);
  66. query.select(`.notice-title`).boundingClientRect(data => {
  67. if (data && data.height > 40) { // 假设单行高度约为40rpx
  68. this.$set(item, 'isTwoLines', true);
  69. } else {
  70. this.$set(item, 'isTwoLines', false);
  71. }
  72. }).exec();
  73. });
  74. }, 300);
  75. },
  76. handleScroll() {
  77. const observer = uni.createIntersectionObserver(this);
  78. observer.relativeToViewport({bottom: 100}).observe('.loading-status', (res) => {
  79. if (res.intersectionRatio > 0 && !this.loading && !this.noMore) {
  80. this.notice_system_list();
  81. this.page++;
  82. }
  83. });
  84. },
  85. formatTimestamp(timestamp) {
  86. if (timestamp) {
  87. timestamp = timestamp * 1000;
  88. }
  89. const date = new Date(timestamp);
  90. const year = date.getFullYear();
  91. const month = String(date.getMonth() + 1).padStart(2, '0'); // 月份从 0 开始,要 +1
  92. const day = String(date.getDate()).padStart(2, '0');
  93. const hours = String(date.getHours()).padStart(2, '0');
  94. const minutes = String(date.getMinutes()).padStart(2, '0');
  95. const seconds = String(date.getSeconds()).padStart(2, '0');
  96. return `${year}-${month}-${day} ${hours}:${minutes}:${seconds}`;
  97. },
  98. async notice_system_list() {
  99. this.$http.request('api/question_bank/question_reception/notice/list', { page: this.page, limit: this.limit }).then((callback) => {
  100. if (callback.code == 'success') {
  101. let page = this.page;
  102. if (page == 1) {
  103. this.noticeList = callback.data.data;
  104. } else {
  105. this.noticeList.push(...callback.data.data);
  106. }
  107. if (callback.data.data == '') {
  108. this.noMore = true;
  109. } else {
  110. this.noMore = false;
  111. }
  112. } else {
  113. uni.showToast({
  114. title: callback.msg,
  115. icon: 'none'
  116. });
  117. }
  118. });
  119. },
  120. handleItemClick(item) {
  121. // 处理点击事件
  122. console.log('点击公告:');
  123. }
  124. }
  125. };
  126. </script>
  127. <style lang="scss">
  128. .notice-page {
  129. background-color: #f5f5f5;
  130. min-height: 100vh;
  131. .notice-list {
  132. background-color: #fff;
  133. border-radius: 12rpx;
  134. overflow: hidden;
  135. box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.05);
  136. .notice-item {
  137. display: flex;
  138. align-items: center;
  139. padding: 24rpx 30rpx;
  140. border-bottom: 1rpx solid #eee;
  141. position: relative;
  142. .notice-icon {
  143. position: absolute;
  144. top: 22rpx;
  145. width: 60rpx;
  146. height: 60rpx;
  147. margin-right: 20rpx;
  148. }
  149. .notice-link {
  150. position: absolute;
  151. right: 0rpx;
  152. width: 50rpx;
  153. height: 50rpx;
  154. margin-right: 20rpx;
  155. }
  156. .notice-link-image,
  157. .notice-icon-image {
  158. width: 50rpx;
  159. height: 50rpx;
  160. }
  161. .notice-content {
  162. flex: 1;
  163. margin-left: 60rpx;
  164. margin-right: 60rpx;
  165. .notice-title {
  166. font-size: 30rpx;
  167. color: #333;
  168. margin-bottom: 10rpx;
  169. line-height: 1.4;
  170. display: -webkit-box;
  171. -webkit-box-orient: vertical;
  172. -webkit-line-clamp: 2;
  173. overflow: hidden;
  174. text-overflow: ellipsis;
  175. }
  176. .notice-time {
  177. font-size: 24rpx;
  178. color: #999;
  179. }
  180. }
  181. }
  182. }
  183. }
  184. .loading-status {
  185. text-align: center;
  186. color: #999;
  187. padding: 120rpx 0rpx;
  188. font-size: 24rpx;
  189. }
  190. </style>