审核页面

zhouwenxuan

2023-07-20 f6f18b92d2c8516a9ad5ec60441ab332514f2686

审核页面

 pages/tabBar/information/information.vue

对比新文件
@@ -0,0 +1,257 @@
<template>
    <view class="box">
        <!-- 自定义导航栏 -->
        <view class="navBarBox fix">
            <!-- 状态栏占位 -->
            <view class="statusBar" :style="{ paddingTop: statusBarHeight + 'px' }"></view>
            <!-- 真正的导航栏内容 -->
            <view class="navBar" >
                <view class="barText">信息发布</view>
            </view>
        </view>
        <!-- 页面内容 -->
        <view class="contentList">
            <view class="examineList">
                <view class="listHead">
                    <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 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="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>
                </view>
                <view v-else>
                    <u-empty
                        mode="data"
                        icon="http://cdn.uviewui.com/uview/empty/data.png"
                        margin-top="50%">
                    </u-empty>
                </view>
            </view>
        </view>
        <tabBar :currentPagePath="page"></tabBar>
    </view>
</template>

<script>
    import tabBar from '../tabBarIndex.vue'
    import { getInfo } from '../../../api/information.js'
    export default {
        components:{
            tabBar
        },
        data() {
            return {
                data: {
                    pageIndex: 1,
                    pageSize: 10000000,
                    searchParams: {
                        reviewStatus: null//2：已审核,null:全部
                    }
                },
                checked: false,
                isReadOnly: false,
                statusBarHeight: 0,
                informationList: [],
                page:'pages/tabBar/information/information'
            }
        },
        onLoad() {
            //获取手机状态栏高度
            this.statusBarHeight = uni.getSystemInfoSync()['statusBarHeight'];
            uni.hideTabBar();
        },
        onShow() {
            this.getInformationList();
        },
        methods: {
            getInformationList() {
                this.data.searchParams.reviewStatus = this.isReadOnly ? 2 : null;
                getInfo(this.data).then(res => {
                    if (res.code == 100){
                        this.informationList = res.data ? res.data : [];
                        if(this.informationList.length > 0) {
                            this.informationList.forEach((item, index) => {
                                this.informationList[index].colorContent = item.warningLevel == 1 ? '红色预警': item.warningLevel == 2 ? '橙色预警': item.warningLevel == 3 ? '黄色预警':'蓝色预警';
                                this.informationList[index].buttonContent = item.reviewStatus == 1 ? '待审核': item.reviewStatus == 2 ? '审核通过' : '已驳回';
                                this.informationList[index].role = 'infoPeople';
                                this.informationList[index].warningLevel = item.warningLevel;
                            })
                        }
                    }
                })
            },
            chooseRead(e) {
                this.isReadOnly = e;
                this.getInformationList();
            },
            toDetail(item) {
                console.log("item",item)
                uni.navigateTo({
                  url: `/pages/tabBar/notice/detail?data=` + encodeURIComponent(JSON.stringify(item))
                })
            },
            //下拉刷新
            onPullDownRefresh() {
                console.log('refresh');
                setTimeout(() => {
                    uni.stopPullDownRefresh();
                    this.getInformationList();
                }, 1000);
            },
            clickSwitch(e) {
                this.getInformationList();
            }
        }
    }

</script>

<style>
.box {
    display: flex; 
    flex-direction: column; 
    width: 100%; 
    height: 100%;
}
.fix{
    position: sticky;
    top: 0;
    left: 0;
    right: 0;
    width: 100%;
    z-index: 1;
}
.navBarBox .navBar {
        background-color:lightgrey;
        height: 40px;
        display: flex;
        flex-direction: row;
        justify-content: center;
        align-items: center;
}
.barText{
    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;
}
.buttonItem{
    margin-left:5px;
    color: white;
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    width: 47px;
    height: 30px;
    border-radius: 5px;
}
.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;
}
.all {
    background-color: rgb(17,204,33);
}
.active {
    border: 1.5px solid #8d8d8d;
}
.red {
    background-color: red;
}
.orange {
    background-color: rgb(251, 158, 13);
}
.yellow {
    background-color: rgb(255, 223, 37);
}
.blue {
    background-color: rgb(2, 167, 240);
}
.switchBtn{
    display: flex;
    align-items: center;
}
.listHead{
    display: flex;
    align-items: center;
    /* background-color:lightgrey; */
    height: 25px;
    padding: 10px 10px;
}
.listContent{
    display: flex;
    flex-direction: column;
    padding: 0 10px;
}
.itemContent{
    font-size: 16px;
    color: gray;
    margin-top: 10px;
    border-bottom: 1px solid lightgrey;
	
}
.content{
    text-overflow: ellipsis;
    overflow: hidden;
    white-space: nowrap;
}
.buttonCo{
    margin-top: 5px;
    margin-bottom: 10px;
}
.buttonContent{
    float: right; 
    width: 80px;
    margin-top: -5px;
}
/* .divider{
    height: 1px;
    background-color: gray;
    margin-left: 10px;
    margin-right: 10px;
	
} */
</style>