|
|
<template>
|
|
|
<view class="calendar-page">
|
|
|
<!-- 顶部导航 -->
|
|
|
<!-- <view class="header">
|
|
|
<view class="logo-section">
|
|
|
<view class="logo"></view>
|
|
|
<view class="school-name">苏州科技商学院</view>
|
|
|
</view>
|
|
|
<view class="user-section">
|
|
|
<text>张同学</text>
|
|
|
<view class="vip-badge">VIP会员</view>
|
|
|
</view>
|
|
|
</view> -->
|
|
|
|
|
|
|
|
|
<!-- 自定义日历（支持跨天横条显示） -->
|
|
|
<view class="calendar-container">
|
|
|
<CalendarGrid
|
|
|
:month="calendarDate"
|
|
|
:events="courses"
|
|
|
:rowHeightRpx="170"
|
|
|
:headerHeightRpx="72"
|
|
|
:weekHeaderHeightRpx="52"
|
|
|
:dateNumberHeightRpx="46"
|
|
|
@dayClick="onDateChange"
|
|
|
@monthChange="onMonthSwitch"
|
|
|
@edit="onEditEvent"
|
|
|
@eventClick="showCourseDetail"
|
|
|
/>
|
|
|
</view>
|
|
|
<!-- 课程类型筛选 -->
|
|
|
<!-- <view class="calendar-filters">
|
|
|
<view
|
|
|
v-for="item in filterTabs"
|
|
|
:key="item.value"
|
|
|
:class="['filter-badge', {active: filterType === item.value}]"
|
|
|
@tap="onFilterChange(item.value)"
|
|
|
>
|
|
|
{{ item.label }}
|
|
|
</view>
|
|
|
</view> -->
|
|
|
<!-- 当月日程列表 -->
|
|
|
<view class="month-events-container">
|
|
|
<view class="events-title">当月日程</view>
|
|
|
<view v-if="monthEvents.length" class="events-list no-scroll">
|
|
|
<view
|
|
|
v-for="ev in monthEvents"
|
|
|
:key="ev.id"
|
|
|
class="event-item"
|
|
|
@tap="showCourseDetail(ev)"
|
|
|
>
|
|
|
<view class="event-item-left">
|
|
|
<view :class="['type-dot', 'event-' + ev.type]"></view>
|
|
|
<view class="event-info">
|
|
|
<view class="event-title">{{ ev.title }}</view>
|
|
|
<view class="event-meta">
|
|
|
<!-- <text>{{ getCourseTypeName(ev.type) }}</text> -->
|
|
|
<text>{{ formatDateTimeRange(ev.start_time, ev.end_time) }}</text>
|
|
|
</view>
|
|
|
</view>
|
|
|
</view>
|
|
|
<view class="event-item-right">
|
|
|
<u-icon name="arrow-right" color="#999" size="28"></u-icon>
|
|
|
</view>
|
|
|
</view>
|
|
|
</view>
|
|
|
<view v-else class="empty-events">
|
|
|
<text>本月暂无日程</text>
|
|
|
</view>
|
|
|
</view>
|
|
|
|
|
|
<!-- 课程详情弹窗 -->
|
|
|
<u-popup v-model="showDetail" :width="'100vw'" :height="'100vh'" mode="center" :closeable="true" :mask-close-able="true">
|
|
|
<view class="course-modal">
|
|
|
<view class="modal-header">
|
|
|
<text class="modal-title">{{ detailData.title }}</text>
|
|
|
</view>
|
|
|
<view class="modal-body">
|
|
|
<view class="course-info">
|
|
|
<!-- <view class="info-item">
|
|
|
<text class="info-label">日程类型</text>
|
|
|
<text class="info-value">{{ getCourseTypeName(detailData.type) }}</text>
|
|
|
</view> -->
|
|
|
<view class="info-item">
|
|
|
<text class="info-label">开始时间</text>
|
|
|
<text class="info-value">{{ formatDateTime(detailData.start_time) }}</text>
|
|
|
</view>
|
|
|
<view class="info-item">
|
|
|
<text class="info-label">结束时间</text>
|
|
|
<text class="info-value">{{ formatDateTime(detailData.end_time) }}</text>
|
|
|
</view>
|
|
|
</view>
|
|
|
<view class="course-description" v-if="detailData.address">
|
|
|
<text class="desc-title">日程地点</text>
|
|
|
<text class="info-value">{{ detailData.address }}</text>
|
|
|
</view>
|
|
|
<view class="course-description">
|
|
|
<!-- <text class="desc-title">日程详情</text> -->
|
|
|
<!-- <u-parse :content="detailData.content || ''"></u-parse> -->
|
|
|
<view v-html="detailData.content || ''">
|
|
|
</view>
|
|
|
</view>
|
|
|
<view class="course-actions">
|
|
|
<!-- <u-button type="default" @tap="showDetail = false">关闭</u-button> -->
|
|
|
<!-- <u-button type="primary" @tap="enrollCourse">立即报名</u-button> -->
|
|
|
</view>
|
|
|
</view>
|
|
|
</view>
|
|
|
</u-popup>
|
|
|
</view>
|
|
|
</template>
|
|
|
|
|
|
<script>
|
|
|
import CalendarGrid from '@/components/calendar-grid/calendar-grid.vue'
|
|
|
export default {
|
|
|
components:{
|
|
|
CalendarGrid
|
|
|
},
|
|
|
data() {
|
|
|
const now = new Date();
|
|
|
const year = now.getFullYear();
|
|
|
const month = String(now.getMonth() + 1).padStart(2, '0');
|
|
|
return {
|
|
|
filterTabs: [
|
|
|
{ label: '全部', value: '' },
|
|
|
{ label: '课程', value: 1 },
|
|
|
{ label: '自定义事件', value: 3 },
|
|
|
{ label: '资讯', value: 4 }
|
|
|
],
|
|
|
filterType: '',
|
|
|
calendarDate: `${year}-${month}`,
|
|
|
showDetail: false,
|
|
|
detailData: {},
|
|
|
courses: [] // 与 web 端一致的数据结构：[{ id, title, type, start_time, end_time, ... }]
|
|
|
}
|
|
|
},
|
|
|
computed: {
|
|
|
selectedDates() {
|
|
|
const dates = new Set()
|
|
|
this.courses.forEach(ev => {
|
|
|
if (!this.matchesFilter(ev.type)) return
|
|
|
const start = this.parseDateTime(ev.start_time)
|
|
|
const end = ev.end_time ? this.parseDateTime(ev.end_time) : this.parseDateTime(ev.start_time)
|
|
|
if (!start || !end) return
|
|
|
const cursor = new Date(start)
|
|
|
while (cursor <= end) {
|
|
|
dates.add(this.toDateString(cursor))
|
|
|
cursor.setDate(cursor.getDate() + 1)
|
|
|
}
|
|
|
})
|
|
|
return Array.from(dates).map(date => ({ date, info: '' }))
|
|
|
},
|
|
|
monthEvents() {
|
|
|
if (!this.calendarDate) return []
|
|
|
const [yearStr, monthStr] = (this.calendarDate || '').split('-')
|
|
|
const year = parseInt(yearStr, 10)
|
|
|
const month = parseInt(monthStr, 10)
|
|
|
if (!year || !month) return []
|
|
|
const monthStart = new Date(year, month - 1, 1)
|
|
|
const monthEnd = new Date(year, month, 0)
|
|
|
|
|
|
const filtered = this.courses.filter(ev => {
|
|
|
if (!this.matchesFilter(ev.type)) return false
|
|
|
const start = this.parseDateTime(ev.start_time)
|
|
|
const end = ev.end_time ? this.parseDateTime(ev.end_time) : this.parseDateTime(ev.start_time)
|
|
|
if (!start || !end) return false
|
|
|
// 只要与当月有交集就展示
|
|
|
return !(end < monthStart || start > monthEnd)
|
|
|
})
|
|
|
|
|
|
return filtered.sort((a, b) => this.parseDateTime(a.start_time) - this.parseDateTime(b.start_time))
|
|
|
}
|
|
|
},
|
|
|
created(){
|
|
|
this.getCalendar()
|
|
|
},
|
|
|
methods: {
|
|
|
matchesFilter(type) {
|
|
|
// 显示规则：filterType 为空字符串时，显示全部；否则严格匹配类型
|
|
|
if (this.filterType === '' || this.filterType === null || this.filterType === undefined) return true
|
|
|
return type === this.filterType
|
|
|
},
|
|
|
parseDateTime(dateTimeStr) {
|
|
|
if (!dateTimeStr) return null
|
|
|
const [datePart, timePart = '00:00:00'] = dateTimeStr.trim().split(/[T\s]+/)
|
|
|
const [y, m, d] = datePart.split('-').map(n => parseInt(n, 10))
|
|
|
const [hh = 0, mm = 0, ss = 0] = timePart.split(':').map(n => parseInt(n, 10))
|
|
|
return new Date(y, (m || 1) - 1, d || 1, hh || 0, mm || 0, ss || 0)
|
|
|
},
|
|
|
toDateString(d) {
|
|
|
return `${d.getFullYear()}-${String(d.getMonth() + 1).padStart(2,'0')}-${String(d.getDate()).padStart(2,'0')}`
|
|
|
},
|
|
|
async getCalendar(){
|
|
|
try {
|
|
|
const res = await this.$u.api.calendarsGet({
|
|
|
month: this.calendarDate
|
|
|
})
|
|
|
const rows = (res && res.data) ? res.data : (Array.isArray(res) ? res : [])
|
|
|
this.courses = Array.isArray(rows) ? rows : []
|
|
|
} catch (error) {
|
|
|
console.error('getCalendar failed:', error)
|
|
|
}
|
|
|
},
|
|
|
onFilterChange(type) {
|
|
|
this.filterType = type;
|
|
|
},
|
|
|
onDateChange({ fulldate }) {
|
|
|
const evs = this.getEventsForDate(fulldate)
|
|
|
if (evs.length) {
|
|
|
// 简单按开始时间排序
|
|
|
evs.sort((a,b) => this.parseDateTime(a.start_time) - this.parseDateTime(b.start_time))
|
|
|
this.showCourseDetail(evs[0])
|
|
|
}
|
|
|
},
|
|
|
onMonthSwitch({ year, month }) {
|
|
|
this.calendarDate = `${year}-${String(month).padStart(2, '0')}`
|
|
|
this.getCalendar()
|
|
|
},
|
|
|
onEditEvent(id){
|
|
|
// 预留：可打开编辑弹窗
|
|
|
// console.log('edit', id)
|
|
|
},
|
|
|
getEventsForDate(dateStr) {
|
|
|
const targetDate = new Date(dateStr)
|
|
|
targetDate.setHours(0, 0, 0, 0)
|
|
|
|
|
|
return this.courses.filter(ev => {
|
|
|
if (this.filterType !== 'all' && ev.type !== this.filterType) return false
|
|
|
const startDate = this.parseDateTime(ev.start_time)
|
|
|
const endDate = ev.end_time ? this.parseDateTime(ev.end_time) : this.parseDateTime(ev.start_time)
|
|
|
if (!startDate || !endDate) return false
|
|
|
startDate.setHours(0,0,0,0)
|
|
|
endDate.setHours(0,0,0,0)
|
|
|
return targetDate >= startDate && targetDate <= endDate
|
|
|
})
|
|
|
},
|
|
|
showCourseDetail(ev) {
|
|
|
// 跳转逻辑：
|
|
|
// type=1 课程：直接跳转课程详情页面
|
|
|
// type=3 自定义事件：弹出详情，使用 v-html 渲染 content
|
|
|
// type=4 资讯：跳 webview
|
|
|
const type = ev.type
|
|
|
if (type === 1) {
|
|
|
if (ev.course_id) {
|
|
|
uni.navigateTo({ url: `/packages/course/detail?id=${ev.course_id}` })
|
|
|
return
|
|
|
}
|
|
|
// 没有 course_id 则弹窗兜底
|
|
|
this.detailData = ev
|
|
|
this.showDetail = true
|
|
|
return
|
|
|
}
|
|
|
|
|
|
if (type === 3) {
|
|
|
this.detailData = ev
|
|
|
this.showDetail = true
|
|
|
return
|
|
|
}
|
|
|
|
|
|
if (type === 4) {
|
|
|
if (ev.url) {
|
|
|
const encoded = ev.url
|
|
|
uni.navigateTo({ url: `/packages/webview/index?type=3&url=${encoded}` })
|
|
|
return
|
|
|
}
|
|
|
// 没有 url 则弹窗兜底
|
|
|
this.detailData = ev
|
|
|
this.showDetail = true
|
|
|
return
|
|
|
}
|
|
|
// 其他类型默认弹窗
|
|
|
this.detailData = ev
|
|
|
this.showDetail = true
|
|
|
},
|
|
|
enrollCourse() {
|
|
|
uni.showModal({
|
|
|
title: '提示',
|
|
|
content: `确定要报名"${this.detailData.title}"吗？`,
|
|
|
success: res => {
|
|
|
if (res.confirm) {
|
|
|
uni.showToast({ title: '报名成功', icon: 'success' });
|
|
|
this.showDetail = false;
|
|
|
}
|
|
|
}
|
|
|
});
|
|
|
},
|
|
|
checkEnrollmentDeadline(course) {
|
|
|
const deadline = new Date(course.enrollmentDeadline);
|
|
|
const now = new Date();
|
|
|
const daysUntilDeadline = Math.ceil((deadline - now) / (1000 * 60 * 60 * 24));
|
|
|
if (daysUntilDeadline <= 3 && daysUntilDeadline > 0) {
|
|
|
// 可用uni.showToast或其他提醒
|
|
|
uni.showToast({
|
|
|
title: `${course.title}报名即将截止`,
|
|
|
icon: 'none'
|
|
|
});
|
|
|
}
|
|
|
},
|
|
|
getCourseTypeName(type) {
|
|
|
const types = {
|
|
|
1: '课程',
|
|
|
2: '会议',
|
|
|
3: '自定义事件',
|
|
|
4: '资讯',
|
|
|
5: '其他'
|
|
|
}
|
|
|
return types[type] || '其他'
|
|
|
},
|
|
|
formatDateTime(dateStr) {
|
|
|
if (!dateStr) return ''
|
|
|
const d = this.parseDateTime(dateStr)
|
|
|
if (!d || isNaN(d.getTime())) return ''
|
|
|
return `${d.getFullYear()}-${String(d.getMonth()+1).padStart(2,'0')}-${String(d.getDate()).padStart(2,'0')} ${String(d.getHours()).padStart(2,'0')}:${String(d.getMinutes()).padStart(2,'0')}`
|
|
|
},
|
|
|
formatDateTimeRange(startStr, endStr) {
|
|
|
const start = this.parseDateTime(startStr)
|
|
|
const end = endStr ? this.parseDateTime(endStr) : this.parseDateTime(startStr)
|
|
|
if (!start || !end) return ''
|
|
|
const startDay = `${String(start.getMonth() + 1).padStart(2,'0')}-${String(start.getDate()).padStart(2,'0')}`;
|
|
|
const startTime = `${String(start.getHours()).padStart(2,'0')}:${String(start.getMinutes()).padStart(2,'0')}`;
|
|
|
const endDay = `${String(end.getMonth() + 1).padStart(2,'0')}-${String(end.getDate()).padStart(2,'0')}`;
|
|
|
const endTime = `${String(end.getHours()).padStart(2,'0')}:${String(end.getMinutes()).padStart(2,'0')}`;
|
|
|
|
|
|
if (startDay === endDay) {
|
|
|
return `${startDay} ${startTime} - ${endTime}`;
|
|
|
} else {
|
|
|
return `${startDay} ${startTime} - ${endDay} ${endTime}`;
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
</script>
|
|
|
|
|
|
<style scoped>
|
|
|
.calendar-page {
|
|
|
min-height: 100vh;
|
|
|
background: #f8f9fa;
|
|
|
/* padding-bottom: 40rpx; */
|
|
|
}
|
|
|
.header {
|
|
|
background: #fff;
|
|
|
padding: 20rpx 30rpx 10rpx 30rpx;
|
|
|
display: flex;
|
|
|
justify-content: space-between;
|
|
|
align-items: center;
|
|
|
box-shadow: 0 2px 4px rgba(0,0,0,0.08);
|
|
|
position: sticky;
|
|
|
top: 0;
|
|
|
z-index: 100;
|
|
|
}
|
|
|
.logo-section {
|
|
|
display: flex;
|
|
|
align-items: center;
|
|
|
gap: 15rpx;
|
|
|
}
|
|
|
.logo {
|
|
|
width: 40rpx;
|
|
|
height: 40rpx;
|
|
|
background: #3498db;
|
|
|
border-radius: 8rpx;
|
|
|
}
|
|
|
.school-name {
|
|
|
font-size: 32rpx;
|
|
|
font-weight: 600;
|
|
|
color: #2c3e50;
|
|
|
margin-left: 10rpx;
|
|
|
}
|
|
|
.user-section {
|
|
|
display: flex;
|
|
|
align-items: center;
|
|
|
gap: 10rpx;
|
|
|
font-size: 28rpx;
|
|
|
}
|
|
|
.vip-badge {
|
|
|
background: linear-gradient(45deg, #FFD700, #FFA500);
|
|
|
color: white;
|
|
|
padding: 4rpx 12rpx;
|
|
|
border-radius: 4rpx;
|
|
|
font-size: 22rpx;
|
|
|
font-weight: 500;
|
|
|
margin-left: 8rpx;
|
|
|
}
|
|
|
.calendar-filters {
|
|
|
display: flex;
|
|
|
gap: 18rpx;
|
|
|
align-items: center;
|
|
|
padding: 18rpx 20rpx 0 20rpx;
|
|
|
margin-bottom:20rpx;
|
|
|
}
|
|
|
.filter-badge {
|
|
|
padding: 8rpx 22rpx;
|
|
|
border-radius: 20rpx;
|
|
|
font-size: 26rpx;
|
|
|
font-weight: 500;
|
|
|
background: #f8f9fa;
|
|
|
color: #2c3e50;
|
|
|
transition: all 0.3s;
|
|
|
}
|
|
|
.filter-badge.active {
|
|
|
background: #3498db;
|
|
|
color: #fff;
|
|
|
}
|
|
|
.calendar-container {
|
|
|
background: #fff;
|
|
|
border-radius: 18rpx;
|
|
|
box-shadow: 0 2px 8px rgba(0,0,0,0.08);
|
|
|
/* margin: 20rpx;
|
|
|
padding: 10rpx 0 20rpx 0; */
|
|
|
}
|
|
|
|
|
|
.month-events-container {
|
|
|
margin-top: 20rpx;
|
|
|
padding: 20rpx;
|
|
|
background: #fff;
|
|
|
/* border-radius: 18rpx; */
|
|
|
box-shadow: 0 2px 8px rgba(0,0,0,0.08);
|
|
|
}
|
|
|
.events-title {
|
|
|
font-size: 32rpx;
|
|
|
font-weight: 600;
|
|
|
color: #2c3e50;
|
|
|
margin-bottom: 20rpx;
|
|
|
}
|
|
|
.events-list {
|
|
|
max-height: none;
|
|
|
}
|
|
|
.events-list.no-scroll {
|
|
|
overflow: visible;
|
|
|
}
|
|
|
.event-item {
|
|
|
display: flex;
|
|
|
justify-content: space-between;
|
|
|
align-items: center;
|
|
|
padding: 20rpx 0;
|
|
|
border-bottom: 1rpx solid #f0f0f0;
|
|
|
}
|
|
|
.event-item:last-child {
|
|
|
border-bottom: none;
|
|
|
}
|
|
|
.event-item-left {
|
|
|
display: flex;
|
|
|
align-items: center;
|
|
|
gap: 20rpx;
|
|
|
}
|
|
|
.type-dot {
|
|
|
width: 16rpx;
|
|
|
height: 16rpx;
|
|
|
border-radius: 50%;
|
|
|
flex-shrink: 0;
|
|
|
}
|
|
|
.type-dot.event-1 { background: #67C23A; }
|
|
|
.type-dot.event-2 { background: #409EFF; }
|
|
|
.type-dot.event-3 { background: #E6A23C; }
|
|
|
.type-dot.event-4 { background: #F56C6C; }
|
|
|
.type-dot.event-5 { background: #909399; }
|
|
|
.event-course { background: #1565c0; }
|
|
|
.event-activity { background: #6a1b9a; }
|
|
|
.event-workshop { background: #2e7d32; }
|
|
|
|
|
|
.event-info {
|
|
|
display: flex;
|
|
|
flex-direction: column;
|
|
|
}
|
|
|
.event-title {
|
|
|
font-size: 28rpx;
|
|
|
font-weight: 500;
|
|
|
color: #333;
|
|
|
margin-bottom: 8rpx;
|
|
|
}
|
|
|
.event-meta {
|
|
|
font-size: 24rpx;
|
|
|
color: #888;
|
|
|
}
|
|
|
.empty-events {
|
|
|
text-align: center;
|
|
|
color: #999;
|
|
|
padding: 40rpx 0;
|
|
|
font-size: 28rpx;
|
|
|
}
|
|
|
|
|
|
.course-modal {
|
|
|
background: #fff;
|
|
|
border-radius: 18rpx;
|
|
|
padding: 20rpx 20rpx 10rpx 20rpx;
|
|
|
width: 100vw;
|
|
|
height:100vh;
|
|
|
overflow: scroll;
|
|
|
}
|
|
|
.modal-header {
|
|
|
border-bottom: 1rpx solid #e9ecef;
|
|
|
padding-bottom: 10rpx;
|
|
|
margin-bottom: 10rpx;
|
|
|
}
|
|
|
.modal-title {
|
|
|
font-size: 34rpx;
|
|
|
font-weight: 700;
|
|
|
color: #1565c0;
|
|
|
}
|
|
|
.modal-body {
|
|
|
padding: 0;
|
|
|
}
|
|
|
.course-info {
|
|
|
display: grid;
|
|
|
grid-template-columns: 1fr;
|
|
|
gap: 10rpx;
|
|
|
margin-bottom: 18rpx;
|
|
|
}
|
|
|
.info-item {
|
|
|
background: #f8f9fa;
|
|
|
padding: 20rpx;
|
|
|
border-radius: 8rpx;
|
|
|
}
|
|
|
.info-label {
|
|
|
font-size: 28rpx;
|
|
|
color: #6c757d;
|
|
|
margin-right:20rpx;
|
|
|
}
|
|
|
.info-value {
|
|
|
font-size: 28rpx;
|
|
|
font-weight: 500;
|
|
|
color: #2c3e50;
|
|
|
}
|
|
|
.course-description {
|
|
|
background: #f8f9fa;
|
|
|
padding: 16rpx;
|
|
|
border-radius: 8rpx;
|
|
|
margin-bottom: 12rpx;
|
|
|
}
|
|
|
.desc-title {
|
|
|
color: #1565c0;
|
|
|
font-size: 28rpx;
|
|
|
font-weight: 600;
|
|
|
margin-bottom: 6rpx;
|
|
|
display: block;
|
|
|
}
|
|
|
.desc-content {
|
|
|
color: #333;
|
|
|
font-size: 28rpx;
|
|
|
margin-top: 4rpx;
|
|
|
}
|
|
|
.vip-content {
|
|
|
/* background: linear-gradient(90deg, #fffbe6 0%, #fff3cd 100%); */
|
|
|
/* border: 1rpx solid #ffe082; */
|
|
|
}
|
|
|
.course-actions {
|
|
|
display: flex;
|
|
|
gap: 18rpx;
|
|
|
justify-content: flex-end;
|
|
|
margin-top: 10rpx;
|
|
|
}
|
|
|
@media (max-width: 768px) {
|
|
|
.course-modal { min-width: 90vw; }
|
|
|
/* .calendar-container { margin: 4rpx; } */
|
|
|
.header { padding: 8rpx 4rpx; }
|
|
|
.school-name { font-size: 28rpx; }
|
|
|
}
|
|
|
</style> |
