合立app移动端项目-消息功能静态页开发

yunxi-ui-app-hl/pages.json

@@ -1,5 +1,11 @@
 {
   "pages": [ //pages数组中第一项表示应用启动页，参考：https://uniapp.dcloud.io/collocation/pages
+    {
+      "path": "pages/xiaoxi/index",
+      "style": {
+        "navigationBarTitleText": "系统消息"
+      }
+    },
     {
       "path": "pages/renwu/info",
       "style": {
@@ -24,14 +30,6 @@
         "navigationBarTitleText": "搜索"
       }
     },
-    {
-      "path": "pages/xiaoxi/index",
-      "style": {
-        "navigationBarTitleText": "系统消息",
-        "navigationStyle": "custom",
-        "navigationBarTextStyle": "white"
-      }
-    },
     {
       "path": "pages/user/index",
       "style": {

yunxi-ui-app-hl/pages/renwu/work-report.vue

@@ -120,7 +120,7 @@
   @import "../../styles/base.scss";
 
   .scrollbox {
-    height: 500px;
+    height: 420px;
     overflow: hidden;
   }
 

yunxi-ui-app-hl/pages/xiaoxi/index.vue

@@ -1,22 +1,124 @@
 <template>
   <view class="container">
-    消息列表
+    <!-- 导航栏 -->
+    <u-navbar leftText="返回" title="系统消息" :placeholder="true" leftIconColor="	#409eff" @leftClick="backHomeClick" />
+
+    <!-- 条件检索 -->
+    <view class="condition">
+      <view class="date">
+        <uni-datetime-picker v-model="dateRange" type="daterange" @change="changeDataRange" />
+      </view>
+      <view class="unread">
+        <u-checkbox-group @change="changeStatus">
+          <u-checkbox activeColor="green" label="只看未读" :checked="onlyUnread" :name="name"></u-checkbox>
+        </u-checkbox-group>
+      </view>
+    </view>
+
+    <!-- 消息列表 -->
+    <view class="list">
+      <u-list @scrolltolower="scrolltolower" enableFlex>
+        <u-list-item v-for="(item, index) in indexList" :key="index">
+          <u-cell :title="`系统消息-${index + 1}`">
+            <u-avatar slot="icon" shape="square" size="35" :src="item.url"
+              customStyle="margin: -3px 5px -3px 0"></u-avatar>
+          </u-cell>
+        </u-list-item>
+      </u-list>
+    </view>
+
+    <!-- 加载更多 -->
+    <u-loadmore :status="status" loadmoreText="上拉加载更多" loadingText="加载中" height="30" marginTop="10" line/>
   </view>
 </template>
 
 <script>
-export default {
-  data() {
-    return {
-
+  import indexList from '../../uni_modules/uview-ui/libs/config/props/indexList';
+  export default {
+    data() {
+      return {
+        name: "unread",
+        status: 'loadmore',
+        dateRange: [],
+        onlyUnread: 0,
+        indexList: [],
+        urls: [
+          'https://cdn.uviewui.com/uview/album/1.jpg',
+          'https://cdn.uviewui.com/uview/album/2.jpg',
+          'https://cdn.uviewui.com/uview/album/3.jpg',
+          'https://cdn.uviewui.com/uview/album/4.jpg',
+          'https://cdn.uviewui.com/uview/album/5.jpg',
+          'https://cdn.uviewui.com/uview/album/6.jpg',
+          'https://cdn.uviewui.com/uview/album/7.jpg',
+          'https://cdn.uviewui.com/uview/album/8.jpg',
+          'https://cdn.uviewui.com/uview/album/9.jpg',
+          'https://cdn.uviewui.com/uview/album/10.jpg',
+        ]
+      }
+    },
+    onLoad() {
+      this.loadMore(false);
+    },
+    methods: {
+      backHomeClick() {
+        uni.switchTab({
+          url: '/pages/index/index'
+        });
+      },
+      // 切换时间
+      changeDataRange(range) {
+        this.dateRange = range;
+      },
+      // 切换状态
+      changeStatus(arr) {
+        // console.log(arr);
+        // this.dateRange = [];
+        this.onlyUnread = arr.includes(this.name) ? 1 : 0;
+        this.loadMore(true);
+      },
+      // 下拉加载更多
+      scrolltolower() {
+        if (this.status == "nomore") return;
+        this.status = 'loading';
+        this.loadMore(false);
+        setTimeout(() => {
+          if (this.indexList.length >= 100) {
+            this.status = 'nomore';
+          } else {
+            this.status = 'loadmore';
+          }
+        }, 1000);
+      },
+      // 加载数据
+      loadMore(init) {
+        if (init) { // 初始化
+          this.status = 'loadmore';
+          this.indexList = [];
+        }
+        // 模拟请求，新增10条
+        for (let i = 0; i < 20; i++) {
+          this.indexList.push({
+            url: this.urls[uni.$u.random(0, this.urls.length - 1)]
+          })
+        }
+      }
     }
-  },
-  methods: {
-
   }
-}
 </script>
 
 <style lang="scss" scoped>
+  .condition {
+    height: 40px;
+    padding: 0 10px;
+    @include flex-space-between;
 
+    .date {
+      width: 70%;
+    }
+
+    .unread {
+      width: 25%;
+      text-align: center;
+    }
+  }
 </style>