MOSE-Official-Website-20250712/pages/components/shop/ShopContent.vue

<template>
  <view class="shop-content">
    <!-- 搜索框 -->
    <view class="search-container">
      <uv-search 
        v-model="searchValue"
        placeholder="搜索商品名"
        :show-action="false"
        bg-color="#f3f7f8"
        inputAlign="center"
        height="40"
        margin="10rpx"
        @search="onSearch"
      ></uv-search>
    </view>
    
    <!-- Tab栏 -->
    <view class="tab-container">
      <uv-tabs 
        :list="tabList" 
        :current="currentTab"
        @change="onTabChange"
        active-color="#218CDD"
        inactive-color="#999"
        line-color="#218CDD"
        :line-width="40"
        :line-height="4"
        font-size="26"
        height="80"
      ></uv-tabs>
    </view>
    
    <!-- 商品列表 -->
    <view class="goods-container">
      <view class="goods-grid">
        <view 
          class="goods-item" 
          v-for="(item, index) in filteredGoodsList" 
          :key="index"
          @click="onGoodsClick(item)"
        >
          <view class="goods-image">
            <image :src="item.image" mode="aspectFit" class="image"></image>
          </view>
          
          <view class="goods-info">
            <text class="goods-name">{{ item.name }}</text>
            
            <view class="goods-bottom">
              <view class="points-info">
                <image src="/static/积分图标.png" class="points-icon" mode="aspectFit"></image>
                <text class="points-text">{{ item.points }}积分</text>
              </view>
              
              <uv-button 
                type="primary" 
                size="mini"
                text="立即兑换"
                :custom-style="buttonStyle"
                @click.stop="onExchange(item)"
              ></uv-button>
            </view>
          </view>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  name: 'ShopContent',
  data() {
    return {
      searchValue: '',
      currentTab: 0,
      tabList: [
        { name: '全部' },
        { name: '积分兑换' },
        { name: '兑换量' },
        { name: '女装' },
        { name: '母婴' },
        { name: '水果' },
        { name: '竹制品' }
      ],
      goodsList: [
        {
          id: 1,
          name: '薄脆可口数字小饼干蘑菇饼干',
          points: 100,
          image: '/static/商城_商品1.png',
          category: '积分兑换',
          exchangeCount: 120
        },
        {
          id: 2,
          name: '幼儿园宝宝启蒙书',
          points: 145,
          image: '/static/商城_商品2.png',
          category: '母婴',
          exchangeCount: 85
        },
        {
          id: 3,
          name: '薄脆可口数字小饼干蘑菇饼干',
          points: 100,
          image: '/static/商城_商品1.png',
          category: '积分兑换',
          exchangeCount: 95
        },
        {
          id: 4,
          name: '幼儿园宝宝启蒙书',
          points: 145,
          image: '/static/商城_商品2.png',
          category: '母婴',
          exchangeCount: 67
        },
        {
          id: 1,
          name: '薄脆可口数字小饼干蘑菇饼干',
          points: 100,
          image: '/static/商城_商品1.png',
          category: '积分兑换',
          exchangeCount: 120
        },
        {
          id: 2,
          name: '幼儿园宝宝启蒙书',
          points: 145,
          image: '/static/商城_商品2.png',
          category: '母婴',
          exchangeCount: 85
        },
        {
          id: 3,
          name: '薄脆可口数字小饼干蘑菇饼干',
          points: 100,
          image: '/static/商城_商品1.png',
          category: '积分兑换',
          exchangeCount: 95
        },
        {
          id: 4,
          name: '幼儿园宝宝启蒙书',
          points: 145,
          image: '/static/商城_商品2.png',
          category: '母婴',
          exchangeCount: 67
        },
        {
          id: 1,
          name: '薄脆可口数字小饼干蘑菇饼干',
          points: 100,
          image: '/static/商城_商品1.png',
          category: '积分兑换',
          exchangeCount: 120
        },
        {
          id: 2,
          name: '幼儿园宝宝启蒙书',
          points: 145,
          image: '/static/商城_商品2.png',
          category: '母婴',
          exchangeCount: 85
        },
        {
          id: 3,
          name: '薄脆可口数字小饼干蘑菇饼干',
          points: 100,
          image: '/static/商城_商品1.png',
          category: '积分兑换',
          exchangeCount: 95
        },
        {
          id: 4,
          name: '幼儿园宝宝启蒙书',
          points: 145,
          image: '/static/商城_商品2.png',
          category: '母婴',
          exchangeCount: 67
        }
      ],
      buttonStyle: {
        width: '128rpx',
        height: '44rpx',
        borderRadius: '28rpx',
        fontSize: '22rpx'
      }
    }
  },
  computed: {
    filteredGoodsList() {
      let list = this.goodsList
      
      // 根据搜索关键词过滤
      if (this.searchValue) {
        list = list.filter(item => 
          item.name.toLowerCase().includes(this.searchValue.toLowerCase())
        )
      }
      
      // 根据tab过滤
      const currentTabName = this.tabList[this.currentTab].name
      if (currentTabName !== '全部') {
        if (currentTabName === '兑换量') {
          // 按兑换量排序
          list = [...list].sort((a, b) => b.exchangeCount - a.exchangeCount)
        } else {
          // 按分类过滤
          list = list.filter(item => item.category === currentTabName)
        }
      }
      
      return list
    }
  },
  methods: {
    onSearch(value) {
      console.log('搜索:', value)
    },
    
    onTabChange(index) {
      this.currentTab = index
    },
    
    onGoodsClick(item) {
      // 跳转到商品详情页
      uni.navigateTo({
        url: `/subPages/shop/goodsDetail?id=${item.id}`
      })
    },
    
    onExchange(item) {
      uni.showModal({
        title: '确认兑换',
        content: `确定要用${item.points}积分兑换${item.name}吗？`,
        success: (res) => {
          if (res.confirm) {
            // 执行兑换逻辑
            uni.showToast({
              title: '兑换成功',
              icon: 'success'
            })
          }
        }
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.shop-content {
  background: #f8f8f8;
  min-height: calc(100vh - 400rpx);
}

.search-container {
  position: sticky;
  z-index: 999;
  top: 10rpx;
  padding: 15rpx 20rpx;
  background: #ffffff;
}

.tab-container {
  position: sticky;
  z-index: 999;
  top: 90rpx;
  background: #ffffff;
  padding: 0 30rpx;
  border-bottom: 1rpx solid #f0f0f0;
}

.goods-container {
  padding: 20rpx 30rpx;
  background: #f8f8f8;
}

.goods-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20rpx;
}

.goods-item {
  display: flex;
  flex-direction: column;
  background: #ffffff;
  border-radius: 12rpx;
  padding: 20rpx;
  box-shadow: 0 2rpx 12rpx rgba(0, 0, 0, 0.04);
  border: 1rpx solid #f5f5f5;
  
  .goods-image {
    width: 100%;
    height: 230rpx;
    border-radius: 8rpx;
    overflow: hidden;
    margin-bottom: 16rpx;
    border: 2rpx dashed #e0e0e0;
    
    .image {
      width: 100%;
      height: 100%;
      object-fit: cover;
    }
  }
  
  .goods-info {
    flex: 1;
    display: flex;
    flex-direction: column;
    
    .goods-name {
      font-size: 28rpx;
      color: #333333;
      line-height: 1.4;
      margin-bottom: 16rpx;
      font-weight: 500;
      display: -webkit-box;
      -webkit-box-orient: vertical;
      -webkit-line-clamp: 2;
      overflow: hidden;
      min-height: 72rpx;
    }
    
    .goods-bottom {
      display: flex;
      // flex-direction: column;
      gap: 22rpx;
      margin-top: auto;
      
      .points-info {
        display: flex;
        align-items: center;
        
        .points-icon {
          width: 24rpx;
          height: 24rpx;
          margin-right: 6rpx;
        }
        
        .points-text {
          font-size: 28rpx;
          color: #218CDD;
          font-weight: 700;
        }
      }
    }
  }
}
</style>