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