From 9655b129a296b4a5cc5e39d60fc022cf5ac06879 Mon Sep 17 00:00:00 2001 From: 马宇豪 <978517621@qq.com> Date: 星期五, 04 八月 2023 13:43:55 +0800 Subject: [PATCH] 提交样式 --- pages/tabBar/information/information.vue | 130 +++++++++++++++++++++++++++++++------------ 1 files changed, 93 insertions(+), 37 deletions(-) diff --git a/pages/tabBar/information/information.vue b/pages/tabBar/information/information.vue index 89f5e68..3c3e937 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"> @@ -16,30 +19,36 @@ <u-checkbox-group > <u-checkbox v-model="isReadOnly" :checked="isReadOnly" @change="chooseRead"></u-checkbox>只显示审核通过 </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"> - <text>[{{item.colorContent}}]</text> - <text>{{item.title}},{{item.content}}</text> + <view class="top"> + <view class="textContent"> + <text>[{{item.colorContent}}]</text> + <text>{{item.title}}</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}} + </u-button> + <u-button v-else-if="item.buttonContent == '已驳回'" size="mini" class="buttonCo" style="background-color:rgb(153, 148, 143);color: white"> + {{item.buttonContent}} + </u-button> + <u-button v-else type="error" size="mini" class="buttonCo"> + {{item.buttonContent}} + </u-button> + </view> </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}} - </u-button> - <u-button v-else-if="item.buttonContent == '已驳回'" size="mini" class="buttonCo" style="background-color:rgb(153, 148, 143);color: white"> - {{item.buttonContent}} - </u-button> - <u-button v-else type="error" size="mini" class="buttonCo"> - {{item.buttonContent}} - </u-button> - </view> + <view class="bottom"> + {{item.content}} + </view> </view> - </view> - </view> + </scroll-view> +<!-- </view>--> <view v-else> <u-empty margin-top="40%" text="数据为空" mode="data"></u-empty> </view> @@ -60,11 +69,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 +90,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 +114,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) { @@ -109,12 +133,30 @@ }, //下拉刷新 onPullDownRefresh() { - console.log('refresh'); setTimeout(() => { uni.stopPullDownRefresh(); 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 +204,7 @@ flex-direction: column; padding-bottom: 65px; } + .buttonGroup{ margin: 18px 12px; display: flex; @@ -216,6 +259,7 @@ } .listHead{ padding: 12px; + height: 26px; display: flex; align-items: center; justify-content: space-between; @@ -223,11 +267,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; @@ -235,28 +283,36 @@ padding: 0 12px 15px; border-bottom: 1px solid #ebebeb; - &:last-of-type{ - border-bottom: none; - } + //&: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); + .top{ + width: 100%; + display: flex; + align-items: center; + justify-content: space-between; + .textContent{ + width: calc(100% - 90px); + text-overflow: ellipsis; + overflow: hidden; + white-space: nowrap; + } + + .buttonContent{ + width: 80px; + } + } + .bottom{ + width: 100%; + font-size: 14px; + color: #666; text-overflow: ellipsis; overflow: hidden; white-space: nowrap; - } - - .buttonContent{ - width: 80px; } } .buttonCo{ -- Gitblit v1.9.2