zx-footer-bar.vue 2.5 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119
  1. <template>
  2. <view class="container">
  3. <view class="content">
  4. <view class="item" :class="[active == 0?'active':'']"
  5. @click="navTo(0,'/statistics/index/index?type=')">
  6. <image :src="active == 0 ?'/static/images/tabBar/index1_act.png':'/static/images/tabBar/index1.png'"
  7. mode="aspectFit" class="icon-img"></image>
  8. <text class="title">首页</text>
  9. </view>
  10. <view class="item" :class="[active == 1?'active':'']" @click="navTo(1,'/saomaDiancan/index/index?type=')">
  11. <image :src="active == 1 ?'/static/images/tabBar/icon_20_on.png':'/static/images/tabBar/icon_20.png'" mode="aspectFit" class="icon-img"></image>
  12. <text class="title">门店管理</text>
  13. </view>
  14. <view class="item" :class="[active == 2?'active':'']" @click="navTo(2,'/saomaDiancan/my/my?type=')">
  15. <image :src="active == 2 ?'/static/images/tabBar/icon_21_on.png':'/static/images/tabBar/icon_21.png'" class="icon-img"></image>
  16. <text class="title">个人中心</text>
  17. </view>
  18. </view>
  19. </view>
  20. </template>
  21. <script>
  22. export default {
  23. props: {
  24. active: {
  25. type: Number,
  26. default: 0
  27. },
  28. // 扫码点餐2,无痕跳转2
  29. type: {
  30. type: Number,
  31. default: 1
  32. },
  33. },
  34. data() {
  35. return {
  36. };
  37. },
  38. methods: {
  39. navTo(index, url) {
  40. console.log("index, url", this.active,index, url)
  41. if (index != this.active) {
  42. uni.redirectTo({
  43. url: url+this.type
  44. })
  45. }
  46. }
  47. }
  48. }
  49. </script>
  50. <style scoped>
  51. .container {
  52. width: 100%;
  53. height: 100rpx;
  54. /*兼容 IOS<11.2*/
  55. padding-bottom: constant(safe-area-inset-bottom);
  56. /*兼容 IOS>11.2*/
  57. padding-bottom: env(safe-area-inset-bottom);
  58. box-sizing: content-box;
  59. }
  60. .content {
  61. background-color: #fff;
  62. width: 100vw;
  63. height: 100rpx;
  64. /*兼容 IOS<11.2*/
  65. padding-bottom: constant(safe-area-inset-bottom);
  66. /*兼容 IOS>11.2*/
  67. padding-bottom: env(safe-area-inset-bottom);
  68. display: flex;
  69. flex-flow: row nowrap;
  70. justify-content: space-around;
  71. align-items: center;
  72. /* box-shadow: 0 20rpx 20rpx #f6f6f6 inset; */
  73. position: fixed;
  74. left: 0;
  75. bottom: 0;
  76. z-index: 900;
  77. box-sizing: content-box;
  78. }
  79. .content .item {
  80. flex: auto;
  81. display: flex;
  82. flex-flow: column nowrap;
  83. justify-content: center;
  84. align-items: center;
  85. }
  86. .content .icon-img {
  87. display: block;
  88. width: 48rpx;
  89. height: 48rpx;
  90. }
  91. .content .title {
  92. font-size: 24rpx;
  93. height: 28rpx;
  94. line-height: 28rpx;
  95. text-align: center;
  96. color: #ABADC2;
  97. }
  98. .content .active .title {
  99. color: #3387FF;
  100. }
  101. </style>