江西小程序管理端
You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.

76 lines
1.7 KiB

1 year ago
  1. <template>
  2. <view class="tabBox">
  3. <view class="tabs">
  4. <view class="tab" @click="tabClick(1)" :class="{active: currentTab==1}">按日</view>
  5. <view class="tab" @click="tabClick(2)" :class="{active: currentTab==2}">按月</view>
  6. <view class="tab" @click="tabClick(3)" :class="{active: currentTab==3}">按年</view>
  7. <view class="tab long" @click="tabClick(4)" :class="{active: currentTab==4}">{{ customDate }}</view>
  8. </view>
  9. <u-popup :show="showDatePicker" mode="bottom" :round="20" :closeable="true" :closeOnClickOverlay="true" @close="showDatePicker=false">
  10. <timeScreen @selectDateClick="selectDateClick" />
  11. </u-popup>
  12. </view>
  13. </template>
  14. <script>
  15. export default {
  16. data() {
  17. return {
  18. currentTab: 1,
  19. showDatePicker: false,
  20. customDate: '自定义日期'
  21. }
  22. },
  23. mounted() {
  24. let numDate = this.$u.utils.getCustomDay(-7)
  25. console.log(numDate)
  26. },
  27. methods: {
  28. tabClick(num) {
  29. this.currentTab = num
  30. if(num==4) {
  31. this.showDatePicker = true
  32. }
  33. },
  34. // 2选择时间选择器里的时间
  35. selectDateClick(val) {
  36. if(val.date1) {
  37. this.customDate = val.date1
  38. }else {
  39. this.customDate = val.date2+ '至' + val.date3
  40. }
  41. this.showDatePicker = false
  42. }
  43. }
  44. }
  45. </script>
  46. <style lang="scss" scoped>
  47. .tabs {
  48. display: flex;
  49. justify-content: space-between;
  50. padding-bottom: 24rpx;
  51. .tab {
  52. width: 96rpx;
  53. height: 60rpx;
  54. background: rgba(25, 137, 250, 0.1);
  55. border-radius: 8rpx;
  56. border: 2rpx solid #1989FA;
  57. font-size: 28rpx;
  58. text-align: center;
  59. line-height: 60rpx;
  60. color: $themC;
  61. &.active {
  62. color: #fff;
  63. background-color: $themC;
  64. }
  65. &.long {
  66. min-width: 336rpx;
  67. width: fit-content !important;
  68. }
  69. }
  70. }
  71. </style>