qianduan1/pages/find/index.vue

<template>
    <view class="container">
        <!-- 搜索栏 -->
        <view class="search-bar">
            <image class="search-icon" src="/static/search-icon.png"></image>
            <input class="search-input" placeholder="搜索课程" v-model="searchText"></input>
        </view>
        <!-- 动态分类导航 -->
        <view class="category-nav">
            <view class="category-item" 
                :class="{active: currentCategory === item.name}" 
                v-for="item in categories" 
                :key="item.id" 
                @click="changeCategory(item.name)">
                {{item.name}}
            </view>
        </view>
        <!-- 课程列表 -->
        <view class="course-list">
            <view class="course-item" v-for="(course, index) in filteredCourses" :key="index" @click="goToCourseDetail(course)">
                <image class="course-image" :src="course.imageUrl"></image>
                <text class="course-title">{{course.title}}</text>
                <text class="course-info">{{course.description}}</text>
                <text class="course-price">¥{{course.price}}</text>
            </view>
        </view>
        <!-- 加载状态 -->
        <view class="loading" v-if="loading">
            <text>加载中...</text>
        </view>
    </view>
</template>
<script>
	export default {
	    data() {
	        return {
	            time: '18:31',
	            speed: '70.0',
	            battery: '36',
	            courses: [],
	            categories: [],
	            currentCategory: '', // 初始为空，等待数据加载
	            searchText: '',
	            loading: true
	        };
	    },
	    onLoad() {
	        this.fetchData();
	    },
	    computed: {
	        filteredCourses() {
	            if (!Array.isArray(this.courses)) {
	                return [];
	            }
	            
	            // 如果当前分类为空，显示全部课程
	            if (!this.currentCategory) {
	                return this.courses;
	            }
	            
	            return this.courses
	                .filter(course => {
	                    return course.category === this.currentCategory;
	                })
	                .filter(course => {
	                    return course.title.toLowerCase().includes(this.searchText.toLowerCase());
	                });
	        }
	    },
	    methods: {
	        async fetchData() {
	            try {
	                // 并行请求分类和课程数据
	                const [categoriesRes, coursesRes] = await Promise.all([
	                    uni.request({ url: 'http://localhost:8080/categories', method: 'GET' }),
	                    uni.request({ url: 'http://localhost:8080/courses', method: 'GET' })
	                ]);
	                
	                if (categoriesRes.statusCode === 200 && coursesRes.statusCode === 200) {
	                    this.categories = categoriesRes.data || [];
	                    this.courses = coursesRes.data || [];
	                    
	                    // 如果有分类数据，设置第一个分类为当前选中
	                    if (this.categories.length > 0) {
	                        this.currentCategory = this.categories[0].name;
	                    }
	                }
	            } catch (error) {
	                console.error('获取数据失败:', error);
	                uni.showToast({
	                    title: '加载失败，请重试',
	                    icon: 'none'
	                });
	            } finally {
	                this.loading = false;
	            }
	        },
	        changeCategory(category) {
	            this.currentCategory = category;
	        },
	        goToCourseDetail(course) {
	            uni.navigateTo({
	                url: `/pages/course-detail/index?id=${course.id}`
	            });
	        },
	        goToPage(page) {
	            uni.navigateTo({
	                url: `/${page}`
	            });
	        }
	    }
	};
</script>
<style>
	.loading {
	    display: flex;
	    justify-content: center;
	    align-items: center;
	    height: 100rpx;
	    font-size: 32rpx;
	    color: #999;
	}
	.search-bar {
	    display: flex;
	    align-items: center;
	    padding: 20rpx;
	    background-color: #ebf4ff;
	}
	.search-icon {
	    width: 30rpx; /* 原尺寸为40rpx，现减小为30rpx */
	    height: 30rpx; /* 原尺寸为40rpx，现减小为30rpx */
	    margin-right: 10rpx;
	}
	.search-input {
	    flex: 1;
	    height: 60rpx;
	    border: none;
	    border-radius: 30rpx;
	    padding: 0 20rpx;
	    font-size: 30rpx;
	}
</style>