From 261e48d5eff7665ca196805bf1e2b50a1df8b39b Mon Sep 17 00:00:00 2001
From: liutong <836164388@qq.com>
Date: Thu, 3 Apr 2025 11:51:25 +0800
Subject: [PATCH] =?UTF-8?q?feat(course):=20=E6=95=99=E7=BB=83=E7=AB=AF?=
 =?UTF-8?q?=E8=AF=BE=E7=A8=8B=E5=88=97=E8=A1=A8=E6=B7=BB=E5=8A=A0=E6=97=A5?=
 =?UTF-8?q?=E5=8E=86=E9=80=89=E6=8B=A9=E5=8A=9F=E8=83=BD?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- 在课程列表页面添加日历弹窗，用于选择日期范围
- 实现日期范围计算，包括往前推1个月和往后推1个月
- 设置日历打点，用于标记特定日期
- 添加日历选择事件处理，选择日期后关闭弹窗
---
 pages/coach/course/list.vue | 80 ++++++++++++++++++++++++++++++++++++-
 1 file changed, 79 insertions(+), 1 deletion(-)

diff --git a/pages/coach/course/list.vue b/pages/coach/course/list.vue
index 03413f0..bccd081 100644
--- a/pages/coach/course/list.vue
+++ b/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>