tabbar.vue 2.7 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107
  1. <template>
  2. <view>
  3. <workTable ref="workTableRef" v-if="pageCurrent=='workTable'"></workTable>
  4. <me v-if="pageCurrent=='me'"></me>
  5. <order v-if="pageCurrent=='order'"></order>
  6. <view class="box">
  7. <view class="cu-bar tabbar bg-white shadow foot">
  8. <!-- <view class="action" @click="navChange" data-cur="order">-->
  9. <!-- <view class='cuIcon-cu-image'>-->
  10. <!-- <image v-if="pageCurrent=='order'" src="../../static/tabbar/order_cur.png"></image>-->
  11. <!-- <image v-if="pageCurrent != 'order'" src="../../static/tabbar/order.png"></image>-->
  12. <!-- </view>-->
  13. <!-- <view :class="pageCurrent=='order'?'color_main':'text-gray'">配送列表</view>-->
  14. <!-- </view>-->
  15. <view class="action" @click="navChange" data-cur="workTable">
  16. <view class='cuIcon-cu-image'>
  17. <image v-if="pageCurrent=='workTable'" src="../../static/tabbar/workTable_cur.png"></image>
  18. <image v-if="pageCurrent != 'workTable'" src="../../static/tabbar/workTable.png"></image>
  19. </view>
  20. <view :class="pageCurrent=='workTable'?'color_main':'text-gray'">工作台</view>
  21. </view>
  22. <view class="action" @click="navChange" data-cur="me">
  23. <view class='cuIcon-cu-image'>
  24. <view class="cu-tag badge">
  25. <!-- 红点 -->
  26. </view>
  27. <image v-if="pageCurrent=='me'" src="../../static/tabbar/me_cur.png"></image>
  28. <image v-if="pageCurrent != 'me'" src="../../static/tabbar/me.png"></image>
  29. </view>
  30. <view :class="pageCurrent=='me'?'color_main':'text-gray'">个人中心</view>
  31. </view>
  32. </view>
  33. </view>
  34. </view>
  35. </template>
  36. <script>
  37. import order from "./order.vue"; //配送列表
  38. import workTable from "./workTable.vue"; //工作台
  39. import me from "./me.vue"; //个人中心
  40. export default {
  41. components: {
  42. order,
  43. workTable,
  44. me
  45. },
  46. data() {
  47. return {
  48. pageCurrent: 'workTable'
  49. }
  50. },
  51. onPullDownRefresh() {
  52. // console.log('refresh');
  53. console.log(this.pageCurrent);
  54. if (this.pageCurrent == 'workTable') {
  55. this.$refs['workTableRef'].pullDownRefresh();
  56. setTimeout(function () {
  57. uni.stopPullDownRefresh();
  58. }, 1000);
  59. }else {
  60. if (this.pageCurrent == 'me') {
  61. setTimeout(function () {
  62. uni.stopPullDownRefresh();
  63. }, 500);
  64. }
  65. }
  66. },
  67. methods: {
  68. navChange: function(e) {
  69. this.pageCurrent = e.currentTarget.dataset.cur;
  70. }
  71. },
  72. }
  73. </script>
  74. <style>
  75. .box {
  76. margin: 20upx 0;
  77. }
  78. .box view.cu-bar {
  79. margin-top: 20upx;
  80. }
  81. .logo_btn{
  82. width: 38*2rpx;
  83. height: 38*2rpx;
  84. position: absolute;
  85. z-index: 2;
  86. border: #09BB07;
  87. border-radius: 50%;
  88. top: -50rpx;
  89. left: 0rpx;
  90. right: 0;
  91. margin: auto;
  92. padding: 0;
  93. }
  94. .cu-bar.tabbar .action.add-action {
  95. padding-top: 56rpx !important;
  96. }
  97. </style>