From 419ad623db22db5fa34e88ab771d2161fe12e920 Mon Sep 17 00:00:00 2001 From: 马宇豪 <978517621@qq.com> Date: 星期二, 01 八月 2023 16:08:25 +0800 Subject: [PATCH] 提交上拉加载 --- pages/tabBar/examine/examine.vue | 173 +++++++++++++++++++++++++++++++++++++++------------------ 1 files changed, 118 insertions(+), 55 deletions(-) diff --git a/pages/tabBar/examine/examine.vue b/pages/tabBar/examine/examine.vue index bf4a83c..90c1acd 100644 --- a/pages/tabBar/examine/examine.vue +++ b/pages/tabBar/examine/examine.vue @@ -5,41 +5,47 @@ <!-- 状态栏占位 --> <view class="statusBar" :style="{ paddingTop: statusBarHeight + 'px' }"></view> <!-- 真正的导航栏内容 --> - <view class="navBar" > - <view class="barText">工作通知审核</view> + <view style="display: flex; flex-direction: column;" > + <view class="navBar"> + <u-icon style=" margin-left: -25px;" name="arrow-left" color="black" size="17" @click="goBack" /> + <view class="barText">工作通知审核</view> + </view> </view> </view> <!-- 页面内容 --> - <view class="contentList"> + <view class="controlBar"> <view class="buttonGroup"> - <view style="display: flex;"> - <view class="buttonAll all" - :class="{ 'active': selectedSaleAnalysis === 'all'}" - @click="handleButtonClick({label: 'all',name: '全部'})"> - 全部 - </view> - <view v-for="(button, index) in buttons" :key="index" class="buttonItem" - :class="{ 'active': selectedSaleAnalysis === button.label, - 'all': button.label === 'all', - 'red': button.label === 'red', - 'orange':button.label === 'orange', - 'yellow':button.label === 'yellow', - 'blue': button.label === 'blue'}" - @click="handleButtonClick(button)"> - {{ button.name }} - </view> + <view class="buttonItem all" + :class="{ 'active': selectedSaleAnalysis === 'all'}" + @click="handleButtonClick({label: 'all',name: '全部'})"> + 全部 </view> - <view class="switchBtn"> - <text style="margin-right: 7px;">仅紧临</text> - <u-switch v-model="checked" size="20" @change="clickSwitch"></u-switch> + <view v-for="(button, index) in buttons" :key="index" class="buttonItem" + :class="{ 'active': selectedSaleAnalysis === button.label, + 'all': button.label === 'all', + 'red': button.label === 'red', + 'orange':button.label === 'orange', + 'yellow':button.label === 'yellow', + 'blue': button.label === 'blue'}" + @click="handleButtonClick(button)"> + {{ button.name }} </view> </view> - <view class="examineList"> - <view class="listHead"> - <u-checkbox-group style="margin-left: 15px;"> - <u-checkbox v-model="isReadOnly" :checked="isReadOnly" @change="chooseRead"></u-checkbox>只显示待审核 + <view class="listHead"> + <view class="switchBtn"> + <u-checkbox-group> + <u-checkbox v-model="isReadOnly" :checked="isReadOnly" @change="chooseRead"></u-checkbox> </u-checkbox-group> + <text>只显示待审核</text> </view> + <view class="switchBtn"> + <u-switch v-model="checked" size="20" @change="clickSwitch" style="margin-right: 6px"></u-switch> + <text>仅紧临</text> + </view> + </view> + </view> + <view style="display: flex;flex-direction: column;margin-bottom: 55px;"> + <view class="examineList"> <view class="listContent" v-if="examineList.length > 0"> <view v-for="(item, index) in examineList" :key="index" class="itemContent"> <view class="content" @click="toDetail(item)"> @@ -61,15 +67,11 @@ </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> - <tabBar :currentPagePath="page"></tabBar> + <!-- <tabBar :currentPagePath="page"></tabBar> --> </view> </template> @@ -78,13 +80,13 @@ import {getExamine} from '../../../api/examine.js' export default { components:{ - tabBar + // tabBar }, data() { return { data: { pageIndex: 1, - pageSize: 10, + pageSize: 999999999, searchParams: { emergType: null,//1-紧急;2-常规 warningLevel: null,//1-红色预警;2-橙色预警;3-黄色预警;4-蓝色预警 @@ -126,6 +128,12 @@ this.getExanineList(); }, methods: { + goBack() { + console.log("1111") + uni.switchTab({ + url:'/pages/tabBar/firstPage/firstPage' + }); + }, getExanineList() { this.data.searchParams.reviewStatus = this.isReadOnly ? 1 : null; this.data.searchParams.emergType = this.checked ? 1 : null; @@ -177,7 +185,7 @@ </script> -<style> +<style lang="scss" scoped> .box { display: flex; flex-direction: column; @@ -193,12 +201,13 @@ z-index: 1; } .navBarBox .navBar { - background-color:lightgrey; - height: 25px; + 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; @@ -210,7 +219,7 @@ .statusBar{ background-color:lightgrey; } -.contentList{ +/* .contentList{ display: flex; flex-direction: column; } @@ -232,56 +241,104 @@ border-radius: 5px; font-size: 12px; font-weight: 700; +} */ +.controlBar{ + margin: 12px 12px 0; + padding: 12px; + height: 90px; + box-sizing: border-box; + display: flex; + flex-direction: column; + justify-content: space-between; + width: calc(100% - 24px); + background: #fff; + border-radius: 5px; + box-shadow: 0 3px 12px rgba(0,0,0,0.05); + + .buttonGroup{ + display: flex; + align-items: center; + justify-content: space-between; + margin-bottom: 12px; + } + + .listHead{ + display: flex; + align-items: center; + justify-content: space-between; + } } .buttonItem{ - margin-left:5px; + width: calc(20% - 4px); color: white; display: flex; flex-direction: row; justify-content: center; align-items: center; - width: 47px; height: 30px; border-radius: 5px; + &.active{ + border: 1px solid rgba(0,0,0,.4); + box-shadow: 0 1px 3px rgba(0,0,0,0.1); + } +} +.all { + background-color: rgb(17,204,33); + &.active{ + background-image: linear-gradient(#22992d,#12da23); + } } .active { border: 1.5px solid #8d8d8d; } -.all { - background-color: rgb(17,204,33); -} .red { - background-color: red; + background-color: #ff5555; + &.active{ + background:linear-gradient(#dc2f2f, #ff5b5b); + } } .orange { background-color: rgb(251, 158, 13); + &.active{ + background: linear-gradient(#e28e0c,#ffa90e); + } } .yellow { background-color: rgb(255, 223, 37); + &.active{ + background: linear-gradient(#e6c921,#ffef28); + } } .blue { - background-color: rgb(2, 167, 240); + background-color: #409EFF; + &.active{ + background: linear-gradient(#3a8ee6,#44a9ff); + } } .switchBtn{ display: flex; align-items: center; } -.listHead{ - display: flex; - align-items: center; - background-color:lightgrey; - height: 35px; -} +// .listHead{ +// display: flex; +// align-items: center; +// background-color:lightgrey; +// height: 35px; +// } .listContent{ display: flex; flex-direction: column; - padding: 10px 10px; + margin: 0 12px; + background: #fff; + border-radius: 5px; + box-shadow: 0 3px 12px rgba(0,0,0,0.05); } .itemContent{ font-size: 16px; - color: gray; - margin-top: 10px; - border-bottom: 1px solid lightgrey; + color: #333; + margin-top: 15px; + padding: 0 12px 15px; + border-bottom: 1px solid #ebebeb; } .content{ @@ -293,4 +350,10 @@ margin-top: 5px; margin-bottom: 10px; } +.examineList{ + margin-top: 12px; + height: calc(100vh - 266px); + overflow: hidden; + overflow-y: scroll; +} </style> \ No newline at end of file -- Gitblit v1.9.2