提交上拉加载

马宇豪

2023-08-01 419ad623db22db5fa34e88ab771d2161fe12e920

提交上拉加载

 pages/tabBar/current/current.vue

@@ -9,6 +9,9 @@
                <view class="barText">信息查看</view>
            </view>
        </view>
    <div v-if="loading" style='display: flex;justify-content: center;position: absolute;width:100%;top: 40%;left: 0'>
      <u-loading-icon></u-loading-icon>
    </div>
        <!-- 页面内容 -->
        <view class="controlBar">
            <view class="buttonGroup">
@@ -38,7 +41,9 @@
        </view>
        <view style="display: flex;flex-direction: column;margin-bottom: 55px;">
            <view class="examineList">
                <view class="listContent" v-if="InfoList.length > 0">
<!--                <view class="listContent" v-if="InfoList.length > 0">-->
        <scroll-view :scroll-top="scrollTop" scroll-y="true" class="listContent" @scrolltoupper="upper" v-if="InfoList.length > 0"
                     @scrolltolower="lower" @scroll="scroll" lower-threshold="50">
                    <view v-for="(item, index) in InfoList" :key="index" class="itemContent">
                        <view class="content">
                            <text>[{{item.colorContent}}]</text>
@@ -62,7 +67,8 @@
                            </view>
                        </view>
                    </view>
                </view>
        </scroll-view>
<!--                </view>-->
                <view v-else>
                    <u-empty margin-top="40%" text="数据为空" mode="data"></u-empty>
                </view>
@@ -84,12 +90,15 @@
            return {
                data: {
                    pageIndex: 1,
                    pageSize: 10000000,
                    pageSize: 10,
                    searchParams: {
                        emergType: null,//1-紧急；2-常规
                        warningLevel: null,//1-红色预警；2-橙色预警；3-黄色预警；4-蓝色预警
                    }
                },
        total: 0,
        scrollTop: 0,
        loading: false,
                page: 'pages/tabBar/current/current',
                checked: false,
                isReadOnly: false,
@@ -125,31 +134,42 @@
            uni.hideTabBar();
        },
        onShow() {
      this.data.pageIndex = 1
            this.getInfoList();
        },
        methods: {
            goBack() {
                console.log("1111")
                uni.switchTab({
                    url:'/pages/tabBar/firstPage/firstPage'
                });
            },
            getInfoList() {
        this.loading = true
                this.data.searchParams.emergType = this.checked ? 1 : null;
                this.data.searchParams.warningLevel = this.selectedSaleAnalysis == 'all' ? null : this.selectedSaleAnalysis =='red' ? 1 : this.selectedSaleAnalysis =='orange' ? 2: this.selectedSaleAnalysis =='yellow'? 3 : 4;
                getPublished(this.data).then(res => {
                    if(res.code == 100) {
                        this.InfoList = res.data
            let list = res.data?res.data: [];
            if (res.pageIndex != 1) {
              this.InfoList = this.InfoList.concat(list)
            } else {
              this.InfoList = list;
            }
            this.total = res.total
                        if(this.InfoList && this.InfoList.length > 0) {
                            this.InfoList.forEach((item, index) => {
                                this.InfoList[index].colorContent = item.warningLevel == 1 ? '红色预警': item.warningLevel == 2 ? '橙色预警': item.warningLevel == 3 ? '黄色预警':'蓝色预警'; 
                                this.InfoList[index].warningLevel = item.warningLevel;
                            });
                        }
                    }
                    }else{
            uni.$u.toast(res.msg)
          }
          this.loading = false
                })
            },
            handleButtonClick(button) {
        this.data.pageIndex = 1
                this.selectedSaleAnalysis = button.label;
                this.getInfoList();
            },
@@ -186,8 +206,26 @@
                }, 1000);
            },
            clickSwitch(e) {
        this.data.pageIndex = 1
                this.getInfoList();
            }
            },

      upper: function(e) {
        // console.log(e)
      },
      lower: function(e) {
        if (this.data.pageIndex * this.data.pageSize >= this.total){
          uni.$u.toast('已加载全部数据')
          return
        }
        //并且让页码+1,调用获取数据的方法获取第二页数据
        this.data.pageIndex++
        //此处调用自己获取数据列表的方法
        this.getInfoList()
      },
      scroll: function(e) {
        // console.log(e)
      },
        }
    }

@@ -328,12 +366,14 @@
    align-items: center;
}
.listContent{
    display: flex;
    flex-direction: column;
    margin: 0 12px;
    background: #fff;
    border-radius: 5px;
    box-shadow: 0 3px 12px rgba(0,0,0,0.05);
  display: flex;
  flex-direction: column;
  width: calc(100% - 24px);
  margin: 0 12px;
  background: #fff;
  border-radius: 5px;
  box-shadow: 0 3px 12px rgba(0,0,0,0.05);
  height: 100%;
}
.itemContent{
    font-size: 16px;

 pages/tabBar/information/information.vue

@@ -9,6 +9,9 @@
                <view class="barText">信息发布</view>
            </view>
        </view>
    <div v-if="loading" style='display: flex;justify-content: center;position: absolute;width:100%;top: 40%;left: 0'>
      <u-loading-icon></u-loading-icon>
    </div>
        <!-- 页面内容 -->
        <view class="contentList">
            <view class="examineList">
@@ -18,7 +21,9 @@
                    </u-checkbox-group>
                    
                </view>
                <view class="listContent" v-if="informationList.length > 0">
<!--                <view class="listContent" v-if="informationList.length > 0">-->
          <scroll-view :scroll-top="scrollTop" scroll-y="true" class="listContent" @scrolltoupper="upper" v-if="informationList.length > 0"
                       @scrolltolower="lower" @scroll="scroll" lower-threshold="50">
                    <view v-for="(item, index) in informationList" :key="index" class="itemContent">
                        <view class="content" @click="toDetail(item)">
              <view class="textContent">
@@ -37,9 +42,9 @@
                                </u-button>
                            </view>
                        </view>
						
                    </view>
                </view>
          </scroll-view>
<!--                </view>-->
                <view v-else>
                    <u-empty margin-top="40%" text="数据为空" mode="data"></u-empty>
                </view>
@@ -60,11 +65,14 @@
            return {
                data: {
                    pageIndex: 1,
                    pageSize: 10000000,
                    pageSize: 10,
                    searchParams: {
                        reviewStatus: null//2：已审核,null:全部
                    }
                },
        total: 0,
        scrollTop: 0,
        loading: false,
                checked: false,
                isReadOnly: false,
                statusBarHeight: 0,
@@ -78,14 +86,22 @@
            uni.hideTabBar();
        },
        onShow() {
      this.data.pageIndex = 1
            this.getInformationList();
        },
        methods: {
            getInformationList() {
        this.loading = true
                this.data.searchParams.reviewStatus = this.isReadOnly ? 2 : null;
                getInfo(this.data).then(res => {
                    if (res.code == 100){
                        this.informationList = res.data ? res.data : [];
                        let list = res.data?res.data: [];
            if (res.pageIndex != 1) {
              this.informationList = this.informationList.concat(list)
            } else {
              this.informationList = list;
            }
            this.total = res.total
                        if(this.informationList.length > 0) {
                            this.informationList.forEach((item, index) => {
                                this.informationList[index].colorContent = item.warningLevel == 1 ? '红色预警': item.warningLevel == 2 ? '橙色预警': item.warningLevel == 3 ? '黄色预警':'蓝色预警';
@@ -94,11 +110,15 @@
                                this.informationList[index].warningLevel = item.warningLevel;
                            })
                        }
                    }
                    }else{
            uni.$u.toast(res.msg)
          }
          this.loading = false
                })
            },
            chooseRead(e) {
                this.isReadOnly = e;
        this.data.pageIndex = 1
                this.getInformationList();
            },
            toDetail(item) {
@@ -115,6 +135,25 @@
                    this.getInformationList();
                }, 1000);
            },


      upper: function(e) {
        // console.log(e)
      },
      lower: function(e) {
        if (this.data.pageIndex * this.data.pageSize >= this.total){
          uni.$u.toast('已加载全部数据')
          return
        }
        //并且让页码+1,调用获取数据的方法获取第二页数据
        this.data.pageIndex++
        //此处调用自己获取数据列表的方法
        this.getInformationList()
      },
      scroll: function(e) {
        // console.log(e)
      },

            clickSwitch(e) {
                this.getInformationList();
            }
@@ -162,6 +201,7 @@
    flex-direction: column;
  padding-bottom: 65px;
}

.buttonGroup{
    margin: 18px 12px;
    display: flex;
@@ -216,6 +256,7 @@
}
.listHead{
  padding: 12px;
  height: 26px;
  display: flex;
  align-items: center;
  justify-content: space-between;
@@ -223,11 +264,15 @@
.listContent{
    display: flex;
    flex-direction: column;
  width: calc(100% - 24px);
  margin: 0 12px;
  background: #fff;
  border-radius: 5px;
  box-shadow: 0 3px 12px rgba(0,0,0,0.05);
  height: calc(100vh - 162px);
}


.itemContent{
  font-size: 16px;
  color: #333;

 pages/tabBar/notice/notice.vue

@@ -11,6 +11,9 @@
                <!-- <view style="flex: 1;" @click="loginOut">退出</view> -->
            </view>
        </view>
    <div v-if="loading" style='display: flex;justify-content: center;position: absolute;width:100%;top: 40%;left: 0'>
      <u-loading-icon></u-loading-icon>
    </div>
        <!-- 页面内容 -->
    <view class="controlBar">
      <view class="buttonGroup">
@@ -44,7 +47,9 @@
    </view>
        <view style="display: flex;flex-direction: column;margin-bottom: 55px;">
            <view class="noticeList">
                <view class="listContent" v-if="noticeList.length > 0" >
<!--                <view class="listContent" v-if="noticeList.length > 0" >-->
        <scroll-view :scroll-top="scrollTop" scroll-y="true" class="listContent" @scrolltoupper="upper" v-if="noticeList.length > 0"
                     @scrolltolower="lower" @scroll="scroll" lower-threshold="50">
                    <view v-for="(item, index) in noticeList" :key="index" class="itemContent" >
                        <view class="content" v-if="item.isResponse" >
                                <text style="color:rgb(17, 204, 33);" @click="toDetail(item)">[已叫应]</text>
@@ -80,7 +85,8 @@
                                <!-- </view> -->
                        </view>
                    </view>
                </view>
        </scroll-view>
<!--                </view>-->
                <view v-else>
                    <u-empty margin-top="40%" text="数据为空" mode="data"></u-empty>
                </view>
@@ -112,13 +118,16 @@
                showDialog: false,
                data: {
                    pageIndex: 1,
                    pageSize: 10000000,
                    pageSize: 10,
                    searchParams: {
                        emergType: null,//1-紧急；2-常规
                        warningLevel: null,//1-红色预警；2-橙色预警；3-黄色预警；4-蓝色预警
                        readStatus: null//0-未读，1-已读
                    }
                },
        total: 0,
        scrollTop: 0,
        loading: false,
                buttons: [{
                    label: 'red',
                    name: '红'
@@ -148,6 +157,7 @@
            }
        },
        onShow () {
      this.data.pageIndex = 1
            this.tabBarLists = uni.getStorageSync('tabBarList');
            this.user.name = uni.getStorageSync('user').realName;
            this.getNoticeList();
@@ -162,6 +172,7 @@
        },
        methods: {
            getNoticeList() {
        this.loading = true
                this.noSpeak = 0;
                // this.data.searchParams.readStatus = this.isReadOnly ? 0 : null;
                this.data.searchParams.readStatus = null;
@@ -169,7 +180,14 @@
                this.data.searchParams.warningLevel =  this.selectedSaleAnalysis =='all' ? null : this.selectedSaleAnalysis =='red' ? 1 : this.selectedSaleAnalysis =='orange' ? 2: this.selectedSaleAnalysis =='yellow'? 3 : 4;
                getNotice(this.data).then(res => {
                    if (res.code == 100) {
                        this.noticeList = res.data ? res.data : [];
                        // this.noticeList = res.data ? res.data : [];
            let list = res.data?res.data: [];
            if (res.pageIndex != 1) {
              this.noticeList = this.noticeList.concat(list)
            } else {
              this.noticeList = list;
            }
            this.total = res.total
                        this.noticeListCopy = this.noticeList;
                        if (this.noticeList.length > 0) {
                            this.noticeList.forEach((item, index) => {
@@ -181,11 +199,15 @@
                                this.noticeList[index].buttonContent = item.responseStatus == 1 ? '待叫应': item.responseStatus == 2 ? '已叫应' : '超时未叫应';
                            });
                        }
                    }
                    }else{
            uni.$u.toast(res.msg)
          }
          this.loading = false
                }).catch(err=>{
                })
            },
            handleButtonClick(button) {
        this.data.pageIndex = 1
                this.selectedSaleAnalysis = button.label; 
                this.getNoticeList();
            },
@@ -236,7 +258,26 @@
                    this.getNoticeList();
                }, 1000);
            },

      upper: function(e) {
        // console.log(e)
      },
      lower: function(e) {
        if (this.data.pageIndex * this.data.pageSize >= this.total){
          uni.$u.toast('已加载全部数据')
          return
        }
        //并且让页码+1,调用获取数据的方法获取第二页数据
        this.data.pageIndex++
        //此处调用自己获取数据列表的方法
        this.getNoticeList()
      },
      scroll: function(e) {
        // console.log(e)
      },

            clickSwitch(e) {
        this.data.pageIndex = 1
                this.getNoticeList();
            },
        }
@@ -386,10 +427,12 @@
.listContent{
    display: flex;
    flex-direction: column;
  width: calc(100% - 24px);
    margin: 0 12px;
  background: #fff;
  border-radius: 5px;
  box-shadow: 0 3px 12px rgba(0,0,0,0.05);
  height: 100%;
}
.itemContent{
    font-size: 16px;

 pages/tabBar/response/response.vue

@@ -9,8 +9,13 @@
                <view class="barText">叫应记录</view>
            </view>
        </view>
    <div v-if="loading" style='display: flex;justify-content: center;position: absolute;width:100%;top: 40%;left: 0'>
      <u-loading-icon></u-loading-icon>
    </div>
        <!-- 页面内容 -->
        <view class="responseList" v-if="responseList.length > 0">
<!--        <view class="responseList" v-if="responseList.length > 0">-->
    <scroll-view :scroll-top="scrollTop" scroll-y="true" class="responseList" @scrolltoupper="upper" v-if="responseList.length > 0"
                 @scrolltolower="lower" @scroll="scroll" lower-threshold="50">
            <view v-for="(item, index) in responseList" :key="index" class="itemContent">
                <view class="timeLeft">
                    <text>{{item.time}}</text>
@@ -21,7 +26,9 @@
                    <text style="color: rgb(76, 197, 248);" @click="toDetail(item)">[查看信息详情]</text>
                </view>
            </view>
        </view>
    </scroll-view>
<!--        </view>-->

        <view v-else>
            <u-empty
                mode="data"
@@ -44,8 +51,11 @@
            return {
                data: {
                    pageIndex: 1,
                    pageSize: 10000000
                    pageSize: 10
                },
        total: 0,
        scrollTop: 0,
        loading: false,
                // 状态栏高度
                statusBarHeight: 0,
                responseList: [],
@@ -53,6 +63,7 @@
            }
        },
        onShow () {
      this.data.pageIndex = 1
            this.getResponseList();
        },
        onLoad() {
@@ -62,10 +73,16 @@
        },
        methods: {
            getResponseList() {
        this.loading = true
                getResponse(this.data).then(res => {
                    console.log("res",res);
                    if (res.code === 100) {
                        this.responseList = res.data ? res.data : [];
                        let list = res.data ? res.data : [];
            if (res.pageIndex != 1) {
              this.responseList = this.responseList.concat(list)
            } else {
              this.responseList = list;
            }
            this.total = res.total
                        if (this.responseList.length > 0) {
                            this.responseList.forEach((item, index) => {
                                this.responseList[index].time = item.responseTime.substring(0,10);
@@ -74,8 +91,10 @@
                            })
                        }
                    }else {
            uni.$u.toast(res.msg)
                        this.responseList = [];
                    }
          this.loading = false
                }).catch(err=>{})
            },
            toDetail(item) {
@@ -97,6 +116,23 @@
                    this.getResponseList();
                }, 1000);
            },

      upper: function(e) {
        // console.log(e)
      },
      lower: function(e) {
        if (this.data.pageIndex * this.data.pageSize >= this.total){
          uni.$u.toast('已加载全部数据')
          return
        }
        //并且让页码+1,调用获取数据的方法获取第二页数据
        this.data.pageIndex++
        //此处调用自己获取数据列表的方法
        this.getResponseList()
      },
      scroll: function(e) {
        // console.log(e)
      },
        }
    }
</script>
@@ -133,11 +169,12 @@
.responseList{
  display: flex;
  flex-direction: column;
  margin: 0 12px;
  width: calc(100% - 24px);
  height: calc(100vh - 124px);
  margin: 12px 12px 0;
  background: #fff;
  border-radius: 5px;
  box-shadow: 0 3px 12px rgba(0,0,0,0.05);
  margin-top: 12px;
}
.itemContent{
  display: flex;