Browse Source

feat(course): 教练端课程列表添加日历选择功能

- 在课程列表页面添加日历弹窗,用于选择日期范围
- 实现日期范围计算,包括往前推1个月和往后推1个月
- 设置日历打点,用于标记特定日期
- 添加日历选择事件处理,选择日期后关闭弹窗
master
liutong 1 year ago
parent
commit
261e48d5ef
  1. 80
      pages/coach/course/list.vue

80
pages/coach/course/list.vue

@ -45,7 +45,7 @@
<text></text>
</view>
</view>
<view class="btn">
<view class="btn" @click="show_calendar=true">
查看更多 <fui-icon name="arrowdown" color="#A4ADB3" size="45"></fui-icon>
</view>
</view>
@ -189,6 +189,21 @@
</view>
</view>
<!-- 日历选择-->
<fui-bottom-popup :show="show_calendar" @close="show_calendar=false">
<view class="fui-custom__wrap">
<uni-calendar
:insert="true"
:lunar="false"
:selected="calendarSelected"
:startDate="startDate"
:endDate="endDate"
@change="changeCalendar"
/>
</view>
</fui-bottom-popup>
<!-- 底部导航-->
<AQTabber/>
</view>
@ -242,11 +257,27 @@ export default {
value: '2'
}
],
//
show_calendar:false,//
startDate:'',//
endDate:'',//
calendarSelected: [],//
}
},
onLoad() {
},
onShow(){
this.init()//
},
methods: {
//
async init(){
this.getDateRange()
this.setCalendarSelected()
},
//
clickCourse(e){
console.log(e)
@ -281,6 +312,53 @@ export default {
url: '/pages/coach/course/info'
})
},
//
//
getDateRange() {
const today = new Date(); //
const startDate = new Date(today); //
const endDate = new Date(today); //
// startDate 1
startDate.setMonth(today.getMonth() - 1);
// endDate 1
endDate.setMonth(today.getMonth() + 2);
// YYYY-MM-DD
const formatDate = (date) => {
const year = date.getFullYear();
const month = String(date.getMonth() + 1).padStart(2, '0');
const day = String(date.getDate()).padStart(2, '0');
return `${year}-${month}-${day}`;
};
// data startDate endDate
this.startDate = formatDate(startDate);
this.endDate = formatDate(endDate);
console.log([this.startDate,this.endDate])
},
//
setCalendarSelected(){
this.calendarSelected = [
{
date: '2025-04-07',
},
{
date: '2025-04-08',
},
{
date: '2025-04-09',
}
]
},
//
changeCalendar(e){
console.log('日历',e)
this.show_calendar = false
},
}
}
</script>

Loading…
Cancel
Save