diff --git a/src/components/calendar/body/index.tsx b/src/components/calendar/body/index.tsx index 3ec1d2879..11fd0ae0e 100644 --- a/src/components/calendar/body/index.tsx +++ b/src/components/calendar/body/index.tsx @@ -53,6 +53,7 @@ export default class AtCalendarBody extends Taro.Component< super(...arguments) const { validDates, + priceDates, marks, format, minDate, @@ -64,6 +65,7 @@ export default class AtCalendarBody extends Taro.Component< this.generateFunc = generateCalendarGroup({ validDates, + priceDates, format, minDate, maxDate, @@ -110,13 +112,14 @@ export default class AtCalendarBody extends Taro.Component< arr[preListIndex] = preList arr[nextListIndex] = nextList arr[this.currentSwiperIndex] = nowList - + return arr } componentWillReceiveProps (nextProps: Props) { const { validDates, + priceDates, marks, format, minDate, @@ -128,6 +131,7 @@ export default class AtCalendarBody extends Taro.Component< this.generateFunc = generateCalendarGroup({ validDates, + priceDates, format, minDate, maxDate, @@ -258,7 +262,7 @@ export default class AtCalendarBody extends Taro.Component< render () { const { isSwiper } = this.props const { isAnimate, offsetSize, listGroup } = this.state - + if (!isSwiper) { return ( + priceDates: Array + marks: Array isSwiper: boolean diff --git a/src/components/calendar/common/plugins.ts b/src/components/calendar/common/plugins.ts index ee044d8df..c9337df02 100644 --- a/src/components/calendar/common/plugins.ts +++ b/src/components/calendar/common/plugins.ts @@ -124,4 +124,22 @@ export function handleValid ( return item } -export default [handleActive, handleMarks, handleDisabled, handleValid] +export function handlePrice ( + args: PluginArg, + item: Calendar.Item +): Calendar.Item { + const { options } = args + const { value } = item + const { priceDates } = options + if (!_isEmpty(priceDates)) { + for (let [, date] of priceDates.entries()){ + let result = dayjs(date.value).startOf('day').isSame(value); + if(result){ + item.price = date.price; + } + } + } + return item +} + +export default [handleActive, handleMarks, handleDisabled, handleValid, handlePrice] diff --git a/src/components/calendar/index.tsx b/src/components/calendar/index.tsx index 4c66ecae9..4d3bbe673 100644 --- a/src/components/calendar/index.tsx +++ b/src/components/calendar/index.tsx @@ -18,6 +18,7 @@ import { DefaultProps, Props, State, PropsWithDefaults } from './interface' const defaultProps: DefaultProps = { validDates: [], + priceDates: [], marks: [], isSwiper: true, hideArrow: false, @@ -239,7 +240,7 @@ export default class AtCalendar extends Taro.Component> { }) if (_isFunction(this.props.onDayClick)) { - this.props.onDayClick({ value: item.value }) + this.props.onDayClick(item) } } @@ -271,6 +272,7 @@ export default class AtCalendar extends Taro.Component> { const { generateDate, selectedDate } = this.state const { validDates, + priceDates, marks, format, minDate, @@ -296,6 +298,7 @@ export default class AtCalendar extends Taro.Component> { onSelectDate={this.handleSelectDate} /> void - onDayClick?: (item: { value: string }) => void + onDayClick?: (item: Calendar.Item ) => void onDayLongClick?: (item: { value: string }) => void @@ -53,6 +53,8 @@ export interface DefaultProps { validDates: Array + priceDates: Array + marks: Array currentDate: Calendar.DateArg | Calendar.SelectedDate diff --git a/src/components/calendar/types.d.ts b/src/components/calendar/types.d.ts index b999ef6cb..a3f3aa87e 100644 --- a/src/components/calendar/types.d.ts +++ b/src/components/calendar/types.d.ts @@ -18,6 +18,11 @@ declare namespace Calendar { value: DateArg } + export interface PriceDate { + value: DateArg, + price: number + } + export interface Item { value: string @@ -29,6 +34,8 @@ declare namespace Calendar { marks: Array + price?: number + isActive?: boolean isToday?: boolean @@ -49,6 +56,8 @@ declare namespace Calendar { export interface GroupOptions { validDates: Array + priceDates: Array + marks: Array format: string diff --git a/src/components/calendar/ui/date-list/index.tsx b/src/components/calendar/ui/date-list/index.tsx index d58dd0d9d..770f1721c 100644 --- a/src/components/calendar/ui/date-list/index.tsx +++ b/src/components/calendar/ui/date-list/index.tsx @@ -54,10 +54,10 @@ export default class AtCalendarList extends Taro.Component { `flex__item--${MAP[item.type]}`, { 'flex__item--today': item.isToday, - 'flex__item--active': item.isActive, - 'flex__item--selected': item.isSelected, - 'flex__item--selected-head': item.isSelectedHead, - 'flex__item--selected-tail': item.isSelectedTail, + 'flex__item--active': item.isActive && !item.isDisabled, + 'flex__item--selected': item.isSelected && !item.isDisabled, + 'flex__item--selected-head': item.isSelectedHead && !item.isDisabled, + 'flex__item--selected-tail': item.isSelectedTail && !item.isDisabled, 'flex__item--blur': item.isDisabled || item.type === constant.TYPE_PRE_MONTH || @@ -67,6 +67,12 @@ export default class AtCalendarList extends Taro.Component { > {item.text} + { + item.price && + + ￥{item.price} + + } {item.marks && item.marks.length > 0 ? ( diff --git a/src/pages/advanced/calendar/index.tsx b/src/pages/advanced/calendar/index.tsx index 71e5f0d29..26ea5034f 100644 --- a/src/pages/advanced/calendar/index.tsx +++ b/src/pages/advanced/calendar/index.tsx @@ -10,6 +10,10 @@ import './index.scss' import DocsHeader from '../../components/doc-header' import AtCalendar from '../../../components/calendar/index' +import _cloneDeep from 'lodash/cloneDeep' +import _replace from 'lodash/replace' +import dayjs from 'dayjs' + export default class Index extends Component { config: Config = { navigationBarTitleText: 'Taro日历组件展示' @@ -32,7 +36,19 @@ export default class Index extends Component { value: '2019/04/17' }, { - value: '2019/04/21' + value: '2019/06/04' + }, + { + value: '2019/06/05' + }, + { + value: '2019/06/06' + }, + { + value: '2019/06/08' + }, + { + value: '2019/06/09' }, { value: '2019/05/04' @@ -40,6 +56,49 @@ export default class Index extends Component { { value: '2019/05/28' } + ], + tempValidDates: [], + priceDates: [ + { + value: '2019/04/17', + price: 10 + }, + { + value: '2019/05/17', + price: 114 + }, + { + value: '2019/06/17', + price: 225 + }, + { + value: '2019/06/01', + price: 229 + }, + { + value: '2019/06/04', + price: 1122 + }, + { + value: '2019/06/05', + price: 1210 + }, + { + value: '2019/06/06', + price: 11198 + }, + { + value: '2019/06/08', + price: 780 + }, + { + value: '2019/06/09', + price: 880 + }, + { + value: '2019/06/21', + price: 487 + }, ] } @@ -62,7 +121,7 @@ export default class Index extends Component { @bind handleDayClick (...arg) { - console.log('handleDayClick', arg) + console.log('handleDayClick', arg); } @bind @@ -72,6 +131,48 @@ export default class Index extends Component { @bind handleDateChange (arg) { + let { value } = arg; + let _filterValidDates = (startTime: string,flag: boolean)=>{ + let result:any = []; + var i = 1; + while(1){ + var date = dayjs(startTime); + let nextDay = flag ? date.add(i,'day') : date.subtract(i,'day'); + let dateStr = nextDay.format('YYYY/MM/DD'); + let notExist = false; + for(let item of this.state.validDates){ + let itemStr = dayjs(item.value).format('YYYY/MM/DD') + if(itemStr === dateStr){ + notExist = true; + result.push({ + value: item.value + }) + i++; + break; + } + } + if(!notExist){ + break; + } + } + return result + } + let _filterDates = (startTime: string) => { + return [{value: _replace(startTime,/\-/g, '/')}, ..._filterValidDates(startTime,true), ..._filterValidDates(startTime,false) ]; + } + if(value.end){ + this.setState({validDates: this.state.tempValidDates}) + }else{ + let startTime = value.start; + if(startTime){ + let result = _filterDates(startTime); + let copyDates = _cloneDeep(this.state.validDates); + this.setState({ + tempValidDates: copyDates, + validDates: result + }) + } + } console.log('handleDateChange', arg) } @@ -81,7 +182,7 @@ export default class Index extends Component { } render () { - const { now, minDate, maxDate, mark, multiCurentDate, validDates } = this.state + const { now, minDate, maxDate, mark, multiCurentDate, validDates, priceDates } = this.state return ( @@ -199,6 +300,14 @@ export default class Index extends Component { + + + 有效时间组+多选+自定义cell文本 + + + + + ) diff --git a/src/style/components/calendar.scss b/src/style/components/calendar.scss index 4637656d0..4ea37ed63 100644 --- a/src/style/components/calendar.scss +++ b/src/style/components/calendar.scss @@ -46,10 +46,22 @@ height: $at-calendar-day-size; margin-left: auto; margin-right: auto; + flex-direction: column; border-radius: 50%; .container-text { + @include display-flex; @include flex; + @include align-items(center); + + line-height: 1; + } + + .container-text-extra { + @include flex; + + font-size: 16px; + line-height: 1; } } @@ -64,7 +76,7 @@ .mark { width: $at-calendar-mark-size; height: $at-calendar-mark-size; - margin-right: 4px; + margin-right: 8px; display: inline-block; background-color: $at-calendar-main-color; border-radius: 50%; diff --git a/src/style/variables/default.scss b/src/style/variables/default.scss index 091bbe8bc..2208ffdbd 100644 --- a/src/style/variables/default.scss +++ b/src/style/variables/default.scss @@ -207,7 +207,7 @@ $at-fab-box-shadow-active: 0 10px 44px 8px rgba(0, 0, 0, 0.12) !default; /* Calendar */ -$at-calendar-day-size: 72px !default; +$at-calendar-day-size: 88px !default; $at-calendar-mark-size: 8px !default; $at-calendar-header-color: #B8BFC6 !default; $at-calendar-main-color: $color-brand !default;