You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
148 lines
3.0 KiB
148 lines
3.0 KiB
<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>
|