wallet-nav.vue 2.1 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102
  1. <template>
  2. <view class="nav-box box-sizing-border" :style="[{ 'margin-top': statusBarH + 'px'}]">
  3. <uni-icons type="back" size="24" color="#333" @click="to(1)"></uni-icons>
  4. <view class="nav-view-box sys-radius-200">
  5. <view class="nav-view box-sizing-border">
  6. <view class="sys-size-32 view-box"
  7. v-for="(item,i) in list" :key="i"
  8. @click="to(2,item)"
  9. :class="navType === item.id?'sys-color-black-3':'sys-color-white'">
  10. {{item.name}}
  11. </view>
  12. <view class="view-box-po sys-background-gray-f sys-radius-200 sys-color-black-3"
  13. :class="navType===1?'v-1':'v-2'">{{name}}</view>
  14. </view>
  15. </view>
  16. <view class="sys-color-black sys-size-28 sys-weight-600" @click="to(3)">账单</view>
  17. </view>
  18. </template>
  19. <script>
  20. export default {
  21. data(){
  22. return{
  23. statusBarH:0,
  24. navType:1,
  25. name:'充值',
  26. list:[{name:'充值',id:1},{name:'收益',id:2}],
  27. }
  28. },
  29. created() {
  30. uni.getSystemInfo({
  31. success: (e) =>{
  32. this.statusBarH = e.statusBarHeight;
  33. }
  34. })
  35. },
  36. methods:{
  37. to(type,item){
  38. if(type === 1){
  39. uni.navigateBack({
  40. delta:1
  41. })
  42. }else if(type === 2){
  43. this.navType = item.id;
  44. this.name = item.name;
  45. this.$emit('setNavType',this.navType);
  46. }else{
  47. uni.navigateTo({
  48. url:'/pages/wallet/bill'
  49. })
  50. }
  51. },
  52. },
  53. }
  54. </script>
  55. <style scoped lang="scss">
  56. .nav-box{
  57. width: 100%;
  58. position: absolute;
  59. top: 0;
  60. left: 0;
  61. background: transparent;
  62. display: flex;
  63. justify-content: space-between;
  64. align-items: center;
  65. padding: 0 24rpx;
  66. height: 94rpx;
  67. z-index: 100;
  68. .nav-view-box{
  69. background: rgba(0,0,0,0.5);
  70. }
  71. .nav-view{
  72. width: 248rpx;
  73. height: 64rpx;
  74. padding: 4rpx;
  75. display: flex;
  76. position: relative;
  77. .view-box{
  78. flex: 1;
  79. text-align: center;
  80. line-height: 50rpx;
  81. }
  82. .view-box-po{
  83. position: absolute;
  84. width: 120rpx;
  85. height: 56rpx;
  86. line-height: 50rpx;
  87. text-align: center;
  88. top: 4rpx;
  89. }
  90. .v-1{
  91. left: 4rpx;
  92. transition: all 0.5s;
  93. }
  94. .v-2{
  95. left: 124rpx;
  96. transition: all 0.5s;
  97. }
  98. }
  99. }
  100. </style>