You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
 
 

131 lines
4.9 KiB

<view class="order-page">
<!-- 订单状态标签栏 -->
<view class="order-tabs">
<view class="tab-item {{activeTab === 'all' ? 'active' : ''}}" bindtap="switchTab" data-tab="all">全部</view>
<view class="tab-item {{activeTab === 'unpaid' ? 'active' : ''}}" bindtap="switchTab" data-tab="unpaid">待付款</view>
<view class="tab-item {{activeTab === 'completed' ? 'active' : ''}}" bindtap="switchTab" data-tab="completed">已完成</view>
</view>
<!-- 时间筛选组件 -->
<view class="date-filter">
<view class="date-filter-row">
<view class="date-picker">
<view class="date-label">开始日期:</view>
<picker mode="date" value="{{dateRange.start}}" bindchange="bindStartDateChange">
<view class="picker">
{{dateRange.start || '请选择'}}
</view>
</picker>
</view>
<view class="date-picker">
<view class="date-label">结束日期:</view>
<picker mode="date" value="{{dateRange.end}}" bindchange="bindEndDateChange">
<view class="picker">
{{dateRange.end || '请选择'}}
</view>
</picker>
</view>
</view>
<view class="filter-actions">
<button class="reset-btn" bindtap="resetDateFilter">重置</button>
<button class="apply-btn" bindtap="applyDateFilter">应用筛选</button>
</view>
</view>
<!-- 统计信息 -->
<view class="statistics-card">
<view class="statistics-header">
<text class="statistics-title">订单统计</text>
</view>
<view class="statistics-body">
<view class="stat-item">
<view class="stat-label">总订单数</view>
<view class="stat-value">{{statistics.totalOrders}}</view>
</view>
<view class="stat-item">
<view class="stat-label">总金额</view>
<view class="stat-value">¥{{statistics.totalAmount}}</view>
</view>
<view class="stat-item">
<view class="stat-label">总件数</view>
<view class="stat-value">{{statistics.totalPieces}}</view>
</view>
<view class="stat-item">
<view class="stat-label">总斤数</view>
<view class="stat-value">{{statistics.totalWeight}}</view>
</view>
<view class="stat-item">
<view class="stat-label">未付款</view>
<view class="stat-value unpaid">¥{{statistics.unpaidAmount}}</view>
</view>
<view class="stat-item">
<view class="stat-label">已消费</view>
<view class="stat-value paid">¥{{statistics.paidAmount}}</view>
</view>
</view>
</view>
<!-- 订单列表 -->
<view class="order-list">
<!-- 加载中 -->
<view wx:if="{{loading}}" class="loading">
<text>加载中...</text>
</view>
<!-- 错误提示 -->
<view wx:elif="{{error}}" class="error">
<text>{{error}}</text>
</view>
<!-- 无订单提示 -->
<view wx:elif="{{orders.length === 0}}" class="no-orders">
<view class="no-orders-icon">📦</view>
<view class="no-orders-title">空空如也~</view>
<view class="no-orders-subtitle">您还没有任何订单,快去选购吧</view>
<button class="go-shopping-btn" bindtap="goToHome">去首页购物</button>
</view>
<!-- 订单列表 -->
<view wx:else class="orders">
<view wx:for="{{orders}}" wx:key="dataid" class="order-card" bindtap="viewOrderDetail" data-order-id="{{item.dataid}}">
<!-- 订单头部 -->
<view class="order-header">
<view class="order-no">订单号: {{item.sales_no}}</view>
<view class="order-date">{{item.order_date}}</view>
</view>
<!-- 订单主体 -->
<view class="order-body">
<view class="customer-info">
<view class="customer-company">{{item.customer_company}}</view>
<view class="contact-person">{{item.contact_person}} {{item.phone}}</view>
</view>
<view class="order-summary">
<view class="total-amount">总金额: ¥{{item.total_amount}}</view>
<view class="total-pieces">总件数: {{item.total_pieces}}</view>
<view class="total-weight">总斤数: {{item.total_weight}}</view>
</view>
</view>
<!-- 订单底部 -->
<view class="order-footer">
<view class="status-container">
<view class="payment-status">{{item.payment_status}}</view>
<view class="order-status">{{item.order_status}}</view>
</view>
<view class="arrow-icon">→</view>
</view>
</view>
<!-- 分页加载状态 -->
<view class="load-more">
<view wx:if="{{loadingMore}}" class="loading-more">
<text>加载中...</text>
</view>
<view wx:elif="{{!hasMore && orders.length > 0}}" class="no-more">
<text>没有更多数据了</text>
</view>
</view>
</view>
</view>
</view>