recycle-front/pages/subcomponent/brand.vue

<template>
  <view class="container">
    <!-- 顶部导航 -->
    <view class="nav-bar">
      <view class="back" @tap="goBack">
        <uni-icons type="left" size="20"></uni-icons>
      </view>
      <text class="title">查看品牌</text>
    </view>

    <!-- 品牌标题 -->
    <view class="brand-title">
      <text>品牌羽绒服</text>
    </view>

    <!-- 品牌列表 -->
    <view class="brand-grid">
      <view 
        class="brand-item" 
        v-for="(item, index) in brandItems" 
        :key="index"
        :class="{ active: item.selected }"
        @tap="selectItem(index)"
      >
        <image :src="item.image" mode="aspectFit"></image>
        <text class="name">{{ item.name }}</text>
        <text class="price">¥ {{ item.price }} /件</text>
      </view>
    </view>

    <!-- 底部按钮 -->
    <view class="bottom-bar">
      <button class="submit-btn" @tap="goToPickup">去预约上门取件</button>
    </view>
  </view>
</template>

<script>
import pullRefreshMixin from '@/pages/mixins/pullRefreshMixin.js'

export default {
  mixins: [pullRefreshMixin],
  data() {
    return {
      brandItems: [
        {
          name: 'MONCLER GENIUS Maya 70 By Palm A',
          image: '/static/brand/moncler.png',
          price: '3-10',
          selected: false
        },
        {
          name: '加拿大鹅 Wyndham系列羽绒服 冬季 男装',
          image: '/static/brand/canada-goose.png',
          price: '3-10',
          selected: false
        },
        {
          name: 'THE NORTH FACE 1992 Nupse 填充夹克',
          image: '/static/brand/tnf-1992.png',
          price: '3-10',
          selected: false
        },
        {
          name: 'THE NORTH FACE M\'S 1996 Novelty',
          image: '/static/brand/tnf-1996.png',
          price: '3-10',
          selected: false
        },
        {
          name: 'THE NORTH FACE 1996 系列 FW23',
          image: '/static/brand/tnf-fw23.png',
          price: '3-10',
          selected: false
        },
        {
          name: 'THE NORTH FACE 城市户外系列羽绒服',
          image: '/static/brand/tnf-urban.png',
          price: '3-10',
          selected: false
        },
        {
          name: 'THE NORTH FACE 城市户外系列羽绒服 红色',
          image: '/static/brand/tnf-red.png',
          price: '3-10',
          selected: false
        },
        {
          name: 'THE NORTH FACE 韩国男款 1996 Nov',
          image: '/static/brand/tnf-korea.png',
          price: '3-10',
          selected: false
        }
      ],
      selectedFromRecycle: []
    }
  },
  onLoad(options) {
    // 接收从recycle页面传来的已选中衣物数据
    if (options.selectedItems) {
      try {
        this.selectedFromRecycle = JSON.parse(decodeURIComponent(options.selectedItems))
        // 根据recycle页面选中的衣物，设置对应品牌衣物的选中状态
        this.syncSelectionWithRecycle()
      } catch (e) {
        console.error('解析选中衣物数据失败:', e)
      }
    }
  },
  methods: {
    async onRefresh() {
      // 模拟刷新数据
      await new Promise(resolve => setTimeout(resolve, 1000))
      uni.stopPullRefresh()
    },
    goBack() {
      uni.navigateBack()
    },
    // 同步recycle页面选中的衣物到品牌页面
    syncSelectionWithRecycle() {
      const brandSelected = this.selectedFromRecycle.find(item => item.showBrandCheck)
      if (brandSelected) {
        // 如果recycle页面选中了品牌衣物，这里默认选中第一个品牌衣物
        this.brandItems[0].selected = true
      }
    },
    selectItem(index) {
      this.brandItems[index].selected = !this.brandItems[index].selected
    },
    goToPickup() {
      // 获取所有选中的品牌衣物
      const selectedBrandItems = this.brandItems
        .filter(item => item.selected)
        .map(item => ({
          name: item.name,
          icon: item.image,
          quantity: 1,
          unitPrice: item.price.split('-')[0],
          desc: '品牌羽绒服，状态良好'
        }))

      // 将选中的衣物信息转换为字符串
      const itemsStr = encodeURIComponent(JSON.stringify([
        ...this.selectedFromRecycle,
        ...selectedBrandItems
      ]))
      
      // 跳转到预约页面
      uni.navigateTo({
        url: `/pages/component/pickup?fromRecycle=true&items=${itemsStr}`
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.container {
  min-height: 100vh;
  background: #fff;
  padding-bottom: calc(120rpx + env(safe-area-inset-bottom));
}

.nav-bar {
  display: flex;
  align-items: center;
  height: 88rpx;
  padding: 0 30rpx;
  background: #fff;

  .back {
    padding: 20rpx;
    margin-left: -20rpx;
  }

  .title {
    flex: 1;
    text-align: center;
    font-size: 34rpx;
    font-weight: 500;
  }
}

.brand-title {
  padding: 30rpx;
  font-size: 40rpx;
  font-weight: bold;
  color: #333;
}

.brand-grid {
  padding: 0 20rpx;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 20rpx;
}

.brand-item {
  background: #FFF9F2;
  border-radius: 16rpx;
  padding: 30rpx;
  display: flex;
  flex-direction: column;
  align-items: center;
  transition: all 0.3s;

  &.active {
    background: #FFE4CC;
  }

  image {
    width: 240rpx;
    height: 240rpx;
    margin-bottom: 20rpx;
  }

  .name {
    font-size: 28rpx;
    color: #333;
    text-align: center;
    margin-bottom: 10rpx;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }

  .price {
    font-size: 26rpx;
    color: #FF9500;
  }
}

.bottom-bar {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  padding: 20rpx 30rpx calc(20rpx + env(safe-area-inset-bottom));
  background: #fff;
  box-shadow: 0 -2rpx 10rpx rgba(0, 0, 0, 0.05);

  .submit-btn {
    width: 100%;
    height: 80rpx;
    background: #FFB74D;
    color: #fff;
    font-size: 28rpx;
    border-radius: 40rpx;
    display: flex;
    align-items: center;
    justify-content: center;
    border: none;

    &::after {
      border: none;
    }

    &:active {
      opacity: 0.9;
    }
  }
}
</style>