From 6d55c01b6bfde8348780752739c5582df769e52f Mon Sep 17 00:00:00 2001 From: hnliyuan Date: Tue, 11 Jun 2019 18:06:35 +0800 Subject: [PATCH 1/6] =?UTF-8?q?feat(Calendar):=E6=97=A5=E6=9C=9F=E5=8D=95?= =?UTF-8?q?=E5=85=83=E6=A0=BC=E5=A2=9E=E5=8A=A0=E6=89=A9=E5=B1=95=E6=96=87?= =?UTF-8?q?=E6=9C=AC=E5=86=85=E5=AE=B9?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/components/calendar/body/index.tsx | 8 ++- src/components/calendar/body/interface.ts | 2 + src/components/calendar/common/plugins.ts | 20 +++++- src/components/calendar/index.tsx | 5 +- src/components/calendar/interface.ts | 4 +- src/components/calendar/types.d.ts | 9 +++ .../calendar/ui/date-list/index.tsx | 6 ++ src/pages/advanced/calendar/index.tsx | 63 ++++++++++++++++++- src/style/components/calendar.scss | 11 +++- 9 files changed, 118 insertions(+), 10 deletions(-) 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..44963a95e 100644 --- a/src/components/calendar/ui/date-list/index.tsx +++ b/src/components/calendar/ui/date-list/index.tsx @@ -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..2232b2ec9 100644 --- a/src/pages/advanced/calendar/index.tsx +++ b/src/pages/advanced/calendar/index.tsx @@ -9,6 +9,9 @@ import './index.scss' import DocsHeader from '../../components/doc-header' import AtCalendar from '../../../components/calendar/index' +import Calendar from 'src/components/calendar/types'; + +import _cloneDeep from 'lodash/cloneDeep' export default class Index extends Component { config: Config = { @@ -32,7 +35,13 @@ export default class Index extends Component { value: '2019/04/17' }, { - value: '2019/04/21' + value: '2019/06/4' + }, + { + value: '2019/06/5' + }, + { + value: '2019/06/6' }, { value: '2019/05/04' @@ -40,6 +49,37 @@ 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/1', + price: 229 + }, + { + value: '2019/06/5', + price: 1210 + }, + { + value: '2019/06/6', + price: 11198 + }, + { + value: '2019/06/21', + price: 487 + }, ] } @@ -62,7 +102,16 @@ export default class Index extends Component { @bind handleDayClick (...arg) { - console.log('handleDayClick', arg) + // var item: Calendar.Item = arg[0]; + // if(item && item.isSelectedTail){ + // var tempValidDates = _cloneDeep(this.state.validDates); + // this.setState({tempValidDates:tempValidDates, validDates: [{value: '2019/06/6'}]}) + // } + // else if(item && !item.isSelectedTail){ + // this.setState({validDates:this.state.tempValidDates}) + // } + // console.log(this.state.validDates); + console.log('handleDayClick', arg); } @bind @@ -81,7 +130,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 +248,14 @@ export default class Index extends Component { + + + 有效时间组+多选 + + + + + ) diff --git a/src/style/components/calendar.scss b/src/style/components/calendar.scss index 4637656d0..05bfb52d3 100644 --- a/src/style/components/calendar.scss +++ b/src/style/components/calendar.scss @@ -46,11 +46,18 @@ height: $at-calendar-day-size; margin-left: auto; margin-right: auto; - border-radius: 50%; + flex-direction: column; .container-text { @include flex; } + + .container-text-extra { + @include flex; + + font-size: 16px; + line-height: 1; + } } &-extra { @@ -64,7 +71,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%; From f574f43a62ad8db30636fb89a8f297e5e89111c5 Mon Sep 17 00:00:00 2001 From: hnliyuan Date: Wed, 12 Jun 2019 11:31:08 +0800 Subject: [PATCH 2/6] =?UTF-8?q?feat(Calendar):=20=E6=9C=89=E6=95=88?= =?UTF-8?q?=E6=97=B6=E9=97=B4=E7=BB=84+=E5=A4=9A=E9=80=89+=E8=87=AA?= =?UTF-8?q?=E5=AE=9A=E4=B9=89cell?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/pages/advanced/calendar/index.tsx | 85 +++++++++++++++++++++------ 1 file changed, 68 insertions(+), 17 deletions(-) diff --git a/src/pages/advanced/calendar/index.tsx b/src/pages/advanced/calendar/index.tsx index 2232b2ec9..36935c476 100644 --- a/src/pages/advanced/calendar/index.tsx +++ b/src/pages/advanced/calendar/index.tsx @@ -9,9 +9,9 @@ import './index.scss' import DocsHeader from '../../components/doc-header' import AtCalendar from '../../../components/calendar/index' -import Calendar from 'src/components/calendar/types'; import _cloneDeep from 'lodash/cloneDeep' +import dayjs from 'dayjs' export default class Index extends Component { config: Config = { @@ -35,13 +35,19 @@ export default class Index extends Component { value: '2019/04/17' }, { - value: '2019/06/4' + value: '2019/06/04' }, { - value: '2019/06/5' + value: '2019/06/05' }, { - value: '2019/06/6' + value: '2019/06/06' + }, + { + value: '2019/06/08' + }, + { + value: '2019/06/09' }, { value: '2019/05/04' @@ -65,17 +71,29 @@ export default class Index extends Component { price: 225 }, { - value: '2019/06/1', + value: '2019/06/01', price: 229 }, { - value: '2019/06/5', + value: '2019/06/04', + price: 1122 + }, + { + value: '2019/06/05', price: 1210 }, { - value: '2019/06/6', + value: '2019/06/06', price: 11198 }, + { + value: '2019/06/08', + price: 780 + }, + { + value: '2019/06/09', + price: 880 + }, { value: '2019/06/21', price: 487 @@ -102,15 +120,6 @@ export default class Index extends Component { @bind handleDayClick (...arg) { - // var item: Calendar.Item = arg[0]; - // if(item && item.isSelectedTail){ - // var tempValidDates = _cloneDeep(this.state.validDates); - // this.setState({tempValidDates:tempValidDates, validDates: [{value: '2019/06/6'}]}) - // } - // else if(item && !item.isSelectedTail){ - // this.setState({validDates:this.state.tempValidDates}) - // } - // console.log(this.state.validDates); console.log('handleDayClick', arg); } @@ -121,6 +130,48 @@ export default class Index extends Component { @bind handleDateChange (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: startTime}, ..._filterValidDates(startTime,true), ..._filterValidDates(startTime,false) ]; + } + let { value } = arg; + 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) } @@ -250,7 +301,7 @@ export default class Index extends Component { - 有效时间组+多选 + 有效时间组+多选+自定义cell文本 From 12a7f80c96de28c283efb4080c3de3ba84cc3d03 Mon Sep 17 00:00:00 2001 From: hnliyuan Date: Wed, 12 Jun 2019 13:54:23 +0800 Subject: [PATCH 3/6] =?UTF-8?q?feat(Calendar):=20=E8=87=AA=E5=AE=9A?= =?UTF-8?q?=E4=B9=89Cell=E5=B8=83=E5=B1=80=E8=B0=83=E6=95=B4?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/style/components/calendar.scss | 3 +++ 1 file changed, 3 insertions(+) diff --git a/src/style/components/calendar.scss b/src/style/components/calendar.scss index 05bfb52d3..d009355e9 100644 --- a/src/style/components/calendar.scss +++ b/src/style/components/calendar.scss @@ -47,9 +47,12 @@ margin-left: auto; margin-right: auto; flex-direction: column; + border-radius: 50%; .container-text { + @include display-flex; @include flex; + @include align-items(center); } .container-text-extra { From d6b95e04624817673916b2897a5d7df61ebc6833 Mon Sep 17 00:00:00 2001 From: hnliyuan Date: Wed, 12 Jun 2019 14:29:07 +0800 Subject: [PATCH 4/6] =?UTF-8?q?feat(Calendar):=20h5=E5=AD=97=E4=BD=93?= =?UTF-8?q?=E5=A4=A7=E5=B0=8F=E8=B0=83=E6=88=90?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/style/components/calendar.scss | 2 ++ src/style/variables/default.scss | 2 +- 2 files changed, 3 insertions(+), 1 deletion(-) diff --git a/src/style/components/calendar.scss b/src/style/components/calendar.scss index d009355e9..4ea37ed63 100644 --- a/src/style/components/calendar.scss +++ b/src/style/components/calendar.scss @@ -53,6 +53,8 @@ @include display-flex; @include flex; @include align-items(center); + + line-height: 1; } .container-text-extra { 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; From d93afd24fa1d5a89b15b51e94b35131b9523f7d1 Mon Sep 17 00:00:00 2001 From: hnliyuan Date: Wed, 10 Jul 2019 16:08:05 +0800 Subject: [PATCH 5/6] =?UTF-8?q?feat(calendar):=E7=A6=81=E7=94=A8=E6=97=A5?= =?UTF-8?q?=E6=9C=9F=E4=B8=8D=E8=83=BD=E9=80=89=E4=B8=AD?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/components/calendar/ui/date-list/index.tsx | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/src/components/calendar/ui/date-list/index.tsx b/src/components/calendar/ui/date-list/index.tsx index 44963a95e..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 || From 26b2ced96a206f9c75f27855f0bf3b446954e404 Mon Sep 17 00:00:00 2001 From: hnliyuan Date: Wed, 10 Jul 2019 19:45:30 +0800 Subject: [PATCH 6/6] =?UTF-8?q?feat(Calendar):=E6=A0=B7=E5=BC=8F=E8=B0=83?= =?UTF-8?q?=E6=95=B4?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/pages/advanced/calendar/index.tsx | 5 +++-- 1 file changed, 3 insertions(+), 2 deletions(-) diff --git a/src/pages/advanced/calendar/index.tsx b/src/pages/advanced/calendar/index.tsx index 36935c476..26ea5034f 100644 --- a/src/pages/advanced/calendar/index.tsx +++ b/src/pages/advanced/calendar/index.tsx @@ -11,6 +11,7 @@ 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 { @@ -130,6 +131,7 @@ export default class Index extends Component { @bind handleDateChange (arg) { + let { value } = arg; let _filterValidDates = (startTime: string,flag: boolean)=>{ let result:any = []; var i = 1; @@ -156,9 +158,8 @@ export default class Index extends Component { return result } let _filterDates = (startTime: string) => { - return [{value: startTime}, ..._filterValidDates(startTime,true), ..._filterValidDates(startTime,false) ]; + return [{value: _replace(startTime,/\-/g, '/')}, ..._filterValidDates(startTime,true), ..._filterValidDates(startTime,false) ]; } - let { value } = arg; if(value.end){ this.setState({validDates: this.state.tempValidDates}) }else{