From 22f0e04d34f19aac857e25627343dff9a2542057 Mon Sep 17 00:00:00 2001 From: zhouwenxuan <1175765986@qq.com> Date: 星期二, 25 七月 2023 15:12:42 +0800 Subject: [PATCH] 新增页面 --- pages/tabBar/current/current.vue | 324 ++++++++++++++++++++++++++++++++++++++++++++++++++--- 1 files changed, 303 insertions(+), 21 deletions(-) diff --git a/pages/tabBar/current/current.vue b/pages/tabBar/current/current.vue index 37cd53f..e0f559d 100644 --- a/pages/tabBar/current/current.vue +++ b/pages/tabBar/current/current.vue @@ -5,35 +5,125 @@ <!-- 状态栏占位 --> <view class="statusBar" :style="{ paddingTop: statusBarHeight + 'px' }"></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 class="navBar"> + <view class="barText">信息查看</view> + </view> + </view> + <!-- 页面内容 --> + <view class="controlBar"> + <view class="buttonGroup"> + <view class="buttonItem 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> + <view class="listHead"> + + <view class="switchBtn"> + <u-switch v-model="checked" size="20" @change="clickSwitch" style="margin-right: 6px"></u-switch> + <text>仅紧临</text> </view> </view> </view> - <text>通用信息详情</text> + <view style="display: flex;flex-direction: column;margin-bottom: 55px;"> + <view class="examineList"> + <view class="listContent" v-if="InfoList.length > 0"> + <view v-for="(item, index) in InfoList" :key="index" class="itemContent"> + <view class="content"> + <text>[{{item.colorContent}}]</text> + <text>{{item.title}},{{item.content}}</text> + <view class="btnGroup" style="float: right;"> + <u-button + size="mini" + style="background-color:rgb(255, 223, 37);color: white;width: 100px;margin: 3px 8px;" + @click="toDetail(item)" + > + 信息详情 + </u-button> + <u-button + size="mini" + style="background-color:rgb(17, 204, 33);color: white;width: 100px;" + @click="toResponsivity(item)" + > + 查看叫应率 + </u-button> + + </view> + </view> + </view> + </view> + <view v-else> + <u-empty margin-top="40%" text="数据为空" mode="data"></u-empty> + </view> + </view> + </view> <tabBar :currentPagePath="page"></tabBar> </view> </template> <script> import tabBar from '../tabBarIndex.vue' + import {getExamine} from '../../../api/examine.js' + import tebBar from '../tabBarIndex.vue' export default { components:{ tabBar }, data() { return { + data: { + pageIndex: 1, + pageSize: 10, + searchParams: { + emergType: null,//1-紧急;2-常规 + warningLevel: null,//1-红色预警;2-橙色预警;3-黄色预警;4-蓝色预警 + reviewStatus: null//1:未审核,2:已审核,3:审核已驳回 + } + }, page: 'pages/tabBar/current/current', - statusBarHeight: '' + checked: false, + isReadOnly: false, + statusBarHeight: 0, + buttons: [ + { + label: 'red', + name: '红' + }, + { + label: 'orange', + name: '橙' + }, + { + label: 'yellow', + name: '黄' + }, + { + label: 'blue', + name: '蓝' + }, + ], + selectedSaleAnalysis: 'all', + InfoList: [], } - }, onLoad() { //获取手机状态栏高度 this.statusBarHeight = uni.getSystemInfoSync()['statusBarHeight']; uni.hideTabBar(); + }, + onShow() { + this.getInfoList(); }, methods: { goBack() { @@ -42,12 +132,69 @@ url:'/pages/tabBar/firstPage/firstPage' }); }, + getInfoList() { + 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.InfoList = [ + { + attachment: null, + disasterType: 1, + gmtReviewSubmit: "2023-07-21 14:36:16", + id: 111, + infoSubmitter: "1-1", + infoSubmitterReal: "省级工作人员", + publishingUnit: "自治区自然灾害综合检测预警中心", + reviewStatus: 1, + title: "【20230721】预警信息标题", + warningLevel: 1, + } + ]; + if(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; + }); + } + // } + // }) + }, + handleButtonClick(button) { + this.selectedSaleAnalysis = button.label; + this.getInfoList(); + }, + toDetail(item) { + console.log("item",item) + uni.navigateTo({ + url: `/pages/tabBar/notice/detail?data=` + encodeURIComponent(JSON.stringify(item)) + }) + }, + toResponsivity(item) { + //县 + uni.navigateTo({ + url: `/pages/tabBar/responsivity/countyResponsivity?data=` + encodeURIComponent(JSON.stringify(item)) + }) + //市 + //村 + }, + //下拉刷新 + onPullDownRefresh() { + console.log('refresh'); + setTimeout(() => { + uni.stopPullDownRefresh(); + this.getInfoList(); + }, 1000); + }, + clickSwitch(e) { + this.getInfoList(); + } } } </script> -<style> +<style lang="scss" scoped> .box { display: flex; flex-direction: column; @@ -63,23 +210,158 @@ z-index: 1; } .navBarBox .navBar { - 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); + 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{ - /* margin-left: 20px; */ - text-align: center; - width: 85%; - font-size: 16px; - /* text-align: center; */ - font-weight: 600; + text-align: center; + width: 85%; + font-size: 16px; + /* text-align: center; */ + font-weight: 600; } .statusBar{ background-color:lightgrey; } +/* .contentList{ + display: flex; + flex-direction: column; +} +.buttonGroup{ + margin: 18px 12px; + display: flex; + align-items: center; + justify-content: space-between; +} +.buttonAll{ + margin-left:5px; + color: white; + display: flex; + flex-direction: row; + justify-content: center; + align-items: center; + 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: flex-end; + } +} +.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: 1.5px solid #8d8d8d; +} +.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: #409EFF; + &.active{ + background: linear-gradient(#3a8ee6,#44a9ff); + } +} +.switchBtn{ + display: flex; + 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); +} +.itemContent{ + font-size: 16px; + color: #333; + margin-top: 15px; + padding: 0 12px 10px; + border-bottom: 1px solid #ebebeb; + +} +.content{ + text-overflow: ellipsis; + overflow: hidden; + white-space: nowrap; +} +.buttonCo{ + margin-top: 5px; + margin-bottom: 10px; +} +.examineList{ + margin-top: 12px; + height: calc(100vh - 266px); + overflow: hidden; + overflow-y: scroll; +} +.btnGroup{ + display: flex; + align-items: center; + justify-content: flex-end; +} </style> \ No newline at end of file -- Gitblit v1.9.2