tab-bar.vue 3.3 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149
  1. <template>
  2. <view class="footer">
  3. <view class="index" @click="swithTab(1)">
  4. <view><image src="../../static/tabbar/menu-1.png"></image></view>
  5. <view :class="[currentPage === 1?'current':'']">首页</view>
  6. </view>
  7. <view class="scan" @click="swithTab(2)">
  8. <view><image src="../../static/tabbar/menu-2.png"></image></view>
  9. <view class="hover">扫码换电</view>
  10. </view>
  11. <view class="index" @click="swithTab(3)">
  12. <view><image src="../../static/tabbar/menu-3.png"></image></view>
  13. <view :class="[currentPage === 3?'current':'']">我的</view>
  14. </view>
  15. </view>
  16. </template>
  17. <script>
  18. export default {
  19. name:"tab-bar",
  20. data() {
  21. return {
  22. currentPage:0,
  23. };
  24. },
  25. mounted() {
  26. this.getRoute()
  27. },
  28. onLoad() {
  29. },
  30. methods:{
  31. swithTab(num){
  32. if(num === 1){
  33. uni.switchTab({
  34. url: '/pages/index/index',
  35. });
  36. }else if(num === 2){
  37. if(this.$store.state.token){
  38. let stationCode='st001'
  39. let that=this
  40. // uni.scanCode({
  41. // success: function (res) {
  42. // let stationCode=res.result.split("=")[1]
  43. // that.$storage.set("stationCode",stationCode)
  44. // that.$http.getStationExchange({stationCode:stationCode}).then(res=>{
  45. // if(res.code === 0 && res.data){
  46. // that.$storage.set("exchangeNo",res.data)
  47. // uni.navigateTo({
  48. // url:'/pages/scan/index'
  49. // })
  50. // }else{
  51. // that.$utils.msg(res.msg)
  52. // }
  53. // })
  54. // }
  55. // });
  56. // this.$storage.set("stationCode",stationCode)
  57. this.$http.getStationExchange({stationCode:stationCode}).then(res=>{
  58. if(res.code === 0 && res.data){
  59. uni.navigateTo({
  60. url:'/pages/powerchange/index?stationCode='+stationCode+'&exchangeNo='+res.data
  61. })
  62. }else{
  63. this.$utils.msg(res.msg)
  64. }
  65. })
  66. }else{
  67. uni.navigateTo({
  68. url: '/pages/public/login',
  69. });
  70. }
  71. }else{
  72. if(this.$store.state.token){
  73. uni.switchTab({
  74. url: '/pages/ucenter/index',
  75. });
  76. }else{
  77. uni.navigateTo({
  78. url: '/pages/public/login',
  79. });
  80. }
  81. }
  82. },
  83. getRoute(){
  84. let curPage = getCurrentPages();
  85. let route = curPage[curPage.length - 1].route
  86. if(route === 'pages/index/index'){
  87. this.currentPage=1
  88. }else if(route === 'pages/ucenter/index'){
  89. this.currentPage=3
  90. }
  91. }
  92. }
  93. }
  94. </script>
  95. <style lang="scss" scoped>
  96. .footer{
  97. width: 100%;
  98. height: 106rpx;
  99. background-image: url(~@/static/bbg.png);
  100. background-size: 100% 100%;
  101. position: fixed;
  102. left: 0;
  103. right: 0;
  104. bottom: 0;
  105. display: flex;
  106. justify-content: space-around;
  107. padding-top: 15rpx;
  108. box-sizing: border-box;
  109. font-size: 26rpx;
  110. image{
  111. width: 39rpx;
  112. height: 39rpx;
  113. }
  114. .index{
  115. width: 300rpx;
  116. text-align: center;
  117. }
  118. .scan{
  119. position: relative;
  120. display: flex;
  121. flex: 1;
  122. text-align: center;
  123. view:first-child{
  124. position: absolute;
  125. bottom: 30rpx;
  126. width: 100%;
  127. }
  128. view:last-child{
  129. position: absolute;
  130. bottom: 6rpx;
  131. width: 100%;
  132. }
  133. image{
  134. width: 106rpx;
  135. height: 106rpx;
  136. }
  137. }
  138. .hover{
  139. color: #58be6b;
  140. }
  141. .current{
  142. color: #959ea8;
  143. }
  144. }
  145. </style>