From 9461caf2a459a7ed1eb16f8f439c02cfbcf1930b Mon Sep 17 00:00:00 2001 From: zhouwenxuan <1175765986@qq.com> Date: 星期三, 02 八月 2023 15:06:08 +0800 Subject: [PATCH] 新增功能 --- pages/tabBar/information/information.vue | 137 +++++++++++++++++++++++++++++++++------------ 1 files changed, 99 insertions(+), 38 deletions(-) diff --git a/pages/tabBar/information/information.vue b/pages/tabBar/information/information.vue index fd4674b..b8b43a7 100644 --- a/pages/tabBar/information/information.vue +++ b/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,11 +21,15 @@ </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)"> - <text>[{{item.colorContent}}]</text> - <text>{{item.title}},{{item.content}}</text> + <view class="textContent"> + <text>[{{item.colorContent}}]</text> + <text>{{item.title}},{{item.content}}</text> + </view> <view class="buttonContent"> <u-button v-if="item.buttonContent == '审核通过'" size="mini" class="buttonCo" style="background-color:rgb(17, 204, 33);color: white"> {{item.buttonContent}} @@ -35,15 +42,11 @@ </u-button> </view> </view> - </view> - </view> + </scroll-view> +<!-- </view>--> <view v-else> - <u-empty - mode="data" - icon="http://cdn.uviewui.com/uview/empty/data.png" - margin-top="50%"> - </u-empty> + <u-empty margin-top="40%" text="数据为空" mode="data"></u-empty> </view> </view> </view> @@ -62,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, @@ -80,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 ? '黄色预警':'蓝色预警'; @@ -96,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) { @@ -117,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(); } @@ -125,7 +162,7 @@ </script> -<style> +<style lang="scss" scoped> .box { display: flex; flex-direction: column; @@ -141,12 +178,13 @@ z-index: 1; } .navBarBox .navBar { - background-color:lightgrey; - height: 40px; - display: flex; - flex-direction: row; - justify-content: center; - align-items: center; + background-color:#fff; + height: 50px; + display: flex; + flex-direction: row; + justify-content: center; + align-items: center; + box-shadow: 0 3px 12px rgba(0,0,0,0.05); } .barText{ text-align: center; @@ -161,7 +199,9 @@ .contentList{ display: flex; flex-direction: column; + padding-bottom: 65px; } + .buttonGroup{ margin: 18px 12px; display: flex; @@ -215,38 +255,59 @@ align-items: center; } .listHead{ - display: flex; - align-items: center; - /* background-color:lightgrey; */ - height: 25px; - padding: 10px 10px; + padding: 12px; + height: 26px; + display: flex; + align-items: center; + justify-content: space-between; } .listContent{ display: flex; flex-direction: column; - padding: 0 10px; + 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: gray; - margin-top: 10px; - border-bottom: 1px solid lightgrey; - + font-size: 16px; + color: #333; + margin-top: 15px; + padding: 0 12px 15px; + border-bottom: 1px solid #ebebeb; + + &:last-of-type{ + border-bottom: none; + } } .content{ + width: 100%; + display: flex; + align-items: center; + justify-content: space-between; text-overflow: ellipsis; overflow: hidden; white-space: nowrap; + + .textContent{ + width: calc(100% - 90px); + text-overflow: ellipsis; + overflow: hidden; + white-space: nowrap; + } + + .buttonContent{ + width: 80px; + } } .buttonCo{ - margin-top: 5px; - margin-bottom: 10px; + font-size: 13px; } -.buttonContent{ - float: right; - width: 80px; - margin-top: -5px; -} + /* .divider{ height: 1px; background-color: gray; -- Gitblit v1.9.2