englishread-front/subPages/home/directory.vue

<template>
    <view class="directory-container">
        <view class="book-container">
            <view class="book-info">
                <view class="book-cover">
                    <image :src="bookInfo.booksImg" mode="aspectFill" :style="{ width: '100%', height: '100%' }"></image>
                </view>
                <view class="book-details">
                    <view class="book-title">{{ bookInfo.translate }}</view>
                    <view class="book-subtitle">{{ bookInfo.booksName }}</view>
                    <view class="book-author">{{ bookInfo.booksAuthor }}</view>
                    <view class="book-level" :class="classMap[bookInfo.vipInfo.title]">{{ bookInfo.vipInfo.title }}
                    </view>
                </view>
            </view>
            <view class="book-knowledge">
                <view class="book-knowledge-title" v-if="bookInfo.vocabularyRange">
                    <text>
                        适合词汇量
                    </text>
                    <text class="book-knowledge-vocabulary">
                        {{ bookInfo.vocabularyRange }}
                    </text>
                </view>
                <view class="border" />
                <view class="book-knowledge-detail" v-if="bookInfo.knowledgePoints">
                    <view class="book-knowledge-detail-title">
                        知识收获
                    </view>
                    <uv-parse :content="bookInfo.knowledgePoints"></uv-parse>
                </view>
            </view>
        </view>

        <!-- 课程和简介容器 -->
        <view class="content-container">
            <!-- 课程部分 -->
            <view class="course-section">
                <view class="course-header">
                    <view class="course-title">课程</view>
                </view>
                <view class="course-list">
                    <!-- 限制在做多五個課程 -->
                    <view v-for="(course, index) in computedList" :key="index" class="course-item"
                        @click="startLearning(course.id)">
                        <view class="course-number">{{ String(index + 1).padStart(2, '0') }}</view>
                        <view class="course-content">
                            <view class="course-name">{{ course.english }}</view>
                            <view class="course-subtitle">{{ course.chinese }}</view>
                        </view>
                    </view>
                </view>
                <view class="course-footer">
                    <view class="course-total" @click="showAllCoursePopup">全部课程 · {{ courseList.total }}节</view>
                    <uv-icon name="arrow-right" size="24rpx" color="#999"></uv-icon>
                </view>
            </view>

            <!-- 简介部分 -->
            <view class="intro-section">
                <view class="intro-title">简介</view>
                <uv-parse :content="bookInfo.booksIntro" class="intro-content"></uv-parse>
            </view>

            <!-- 作者部分 -->
            <view class="author-section">
                <view class="author-title">作者</view>
                <view class="author-info">
                    <view class="author-avatar">
                        <image :src="bookInfo.aouthorImg" mode="aspectFill"></image>
                        <view>
                            <view class="author-name">{{ bookInfo.enAuthor }}</view>
                            <view class="author-subtitle">{{ bookInfo.booksAuthor }}</view>
                        </view>
                    </view>
                    <view class="author-details">
                        <view class="author-description">
                            {{ bookInfo.aouthorIntro }}
                        </view>
                    </view>
                </view>
            </view>
        </view>

        <!-- 底部固定操作栏 -->
        <view class="bottom-action-bar">
            <view class="bottom-action-container">
                <view class="action-button secondary" @click="joinCourse">
                    <image src="/static/course-icon.png" class="button-icon" mode="aspectFill"></image>
                    <text>加入课程</text>
                </view>
                <view class="action-button primary" @click="startLearning(courseList.records[0].id)">
                    <image src="/static/content-icon.png" class="button-icon"></image>
                    <text>内容朗读</text>
                </view>
                <uv-button @click="startLearning(courseList.records[0].id)" type="primary" :custom-style="{
                    width: '400rpx',
                    height: '80rpx',
                    borderRadius: '198rpx',
                    background: '#06DADC',
                    fontSize: '28rpx',
                    fontWeight: '600',
                }">开始学习</uv-button>
            </view>
            <uv-safe-bottom></uv-safe-bottom>
        </view>

        <!-- 全部課程彈出窗 -->
        <uv-popup mode="bottom" ref="allCoursePopup" round="32rpx" bg-color="#f8f8f8">
            <view class="course-popup">
                <view class="popup-header">
                    <view @click="closeAllCoursePopup">
                        <uv-icon name="arrow-down" color="black" size="20"></uv-icon>
                    </view>
                    <view class="popup-title">全部课程</view>
                    <view class="popup-title" @click="toggleCourseSort">
                        倒序
                    </view>
                </view>
                <view class="course-list">
                    <view v-for="(course, index) in displayAllCourseList" :key="course.id" class="course-item"
                        @click="startLearning(course.id)">
                        <view class="course-number">{{ String(course.index || index + 1).padStart(2, '0') }}</view>
                        <view class="course-content">
                            <view class="course-english">{{ course.english }}</view>
                            <view class="course-chinese">{{ course.chinese }}</view>
                        </view>
                    </view>
                </view>
            </view>
        </uv-popup>

    </view>
</template>

<script>
export default {
    data() {
        return {
            classMap: {
                '朵蕾会员': 'book-level-1',
                '萌芽会员': 'book-level-2',
                '盛放会员': 'book-level-3',
            },
            bookInfo: {

            },
            id: '',
            courseList: [

            ],
            allCourseList: [], // 全部課程列表
            isCourseSortReversed: false, // 課程排序是否倒序
        }
    },
    computed: {
        // 顯示的全部課程列表（支持倒序）
        displayAllCourseList() {
            const list = this.allCourseList.length > 0 ? this.allCourseList : this.courseList.records || [];
            return this.isCourseSortReversed ? [...list].reverse() : list;
        },
        computedList() {
            return this.courseList.records?.slice(0, 5) || []
        }
    },
    methods: {
        goBack() {
            uni.navigateBack()
        },
        // 加入课程
        async joinCourse() {
            const joinRes = await this.$api.book.addStand({
                id: this.id
            })
            if (joinRes.code === 200) {
                uni.showToast({
                    title: '加入成功',
                    icon: 'success',
                    duration: 2000
                })
            }
        },
        // 开始学习
        startLearning(id) {
            // 默认学第一堂课
            uni.navigateTo({
                url: '/subPages/home/book?courseId=' + id + '&bookId=' + this.id + '&memberId=' + this.bookInfo.vip
            })
        },

        scroll() {
            console.log('被点击了');

            this.$scrollTo('testRef')
        },
        // 获取书籍详情
        async getDetail() {
            const detailRes = await this.$api.book.detail({
                id: this.id
            })
            if (detailRes.code === 200) {
                this.bookInfo = detailRes.result
            }
        },
        // 获取书籍的课程
        async getCourse() {
            const courseRes = await this.$api.book.course({
                id: this.id,
                pageNo: 1,
                pageSize: 999
            })
            if (courseRes.code === 200) {
                this.courseList = courseRes.result
                // 同時設置全部課程列表
                this.allCourseList = courseRes.result.records || []
            }
        },

        // 顯示全部課程彈出窗
        showAllCoursePopup() {
            this.$refs.allCoursePopup.open()
        },

        // 關閉全部課程彈出窗
        closeAllCoursePopup() {
            this.$refs.allCoursePopup.close()
        },

        // 切換課程排序
        toggleCourseSort() {
            this.isCourseSortReversed = !this.isCourseSortReversed
        }
    },
    onLoad(options) {
        if (options.id) {
            this.id = options.id
            Promise.all([
                this.getDetail(),
                this.getCourse()
            ])
        }
    }
}
</script>

<style scoped lang="scss">
.directory-container {
    min-height: 100vh;
    background-color: #264C8F;


}

.book-container {
    // position: sticky;
    // left: 0;
    // right: 0;
    // top: 0;
    padding: 30rpx;
    // z-index: 1;
}

.book-info {
    display: flex;
    align-items: start;

    gap: 32rpx;

    .book-cover {
        width: 208rpx;
        height: 292rpx;
        border-radius: 16rpx;
    }

    .book-details {
        color: white;
        display: flex;
        flex-direction: column;
        gap: 16rpx;

        .book-title {
            font-weight: 500;
            font-size: 40rpx;
        }

        .book-subtitle {
            font-weight: 500;
            font-size: 30rpx;
        }

        .book-author {
            font-size: 24rpx;
        }

        .book-level {
            font-size: 24rpx;
            width: 124rpx;
            height: 38rpx;
            border-radius: 8rpx;
            text-align: center;
            line-height: 38rpx;
            color: #080D21;
            background: #E9F1FF;
            border: 2rpx solid #C4DAFF
        }

        .book-level-1 {
            background: #E9F1FF;
            border: 2rpx solid #C4DAFF
        }

        .book-level-2 {
            background: #FFE9E9;
            border: 2rpx solid #FFDBC4
        }

        .book-level-3 {
            background: #FFF4E9;
            border: 2rpx solid #FFE2C4
        }
    }
}

.book-knowledge {
    box-shadow: 0px 1px 5px 0px #103577;
    background: #234684;
    color: #fff;
    margin-top: 32rpx;
    border: 2rpx solid #FFFFFF3B;
    border-radius: 32rpx;
    padding-top: 32rpx;
    padding-right: 40rpx;
    padding-bottom: 32rpx;
    padding-left: 40rpx;
    gap: 24rpx;
    display: flex;
    flex-direction: column;
    gap: 22rpx;

    .book-knowledge-title {
        font-size: 32rpx;
        font-weight: 600;
        display: flex;
        justify-content: space-between;

        .book-knowledge-vocabulary {
            font-size: 40rpx;
            color: #06DADC;
        }
    }

    .border {
        width: 100%;
        border: 2rpx solid;
        border-image-source: linear-gradient(90deg, rgba(233, 181, 123, 0) 0%, rgba(255, 255, 255, 0.79) 50.48%, rgba(233, 181, 123, 0) 100%);
        border-image-slice: 1;
    }

    .book-knowledge-detail-title {
        font-size: 32rpx;
        font-weight: 600;
        margin-bottom: 16rpx;
    }

}

/* 课程和简介容器 */
.content-container {
    padding: 40rpx 32rpx 240rpx;
    border-radius: 40rpx 40rpx 0 0;
    overflow: hidden;
    background: #fff;
    display: flex;
    gap: 24rpx;
    flex-direction: column;
    position: relative;

}

/* 课程部分 */
.course-section {
    background: #F8F8F8;
    border-radius: 32rpx;
    border-radius: 32rpx;
    padding-top: 36rpx;
    padding-right: 32rpx;
    padding-bottom: 36rpx;
    padding-left: 32rpx;
    gap: 36rpx;
    display: flex;
    flex-direction: column;
}



.course-title {
    font-size: 32rpx;
    font-weight: 600;
    color: #3B3D3D;
}

.course-list {
    // margin-bottom: 32rpx;
    display: flex;
    flex-direction: column;
    gap: 24rpx;
}

.course-item {
    display: flex;
    align-items: center;
    // background: red;
    border-bottom: 2rpx solid #EEEEEE;
    padding-bottom: 20rpx;
    gap: 36rpx;
}

.course-item:last-child {
    border-bottom: none;
}

.course-number {
    font-size: 36rpx;
    color: #999;


}

.course-content {
    flex: 1;
}

.course-name {
    font-size: 32rpx;
    font-weight: 600;
    color: #3B3D3D;
    margin-bottom: 8rpx;
}

.course-subtitle {
    font-size: 28rpx;
    color: #3B3D3D;
}

.course-footer {
    display: flex;
    align-items: center;
    // justify-content: space-between;
}

.course-total {
    font-size: 24rpx;
    color: #999;
    cursor: pointer;
}

/* 课程弹出窗样式 */
.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 // margin-bottom: 40rpx;
    }

    .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-weight: 400;
        font-size: 36rpx;
        color: #999;

        &.highlight {
            color: $primary-color;
        }

        // margin-right: 24rpx;
    }

    .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: $primary-color;
        }
    }

    .course-chinese {
        font-size: 28rpx;
        line-height: 48rpx;
        color: #3B3D3D;

        &.highlight {
            color: $primary-color;
        }
    }
}

/* 简介部分 */
.intro-section {
    background: #F8F8F8;

    border-radius: 32rpx;
    padding: 32rpx;

}

.intro-title {
    font-size: 32rpx;
    font-weight: 600;
    color: #3B3D3D;
    margin-bottom: 24rpx;
}

.intro-content {
    font-size: 28rpx;
    line-height: 48rpx;
    color: #4F4F4F;
}

/* 作者部分 */
.author-section {
    background: #F8F8F8;
    border-radius: 32rpx;
    padding: 32rpx;

    .author-title {
        font-size: 32rpx;
        font-weight: 600;
        color: #3B3D3D;
        margin-bottom: 24rpx;
    }

    .author-info {
        display: flex;
        gap: 24rpx;
        align-items: flex-start;
        flex-direction: column;

        .author-avatar {

            display: flex;

            align-items: center;
            gap: 16rpx;

            image {
                width: 80rpx;
                height: 80rpx;
                border-radius: 50%;
                overflow: hidden;
                flex-shrink: 0;

            }

            .author-name {
                font-size: 36rpx;
                font-weight: 600;
                color: #252545;
                margin-bottom: 12rpx;
            }

            .author-subtitle {
                font-size: 28rpx;
                color: #3B3D3D;
                // margin-bottom: 16rpx;
            }

        }

        .author-details {
            flex: 1;


            .author-description {
                font-size: 28rpx;
                line-height: 48rpx;
                color: #4F4F4F;
            }
        }
    }
}

/* 底部固定操作栏 */
.bottom-action-bar {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    background: #fff;
    padding: 24rpx 32rpx 0;
    box-shadow: 0rpx -2rpx 0rpx 0rpx #0000001A;
    z-index: 99;

    .bottom-action-container {
        display: flex;
        align-items: center;
        gap: 20rpx;

        .action-button {
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            padding: 16rpx 0rpx;
            border-radius: 16rpx;
            min-width: 120rpx;
            gap: 8rpx;

            .button-icon {
                width: 44rpx;
                height: 44rpx;
            }

            text {
                font-size: 24rpx;
                color: #999999;
            }

        }

    }
}
</style>