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 | 237 +++++++++++++++++++++++++++++++++++++++------------------- 1 files changed, 159 insertions(+), 78 deletions(-) diff --git a/pages/tabBar/examine/examine.vue b/pages/tabBar/examine/examine.vue index d583e48..90c1acd 100644 --- a/pages/tabBar/examine/examine.vue +++ b/pages/tabBar/examine/examine.vue @@ -5,41 +5,53 @@ <!-- 状态栏占位 --> <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 v-for="(button, index) in buttons" :key="index" class="buttonItem" - :class="{ 'active': selectedSaleAnalysis === button.label, - '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)"> <text>[{{item.colorContent}}]</text> <text>{{item.title}},{{item.content}}</text> - <view style="float: right; width: 80px;margin-top: 3px;"> + <view style="float: right; width: 80px;margin-top: -5px;"> <u-button v-if="item.buttonContent == '已审核通过'" size="mini" class="buttonCo" style="background-color:rgb(17, 204, 33);color: white"> {{item.buttonContent}} </u-button> @@ -55,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> @@ -72,41 +80,42 @@ import {getExamine} from '../../../api/examine.js' export default { components:{ - tabBar + // tabBar }, data() { return { data: { pageIndex: 1, - pageSize: 1000, + pageSize: 999999999, searchParams: { - emergType: 1,//1-紧急;2-常规 - warningLevel: 1,//1-红色预警;2-橙色预警;3-黄色预警;4-蓝色预警 - reviewStatus: 0//1:未审核,2:已审核,3:审核已驳回 + emergType: null,//1-紧急;2-常规 + warningLevel: null,//1-红色预警;2-橙色预警;3-黄色预警;4-蓝色预警 + reviewStatus: null//1:未审核,2:已审核,3:审核已驳回 } }, page: 'pages/tabBar/examine/examine', - checked: true, + checked: false, isReadOnly: false, statusBarHeight: 0, - buttons: [{ - label: 'red', - name: '红' - }, - { - label: 'orange', - name: '橙' - }, - { - label: 'yellow', - name: '黄' - }, - { - label: 'blue', - name: '蓝' - }, + buttons: [ + { + label: 'red', + name: '红' + }, + { + label: 'orange', + name: '橙' + }, + { + label: 'yellow', + name: '黄' + }, + { + label: 'blue', + name: '蓝' + }, ], - selectedSaleAnalysis: 'red', + selectedSaleAnalysis: 'all', examineList: [], } }, @@ -119,10 +128,16 @@ 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 : 2; - this.data.searchParams.warningLevel = this.selectedSaleAnalysis =='red' ? 1 : this.selectedSaleAnalysis =='orange' ? 2: this.selectedSaleAnalysis =='yellow'? 3 : 4; + 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; getExamine(this.data).then(res => { if(res.code == 100) { this.examineList = res.data ? res.data : []; @@ -131,10 +146,10 @@ if(this.examineList.length > 0) { this.examineList.forEach((item, index) => { - this.examineList[index].colorContent = this.data.searchParams.warningLevel == 1 ? '红色预警': this.data.searchParams.warningLevel == 2 ? '橙色预警': this.data.searchParams.warningLevel == 3 ? '黄色预警':'蓝色预警'; + this.examineList[index].colorContent = item.warningLevel == 1 ? '红色预警': item.warningLevel == 2 ? '橙色预警': item.warningLevel == 3 ? '黄色预警':'蓝色预警'; this.examineList[index].buttonContent = item.reviewStatus == 1 ? '待审核': item.reviewStatus == 2 ? '已审核通过' : '已驳回'; this.examineList[index].role = 'leader'; - this.examineList[index].warningLevel = this.data.searchParams.warningLevel; + this.examineList[index].warningLevel = item.warningLevel; }); } } @@ -147,11 +162,6 @@ chooseRead(e) { this.isReadOnly = e; this.getExanineList(); - // if(e) { - // this.examineList = this.examineList.filter(item => item.reviewStatus == 1); - // }else { - // this.getExanineList(); - // } }, toDetail(item) { console.log("item",item) @@ -175,7 +185,7 @@ </script> -<style> +<style lang="scss" scoped> .box { display: flex; flex-direction: column; @@ -191,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; @@ -208,7 +219,7 @@ .statusBar{ background-color:lightgrey; } -.contentList{ +/* .contentList{ display: flex; flex-direction: column; } @@ -218,52 +229,116 @@ align-items: center; justify-content: space-between; } -.buttonItem{ +.buttonAll{ margin-left:5px; color: white; display: flex; flex-direction: row; justify-content: center; align-items: center; - width: 47px; + width: 35px; height: 30px; 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{ + width: calc(20% - 4px); + color: white; + display: flex; + flex-direction: row; + justify-content: center; + align-items: center; + 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: 1px solid gray; + border: 1.5px solid #8d8d8d; } .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{ @@ -275,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