fa-navbar.vue 2.3 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121
  1. <template>
  2. <view v-if="navbar.isshow">
  3. <u-navbar
  4. :is-back="isBack"
  5. :back-icon-color="navbar.backIconColor"
  6. back-text="返回"
  7. :back-text-style="navbar.backTextStyle"
  8. :title="isShow ? title : ''"
  9. :title-color="navbar.titleColor"
  10. :title-size="navbar.titleSize"
  11. :background="navbar.bgColor"
  12. :border-bottom="borderBottom"
  13. :custom-back="goBack"
  14. :title-width="400"
  15. z-index="10907"
  16. ></u-navbar>
  17. </view>
  18. </template>
  19. <script>
  20. export default {
  21. name: 'fa-navbar',
  22. props: {
  23. title: {
  24. type: String,
  25. default: '标题'
  26. },
  27. borderBottom: {
  28. type: Boolean,
  29. default: true
  30. },
  31. backIndex:{
  32. type:Number,
  33. default:1
  34. }
  35. },
  36. computed: {
  37. navbar() {
  38. if (this.vuex_config.navbar) {
  39. return this.vuex_config.navbar;
  40. } else {
  41. return {};
  42. }
  43. },
  44. tabbar() {
  45. if (this.vuex_config.tabbar) {
  46. return this.vuex_config.tabbar;
  47. } else {
  48. return {
  49. isshow: false,
  50. list: []
  51. };
  52. }
  53. },
  54. isBack() {
  55. // #ifdef MP-ALIPAY || MP-BAIDU
  56. return false;
  57. // #endif
  58. // #ifdef MP-WEIXIN || H5 || APP-PLUS
  59. let status = true;
  60. this.tabbar.list.some(item => {
  61. let path = this.$util.getPath(item.path);
  62. if (path == this.pageUrl || path == '/' + this.pageUrl) {
  63. status = false;
  64. return true;
  65. }
  66. });
  67. return status;
  68. // #endif
  69. },
  70. isShow() {
  71. // #ifdef MP-ALIPAY
  72. return false;
  73. // #endif
  74. // #ifndef MP-ALIPAY
  75. return true;
  76. // #endif
  77. }
  78. },
  79. created() {
  80. // 获取引入了u-tabbar页面的路由地址,该地址没有路径前面的"/"
  81. let pages = getCurrentPages();
  82. // 页面栈中的最后一个即为项为当前页面,route属性为页面路径
  83. this.pageUrl = pages[pages.length - 1].route;
  84. this.pageNum = pages.length;
  85. },
  86. data() {
  87. return {
  88. pageUrl: '',
  89. pageNum: 0
  90. };
  91. },
  92. methods: {
  93. goBack() {
  94. let status = false;
  95. let tabbar = this.vuex_config.tabbar;
  96. tabbar.list.forEach(item => {
  97. let path = this.$util.getPath(item.path);
  98. if (path == this.pageUrl || path == '/' + this.pageUrl) {
  99. status = true;
  100. }
  101. });
  102. if (status) return;
  103. if (this.pageNum == 1) {
  104. //只有当前页面了
  105. uni.$u.route({
  106. url: '/pages/index/index'
  107. });
  108. } else {
  109. uni.$u.route({
  110. type:'back',
  111. delta: this.backIndex
  112. });
  113. }
  114. }
  115. }
  116. };
  117. </script>
  118. <style></style>