[update] 变更：首页添加公告面板

assets/js/http/userApi.js

@@ -61,6 +61,8 @@ const UserApi = {
   messageOverTimeUnreadList: (params) => http.get(`${URL_CONFIG}sys/sysAnnouncementSend/getDeadlineUnreadSend`, params),
   // 将超时未读消息全部变已读
   messageOverTimeToRead: (params) => http.get(`${URL_CONFIG}sys/sysAnnouncementSend/allReadDeadlineUnreadSend`, params),
+  // 公告列表
+  noticeList: (params) => http.get(`${URL_CONFIG}sysNotice/page`, params),
   // 工作组分页
   workList: (params) => http.get(`${URL_CONFIG}project/payWorkingGroupSubitem/queryCompanyPageList`, params),
   // 分标委列表

pages/home/home.js

@@ -36,7 +36,14 @@ Page({
     content: '', // 消息内容
     showModal: false, // 是否显示弹窗
     clickItem: null,
-    signUpBool: false // 是否跳转可报名
+    signUpBool: false, // 是否跳转可报名
+    // 2023-07变更：添加公告面板
+    tabList: [
+      { key: 'message', tab: '消息' },
+      { key: 'notice', tab: '公告' }
+    ],
+    tabActiveKey: 'message',
+    noticeList: [] // 公告列表
   },
   showDialogBtn: function (e) {
     let content = e.currentTarget.dataset.message.msgContent
@@ -129,6 +136,33 @@ Page({
       })
     })
   },
+  loadNoticeData () {
+    wx.showToast({
+      title: '加载中...',
+      icon: 'loading'
+    })
+    UserApi.noticeList(this.data.searchParams).then(res => {
+      if (res.success) {
+        // 搜索时，把原数据清空，重新筛选
+        if (this.data.searchParams.pageNo === 1) {
+          this.setData({
+            list: []
+          })
+        }
+        if (res.result.records && res.result.records.length) {
+          this.setData({
+            noticeList: [...this.data.noticeList, ...res.result.records]
+          })
+        }
+      }
+    }).catch(err => {
+      wx.showToast({
+        title: '登录后查看消息通知！',
+        icon: 'none',
+        duration: 2000
+      })
+    })
+  },
   // 点击首页的五个选项跳转页面
   clickSelect(e) {
     let index = e.currentTarget.dataset.index
@@ -267,6 +301,26 @@ Page({
     })
     this.loadData()
   },
+  // tab选中
+  changeTab: function (e) {
+    const that = this
+    that.setData({
+      tabActiveKey: e.currentTarget.dataset.key,
+      searchParams: {
+        pageNo: 1,
+        pageSize: 10,
+        titile: '', // 提醒类型  3：会议 6：文件  7：邮寄 8：催款
+        startTime: '', // 开始日期
+        endTime: '' // 结束日期
+      },
+    })
+    if (e.currentTarget.dataset.key === 'message') {
+      // 选中的是消息
+      that.loadData()
+    } else {
+      that.loadNoticeData()
+    }
+  },
 
   /**
    * 生命周期函数--监听页面显示

pages/home/home.wxml

@@ -19,7 +19,14 @@
     </view>
     <!-- 消息列表筛选框 -->
     <view class="list-box">
-      <view class="sign-list">
+      <view class="swiper-tab">
+        <view wx:for="{{tabList}}" wx:key="key" catchtap="changeTab"
+              class="{{tabActiveKey === item.key ?'selected-menu':'unselect-menu'}}" data-key="{{item.key}}">{{item.tab}}
+          <hr class="{{tabActiveKey == item.key ? 'selected-line':'unselect-line'}}" />
+        </view>
+      </view>
+
+      <view wx:if="{{tabActiveKey === 'message'}}" class="sign-list">
         <view class="select-list">
           <view class="select-item">
             <picker bindchange="bindTitleChange" range="{{titleList}}">
@@ -47,8 +54,8 @@
           </view>
         </view>
       </view>
-      <!-- 列表 -->
+      <!-- 消息列表 -->
-      <view class="list-content" wx:if="{{list && list.length}}">
+      <view class="list-content" wx:if="{{list && list.length && tabActiveKey === 'message'}}">
       <!-- titile 13 - 20 是会员的消息不显示  -->
         <view class="list-content-item" wx:for="{{list}}" wx:key="item" wx:for-item="item" bindtap="showDialogBtn" wx:if="{{item.showBool}}"
           data-message="{{item}}">
@@ -68,9 +75,27 @@
         </view>
       </view>
     </view>
-    <view wx:if="{{list.length === 0}}" class="no-data">
+    <!-- 公告列表 -->
+    <view class="list-content" wx:if="{{noticeList && noticeList.length && tabActiveKey === 'notice'}}">
+      <view class="list-content-item" wx:for="{{noticeList}}" wx:key="item" wx:for-item="item" bindtap="showNoticeDialog"
+            data-message="{{item}}">
+        <view class="content-top">
+          <view>
+            <text>{{item.noticeName}}</text>
+          </view>
+          <text class="content-time">{{item.createTime}}</text>
+        </view>
+        <rich-text class="content-bottom" nodes="{{item.noticeContent}}"></rich-text>
+      </view>
+    </view>
+  </view>
+  <view>
+    <view wx:if="{{tabActiveKey === 'message' && list.length === 0}}" class="no-data">
       <text>暂无消息通知！</text>
     </view>
+    <view wx:if="{{tabActiveKey === 'notice' && noticeList.length === 0}}" class="no-data">
+      <text>暂无公告！</text>
+    </view>
   </view>
 
   <view class="modal-mask" bindtap="hideModal" catchtouchmove="preventTouchMove" wx:if="{{showModal}}"></view>
@@ -98,4 +123,4 @@
     </view>
   </view>
 
-</view>
+</view>

pages/home/home.wxss

@@ -148,7 +148,7 @@ page{
   background: #f9f9f9;
   margin: -180rpx 105rpx;
   border-radius: 8rpx;
-} 
+}
 .modal-content {
   position: relative;
   padding: 50rpx;
@@ -215,4 +215,60 @@ page{
 }
 .modal-img {
   position: relative;
-}
+}
+
+/* tab栏 */
+.swiper-tab {
+  width: 100%;
+  height: 80rpx;
+  text-align: center;
+  display: flex;
+  justify-content: space-between;
+  background: white;
+  /*border-bottom: 2rpx solid rgba(193, 193, 193, 0.3);*/
+}
+
+.selected-menu {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  color: #069F99;
+  background: #fff;
+  font-size: 32rpx;
+  font-weight: bold;
+  font-family: PingFang SC;
+  font-weight: 400;
+  width: 50%;
+  height: 60rpx;
+  line-height: 60rpx;
+  opacity: 1;
+  /*border-bottom: 2rpx solid #069F99;*/
+  position: relative;
+}
+
+.unselect-menu {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  font-size: 16px;
+  font-family: PingFang SC;
+  font-weight: 400;
+  color: #4f4f50;
+  width: 50%;
+  height: 60rpx;
+  line-height: 60rpx;
+  background: #fff;
+  opacity: 1;
+  position: relative;
+  /* border-radius: 34rpx; */
+}
+
+.selected-line {
+  background: #069F99;
+  height: 4rpx;
+  width: 90rpx;
+  position: absolute;
+  /* margin-top: 10rpx; */
+  bottom: -18rpx;
+  width: 60rpx;
+}