index.vue 4.1 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154
  1. <template>
  2. <view>
  3. <view v-if="isShow">
  4. <u-tabbar :value="currentTab" activeColor="#2D73F0" inactiveColor="#333" :border="true">
  5. <u-tabbar-item
  6. v-for="item in clientList"
  7. :key="item.name"
  8. :text="item.text"
  9. :name="item.name"
  10. @click="handTab(item)"
  11. >
  12. <image class="bar_img" slot="active-icon" :src="item.selectedIconPath" />
  13. <image class="bar_img" slot="inactive-icon" :src="item.iconPath" />
  14. </u-tabbar-item>
  15. </u-tabbar>
  16. </view>
  17. <view v-if="!isShow">
  18. <u-tabbar :value="currentTab" activeColor="#2D73F0" inactiveColor="#333" :border="true">
  19. <u-tabbar-item
  20. v-for="item in merchantList"
  21. :key="item.name"
  22. :text="item.text"
  23. :name="item.name"
  24. @click="handTab(item)"
  25. >
  26. <image class="bar_img" slot="active-icon" :src="item.selectedIconPath" />
  27. <image class="bar_img" slot="inactive-icon" :src="item.iconPath" />
  28. </u-tabbar-item>
  29. </u-tabbar>
  30. </view>
  31. </view>
  32. </template>
  33. <script>
  34. // TODO: 商家端自定义tabbar待处理
  35. export default {
  36. name: 'TabBar',
  37. props: {
  38. currentTab: {
  39. type: String,
  40. default: 'clientHome',
  41. },
  42. },
  43. data() {
  44. return {
  45. isShow: true,
  46. clientList: [
  47. {
  48. text: '首页',
  49. name: 'clientHome',
  50. pagePath: '/pages/client/tabBar/home/index',
  51. iconPath: '/static/images/home.png',
  52. selectedIconPath: '/static/images/home-select.png',
  53. },
  54. {
  55. text: '社区',
  56. name: 'clientCommunity',
  57. pagePath: '/pages/client/tabBar/community/index',
  58. iconPath: '/static/images/community.png',
  59. selectedIconPath: '/static/images/community-select.png',
  60. },
  61. {
  62. text: '消息',
  63. name: 'clientMessage',
  64. pagePath: '/pages/client/tabBar/message/index',
  65. iconPath: '/static/images/message.png',
  66. selectedIconPath: '/static/images/message-select.png',
  67. },
  68. {
  69. text: '我的',
  70. name: 'clientMine',
  71. pagePath: 'pages/client/tabBar/mine/index',
  72. iconPath: '/static/images/mine.png',
  73. selectedIconPath: '/static/images/mine-select.png',
  74. },
  75. ],
  76. merchantList: [
  77. {
  78. text: '订单',
  79. name: 'merchantOrder',
  80. pagePath: 'pages/merchant/tabBar/order/index',
  81. iconPath: '/static/images/home.png',
  82. selectedIconPath: '/static/images/home-select.png',
  83. },
  84. {
  85. text: '消息',
  86. name: 'merchantMessage',
  87. pagePath: 'pages/merchant/tabBar/message/index',
  88. iconPath: '/static/images/community.png',
  89. selectedIconPath: '/static/images/community-select.png',
  90. },
  91. {
  92. text: '推广',
  93. name: 'merchantExtend',
  94. pagePath: 'pages/merchant/tabBar/extend/index',
  95. iconPath: '/static/images/community.png',
  96. selectedIconPath: '/static/images/community-select.png',
  97. },
  98. {
  99. text: '店铺',
  100. name: 'merchantStore',
  101. pagePath: 'pages/merchant/tabBar/store/index',
  102. iconPath: '/static/images/message.png',
  103. selectedIconPath: '/static/images/message-select.png',
  104. },
  105. {
  106. text: '我的',
  107. name: 'merchantMine',
  108. pagePath: 'pages/merchant/tabBar/mine/index',
  109. iconPath: '/static/images/mine.png',
  110. selectedIconPath: '/static/images/mine-select.png',
  111. },
  112. ],
  113. };
  114. },
  115. mounted() {
  116. this.isShow = uni.getStorageSync('tabbar_type')
  117. // if(!this.isShow){
  118. // this.isShow = true
  119. // }
  120. },
  121. watch:{
  122. isShow(newValue){
  123. console.log('@@@isShownewValue',newValue);
  124. }
  125. },
  126. methods: {
  127. handTab(row) {
  128. if(this.isShow){
  129. uni.switchTab({
  130. url: row.pagePath,
  131. });
  132. }else{
  133. uni.redirectTo({
  134. url: row.pagePath,
  135. });
  136. }
  137. },
  138. },
  139. };
  140. </script>
  141. <style lang="scss" scoped>
  142. .bar_img {
  143. width: 54rpx;
  144. height: 54rpx;
  145. }
  146. ::deep .u-tabbar {
  147. border-top: 2rpx solid #dadbde;
  148. }
  149. </style>