Navbar.vue 2.8 KB

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071727374757677787980818283848586878889909192939495969798
  1. <template>
  2. <div>
  3. <van-nav-bar :title='appTitle'>
  4. <template #left>
  5. <van-icon name='wap-home-o' size='1.5em' color='#000' @click='backApp' />
  6. </template>
  7. <template #right>
  8. <van-icon name='search' size='1.5em' color='#000' @click='query' />
  9. <van-icon name='scan' size='1.5em' color='#000' style='margin-left:0.5em' @click='scan' />
  10. </template>
  11. </van-nav-bar>
  12. </div>
  13. </template>
  14. <script>
  15. import Vue from 'vue'
  16. import { NavBar, Icon, Tabbar, TabbarItem, Toast } from 'vant'
  17. Vue.use(NavBar).use(Icon)
  18. import { mapGetters, mapMutations } from 'vuex'
  19. import store from '@/store'
  20. import { debounce } from 'lodash'
  21. // 扫一扫回到函数
  22. window.__scanCallback = function (data) {
  23. switch (data.code) {
  24. // 扫描的⾮设备⼆维码
  25. case 0:
  26. case '0':
  27. // Toast('扫描的⾮设备⼆维码')
  28. store.commit('SCANASSETID', null)
  29. break
  30. // 扫码的是设备二维码
  31. case 1:
  32. case '1':
  33. // 设置时间,防止两次扫描同一个设备,assetid不改变,watch监听不触发
  34. let time = new Date().getTime()
  35. store.commit('SCANASSETID', `${data.text}__${time}`)
  36. break
  37. // 扫码失败
  38. case -1:
  39. case '-1':
  40. store.commit('SCANASSETID', null)
  41. Toast('扫码出错')
  42. break
  43. default:
  44. break
  45. }
  46. }
  47. export default {
  48. name: 'navbar',
  49. props: {},
  50. components: {},
  51. data() {
  52. return {}
  53. },
  54. computed: {
  55. ...mapGetters(['appTitle', 'scanAssetid']),
  56. },
  57. watch: {
  58. // 扫到二维码,跳转设备详情页
  59. scanAssetid(newV, oldV) {
  60. if (newV) {
  61. let assetid = newV.split('__')[0]
  62. this.$router.push({ name: 'AssetDetail', query: { assetid } })
  63. }
  64. },
  65. },
  66. beforeMount() {},
  67. mounted() {},
  68. methods: {
  69. ...mapMutations(['SCANASSETID']),
  70. // 返回工程信息化主菜单
  71. backApp() {
  72. window.webkit &&
  73. webkit.messageHandlers.cordova_iab.postMessage(
  74. JSON.stringify({
  75. method: 'close',
  76. })
  77. )
  78. },
  79. // 扫码,300ms触发一次
  80. scan: debounce(function () {
  81. window.webkit &&
  82. webkit.messageHandlers.cordova_iab.postMessage(
  83. JSON.stringify({
  84. method: 'scan',
  85. })
  86. )
  87. }, 300),
  88. // 全局搜索
  89. query() {
  90. this.$router.push({ name: 'GlobalSearch' })
  91. },
  92. },
  93. }
  94. </script>
  95. <style lang='less' scoped>
  96. </style>