1.整体页面样式调整，图标更换 2.工作台页面调整 3.资讯页面调整，更换顶部导航栏，新增tab 条，搜索框

Administrator

2021-06-30 82c62ebc487fb43f3f45a8fd1172023937d144bc

1.整体页面样式调整，图标更换
2.工作台页面调整
3.资讯页面调整，更换顶部导航栏，新增tab 条，搜索框

 pages.json

@@ -52,6 +52,15 @@
            }
        },
        {
            "path": "pages/business/business",
            "style": {
                "navigationBarTitleText": "工作台",
                "app-plus":{
                    "titleNView":false
                }
            }
        },
        {
            "path": "pages/myself/childen/xinxi",
            "name": "xinxi",
            "style": {
@@ -278,38 +287,27 @@
        "backgroundColor": "#ffffff",
        "list": [{
                "pagePath": "pages/alarm_list/alarm_list",
                "text": "我要查",
                "iconPath": "static/tabbar/workbench.png",
                "selectedIconPath": "static/tabbar/workbenchH.png"
                "text": "首页",
                "iconPath": "static/tabbar/index01.png",
                "selectedIconPath": "static/tabbar/index02.png"
            },{
                "pagePath": "pages/article/article",
                "text": "我要看",
                "text": "资讯",
                "iconPath": "static/tabbar/article.png",
                "selectedIconPath": "static/tabbar/articleH.png"
            },
            {
                "pagePath": "pages/reported/reported",
                "text": "我要报",
                "iconPath": "static/tabbar/business.png",
                "selectedIconPath": "static/tabbar/businessH.png"
            }, {

                "pagePath": "pages/groupChat/groupChat",
                "text": "我要说",
                "iconPath": "static/tabbar/investigation.png",
                "selectedIconPath": "static/tabbar/investigationH.png"
            },{
                "pagePath": "pages/workbench/workbench",
                "text": "我要巡",
                "iconPath": "static/img/bar/patrol.png",
                "selectedIconPath": "static/img/bar/patrol-blue.png"
                "pagePath": "pages/business/business",
                "text": "工作台",
                "iconPath": "static/tabbar/workbench.png",
                "selectedIconPath": "static/tabbar/workbenchH.png"
            },
            {
                "pagePath": "pages/myself/myself",
                "text": "我的",
                "iconPath": "static/tabbar/my.png",
                "selectedIconPath": "./static/tabbar/my-blue.png"
            }
            // ,{
            //     "pagePath": "pages/myself/myself",
            //     "text": "我的",
            //     "iconPath": "static/tabbar/userHL.png",
            //     "selectedIconPath": "static/workbench/user01.png"
            // }

        ]
    },

 pages/alarm_list/alarm_list.vue

@@ -85,6 +85,7 @@
            this.getAlarmListInfo(1);
        },
        methods:{
			
            // 获取滚动窗口高度
            getSysteminfo() {
                uni.getSystemInfo({

 pages/article/article.vue

@@ -1,12 +1,28 @@
<template>
    <view class="advisory-big">
            <!-- 自定义顶部导航栏 -->
            <navBarTop :title="'我要看'"></navBarTop>
            <!-- 顶部下拉刷新 -->
            <!-- <view v-show="isFlash">
                <uni-load-more :status="loadStatus" ></uni-load-more>
            </view> -->
            <view  v-for="i in data" class="advisory-model" @click="goDetail(i)">
    <view class="advisory-big ">
        <!-- 自定义顶部导航栏 -->
        <view class="uni-nav-bar-info" :style="{marginTop:navbarTopHeight}">
            <view class="title" @click="goTabDetail(index)" v-for="(item,index) in titleList"
                :style="titleNum==index? 'color:#000000':'color:#808080'">{{item}}</view>
        </view>

        <view class="article-tab">
            <view :class="{'article-tab-title':true,'cccc':index == articleTabNum}" @click="goArticleTab(index)" v-for="(item,index) in articleTabArr"
                :style="articleTabNum==index?'color:#000000':'color:#808080'">{{item}}</view>
            <image src="../../static/images/article/menu.png"></image>
        </view>
		
        <view class="search-block">
            <view class="search-ico-wapper">
                <image src="../../static/images/search/search.png" class="search-ico" mode=""></image>
            </view>
            <input type="text" value="" placeholder="搜索" class="search-text" maxlength="10" focus/>
            <view class="search-ico-wapper1">
                <image src="../../static/images/article/microphone.png" class="search-ico-1" mode=""></image>
            </view>
         </view>
        <view class="article-content">
            <view v-for="i in data" class="advisory-model" @click="goDetail(i)">
                <view class="advisory-left">
                    <view class="advisory-title-top">
                        <view class="advisory-title">{{i.title}}</view>
@@ -19,63 +35,70 @@
                <view class="advisory-right">
                    <image :src="i.url"></image>
                </view>
				
            </view>
            <!-- loading加载提示处 -->
            <!-- <view v-show="isLoadMore">
                <uni-load-more :status="loadStatus" ></uni-load-more>
            </view> -->
        </view>
    </view>
</template>

<script>
    import navBarTop from '../../components/nav-bar-top/nav-bar-top.vue';
    export default{
    export default {
        components: {
            navBarTop
        },
        data(){
        data() {
            return {
                // pathUrl:"http://localhost:89/",
                pathUrl:"http://s16s652780.51mypc.cn/api",
                page:1,
                pagesize:10,
                pathUrl: "http://s16s652780.51mypc.cn/api",
                page: 1,
                pagesize: 10,
                // loadStatus:'loading',  //加载样式：more-加载前样式，loading-加载中样式，nomore-没有数据样式
                isLoadMore:false,  //是否加载中
                isFlash:false,//是否刷新
                data:[]
                isLoadMore: false, //是否加载中
                isFlash: false, //是否刷新
                data: [],
                titleList: ['推荐', '要闻', '新思想'],
                titleNum: 0,
                articleTabArr: ['全部', '视频', '社会', '经济', '关注'],
                articleTabNum: 0,
                navbarTopHeight: "10px"
            }
        },
        mounted(){
        mounted() {
            // this.getArtcilePageList();
        },
        //上拉加载更多
        onReachBottom(){  //上拉触底函数
            console.log("上拉了")
            if(!this.isLoadMore){  //此处判断，上锁，防止重复请求
                // this.isLoadMore=true
                this.page+=1
                this.getArtcilePageList(2)
            }
        },
        //下拉刷新
        onPullDownRefresh() {
            // console.log("下拉了！....");
            if(!this.isFlash){  //此处判断，上锁，防止重复请求
                // this.isFlash=true;
                this.page =1;
                this.getArtcilePageList(1);
                uni.stopPullDownRefresh();
            }
        },
        // onReachBottom() { //上拉触底函数
        //     console.log("上拉了")
        //     if (!this.isLoadMore) { //此处判断，上锁，防止重复请求
        //         // this.isLoadMore=true
        //         this.page += 1
        //         this.getArtcilePageList(2)
        //     }
        // },
        // //下拉刷新
        // onPullDownRefresh() {
        //     // console.log("下拉了！....");
        //     if (!this.isFlash) { //此处判断，上锁，防止重复请求
        //         // this.isFlash=true;
        //         this.page = 1;
        //         this.getArtcilePageList(1);
        //         uni.stopPullDownRefresh();
        //     }
        // },
        onLoad() {
            this.getArtcilePageList(1);
            this.getArtcilePageList(1);
            uni.stopPullDownRefresh();
        },
        methods:{
        methods: {
            goArticleTab(index) {
                this.articleTabNum = index;
            },
            goTabDetail(index) {
                this.titleNum = index;
            },
            //去跳转详情页面
            goDetail(e){
				
            goDetail(e) {

                //内容传值容易报错，所以直传id,然后调用接口去查询
                // let detail = {
                //     title: e.title,
@@ -86,7 +109,7 @@
                //     imgUrl: e.url,
                //     videoUrl:e.videoUrl
                // };
				

                let detail = {
                    id: e.id
                };
@@ -95,40 +118,40 @@
                    url: './article_detail?detailData=' + JSON.stringify(detail)
                });
            },
			

            //获取资讯信息
            getArtcilePageList(tab){
            getArtcilePageList(tab) {
                var that = this;
                uni.request({
                    url: that.pathUrl+'/article/article/page',
                    method:'GET',
                    data:{
                        current:this.page,
                    url: that.pathUrl + '/article/article/page',
                    method: 'GET',
                    data: {
                        current: this.page,
                        size: this.pagesize
                    },
                    success: (res) => {
                        if(res.data.code==200){
                            if(res.data.data.records){
                                if(tab==1){
                        if (res.data.code == 200) {
                            if (res.data.data.records) {
                                if (tab == 1) {
                                    that.data = res.data.data.records;
                                }else{
                                } else {
                                    //如果总数小于pageSize,不做其他操作
                                    if(res.data.data.total<this.pagesize){
                                    if (res.data.data.total < this.pagesize) {
                                        that.data = res.data.data.records;
                                    }else{
                                        if(res.data.data.records.length<this.pagesize){
                                    } else {
                                        if (res.data.data.records.length < this.pagesize) {
                                            //如果数量小于分页数量，则为最后一页
                                            // this.isLoadMore=true;
                                            // this.loadStatus='nomore';
                                        }else{
                                        } else {
                                            // this.isLoadMore=false
                                        }
                                        res.data.data.records.forEach((item)=>{
                                        res.data.data.records.forEach((item) => {
                                            that.data.push(item);
                                        })
                                    }
                                }
                            }else{
                            } else {
                                // this.isLoadMore=true;
                                // this.loadStatus='nomore';
                            }
@@ -142,98 +165,192 @@
</script>

<style lang="scss" scoped>
    .advisory-big{
    .advisory-big {
        width: 100%;
        height: 70%;
        position: absolute;
        // top: 2%;
        // background-color: #0078A8;
		
        .advisory-model{
            width: 100%;
            height: 20%;
            // background-color: #00FF00;
			
			
            .advisory-left{
                width: 61%;
                height: 80%;
                float: left;
                position: relative;
                // background-color: #00FFFF;
                position: relative;
                left: 4%;
                top: 10%;
				
				
                .advisory-title-top{
                    // background-color: #2692FD;
                    width: 100%;
                    height: 75%;
					
                    .advisory-title{
                        width: 92%;
                        font-size: 15px;
                        font-weight: 550;
                        overflow: hidden;
                        text-overflow: ellipsis;
                        display: -webkit-box; 
                        -webkit-line-clamp: 2; 
                        -webkit-box-orient: vertical;
                    }
					
					
                }
				
                .advisory-title-down{
                    // background-color: #0078A8;
                    width: 100%;
                    height: 25%;
                    font-size: 12px;
                    font-weight: 550;
                    color: #808080;
					
                    .advisory-title-name{
                        width: 130rpx;
                        float: left;
                        letter-spacing: 1px;
                        overflow: hidden;
                        text-overflow: ellipsis;
                        display: -webkit-box; 
                        -webkit-line-clamp: 1; 
                        -webkit-box-orient: vertical;
                        // background-color:#0078A8;
                    }
					
                    .advisory-title-time{
                        position: relative;
                        left: 15rpx;
                    }
                }
				

        .uni-nav-bar-info {
            display: flex;
            align-items: center;
            height: 50px;

            .title {
                font-size: 1.2rem;
                color: #808080;
                margin-left: 1rem;
            }
        }


        .article-tab {
            // background-color: #007AFF;
            width: 100%;
            height: 2rem;
            border-bottom: 2px solid #D7D7D7;

            .article-tab-title {
                // text-align: center;
                width: 14%;
                float: left;
                margin-left: 1rem;
                // border-bottom: 4px solid #000000;
            }

            image {
                width: 1.5rem;
                height: 1.5rem;
            }
        }
		
        .article-content{
            margin-top: 1rem;
            width: 100%;
            
            .advisory-right{
                // background-color: #222222;
                width: 32%;
                height: 80%;
                left: 63%;
                position: relative;
                top: 10%;
				
                image{
            .advisory-model {
                width: 100%;
                height: 6rem;
                // background-color: #00FF00;
			
			
                .advisory-left {
                    width: 61%;
                    height: 80%;
                    float: left;
                    position: relative;
                    left: 0px;
                    top: -100%;
                    width: 100%;
                    height: 100%;
                    border-radius: 5px;
                    // background-color: #00FFFF;
                    position: relative;
                    left: 4%;
                    top: 10%;
			
			
                    .advisory-title-top {
                        // background-color: #2692FD;
                        width: 100%;
                        height: 75%;
			
                        .advisory-title {
                            width: 92%;
                            font-size: 15px;
                            font-weight: 550;
                            overflow: hidden;
                            text-overflow: ellipsis;
                            display: -webkit-box;
                            -webkit-line-clamp: 2;
                            -webkit-box-orient: vertical;
                        }
			
			
                    }
			
                    .advisory-title-down {
                        // background-color: #0078A8;
                        width: 100%;
                        height: 25%;
                        font-size: 12px;
                        font-weight: 550;
                        color: #808080;
			
                        .advisory-title-name {
                            width: 130rpx;
                            float: left;
                            letter-spacing: 1px;
                            overflow: hidden;
                            text-overflow: ellipsis;
                            display: -webkit-box;
                            -webkit-line-clamp: 1;
                            -webkit-box-orient: vertical;
                            // background-color:#0078A8;
                        }
			
                        .advisory-title-time {
                            position: relative;
                            left: 15rpx;
                        }
                    }
			
                }
			
                .advisory-right {
                    // background-color: #222222;
                    width: 32%;
                    height: 80%;
                    left: 63%;
                    position: relative;
                    top: 10%;
			
                    image {
                        position: relative;
                        left: 0px;
                        top: -100%;
                        width: 100%;
                        height: 100%;
                        border-radius: 5px;
                    }
                }
            }
        }
    }
    
    .cccc{
        position: relative;
        top: -5px;
    }
    .cccc::before {
        position: relative;
        top: 25px;
        content: '';
        width: 30px;
        display: block;
        height: 3.5px;
        background-color: #000;
    }
    
    

    /* 搜索框 */
    .search-ico, .search-ico-1{
        width: 40upx;
        height: 40upx;
    }
	
    .search-block{
        width: 94%;
        margin: 0 auto;
        // background-color: #007AFF;
        display: flex;
        flex-direction: row;
        position: relative;
        top: 0.35rem;
		
        .search-ico-wapper{
            background-color: #F1F1F1;
            display: flex;
            flex-direction:column;
            justify-content: center;
            padding: 0upx 0upx 0upx 15upx;
            border-bottom-left-radius:7px;
            border-top-left-radius: 7px;
        }
		
        .search-text{
            font-size: 14px;
            background-color: #F1F1F1;
            height: 70upx;
            width: 100%;
            padding-left: 0.5rem;
        }
		
		
        .search-ico-wapper1{
            background-color: #F1F1F1;
            display: flex;
            flex-direction:column;
            justify-content: center;
            padding: 0upx 15upx 0upx 0upx;
            border-bottom-right-radius:7px;
            border-top-right-radius: 7px;
        }
    }
	
    
</style>

 pages/business/business.vue

@@ -1,36 +1,32 @@
<!-- 业务办理 -->
<template>
    <view>
        <!-- <uni-nav-bar class="uni-nav-bar-info" :fixed="true"  :status-bar="true" >
        </uni-nav-bar> -->
        <view class="view-business">
            <!-- <squareBut :data="squareBut"></squareBut> -->
            <view class="view-business-nav">
                <navigator class="patrolBtn" url="/pages/infoRegistration/infoRegistration">
                    <image src="../../static/img/register.png"></image>
                    <span>信息登记</span>
                <navigator class="patrolBtn" url="/pages/alarm_list/alarm_list">
                    <image src="../../static/workbench/task.png"></image>
                    <span>群防任务</span>
                </navigator>
            </view>
            <view class="view-business-nav">
                <navigator class="patrolBtn" url="/pages/infoRegistration/infoCheck">
                    <image src="../../static/img/checkinfo.png"></image>
                    <span>信息核实</span>
                <navigator class="patrolBtn" url="/pages/alarm_list/alarm_list">
                    <image src="../../static/workbench/task1.png"></image>
                    <span>巡视任务</span>
                </navigator>
            </view>
            <view class="view-business-nav">
                <navigator class="patrolBtn" url="/pages/visitRecord/visitRecord">
                    <image src="../../static/img/record.png"></image>
                    <span>拜访记录</span>
                <navigator class="patrolBtn" url="/pages/reported/reported">
                    <image src="../../static/workbench/report.png"></image>
                    <span>异常上报</span>
                </navigator>
            </view>
            <view class="view-business-nav">
                <navigator class="patrolBtn" url="/pages/riskReporting/riskReporting">
                    <image src="../../static/img/risk.png"></image>
                    <span>风险上报</span>
                </navigator>
            </view>
            <view class="view-business-nav">
                <navigator class="patrolBtn" url="/pages/equipment/equipment">
                    <image src="../../static/img/eq02.png"></image>
                    <span>设备安装</span>
                    <image src="../../static/workbench/addressbook.png"></image>
                    <span>通讯录</span>
                </navigator>
            </view>
        </view>
@@ -55,43 +51,39 @@
    }
</script>

<style>
<style lang="scss" scoped>
    .view-business{
        width: 100%;
        height: 300rpx;
        /* border: 1px solid #007AFF; */
        margin-top: 2rem;
    }
    
    .view-business-nav{
        width: 31%;
        float: left;
        position: relative;
        left: 20px;
        display: flex;
        width: 33%;
        align-items: center;
        justify-content: center;
		
        .patrolBtn {
            // border: 1rpx solid #999999; 
            border-radius: 25rpx;
            width: 8rem;
            height: 7.5rem;
            display: flex;
            align-items: center;
            justify-content: center;
            flex-direction: column;
			
            image{
                width: 4rem;
                height: 4rem;
            }
			
            span {
                margin-top: 0.4rem;	
                font-size: 0.9rem;
            }
        }
    }
    
    .patrolBtn image{
        width: 80rpx;
        height: 80rpx;
        position: relative;
        left: 55rpx;
        top: 30rpx;
    }
	
    .patrolBtn {
        /* border: 1rpx solid #999999; */
        border-radius: 25rpx;
        width: 200rpx;
        height: 200rpx;
        position: relative;
        /* left: 30rpx; */
        top: 30rpx;
    }

    .patrolBtn span {
        position: relative;
        left: -32rpx;
        top: 85rpx;
        font-size: 24rpx;
        letter-spacing: 2rpx;
    }
</style>

 pages/reported/reported.vue

@@ -1,7 +1,16 @@
<template>
    <view class="policeDetails">
        <!-- 自定义顶部导航栏 -->
        <navBarTop :title="'我要报'"></navBarTop>
        <!-- <navBarTop :title="'我要报'"></navBarTop> -->
        <uni-nav-bar  class="uni-nav-bar-info" :fixed="true"  :status-bar="true" >
            <view class="title" slot="default">{{title}}</view>
            <view slot="left" class="uni-nav-bar-left" @click="goBack()">
                <image :src="backImage"></image>
            </view>
            <view class="right" slot="right">
                <view class="title-right">历史上报</view>
            </view>
        </uni-nav-bar>
        <view class="row address">
            <view class="title">地址</view>
            <input v-model="place" placeholder="请输入地址"/>
@@ -50,10 +59,18 @@
                result:'',
                place:"",
                imgs: [],
                videos: []
                videos: [],
                title:'事件上报',
                backImage:'../../static/images/nav/back02.png'
            }
        },
        methods: {
            //返回上一页
            goBack(){
                uni.navigateBack({
                })
            },
			
            //日期选择
            stimeChange(e) {
                // this.stime = e.substr(0,e.length-3);
@@ -216,6 +233,46 @@
</script>

<style lang="scss">
	
    .uni-nav-bar-info {
        // font-weight: 550;
		
        .title{
            position: fixed;
            right: 42%;
            font-weight: 550;
            letter-spacing: 1px;
        }
		
        .uni-nav-bar-left{
            display: flex;
            justify-items: center;
			
            image{
                // background-color: #00BFFF;
                margin-left: 1rem;
                width: 1.6rem;
                height: 1.6rem;
                border-radius: 100px;
            }
        }
		
        .right{
            display: flex;
			
            .title-right{
                position: relative;
                font-size: 0.7rem;
                color: #808080;
                right: 0.5rem;
                top: 0.2rem;
            }
        }
		
		
    }
	
	
    .policeDetails {
        width: 92%;
        margin: 0 auto;

 static/images/article/menu.png

 static/images/article/microphone.png

 static/images/article/search.png

 static/images/nav/back.png

 static/images/nav/back01.png

 static/images/nav/back02.png

 static/img/info/alarm.png

 static/img/info/article.png

 static/img/info/articleH.png

 static/img/info/eq.png

 static/img/info/eq01.png

 static/img/info/index.png

 static/img/info/indexH.png

 static/img/info/jilu.png

 static/img/info/out.png

 static/tabbar/index-03.png

 static/tabbar/index01.png

 static/tabbar/index02.png

 static/tabbar/index04.png

 static/tabbar/my-blue.png

 static/tabbar/my.png

 static/tabbar/patrol-blue.png

 static/tabbar/patrol.png

 static/workbench/addressbook.png

 static/workbench/report.png

 static/workbench/task.png

 static/workbench/task1.png