update: optimize message page style when no data

Author: Lsnsh

src/pages/message/message.wxml

@@ -1,19 +1,26 @@
 <view class="message-list-container fadein-init {{bIsReady ? 'fadein' : ''}}">
- <!-- 未读消息列表 -->
- <view class="message-list has-not-read-message-list">
- <!-- 新消息 -->
- <view class="message-list-title">
- <text>新消息</text>
- <text>({{aHasNotReadMessageList.length}})</text>
+ <block wx:if="{{aHasNotReadMessageList.length || aHasReadMessageList.length}}">
+ <!-- 未读消息列表 -->
+ <view class="message-list has-not-read-message-list">
+ <!-- 新消息 -->
+ <view class="message-list-title">
+ <text>新消息</text>
+ <text>({{aHasNotReadMessageList.length}})</text>
+ </view>
+ <message-item wx:for="{{aHasNotReadMessageList}}" wx:key="{{item.id}}" data="{{item}}" bindread="fnHandleHasReadMessageEvent"></message-item>
  </view>
- <message-item wx:for="{{aHasNotReadMessageList}}" wx:key="{{item.id}}" data="{{item}}" bindread="fnHandleHasReadMessageEvent"></message-item>
- </view>
- <!-- 已读消息列表 -->
- <view class="message-list">
- <view class="message-list-title">
- <text>已读消息</text>
- <text>({{aHasReadMessageList.length}})</text>
+ <!-- 已读消息列表 -->
+  <view class="message-list">
+  <view class="message-list-title">
+  <text>已读消息</text>
+  <text>({{aHasReadMessageList.length}})</text>
+ </view>
+ <message-item wx:for="{{aHasReadMessageList}}" wx:key="{{item.id}}" data="{{item}}"></message-item>
  </view>
- <message-item wx:for="{{aHasReadMessageList}}" wx:key="{{item.id}}" data="{{item}}"></message-item>
- </view>
+ </block>
+ <block wx:else>
+ <view class="message-list-no-data vh-parent color-grey">
+ <text class="vh">暂无消息</text>
+ </view>
+ </block>
 </view>

src/pages/message/message.wxss

@@ -13,3 +13,7 @@
 .has-not-read-message-list {
  margin-bottom: 40rpx;
 }
+.message-list-no-data {
+ height: calc(100vh - 150rpx);
+ font-size: 28rpx;
+}