zdtap-uniapp-main/pages/activityList/hotLabel.vue

<template>
  <view class="page">
    <!-- 搜索框 -->
    <view class="search-box">
      <view class="search-input">
        <image src="/static/icons/search.png" class="search-icon" />
        <input 
          type="text" 
          v-model="searchKey" 
          placeholder="搜索品牌" 
          placeholder-class="placeholder"
          @input="handleSearch"
        />
      </view>
    </view>

    <!-- 加载状态 -->
    <view v-if="loading" class="loading-state">
      <view class="loading-skeleton" v-for="i in 5" :key="i">
        <view class="skeleton-logo"></view>
        <view class="skeleton-content">
          <view class="skeleton-title"></view>
          <view class="skeleton-subtitle"></view>
        </view>
      </view>
    </view>

    <!-- 字母索引列表 -->
    <view v-else class="index-list">
      <scroll-view 
        scroll-y 
        class="content"
        :scroll-into-view="currentLetter ? 'letter-' + currentLetter : ''"
      >
        <block v-for="(group, letter) in groupedBreweries" :key="letter">
          <view :id="'letter-' + letter" class="letter-section">
            <view class="letter-title">{{letter}}</view>
            <view 
              class="brewery-item hover-effect"
              v-for="brewery in group"
              :key="brewery.id"
              @click="navigateToBrewery(brewery)"
            >
              <image 
                :src="brewery.logo || '/static/images/default-logo.png'" 
                class="brewery-logo"
                mode="aspectFill"
                :lazy-load="true"
              />
              <view class="brewery-info">
                <text class="brewery-name text-ellipsis">{{brewery.breweryName}}</text>
                <text class="beer-count">{{brewery.beerCount || 0}}款在售</text>
              </view>
              <image 
                src="/static/icons/arrow-right.png" 
                class="arrow-icon"
              />
            </view>
          </view>
        </block>
        
        <!-- 空状态 -->
        <view v-if="Object.keys(groupedBreweries).length === 0" class="empty-state">
          <image src="/static/images/empty.png" class="empty-image" />
          <text class="empty-text">暂无相关品牌</text>
        </view>
      </scroll-view>
      
      <!-- 右侧字母导航 -->
      <view class="letter-nav">
        <view 
          v-for="letter in letters" 
          :key="letter"
          class="letter-item"
          :class="{ active: currentLetter === letter }"
          @click="scrollToLetter(letter)"
        >
          {{letter}}
        </view>
      </view>
    </view>
  </view>
</template>

<script>
  import { getBreweries, getBeerList } from '@/api/bar.js'
  
  export default {
    name: 'HotLabel',
    data() {
      return {
        // 搜索相关
        searchKey: '',
        searchTimer: null,
        
        // 数据相关
        breweries: [],
        groupedBreweries: {},
        currentLetter: '',
        letters: 'ABCDEFGHIJKLMNOPQRSTUVWXYZ'.split(''),
        
        // 加载状态
        loading: false
      }
    },
    onShow() {
      this.initData()
    },
    methods: {
      // 初始化数据
      async initData() {
        try {
          uni.showLoading({
            title: '加载中...'
          })
          const res = await getBreweries()
          console.log('获取品牌列表响应:', res)
          
          if (res && res.data) {
            this.breweries = res.data.map(item => ({
              id: item.id,
              breweryName: item.breweryName || '',
              logo: item.logo || '',
              beerCount: 0
            }))
            
            // 获取每个品牌的酒款数量
            await this.getBeerCounts()
            // 按首字母分组
            this.groupBreweries()
          } else {
            throw new Error('获取品牌列表失败')
          }
        } catch (error) {
          console.error('初始化数据失败:', error)
          uni.showToast({
            title: '加载失败，请重试',
            icon: 'none'
          })
        } finally {
          uni.hideLoading()
        }
      },
      
      // 获取每个品牌的酒款数量
      async getBeerCounts() {
        const promises = this.breweries.map(async (brewery) => {
          try {
            const res = await getBeerList({ breweryId: brewery.id })
            if (res && res.data) {
              brewery.beerCount = res.data.total || 0
            }
          } catch (error) {
            console.error(`获取品牌 ${brewery.id} 的酒款数量失败:`, error)
            brewery.beerCount = 0
          }
        })
        
        await Promise.all(promises)
      },
      
      // 按首字母分组品牌
      groupBreweries() {
        const grouped = {}
        
        this.breweries.forEach(brewery => {
          if (!brewery.breweryName) return
          
          let firstLetter = brewery.breweryName.charAt(0).toUpperCase()
          if (!/[A-Z]/.test(firstLetter)) {
            firstLetter = '#'
          }
          
          if (!grouped[firstLetter]) {
            grouped[firstLetter] = []
          }
          grouped[firstLetter].push(brewery)
        })
        
        Object.keys(grouped).forEach(letter => {
          grouped[letter].sort((a, b) => 
            a.breweryName.localeCompare(b.breweryName, 'zh')
          )
        })
        
        this.letters = [...'ABCDEFGHIJKLMNOPQRSTUVWXYZ'.split('')]
        if (grouped['#']) {
          this.letters.push('#')
        }
        
        console.log('分组后的数据:', grouped)
        this.groupedBreweries = grouped
      },
      
      // 搜索处理
      handleSearch() {
        if (this.searchTimer) {
          clearTimeout(this.searchTimer)
        }
        
        this.searchTimer = setTimeout(() => {
          const searchKey = this.searchKey.trim().toLowerCase()
          
          if (!searchKey) {
            this.groupBreweries()
            return
          }
          
          const filteredBreweries = this.breweries.filter(brewery =>
            brewery.breweryName.toLowerCase().includes(searchKey)
          )
          
          const grouped = {}
          filteredBreweries.forEach(brewery => {
            let firstLetter = brewery.breweryName.charAt(0).toUpperCase()
            if (/[\u4e00-\u9fa5]/.test(firstLetter)) {
              firstLetter = this.getFirstPinYinLetter(brewery.breweryName)
            }
            if (!/[A-Z]/.test(firstLetter)) {
              firstLetter = '#'
            }
            if (!grouped[firstLetter]) {
              grouped[firstLetter] = []
            }
            grouped[firstLetter].push(brewery)
          })
          
          this.groupedBreweries = grouped
        }, 300)
      },
      
      // 滚动到指定字母
      scrollToLetter(letter) {
        this.currentLetter = letter
      },
      
      // 导航到品牌详情
      navigateToBrewery(brewery) {
        uni.navigateTo({
          url: `/pages/activityList/styleSelection?breweryId=${brewery.id}`
        })
      },
      
      // 获取中文首字母
      getFirstPinYinLetter(str) {
        const pinyin = require('pinyin')
        if (!str) return '#'
        const firstChar = str.charAt(0)
        if (!/[\u4e00-\u9fa5]/.test(firstChar)) return firstChar.toUpperCase()
        const pinyinArr = pinyin(firstChar, {
          style: pinyin.STYLE_FIRST_LETTER,
          heteronym: false
        })
        return (pinyinArr[0] || ['#'])[0].toUpperCase()
      }
    }
  }
</script>

<style lang="scss" scoped>
.page {
  min-height: 100vh;
  background: #FFFFFF;
  padding-top: 120rpx;
  
  // 搜索框
  .search-box {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    padding: 24rpx;
    background: #FFFFFF;
    z-index: 100;
    box-shadow: 0 2rpx 10rpx rgba(0,0,0,0.05);
    
    .search-input {
      display: flex;
      align-items: center;
      height: 72rpx;
      background: #F5F5F5;
      border-radius: 36rpx;
      padding: 0 24rpx;
      
      .search-icon {
        width: 32rpx;
        height: 32rpx;
        margin-right: 16rpx;
        opacity: 0.3;
      }
      
      input {
        flex: 1;
        height: 100%;
        font-size: 28rpx;
        color: #333333;
      }
      
      .placeholder {
        color: #999999;
      }
    }
  }
  
  // 加载状态
  .loading-state {
    padding: 24rpx;
    
    .loading-skeleton {
      display: flex;
      align-items: center;
      padding: 24rpx;
      margin-bottom: 24rpx;
      background: #FFFFFF;
      border-radius: 12rpx;
      
      .skeleton-logo {
        width: 80rpx;
        height: 80rpx;
        background: #F5F5F5;
        border-radius: 12rpx;
        margin-right: 24rpx;
        animation: skeleton-loading 1.5s infinite;
      }
      
      .skeleton-content {
        flex: 1;
        
        .skeleton-title {
          width: 60%;
          height: 32rpx;
          background: #F5F5F5;
          border-radius: 4rpx;
          margin-bottom: 12rpx;
          animation: skeleton-loading 1.5s infinite;
        }
        
        .skeleton-subtitle {
          width: 40%;
          height: 24rpx;
          background: #F5F5F5;
          border-radius: 4rpx;
          animation: skeleton-loading 1.5s infinite;
        }
      }
    }
  }
  
  // 字母索引列表
  .index-list {
    display: flex;
    height: calc(100vh - 120rpx);
    
    .content {
      flex: 1;
      height: 100%;
      
      .letter-section {
        .letter-title {
          padding: 16rpx 24rpx;
          font-size: 28rpx;
          color: #999999;
          background: #F9F9F9;
        }
        
        .brewery-item {
          display: flex;
          align-items: center;
          padding: 24rpx;
          margin: 0 24rpx;
          border-bottom: 2rpx solid #F5F5F5;
          transition: all 0.3s ease;
          
          &:active {
            background: #F9F9F9;
            transform: scale(0.98);
          }
          
          .brewery-logo {
            width: 80rpx;
            height: 80rpx;
            border-radius: 12rpx;
            margin-right: 24rpx;
            background: #F5F5F5;
            box-shadow: 0 4rpx 8rpx rgba(0,0,0,0.05);
          }
          
          .brewery-info {
            flex: 1;
            
            .brewery-name {
              font-size: 28rpx;
              color: #333333;
              margin-bottom: 8rpx;
              font-weight: 500;
            }
            
            .beer-count {
              font-size: 24rpx;
              color: #999999;
            }
          }
          
          .arrow-icon {
            width: 32rpx;
            height: 32rpx;
            opacity: 0.3;
          }
        }
      }
      
      .empty-state {
        display: flex;
        flex-direction: column;
        align-items: center;
        padding: 96rpx 0;
        
        .empty-image {
          width: 240rpx;
          height: 240rpx;
          margin-bottom: 32rpx;
        }
        
        .empty-text {
          font-size: 28rpx;
          color: #999999;
        }
      }
    }
    
    // 右侧字母导航
    .letter-nav {
      display: flex;
      flex-direction: column;
      justify-content: center;
      padding: 24rpx 12rpx;
      background: #FFFFFF;
      
      .letter-item {
        width: 32rpx;
        height: 32rpx;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 24rpx;
        color: #666666;
        margin: 4rpx 0;
        border-radius: 50%;
        transition: all 0.3s ease;
        
        &.active {
          color: #FFFFFF;
          background: #D42E78;
        }
        
        &:active {
          transform: scale(0.9);
        }
      }
    }
  }
}

@keyframes skeleton-loading {
  0% {
    opacity: 0.6;
  }
  50% {
    opacity: 0.8;
  }
  100% {
    opacity: 0.6;
  }
}

// 添加按键反馈效果
.hover-effect {
  transition: all 0.2s ease;
  
  &:active {
    transform: scale(0.96);
    opacity: 0.8;
  }
}

// 文本省略
.text-ellipsis {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
</style>