date-selector.wpy 3.5 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160
  1. <style lang="less">
  2. .day-selecotr {
  3. text-align: center;
  4. margin-top: 32rpx;
  5. width: 100%;
  6. box-sizing: border-box;
  7. overflow-x: hidden;
  8. white-space: nowrap;
  9. }
  10. .day-selecotr .day-selecotr-item {
  11. width: 96rpx;
  12. margin-right: 4rpx;
  13. text-align: center;
  14. padding-top: 20rpx;
  15. padding-bottom: 16rpx;
  16. display: inline-block;
  17. &.cross-month {
  18. .weekday {
  19. color: #140050;
  20. font-weight: 600;
  21. }
  22. }
  23. }
  24. .day-selecotr .day-selecotr-item.selected {
  25. background: rgba(61, 203, 204, 0.3);
  26. border-radius: 30rpx;
  27. color: #140050;
  28. font-weight: 600px;
  29. .weekday {
  30. color: #140050;
  31. font-weight: 600;
  32. }
  33. .date {
  34. font-weight: 500;
  35. color: #140050;
  36. }
  37. }
  38. .day-selecotr .day-selecotr-item .weekday {
  39. font-size: 10px;
  40. line-height: 14px;
  41. color: #9fb7cd;
  42. margin-bottom: 2rpx;
  43. }
  44. .day-selecotr .day-selecotr-item .date {
  45. color: #4d5262;
  46. font-family: Montserrat;
  47. font-size: 22px;
  48. line-height: 27px;
  49. }
  50. </style>
  51. <template>
  52. <scroll-view scroll-x="true" class="day-selecotr">
  53. <div
  54. class="{{'day-selecotr-item ' + (selectDaySelectorsIndex==index?'selected': '') + (item.selectorIscrossMonth? ' cross-month': '')}}"
  55. v-for="(item, index) in daySelectors"
  56. :key="index"
  57. v-on:click.stop="selectDaySelectors(index)"
  58. data-index="{{index}}"
  59. >
  60. <div class="weekday">{{item.weekday}}</div>
  61. <div class="date">{{item.date}}</div>
  62. </div>
  63. </scroll-view>
  64. </template>
  65. <script>
  66. import wepy from '@wepy/core'
  67. import {
  68. getNowDate,
  69. getDate,
  70. getWeekDay,
  71. getMonthText
  72. } from '@/service/meetingTimes'
  73. // import {
  74. // getNowDate,
  75. // getDate
  76. // } from '@/packagesEnv/pages/common.js'
  77. const selectorsNumber = 7 // 总共展示多个选择项;
  78. wepy.component({
  79. data: {
  80. daySelectors: [],
  81. selectDaySelectorsIndex: 0
  82. },
  83. props: {
  84. selectValue: {
  85. type: String,
  86. default: getNowDate()
  87. }
  88. },
  89. created() {
  90. this.daySelectors = getDaysSelctors()
  91. },
  92. ready() {
  93. let { selectValue } = this
  94. if (selectValue) {
  95. let selectDaySelectorsIndex = this.daySelectors.findIndex(
  96. selecotr => selecotr.value == selectValue
  97. )
  98. this.selectDaySelectorsIndex = selectDaySelectorsIndex
  99. }
  100. },
  101. watch: {
  102. selectValue: function(newSelectValue, oldSelectValue) {
  103. if (newSelectValue !== oldSelectValue) {
  104. let selectDaySelectorsIndex = this.daySelectors.findIndex(
  105. selecotr => selecotr.value == newSelectValue
  106. )
  107. this.selectDaySelectorsIndex = selectDaySelectorsIndex
  108. }
  109. }
  110. },
  111. methods: {
  112. selectDaySelectors(index) {
  113. this.selectDaySelectorsIndex = index
  114. this.emmitSelect(index)
  115. },
  116. emmitSelect(index) {
  117. let selector = this.daySelectors[index]
  118. this.$emit('component-date-selector-select', selector.value)
  119. }
  120. }
  121. })
  122. function getDaysSelctors() {
  123. let now = new Date()
  124. let nowDate = now.getDate()
  125. let selectors = [
  126. {
  127. weekday: '今天',
  128. date: nowDate,
  129. value: getNowDate()
  130. }
  131. ]
  132. let newTime = now.getTime()
  133. for (let i = 0; i < selectorsNumber - 1; i++) {
  134. newTime = newTime + 24 * 60 * 60 * 1000
  135. let date = new Date(newTime)
  136. let weekday = getWeekDay(date)
  137. let selectorIscrossMonth = false
  138. if (now.getMonth() !== date.getMonth() && date.getDate() == '1') {
  139. weekday = getMonthText(date)
  140. selectorIscrossMonth = true
  141. }
  142. selectors.push({
  143. weekday,
  144. date: date.getDate(),
  145. value: getDate(date),
  146. selectorIscrossMonth
  147. })
  148. }
  149. return selectors
  150. }
  151. </script>