select-time.vue 3.8 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202
  1. <template>
  2. <uni-popup ref="popupRef" type="bottom">
  3. <view class="popup-box">
  4. <view class="popup-title">
  5. <text class="title-side"></text>
  6. <text class="title-name">时间筛选</text>
  7. <text class="title-side iconfont">&#xe621;</text>
  8. </view>
  9. <view class="time-content">
  10. <view class="time-vals">
  11. <view :class="['time-val' , editTimeIndex === 0 ? 'active-time-val' : '']" @click.stop="selectTime(0)">
  12. <text class="time-lable">开始</text>
  13. <text class="time-str">{{ timeVal[0] || '-' }}</text>
  14. </view>
  15. <text class="time-link">-</text>
  16. <view :class="['time-val' , editTimeIndex === 1 ? 'active-time-val' : '']" @click.stop="selectTime(1)">
  17. <text class="time-lable">结束</text>
  18. <text class="time-str">{{ timeVal[1] || '-' }}</text>
  19. </view>
  20. </view>
  21. <view class="times-content">
  22. <times :time.sync="editTime" />
  23. </view>
  24. <view class="time-btns">
  25. <view class="time-btn ">
  26. 取消
  27. </view>
  28. <view class="time-btn active-time-btn">
  29. 确定
  30. </view>
  31. </view>
  32. </view>
  33. </view>
  34. </uni-popup>
  35. </template>
  36. <script>
  37. import {
  38. getCurrentTime,
  39. beforeYear
  40. } from "@/utils/tool.js"
  41. export default {
  42. data() {
  43. return {
  44. activeCurrencyVal: undefined,
  45. timeVal: [],
  46. editTimeIndex:0 , // 1: 结束 ,0:开始
  47. editTime:''
  48. };
  49. },
  50. onLoad() {
  51. },
  52. watch:{
  53. editTime(newTime , oldTime){
  54. this.timeVal[this.editTimeIndex] = newTime
  55. }
  56. },
  57. created() {
  58. this.getTimes()
  59. },
  60. mounted() {
  61. // this.$refs.popupRef.open()
  62. },
  63. methods: {
  64. // 选择时间
  65. selectTime(index){
  66. this.editTimeIndex = index
  67. this.editTime = this.timeVal[index]
  68. },
  69. getTimes() {
  70. const current = getCurrentTime(); // 当前时间
  71. const beforeYear = getCurrentTime(1); // 一年前的今天
  72. this.timeVal = [beforeYear, current];
  73. this.selectTime(0);
  74. },
  75. open() {
  76. this.$nextTick(() => {
  77. this.$refs.popupRef.open();
  78. })
  79. },
  80. }
  81. }
  82. </script>
  83. <style lang="scss" scoped>
  84. .popup-box {
  85. width: 100%;
  86. background-color: #Fff;
  87. border-radius: 50rpx 50rpx 0px 0px;
  88. .popup-title {
  89. width: 100%;
  90. height: 106rpx;
  91. border-radius: 50rpx 50rpx 0px 0px;
  92. background-color: #F7F7F7 !important;
  93. display: flex;
  94. justify-content: space-between;
  95. align-items: center;
  96. padding: 0 40rpx;
  97. font-weight: 700;
  98. .title-side {
  99. flex-shrink: 0;
  100. font-size: 28rpx;
  101. width: 40rpx;
  102. height: 100%;
  103. line-height: 106rpx;
  104. color: #666;
  105. font-weight: 400;
  106. }
  107. }
  108. .time-content {
  109. width: 100%;
  110. padding: 20rpx 0;
  111. .time-vals {
  112. display: flex;
  113. justify-content: space-between;
  114. align-items: center;
  115. padding: 0 $pages-padding;
  116. .time-val {
  117. flex: 1;
  118. flex-shrink: 0;
  119. height: 70rpx;
  120. border: 1rpx solid $border-color;
  121. display: flex;
  122. align-items: center;
  123. border-radius: 8rpx;
  124. padding: 0 8rpx;
  125. .time-lable {
  126. font-size: 28rpx;
  127. flex-shrink: 0;
  128. color: #666;
  129. padding-right: 30rpx;
  130. }
  131. .time-str {
  132. flex: 1;
  133. font-size: 24rpx;
  134. color: #010101;
  135. font-weight: 600;
  136. }
  137. }
  138. .active-time-val {
  139. border-color: $Theme-Color;
  140. }
  141. .time-link {
  142. padding: 0 20rpx;
  143. text-align: center;
  144. }
  145. }
  146. .times-content {
  147. width: 100%;
  148. height: 380rpx;
  149. padding: 30rpx 0;
  150. }
  151. .time-btns {
  152. width: 100%;
  153. padding: 0 $pages-padding;
  154. display: flex;
  155. justify-content: space-between;
  156. .time-btn {
  157. width: 100%;
  158. width: 49%;
  159. height: 78rpx;
  160. border-radius: 8rpx;
  161. text-align: center;
  162. line-height: 78rpx;
  163. font-size: 30rpx;
  164. color: $Theme-Color;
  165. border: 1rpx solid $Theme-Color;
  166. }
  167. .active-time-btn {
  168. background-color: $Theme-Color;
  169. color: #fff;
  170. }
  171. }
  172. }
  173. }
  174. </style>