123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160 |
- <style lang="less">
- .day-selecotr {
- text-align: center;
- margin-top: 32rpx;
- width: 100%;
- box-sizing: border-box;
- overflow-x: hidden;
- white-space: nowrap;
- }
- .day-selecotr .day-selecotr-item {
- width: 96rpx;
- margin-right: 4rpx;
- text-align: center;
- padding-top: 20rpx;
- padding-bottom: 16rpx;
- display: inline-block;
- &.cross-month {
- .weekday {
- color: #140050;
- font-weight: 600;
- }
- }
- }
- .day-selecotr .day-selecotr-item.selected {
- background: rgba(61, 203, 204, 0.3);
- border-radius: 30rpx;
- color: #140050;
- font-weight: 600px;
- .weekday {
- color: #140050;
- font-weight: 600;
- }
- .date {
- font-weight: 500;
- color: #140050;
- }
- }
- .day-selecotr .day-selecotr-item .weekday {
- font-size: 10px;
- line-height: 14px;
- color: #9fb7cd;
- margin-bottom: 2rpx;
- }
- .day-selecotr .day-selecotr-item .date {
- color: #4d5262;
- font-family: Montserrat;
- font-size: 22px;
- line-height: 27px;
- }
- </style>
- <template>
- <scroll-view scroll-x="true" class="day-selecotr">
- <div
- class="{{'day-selecotr-item ' + (selectDaySelectorsIndex==index?'selected': '') + (item.selectorIscrossMonth? ' cross-month': '')}}"
- v-for="(item, index) in daySelectors"
- :key="index"
- v-on:click.stop="selectDaySelectors(index)"
- data-index="{{index}}"
- >
- <div class="weekday">{{item.weekday}}</div>
- <div class="date">{{item.date}}</div>
- </div>
- </scroll-view>
- </template>
- <script>
- import wepy from '@wepy/core'
- import {
- getNowDate,
- getDate,
- getWeekDay,
- getMonthText
- } from '@/service/meetingTimes'
- // import {
- // getNowDate,
- // getDate
- // } from '@/packagesEnv/pages/common.js'
- const selectorsNumber = 7 // 总共展示多个选择项;
- wepy.component({
- data: {
- daySelectors: [],
- selectDaySelectorsIndex: 0
- },
- props: {
- selectValue: {
- type: String,
- default: getNowDate()
- }
- },
- created() {
- this.daySelectors = getDaysSelctors()
- },
- ready() {
- let { selectValue } = this
- if (selectValue) {
- let selectDaySelectorsIndex = this.daySelectors.findIndex(
- selecotr => selecotr.value == selectValue
- )
- this.selectDaySelectorsIndex = selectDaySelectorsIndex
- }
- },
- watch: {
- selectValue: function(newSelectValue, oldSelectValue) {
- if (newSelectValue !== oldSelectValue) {
- let selectDaySelectorsIndex = this.daySelectors.findIndex(
- selecotr => selecotr.value == newSelectValue
- )
- this.selectDaySelectorsIndex = selectDaySelectorsIndex
- }
- }
- },
- methods: {
- selectDaySelectors(index) {
- this.selectDaySelectorsIndex = index
- this.emmitSelect(index)
- },
- emmitSelect(index) {
- let selector = this.daySelectors[index]
- this.$emit('component-date-selector-select', selector.value)
- }
- }
- })
- function getDaysSelctors() {
- let now = new Date()
- let nowDate = now.getDate()
- let selectors = [
- {
- weekday: '今天',
- date: nowDate,
- value: getNowDate()
- }
- ]
- let newTime = now.getTime()
- for (let i = 0; i < selectorsNumber - 1; i++) {
- newTime = newTime + 24 * 60 * 60 * 1000
- let date = new Date(newTime)
- let weekday = getWeekDay(date)
- let selectorIscrossMonth = false
- if (now.getMonth() !== date.getMonth() && date.getDate() == '1') {
- weekday = getMonthText(date)
- selectorIscrossMonth = true
- }
- selectors.push({
- weekday,
- date: date.getDate(),
- value: getDate(date),
- selectorIscrossMonth
- })
- }
- return selectors
- }
- </script>
|