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.
168 lines
3.2 KiB
168 lines
3.2 KiB
<template>
|
|
<uv-popup
|
|
mode="bottom"
|
|
ref="coursePopup"
|
|
round="32rpx"
|
|
bg-color="#f8f8f8"
|
|
safeAreaInsetBottom
|
|
>
|
|
<view class="course-popup">
|
|
<view class="popup-header">
|
|
<view>
|
|
<uv-icon name="arrow-down" color="black" size="20"></uv-icon>
|
|
</view>
|
|
<view class="popup-title">课程</view>
|
|
<view class="popup-title" @click="toggleSort">
|
|
倒序
|
|
</view>
|
|
</view>
|
|
<view class="course-list">
|
|
<view
|
|
v-for="course in displayCourseList"
|
|
:key="course.id"
|
|
class="course-item"
|
|
:class="{ 'active': course.id === currentCourse }"
|
|
@click="selectCourse(course.id)"
|
|
>
|
|
<view class="course-number" :class="{ 'highlight': course.id === currentCourse }">
|
|
{{ String(course.index + 1).padStart(2, '0') }}
|
|
</view>
|
|
<view class="course-content">
|
|
<view class="course-english" :class="{ 'highlight': course.id === currentCourse }">
|
|
{{ course.english }}
|
|
</view>
|
|
<view class="course-chinese" :class="{ 'highlight': course.id === currentCourse }">
|
|
{{ course.chinese }}
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</uv-popup>
|
|
</template>
|
|
|
|
<script>
|
|
export default {
|
|
name: 'CoursePopup',
|
|
props: {
|
|
courseList: {
|
|
type: Array,
|
|
default: () => []
|
|
},
|
|
currentCourse: {
|
|
type: [String, Number],
|
|
default: 1
|
|
},
|
|
isReversed: {
|
|
type: Boolean,
|
|
default: false
|
|
}
|
|
},
|
|
computed: {
|
|
displayCourseList() {
|
|
return this.isReversed ? [...this.courseList].reverse() : this.courseList;
|
|
}
|
|
},
|
|
methods: {
|
|
open() {
|
|
if (this.$refs.coursePopup) {
|
|
this.$refs.coursePopup.open()
|
|
}
|
|
},
|
|
close() {
|
|
if (this.$refs.coursePopup) {
|
|
this.$refs.coursePopup.close()
|
|
}
|
|
},
|
|
toggleSort() {
|
|
this.$emit('toggle-sort')
|
|
},
|
|
selectCourse(courseId) {
|
|
this.$emit('select-course', courseId)
|
|
this.close()
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style lang="scss" scoped>
|
|
/* 课程弹出窗样式 */
|
|
.course-popup {
|
|
padding: 0 32rpx;
|
|
max-height: 80vh;
|
|
}
|
|
|
|
.popup-header {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
padding: 20rpx 0;
|
|
border-bottom: 2rpx solid #EEEEEE;
|
|
}
|
|
|
|
.popup-title {
|
|
font-family: PingFang SC;
|
|
font-weight: 500;
|
|
font-size: 34rpx;
|
|
color: #181818;
|
|
}
|
|
|
|
.course-list {
|
|
max-height: 60vh;
|
|
overflow-y: auto;
|
|
}
|
|
|
|
.course-item {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 24rpx;
|
|
padding-top: 24rpx;
|
|
padding-right: 8rpx;
|
|
padding-bottom: 24rpx;
|
|
padding-left: 8rpx;
|
|
border-bottom: 1px solid #EEEEEE;
|
|
cursor: pointer;
|
|
|
|
&:last-child {
|
|
border-bottom: none;
|
|
}
|
|
}
|
|
|
|
.course-number {
|
|
width: 80rpx;
|
|
font-family: PingFang SC;
|
|
font-size: 36rpx;
|
|
color: #999;
|
|
|
|
&.highlight {
|
|
color: #06DADC;
|
|
}
|
|
}
|
|
|
|
.course-content {
|
|
flex: 1;
|
|
}
|
|
|
|
.course-english {
|
|
font-family: PingFang SC;
|
|
font-weight: 600;
|
|
font-size: 36rpx;
|
|
line-height: 44rpx;
|
|
color: #252545;
|
|
margin-bottom: 8rpx;
|
|
|
|
&.highlight {
|
|
color: #06DADC;
|
|
}
|
|
}
|
|
|
|
.course-chinese {
|
|
font-size: 28rpx;
|
|
line-height: 48rpx;
|
|
color: #3B3D3D;
|
|
|
|
&.highlight {
|
|
color: #06DADC;
|
|
}
|
|
}
|
|
</style>
|