商品消费列表

src/pagesUser/goodsCons/index.config.ts

@@ -1,5 +1,6 @@
-export default {
+export default definePageConfig({
   navigationBarTitleText: '商品消费',
-  navigationBarBackgroundColor: '#FFFFFF',
+  navigationBarBackgroundColor: '#fff',
   navigationBarTextStyle: 'black',
-}
+  backgroundColor: '#F2F3F5',
+})

src/pagesUser/goodsCons/index.scss

@@ -1,5 +1,166 @@
 .goods-cons-page {
   min-height: 100vh;
   background-color: #F2F3F5;
-  padding: 30px;
+
+  // 状态 Tab：未支付/已支付/退款
+  .status-tab-container {
+    display: flex;
+    align-items: center;
+    background-color: none;
+    padding: 0 30px;
+    position: relative;
+
+    .status-tabs {
+      flex: 1;
+      .taroify-tabs__wrap{
+        .taroify-tabs__wrap__scroll{
+          background: none !important;
+
+          .wx-scroll-view{
+            .wx-scroll-view{
+              .taroify-tabs__nav{
+                background: none !important;
+              }
+            }
+          }
+        }
+      }
+
+      :global {
+        // 未选中 Tab
+        .taroify-tabs__tab {
+          font-size: 30px !important;
+          color: #8B8B8B !important;
+        }
+
+        // 选中 Tab
+        .taroify-tabs__tab--active {
+          color: #03C175 !important;
+        }
+
+        // 选中指示线
+        .taroify-tabs__line {
+          background-color: #03C175 !important;
+        }
+      }
+    }
+
+    // 筛选按钮
+    .filter-btn {
+      display: flex;
+      align-items: center;
+      gap: 5px;
+      padding: 10px 0;
+
+      .filter-text {
+        font-size: 30px;
+        color: #8B8B8B;
+      }
+    }
+  }
+
+  // 订单列表
+  .order-list {
+    padding: 30px;
+
+    // 订单卡片
+    .order-card {
+      background-color: #FFFFFF;
+      border-radius: 12px;
+      padding: 30px;
+      margin-bottom: 30px;
+
+      // 标题行：时间 + 状态
+      .card-header {
+        display: flex;
+        align-items: center;
+        justify-content: space-between;
+        margin-bottom: 30px;
+
+        .time {
+          font-size: 33px;
+          color: #000000;
+          font-weight: 500;
+        }
+
+        .status-with-arrow {
+          display: flex;
+          align-items: center;
+          gap: 5px;
+
+          .status {
+            font-size: 33px;
+
+            &.unpaid {
+              color: #FF3B30;
+            }
+
+            &.paid {
+              color: #8B8B8B;
+            }
+
+            &.refund {
+              color: #8B8B8B;
+            }
+          }
+        }
+      }
+
+      // 订单信息
+      .card-info {
+        display: flex;
+        flex-direction: column;
+        gap: 20px;
+        margin-bottom: 30px;
+
+        .info-row {
+          display: flex;
+          align-items: flex-start;
+          justify-content: space-between;
+
+          .info-label {
+            font-size: 30px;
+            color: #333333;
+            flex-shrink: 0;
+          }
+
+          .info-value {
+            font-size: 30px;
+            color: #595959;
+            text-align: right;
+            word-break: break-all;
+            flex: 1;
+            margin-left: 20px;
+          }
+        }
+      }
+
+      // 立即支付按钮
+      .pay-btn {
+        width: 100%;
+        height: 88px;
+        background: #03C175;
+        border-radius: 12px;
+        border: none;
+        font-weight: 400;
+        font-size: 31px;
+        color: #FFFFFF;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        margin-top: 30px;
+      }
+    }
+
+    // 到底了提示
+    .list-end {
+      text-align: center;
+      padding: 40px 0;
+
+      .end-text {
+        font-size: 25px;
+        color: #999999;
+      }
+    }
+  }
 }

src/pagesUser/goodsCons/index.tsx

@@ -1,18 +1,246 @@
 /**
  * 商品消费页
  */
-import { View, Text } from '@tarojs/components'
-import { useLoad } from '@tarojs/taro'
+import { View, Text, Button } from '@tarojs/components'
+import { useState } from 'react'
+import Taro, { useLoad } from '@tarojs/taro'
+import { Tabs, Divider } from '@taroify/core'
+import { ArrowDown, Arrow } from '@taroify/icons'
+import EmptyData from '@/components/EmptyData'
+import FilterPopup from '../orderList/components/FilterPopup'
 import './index.scss'
 
+// 商品消费订单数据接口
+interface GoodsOrderItem {
+  id: string
+  time: string           // 消费时间
+  storeName: string      // 消费门店
+  address: string        // 地址
+  orderNo: string        // 订单号
+  amount: number         // 消费金额
+  goodsCount: number     // 商品数量
+  status: 'unpaid' | 'paid' | 'refund'  // 未支付 | 已支付 | 退款
+}
+
 const GoodsCons = () => {
+  const [statusTab, setStatusTab] = useState(0) // 0: 未支付, 1: 已支付, 2: 退款
+  const [filterPopupOpen, setFilterPopupOpen] = useState(false) // 筛选弹窗
+  const [filterData, setFilterData] = useState({
+    startDate: '',
+    endDate: '',
+    paymentMethods: [] as string[]
+  })
+
+  // 模拟商品消费订单数据
+  const [orderList] = useState<GoodsOrderItem[]>([
+    {
+      id: '1',
+      time: '2025-01-10 16:30:01',
+      storeName: 'XXX店',
+      address: 'XXX市XXXXXXXX',
+      orderNo: 'wjekwejrwkjsf1321445255',
+      amount: 15.50,
+      goodsCount: 2,
+      status: 'unpaid'
+    },
+    {
+      id: '2',
+      time: '2025-01-09 10:30:01',
+      storeName: 'XXX店',
+      address: 'XXX市XXX区XXXXXXXXXXXXXXXX街道XXXXXXX大厦201',
+      orderNo: 'wjekwejrwkjsf1321445255',
+      amount: 15.00,
+      goodsCount: 2,
+      status: 'paid'
+    },
+    {
+      id: '3',
+      time: '2025-01-08 14:20:00',
+      storeName: 'XXX店',
+      address: 'XXX市XXXXXXXX',
+      orderNo: 'wjekwejrwkjsf1321445256',
+      amount: 20.00,
+      goodsCount: 1,
+      status: 'refund'
+    }
+  ])
+
   useLoad(() => {
     console.log('商品消费页面加载')
   })
 
+  // 筛选按钮点击
+  const handleFilter = () => {
+    setFilterPopupOpen(true)
+  }
+
+  // 筛选确认
+  const handleFilterConfirm = (data: any) => {
+    setFilterData(data)
+    
+    // 计算筛选数量
+    let count = 0
+    if (data.startDate || data.endDate) count++
+    if (data.paymentMethods.length > 0) count += data.paymentMethods.length
+    
+    console.log('筛选数据', data, '筛选数量', count)
+    
+    Taro.showToast({
+      title: '筛选成功',
+      icon: 'success',
+      duration: 2000
+    })
+  }
+
+  // 计算筛选数量
+  const getFilterCount = () => {
+    let count = 0
+    if (filterData.startDate || filterData.endDate) count++
+    if (filterData.paymentMethods.length > 0) count += filterData.paymentMethods.length
+    return count
+  }
+
+  // 根据选中的 Tab 筛选订单
+  const getFilteredOrders = () => {
+    let filtered = orderList
+
+    // 根据状态筛选
+    if (statusTab === 0) {
+      filtered = filtered.filter(order => order.status === 'unpaid')
+    } else if (statusTab === 1) {
+      filtered = filtered.filter(order => order.status === 'paid')
+    } else if (statusTab === 2) {
+      filtered = filtered.filter(order => order.status === 'refund')
+    }
+
+    return filtered
+  }
+
+  const filteredOrders = getFilteredOrders()
+
+  // 订单卡片点击
+  const handleOrderClick = (orderId: string) => {
+    console.log('订单详情', orderId)
+    Taro.navigateTo({
+      url: `/pagesUser/orderDetail/index?orderId=${orderId}`
+    })
+  }
+
+  // 立即支付
+  const handlePay = (orderId: string, e: any) => {
+    e.stopPropagation() // 阻止冒泡到卡片点击事件
+    console.log('立即支付', orderId)
+    Taro.showToast({
+      title: '跳转支付',
+      icon: 'none'
+    })
+  }
+
+  // 获取状态文本
+  const getStatusText = (status: string) => {
+    if (status === 'unpaid') return '未支付'
+    if (status === 'paid') return '已支付'
+    if (status === 'refund') return '退款'
+    return ''
+  }
+
+  // 获取状态样式类
+  const getStatusClass = (status: string) => {
+    if (status === 'unpaid') return 'unpaid'
+    if (status === 'paid') return 'paid'
+    if (status === 'refund') return 'refund'
+    return ''
+  }
+
   return (
     <View className="goods-cons-page">
-      <Text>商品消费</Text>
+      {/* 状态 Tab：未支付/已支付/退款 + 筛选 */}
+      <View className="status-tab-container">
+        <Tabs value={statusTab} onChange={setStatusTab} className="status-tabs">
+          <Tabs.TabPane title="未支付" />
+          <Tabs.TabPane title="已支付" />
+          <Tabs.TabPane title="退款" />
+        </Tabs>
+        
+        <View className="filter-btn" onClick={handleFilter}>
+          <Text className="filter-text">筛选{getFilterCount() > 0 ? ` ${getFilterCount()}` : ''}</Text>
+          <ArrowDown size="16px" color="#8B8B8B" />
+        </View>
+      </View>
+
+      {/* 订单列表 */}
+      <View className="order-list">
+        {filteredOrders.length === 0 ? (
+          <EmptyData />
+        ) : (
+          <>
+            {filteredOrders.map(order => (
+              <View 
+                key={order.id} 
+                className="order-card"
+                onClick={() => handleOrderClick(order.id)}
+              >
+                {/* 标题行：时间 + 状态 */}
+                <View className="card-header">
+                  <Text className="time">{order.time}</Text>
+                  <View className="status-with-arrow">
+                    <Text className={`status ${getStatusClass(order.status)}`}>
+                      {getStatusText(order.status)}
+                    </Text>
+                    <Arrow size="16px" color={order.status === 'unpaid' ? '#FF3B30' : '#8B8B8B'} />
+                  </View>
+                </View>
+
+                {/* 虚线分隔 */}
+                <Divider dashed={true} />
+                
+                {/* 订单信息 */}
+                <View className="card-info">
+                  <View className="info-row">
+                    <Text className="info-label">消费门店</Text>
+                    <Text className="info-value">{order.storeName}</Text>
+                  </View>
+                  <View className="info-row">
+                    <Text className="info-label">地址</Text>
+                    <Text className="info-value">{order.address}</Text>
+                  </View>
+                  <View className="info-row">
+                    <Text className="info-label">订单号</Text>
+                    <Text className="info-value">{order.orderNo}</Text>
+                  </View>
+                  <View className="info-row">
+                    <Text className="info-label">消费金额</Text>
+                    <Text className="info-value">{order.amount.toFixed(2)}元</Text>
+                  </View>
+                  <View className="info-row">
+                    <Text className="info-label">商品数量</Text>
+                    <Text className="info-value">{order.goodsCount}</Text>
+                  </View>
+                </View>
+
+                {/* 未支付订单显示立即支付按钮 */}
+                {order.status === 'unpaid' && (
+                  <Button className="pay-btn" onClick={(e) => handlePay(order.id, e)}>
+                    立即支付
+                  </Button>
+                )}
+              </View>
+            ))}
+
+            {/* 到底了提示 */}
+            <View className="list-end">
+              <Text className="end-text">到底了~</Text>
+            </View>
+          </>
+        )}
+      </View>
+
+      {/* 筛选弹窗 */}
+      <FilterPopup
+        open={filterPopupOpen}
+        onClose={() => setFilterPopupOpen(false)}
+        onConfirm={handleFilterConfirm}
+      />
     </View>
   )
 }