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"
        @clear="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.title }}
          </view>
        </view>
      </scroll-view>
    </view>
    
    <!-- 搜索结果列表 -->
    <view class="search-results">
      <view 
        v-for="(book, index) in list" 
        :key="index"
        class="book-item"
        @click="goToDetail(book)"
      >
        <view class="book-cover">
          <image :src="book.booksImg" mode="aspectFill"></image>
        </view>
        <view class="book-info">
          <view class="book-title">{{ book.booksName }}</view>
          <view class="book-author">{{ book.booksAuthor }}</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.vipInfo.title]">
              {{ book.vipInfo.title }}
            </view>
          </view>
        </view>
      </view>
      <uv-loading-icon text="加载中" textSize="30rpx" v-if="isLoading"  ></uv-loading-icon>
      <uv-empty v-else-if="list.length === 0" ></uv-empty>
    </view>
  </view>
</template>

<script>

import MixinList from '@/mixins/list.js'
export default {
  mixins: [MixinList],
  data() {
    return {
      mixinListApi: 'book.list',
      // 自定义onShow
      mixinListConfig: {
        customOnShow: true,
      },
      searchKeyword: '',
      label : '',
      currentTab: 0,
      categoryTabs: [ ],
      // 类型引射表
      classMap: {
        '盛放会员': '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: {
    mixinSetParams(){
      const params = {
        category: this.categoryTabs[this.currentTab].id,
      }
      if(this.label){
        params.label = this.label
      }
      if(this.searchKeyword){
        params.title = this.searchKeyword
      }
      return params
    },
    handleSearch() {
      console.log('搜索:', this.searchKeyword)
      this.list = []
      this.initPage()
      this.getList(true)
      // 这里添加搜索逻辑
    },

    switchTab(index) {
      this.currentTab = index
      console.log('切换分类:', this.categoryTabs[index])
      this.list = []
      this.initPage()
      this.getList(true)
      // 这里添加分类切换逻辑
    },
    goToDetail(book) {
      uni.navigateTo({
        url: '/subPages/home/directory?id=' + book.id
      })
    },
    // 获取书籍分类
    async getCategory() {
      const categoryRes = await this.$api.book.category()
      if (categoryRes.code === 200){
        this.categoryTabs = categoryRes.result.map(item => ({
            title:item.title,
            id: item.id
        }))
      }
    },
  },
  onLoad(options) {
    if (options.label){
      this.label = options.label
    }
  },
  async onShow() {
    await this.getCategory()
    this.getList()
  }
}
</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>