Skip to content

Commit 1e2fb3c

Browse files
author
[email protected]
committed
feat: CR优化
2 parents 0882956 + 7093c3e commit 1e2fb3c

File tree

17 files changed

+1107
-6
lines changed

17 files changed

+1107
-6
lines changed

‎docs/config/sidebar.js‎

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -68,6 +68,10 @@ module.exports = [
6868
{
6969
title: 'TabBar 选项卡',
7070
path: '/components/base/tab-bar'
71+
},
72+
{
73+
title: 'Calendar 日历',
74+
path: '/components/base/calendar'
7175
}
7276
// {
7377
// title: 'Style 内置样式'
@@ -158,6 +162,10 @@ module.exports = [
158162
{
159163
title: 'ActionSheet 操作列表',
160164
path: '/components/base/action-sheet'
165+
},
166+
{
167+
title: 'CalendarModal 日历弹框',
168+
path: '/components/base/calendar-modal'
161169
}
162170
]
163171
},

‎example/app.mpx‎

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -52,7 +52,9 @@
5252
"./pages/loading/index",
5353
"./pages/input/index",
5454
"./pages/action-sheet/index",
55-
"./pages/tab-bar/index"
55+
"./pages/tab-bar/index",
56+
"./pages/calendar-modal/index",
57+
"./pages/calendar/index"
5658
]
5759
if (__mpx_mode__ === 'ios' || __mpx_mode__ === 'android') {
5860
pages = [

‎example/common/config.ts‎

Lines changed: 6 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
export default {
2-
'entryMap': {
3-
'default': [
2+
entryMap: {
3+
default: [
44
'button',
55
'button-group',
66
'collapse',
@@ -46,7 +46,8 @@ export default {
4646
'float-ball',
4747
'loading',
4848
'collapse',
49-
'tab-bar'
49+
'tab-bar',
50+
'calendar'
5051
]
5152
},
5253
{
@@ -89,7 +90,8 @@ export default {
8990
'picker-popup',
9091
'cascade-picker-popup',
9192
'date-picker-popup',
92-
'time-picker-popup'
93+
'time-picker-popup',
94+
'calendar-modal',
9395
]
9496
}
9597
],

‎example/pages/calendar-modal/README.md‎

Lines changed: 66 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,66 @@
1+
## cube-calendar-modal
2+
3+
<card>
4+
5+
### 介绍
6+
7+
日历选择弹框
8+
9+
</card>
10+
11+
### 示例
12+
13+
<card>
14+
15+
### 用法
16+
17+
18+
<collapse-wrapper>
19+
20+
```vue
21+
<template>
22+
<view class="calendar-normal-page">
23+
<cube-button bindtap="showCalendarModal">常规日历组件</cube-button>
24+
<view class="calendar-normal-selected-date">起始时间：{{toastText[0]}}</view>
25+
<view class="calendar-normal-selected-date">结束时间：{{toastText[1]}}</view>
26+
<cube-calendar-modal
27+
wx:ref="calendarModal"
28+
min="{{min}}"
29+
max="{{max}}"
30+
maxRange="{{maxRange}}"
31+
scrollToEnd="{{scrollToEnd}}"
32+
defaultDate="{{defaultDate}}"
33+
maskClosable="{{maskClosable}}"
34+
bindconfirm="confirm"
35+
/>
36+
</view>
37+
</template>
38+
<script>
39+
import { createComponent } from '@mpxjs/core'
40+
41+
createComponent({
42+
data: {
43+
min: +new Date(2025, 1, 1),
44+
max: +new Date(2025, 7, 25),
45+
maxRange: 100,
46+
scrollToEnd: true,
47+
defaultDate: [+new Date(2025, 3, 1), +new Date(2025, 3, 2)],
48+
maskClosable: true,
49+
toastText: ['暂未选择时间', '暂未选择时间']
50+
},
51+
methods: {
52+
showCalendarModal() {
53+
this.$refs.calendarModal.show()
54+
},
55+
confirm(date) {
56+
const { year: startYear, month: startMonth, day: startDay } = date.detail.value[0]
57+
const { year: endYear, month: endMonth, day: endDay } = date.detail.value[1]
58+
this.toastText = [`${startYear}年${startMonth}月${startDay}日`,`${endYear}年${endMonth}月${endDay}日`]
59+
}
60+
}
61+
})
62+
</script>
63+
```
64+
</collapse-wrapper>
65+
66+
</card>

‎example/pages/calendar-modal/index.mpx‎

Lines changed: 25 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,25 @@
1+
<template>
2+
<view class="calendar-page">
3+
<base-container>
4+
<normal-calendar/>
5+
</base-container>
6+
</view>
7+
</template>
8+
9+
<script>
10+
import { createPage } from '@mpxjs/core'
11+
12+
createPage()
13+
</script>
14+
15+
<style lang="stylus">
16+
</style>
17+
18+
<script type="application/json">
19+
{
20+
"usingComponents": {
21+
"base-container": "../../components/base-container/index.mpx",
22+
"normal-calendar": "./normal-calendar.mpx"
23+
}
24+
}
25+
</script>

‎example/pages/calendar-modal/normal-calendar.mpx‎

Lines changed: 62 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,62 @@
1+
<template>
2+
<view class="calendar-page">
3+
<cube-button bindtap="showCalendarModal">常规日历组件</cube-button>
4+
<view class="calendar-selected-date">起始时间：{{toastText[0]}}</view>
5+
<view class="calendar-selected-date">结束时间：{{toastText[1]}}</view>
6+
<cube-calendar-modal
7+
wx:ref="calendarModal"
8+
min="{{min}}"
9+
max="{{max}}"
10+
maxRange="{{maxRange}}"
11+
scrollToEnd="{{scrollToEnd}}"
12+
defaultDate="{{defaultDate}}"
13+
maskClosable="{{maskClosable}}"
14+
bindconfirm="confirm"
15+
/>
16+
</view>
17+
</template>
18+
19+
<script>
20+
import { createComponent } from '@mpxjs/core'
21+
22+
createComponent({
23+
data: {
24+
min: +new Date(2025, 1, 1),
25+
max: +new Date(2025, 7, 25),
26+
maxRange: 100,
27+
scrollToEnd: true,
28+
defaultDate: [+new Date(2025, 3, 1), +new Date(2025, 3, 2)],
29+
maskClosable: true,
30+
toastText: ['暂未选择时间', '暂未选择时间']
31+
},
32+
methods: {
33+
showCalendarModal() {
34+
this.$refs.calendarModal.showCalendar()
35+
},
36+
confirm(date) {
37+
const { year: startYear, month: startMonth, day: startDay } = date.detail.value[0]
38+
const { year: endYear, month: endMonth, day: endDay } = date.detail.value[1]
39+
this.toastText = [`${startYear}年${startMonth}月${startDay}日`,`${endYear}年${endMonth}月${endDay}日`]
40+
}
41+
}
42+
})
43+
</script>
44+
45+
<style lang="stylus">
46+
.calendar-page
47+
.calendar-selected-date
48+
margin-top: 10px
49+
text-align: left
50+
white-space: break-spaces
51+
</style>
52+
53+
<script type="application/json">
54+
{
55+
"usingComponents": {
56+
"base-container": "../../components/base-container/index.mpx",
57+
"cube-calendar-modal": "@mpxjs/mpx-cube-ui/src/components/calendar-modal/index",
58+
"cube-toast": "@mpxjs/mpx-cube-ui/src/components/toast/index",
59+
"cube-button": "@mpxjs/mpx-cube-ui/src/components/button/index.mpx"
60+
}
61+
}
62+
</script>

‎example/pages/calendar/README.md‎

Lines changed: 72 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,72 @@
1+
## cube-calendar
2+
3+
<card>
4+
5+
### 介绍
6+
7+
日历组件
8+
9+
</card>
10+
11+
### 示例
12+
13+
<card>
14+
15+
### 用法
16+
17+
18+
<collapse-wrapper>
19+
20+
```vue
21+
<template>
22+
<view class="calendar-page">
23+
<cube-calendar
24+
wx:ref="calendar"
25+
height="{{height}}"
26+
defaultDate="{{defaultDate}}"
27+
bind:dateChange="dateChange"
28+
maxRange="{{maxRange}}"
29+
max="{{max}}"
30+
min="{{min}}"
31+
/>
32+
<view class="base-calendar-selected-date">
33+
<view class="date-title">起始时间</view>
34+
<view class="single-date">年份：{{currentStartDate.year || '暂未选择'}}</view>
35+
<view class="single-date">月份：{{currentStartDate.month || '暂未选择'}}</view>
36+
<view class="single-date">天份：{{currentStartDate.day || '暂未选择'}}</view>
37+
<view class="single-date">时间戳：{{currentStartDate.date || '暂未选择'}}</view>
38+
</view>
39+
<view class="base-calendar-selected-date">
40+
<view class="date-title">结束时间</view>
41+
<view class="single-date">年份：{{currentEndDate.year || '暂未选择'}}</view>
42+
<view class="single-date">月份：{{currentEndDate.month || '暂未选择'}}</view>
43+
<view class="single-date">天份：{{currentEndDate.day || '暂未选择'}}</view>
44+
<view class="single-date">时间戳：{{currentEndDate.date || '暂未选择'}}</view>
45+
</view>
46+
</view>
47+
</template>
48+
<script>
49+
import { createComponent } from '@mpxjs/core'
50+
51+
createComponent({
52+
data: {
53+
min: +new Date(2025, 1, 1),
54+
max: +new Date(2025, 7, 25),
55+
height: '270px',
56+
maxRange: 100,
57+
defaultDate: [+new Date(2025, 3, 1), +new Date(2025, 3, 2)],
58+
currentStartDate: {},
59+
currentEndDate: {}
60+
},
61+
methods: {
62+
dateChange(selectDate) {
63+
this.currentStartDate = selectDate.detail.startDate
64+
this.currentEndDate = selectDate.detail.endDate
65+
}
66+
}
67+
})
68+
</script>
69+
```
70+
</collapse-wrapper>
71+
72+
</card>

‎example/pages/calendar/calendar.mpx‎

Lines changed: 71 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,71 @@
1+
<template>
2+
<view class="calendar-page">
3+
<cube-calendar
4+
wx:ref="calendar"
5+
height="{{height}}"
6+
defaultDate="{{defaultDate}}"
7+
bind:dateChange="dateChange"
8+
maxRange="{{maxRange}}"
9+
max="{{max}}"
10+
min="{{min}}"
11+
/>
12+
<view class="base-calendar-selected-date">
13+
<view class="date-title">起始时间</view>
14+
<view class="single-date">年份：{{currentStartDate.year || '暂未选择'}}</view>
15+
<view class="single-date">月份：{{currentStartDate.month || '暂未选择'}}</view>
16+
<view class="single-date">天份：{{currentStartDate.day || '暂未选择'}}</view>
17+
<view class="single-date">时间戳：{{currentStartDate.date || '暂未选择'}}</view>
18+
</view>
19+
<view class="base-calendar-selected-date">
20+
<view class="date-title">结束时间</view>
21+
<view class="single-date">年份：{{currentEndDate.year || '暂未选择'}}</view>
22+
<view class="single-date">月份：{{currentEndDate.month || '暂未选择'}}</view>
23+
<view class="single-date">天份：{{currentEndDate.day || '暂未选择'}}</view>
24+
<view class="single-date">时间戳：{{currentEndDate.date || '暂未选择'}}</view>
25+
</view>
26+
</view>
27+
</template>
28+
29+
<script>
30+
import { createComponent } from '@mpxjs/core'
31+
32+
createComponent({
33+
data: {
34+
min: +new Date(2025, 1, 1),
35+
max: +new Date(2025, 7, 25),
36+
height: '270px',
37+
maxRange: 100,
38+
defaultDate: [+new Date(2025, 3, 1), +new Date(2025, 3, 2)],
39+
currentStartDate: {},
40+
currentEndDate: {}
41+
},
42+
methods: {
43+
dateChange(selectDate) {
44+
this.currentStartDate = selectDate.detail.startDate
45+
this.currentEndDate = selectDate.detail.endDate
46+
}
47+
}
48+
})
49+
</script>
50+
51+
<style lang="stylus">
52+
.base-calendar-selected-date
53+
margin-top: 10px
54+
padding: 10px
55+
border-radius: 10px
56+
background: white
57+
white-space: break-spaces
58+
.date-title
59+
text-align: center
60+
</style>
61+
62+
<script type="application/json">
63+
{
64+
"usingComponents": {
65+
"base-container": "../../components/base-container/index.mpx",
66+
"cube-calendar": "@mpxjs/mpx-cube-ui/src/components/calendar/index",
67+
"cube-toast": "@mpxjs/mpx-cube-ui/src/components/toast/index",
68+
"cube-button": "@mpxjs/mpx-cube-ui/src/components/button/index.mpx"
69+
}
70+
}
71+
</script>

‎example/pages/calendar/index.mpx‎

Lines changed: 25 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,25 @@
1+
<template>
2+
<view class="calendar-page">
3+
<base-container>
4+
<calendar/>
5+
</base-container>
6+
</view>
7+
</template>
8+
9+
<script>
10+
import { createPage } from '@mpxjs/core'
11+
12+
createPage()
13+
</script>
14+
15+
<style lang="stylus">
16+
</style>
17+
18+
<script type="application/json">
19+
{
20+
"usingComponents": {
21+
"base-container": "../../components/base-container/index.mpx",
22+
"calendar": "./calendar.mpx"
23+
}
24+
}
25+
</script>

‎example/static/wx/project.config.json‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -55,5 +55,6 @@
5555
"ignore": [],
5656
"include": []
5757
},
58-
"projectname": "wx"
58+
"projectname": "wx",
59+
"appid": "wx603cbad725e536bf"
5960
}

0 commit comments

Comments
 (0)