229 lines
6.2 KiB
JavaScript
229 lines
6.2 KiB
JavaScript
import { ref, computed } from 'vue'
|
|
import { groupCourseService } from '@/request_api/groupCourse.mock.js'
|
|
|
|
export function useGroupCourseList() {
|
|
// 分页相关
|
|
const pageNum = ref(1)
|
|
const pageSize = ref(10)
|
|
const total = ref(0)
|
|
const totalPages = ref(0)
|
|
const loading = ref(false)
|
|
const hasMore = ref(true)
|
|
|
|
// 团课列表数据
|
|
const courseList = ref([])
|
|
|
|
// 搜索相关
|
|
const searchKeyword = ref('')
|
|
const hotKeywords = ref(['燃脂', '瑜伽', '单车', '普拉提', '高强度'])
|
|
|
|
// 排序相关
|
|
const sortOptions = ref([
|
|
{ label: '默认排序', value: 'default' },
|
|
{ label: '价格从低到高', value: 'priceAsc' },
|
|
{ label: '价格从高到低', value: 'priceDesc' },
|
|
{ label: '剩余名额最多', value: 'spotsDesc' }
|
|
])
|
|
const sortIndex = ref(0)
|
|
|
|
// 时间段选择相关
|
|
const timePeriodOptions = ref([
|
|
{ label: '全部', value: 'all' },
|
|
{ label: '早上 (6-12 点)', value: 'morning', startHour: 6, endHour: 12 },
|
|
{ label: '下午 (12-18 点)', value: 'afternoon', startHour: 12, endHour: 18 },
|
|
{ label: '晚上 (18-24 点)', value: 'evening', startHour: 18, endHour: 24 }
|
|
])
|
|
const timePeriodIndex = ref(0)
|
|
|
|
// 时间筛选相关
|
|
const showTimePicker = ref(false)
|
|
const startDate = ref('')
|
|
const endDate = ref('')
|
|
const timeRangeText = ref('')
|
|
|
|
// 筛选后的课程列表
|
|
const filteredCourseList = computed(() => {
|
|
let result = [...courseList.value]
|
|
|
|
// 关键词搜索
|
|
if (searchKeyword.value) {
|
|
result = result.filter(course =>
|
|
course.courseName.includes(searchKeyword.value)
|
|
)
|
|
}
|
|
|
|
// 时间范围筛选
|
|
if (startDate.value || endDate.value) {
|
|
result = result.filter(course => {
|
|
const courseDate = course.startTime.split('T')[0]
|
|
if (startDate.value && courseDate < startDate.value) return false
|
|
if (endDate.value && courseDate > endDate.value) return false
|
|
return true
|
|
})
|
|
}
|
|
|
|
// 时间段筛选
|
|
const timePeriod = timePeriodOptions.value[timePeriodIndex.value]
|
|
if (timePeriod.value !== 'all') {
|
|
result = result.filter(course => {
|
|
const courseHour = new Date(course.startTime).getHours()
|
|
return courseHour >= timePeriod.startHour && courseHour < timePeriod.endHour
|
|
})
|
|
}
|
|
|
|
// 排序
|
|
const sortType = sortOptions.value[sortIndex.value].value
|
|
if (sortType === 'priceAsc') {
|
|
result.sort((a, b) => (a.storedValueAmount || a.pointCardAmount) - (b.storedValueAmount || b.pointCardAmount))
|
|
} else if (sortType === 'priceDesc') {
|
|
result.sort((a, b) => (b.storedValueAmount || b.pointCardAmount) - (a.storedValueAmount || a.pointCardAmount))
|
|
} else if (sortType === 'spotsDesc') {
|
|
result.sort((a, b) => (b.maxMembers - b.currentMembers) - (a.maxMembers - a.currentMembers))
|
|
}
|
|
|
|
return result
|
|
})
|
|
|
|
// 获取所有搜索参数
|
|
const getAllSearchParams = (searchBarRef, filterSectionRef, timePeriodRef, timeRangePickerRef) => {
|
|
const searchParams = searchBarRef?.getSearchParams?.() || { keyword: searchKeyword.value }
|
|
const filterParams = filterSectionRef?.getFilterParams?.() || { sortType: sortOptions.value[sortIndex.value].value }
|
|
const timePeriodParams = timePeriodRef?.getTimePeriodParams?.() || { index: timePeriodIndex.value, value: timePeriodOptions.value[timePeriodIndex.value].value }
|
|
const timeRangeParams = timeRangePickerRef?.getTimeRangeParams?.() || { startDate: startDate.value, endDate: endDate.value, timeRangeText: timeRangeText.value }
|
|
|
|
const allParams = {
|
|
search: searchParams,
|
|
filter: filterParams,
|
|
timePeriod: timePeriodParams,
|
|
timeRange: timeRangeParams
|
|
}
|
|
|
|
console.log('[useGroupCourseList] 获取所有搜索参数:', allParams)
|
|
return allParams
|
|
}
|
|
|
|
// 搜索处理
|
|
const handleSearch = (params) => {
|
|
console.log('[useGroupCourseList] 搜索触发:', params)
|
|
uni.showToast({
|
|
title: params.keyword ? `搜索:${params.keyword}` : '请输入关键词',
|
|
icon: 'none'
|
|
})
|
|
}
|
|
|
|
// 时间段变化处理
|
|
const onTimePeriodChange = (option) => {
|
|
console.log('[useGroupCourseList] 时间段选择:', option)
|
|
}
|
|
|
|
// 时间范围确认处理
|
|
const onTimeRangeConfirm = (params) => {
|
|
console.log('[useGroupCourseList] 时间范围确认:', params)
|
|
timeRangeText.value = params.timeRangeText
|
|
}
|
|
|
|
// 预约处理
|
|
const handleBooking = (course) => {
|
|
console.log('[useGroupCourseList] 预约课程:', course)
|
|
uni.showToast({
|
|
title: `预约课程:${course.courseName}`,
|
|
icon: 'success'
|
|
})
|
|
}
|
|
|
|
// 跳转详情
|
|
const goDetail = (courseId) => {
|
|
console.log('[useGroupCourseList] 跳转到课程详情:', courseId)
|
|
uni.navigateTo({
|
|
url: `/pages/groupCourse/detail?id=${courseId}`
|
|
})
|
|
}
|
|
|
|
// 获取团课列表
|
|
const fetchCourseList = async (isLoadMore = false) => {
|
|
if (loading.value) return
|
|
|
|
loading.value = true
|
|
|
|
try {
|
|
const result = await groupCourseService.getList({
|
|
pageNum: pageNum.value,
|
|
pageSize: pageSize.value
|
|
})
|
|
|
|
if (result.code === 0 && result.data) {
|
|
const { list, total: totalCount, pageNum: currentPage, totalPages: pages } = result.data
|
|
|
|
if (isLoadMore) {
|
|
courseList.value = [...courseList.value, ...list]
|
|
} else {
|
|
courseList.value = list
|
|
}
|
|
|
|
total.value = totalCount
|
|
pageNum.value = currentPage
|
|
totalPages.value = pages
|
|
hasMore.value = pageNum.value < totalPages.value
|
|
|
|
console.log('[useGroupCourseList] 团课列表获取成功:', {
|
|
total: total.value,
|
|
currentPage: pageNum.value,
|
|
totalPages: totalPages.value,
|
|
hasMore: hasMore.value
|
|
})
|
|
} else {
|
|
console.error('[useGroupCourseList] 获取团课列表失败:', result.message)
|
|
}
|
|
} catch (error) {
|
|
console.error('[useGroupCourseList] 获取团课列表异常:', error)
|
|
} finally {
|
|
loading.value = false
|
|
}
|
|
}
|
|
|
|
// 加载更多
|
|
const loadMore = () => {
|
|
if (!hasMore.value || loading.value) return
|
|
pageNum.value++
|
|
fetchCourseList(true)
|
|
}
|
|
|
|
// 滚动到底部触发
|
|
const onScrollToLower = () => {
|
|
loadMore()
|
|
}
|
|
|
|
return {
|
|
// 状态
|
|
pageNum,
|
|
pageSize,
|
|
total,
|
|
totalPages,
|
|
loading,
|
|
hasMore,
|
|
courseList,
|
|
searchKeyword,
|
|
hotKeywords,
|
|
sortOptions,
|
|
sortIndex,
|
|
timePeriodOptions,
|
|
timePeriodIndex,
|
|
showTimePicker,
|
|
startDate,
|
|
endDate,
|
|
timeRangeText,
|
|
filteredCourseList,
|
|
|
|
// 方法
|
|
getAllSearchParams,
|
|
handleSearch,
|
|
onTimePeriodChange,
|
|
onTimeRangeConfirm,
|
|
handleBooking,
|
|
goDetail,
|
|
fetchCourseList,
|
|
loadMore,
|
|
onScrollToLower
|
|
}
|
|
}
|