浏览代码

提交navbar

yunxing 4 年之前
父节点
当前提交
5eb05b8ed7
共有 9 个文件被更改,包括 119 次插入10 次删除
  1. 35 4
      src/App.vue
  2. 49 0
      src/components/Navbar.vue
  3. 5 0
      src/store/index.ts
  4. 22 0
      src/utils/util.js
  5. 1 1
      src/views/EquipmentFacilities.vue
  6. 1 1
      src/views/FloorFunc.vue
  7. 1 1
      src/views/OtherMatter.vue
  8. 2 2
      src/views/Overview.vue
  9. 3 1
      vue.config.js

+ 35 - 4
src/App.vue

@@ -1,5 +1,8 @@
 <template>
-    <div id='app'>
+    <!-- ios头部padding适配 -->
+    <div id='app' :class='isIOS?"ios-padding":""'>
+        <!-- 顶部navbar -->
+        <NarBar class='nav-bar' />
         <keep-alive>
             <router-view v-if='$route.meta.keepAlive' />
         </keep-alive>
@@ -18,9 +21,12 @@ import Vue from 'vue'
 import { Tabbar, TabbarItem } from 'vant'
 Vue.use(Tabbar).use(TabbarItem)
 import store from './store/index'
+import NarBar from './components/Navbar'
+import { osInfo } from './utils/util'
 export default {
     name: 'App',
     props: {},
+    components: { NarBar },
     data() {
         return {
             active: 0,
@@ -31,24 +37,49 @@ export default {
                 2: 'EquipmentFacilities',
                 3: 'OtherMatter',
             },
+            // appTitle字典
+            titleDict: {
+                0: '管理说明书',
+                1: '楼层功能',
+                2: '设备设施',
+                3: '其他事项',
+            },
+            isIOS: false, //是否是IOS
         }
     },
-    components: {},
     beforeMount() {},
     created() {
-        store.commit('SETSSOTOKEN','admin:1231')
+        store.commit('SETSSOTOKEN', 'admin:liujiandong')
+        console.log(window.location.href)
+        const { os } = osInfo()
+        if (os === 'iOS') {
+            this.isIOS = true
+        } else {
+            this.isIOS = false
+        }
     },
     mounted() {
-        console.log(process.env)
+        console.log('环境变量', process.env.VUE_APP_RealEnv)
     },
     methods: {
+        // 路由更改
         changeTabbar(active) {
             console.log(active)
             this.$router.push({ name: this.routeDict[active] })
+            store.commit('SETAPPTITLE', this.titleDict[active])
         },
     },
 }
 </script>
 <style lang="less">
 @import './style/common.less';
+.ios-padding {
+    padding-top: 15px;
+    box-sizing: border-box;
+}
+// navbar高度
+.nav-bar {
+    width: 100%;
+    height: 50px;
+}
 </style>

+ 49 - 0
src/components/Navbar.vue

@@ -0,0 +1,49 @@
+<template>
+    <div>
+        <van-nav-bar :title='appTitle'>
+            <template #left>
+                <van-icon name='wap-home-o' size='1.5em' color='#000' @click='backApp' />
+            </template>
+            <template #right>
+                <van-icon name='scan' size='1.5em' color='#000' @click='scan' />
+                <van-icon name='search' size='1.5em' color='#000' style='margin-left:0.5em' @click='query' />
+            </template>
+        </van-nav-bar>
+    </div>
+</template>
+<script>
+import Vue from 'vue'
+import { NavBar, Icon, Tabbar, TabbarItem } from 'vant'
+Vue.use(NavBar).use(Icon)
+import { mapGetters } from 'vuex'
+import store from '@/store'
+export default {
+    name: 'navbar',
+    props: {},
+    components: {},
+    data() {
+        return {}
+    },
+    computed: {
+        ...mapGetters(['appTitle']),
+    },
+    beforeMount() {},
+    mounted() {},
+    methods: {
+        // 返回工程信息化主菜单
+        backApp() {
+            console.log('backApp')
+        },
+        // 扫码
+        scan() {
+            console.log('扫码')
+        },
+        // 全局搜索
+        query() {
+            console.log('全局搜索')
+        },
+    },
+}
+</script>
+<style lang='less' scoped>
+</style>

+ 5 - 0
src/store/index.ts

@@ -6,15 +6,20 @@ Vue.use(Vuex)
 export default new Vuex.Store({
     state: {
         ssoToken: 'admin:liujiandong',
+        appTitle: '管理说明书', //顶部标题
         // ssoToken: null,
     },
     getters: {
         ssoToken: (state) => state.ssoToken,
+        appTitle: (state) => state.appTitle,
     },
     mutations: {
         SETSSOTOKEN(state, data) {
             state.ssoToken = data
         },
+        SETAPPTITLE(state, data) {
+            state.appTitle = data
+        },
     },
     actions: {},
     modules: {},

+ 22 - 0
src/utils/util.js

@@ -0,0 +1,22 @@
+function osInfo() {
+    const ua = navigator.userAgent
+    const isiOS = !!ua.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/)
+    const isAndroid = ua.indexOf('Android') > -1 || ua.indexOf('Adr') > -1
+    const dpr = window.devicePixelRatio <= 3 ? parseInt(window.devicePixelRatio, 10) : 3
+    let os = ''
+    let version = ''
+    if (isiOS) {
+        os = 'iOS'
+        version = ua.match(/OS (\d+)_(\d+)_?(\d+)?/)
+    } else if (isAndroid) {
+        os = 'Android'
+        version = ua.match(/Android\s([0-9]*)/)
+    }
+    version = version && version[1] && parseInt(version[1], 10)
+    return {
+        os: os,
+        version: version,
+        dpr: dpr,
+    }
+}
+export { osInfo }

+ 1 - 1
src/views/EquipmentFacilities.vue

@@ -19,7 +19,7 @@ export default {
 <style lang='less' scoped>
 .equipment-facilities {
     width: 100%;
-    height: 100%;
+    height: calc(100% - 50px);
     background-color: #f08080;
 }
 </style>

+ 1 - 1
src/views/FloorFunc.vue

@@ -19,7 +19,7 @@ export default {
 <style lang='less' scoped>
 .floor-function {
     width: 100%;
-    height: 100%;
+    height: calc(100% - 50px);
     background-color: #add8e6;
 }
 </style>

+ 1 - 1
src/views/OtherMatter.vue

@@ -19,7 +19,7 @@ export default {
 <style lang='less' scoped>
 .other-matter {
     width: 100%;
-    height: 100%;
+    height: calc(100% - 50px);
     background-color: #d3d3d3;
 }
 </style>

+ 2 - 2
src/views/Overview.vue

@@ -32,7 +32,7 @@ export default {
 <style lang='less' scoped>
 .overview {
     width: 100%;
-    height: 100%;
-    background-color: #87cefa;
+    height: calc(100% - 50px);
+    // background-color: #87cefa;
 }
 </style>

+ 3 - 1
vue.config.js

@@ -7,6 +7,7 @@ const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPl
 module.exports = {
     devServer: {
         port: 8092,
+        open: true,
         proxy: {
             '/data': {
                 // target: 'http://10.199.143.126', //生产环境
@@ -64,7 +65,8 @@ module.exports = {
     // 配置webpack
     configureWebpack: (config) => {
         // 生成环境,删除console.log和debugger
-        if (process.env.NODE_ENV === 'production') {
+        // TODO: 1.
+        if (process.env.NODE_ENV === 'production' && false) {
             config.optimization.minimizer[0].options.terserOptions.compress.drop_console = true //删除console
             config.optimization.minimizer[0].options.terserOptions.compress.drop_debugger = true //删除 debugger
             config.optimization.minimizer[0].options.terserOptions.compress.pure_funcs = ['console.log'] //删除