nongxiaoyu/pages/service/sales.vue

<template>
  <view class="sales-container">
    <!-- 顶部Tab标签页 -->
    <view class="tab-header">
      <view class="tab-list">
        <view 
          class="tab-item"
          :class="{ active: activeTab === 'all' }"
          @click="switchTab('all')"
        >
          <text class="tab-text">全部</text>
        </view>
        <view 
          class="tab-item"
          :class="{ active: activeTab === 'sale' }"
          @click="switchTab('sale')"
        >
          <text class="tab-text">出售信息</text>
        </view>
        <view 
          class="tab-item"
          :class="{ active: activeTab === 'purchase' }"
          @click="switchTab('purchase')"
        >
          <text class="tab-text">收购信息</text>
        </view>
      </view>
      <view class="tab-indicator" :style="{ left: getIndicatorPosition() }"></view>
    </view>

    <!-- 搜索筛选 -->
    <view class="search-section">
      <view class="search-box">
        <image class="search-icon" src="/static/icons/search.png" mode="aspectFit"></image>
        <input 
          class="search-input" 
          placeholder="搜索农产品信息" 
          placeholder-style="color: #999;"
          v-model="searchKeyword"
          @confirm="handleSearch"
        />
      </view>
    </view>

    <!-- 全部农产品信息列表 -->
    <view class="content-container">
      <view class="info-list">
        <view 
          class="info-card"
          v-for="item in filteredAllInfo" 
          :key="`${item.type}_${item.id}`"
          @click="navigateToDetail(item)"
        >
          <view class="card-content">
            <!-- 封面图片 -->
            <view class="info-image">
              <image :src="item.image" mode="aspectFill"></image>
            </view>
            
            <!-- 信息内容 -->
            <view class="info-content">
              <!-- 类型标签和标题 -->
              <view class="info-header">
                <view class="type-tag" :class="item.type">
                  {{ item.type === 'sale' ? '出售' : '收购' }}
                </view>
                <view class="info-title">{{ item.title }}</view>
              </view>
              
              <!-- 简要说明 -->
              <view class="info-desc">{{ item.description }}</view>
              
              <!-- 底部信息 -->
              <view class="info-footer">
                <view class="publish-info">
                  <text class="publisher">{{ item.publisher }}</text>
                  <text class="publish-time">{{ item.publishTime }}</text>
                </view>
              </view>
            </view>
          </view>
        </view>
      </view>
    </view>

    <!-- 浮动发布按钮 -->
    <view class="floating-btn" @click="navigateToMyPublish">
      <view class="btn-icon">+</view>
      <text class="btn-text">我的发布</text>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      activeTab: 'all', // 当前活跃的标签页
      searchKeyword: '',
      
      // 全部农产品信息列表（出售+收购）
      allInfoList: [
        // 出售信息
        {
          id: 1,
          type: 'sale',
          title: '优质红薯 ¥2.5/斤',
          description: '自家种植，香甜可口，现挖现卖',
          image: '/static/images/products/corn-seeds-new.jpg',
          publisher: '李**',
          publishTime: '今天',
          price: '2.5',
          unit: '斤'
        },
        {
          id: 2,
          type: 'sale', 
          title: '有机苹果 ¥8.5/斤',
          description: '新鲜采摘，无农药残留，口感清脆',
          image: '/static/images/products/rice-seeds.jpg',
          publisher: '张**',
          publishTime: '2小时前',
          price: '8.5',
          unit: '斤'
        },
        {
          id: 3,
          type: 'sale',
          title: '土鸡蛋 ¥2.0/个',
          description: '散养土鸡，营养丰富，蛋黄金黄',
          image: '/static/images/products/seeds-packets.jpg',
          publisher: '王**',
          publishTime: '昨天',
          price: '2.0',
          unit: '个'
        },
        {
          id: 4,
          type: 'sale',
          title: '新鲜玉米 ¥3.0/斤',
          description: '当季玉米，粒粒饱满，甜度高',
          image: '/static/images/products/greenhouse-film.jpg',
          publisher: '陈**',
          publishTime: '2天前',
          price: '3.0',
          unit: '斤'
        },
        // 收购信息
        {
          id: 5,
          type: 'purchase',
          title: '高价收购优质土豆 ¥3.5/斤',
          description: '大量收购，要求新鲜无病害，长期合作',
          image: '/static/images/products/agriculture-tools.jpg',
          publisher: '刘**',
          publishTime: '今天',
          quantity: '1000斤',
          budgetPrice: '3.5',
          unit: '斤'
        },
        {
          id: 6,
          type: 'purchase',
          title: '收购新鲜玉米 ¥2.8/斤',
          description: '需求量大，价格优惠，现金结算',
          image: '/static/images/products/organic-fertilizer-new.jpg',
          publisher: '周**',
          publishTime: '5小时前',
          quantity: '5000斤',
          budgetPrice: '2.8',
          unit: '斤'
        },
        {
          id: 7,
          type: 'purchase',
          title: '收购有机蔬菜 ¥8.0/斤',
          description: '要求有机认证，品质优良，长期收购',
          image: '/static/images/products/plastic-film.jpg',
          publisher: '赵**',
          publishTime: '昨天',
          quantity: '500斤',
          budgetPrice: '8.0',
          unit: '斤'
        },
        {
          id: 8,
          type: 'sale',
          title: '优质大米 ¥6.8/斤',
          description: '当季新米，粒粒饱满，口感香甜',
          image: '/static/images/products/fertilizer.jpg',
          publisher: '孙**',
          publishTime: '3天前',
          price: '6.8',
          unit: '斤'
        }
      ]
    }
  },
  
  computed: {
    filteredAllInfo() {
      let list = this.allInfoList;
      
      // 按类型筛选
      if (this.activeTab === 'sale') {
        list = list.filter(item => item.type === 'sale');
      } else if (this.activeTab === 'purchase') {
        list = list.filter(item => item.type === 'purchase');
      }
      
      // 按搜索关键词筛选
      if (this.searchKeyword.trim()) {
        const keyword = this.searchKeyword.trim().toLowerCase();
        list = list.filter(item => 
          item.title.toLowerCase().includes(keyword) || 
          item.description.toLowerCase().includes(keyword) ||
          item.publisher.toLowerCase().includes(keyword)
        );
      }
      
      return list;
    }
  },
  
  methods: {
    // 切换Tab标签页
    switchTab(tab) {
      this.activeTab = tab;
    },
    
    // 获取指示器位置
    getIndicatorPosition() {
      const positions = {
        'all': '0%',
        'sale': '33.33%', 
        'purchase': '66.66%'
      };
      return positions[this.activeTab] || '0%';
    },
    
    // 搜索处理
    handleSearch() {
      // 搜索逻辑已在computed中处理
    },
    
    // 导航到详情页
    navigateToDetail(item) {
      uni.navigateTo({
        url: `/pages/service/sales-detail?id=${item.id}&type=${item.type}&title=${encodeURIComponent(item.title)}`
      });
    },
    
    // 导航到我的发布页面
    navigateToMyPublish() {
      uni.navigateTo({
        url: '/pages/service/my-publish'
      });
    }
  }
}
</script>

<style lang="scss">
.sales-container {
  min-height: 100vh;
  background-color: #f5f5f5;
  padding-bottom: 120rpx;
}

.tab-header {
  background-color: #fff;
  position: relative;
  border-bottom: 1rpx solid #f0f0f0;
}

.tab-list {
  display: flex;
  align-items: center;
}

.tab-item {
  flex: 1;
  text-align: center;
  padding: 32rpx 0;
  position: relative;
  
  .tab-text {
    font-size: 30rpx;
    color: #666;
    font-weight: 500;
    transition: color 0.3s ease;
  }
  
  &.active .tab-text {
    color: #4CAF50;
    font-weight: bold;
  }
}

.tab-indicator {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 33.33%;
  height: 4rpx;
  background-color: #4CAF50;
  transition: left 0.3s ease;
}



.search-section {
  background-color: #fff;
  padding: 20rpx;
  border-bottom: 1rpx solid #f0f0f0;
}

.search-box {
  flex: 1;
  display: flex;
  align-items: center;
  background-color: #f8f8f8;
  border-radius: 32rpx;
  padding: 16rpx 24rpx;
}

.search-icon {
  width: 32rpx;
  height: 32rpx;
  margin-right: 16rpx;
}

.search-input {
  flex: 1;
  font-size: 28rpx;
  line-height: 1.5;
}

.filter-btn {
  display: flex;
  align-items: center;
  padding: 16rpx 24rpx;
  background-color: #f8f8f8;
  border-radius: 24rpx;
  font-size: 28rpx;
  color: #666;
  
  .filter-icon {
    margin-left: 8rpx;
    font-size: 20rpx;
  }
}

.category-tags {
  background-color: #fff;
  border-bottom: 1rpx solid #f0f0f0;
}

.tags-scroll {
  white-space: nowrap;
}

.tags-list {
  display: inline-flex;
  padding: 0 20rpx;
}

.tag-item {
  flex-shrink: 0;
  padding: 20rpx 32rpx;
  margin-right: 8rpx;
  font-size: 28rpx;
  color: #666;
  border-radius: 32rpx;
  transition: all 0.2s ease;
  
  &.active {
    color: #4CAF50;
    background-color: #f0fdf4;
    font-weight: bold;
  }
}

// 内容容器
.content-container {
  padding: 20rpx;
}

.info-list {
  display: flex;
  flex-direction: column;
  gap: 16rpx;
}

// 统一信息卡片样式
.info-card {
  background-color: #fff;
  border-radius: 12rpx;
  overflow: hidden;
  box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.05);
  transition: transform 0.2s ease;
  
  &:active {
    transform: scale(0.98);
  }
}

.card-content {
  display: flex;
  padding: 20rpx;
  gap: 20rpx;
}

// 封面图片
.info-image {
  width: 160rpx;
  height: 160rpx;
  border-radius: 8rpx;
  overflow: hidden;
  flex-shrink: 0;
  
  image {
    width: 100%;
    height: 100%;
  }
}

// 信息内容
.info-content {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

// 信息头部
.info-header {
  display: flex;
  align-items: flex-start;
  margin-bottom: 12rpx;
  gap: 12rpx;
}

.type-tag {
  padding: 6rpx 12rpx;
  border-radius: 12rpx;
  font-size: 20rpx;
  font-weight: bold;
  flex-shrink: 0;
  
  &.sale {
    background-color: #e8f5e8;
    color: #4CAF50;
  }
  
  &.purchase {
    background-color: #e6f7ff;
    color: #1890ff;
  }
}

.info-title {
  font-size: 28rpx;
  font-weight: bold;
  color: #333;
  flex: 1;
  line-height: 1.4;
}

// 简要说明
.info-desc {
  font-size: 26rpx;
  color: #666;
  margin-bottom: 16rpx;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  line-height: 1.4;
}

// 底部信息
.info-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.publish-info {
  display: flex;
  align-items: center;
  gap: 16rpx;
}

.publisher {
  font-size: 24rpx;
  color: #4CAF50;
  font-weight: bold;
}

.publish-time {
  font-size: 24rpx;
  color: #999;
}

// 浮动发布按钮
.floating-btn {
  position: fixed;
  bottom: 120rpx;
  right: 30rpx;
  width: 140rpx;
  height: 140rpx;
  background-color: #4CAF50;
  border-radius: 70rpx;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  box-shadow: 0 8rpx 24rpx rgba(76, 175, 80, 0.3);
  z-index: 1000;
  transition: transform 0.2s ease;
  
  &:active {
    transform: scale(0.95);
  }
  
  .btn-icon {
    font-size: 56rpx;
    color: #fff;
    font-weight: 300;
    line-height: 1;
    margin-bottom: 2rpx;
  }
  
  .btn-text {
    font-size: 22rpx;
    color: #fff;
    font-weight: bold;
  }
}
</style>