顶部导航栏自定义，通过头像点击跳转到我的页面

Administrator

2021-06-24 d1441fb578d08ce4669a13cb63aa01f82823e391

顶部导航栏自定义，通过头像点击跳转到我的页面

 components/nav-bar-top/nav-bar-top.vue

@@ -1,19 +1,30 @@
<template name="navBarTop">
    <!-- 自定义顶部导航栏 -->
    <view class="nav-bar-top" @click="gotoMyself()">
    <!-- <view class="nav-bar-top" @click="gotoMyself()">
        <view class="nav-bar-top-left">
            <image :src="navBarImage" />
        </view>
        <view class="nav-bar-top-title">我要查</view>
    </view>
    </view> -->
	
    <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="gotoMyself()">
            <image :src="avatarImage"></image>
        </view>
    </uni-nav-bar>
</template>

<script>
    import uniNavBar from '../../components/uni-nav-bar/uni-nav-bar.vue'
    export default{
        props:['title'],
        components:{uniNavBar},
        name:"navBarTop",
        data(){
            // console.log(title);
            return{
                navBarImage:this.$store.state.avatar
                avatarImage:this.$store.state.avatar,
            }
        },
        methods:{
@@ -28,33 +39,26 @@
</script>

<style lang="scss">
    .nav-bar-top{
        background-color: #FFFFFF;
        height: 2.7rem;
        align-items: center;
    .uni-nav-bar-info {
        // font-weight: 550;
        
        .nav-bar-top-left{
            // background-color: #00BFFF;
            width: 2rem;
            height: 2rem;
            margin-left: 1rem;
            border-radius: 50px;
            align-items: center;
            justify-content: center;
        .title{
            position: fixed;
            right: 45%;
            font-weight: 550;
        }
		
        .uni-nav-bar-left{
            display: flex;
            justify-items: center;
            
            image{
                width: 1.8rem;
                height: 1.8rem;
                border-radius: 50px;
                // background-color: #00BFFF;
                margin-left: 1rem;
                width: 1.2rem;
                height: 1.2rem;
                border-radius: 100px;
            }
        }
		
        .nav-bar-top-title{
            font-weight: 550;
            display: flex;
            margin-left: 7rem;
			
        }
		
    }
</style>

 components/uni-nav-bar/uni-nav-bar.vue

New file
@@ -0,0 +1,251 @@
<template>
    <view class="uni-navbar">
        <view :class="{ 'uni-navbar--fixed': fixed, 'uni-navbar--shadow': shadow, 'uni-navbar--border': border }" :style="{ 'background-color': backgroundColor }"
         class="uni-navbar__content">
            <status-bar v-if="statusBar" />
            <view :style="{ color: color,backgroundColor: backgroundColor }" class="uni-navbar__header uni-navbar__content_view">
                <view @tap="onClickLeft" class="uni-navbar__header-btns uni-navbar__header-btns-left uni-navbar__content_view">
                    <view class="uni-navbar__content_view" v-if="leftIcon.length">
                        <uni-icons :color="color" :type="leftIcon" size="24" />
                    </view>
                    <view :class="{ 'uni-navbar-btn-icon-left': !leftIcon.length }" class="uni-navbar-btn-text uni-navbar__content_view"
                     v-if="leftText.length">
                        <text :style="{ color: color, fontSize: '14px' }">{{ leftText }}</text>
                    </view>
                    <slot name="left" />
                </view>
                <view class="uni-navbar__header-container uni-navbar__content_view" @tap="onClickTitle">
                    <view class="uni-navbar__header-container-inner uni-navbar__content_view" v-if="title.length">
                        <text class="uni-nav-bar-text" :style="{color: color }">{{ title }}</text>
                    </view>
                    <!-- 标题插槽 -->
                    <slot />
                </view>
                <view :class="title.length ? 'uni-navbar__header-btns-right' : ''" @tap="onClickRight" class="uni-navbar__header-btns uni-navbar__content_view">
                    <view class="uni-navbar__content_view" v-if="rightIcon.length">
                        <uni-icons :color="color" :type="rightIcon" size="24" />
                    </view>
                    <!-- 优先显示图标 -->
                    <view class="uni-navbar-btn-text uni-navbar__content_view" v-if="rightText.length && !rightIcon.length">
                        <text class="uni-nav-bar-right-text">{{ rightText }}</text>
                    </view>
                    <slot name="right" />
                </view>
            </view>
        </view>
        <view class="uni-navbar__placeholder" v-if="fixed">
            <status-bar v-if="statusBar" />
            <view class="uni-navbar__placeholder-view" />
        </view>
    </view>
</template>

<script>
    import statusBar from "./uni-status-bar.vue";

    /**
     * NavBar 自定义导航栏
     * @description 导航栏组件，主要用于头部导航
     * @tutorial https://ext.dcloud.net.cn/plugin?id=52
     * @property {String} title 标题文字
     * @property {String} leftText 左侧按钮文本
     * @property {String} rightText 右侧按钮文本
     * @property {String} leftIcon 左侧按钮图标（图标类型参考 [Icon 图标](http://ext.dcloud.net.cn/plugin?id=28) type 属性）
     * @property {String} rightIcon 右侧按钮图标（图标类型参考 [Icon 图标](http://ext.dcloud.net.cn/plugin?id=28) type 属性）
     * @property {String} color 图标和文字颜色
     * @property {String} backgroundColor 导航栏背景颜色
     * @property {Boolean} fixed = [true|false] 是否固定顶部
     * @property {Boolean} statusBar = [true|false] 是否包含状态栏
     * @property {Boolean} shadow = [true|false] 导航栏下是否有阴影
     * @event {Function} clickLeft 左侧按钮点击时触发
     * @event {Function} clickRight 右侧按钮点击时触发
     * @event {Function} clickTitle 中间标题点击时触发
     */
    export default {
        name: "UniNavBar",
        components: {
            statusBar
        },
        props: {
            title: {
                type: String,
                default: ""
            },
            leftText: {
                type: String,
                default: ""
            },
            rightText: {
                type: String,
                default: ""
            },
            leftIcon: {
                type: String,
                default: ""
            },
            rightIcon: {
                type: String,
                default: ""
            },
            fixed: {
                type: [Boolean, String],
                default: false
            },
            color: {
                type: String,
                default: "#000000"
            },
            backgroundColor: {
                type: String,
                default: "#FFFFFF"
            },
            statusBar: {
                type: [Boolean, String],
                default: false
            },
            shadow: {
                type: [Boolean, String],
                default: false
            },
            border: {
                type: [Boolean, String],
                default: true
            }
        },
        mounted() {
          if(uni.report && this.title !== '') {
              uni.report('title', this.title)
          }
        },
        methods: {
            onClickLeft() {
                this.$emit("clickLeft");
            },
            onClickRight() {
                this.$emit("clickRight");
            },
            onClickTitle() {
                this.$emit("clickTitle");
            }
        }
    };
</script>

<style lang="scss" scoped>
    $nav-height: 44px;
    .uni-nav-bar-text {
        /* #ifdef APP-PLUS */
        font-size: 34rpx;
        /* #endif */
        /* #ifndef APP-PLUS */
        font-size: $uni-font-size-lg;
        /* #endif */
    }

    .uni-nav-bar-right-text {
        font-size: $uni-font-size-base;
    }

    .uni-navbar__content {
        position: relative;
        background-color: $uni-bg-color;
        overflow: hidden;
        // width: 750rpx;
    }

    .uni-navbar__content_view {
        /* #ifndef APP-NVUE */
        display: flex;
        /* #endif */
        align-items: center;
        flex-direction: row;
        // background-color: #FFFFFF;
    }

    .uni-navbar__header {
        /* #ifndef APP-NVUE */
        display: flex;
        /* #endif */
        flex-direction: row;
        height: $nav-height;
        line-height: $nav-height;
        font-size: 16px;
        // background-color: #ffffff;
    }

    .uni-navbar__header-btns {
        /* #ifndef APP-NVUE */
        display: flex;
        /* #endif */
        flex-wrap: nowrap;
        width: 120rpx;
        padding: 0 6px;
        justify-content: center;
        align-items: center;
        /* #ifdef H5 */
        cursor: pointer;
        /* #endif */
    }

    .uni-navbar__header-btns-left {
        /* #ifndef APP-NVUE */
        display: flex;
        /* #endif */
        width: 150rpx;
        justify-content: flex-start;
    }

    .uni-navbar__header-btns-right {
        /* #ifndef APP-NVUE */
        display: flex;
        /* #endif */
        width: 150rpx;
        padding-right: 30rpx;
        justify-content: flex-end;
    }

    .uni-navbar__header-container {
        flex: 1;
    }

    .uni-navbar__header-container-inner {
        /* #ifndef APP-NVUE */
        display: flex;
        /* #endif */
        flex: 1;
        align-items: center;
        justify-content: center;
        font-size: $uni-font-size-base;
    }


    .uni-navbar__placeholder-view {
        height: $nav-height;
    }

    .uni-navbar--fixed {
        position: fixed;
        z-index: 998;
        /* #ifdef H5 */
        left: var(--window-left);
        right: var(--window-right);
        /* #endif */
        /* #ifndef H5 */
        left:0;
        right: 0;
        /* #endif */

    }

    .uni-navbar--shadow {
        /* #ifndef APP-NVUE */
        box-shadow: 0 1px 6px #ccc;
        /* #endif */
    }

    .uni-navbar--border {
        border-bottom-width: 1rpx;
        border-bottom-style: solid;
        border-bottom-color: $uni-border-color;
    }
</style>

 components/uni-nav-bar/uni-status-bar.vue

New file
@@ -0,0 +1,25 @@
<template>
    <view :style="{ height: statusBarHeight }" class="uni-status-bar">
        <slot />
    </view>
</template>

<script>
    var statusBarHeight = uni.getSystemInfoSync().statusBarHeight + 'px'
    export default {
        name: 'UniStatusBar',
        data() {
            return {
                statusBarHeight: statusBarHeight
            }
        }
    }
</script>

<style lang="scss" scoped>
    .uni-status-bar {
        // width: 750rpx;
        height: 20px;
        // height: var(--status-bar-height);
    }
</style>

 manifest.json

@@ -1,6 +1,6 @@
{
    "name" : "jfpt",
    "appid" : "__UNI__1A57486",
    "appid" : "__UNI__88EDF2B",
    "description" : "",
    "versionName" : "1.0.0",
    "versionCode" : "100",

 pages.json

@@ -95,14 +95,20 @@
            "path": "pages/reported/reported",
            "name": "reported",
            "style": {
                "navigationBarTitleText": "我要报"
                "navigationBarTitleText": "我要报",
                "app-plus":{
                    "titleNView":false
                }
            }
        },
        {
            "path": "pages/groupChat/groupChat",
            "name": "groupChat",
            "style": {
                "navigationBarTitleText": "聊天室"
                "navigationBarTitleText": "聊天室",
                "app-plus":{
                    "titleNView":false
                }
            }
        },
        {
@@ -168,10 +174,11 @@
        },
        {
            "path": "pages/article/article",
            "name": "equipment",
            "style": {
                "navigationBarTitleText": "资讯"
                // "enablePullDownRefresh":true
                "navigationBarTitleText": "资讯",
                "app-plus":{
                    "titleNView":false
                }
            }
        },
        {
@@ -199,7 +206,10 @@
            "path": "pages/workbench/workbench",
            "name": "workbench",
            "style": {
                "navigationBarTitleText": "我要巡"
                "navigationBarTitleText": "我要巡",
                "app-plus":{
                    "titleNView":false
                }
            }
        },
        {
@@ -208,7 +218,7 @@
            "style": {
                "navigationBarTitleText": "我要查",
                "app-plus":{
                    "titleNView":"false"
                    "titleNView":false
                }
            }
        },

 pages/alarm_list/alarm_list.vue

@@ -1,13 +1,15 @@
<template>
    <view class="alarm-list">
        <!-- 自定义顶部导航栏 -->
        <!-- <view class="nav-bar-top" @click="gotoMyself()">
            <view class="nav-bar-top-left">
                <image :src="navBarImage" />
            </view>
            <view class="nav-bar-top-title">我要查</view>
        <navBarTop :title="'我要查'"></navBarTop>
        <!-- <view  @click="gotoMyself()">
			
            <uni-nav-bar class="uni-nav-bar-info" :fixed="true"  :status-bar="true" title="我要查">
                <view slot="left" class="uni-nav-bar-left">
                    <image :src="avatarImage"></image>
                </view>
            </uni-nav-bar>
        </view> -->
        <navBarTop></navBarTop>
        
        <view class="navigation-bar">
            <view class="alarm-bar-total" :style="{color:totalColor,borderBottom:totalBoder}" @click="getAlarmListInfo(1)">全部({{totalNumber}})</view>
@@ -15,24 +17,26 @@
            <view class="alarm-bar-load-before" :style="{color:loadBeforeColor,borderBottom:loadBeforeBoder}" @click="getAlarmListInfo(3)">已处理({{finishNumber}})</view>
        </view>
        <view class="alarm-list-content">
            <view class="alarm-info" v-for="item in data" @click="gotoDetail(item)">
                <view class="alarm-id-type-status">
                    <view class="alarm-id-type">({{item.id}}){{item.alarmType}}</view>
                    <view class="alarm-status" :style="{color:untreatedColor}" v-if="item.securityId==null">未处理</view>
                    <view class="alarm-status" :style="{color:processedColor}" v-if="item.securityId!=null && item.jtype==1">处理中</view>
                    <view class="alarm-status" :style="{color:finishColor}" v-if="item.jtype==2">已处理</view>
                </view>
                <view class="alarm-position-time">
                    <view class="image-place">
                        <image src="../../static/images/pColumn/position.png"></image>
                        <view class="place">{{item.place}}</view>
            <scroll-view scroll-y="true" :style="{height:scrollHeight}" class="scroll">
                <view class="alarm-info" v-for="item in data" @click="gotoDetail(item)">
                    <view class="alarm-id-type-status">
                        <view class="alarm-id-type">({{item.id}}){{item.alarmType}}</view>
                        <view class="alarm-status" :style="{color:untreatedColor}" v-if="item.securityId==null">未处理</view>
                        <view class="alarm-status" :style="{color:processedColor}" v-if="item.securityId!=null && item.jtype==1">处理中</view>
                        <view class="alarm-status" :style="{color:finishColor}" v-if="item.jtype==2">已处理</view>
                    </view>
                    <view class="image-time">
                        <image src="../../xcxMapJQ/img/alarm.png"></image>
                        <view class="t-time"> {{item.alarmTime}}</view>
                    <view class="alarm-position-time">
                        <view class="image-place">
                            <image src="../../static/images/pColumn/position.png"></image>
                            <view class="place">{{item.place}}</view>
                        </view>
                        <view class="image-time">
                            <image src="../../xcxMapJQ/img/alarm.png"></image>
                            <view class="t-time"> {{item.alarmTime}}</view>
                        </view>
                    </view>
                </view>
            </view>
            </scroll-view>
        </view>
        
        <view class="butPopup" v-show="popuShow">
@@ -48,7 +52,7 @@
</template>

<script>
    import navBarTop from '../../components/nav-bar-top/nav-bar-top.vue'
    import navBarTop from '../../components/nav-bar-top/nav-bar-top.vue';
    export default{
        components: {
            navBarTop
@@ -71,13 +75,34 @@
                untreatedNumber:null,
                finishNumber:null,
                data:[],
                itemData:{}
                itemData:{},
                systemBarHeight:0,
                scrollHeight:0,
                avatarImage:this.$store.state.avatar
            }
        },
        created() {
            // 获取滚动窗口高度
            this.getSysteminfo();
        },
        onLoad() {
            this.getAlarmListInfo(1);
        },
        methods:{
            // 获取滚动窗口高度
            getSysteminfo() {
                uni.getSystemInfo({
                    success: res => {
                        //顶部状态栏高度
                        this.systemBarHeight = res.statusBarHeight;
                        //res.screenHeight为屏幕高度，顶部导航栏和底部导航栏 默认高度为 50 px ,43为tab标签高度
                        this.scrollHeight = res.screenHeight - this.systemBarHeight-100-43;
                        //得到数据内容滚动窗口高度
                        this.scrollHeight = this.scrollHeight + "px";
                    }
                });
            },
			
            //获取警情数据
            getAlarmListInfo(tab){
                //修改菜单颜色样式
@@ -218,6 +243,7 @@
        width: 100%;
        height: 100%;
        background-color: rgba(243,243,243,1);
        z-index: 999;
    }
</style>
<style lang="scss" scoped>
@@ -239,19 +265,18 @@
    
    .alarm-list{
        width: 100%;
        margin-bottom: 3.4rem;
        flex-direction: column;
        flex-direction: column;	
        
        .navigation-bar{
            border-top: 1rpx solid rgba(243,243,243,1);
            border-top: 1rpx solid #C8C7CC;
            background-color: #FFFFFF;
            width: 100%;
            height: 90rpx;
            height: 43px;
            flex-direction: row;
            letter-spacing: 1px;
            position: fixed;
            // position: fixed;
            z-index: 999;
            margin-top: 2.7rem;
            // margin-top: 4rem;
            
            .alarm-bar-total{
                align-items: center;
@@ -276,7 +301,7 @@
            width: 100%;
            // flex: 1;
            flex-direction: column;
            margin-top: 90rpx;
            // margin-top: 5.6rem;
            
            .alarm-info{
                background-color: #FFFFFF;

 pages/article/article.vue

@@ -1,5 +1,7 @@
<template>
    <view class="advisory-big">
            <!-- 自定义顶部导航栏 -->
            <navBarTop :title="'我要看'"></navBarTop>
            <!-- 顶部下拉刷新 -->
            <!-- <view v-show="isFlash">
                <uni-load-more :status="loadStatus" ></uni-load-more>
@@ -27,7 +29,11 @@
</template>

<script>
    import navBarTop from '../../components/nav-bar-top/nav-bar-top.vue';
    export default{
        components: {
            navBarTop
        },
        data(){
            return {
                // pathUrl:"http://localhost:89/",
@@ -140,7 +146,7 @@
        width: 100%;
        height: 70%;
        position: absolute;
        top: 2%;
        // top: 2%;
        // background-color: #0078A8;
        
        .advisory-model{

 pages/groupChat/groupChat.vue

@@ -1,6 +1,8 @@
<!-- 工作台 -->
<template>
    <view class="work">
        <!-- 自定义顶部导航栏 -->
        <navBarTop :title="'聊天室'"></navBarTop>
        <view class="main">
            <div>
                <div class="m-main">
@@ -20,9 +22,10 @@
    import WxStorage from "../../static/lib/wxStorage.js"
    import axios from '../../static/lib/axios.js'
    import contacts from '../../components/contacts/contacts.vue'
    export default {
    import navBarTop from '../../components/nav-bar-top/nav-bar-top.vue';
    export default{
        components: {
            contacts
            navBarTop,contacts
        },
        data() {
            return {
@@ -123,7 +126,7 @@
    .work {
        width: 100%;
        height: 100%;
        padding: 0.625rem 2.5% 3rem 2.5%;
        padding: 0rem 2.5% 3rem 2.5%;
        box-sizing: border-box;

        .hello {
@@ -161,6 +164,8 @@
        }

        .main {
            margin-top: 0.625rem;
			
            .m-title {
                width: 100%;
                height: 2rem;

 pages/reported/reported.vue

@@ -1,5 +1,7 @@
<template>
    <view class="policeDetails">
        <!-- 自定义顶部导航栏 -->
        <navBarTop :title="'我要报'"></navBarTop>
        <view class="row address">
            <view class="title">地址</view>
            <input v-model="place" placeholder="请输入地址"/>
@@ -33,10 +35,11 @@
</template>

<script>
    import seeImgs from '../../components/seeImges/seeImges.vue'
    export default {
    import seeImgs from '../../components/seeImges/seeImges.vue';
    import navBarTop from '../../components/nav-bar-top/nav-bar-top.vue';
    export default{
        components: {
            seeImgs
            navBarTop,seeImgs
        },
        data() {
            return {

 pages/workbench/workbench.vue

@@ -1,6 +1,8 @@
<!-- 工作台 -->
<template>
    <view class="work">
        <!-- 自定义顶部导航栏 -->
        <navBarTop :title="'我要巡'"></navBarTop>
        <view class="hello" v-if="hello">
            欢迎回来，{{userName}}
        </view>
@@ -47,9 +49,10 @@
<script>
    import WxStorage from "../../static/lib/wxStorage.js"
    import pColumn from '../../components/pColumn/pColumn.vue'
    export default {
    import navBarTop from '../../components/nav-bar-top/nav-bar-top.vue';
    export default{
        components: {
            pColumn
            navBarTop,pColumn
        },
        data() {
            return {
@@ -172,7 +175,7 @@
    .work {
        width: 100%;
        height: 100%;
        padding: 0.625rem 2.5% 3rem 2.5%;
        padding: 0rem 2.5% 3rem 2.5%;
        box-sizing: border-box;

        .hello {
@@ -190,6 +193,7 @@
        }

        .center {
            margin-top: 0.625rem;
            padding-top: 0.5rem;
            display: flex;
            align-items: center;

 store/state.js

@@ -10,7 +10,7 @@
    puserID: '',
    puserIphone:'',
    avatar:"../../static/logo.png",
    UserData: {},
    UserData: {}
}

export default state