feat：积分商城 - 商品列表添加

src/points/components/product-list/product-list.vue

@@ -0,0 +1,466 @@
+<template>
+  <view class="product-list-container">
+    <!-- 商品列表头部 -->
+    <view class="product-header">
+      <view class="product-title">
+        <text class="title-text">精选好物兑换</text>
+      </view>
+      <view class="search-bar">
+        <u-search placeholder="日照香炉生紫烟" v-model="keyword"></u-search>
+      </view>
+    </view>
+    
+    <!-- 分类标签 -->
+    <view class="category-tabs">
+      <view 
+        v-for="(category, index) in categories" 
+        :key="index"
+        :class="['category-tab', { active: activeCategory === category.key }]"
+        @click="switchCategory(category.key)"
+      >
+        <text :class="['category-text', { active: activeCategory === category.key }]">{{ category.name }}</text>
+      </view>
+    </view>
+    
+    <!-- 排序选项 -->
+    <view class="sort-options">
+      <view 
+        v-for="(sort, index) in sortOptions" 
+        :key="index"
+        :class="['sort-option', { active: activeSort === sort.key }]"
+        @click="switchSort(sort.key)"
+      >
+        <text :class="['sort-text', { active: activeSort === sort.key }]">{{ sort.name }}</text>
+        <text v-if="sort.key === 'price' || sort.key === 'sales'" :class="['sort-icon', { active: activeSort === sort.key }]">
+          {{ sortDirection === 'asc' ? '↑' : '↓' }}
+        </text>
+      </view>
+    </view>
+    
+    <!-- 商品列表 -->
+
+      <view class="product-grid">
+        <view 
+          v-for="(product, index) in products" 
+          :key="index"
+          class="product-item"
+        >
+          <view class="product-image">
+            <image :src="product.image" mode="aspectFill"></image>
+          </view>
+          <view class="product-info">
+            <u--text class="product-name" :lines="1" :text="product.name"></u--text>
+            <text class="product-price">{{ product.price }}</text>
+            <view class="product-details">
+              <view class="product-detail">
+                <text class="product-value">价值{{ product.value }}元</text>
+                <text class="product-sales">销量{{ product.sales }}</text>
+              </view>
+              <button class="exchange-btn" @click="handleExchange(product)">
+                兑换
+              </button>
+            </view>
+          </view>
+        </view>
+      </view>
+  </view>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      // 分类数据
+      categories: [
+        { key: 'all', name: '全部' },
+        { key: 'leisure', name: '休闲' },
+        { key: 'entertainment', name: '娱乐' },
+        { key: 'daily', name: '日用品' },
+        { key: 'other', name: '其他' }
+      ],
+      // 排序选项
+      sortOptions: [
+        { key: '综合', name: '综合' },
+        { key: 'price', name: '价格' },
+        { key: 'sales', name: '销量' }
+      ],
+      // 当前选中的分类和排序
+      activeCategory: 'all',
+      activeSort: '综合',
+      sortDirection: 'asc',
+      // 商品数据
+      products: [
+        {
+          id: 1,
+          name: '广誉源会员定制玻璃杯广誉源会员定制玻璃杯',
+          price: '10元+1000积分',
+          value: '100',
+          sales: 10,
+          image: 'https://test.baoxianzhanggui.com/nightFragrance/profile/upload/2025/01/03/b43f6087c815cdab8828eb68529d96bc73203b941ab71e-xrpfmn_fw1200webp_20250103175413A002.png'
+        },
+        {
+          id: 2,
+          name: '广誉源会员定制玻璃杯',
+          price: '10元+1000积分',
+          value: '100',
+          sales: 10,
+          image: 'https://test.baoxianzhanggui.com/nightFragrance/profile/upload/2025/01/03/b43f6087c815cdab8828eb68529d96bc73203b941ab71e-xrpfmn_fw1200webp_20250103175413A002.png'
+        },
+        {
+          id: 3,
+          name: '广誉源会员定制玻璃杯',
+          price: '10元+1000积分',
+          value: '100',
+          sales: 10,
+          image: 'https://test.baoxianzhanggui.com/nightFragrance/profile/upload/2025/01/03/b43f6087c815cdab8828eb68529d96bc73203b941ab71e-xrpfmn_fw1200webp_20250103175413A002.png'
+        },
+        {
+          id: 4,
+          name: '广誉源会员定制玻璃杯',
+          price: '10元+1000积分',
+          value: '100',
+          sales: 10,
+          image: 'https://test.baoxianzhanggui.com/nightFragrance/profile/upload/2025/01/03/b43f6087c815cdab8828eb68529d96bc73203b941ab71e-xrpfmn_fw1200webp_20250103175413A002.png'
+        },
+        {
+          id: 5,
+          name: '广誉源会员定制玻璃杯',
+          price: '10元+1000积分',
+          value: '100',
+          sales: 10,
+          image: 'https://test.baoxianzhanggui.com/nightFragrance/profile/upload/2025/01/03/b43f6087c815cdab8828eb68529d96bc73203b941ab71e-xrpfmn_fw1200webp_20250103175413A002.png'
+        },
+        {
+          id: 6,
+          name: '广誉源会员定制玻璃杯',
+          price: '10元+1000积分',
+          value: '100',
+          sales: 10,
+          image: 'https://test.baoxianzhanggui.com/nightFragrance/profile/upload/2025/01/03/b43f6087c815cdab8828eb68529d96bc73203b941ab71e-xrpfmn_fw1200webp_20250103175413A002.png'
+        },
+        {
+          id: 7,
+          name: '广誉源会员定制玻璃杯',
+          price: '10元+1000积分',
+          value: '100',
+          sales: 10,
+          image: 'https://test.baoxianzhanggui.com/nightFragrance/profile/upload/2025/01/03/b43f6087c815cdab8828eb68529d96bc73203b941ab71e-xrpfmn_fw1200webp_20250103175413A002.png'
+        },
+        {
+          id: 8,
+          name: '广誉源会员定制玻璃杯',
+          price: '10元+1000积分',
+          value: '100',
+          sales: 10,
+          image: 'https://test.baoxianzhanggui.com/nightFragrance/profile/upload/2025/01/03/b43f6087c815cdab8828eb68529d96bc73203b941ab71e-xrpfmn_fw1200webp_20250103175413A002.png'
+        },
+        {
+          id: 9,
+          name: '广誉源会员定制玻璃杯',
+          price: '10元+1000积分',
+          value: '100',
+          sales: 10,
+          image: 'https://test.baoxianzhanggui.com/nightFragrance/profile/upload/2025/01/03/b43f6087c815cdab8828eb68529d96bc73203b941ab71e-xrpfmn_fw1200webp_20250103175413A002.png'
+        },
+        {
+          id: 10,
+          name: '广誉源会员定制玻璃杯',
+          price: '10元+1000积分',
+          value: '100',
+          sales: 10,
+          image: 'https://test.baoxianzhanggui.com/nightFragrance/profile/upload/2025/01/03/b43f6087c815cdab8828eb68529d96bc73203b941ab71e-xrpfmn_fw1200webp_20250103175413A002.png'
+        },
+        {
+          id: 11,
+          name: '广誉源会员定制玻璃杯',
+          price: '10元+1000积分',
+          value: '100',
+          sales: 10,
+          image: 'https://test.baoxianzhanggui.com/nightFragrance/profile/upload/2025/01/03/b43f6087c815cdab8828eb68529d96bc73203b941ab71e-xrpfmn_fw1200webp_20250103175413A002.png'
+        },
+        {
+          id: 12,
+          name: '广誉源会员定制玻璃杯',
+          price: '10元+1000积分',
+          value: '100',
+          sales: 10,
+          image: 'https://test.baoxianzhanggui.com/nightFragrance/profile/upload/2025/01/03/b43f6087c815cdab8828eb68529d96bc73203b941ab71e-xrpfmn_fw1200webp_20250103175413A002.png'
+        }
+      ],
+      // 分页数据
+      page: 1,
+      pageSize: 10,
+      hasMore: true,
+      // 下拉刷新和上拉加载配置
+      downOption: {
+        use: true,
+        auto: false,
+        callback: this.onDown
+      },
+      upOption: {
+        use: true,
+        auto: true,
+        page: {
+          num: 1,
+          size: 10
+        },
+        noMoreSize: 5,
+        empty: {
+          tip: '暂无商品'
+        },
+        callback: this.onUp
+      }
+    }
+  },
+  methods: {
+    // 切换分类
+    switchCategory(category) {
+      this.activeCategory = category
+      this.page = 1
+      this.products = []
+      this.onUp()
+    },
+    // 切换排序
+    switchSort(sort) {
+      if (this.activeSort === sort && (sort === 'price' || sort === 'sales')) {
+        this.sortDirection = this.sortDirection === 'asc' ? 'desc' : 'asc'
+      } else {
+        this.activeSort = sort
+        this.sortDirection = 'asc'
+      }
+      this.page = 1
+      this.products = []
+      this.onUp()
+    },
+    // 下拉刷新
+    onDown() {
+      this.page = 1
+      this.products = []
+      this.onUp()
+    },
+    // 上拉加载
+    onUp(mescroll) {
+      // 模拟请求数据
+      setTimeout(() => {
+        // 模拟加载更多数据
+        const newProducts = [
+          {
+            id: this.products.length + 1,
+            name: '广誉源会员定制玻璃杯',
+            price: '10元+1000积分',
+            value: '100',
+            sales: 10,
+            image: `https://via.placeholder.com/300x300?text=Product+${this.products.length + 1}`
+          },
+          {
+            id: this.products.length + 2,
+            name: '广誉源会员定制玻璃杯',
+            price: '10元+1000积分',
+            value: '100',
+            sales: 10,
+            image: `https://via.placeholder.com/300x300?text=Product+${this.products.length + 2}`
+          }
+        ]
+        
+        this.products = [...this.products, ...newProducts]
+        this.page++
+        
+        // 模拟没有更多数据
+        if (this.page > 3) {
+          this.hasMore = false
+        }
+        
+        // 结束加载
+        if (mescroll) {
+          mescroll.endSuccess(newProducts.length, this.hasMore)
+        }
+      }, 1000)
+    },
+    // 处理兑换
+    handleExchange(product) {
+      console.log('兑换商品:', product)
+      // 这里可以调用兑换API
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.product-list-container {
+  width: 750rpx;
+  background: #FFFFFF;
+  border-radius: 20rpx 20rpx 0 0;
+
+  .product-header {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    padding: 20rpx 32rpx;
+    background-color: #fff;
+    
+    .product-title {
+      .title-text {
+        font-size: 32rpx;
+        font-weight: 600;
+        color: #333;
+      }
+    }
+    
+    .search-bar {
+      display: flex;
+      align-items: center;
+      background-color: #F5F5F5;
+      padding: 8rpx 16rpx;
+      border-radius: 20rpx;
+      
+      .search-icon {
+        margin-right: 8rpx;
+        font-size: 24rpx;
+        color: #999;
+      }
+      
+      .search-text {
+        font-size: 24rpx;
+        color: #999;
+      }
+    }
+  }
+  
+  .category-tabs {
+    display: flex;
+    padding: 20rpx 32rpx;
+    background-color: #fff;
+    overflow-x: auto;
+    
+    .category-tab {
+      padding: 8rpx 20rpx;
+      margin-right: 20rpx;
+      border-radius: 20rpx;
+      background-color: #F5F5F5;
+      
+      &.active {
+        background-color: #FF6B6B;
+      }
+      
+      .category-text {
+        font-size: 24rpx;
+        color: #666;
+        
+        &.active {
+          color: #fff;
+        }
+      }
+    }
+  }
+  
+  .sort-options {
+    display: flex;
+    padding: 16rpx 32rpx;
+    background-color: #fff;
+    margin-bottom: 12rpx;
+    
+    .sort-option {
+      display: flex;
+      align-items: center;
+      margin-right: 40rpx;
+      
+      .sort-text {
+        font-size: 24rpx;
+        color: #666;
+        
+        &.active {
+          color: #FF6B6B;
+        }
+      }
+      
+      .sort-icon {
+        margin-left: 4rpx;
+        font-size: 20rpx;
+        color: #999;
+        
+        &.active {
+          color: #FF6B6B;
+        }
+      }
+    }
+  }
+  
+  .product-grid {
+    display: grid;
+    grid-template-columns: repeat(2, 1fr);
+    grid-gap: 24rpx;
+    padding: 24rpx 32rpx;
+    
+    .product-item {
+      width: 324rpx;
+      height: 440rpx;
+      background-color: #fff;
+      border-radius: 12rpx;
+      overflow: hidden;
+      box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.08);
+      
+      .product-image {
+        width: 100%;
+        height: 248rpx;
+        overflow: hidden;
+        
+        image {
+          width: 100%;
+          height: 100%;
+        }
+      }
+      
+      .product-info {
+        padding: 14rpx 16rpx;
+        .product-name {
+          font-family: PingFang SC, PingFang SC;
+          font-weight: 500;
+          font-size: 28rpx;
+          color: #333333;
+          display: block;
+          margin-bottom: 6rpx;
+        }
+        
+        .product-price {
+          font-family: PingFang SC, PingFang SC;
+          font-weight: 500;
+          font-size: 32rpx;
+          color: #F53E54;
+          display: block;
+          margin-bottom: 8rpx;
+        }
+        .product-details{
+          display: flex;
+          justify-content: space-between;
+          align-items: center;
+          .product-detail{
+            .product-value {
+              display: block;
+              font-size: 24rpx;
+              color: #999999;
+            }
+
+            .product-sales {
+              display: block;
+              font-size: 24rpx;
+              color: #999999;
+            }
+          }
+          .exchange-btn {
+            width: 120rpx;
+            height: 48rpx;
+            background: linear-gradient( 78deg, #1AD8CF 0%, #21C8C0 100%);
+            border-radius: 98rpx;
+            font-size: 28rpx;
+            color: #FFFFFF;
+            text-align: center;
+            line-height: 48rpx;
+            margin: 20rpx 0 0 0;
+            padding: 0;
+          }
+        }
+      }
+    }
+  }
+}
+</style>