php
/
ZhiHuiJiaoWu_UniApp
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity
Browse Source

feat(coach/course/list & student/timetable): 新增日历选择功能 

- 为教练端课程列表和学生端课表页面添加日历选择功能
- 实现日期范围获取、日历打点设置和日期选择逻辑
-优化课程列表数据加载和分页功能
- 调整课程列表和课表的展示方式
master
liutong 12 months ago
parent
274ac0a0be
commit
303ca664d4
2 changed files with 256 additions and 125 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Unified View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 286
      pages/coach/course/list.vue
  2. 95
      pages/student/timetable/index.vue

286
pages/coach/course/list.vue
View File

@ -9,40 +9,12 @@
<view class="main_section"> <view class="main_section">
<view class="section_1"> <view class="section_1">
<view class="ul"> <view class="ul">
<view class="li"> <view class="li" v-for="(v,k) in dateList" :key="k" @click="selectDate(v.date)">
<text>周日</text> <text>{{v.week}}</text>
<text>14</text>
<text></text> <text :class="[filteredData.schedule_date == v.date ? 'today':'']">{{today == v.date ? '今':v.today}}</text>
</view>
<view class="li"> <text :class="[v.status == 2 ?'select_plan':'']"></text>
<text>周一</text>
<text>14</text>
<text></text>
</view>
<view class="li">
<text>周二</text>
<text>14</text>
<text></text>
</view>
<view class="li">
<text>周日</text>
<text class="today">今</text>
<text class=""></text>
</view>
<view class="li">
<text>周一</text>
<text>14</text>
<text class="select_plan"></text>
</view>
<view class="li">
<text>周二</text>
<text>14</text>
<text></text>
</view>
<view class="li">
<text>周二</text>
<text>14</text>
<text></text>
</view> </view>
</view> </view>
<view class="btn" @click="show_calendar=true"> <view class="btn" @click="show_calendar=true">
@ -74,109 +46,46 @@
<!-- </view>--> <!-- </view>-->
<view class="section_3">
<view class="ul">
<view class="li" @click="openViewCourseInfoList({id:2})">
<view class="top_box">
<view class="center_box">
<view>班级：少年班</view>
<view>时间：2020-05-25 15:30 - 17:30</view>
<view>课室：302室
</view>
<view>课程：篮球少儿课
</view>
</view>
<view class="right_box">
<view class="tag" style="background:#20caaf;">未开始</view>
<!-- <view class="tag" style="background:#1cd188;">待上课</view>-->
</view>
</view>
<view class="bottom_box">
<view class="list_box" style="margin-top: 0;">
<view class="hint">
人数：30
</view>
<view class="btn">
详情
</view>
</view>
</view>
</view>
<scroll-view
<view class="li" @click="openViewCourseInfo({id:1})"> class="section_3"
<view class="top_box"> scroll-y="true"
<view class="center_box"> :lower-threshold="lowerThreshold"
<view>班级：少年班</view> @scrolltolower="loadMoreData"
<view>时间：2020-05-25 15:30 - 17:30</view> style="height: 100vh;"
<view>课室：302室 >
</view> <view class="ul">
<view>课程：篮球少儿课 <view
</view> class="li"
</view> v-for="(v,k) in tableList"
<view class="right_box"> :key="k"
<view class="tag" style="background:#fad24e;">上课中</view> @click="openViewCourseInfoList(v)"
<!-- <view class="tag" style="background:#1cd188;">待上课</view>--> >
</view>
</view>
<view class="bottom_box">
<view class="hint">
已签到学生 (15/34)
</view>
<view class="list_box">
<view class="list">
<view class="itme">
<image src="http://www.firstui.cn:4000/vipdoc/img/img_logo.png"></image>
</view>
<view class="itme">
<image src="http://www.firstui.cn:4000/vipdoc/img/img_logo.png"></image>
</view>
<view class="itme">
<image src="http://www.firstui.cn:4000/vipdoc/img/img_logo.png"></image>
</view>
<view class="itme">
<image src="http://www.firstui.cn:4000/vipdoc/img/img_logo.png"></image>
</view>
</view>
<view class="btn">
详情
</view>
</view>
</view>
</view>
<view class="li" @click="openViewCourseInfo({id:2})">
<view class="top_box"> <view class="top_box">
<view class="center_box"> <view class="center_box">
<view>班级：少年班</view> <view>班级：{{v.classes_name}}</view>
<view>时间：2020-05-25 15:30 - 17:30</view> <view>时间：{{v.date}}</view>
<view>课室：302室 <view>课室：{{v.address}}
</view> </view>
<view>课程：篮球少儿课 <view>课程：{{v.courses_name}}
</view> </view>
</view> </view>
<view class="right_box"> <view class="right_box">
<view class="tag" style="background:#e2e2e2;">已结束</view> <!-- v.status|1=未开始,2=进行中,3=已结束-->
<view class="tag" :style="{background: v.status == 1 ? '#1cd188' : v.status == 2 ? '#fad24e' : '#ff4d4f'}">
{{ v.status === 1 ? '未开始' : v.status === 2 ? '上课中' : '已结束' }}</view>
<!-- <view class="tag" style="background:#1cd188;">待上课</view>--> <!-- <view class="tag" style="background:#1cd188;">待上课</view>-->
</view> </view>
</view> </view>
<view class="bottom_box"> <view class="bottom_box">
<view class="hint"> <view class="hint">
已签到学生 (15/34) 已签到学生 ({{v.sign_list.length }}/{{v.max_students.split(',').length }})
</view> </view>
<view class="list_box"> <view class="list_box">
<view class="list"> <view class="list">
<view class="itme"> <view class="itme" v-for="(item,index) in v.sign_list || 0" :key="index">
<image src="http://www.firstui.cn:4000/vipdoc/img/img_logo.png"></image> <image :src="$util.img(item.header)"></image>
</view>
<view class="itme">
<image src="http://www.firstui.cn:4000/vipdoc/img/img_logo.png"></image>
</view>
<view class="itme">
<image src="http://www.firstui.cn:4000/vipdoc/img/img_logo.png"></image>
</view>
<view class="itme">
<image src="http://www.firstui.cn:4000/vipdoc/img/img_logo.png"></image>
</view> </view>
</view> </view>
<view class="btn"> <view class="btn">
@ -186,7 +95,7 @@
</view> </view>
</view> </view>
</view> </view>
</view> </scroll-view>
</view> </view>
<!-- 日历选择--> <!-- 日历选择-->
@ -211,6 +120,7 @@
<script> <script>
// import user from '@/api/user.js'; // import user from '@/api/user.js';
import memberApi from '@/api/member.js';
import commonApi from '@/api/common.js'; import commonApi from '@/api/common.js';
import AQTabber from "@/components/AQ/AQTabber.vue" import AQTabber from "@/components/AQ/AQTabber.vue"
@ -221,6 +131,21 @@ export default {
}, },
data() { data() {
return { return {
loading: false,//加载状态
lowerThreshold: 100,//距离底部多远触发
isReachedBottom: false,//防止重复加载|true=不可加载|false=可加载
//筛选条件
filteredData: {
page: 1,//当前页码
limit: 10,//每页返回数据条数
total: 10,//数据总条数
schedule_date: '',//日期
venue_id: '',//场地id
},
tableList: [],//表格数据
venuesInfo: {},//场地信息
formData:{}, formData:{},
//课程下拉菜单相关 //课程下拉菜单相关
@ -259,6 +184,10 @@ export default {
} }
], ],
//今日日期
today: '',
dateList: [],//日期列表
//日历选择相关 //日历选择相关
show_calendar:false,//是否展示日期 show_calendar:false,//是否展示日期
startDate:'',//开始日期 startDate:'',//开始日期
@ -272,9 +201,20 @@ export default {
onShow(){ onShow(){
this.init()//初始化 this.init()//初始化
}, },
//下拉刷新
async onPullDownRefresh() {
//重置为第一页
let schedule_date = this.filteredData.schedule_date
await this.loadData()
this.filteredData.schedule_date = schedule_date
await this.getList()
},
methods: { methods: {
//初始化 //初始化
async init(){ async init(){
await this.getThisDate()
await this.getHeadDate()
await this.getList()
this.getDateRange() this.getDateRange()
this.setCalendarSelected() this.setCalendarSelected()
}, },
@ -315,6 +255,108 @@ export default {
}) })
}, },
//获取课程头日期
async getHeadDate() {
let res = await commonApi.getDate()
if (res.code != 1) {
//提示
uni.showToast({
title: res.msg,
icon: 'none',
})
return
}
this.dateList = []
res.data.forEach((v, k) => {
let today = v.date.split("-")[2]; // "09"
this.dateList.push({
date: v.date,
status: v.status,//1是正常 2请假
week: v.week,
today: today,
})
})
console.log('xxx', res)
},
//获取当前日期
async getThisDate() {
let date = new Date();
let year = date.getFullYear();
let month = String(date.getMonth() + 1).padStart(2, '0'); // 月份前补零
let day = String(date.getDate()).padStart(2, '0'); // 日期前补零
let hour = date.getHours();
let minute = date.getMinutes();
let second = date.getSeconds();
let res = `${year}-${month}-${day}`; // 格式化日期
this.today = res;
this.filteredData.schedule_date = res;
},
//选择日期
async selectDate(date) {
this.loadData()
this.filteredData.schedule_date = date
this.getList()
},
//加载更过(下一页)
loadMoreData() {
//判断是否加载
if (!this.isReachedBottom) {
this.isReachedBottom = true;//设置为不可请求状态
this.getList();
}
},
//重置为第一页
async loadData() {
this.isReachedBottom = false; // 重置状态，以便下次触发加载更多
this.filteredData.page = 1//当前页码
this.filteredData.limit = 10//每页返回数据条数
this.filteredData.total = 10//数据总条数
},
//获取列表
async getList() {
this.loading = true
let data = {...this.filteredData}
//判断是否还有数据
if (this.filteredData.page * this.filteredData.limit > this.filteredData.total || this.filteredData.limit > this.filteredData.total) {
this.loading = false
uni.showToast({
title: '暂无更多',
icon: 'none'
})
return
}
let res = await memberApi.courseList(data)
this.loading = false
this.isReachedBottom = false;
if (res.code != 1) {
uni.showToast({
title: res.msg,
icon: 'none'
})
return
}
this.tableList = res.data.list.data
//场地信息
this.venuesInfo = res.data.venues_info
this.filteredData.total = res.data.list.total
this.filteredData.page++
},
//日历选择相关 //日历选择相关
// 获取日期范围 // 获取日期范围
getDateRange() { getDateRange() {

95
pages/student/timetable/index.vue
View File

@ -17,6 +17,9 @@
<text :class="[v.status == 2 ?'select_plan':'']"></text> <text :class="[v.status == 2 ?'select_plan':'']"></text>
</view> </view>
</view> </view>
<view class="btn" @click="show_calendar=true">
查看更多 <fui-icon name="arrowdown" color="#A4ADB3" size="45"></fui-icon>
</view>
</view> </view>
<view class="section_2"> <view class="section_2">
@ -63,7 +66,7 @@
<image :src="$util.img(item.header)"></image> <image :src="$util.img(item.header)"></image>
</view> </view>
</view> </view>
<view class="btn" @click="openViewTimetableInfo(v)"> <view class="btn">
详情 详情
</view> </view>
</view> </view>
@ -76,6 +79,20 @@
</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/> <AQTabber/>
</view> </view>
@ -112,6 +129,12 @@ export default {
//今日日期 //今日日期
today: '', today: '',
dateList: [],//日期列表 dateList: [],//日期列表
//日历选择相关
show_calendar:false,//是否展示日期
startDate:'',//开始日期
endDate:'',//结束日期
calendarSelected: [],//日历打点
} }
}, },
onLoad(options) { onLoad(options) {
@ -229,8 +252,8 @@ export default {
//场地信息 //场地信息
this.venuesInfo = res.data.venues_info this.venuesInfo = res.data.venues_info
this.total = res.data.list.total this.filteredData.total = res.data.list.total
this.page++ this.filteredData.page++
}, },
//选择日期 //选择日期
@ -240,6 +263,72 @@ export default {
this.getList() this.getList()
}, },
//日历选择相关
// 获取日期范围
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])
},
//设置日期打点
async setCalendarSelected(){
//获取当前月份
let month = new Date().getMonth() + 1;
let res = await commonApi.getMonthDate({month:month})
if (res.code != 1){
//提示
uni.showToast({
title: res.msg,
icon: 'none',
duration: 2000
})
return
}
this.calendarSelected = []
res.data.forEach((v,k)=>{
this.calendarSelected.push({
date: v.date,
})
})
// this.calendarSelected = [
// {
// date: '2025-04-07',
// },
// {
// date: '2025-04-08',
// },
// {
// date: '2025-04-09',
// }
// ]
},
//日历选择
changeCalendar(e){
console.log('日历',e)
this.show_calendar = false
},
//打开课表详情页 //打开课表详情页
openViewCourseInfo(item) { openViewCourseInfo(item) {

Write Preview
Loading…
Cancel
Save