12 changed files with 2760 additions and 2628 deletions
@ -0,0 +1,196 @@ |
|||||
|
<template> |
||||
|
<view class="class-arrange-root"> |
||||
|
<!-- 顶部日期选择 --> |
||||
|
<view class="date-bar"> |
||||
|
<view class="date-item" v-for="(item, idx) in weekList" :key="idx" :class="{active: idx === selectedDayIndex}"> |
||||
|
<view class="week">{{ item.week }}</view> |
||||
|
<view class="day">{{ item.day }}</view> |
||||
|
</view> |
||||
|
</view> |
||||
|
<!-- "查看更多"按钮移到日期条下方 --> |
||||
|
<view class="more-bar-wrapper"> |
||||
|
<view class="more-bar" @click="openCalendar"> |
||||
|
<text>查看更多</text> |
||||
|
<uni-icons type="arrowdown" size="18" color="#bdbdbd" /> |
||||
|
</view> |
||||
|
</view> |
||||
|
<!-- 日历底部弹窗 --> |
||||
|
<uni-popup ref="calendarPopup" type="bottom"> |
||||
|
<uni-calendar @confirm="onCalendarConfirm" @close="closeCalendar" /> |
||||
|
</uni-popup> |
||||
|
|
||||
|
<!-- 课程卡片列表 --> |
||||
|
<view class="course-list"> |
||||
|
<view class="course-card" v-for="(course, idx) in courseList" :key="idx"> |
||||
|
<view class="card-header"> |
||||
|
<view class="status-end">已结束</view> |
||||
|
</view> |
||||
|
<view class="card-body"> |
||||
|
<view class="row">时间：{{ course.date }}</view> |
||||
|
<view class="row">教室：{{ course.classroom }}</view> |
||||
|
<view class="row">课程：{{ course.name }}</view> |
||||
|
<view class="row">人数：{{ course.count }}</view> |
||||
|
</view> |
||||
|
<view class="card-footer"> |
||||
|
<view class="sign-info">已签到学生 (0/{{ course.count }})</view> |
||||
|
<button class="detail-btn" @click="viewDetail(course)">详情</button> |
||||
|
</view> |
||||
|
</view> |
||||
|
</view> |
||||
|
</view> |
||||
|
</template> |
||||
|
|
||||
|
<script> |
||||
|
export default { |
||||
|
data() { |
||||
|
return { |
||||
|
weekList: [ |
||||
|
{ week: '星期一', day: 11 }, |
||||
|
{ week: '星期二', day: 12 }, |
||||
|
{ week: '星期三', day: 13 }, |
||||
|
{ week: '星期四', day: 14 }, |
||||
|
{ week: '星期五', day: 15 }, |
||||
|
{ week: '星期六', day: 16 }, |
||||
|
{ week: '星期日', day: 17 }, |
||||
|
], |
||||
|
selectedDayIndex: 4, |
||||
|
courseList: [ |
||||
|
{ |
||||
|
date: '2025-06-15', |
||||
|
classroom: '时间范围教室', |
||||
|
name: '大课7+1类型', |
||||
|
count: 10, |
||||
|
}, |
||||
|
{ |
||||
|
date: '2025-06-15', |
||||
|
classroom: '时间范围教室', |
||||
|
name: '大课5+1', |
||||
|
count: 10, |
||||
|
}, |
||||
|
], |
||||
|
}; |
||||
|
}, |
||||
|
methods: { |
||||
|
openCalendar() { |
||||
|
this.$refs.calendarPopup.open(); |
||||
|
}, |
||||
|
closeCalendar() { |
||||
|
this.$refs.calendarPopup.close(); |
||||
|
}, |
||||
|
viewDetail(course) { |
||||
|
// 跳转到课程详情页 |
||||
|
this.$navigateTo({ |
||||
|
url: '/pages/market/clue/class_arrangement_detail?date=' + course.date |
||||
|
}); |
||||
|
}, |
||||
|
onCalendarConfirm(e) { |
||||
|
this.closeCalendar(); |
||||
|
// 这里可以处理选中的日期 e.fulldate |
||||
|
uni.showToast({ title: '选择日期：' + e.fulldate, icon: 'none' }); |
||||
|
}, |
||||
|
}, |
||||
|
}; |
||||
|
</script> |
||||
|
|
||||
|
<style lang="less" scoped> |
||||
|
.class-arrange-root { |
||||
|
background: #232323; |
||||
|
min-height: 100vh; |
||||
|
padding-bottom: 30rpx; |
||||
|
} |
||||
|
.date-bar { |
||||
|
display: flex; |
||||
|
align-items: center; |
||||
|
background: #232323; |
||||
|
padding: 0 0 10rpx 0; |
||||
|
overflow-x: auto; |
||||
|
border-bottom: 1px solid #333; |
||||
|
.date-item { |
||||
|
flex: 1; |
||||
|
text-align: center; |
||||
|
color: #bdbdbd; |
||||
|
padding: 16rpx 0 0 0; |
||||
|
.week { |
||||
|
font-size: 22rpx; |
||||
|
} |
||||
|
.day { |
||||
|
font-size: 28rpx; |
||||
|
margin-top: 4rpx; |
||||
|
} |
||||
|
&.active { |
||||
|
color: #29d3b4; |
||||
|
.day { |
||||
|
border-radius: 50%; |
||||
|
background: #333; |
||||
|
color: #29d3b4; |
||||
|
padding: 2rpx 10rpx; |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
.more-bar-wrapper { |
||||
|
width: 100%; |
||||
|
display: flex; |
||||
|
justify-content: center; |
||||
|
margin: 10rpx 0 0 0; |
||||
|
} |
||||
|
.more-bar { |
||||
|
display: flex; |
||||
|
align-items: center; |
||||
|
color: #bdbdbd; |
||||
|
font-size: 22rpx; |
||||
|
cursor: pointer; |
||||
|
background: #333; |
||||
|
border-radius: 20rpx; |
||||
|
padding: 8rpx 24rpx; |
||||
|
} |
||||
|
.course-list { |
||||
|
margin-top: 20rpx; |
||||
|
.course-card { |
||||
|
background: #434544; |
||||
|
border-radius: 10rpx; |
||||
|
margin: 0 0 20rpx 0; |
||||
|
padding: 0 0 20rpx 0; |
||||
|
box-shadow: 0 2rpx 8rpx rgba(0,0,0,0.08); |
||||
|
.card-header { |
||||
|
display: flex; |
||||
|
justify-content: flex-end; |
||||
|
padding: 10rpx 20rpx 0 0; |
||||
|
.status-end { |
||||
|
background: #e95c6b; |
||||
|
color: #fff; |
||||
|
border-radius: 10rpx; |
||||
|
padding: 4rpx 18rpx; |
||||
|
font-size: 22rpx; |
||||
|
} |
||||
|
} |
||||
|
.card-body { |
||||
|
padding: 0 20rpx; |
||||
|
.row { |
||||
|
color: #fff; |
||||
|
font-size: 24rpx; |
||||
|
margin: 8rpx 0; |
||||
|
} |
||||
|
} |
||||
|
.card-footer { |
||||
|
display: flex; |
||||
|
justify-content: space-between; |
||||
|
align-items: center; |
||||
|
padding: 0 20rpx; |
||||
|
.sign-info { |
||||
|
color: #bdbdbd; |
||||
|
font-size: 22rpx; |
||||
|
} |
||||
|
.detail-btn { |
||||
|
background: transparent; |
||||
|
border: 2rpx solid #ffd86b; |
||||
|
color: #ffd86b; |
||||
|
border-radius: 8rpx; |
||||
|
padding: 6rpx 24rpx; |
||||
|
font-size: 24rpx; |
||||
|
margin-left: 10rpx; |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
</style> |
||||
@ -0,0 +1,148 @@ |
|||||
|
<template> |
||||
|
<view class="detail-root"> |
||||
|
<view class="header"> |
||||
|
<view class="title">课程安排详情</view> |
||||
|
<view class="date">日期：{{ date }}</view> |
||||
|
</view> |
||||
|
<view class="section"> |
||||
|
<view class="section-title">学员列表</view> |
||||
|
<view class="student-list"> |
||||
|
<view v-for="(stu, idx) in students" :key="idx" class="student-item"> |
||||
|
<view class="avatar">{{ stu.name.charAt(0) }}</view> |
||||
|
<view class="info"> |
||||
|
<view class="name">{{ stu.name }}</view> |
||||
|
<view class="desc">{{ stu.desc }}</view> |
||||
|
</view> |
||||
|
</view> |
||||
|
<view |
||||
|
v-for="n in emptyArray" |
||||
|
:key="n" |
||||
|
class="student-item empty" |
||||
|
@tap="addStudent" |
||||
|
:data-index="n" |
||||
|
> |
||||
|
<view class="avatar empty-avatar">+</view> |
||||
|
<view class="info"> |
||||
|
<view class="name">空位</view> |
||||
|
<view class="desc">点击添加学员</view> |
||||
|
</view> |
||||
|
</view> |
||||
|
</view> |
||||
|
</view> |
||||
|
</view> |
||||
|
</template> |
||||
|
|
||||
|
<script> |
||||
|
export default { |
||||
|
data() { |
||||
|
return { |
||||
|
date: '', |
||||
|
students: [ |
||||
|
{ name: '张三', desc: '已签到' }, |
||||
|
{ name: '李四', desc: '未签到' }, |
||||
|
], |
||||
|
maxCount: 5, |
||||
|
}; |
||||
|
}, |
||||
|
computed: { |
||||
|
emptyCount() { |
||||
|
return this.maxCount - this.students.length; |
||||
|
}, |
||||
|
emptyArray() { |
||||
|
return Array.from({length: this.emptyCount}, (v, i) => i + 1); |
||||
|
}, |
||||
|
}, |
||||
|
onLoad(query) { |
||||
|
this.date = query.date || ''; |
||||
|
}, |
||||
|
methods: { |
||||
|
addStudent(e) { |
||||
|
const n = e.currentTarget.dataset.index; |
||||
|
uni.showToast({ title: '添加学员功能待实现，空位号：' + n, icon: 'none' }); |
||||
|
}, |
||||
|
}, |
||||
|
}; |
||||
|
</script> |
||||
|
|
||||
|
<style lang="less" scoped> |
||||
|
.detail-root { |
||||
|
background: #232323; |
||||
|
min-height: 100vh; |
||||
|
padding-bottom: 30rpx; |
||||
|
} |
||||
|
.header { |
||||
|
padding: 40rpx 30rpx 20rpx 30rpx; |
||||
|
.title { |
||||
|
color: #fff; |
||||
|
font-size: 36rpx; |
||||
|
font-weight: bold; |
||||
|
} |
||||
|
.date { |
||||
|
color: #29d3b4; |
||||
|
font-size: 26rpx; |
||||
|
margin-top: 10rpx; |
||||
|
} |
||||
|
} |
||||
|
.section { |
||||
|
margin: 30rpx; |
||||
|
background: #434544; |
||||
|
border-radius: 16rpx; |
||||
|
padding: 30rpx 20rpx; |
||||
|
} |
||||
|
.section-title { |
||||
|
color: #ffd86b; |
||||
|
font-size: 28rpx; |
||||
|
margin-bottom: 20rpx; |
||||
|
} |
||||
|
.student-list { |
||||
|
display: flex; |
||||
|
flex-wrap: wrap; |
||||
|
gap: 20rpx; |
||||
|
} |
||||
|
.student-item { |
||||
|
background: #333; |
||||
|
border-radius: 12rpx; |
||||
|
display: flex; |
||||
|
align-items: center; |
||||
|
padding: 18rpx 24rpx; |
||||
|
min-width: 260rpx; |
||||
|
.avatar { |
||||
|
width: 60rpx; |
||||
|
height: 60rpx; |
||||
|
border-radius: 50%; |
||||
|
background: #29d3b4; |
||||
|
color: #fff; |
||||
|
display: flex; |
||||
|
align-items: center; |
||||
|
justify-content: center; |
||||
|
font-size: 32rpx; |
||||
|
margin-right: 18rpx; |
||||
|
} |
||||
|
.info { |
||||
|
.name { |
||||
|
color: #fff; |
||||
|
font-size: 28rpx; |
||||
|
} |
||||
|
.desc { |
||||
|
color: #bdbdbd; |
||||
|
font-size: 22rpx; |
||||
|
margin-top: 4rpx; |
||||
|
} |
||||
|
} |
||||
|
&.empty { |
||||
|
border: 2rpx dashed #ffd86b; |
||||
|
background: #232323; |
||||
|
.avatar.empty-avatar { |
||||
|
background: #ffd86b; |
||||
|
color: #232323; |
||||
|
font-size: 36rpx; |
||||
|
} |
||||
|
.info .name { |
||||
|
color: #ffd86b; |
||||
|
} |
||||
|
.info .desc { |
||||
|
color: #ffd86b; |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
</style> |
||||
File diff suppressed because it is too large
File diff suppressed because it is too large
Loading…
Reference in new issue