From d1441fb578d08ce4669a13cb63aa01f82823e391 Mon Sep 17 00:00:00 2001
From: Administrator <admin>
Date: Thu, 24 Jun 2021 15:48:38 +0800
Subject: [PATCH] 顶部导航栏自定义，通过头像点击跳转到我的页面
---
components/uni-nav-bar/uni-nav-bar.vue | 251 +++++++++++++++++++++++++++
manifest.json | 2
pages.json | 24 +
pages/alarm_list/alarm_list.vue | 85 ++++++---
pages/article/article.vue | 8
components/nav-bar-top/nav-bar-top.vue | 56 +++--
components/uni-nav-bar/uni-status-bar.vue | 25 ++
pages/reported/reported.vue | 9
pages/groupChat/groupChat.vue | 11
store/state.js | 2
pages/workbench/workbench.vue | 10
11 files changed, 408 insertions(+), 75 deletions(-)
diff --git a/components/nav-bar-top/nav-bar-top.vue b/components/nav-bar-top/nav-bar-top.vue
index 6983060..e232808 100644
--- a/components/nav-bar-top/nav-bar-top.vue
+++ b/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>
diff --git a/components/uni-nav-bar/uni-nav-bar.vue b/components/uni-nav-bar/uni-nav-bar.vue
new file mode 100644
index 0000000..30aa6eb
--- /dev/null
+++ b/components/uni-nav-bar/uni-nav-bar.vue
@@ -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>
diff --git a/components/uni-nav-bar/uni-status-bar.vue b/components/uni-nav-bar/uni-status-bar.vue
new file mode 100644
index 0000000..47179d3
--- /dev/null
+++ b/components/uni-nav-bar/uni-status-bar.vue
@@ -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>
diff --git a/manifest.json b/manifest.json
index aed7ceb..1448d7b 100644
--- a/manifest.json
+++ b/manifest.json
@@ -1,6 +1,6 @@
{
"name" : "jfpt",
- "appid" : "__UNI__1A57486",
+ "appid" : "__UNI__88EDF2B",
"description" : "",
"versionName" : "1.0.0",
"versionCode" : "100",
diff --git a/pages.json b/pages.json
index 2db6ef3..7b3d4d9 100644
--- a/pages.json
+++ b/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
}
}
},
diff --git a/pages/alarm_list/alarm_list.vue b/pages/alarm_list/alarm_list.vue
index 3b8a158..d136b23 100644
--- a/pages/alarm_list/alarm_list.vue
+++ b/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;
diff --git a/pages/article/article.vue b/pages/article/article.vue
index 7e90d1d..aa2be09 100644
--- a/pages/article/article.vue
+++ b/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{
diff --git a/pages/groupChat/groupChat.vue b/pages/groupChat/groupChat.vue
index 482a81a..1fd9208 100644
--- a/pages/groupChat/groupChat.vue
+++ b/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;
diff --git a/pages/reported/reported.vue b/pages/reported/reported.vue
index 7ec79f8..1f9719f 100644
--- a/pages/reported/reported.vue
+++ b/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 {
diff --git a/pages/workbench/workbench.vue b/pages/workbench/workbench.vue
index a1b5e47..25133f4 100644
--- a/pages/workbench/workbench.vue
+++ b/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;
diff --git a/store/state.js b/store/state.js
index 7c525d0..93b8c35 100644
--- a/store/state.js
+++ b/store/state.js
@@ -10,7 +10,7 @@
puserID: '',
puserIphone:'',
avatar:"../../static/logo.png",
- UserData: {},
+ UserData: {}
}
export default state
--
Gitblit v1.9.3