Small_goose_Vue3/pages/search/index.vue

<template>
  <view class="search-page">
    <view class="search-bar">
      <input v-model="searchText" placeholder="搜索课程" @confirm="onSearch" />
      <button @click="onSearch">搜索</button>
    </view>
    <view v-if="results.length" class="result-list">
      <view v-for="item in results" :key="item.id" class="result-item">
        <view class="title">{{ item.title }}</view>
        <view class="desc">{{ item.desc }}</view>
      </view>
    </view>
    <view v-else class="empty">暂无搜索结果</view>
  </view>
</template>
<script>
export default {
  data() {
    return {
      searchText: '',
      results: []
    }
  },
  methods: {
    onSearch() {
      // 模拟搜索
      if (this.searchText) {
        this.results = [
          { id: 1, title: '示例课程A', desc: '课程描述A' },
          { id: 2, title: '示例课程B', desc: '课程描述B' }
        ]
      } else {
        this.results = []
      }
    }
  }
}
</script>
<style scoped>
.search-page { padding: 40rpx; }
.search-bar { display: flex; gap: 16rpx; margin-bottom: 32rpx; }
input { flex: 1; border: 1px solid #eee; border-radius: 8rpx; padding: 16rpx; font-size: 30rpx; }
button { background: #3498db; color: #fff; border: none; border-radius: 8rpx; padding: 0 32rpx; font-size: 30rpx; }
.result-list { margin-top: 24rpx; }
.result-item { background: #f7f8fa; border-radius: 12rpx; padding: 24rpx; margin-bottom: 16rpx; }
.title { font-size: 32rpx; font-weight: 600; color: #222; }
.desc { font-size: 26rpx; color: #888; }
.empty { text-align: center; color: #bbb; font-size: 28rpx; margin-top: 80rpx; }
</style>