ry_app/components/BrandSelector/BrandSelector.vue

<template>
  <view class="container">
    <!-- 顶部导航栏 -->
    <view class="navbar">
      <view class="back-btn" @click="goBack">
        <text class="back-icon">←</text>
      </view>
      <view class="title">选择品牌</view>
    </view>

    <!-- 搜索框 -->
    <view class="search-box">
      <input type="text" placeholder="搜索品牌名称" class="search-input" v-model="searchKeyword" />
    </view>

    <!-- 品牌树状列表 -->
    <view class="brand-tree">
      <!-- 一级品牌项 -->
      <view v-for="(brand, index) in filteredBrandList" :key="index" class="level1-item">
        <view class="level1-header">
          <text class="expand-icon" @click="toggleExpand(index)">{{ brand.expanded ? '▼' : '▶' }}</text>
          <text class="level1-name" @click="toggleExpand(index)">{{ brand.name }}</text>
          <view class="action-buttons">
            <!-- 选择一级品牌按钮 -->
            <text class="select-btn" @click.stop="selectBrand(brand.name, brand.id, null)">选择</text>
          </view>
        </view>
        <!-- 二级子品牌容器 -->
        <view v-if="brand.expanded && brand.children && brand.children.length > 0" class="level2-container">
          <!-- 二级品牌项 -->
          <view v-for="(subBrand, subIndex) in brand.children" :key="subIndex" class="level2-item">
            <text class="level2-name">{{ subBrand.name }}</text>
            <text class="select-btn" @click.stop="selectBrand(brand.name, brand.id, subBrand.name, subBrand.id)">选择</text>
          </view>
        </view>
      </view>
    </view>

    <!-- 底部添加按钮 -->
    <view class="add-brand-btn" @click="goToAddBrand">
      <text class="add-btn-icon">+</text>
      <text>添加品牌</text>
    </view>
  </view>
</template>

<script>
import { getBrandTree } from '@/api/product'
import { getStoreId } from '@/utils/auth'

export default {
  data() {
    return {
      brandList: [],
      searchKeyword: '',
      storeId: null
    }
  },
  computed: {
    // 过滤品牌列表
    filteredBrandList() {
      if (!this.searchKeyword.trim()) {
        return this.brandList
      }
      const keyword = this.searchKeyword.toLowerCase().trim()
      return this.brandList.filter(brand => {
        // 检查一级品牌是否匹配
        const matchesLevel1 = brand.name.toLowerCase().includes(keyword)
        // 检查二级品牌是否有匹配项
        const matchesLevel2 = brand.children && brand.children.some(subBrand => subBrand.name.toLowerCase().includes(keyword))
        return matchesLevel1 || matchesLevel2
      })
    }
  },
  onLoad() {
    // 获取门店ID
    this.storeId = getStoreId()
    // 加载品牌列表
    this.loadBrandList()
  },
  methods: {
    // 加载品牌列表
    async loadBrandList() {
      try {
        const res = await getBrandTree()
        if (res.code === 200) {
          // 为每个一级品牌添加expanded属性，默认为true
          this.brandList = res.data.map(brand => ({
            ...brand,
            expanded: true,
            children: brand.children || []
          }))
        }
      } catch (error) {
        console.error('获取品牌列表失败:', error)
      }
    },
    // 切换品牌展开/收起
    toggleExpand(index) {
      this.brandList[index].expanded = !this.brandList[index].expanded
    },
    // 选择品牌
    selectBrand(brandName, brandId, subBrandName, subBrandId) {
      // 构造返回数据
      const selectedBrand = {
        brandName: subBrandName || brandName,
        brandId: subBrandId || brandId,
        parentBrandName: subBrandName ? brandName : null,
        parentBrandId: subBrandName ? brandId : null
      }
      // 返回结果给上一页
      uni.navigateBack({
        delta: 1,
        success: () => {
          // 触发品牌选择事件
          uni.$emit('brandSelected', selectedBrand)
        }
      })
    },
    // 返回上一页
    goBack() {
      uni.navigateBack({ delta: 1 })
    },
    // 跳转到添加品牌页面
    goToAddBrand() {
      uni.navigateTo({
        url: '/pages/addBrand/addBrand'
      })
    }
  }
}
</script>

<style scoped>
.container {
  background-color: #f5f5f5;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

/* 导航栏 */
.navbar {
  background-color: #e62318;
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 20rpx 30rpx;
  position: relative;
  height: 88rpx;
  box-sizing: border-box;
}

.title {
  font-size: 34rpx;
  font-weight: bold;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
}

.back-icon {
  font-size: 32rpx;
}

/* 搜索框 */
.search-box {
  background-color: #fff;
  padding: 16rpx 30rpx;
}

.search-input {
  background-color: #f5f5f5;
  border-radius: 6rpx;
  padding: 18rpx;
  font-size: 28rpx;
  width: 100%;
  box-sizing: border-box;
}

/* 品牌树 */
.brand-tree {
  flex: 1;
  padding: 20rpx 30rpx;
}

.level1-item {
  background-color: #fff;
  border-radius: 8rpx;
  margin-bottom: 20rpx;
  overflow: hidden;
}

.level1-header {
  display: flex;
  align-items: center;
  padding: 20rpx 30rpx;
  border-bottom: 1rpx solid #f0f0f0;
}

.expand-icon {
  font-size: 24rpx;
  margin-right: 15rpx;
  color: #666;
}

.level1-name {
  font-size: 28rpx;
  flex: 1;
}

.action-buttons {
  display: flex;
  gap: 16rpx;
}

.select-btn {
  background-color: #e62318;
  color: #fff;
  font-size: 24rpx;
  padding: 10rpx 20rpx;
  border-radius: 6rpx;
}

/* 二级子品牌容器 */
.level2-container {
  display: flex;
  padding: 24rpx 30rpx;
  gap: 24rpx;
  flex-wrap: wrap;
  background-color: #fff;
}

.level2-item {
  background-color: #f5f5f5;
  border-radius: 8rpx;
  width: 180rpx;
  height: 180rpx;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 16rpx;
}

.level2-name {
  font-size: 28rpx;
  color: #333;
}

/* 底部添加按钮 */
.add-brand-btn {
  background-color: #e62318;
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24rpx;
  font-size: 30rpx;
  margin: 0 30rpx 30rpx 30rpx;
  border-radius: 8rpx;
}

.add-btn-icon {
  margin-right: 8rpx;
}
</style>