englishread-front/subPages/home/search.vue

<template>
  <view class="search-container">
    <!-- 状态栏安全区域 -->
    <uv-status-bar></uv-status-bar>
    
    <!-- 顶部搜索栏 -->
    <view class="search-header">
      <uv-search 
        v-model="searchKeyword"
        placeholder="请输入内容"
        :show-action="true"
        action-text="搜索"
        :action-style="{
          color: '#fff',
          backgroundColor: '#FFA500',
          borderRadius: '198rpx',
          width: '100rpx',
          height: '64rpx',
          textAlign: 'center',
          fontSize: '26rpx',
          lineHeight: '64rpx',
        }"
        :customStyle="{
          width: '500rpx',
        }"
        @search="handleSearch"
        @custom="handleSearch"
      ></uv-search>
    </view>
    
    <!-- 分类标签栏 -->
    <view class="category-tabs">
      <scroll-view scroll-x class="tab-scroll">
        <view class="tab-list">
          <view 
            v-for="(tab, index) in categoryTabs" 
            :key="index"
            class="tab-item"
            :class="{ active: currentTab === index }"
            @click="switchTab(index)"
          >
            {{ tab }}
          </view>
        </view>
      </scroll-view>
    </view>
    
    <!-- 搜索结果列表 -->
    <view class="search-results">
      <view 
        v-for="(book, index) in bookList" 
        :key="index"
        class="book-item"
        @click="goToDetail(book)"
      >
        <view class="book-cover">
          <image :src="book.cover" mode="aspectFill"></image>
        </view>
        <view class="book-info">
          <view class="book-title">{{ book.title }}</view>
          <view class="book-author">{{ book.author }}</view>
          <view class="book-meta">
            <view class="book-duration">
              <image src="/static/播放图标.png" mode="aspectFill" class="book-icon"></image>
              <text>{{ book.duration }}</text>
            </view>
            <view class="book-membership"  :class="classMap[book.membershipType]">
              {{ book.membership }}
            </view>
          </view>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      searchKeyword: '短文',
      currentTab: 0,
      categoryTabs: ['为你推荐', '精选', '短文', '专栏', '初中', '四六级'],
      // 类型引射表
      classMap: {
        premium: 'book-membership-premium',
        vip: 'book-membership-vip',
        basic: 'book-membership-basic',
      },
      bookList: [
        {
          cover: '/static/主页图标.png',
          title: '短文全脑孩子：12项革命性策略...',
          author: 'Daniel J. Siegel / Tina Payne Bryson / Del...',
          duration: '03:24',
          membership: '蕾朵会员',
          membershipType: 'premium'
        },
        {
          cover: '/static/默认图片.png',
          title: '精讲短文',
          author: 'Daniel J. Siegel / Tina Payne Bryson / Del...',
          duration: '03:24',
          membership: '盛放会员',
          membershipType: 'vip'
        },
        {
          cover: '/static/默认图片.png',
          title: '精讲短文',
          author: 'Daniel J. Siegel / Tina Payne Bryson / Del...',
          duration: '03:24',
          membership: '蕾朵会员',
          membershipType: 'premium'
        },
        {
          cover: '/static/默认图片.png',
          title: '精讲短文',
          author: 'Daniel J. Siegel / Tina Payne Bryson / Del...',
          duration: '03:24',
          membership: '盛放会员',
          membershipType: 'vip'
        },
        {
          cover: '/static/默认图片.png',
          title: '精讲短文',
          author: 'Daniel J. Siegel / Tina Payne Bryson / Del...',
          duration: '03:24',
          membership: '萌芽会员',
          membershipType: 'basic'
        },
        {
          cover: '/static/默认图片.png',
          title: '精讲短文',
          author: 'Daniel J. Siegel / Tina Payne Bryson / Del...',
          duration: '03:24',
          membership: '萌芽会员',
          membershipType: 'basic'
        },
        {
          cover: '/static/默认图片.png',
          title: '精讲短文',
          author: 'Daniel J. Siegel / Tina Payne Bryson / Del...',
          duration: '03:24',
          membership: '萌芽会员',
          membershipType: 'basic'
        },
        {
          cover: '/static/默认图片.png',
          title: '精讲短文',
          author: 'Daniel J. Siegel / Tina Payne Bryson / Del...',
          duration: '03:24',
          membership: '萌芽会员',
          membershipType: 'basic'
        },
      ]
    }
  },
  methods: {
    handleSearch() {
      console.log('搜索:', this.searchKeyword)
      // 这里添加搜索逻辑
    },
    switchTab(index) {
      this.currentTab = index
      console.log('切换分类:', this.categoryTabs[index])
      // 这里添加分类切换逻辑
    },
    goToDetail(book) {
      console.log('查看详情:', book)
      // 这里添加跳转详情页逻辑
    }
  }
}
</script>

<style scoped lang="scss">
.search-container {
  background: #fff;
  min-height: 100vh;
}

.search-header {
  padding: 10rpx 32rpx  20rpx;
  background: #fff;
}

.category-tabs {
  background: #fff;
  // border-bottom: 1rpx solid #f0f0f0;
  
  .tab-scroll {
    white-space: nowrap;
  }
  
  .tab-list {
    display: flex;
    padding: 0 32rpx;
  }
  
  .tab-item {
    flex-shrink: 0;
    padding: 24rpx 22rpx;
    font-size: 32rpx;
    color: $secondary-text-color;
    position: relative;
    
    &.active {
      color: $primary-text-color;
      font-weight: 600;
      
      &::after {
        content: '';
        position: absolute;
        bottom: 0;
        left: 50%;
        transform: translateX(-50%);
        width: 22rpx;
        height: 4rpx;
        background: $primary-text-color;
        border-radius: 2rpx;
      }
    }
  }
}

.search-results {
  padding: 32rpx;
  display: flex;
  flex-direction: column;
  gap: 32rpx;
}

.book-item {
  display: flex;
  align-items: center;
  // border-bottom: 1rpx solid #f5f5f5;
  background: #F8F8F8;
  // width: 686rpx;
  height: 212rpx;
  gap: 16rpx;
  border-radius: 16rpx;
  padding: 0rpx 16rpx;

  &:last-child {
    border-bottom: none;
  }
  
  .book-cover {
    width: 136rpx;
    height: 180rpx;
    border-radius: 16rpx;
    overflow: hidden;
    margin-right: 16rpx;
    
    image {
      width: 100%;
      height: 100%;
    }
  }
  
  .book-info {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
  }
  
  .book-title {
    font-size: 32rpx;
    font-weight: 600;
    color: $primary-text-color;
    line-height: 48rpx;
    letter-spacing: 0;
    margin-bottom: 12rpx;
    overflow: hidden;
    
    text-overflow: ellipsis;
  }
  
  .book-author {
    font-size: 24rpx;
    color: $secondary-text-color;
    margin-bottom: 16rpx;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  
  .book-meta {
    display: flex;
    align-items: center;
    justify-content: space-between;
  }
  
  .book-duration {
    display: flex;
    align-items: center;
    font-size: 22rpx;
    color: #999;
    .book-icon{
      width: 18rpx;
      height: 18rpx;
    }
    text {
      margin-left: 8rpx;
    }
  }
  
  .book-membership {
    padding: 8rpx 16rpx;
    border-radius: 8rpx;
    font-size: 24rpx;
    color: #211508;
  }
}

.book-membership-premium {
  background: #E9F1FF;
  border: 2rpx solid #C4DAFF
}

.book-membership-vip {
  background: #FFF4E9;
  border: 2rpx solid #FFE2C4
}

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

</style>