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 goodsList" 
          :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.title }}</text>
            
            <view class="goods-bottom">
              <view class="points-info">
                <image src="/static/积分图标.png" class="points-icon" mode="aspectFit"></image>
                <text class="points-text">{{ item.price }}积分</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,
      pageNo: 1,
      pageSize: 10,
      tabList: [
        { name: '全部' },
        { name: '积分兑换' },
        { name: '兑换量' },
        { name: '女装' },
        { name: '母婴' },
        { name: '水果' },
        { name: '竹制品' }
      ],
      goodsList: [],
      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'
            })
          }
        }
      })
    },

    async getGoodsList() {
      // 实际项目中这里应该调用API
      const res = await this.$api.shop.queryGoodsList({
        pageNo: this.pageNo,
        pageSize: this.pageSize
      })
      
      if (res.result.records.length) {
        this.goodsList.push(...res.result.records)
        this.pageNo++
      }else {
        uni.showToast({
          title: '暂无商品',
          icon: 'none'
        })
      }
    },

    // 初始化请求参数
    initData() {
      this.pageNo = 1
      this.goodsList = []
    }
  }
}
</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>