Browse Source

feat(timetable): 优化课表页面功能和展示

- 修改学生课程安排接口,增加获取排课日历功能
- 优化课表页面布局和数据展示- 添加日历打点功能,显示有课的日期
-调整课程状态显示逻辑- 修复部分功能,如选择日期后未及时更新数据等问题
master
liutong 10 months ago
parent
commit
5503e8d44a
  1. 9
      api/apiRoute.js
  2. 163
      pages/student/timetable/index.vue

9
api/apiRoute.js

@ -515,7 +515,7 @@ export default {
}) })
}, },
//学生端-学生课程安排-详情 //学生端-学生课程安排-修改请假状态
xy_personCourseScheduleEditStatus(data = {}) { xy_personCourseScheduleEditStatus(data = {}) {
let url = '/xy/personCourseSchedule/editStatus' let url = '/xy/personCourseSchedule/editStatus'
return http.post(url, data).then(res => { return http.post(url, data).then(res => {
@ -523,6 +523,13 @@ export default {
}) })
}, },
//学生端-学生课程安排-获取排课日历
xy_personCourseScheduleGetCalendar(data = {}) {
let url = '/xy/personCourseSchedule/getCalendar'
return http.get(url, data).then(res => {
return res;
})
},

163
pages/student/timetable/index.vue

@ -12,9 +12,9 @@
<view class="li" v-for="(v,k) in dateList" :key="k" @click="selectDate(v.date)"> <view class="li" v-for="(v,k) in dateList" :key="k" @click="selectDate(v.date)">
<text>{{v.week}}</text> <text>{{v.week}}</text>
<text :class="[filteredData.schedule_date == v.date ? 'today':'']">{{today == v.date ? '今':v.today}}</text> <text :class="[filteredData.course_date == v.date ? 'today':'']">{{today == v.date ? '今':v.today}}</text>
<text :class="[v.status == 2 ?'select_plan':'']"></text> <text :class="[v.is_sign == 1 ? 'select_plan':'']"></text>
</view> </view>
</view> </view>
<view class="btn" @click="show_calendar=true"> <view class="btn" @click="show_calendar=true">
@ -24,7 +24,7 @@
<view class="section_2"> <view class="section_2">
<view class="item_box"> <view class="item_box">
{{venuesInfo.name}} <text v-if="venuesInfo.id || ''">{{venuesInfo.name}}</text>
</view> </view>
<view class="item_box" style="text-align: right;color: #F59A23;" @click="more"> <view class="item_box" style="text-align: right;color: #F59A23;" @click="more">
更多 更多
@ -43,29 +43,31 @@
<view v-for="(v,k) in tableList" :key="k" class="li" @click="openViewCourseInfo(v)"> <view v-for="(v,k) in tableList" :key="k" class="li" @click="openViewCourseInfo(v)">
<view class="top_box"> <view class="top_box">
<view class="center_box"> <view class="center_box">
<view>班级{{v.classes_name}}</view> <view>教练{{v.courseScheduleHasOne.coach.name}}</view>
<view>时间{{v.date}}</view> <view>课程{{v.courseScheduleHasOne.course.course_name}}</view>
<view>课室{{v.address}}</view> <view>时间{{v.course_date}}</view>
<view>{{v.courses_name}}</view> <view>{{v.courseScheduleHasOne.campus_name}} {{v.courseScheduleHasOne.venue.venue_name}}</view>
</view> </view>
<view class="right_box"> <view class="right_box">
<!-- v.status|1=未开始,2=进行中,3=已结束--> <!-- v.status|1=未开始,2=进行中,3=已结束-->
<view class="tag" :style="{background: v.status == 1 ? '#1cd188' : v.status == 2 ? '#fad24e' : '#ff4d4f'}"> <view class="tag"
{{ v.status === 1 ? '未开始' : v.status === 2 ? '上课中' : '已结束' }} v-if="v.status != null"
:style="{background: v.status == 1 ? '#1cd188' : v.status == 2 ? '#fad24e' : '#ff4d4f'}">
{{ v.status == 0 ? '待上课' : v.status == 1 ? '已上课' : '请假' }}
</view> </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">
已签到学生 ({{v.sign_list.length }}/{{v.max_students.split(',').length }}) <!-- 已签到学生 ({{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" v-for="(item,index) in v.sign_list || 0" :key="index"> <!-- <view class="itme" v-for="(item,index) in v.sign_list || 0" :key="index">-->
<image :src="$util.img(item.header)"></image> <!-- <image :src="$util.img(item.header)"></image>-->
</view> <!-- </view>-->
</view> <!-- </view>-->
<view class="btn"> <view class="btn">
详情 详情
</view> </view>
@ -99,6 +101,7 @@
</template> </template>
<script> <script>
import apiRoute from '@/api/apiRoute.js';
import memberApi from '@/api/member.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"
@ -114,12 +117,15 @@ export default {
lowerThreshold: 100,// lowerThreshold: 100,//
isReachedBottom: false,//|true=|false= isReachedBottom: false,//|true=|false=
memberInfo:{},//
// //
filteredData: { filteredData: {
page: 1,// page: 1,//
limit: 10,// limit: 10,//
total: 10,// total: 10,//
schedule_date: '',// resources_id:'',//id
course_date: '',//
venue_id: '',//id venue_id: '',//id
}, },
tableList: [],// tableList: [],//
@ -134,7 +140,16 @@ export default {
show_calendar:false,// show_calendar:false,//
startDate:'',// startDate:'',//
endDate:'',// endDate:'',//
calendarSelected: [],// calendarSelected: [
// {
// date: '2025-04-07',//
// },
// {
// date: '2025-04-09',//
// },
],//()
} }
}, },
onLoad(options) { onLoad(options) {
@ -148,27 +163,58 @@ export default {
// //
async onPullDownRefresh() { async onPullDownRefresh() {
// //
let schedule_date = this.filteredData.schedule_date let course_date = this.filteredData.course_date
await this.loadData() await this.loadData()
this.filteredData.schedule_date = schedule_date this.filteredData.course_date = course_date
await this.getList() await this.getList()
}, },
methods: { methods: {
// //
async init() { async init() {
await this.getThisDate() await this.getMemberInfo()//
await this.getHeadDate() await this.getThisDate()//
await this.getList() await this.getList()//
await this.getHeadDate()//
this.getDateRange() this.getDateRange()//
this.setCalendarSelected() this.setCalendarSelected()//
}, },
//
async getMemberInfo() {
let res = await apiRoute.xy_memberInfo({})
if(res.code != 1){
uni.showToast({
title: res.msg,
icon: 'none'
})
return
}
this.memberInfo = res.data
this.filteredData.resources_id = res.data.id
},
// //
async getHeadDate() { async getHeadDate() {
let res = await commonApi.getDate() // 2
let startDate = new Date();
startDate.setDate(startDate.getDate() - 2);
let start_date = startDate.toISOString().split('T')[0];
// 4
let endDate = new Date();
endDate.setDate(endDate.getDate() + 4);
let end_date = endDate.toISOString().split('T')[0];
let params = {
resources_id: this.memberInfo.id, // ID
start_date: start_date, // (Y-m-d)
end_date: end_date, // (Y-m-d)
}
let res = await apiRoute.xy_personCourseScheduleGetCalendar(params)
if (res.code != 1) { if (res.code != 1) {
// //
uni.showToast({ uni.showToast({
@ -180,12 +226,12 @@ export default {
this.dateList = [] this.dateList = []
res.data.forEach((v, k) => { res.data.forEach((v, k) => {
let today = v.date.split("-")[2]; // "09"
this.dateList.push({ this.dateList.push({
date: v.date, date: v.date,
status: v.status,//1 2 status: v.status,//1 2
week: v.week, week: v.week,
today: today, today: v.today,
is_sign: v.is_sign,
}) })
}) })
@ -206,15 +252,15 @@ export default {
let res = `${year}-${month}-${day}`; // let res = `${year}-${month}-${day}`; //
this.today = res; this.today = res;
this.filteredData.schedule_date = res; this.filteredData.course_date = res;
}, },
//() //()
loadMoreData() { async loadMoreData() {
// //
if (!this.isReachedBottom) { if (!this.isReachedBottom) {
this.isReachedBottom = true;// this.isReachedBottom = true;//
this.getList(); await this.getList();
} }
}, },
// //
@ -230,6 +276,9 @@ export default {
this.loading = true this.loading = true
let data = {...this.filteredData} let data = {...this.filteredData}
if(this.filteredData.page == 1){
this.tableList = []
}
// //
if ((this.filteredData.page - 1) * this.filteredData.limit >= this.filteredData.total) { if ((this.filteredData.page - 1) * this.filteredData.limit >= this.filteredData.total) {
@ -241,7 +290,7 @@ export default {
return return
} }
let res = await memberApi.courseList(data) let res = await apiRoute.xy_personCourseSchedule(data)
this.loading = false this.loading = false
this.isReachedBottom = false; this.isReachedBottom = false;
if (res.code != 1) { if (res.code != 1) {
@ -252,18 +301,19 @@ export default {
return return
} }
this.tableList = res.data.list.data this.tableList = this.tableList.concat(res.data.data); // 使 concat
// //
this.venuesInfo = res.data.venues_info this.venuesInfo = res.data.venues_info
this.filteredData.total = res.data.list.total this.filteredData.total = res.data.total
this.filteredData.page++ this.filteredData.page++
}, },
// //
async selectDate(date) { async selectDate(date) {
this.loadData() this.loadData()
this.filteredData.schedule_date = date this.filteredData.course_date = date
this.getList() this.getList()
}, },
@ -296,25 +346,43 @@ export default {
// //
async setCalendarSelected(){ async setCalendarSelected(){
// //
let month = new Date().getMonth() + 1; const today = new Date(); //
const year = today.getFullYear(); //
const month = today.getMonth(); // 0-11
let res = await commonApi.getMonthDate({month:month}) //
if (res.code != 1){ const firstDay = new Date(year, month, 1);
// // 1
uni.showToast({ const lastDay = new Date(year, month + 1, 0);
title: res.msg,
icon: 'none', // YYYY-MM-DD
duration: 2000 const formatDate = (date) => {
}) const y = date.getFullYear();
return const m = String(date.getMonth() + 1).padStart(2, '0'); //
const d = String(date.getDate()).padStart(2, '0'); //
return `${y}-${m}-${d}`;
};
let start_date = formatDate(firstDay); //
let end_date = formatDate(lastDay); //
let params = {
resources_id: this.memberInfo.id, // ID
start_date: start_date, // (Y-m-d)
end_date: end_date, // (Y-m-d)
} }
let res = await apiRoute.xy_personCourseScheduleGetCalendar(params)
this.calendarSelected = [] this.calendarSelected = []
res.data.forEach((v,k)=>{ res.data.forEach((v,k)=>{
if(v.is_sign == 1){
this.calendarSelected.push({ this.calendarSelected.push({
date: v.date, date: v.date,
}) })
}
}) })
// this.calendarSelected = [ // this.calendarSelected = [
// { // {
// date: '2025-04-07', // date: '2025-04-07',
@ -334,20 +402,21 @@ export default {
console.log('日历',e) console.log('日历',e)
this.show_calendar = false this.show_calendar = false
this.loadData() this.loadData()
this.filteredData.schedule_date = e.fulldate this.filteredData.course_date = e.fulldate
this.getList() this.getList()
}, },
// //
openViewCourseInfo(item) { openViewCourseInfo(item) {
let person_course_schedule_id = item.id
uni.navigateTo({ uni.navigateTo({
url: `/pages/student/timetable/info?id=${item.id}` url: `/pages/student/timetable/info?person_course_schedule_id=${person_course_schedule_id}`
}) })
}, },
// //
more() { more() {
let schedule_date = this.filteredData.schedule_date let schedule_date = this.filteredData.course_date
let venue_id = this.venuesInfo.id//id let venue_id = this.venuesInfo.id//id
uni.navigateTo({ uni.navigateTo({
url: `/pages/student/timetable/list?schedule_date=${schedule_date}&venue_id=${venue_id}` url: `/pages/student/timetable/list?schedule_date=${schedule_date}&venue_id=${venue_id}`

Loading…
Cancel
Save