index.vue 4.4 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178
  1. <template>
  2. <view class="container" :style="{height: winHeight + 'px'}">
  3. <!-- 状态栏高度 -->
  4. <view :style="{ height: `${statusBarHeight}px`, width: '100%', backgroundColor: '#FF6702' }"></view>
  5. <!-- 导航栏 -->
  6. <view :style="{ height: `${navigationBarHeight}rpx`,lineHeight: `${navigationBarHeight}rpx`}" class="order-nav">
  7. <!-- <view class="back-button" @tap="handBack()"></view> -->
  8. {{activeRole == '0' ? '接单' : '我的' }}
  9. </view>
  10. <!-- <view class="content-dom"> -->
  11. <view style="flex: 1;width: 100%;overflow: hidden;">
  12. <rider-shipping :riderStatus="riderStatus"></rider-shipping>
  13. </view>
  14. <!--view style="flex: 1;width: 100%;overflow: hidden;" v-if="activeRole == '1'">
  15. <rider-me></rider-me>
  16. </view-->
  17. <!-- </view> -->
  18. <!-- 底部导航 -->
  19. <!--view class="page-footer">
  20. <view class="foot-item" :class="item.pagePath == activeRouter?'active':''" v-for="(item,index) in footerList" :key="index"
  21. @click="goRouter(item)">
  22. <block v-if="item.pagePath == activeRouter">
  23. <image :src="item.selectedIconPath"></image>
  24. <view class="txt">{{item.text}}</view>
  25. </block>
  26. <block v-else>
  27. <image :src="item.iconPath"></image>
  28. <view class="txt">{{item.text}}</view>
  29. </block>
  30. </view>
  31. </view-->
  32. </view>
  33. </template>
  34. <script>
  35. import riderOrder from "@/components/riderOrder/index.vue";
  36. import riderShipping from "./components/rider_shipping/index.vue";
  37. import riderMe from "./components/rider_me/index.vue";
  38. var statusBarHeight = uni.getSystemInfoSync().statusBarHeight + 'px';
  39. let app = getApp();
  40. export default {
  41. components: {
  42. riderOrder,
  43. riderShipping,
  44. riderMe
  45. },
  46. data() {
  47. return {
  48. riderStatus: 1,
  49. winHeight: 0,
  50. activeRouter: '/pages/rider/rider_shipping/index',
  51. activeRole: '0',
  52. footerList: [{
  53. pagePath: "/pages/rider/rider_shipping/index",
  54. iconPath: require("./static/ddh.png"),
  55. selectedIconPath: require("./static/ddl.png"),
  56. text: "订单",
  57. role: '0'
  58. },
  59. {
  60. pagePath: "/pages/rider/rider_me/index",
  61. iconPath: require("./static/wdh.png"),
  62. selectedIconPath: require("./static/wdl.png"),
  63. text: "我的",
  64. role: '1'
  65. }
  66. ],
  67. statusBarHeight: app.globalData.statusBarHeight,
  68. navigationBarHeight: 112,
  69. }
  70. },
  71. methods: {
  72. goRouter(item) {
  73. if (this.activeRouter == item.pagePath) return
  74. this.activeRouter = item.pagePath
  75. this.activeRole = item.role
  76. // uni.redirectTo({
  77. // url: item.pagePath,
  78. // animationType: 'none' // 关闭默认的滑动效果
  79. // });
  80. },
  81. },
  82. onLoad(options) {
  83. let that = this
  84. that.riderStatus = options.riderStatus?options.riderStatus:1;
  85. console.log(that.riderStatus+"=======")
  86. // 隐藏TabBar
  87. uni.hideTabBar({});
  88. uni.getSystemInfo({
  89. success: function(res) {
  90. that.winHeight = res.windowHeight
  91. },
  92. });
  93. },
  94. mounted() {
  95. },
  96. }
  97. </script>
  98. <style scoped lang="scss">
  99. .container {
  100. display: flex;
  101. align-items: center;
  102. flex-direction: column;
  103. justify-content: space-between;
  104. overflow: hidden;
  105. position: relative;
  106. }
  107. .content-dom {
  108. width: 100%;
  109. flex: 1;
  110. }
  111. .order-nav {
  112. width: 100%;
  113. font-weight: 500;
  114. font-size: 35rpx;
  115. margin-top: -2rpx;
  116. color: #FFFFFF;
  117. position: relative;
  118. background-color: #FF6702;
  119. display: flex;
  120. align-items: center;
  121. justify-content: center;
  122. .back-button {
  123. position: absolute;
  124. left: 20rpx;
  125. }
  126. }
  127. .page-footer {
  128. // position: fixed;
  129. // bottom: 0;
  130. // z-index: 9;
  131. display: flex;
  132. align-items: center;
  133. justify-content: space-around;
  134. width: 100%;
  135. height: calc(100rpx+ constant(safe-area-inset-bottom)); ///兼容 IOS<11.2/
  136. height: calc(100rpx + env(safe-area-inset-bottom)); ///兼容 IOS>11.2/
  137. box-sizing: border-box;
  138. border-top: solid 1rpx #F3F3F3;
  139. background-color: #fff;
  140. // box-shadow: 0px 0px 17rpx 1rpx rgba(206, 206, 206, 0.32);
  141. padding-bottom: constant(safe-area-inset-bottom); ///兼容 IOS<11.2/
  142. padding-bottom: env(safe-area-inset-bottom); ///兼容 IOS>11.2/
  143. .foot-item {
  144. display: flex;
  145. width: max-content;
  146. align-items: center;
  147. justify-content: center;
  148. flex-direction: column;
  149. position: relative;
  150. padding: 0 20rpx;
  151. margin-top: 18rpx;
  152. &.active {
  153. color: $bg-color-primary
  154. }
  155. }
  156. .foot-item image {
  157. height: 50rpx;
  158. width: 50rpx;
  159. text-align: center;
  160. margin: 0 auto;
  161. }
  162. .foot-item .txt {
  163. font-size: 27rpx;
  164. margin-top: 8rpx;
  165. }
  166. }
  167. </style>