From 73153737f536f8feff7a80eeffce6fed68ff8c57 Mon Sep 17 00:00:00 2001
From: Administrator <admin>
Date: Wed, 23 Jun 2021 19:58:10 +0800
Subject: [PATCH] app 顶部导航条放置按钮，点击跳转到我的页面
---
pages.json | 19 +++++----
pages/alarm_list/alarm_list.vue | 16 ++++++++
components/nav-bar-top/nav-bar-top.vue | 60 ++++++++++++++++++++++++++++++
App.vue | 2
store/state.js | 2
5 files changed, 89 insertions(+), 10 deletions(-)
diff --git a/App.vue b/App.vue
index 5edab8e..3b03684 100644
--- a/App.vue
+++ b/App.vue
@@ -43,7 +43,7 @@
},
onHide: function() {
// console.log('App Hide')
- },
+ }
}
</script>
diff --git a/components/nav-bar-top/nav-bar-top.vue b/components/nav-bar-top/nav-bar-top.vue
new file mode 100644
index 0000000..6983060
--- /dev/null
+++ b/components/nav-bar-top/nav-bar-top.vue
@@ -0,0 +1,60 @@
+<template name="navBarTop">
+ <!-- 自定义顶部导航栏 -->
+ <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>
+</template>
+
+<script>
+ export default{
+ name:"navBarTop",
+ data(){
+ return{
+ navBarImage:this.$store.state.avatar
+ }
+ },
+ methods:{
+ //跳转至我的页面
+ gotoMyself(){
+ uni.navigateTo({
+ url:'../myself/myself'
+ })
+ }
+ }
+ }
+</script>
+
+<style lang="scss">
+ .nav-bar-top{
+ background-color: #FFFFFF;
+ height: 2.7rem;
+ align-items: center;
+
+ .nav-bar-top-left{
+ // background-color: #00BFFF;
+ width: 2rem;
+ height: 2rem;
+ margin-left: 1rem;
+ border-radius: 50px;
+ align-items: center;
+ justify-content: center;
+
+ image{
+ width: 1.8rem;
+ height: 1.8rem;
+ border-radius: 50px;
+ }
+ }
+
+ .nav-bar-top-title{
+ font-weight: 550;
+ display: flex;
+ margin-left: 7rem;
+
+ }
+
+ }
+</style>
diff --git a/pages.json b/pages.json
index 714f77e..2db6ef3 100644
--- a/pages.json
+++ b/pages.json
@@ -206,7 +206,10 @@
"path": "pages/alarm_list/alarm_list",
"name": "alarm_list",
"style": {
- "navigationBarTitleText": "我要查"
+ "navigationBarTitleText": "我要查",
+ "app-plus":{
+ "titleNView":"false"
+ }
}
},
{
@@ -257,8 +260,7 @@
}
],
"globalStyle": {//将组件安装在项目的components目录下，并符合components/组件名称/组件名称.vue目录结构。可以不用引用、注册，直接在页面中使用。
- "autoscan": true,
- "onReachBottomDistance":160
+ "autoscan": true
},
"tabBar": {
"color": "#7a7e83",
@@ -291,12 +293,13 @@
"text": "我要巡",
"iconPath": "static/img/bar/patrol.png",
"selectedIconPath": "static/img/bar/patrol-blue.png"
- },{
- "pagePath": "pages/myself/myself",
- "text": "我的",
- "iconPath": "static/tabbar/userHL.png",
- "selectedIconPath": "static/workbench/user01.png"
}
+ // ,{
+ // "pagePath": "pages/myself/myself",
+ // "text": "我的",
+ // "iconPath": "static/tabbar/userHL.png",
+ // "selectedIconPath": "static/workbench/user01.png"
+ // }
]
},
diff --git a/pages/alarm_list/alarm_list.vue b/pages/alarm_list/alarm_list.vue
index 5695e88..3b8a158 100644
--- a/pages/alarm_list/alarm_list.vue
+++ b/pages/alarm_list/alarm_list.vue
@@ -1,5 +1,14 @@
<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>
+ </view> -->
+ <navBarTop></navBarTop>
+
<view class="navigation-bar">
<view class="alarm-bar-total" :style="{color:totalColor,borderBottom:totalBoder}" @click="getAlarmListInfo(1)">全部({{totalNumber}})</view>
<view class="alarm-bar-load" :style="{color:loadColor,borderBottom:loadBoder}" @click="getAlarmListInfo(2)">未处理({{untreatedNumber}})</view>
@@ -39,7 +48,11 @@
</template>
<script>
+ import navBarTop from '../../components/nav-bar-top/nav-bar-top.vue'
export default{
+ components: {
+ navBarTop
+ },
data(){
return{
pathUrl:"http://s16s652780.51mypc.cn/api",
@@ -209,6 +222,8 @@
</style>
<style lang="scss" scoped>
.alarm-list,
+ .nav-bar-top,
+ .nav-bar-top-left,
.alarm-list-content,
.alarm-info,
.alarm-id-type-status,
@@ -236,6 +251,7 @@
letter-spacing: 1px;
position: fixed;
z-index: 999;
+ margin-top: 2.7rem;
.alarm-bar-total{
align-items: center;
diff --git a/store/state.js b/store/state.js
index 4f0add4..7c525d0 100644
--- a/store/state.js
+++ b/store/state.js
@@ -9,7 +9,7 @@
puserName: '',
puserID: '',
puserIphone:'',
- avatar:"",
+ avatar:"../../static/logo.png",
UserData: {},
}
--
Gitblit v1.9.3