Small_goose_Vue3/pages/discover/index.vue

<template>
  <view class="container">
    <view class="spacer"></view>
    <view class="search-bar">
      <input v-model="searchText" @confirm="onSearch" placeholder="搜索课程" />
      <text class="iconfont icon-search"></text>
    </view>
    <view class="category-tabs">
      <view
        v-for="(tab, idx) in categories"
        :key="tab.id"
        :class="['tab', idx === activeTab ? 'active' : '']"
        @click="activeTab = idx"
      >{{ tab.name }}</view>
    </view>
    
    <!-- Loading state -->
    <view v-if="loading" class="loading-container">
      <uni-load-more status="loading" />
    </view>
    
    <!-- Error state -->
 <!--   <view v-else-if="error" class="error-container">
      <text class="error-text">{{ error }}</text>
      <button class="retry-btn" @click="findAll">重试</button>
    </view> -->
    
    <!-- Content -->
    <view v-else class="course-grid">
      <view v-for="cour in courses" :key="cour.id" class="card" @click="navigateToDetail(cour.id)">
        <image :src="cour.mainImage" class="cover" mode="aspectFill" style="width: 200px;height: 200px;"/>
        <view class="content">
          <view class="title">{{ cour.name }}</view>
          <view class="desc">{{ cour.description }}</view>
          <view class="price-row">
            <text class="price">￥{{ cour.price?.toFixed(2) || '0.00' }}</text>
            <text class="sales">已售 {{ cour.sales || 0 }}</text>
          </view>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      searchText: '',
      activeTab: 0,
      categories: [],
      courses: [],
      loading: false,
      error: null,
      defaultCover: '/static/default-course.png'
    }
  },
  computed: {
    filteredCourses() {
      let list = this.courses
      if (this.activeTab !== 0) {
        list = list.filter(c => c.category === this.categories[this.activeTab])
      }
      if (this.searchText) {
        list = list.filter(c => 
          c.title.toLowerCase().includes(this.searchText.toLowerCase()) ||
          c.description.toLowerCase().includes(this.searchText.toLowerCase())
        )
      }
	  console.log(list)
      return list
    }
  },
  onLoad() {
    this.findAll();
	this.findCategory();
  },
  methods: {
    onSearch() {
      // Search is handled by computed property
    },
	async findCategory() {
	  this.loading = true
	  this.error = null
	  try {
	    const res = await uni.request({
	      url: 'http://localhost:9527/product/findCategory',
	      method: 'GET'
	    })
	    console.log(res.data)
	    if (res.statusCode === 200 ) {
	      this.categories = res.data.data
	    } else {
	      throw new Error(res.data.message || '获取数据失败')
	    }
	  } catch (err) {
	    this.error = err.message || '网络错误，请稍后重试'
	    console.error('获取课程列表失败:', err)
	  } finally {
	    this.loading = false
	  }
	},
    async findAll() {
      this.loading = true
      this.error = null
      try {
        const res = await uni.request({
          url: 'http://localhost:9527/product/findAll',
          method: 'GET'
        })
        
        if (res.statusCode === 200 ) {
			console.log(res.data.data)
          this.courses = res.data.data
        } else {
          throw new Error(res.data.message || '获取数据失败')
        }
      } catch (err) {
        this.error = err.message || '网络错误，请稍后重试'
        console.error('获取课程列表失败:', err)
      } finally {
        this.loading = false
      }
    },
    navigateToDetail(id) {
		console.log(id)
      uni.navigateTo({
        url: `/pages/course/detail?id=${id}`
      })
    }
  }
}
</script>

<style lang="scss">
.container { 
  min-height: 100vh; 
  background: linear-gradient(180deg,#eaf6ff 0%,#f7f8fa 100%); 
  padding-bottom: 120rpx; 
}

.spacer {
  height: 60rpx;
  padding-top: 40px;
}

.search-bar { 

  display: flex; 
  align-items: center; 
  background: #fff; 
  border-radius: 40rpx; 
  box-shadow: 0 2rpx 12rpx rgba(0,0,0,0.06); 
  padding: 0 32rpx; 
  margin: 0 auto 24rpx auto; 
  width: 80vw; 
  max-width: 600rpx; 
  height: 80rpx; 
}

input { 
  flex: 1; 
  border: none; 
  background: transparent; 
  font-size: 30rpx; 
  height: 80rpx; 
}

.iconfont { 
  color: #bbb; 
  font-size: 36rpx; 
  margin-left: 10rpx; 
}

.category-tabs { 
  display: flex; 
  margin: 20rpx 0 0 0; 
  background: #fff; 
  border-radius: 20rpx; 
  overflow-x: auto; 
  box-shadow: 0 2rpx 8rpx rgba(0,0,0,0.03); 
}

.tab { 
  flex: 1; 
  text-align: center; 
  padding: 20rpx 0; 
  font-size: 30rpx; 
  color: #666; 
  position: relative; 
  white-space: nowrap;
}

.tab.active { 
  color: #3498db; 
  font-weight: bold; 
}

.tab.active::after { 
  content: ''; 
  position: absolute; 
  left: 50%; 
  bottom: 0; 
  transform: translateX(-50%); 
  width: 40rpx; 
  height: 6rpx; 
  background: #3498db; 
  border-radius: 3rpx; 
}

.course-grid { 
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 32rpx;
  padding: 32rpx 24rpx 0 24rpx;
}

.card { 
  background: #fff; 
  border-radius: 20rpx; 
  box-shadow: 0 4rpx 16rpx rgba(0,0,0,0.08); 
  overflow: hidden;
  transition: transform 0.2s;
  display: flex;
  flex-direction: column;
  min-height: 380rpx;
  
  &:active {
    transform: scale(0.98);
  }
}

.cover { 
  width: 100%; 
  height: 140rpx; 
  background-color: #f5f5f5;
  border-radius: 20rpx 20rpx 0 0;
}

.content {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: 20rpx 16rpx 16rpx 16rpx;
}

.title { 
  font-size: 28rpx; 
  font-weight: 600; 
  margin-bottom: 8rpx;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.desc { 
  font-size: 24rpx; 
  color: #888; 
  margin-bottom: 12rpx;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.price-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.price { 
  color: #e74c3c; 
  font-size: 28rpx;
  font-weight: bold;
}

.sales {
  font-size: 24rpx;
  color: #999;
}

.loading-container,
.error-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 40rpx;
}

.error-text {
  color: #e74c3c;
  font-size: 28rpx;
  margin-bottom: 20rpx;
}

.retry-btn {
  background: #3498db;
  color: #fff;
  padding: 16rpx 32rpx;
  border-radius: 30rpx;
  font-size: 28rpx;
}
</style>