index.vue 2.6 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990
  1. <template>
  2. <view>
  3. <view>
  4. <home v-if="value==0" @goTab="tabbarClick" @goSearch="goSearch"/>
  5. <classification ref="goods" v-show="value==1" @goTab="tabbarClick" />
  6. <shoppingCart v-if="value==2" />
  7. </view>
  8. <uni-fab v-if="value==0||value==1" style="bottom: 200px;" ref="fab" :pattern="pattern" @fabClick="fabClick" :popMenu="false"
  9. horizontal="right" />
  10. <u-tabbar :value="value" :fixed="true" :placeholder="false" :safeAreaInsetBottom="true" activeColor="#fd5003"
  11. inactiveColor="#727272">
  12. <u-tabbar-item text="首页" @click="tabbarClick(0)">
  13. <image style="width: 48rpx;height: 48rpx;" slot="active-icon"
  14. src="/static/images/tabBar/home_selected.png"></image>
  15. <image style="width: 48rpx;height: 48rpx;" slot="inactive-icon" src="/static/images/tabBar/home.png">
  16. </image>
  17. </u-tabbar-item>
  18. <u-tabbar-item text="商品" @click="tabbarClick(1)">
  19. <image style="width: 48rpx;height: 48rpx;" slot="active-icon"
  20. src="/static/images/tabBar/classification_selected.png"></image>
  21. <image style="width: 48rpx;height: 48rpx;" slot="inactive-icon"
  22. src="/static/images/tabBar/classification.png">
  23. </image>
  24. </u-tabbar-item>
  25. <u-tabbar-item text="购物车" @click="tabbarClick(2)">
  26. <image style="width: 48rpx;height: 48rpx;" slot="active-icon"
  27. src="/static/images/tabBar/cart_selected.png"></image>
  28. <image style="width: 48rpx;height: 48rpx;" slot="inactive-icon" src="/static/images/tabBar/cart.png">
  29. </image>
  30. </u-tabbar-item>
  31. <!-- <u-tabbar-item text="首页" icon="home-fill" @click="tabbarClick(3)"></u-tabbar-item> -->
  32. </u-tabbar>
  33. </view>
  34. </template>
  35. <script>
  36. import home from './home.vue'
  37. import classification from './classification.vue'
  38. import shoppingCart from './shoppingCart.vue'
  39. export default {
  40. components: {
  41. home,
  42. classification,
  43. shoppingCart
  44. },
  45. data() {
  46. return {
  47. value: 0,
  48. pattern: {
  49. icon: 'home-filled',
  50. buttonColor: '#ea4c18'
  51. }
  52. }
  53. },
  54. onLoad(options) {
  55. if (uni.getStorageSync('tabKey')) {
  56. this.tabbarClick(uni.getStorageSync('tabKey'))
  57. uni.removeStorageSync('tabKey')
  58. }
  59. uni.$on('jfSearchData', (data) => {
  60. this.$refs.goods.searchData(data)
  61. })
  62. },
  63. methods: {
  64. tabbarClick(tab) {
  65. this.value = tab
  66. },
  67. fabClick() {
  68. uni.switchTab({
  69. url: '/pages/tabBar/home',
  70. })
  71. },
  72. goSearch() {
  73. this.value = 1
  74. // setTimeout(() => {
  75. // this.$refs.goods.inSearch()
  76. // }, 200)
  77. }
  78. }
  79. }
  80. </script>
  81. <style lang="scss" scoped>
  82. .containerMall {
  83. height: calc(100vh - 85px);
  84. }
  85. ::v-deep .uni-fab__circle--rightBottom {
  86. bottom: 170rpx;
  87. }
  88. </style>