折叠面板实现app页面—uni组件uni-collapse

实现这个的代码：

<template>
    <view>
        <view class="" style="padding:24rpx 54rpx;background-color: white;">
            <liu-search-bar :mode="2" @confirm="confirm" @blur="blur" @input="input" borderColor="#47D3BE" color="black"
                height="60rpx" bgColor='white' placeholderColor='#47D3BE' placeholder='请输入课程名称搜索'></liu-search-bar>
        </view>

        <view style="margin-top: 30rpx;">
            <uni-collapse accordion v-model="accordionVal" @change="change">
                <uni-collapse-item v-for="(type, index) in kcType" :key="index"
                    :title="`${type.text} (${courseCount(type.value)})`">
                    <view class="px_wbox" style="">
                        <view class="content">
                            <view class="px_nbox" style="">
                                <view class="flex align-center justify-between" style="padding: 20rpx 0;"
                                    v-for="(course, courseIndex) in filteredCourses(type.value)"
                                    :key="`course-${courseIndex}`" @click="Tokcsp(course)">
                                    <view class="flex flex-direction" style="color: #999999;">
                                        <span style="margin-bottom: 10rpx;">{{ course.courseName }}</span>
                                        <span>课程截至日期：{{course.classEndTime}}</span>
                                    </view>
                                    <image class="xs_img" src="../../static/images/banner/banner02.jpg" mode=""
                                        style=""></image>
                                </view>
                            </view>
                        </view>
                    </view>
                </uni-collapse-item>
            </uni-collapse>
        </view>
    </view>
</template>


<script>
    export default {
        name: "pxpxkc",
        data() {
            return {
                accordionVal: '0',
                // 固定的课程类别
                kcType: [{
                        text: '类别一',
                        value: 'type1'
                    },
                    {
                        text: '类别二',
                        value: 'type2'
                    },
                    {
                        text: '类别三',
                        value: 'type3'
                    }
                ],
                // 固定的课程
                kcList: [
                    // 类别一的课程
                    {
                        courseName: '课程一-1',
                        classEndTime: '2024-12-31',
                        courseCategory: 'type1',
                        id: 1
                    },
                    {
                        courseName: '课程一-2',
                        classEndTime: '2024-12-31',
                        courseCategory: 'type1',
                        id: 2
                    },
                    {
                        courseName: '课程一-3',
                        classEndTime: '2024-12-31',
                        courseCategory: 'type1',
                        id: 3
                    },

                    // 类别二的课程
                    {
                        courseName: '课程二-1',
                        classEndTime: '2024-12-31',
                        courseCategory: 'type2',
                        id: 4
                    },
                    {
                        courseName: '课程二-2',
                        classEndTime: '2024-12-31',
                        courseCategory: 'type2',
                        id: 5
                    },
                    {
                        courseName: '课程二-3',
                        classEndTime: '2024-12-31',
                        courseCategory: 'type2',
                        id: 6
                    },
                    {
                        courseName: '课程二-4',
                        classEndTime: '2024-12-31',
                        courseCategory: 'type2',
                        id: 7
                    },

                    // 类别三的课程
                    {
                        courseName: '课程三-1',
                        classEndTime: '2024-12-31',
                        courseCategory: 'type3',
                        id: 8
                    },
                    {
                        courseName: '课程三-2',
                        classEndTime: '2024-12-31',
                        courseCategory: 'type3',
                        id: 9
                    },


                ],
                // 查询条件
                params: {
                    courseName: '',
                }
            };
        },
        methods: {
            // 分类课程
            filteredCourses(courseCategory) {
                return this.kcList.filter(course => course.courseCategory === courseCategory);
            },
            // 统计课程数量    
            courseCount(courseCategory) {
                return this.filteredCourses(courseCategory).length;
            },
            // 点击展开
            change(e) {
                console.log(e);
            },
            // 点击搜索或者确定
            confirm(e) {
                // 固定值，不执行任何操作
            },
            // blur事件
            blur(e) {
                // 固定值，不执行任何操作
            },
            // input事件
            input(e) {
                // 固定值，不执行任何操作
            },
            // 跳转页面
            Tokcsp(course) {
                //
                console.log('跳转页面',course.id)
                // uni.navigateTo({
                //     url: '/pages/home/pxsp?courseId=' + course.id
                // });
            }
        }
    }
</script>

<style>
    .xs_img {
        width: 46rpx;
        height: 46rpx;
    }

    .px_nbox {
        background-color: white;
        padding: 10rpx 46rpx;
        border-radius: 10rpx;
    }

    .px_wbox {
        background-color: transparent;
        background-color: #F8F8F8;
        padding: 30rpx;
    }
</style>