index.vue 3.6 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126
  1. <template>
  2. <view class="content" :style="{paddingBottom:isIphoneX?'140rpx':'98rpx'}">
  3. <!-- 采美采购商城 -->
  4. <view :style="{'display':show_index == 0 ?'block':'none'}">
  5. <seller-home ref="home" v-if="isHomeData"></seller-home>
  6. </view>
  7. <!-- 商品分类 -->
  8. <view :style="{'display':show_index == 1? 'block':'none'}">
  9. <seller-category ref="category" v-if="isCategory"></seller-category>
  10. </view>
  11. <!-- 账户中心 -->
  12. <view :style="{'display':show_index == 2 ?'flex':'none'}">
  13. <seller-user ref="user" v-if="isUserData"></seller-user>
  14. </view>
  15. <!-- isIphoneX判断是否为刘海屏在main.js里,好像uniapp有一个css变量获取刘海屏的安全区域 -->
  16. <view class="tabBar" :style="{height:isIphoneX?'140rpx':'98rpx'}">
  17. <!-- 导航的中间圆圈 -->
  18. <view class="tabBar_list" :style="{paddingBottom:isIphoneX?'40rpx':''}">
  19. <view v-for="(item) in tab_nav_list" :key="item.id" class="tabBar_item" @tap="cut_index(item.id)">
  20. <image v-if="show_index == item.id" :src="item.iconAc"></image>
  21. <image v-else :src="item.icon"></image>
  22. <view :class="{'tabBar_name':true,'nav_active':show_index == item.id}">{{item.name}}</view>
  23. </view>
  24. </view>
  25. </view>
  26. </view>
  27. </template>
  28. <script>
  29. import sellerHome from '@/components/cm-module/cm-seller/home.vue'
  30. import sellerUser from '@/components/cm-module/cm-seller/user.vue'
  31. import sellerCategory from '@/components/cm-module/cm-seller/category.vue'
  32. export default {
  33. components: {
  34. sellerHome,//采美采购商城 0
  35. sellerUser,//账户中心 1
  36. sellerCategory,//商品分类 2
  37. },
  38. data() {
  39. return {
  40. show_index:2,//控制显示那个组件
  41. isUserData: false,
  42. isCategory: false,
  43. isHomeData: false,
  44. isIphoneX:this.$store.state.isIphone,
  45. tab_nav_list :[//菜单列表
  46. {'id':0,'name':'首页',icon:'../../../static/icon-home@3x.png',iconAc:'../../../static/icon-home-active@3x.png'},
  47. {'id':1,'name':'分类',icon:'../../../static/icon-sort@3x.png',iconAc:'../../../static/icon-sort-active@3x.png'},
  48. {'id':2,'name':'我的',icon:'../../../static/icon-user@3x.png',iconAc:'../../../static/icon-user-active@3x.png'}
  49. ],
  50. }
  51. },
  52. onLoad() {
  53. this.$nextTick(()=>{// 一定要等视图更新完再调用方法
  54. setTimeout(()=>{ this.isUserData = true },100)
  55. })
  56. },
  57. methods: {
  58. // 切换组件
  59. cut_index(type){
  60. this.show_index = type
  61. if(this.show_index == 0){
  62. this.isHomeData = true
  63. this.isUserData = false
  64. this.isCategory = false
  65. }else if(this.show_index == 1){
  66. this.isHomeData = false
  67. this.isUserData = false
  68. this.isCategory = true
  69. }else if(this.show_index == 2){
  70. this.isHomeData = false
  71. this.isUserData = true
  72. this.isCategory = false
  73. }
  74. },
  75. onPullDownRefresh(){
  76. if(this.show_index == 0){
  77. this.$refs.home.getSellerHomeInfo()
  78. }else if(this.show_index == 2){
  79. this.$refs.user.initData()
  80. }
  81. uni.stopPullDownRefresh()
  82. }
  83. }
  84. }
  85. </script>
  86. <style lang="scss">
  87. .tabBar{
  88. width:100%;
  89. height: 98rpx;
  90. background: #fff;
  91. border-top:1px solid #E5E5E5;
  92. position: fixed;
  93. bottom:0px;
  94. left:0px;
  95. right:0px;
  96. display: flex;
  97. align-items: center;
  98. justify-content: center;
  99. z-index: 999;
  100. .tabBar_list{
  101. width:86%;
  102. display: flex;
  103. justify-content: space-between;
  104. image{
  105. width:48rpx;
  106. height: 48rpx;
  107. margin-bottom:2rpx
  108. }
  109. .tabBar_item{
  110. width:150rpx;
  111. display: flex;
  112. justify-content: center;
  113. align-items: center;
  114. flex-direction: column;
  115. font-size: 20rpx;
  116. color: #999999;
  117. }
  118. }
  119. }
  120. .nav_active{
  121. color: $color-system;
  122. }
  123. </style>