消息页面完成

app.js

@@ -1,12 +1,24 @@
 // app.js
 App({
-  onLaunch: function () {
+    onLaunch: function (options) {
-    //显示红字，badge
+        //获取设备顶部窗口的高度（不同设备窗口高度不一样，根据这个来设置自定义导航栏的高度）
-  },
+        //这个最初我是在组件中获取，但是出现了一个问题，当第一次进入小程序时导航栏会把
-  globalData: {
+        //页面内容盖住一部分,当打开调试重新进入时就没有问题，这个问题弄得我是莫名其妙
-    userInfo: null
+        //虽然最后解决了，但是花费了不少时间
+        const menuButtonInfo = wx.getMenuButtonBoundingClientRect()
+        wx.getSystemInfo({
+          success: (res) => {
+            this.globalData.height = res.statusBarHeight
+            this.globalData.deviceInfo.statusHeight = res.statusBarHeight
+            this.globalData.deviceInfo.navigationHeight = menuButtonInfo.height + (menuButtonInfo.top - res.statusBarHeight) * 2
+          }
+        })
       },
   globalData: {
-    userInfo: null
+    userInfo: null,
+    deviceInfo: {
+        statusHeight: 20,
+        navigationHeight: 40
+      }
   }
 })

app.json

@@ -24,8 +24,8 @@
         "navigationBarTextStyle": "black"
     },
     "tabBar": {
-        "color": "#2c2c2c",
+        "color": "#333333",
-        "selectedColor": "#e40031",
+        "selectedColor": "#3A80E7",
         "backgroundColor": "#FFFFFF",
         "borderStyle": "white",
         "list": [

components/loadMore/loadMore.js

@@ -0,0 +1,13 @@
+"use strict";
+Component({
+    properties: {
+        loadType: {
+            type: String,
+            value: 'more'
+        },
+        loadVisible: {
+            type: Boolean,
+            value: false
+        }
+    }
+});

components/loadMore/loadMore.json

@@ -0,0 +1,3 @@
+{
+    "component": true
+  }

components/loadMore/loadMore.wxml

@@ -0,0 +1,9 @@
+<view class="load-more" style="visibility: {{ loadVisible ? 'visible': 'hidden'}}">
+  <view class="more-data" wx:if="{{loadType === 'more'}}">
+    <image src="../../images/loading.gif" />
+    <view class="content">加载中...</view>
+  </view>
+  <view class="no-data" wx:elif="{{loadType === 'none'}}">
+    <view class="content">没有更多了~</view>
+  </view>
+</view>

components/loadMore/loadMore.wxss

@@ -0,0 +1,33 @@
+.load-more {
+    width: 100%;
+    height: 100rpx;
+  }
+  
+  .load-more .more-data {
+    width: 100%;
+    height: 100%;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+  }
+  .load-more .more-data image {
+    width: 35rpx;
+    height: 35rpx;
+    margin-right: 10rpx;
+  }
+  .load-more .more-data .content {
+    font-size: 28rpx;
+    color: #999;
+  }
+  
+  .load-more .no-data {
+    width: 100%;
+    height: 100%;
+    text-align: center;
+    line-height: 100rpx;
+  }
+  .load-more .no-data .content {
+    font-size: 28rpx;
+    color: #999;
+  }
+  

components/noData/nodata.js

@@ -0,0 +1,14 @@
+"use strict";
+Component({
+    properties: {
+        isShow: {
+            type: Boolean
+        },
+        top:{
+            type:Boolean,
+            value:false
+        }
+    },
+    data: {},
+    methods: {}
+});

components/noData/nodata.json

@@ -0,0 +1,3 @@
+{
+    "component": true
+  }

components/noData/nodata.wxml

@@ -0,0 +1,6 @@
+<!--components/nodata/nodata.wxml-->
+<view class="box" wx:if="{{isShow}}" style="margin-top:{{top?'400rpx':''}}">
+    <!-- <image src="../../images/nodata.png"  class="image"/> -->
+    <text class="text">暂无数据~</text>
+</view>
+

components/noData/nodata.wxss

@@ -0,0 +1,20 @@
+/* components/nodata/nodata.wxss */
+.box{
+    width: 100%;
+    height: auto;
+    box-sizing: border-box;
+    text-align: center;
+    margin-top: 100rpx;
+}
+.image{
+    width: 450rpx;
+    height: 240rpx;
+}
+.text{
+    width: 100%;
+    height: auto;
+    font-size: 28rpx;
+    color: #BCBCBC;
+    display: block;
+    margin: 0 auto;
+}

pages/index/index.js

@@ -1,48 +1,80 @@
 // index.js
 // 获取应用实例
 const app = getApp()
-
+import {getIntelligentMessage} from "../../utils/api"
 Page({
   data: {
-    motto: 'Hello World',
+    selectList:['全部信息','居民信息采集','房屋信息采集','社区满意度自评'],
-    userInfo: {},
+    selectValue:0,
-    hasUserInfo: false,
+    pageSize:10,
-    canIUse: wx.canIUse('button.open-type.getUserInfo'),
+    pageNo:1,
-    canIUseGetUserProfile: false,
+    tableData:[],
-    canIUseOpenData: wx.canIUse('open-data.type.userAvatarUrl') && wx.canIUse('open-data.type.userNickName') // 如需尝试获取用户信息可改为false
+    lowerThreshold:'10',
+    loadMoreVisible:false,
+    loadMoreType: "none",
+    nodata:false
   },
   // 事件处理函数
-  bindViewTap() {
+ 
-    wx.navigateTo({
+  onLoad() {
-      url: '../logs/logs'
+    this.setData({
+        statusHeight: app.globalData.deviceInfo.statusHeight,
+        navigationHeight: app.globalData.deviceInfo.navigationHeight,
       })
+      this.getIntelligentMessage()
   },
-  onLoad() {
+ 
-    if (wx.getUserProfile) {
+onScrollToLower(e){
+    console.log(e);
+    if (this.data.loadMoreType === 'more') {
         this.setData({
-        canIUseGetUserProfile: true
+          loadMoreVisible: true,
         })
+        this.data.pageNo += 1
+        this.getIntelligentMessage()
       }
 },
-  getUserProfile(e) {
+  getIntelligentMessage(){
-    // 推荐使用wx.getUserProfile获取用户信息，开发者每次通过该接口获取用户个人信息均需用户确认，开发者妥善保管用户快速填写的头像昵称，避免重复弹窗
+    this.setData({
-    wx.getUserProfile({
+        loadMoreVisible: true,
-      desc: '展示用户信息', // 声明获取用户个人信息后的用途，后续会展示在弹窗中，请谨慎填写
+        nodata: false,
-      success: (res) => {
+        loadMoreType: "more",
-        console.log(res)
+      })
+    const parm = {
+        type:this.data.selectValue == 0? null :this.data.selectValue - 1,
+        readFlag:0,
+        limit:this.data.pageSize,
+        page:this.data.pageNo
+    }
+    if(!parm.type) delete parm.type
+    getIntelligentMessage(parm).then(res=>{
+        console.log(res);
+        this.setData({
+        loadMoreType: res.data.list.length === this.data.pageSize ? 'more' : 'none',
+        tableData: this.data.tableData.concat(res.data.list),
+        })
+        console.log(this.data.loadMoreType);
+        console.log(res.data.list.length);
+        if (this.data.tableData.length == 0) {
             this.setData({
-          userInfo: res.userInfo,
+              loadMoreVisible: false,
-          hasUserInfo: true
+              nodata: true
             })
           }
+    }).catch(err=>{
+        console.log(err);
+        this.setData({
+            loadMoreVisible: false,
+            nodata: true,
+          })
     })
   },
-  getUserInfo(e) {
+
-    // 不推荐使用getUserInfo获取用户信息，预计自2021年4月13日起，getUserInfo将不再弹出弹窗，并直接返回匿名的用户个人信息
+  handleChangeFilter(e){
-    console.log(e)
     this.setData({
-      userInfo: e.detail.userInfo,
+        selectValue:e.detail.value,
-      hasUserInfo: true
+        tableData:[],
     })
+    this.getIntelligentMessage()
   }
 })

pages/index/index.json

@@ -1,4 +1,7 @@
 {
-  "usingComponents": {},
+  "navigationStyle": "custom",
-  "navigationBarTitleText": "消息"
+ "usingComponents": {
+    "load-more": "../../components/loadMore/loadMore",
+    "no-data": "../../components/noData/nodata"
+ }
 }

pages/index/index.wxml

@@ -0,0 +1,40 @@
+<view class="header">
+    <image class="header-bg" src="../../images/message/header_bg.png" mode="widthFix" />
+    <view class="navigation" style="height: {{navigationHeight}}px; top: {{statusHeight}}px;">
+        消息
+    </view>
+    <view class="content">
+            <view class="h2">消息展示平台</view>
+            <view class="tag"> <image src="../../images/tag.png" mode=""/> 快速查看</view>
+    </view>
+</view>
+<view class="select">
+    <view>
+    <picker mode="selector" range="{{selectList}}" value="{{selectValue}}" bindchange="handleChangeFilter" >
+        <view  >{{selectValue == 1?'居民信息采集':selectValue == 2?'房屋信息采集':selectValue == 3?'社区满意度自评':'全部信息'}}</view>
+    </picker>
+    <image src="../../images/select.png" mode=""/></view>
+    <view class="delete"> <image src="../../images/delete.png" mode=""/> 全部已读</view>
+</view>
+<view class="content">
+    <scroll-view class="scroll" scroll-y="{{true}}" lower-threshold="{{ lowerThreshold }}" bindscrolltolower="onScrollToLower">
+        <view class="card" wx:for="{{tableData}}" >
+            <view class="title {{item.delFlag == '1'?'gray':''}}" >{{item.content}}</view>
+            <view class="type">
+                <image src="../../images/resi.png" wx:if="{{item.msgType == 'resident_base_info'}}" mode=""/>
+                <image src="../../images/house.png" wx:if="{{item.msgType == 'community_house'}}" mode=""/>
+                <image src="../../images/satisfaction.png" wx:if="{{item.msgType == '2'}}" mode=""/>
+                <view class="{{item.msgType == 'resident_base_info'?'cyan cyanBg':item.msgType == 'community_house'?'yellow  yellowBg':'blue blueBg'}}">{{item.msgType == 'resident_base_info'?'居民信息采集':item.msgType == 'community_house'?'房屋信息采集':'满意度测评'}} </view>
+            </view>
+            <view class="bottom">
+                <view class="flex_box">
+                    <view wx:if="{{item.msgType == '2'}}">测评打分:</view><view class="{{item.msgType == '2'?'blue':''}}">{{item.deptName || '--'}}</view><view wx:if="{{item.msgType == '2'}}">分</view>
+                </view> 
+                <text>{{item.createdTime}}</text>
+             </view>
+    </view>
+    <load-more loadVisible="{{loadMoreVisible}}" loadMoreType="{{loadMoreType}}" ></load-more>
+    <no-data isShow="{{nodata}}" wx:if="{{nodata}}"></no-data>
+    </scroll-view>
+ 
+</view>

pages/index/index.wxss

@@ -1,19 +1,182 @@
 /**index.wxss**/
-.userinfo {
+page {
+    width: 100%;
+    min-height: 100vh;
+    overflow: hidden auto ;
+    background-color: #f7f7f7;
+  }
+.header {
+    width: 100%;
+    height: 464rpx;
+    /* position: fixed;
+    top: 0;
+    left: 0;
+    z-index: 1000; */
+}
+.header .header-bg {
+    width: 100%;
+    height: 444rpx;
+    position: absolute;
+    height: 100%;
+    z-index: -999;
+}
+.header .navigation {
+    width: 100%;
     display: flex;
-  flex-direction: column;
     align-items: center;
-  color: #aaa;
+    justify-content: center;
+    color: #333333;
+    font-size: 32rpx;
+    position: relative;
+    z-index: 100;
 }
-
+.header .content{
-.userinfo-avatar {
+    margin: 140rpx 0 0 69rpx;
+}
+.header .content .h2{
+    font-size: 44rpx;
+    font-family: PingFang SC;
+    font-weight: 800;
+    color: #333333;
+    margin-bottom: 40rpx;
+}
+.header .content .tag{
+    width: 170rpx;
+    height: 50rpx;
+    position: relative;
+    line-height: 48rpx;
+    font-size: 28rpx;
+    font-family: PingFang SC;
+    font-weight: 500;
+    color: #FFFFFF;
+    padding-left: 15rpx;
+}
+.header .content .tag image {
+    width: 170rpx;
+    height: 50rpx;
+    position: absolute;
+    top: 0;
+    left: 0;
+    z-index: -888;
+}
+.select{
+    width: 100%;
+    height: 90rpx;
+    background-color: #fff;
+    display: flex;
+    justify-content: space-between;
+    box-sizing: border-box;
+    padding: 0 40rpx;
+    align-items: center;
+}
+.select view {
+    display: flex;
+    align-items: center;
+    font-size: 30rpx;
+    font-family: PingFang SC;
+    font-weight: 500;
+    color: #3A80E7;
+}
+.select view image{
+    width: 16rpx;
+    height: 16rpx;
+    margin: 0 9rpx;
+}
+.select .delete {
+    font-size: 28rpx;
+    font-family: PingFang SC;
+    font-weight: 500;
+    color: #999999;
+}
+.select .delete image{
+    width: 30rpx;
+    height: 30rpx;
+}
+.content{
+    width: 100%;
+    /* height: calc(100vh - 560rpx);
+    overflow-y: scroll; */
+    padding:0 20rpx ;
+    box-sizing: border-box;
+}
+.content .scroll {
+    height: calc(100vh - 560rpx);
+    overflow-y: scroll;
+}
+.content .card{
+    width: 100%;
+    background-color: #fff;
+    display: flex;
+    height: 236rpx;
+    flex-direction: column;
+    border-radius: 20rpx;
+    padding: 0 30rpx;
+    box-sizing: border-box;
+    margin-top: 20rpx;
+    overflow: hidden;
+}
+.blue{
+    color:#5693EE;
+}
+.yellow{
+    color:#E2944D;
+}
+.cyan{
+    color: #2EB4F2 ;
+}
+.cyanBg{
+    background: rgba(56,189,253,0.1);
+}
+.yellowBg{
+    background: rgba(248,188,122,0.1);
+}
+.blueBg{
+    background: rgba(86,147,238,0.1);
+}
+.gray{
+    color: #999999 !important;
+}
+.content .card .title{
+    font-size: 32rpx;
+    height: 90rpx;
+    line-height: 90rpx;
+    border-bottom:  1px solid #EAEAEA;
+    font-family: PingFang SC;
+    font-weight: 500;
+    color: #333333;
+    margin-bottom: 24rpx;
     overflow: hidden;
-  width: 128rpx;
+    text-overflow: ellipsis;
-  height: 128rpx;
+    white-space: nowrap;
-  margin: 20rpx;
-  border-radius: 50%;
 }
 
-.usermotto {
+.content .card .type {
-  margin-top: 200px;
+    width: fit-content;
+    display: flex;
+    font-size: 26rpx;
+    border-radius: 4rpx;
+    background-color: rgba(56,189,253,0.1);
+    padding: 8rpx 10rpx;
+}
+.content .type image {
+    width: 30rpx;
+    height: 30rpx;
+}
+.content .card .type text{
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+}
+.content .card .bottom{
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    font-size: 28rpx;
+    font-family: PingFang SC;
+    color: #999999;
+    margin-top: 27rpx;
+}
+.content .card .bottom .flex_box{
+    display: flex;
+    justify-content: left;
 }

pages/login/login.js

@@ -100,6 +100,7 @@ Page({
         wx.login({
           success: (res) => {
               parm.wxCode = res.code
+              console.log(parm.wxCode);
               userLoginlog(parm).then((res)=>{
                   wx.hideLoading()
                  console.log(res);
@@ -107,6 +108,7 @@ Page({
                         wx.switchTab({
                           url: '/pages/work/work',
                         })
+                        wx.setStorageSync('token', res.data.token)
                  }else{
                      wx.showToast({
                        title: res.msg,

pages/login/login.wxss

@@ -43,6 +43,7 @@ page {
     background: #F5F5FA;
     border-radius: 47rpx;
     padding-left: 80rpx;
+    font-size: 32rpx;
   }
   .login image {
       width: 46rpx;

utils/api.js

@@ -1,11 +1,11 @@
 var fly = require('./request.js')
 module.exports = {
-  getInvitation:getInvitation,
+  getIntelligentMessage:getIntelligentMessage,
   userLoginlog:userLoginlog,
 }
 
-function getInvitation(id){
+function getIntelligentMessage(param){
-  return fly.get(`app-user/user/ma/v3/getInvitation/${id}`)
+  return fly.get(`message/intelligentMessage/page`,param)
 }
 /**
  *小程序用户登录日志