feat(admin): implement order management and statistics with real database integration

pages/mall/admin/order/list.uvue

@@ -31,13 +31,13 @@
               <text>全部</text>
               <view class="arrow-down"></view>
             </view>
-            <input class="search-input" placeholder="请输入" />
+            <input class="search-input" placeholder="请输入" v-model="searchText" @confirm="handleQuery" />
           </view>
         </view>
       </view>
       <view class="btn-row">
-        <button class="btn btn-primary">查询</button>
-        <button class="btn btn-default">重置</button>
+        <button class="btn btn-primary" @click="handleQuery">查询</button>
+        <button class="btn btn-default" @click="handleReset">重置</button>
       </view>
     </view>
 
@@ -50,10 +50,9 @@
           :key="index"
           class="tab-item"
           :class="{ active: activeTab === index }"
-          @click="activeTab = index"
+          @click="handleTabChange(index)"
         >
           <text class="tab-text">{{ tab.name }}</text>
-          <text v-if="tab.count" class="tab-count">({{ tab.count }})</text>
         </view>
       </view>
 
@@ -82,47 +81,52 @@
         </view>
         
         <view class="tbody">
-          <view v-for="(item, index) in orderData" :key="index" class="tr">
+          <view v-if="loading" class="table-loading" style="padding: 40px; text-align: center;">
+            <text>加载中...</text>
+          </view>
+          <view v-else-if="orderData.length === 0" class="table-empty" style="padding: 40px; text-align: center;">
+            <text>暂无订单数据</text>
+          </view>
+          <view v-else v-for="(item, index) in orderData" :key="index" class="tr">
             <view class="td col-check">
               <checkbox :checked="false" color="#1890ff" />
             </view>
             <!-- 订单号|类型 -->
             <view class="td col-order">
-              <text class="order-sn">{{ item.sn }}</text>
-              <text class="order-type" :class="item.typeColor">[{{ item.typeName }}]</text>
-              <text v-if="item.cancelStatus" class="cancel-text">{{ item.cancelStatus }}</text>
+              <text class="order-sn">{{ item.order_no }}</text>
+              <text class="order-type blue">[普通订单]</text>
             </view>
             <!-- 商品信息 -->
             <view class="td col-product">
               <view class="product-info-wrap">
-                <image class="p-img" :src="item.product.img" mode="aspectFill" />
-                <text class="p-name">{{ item.product.name }}</text>
+                <image class="p-img" :src="item.first_item_summary?.image_url" mode="aspectFill" />
+                <text class="p-name">{{ item.first_item_summary?.product_name || '多商品订单' }}</text>
               </view>
             </view>
             <!-- 用户信息 -->
             <view class="td col-user">
-              <text class="u-info">{{ item.user.phone }} | {{ item.user.id }}</text>
+              <text class="u-info">{{ item.buyer_name }} | {{ item.buyer_phone }}</text>
             </view>
             <!-- 实际支付 -->
             <view class="td col-price">
-              <text class="price-val">{{ item.actualPrice }}</text>
+              <text class="price-val">¥{{ item.total_amount }}</text>
             </view>
             <!-- 支付方式 -->
             <view class="td col-pay">
-              <text class="pay-text">{{ item.payMethod }}</text>
+              <text class="pay-text">余额支付</text>
             </view>
             <!-- 支付时间 -->
             <view class="td col-time">
-              <text class="time-text">{{ item.payTime }}</text>
+              <text class="time-text">{{ item.paid_at || '-' }}</text>
             </view>
             <!-- 订单状态 -->
             <view class="td col-status">
-              <text class="status-text">{{ item.statusName }}</text>
+              <text class="status-text">{{ getStatusName(item.order_status) }}</text>
             </view>
             <!-- 操作 -->
             <view class="td col-op">
               <view class="op-links">
-                <text class="op-link primary" v-if="item.primaryAction">{{ item.primaryAction }}</text>
+                <text class="op-link primary">详情</text>
                 <view class="op-link-more">
                   <text class="more-text">更多</text>
                   <view class="arrow-down-blue"></view>
@@ -132,93 +136,122 @@
           </view>
         </view>
       </view>
+      <!-- 分页区域 -->
+      <view class="pagination-row" style="padding: 16px 20px;">
+        <text class="total-text">共 {{ total }} 条</text>
+        <view class="page-btns">
+          <view class="page-btn" :class="{ disabled: page <= 1 }" @click="prevPage"><text>‹</text></view>
+          <view class="page-btn active"><text>{{ page }}</text></view>
+          <view class="page-btn" :class="{ disabled: page >= totalPages }" @click="nextPage"><text>›</text></view>
+        </view>
+        <view class="page-jump">
+          <text>前往</text>
+          <input class="jump-input" v-model="jumpPage" type="number" @confirm="goToJumpPage" />
+          <text>页</text>
+        </view>
+      </view>
     </view>
   </view>
 </template>
 
 <script setup lang="uts">
-import { ref } from 'vue'
+import { ref, onMounted, computed } from 'vue'
+import { fetchOrderPage } from '@/services/orderService.uts'
 
-const activeTab = ref(2) // 默认选中待发货或待核销（手动对齐截图）
+const activeTab = ref(0) 
+const searchText = ref('')
+const total = ref(0)
+const orderData = ref<any[]>([])
+const loading = ref(false)
+const page = ref(1)
+const pageSize = ref(15)
+const jumpPage = ref('')
 
 const statusTabs = [
-  { name: '全部', count: null },
-  { name: '待支付', count: 793 },
-  { name: '待发货', count: 3695 },
-  { name: '待核销', count: null },
-  { name: '待收货', count: null },
-  { name: '待评价', count: null },
-  { name: '已完成', count: null },
-  { name: '已退款', count: null },
-  { name: '已删除', count: null }
+  { name: '全部', value: null as number | null },
+  { name: '待付款', value: 1 as number | null },
+  { name: '待发货', value: 2 as number | null },
+  { name: '待收货', value: 3 as number | null },
+  { name: '已完成', value: 4 as number | null },
+  { name: '已取消', value: 5 as number | null },
+  { name: '退款中', value: 6 as number | null },
+  { name: '已退款', value: 7 as number | null }
 ]
 
-const orderData = ref([
-  {
-    sn: 'cp541336970228400128',
-    typeName: '秒杀订单',
-    typeColor: 'blue',
-    cancelStatus: '用户已取消',
-    product: {
-      img: 'https://img.crmeb.com/crmeb_demo/75211.png',
-      name: '爱奇艺智能 奇遇LT01 投影仪 家用卧室 超高清手机便携投影机 (4K超清 支持...'
-    },
-    user: { phone: '188****4074', id: '82694' },
-    actualPrice: '未支付',
-    payMethod: '--',
-    payTime: '--',
-    statusName: '未支付',
-    primaryAction: ''
-  },
-  {
-    sn: 'cp541289248708362240',
-    typeName: '核销订单',
-    typeColor: 'purple',
-    cancelStatus: '',
-    product: {
-      img: 'https://img.crmeb.com/crmeb_demo/75211.png',
-      name: '阿迪达斯官网 adidas BBALL CAP COT 男女训练运动帽子FQ5270 传奇墨水...'
-    },
-    user: { phone: '你就给', id: '82703' },
-    actualPrice: '90.1',
-    payMethod: '余额支付',
-    payTime: '2026-02-02 16:10:17',
-    statusName: '未核销',
-    primaryAction: '立即核销'
-  },
-  {
-    sn: 'cp541268226856714240',
-    typeName: '普通订单',
-    typeColor: 'green',
-    cancelStatus: '',
-    product: {
-      img: 'https://img.crmeb.com/crmeb_demo/75211.png',
-      name: 'UR2024夏季新款女装复古纯欲氛围感一字肩短款T恤衫UWG440060'
-    },
-    user: { phone: '王毅不睡了', id: '82689' },
-    actualPrice: '未支付',
-    payMethod: '--',
-    payTime: '--',
-    statusName: '未支付',
-    primaryAction: '编辑'
-  },
-  {
-    sn: 'cp541262080745930752',
-    typeName: '秒杀订单',
-    typeColor: 'blue',
-    cancelStatus: '',
-    product: {
-      img: 'https://img.crmeb.com/crmeb_demo/75211.png',
-      name: '爱奇艺智能 奇遇LT01 投影仪 家用卧室 超高清手机便携投影机 (4K超清 支持...'
-    },
-    user: { phone: '177****8361', id: '82697' },
-    actualPrice: '未支付',
-    payMethod: '--',
-    payTime: '--',
-    statusName: '未支付',
-    primaryAction: '编辑'
+const totalPages = computed((): number => {
+  if (pageSize.value <= 0) return 1
+  return Math.ceil(total.value / pageSize.value)
+})
+
+const loadOrders = async () => {
+  loading.value = true
+  try {
+    const res = await fetchOrderPage(
+      page.value,
+      pageSize.value,
+      statusTabs[activeTab.value].value,
+      searchText.value || null
+    )
+    
+    orderData.value = res.items
+    total.value = res.total
+  } catch (e) {
+    uni.showToast({ title: '加载订单失败', icon: 'none' })
+  } finally {
+    loading.value = false
   }
-])
+}
+
+onMounted(() => {
+  loadOrders()
+})
+
+const handleQuery = () => {
+  page.value = 1
+  loadOrders()
+}
+
+const handleReset = () => {
+  searchText.value = ''
+  page.value = 1
+  loadOrders()
+}
+
+const handleTabChange = (index: number) => {
+  activeTab.value = index
+  page.value = 1
+  loadOrders()
+}
+
+const prevPage = () => {
+  if (page.value > 1) {
+    page.value--
+    loadOrders()
+  }
+}
+
+const nextPage = () => {
+  if (page.value < totalPages.value) {
+    page.value++
+    loadOrders()
+  }
+}
+
+const goToJumpPage = () => {
+  const targetPage = parseInt(jumpPage.value)
+  if (!isNaN(targetPage) && targetPage >= 1 && targetPage <= totalPages.value) {
+    page.value = targetPage
+    loadOrders()
+    jumpPage.value = ''
+  } else {
+    uni.showToast({ title: '页码无效', icon: 'none' })
+  }
+}
+
+function getStatusName(status: number): string {
+  const tab = statusTabs.find(t => t.value === status)
+  return tab?.name ?? '未知'
+}
 </script>
 
 <style scoped lang="scss">

pages/mall/admin/order/order-statistics/index.uvue

@@ -123,27 +123,43 @@
 import { ref, onMounted } from 'vue'
 import AdminLayout from '@/layouts/admin/AdminLayout.uvue'
 import EChartsView from '@/uni_modules/charts/EChartsView.vue'
+import { fetchOrderStats, fetchOrderTrend, fetchOrderSourceStats } from '@/services/orderService.uts'
 
 const currentPage = ref<string>('order_statistic')
 
 const title = ref<string>('订单统计')
 const trendOption = ref<any>({})
 const sourceOption = ref<any>({})
+const orderStats = ref<any>(null)
 
 const orderTypeData = ref([
-  { name: '普通订单', amount: '430986.62', rate: '97.23' },
-  { name: '拼团订单', amount: '7127', rate: '1.60' },
-  { name: '预售订单', amount: '4835', rate: '1.09' },
-  { name: '秒杀订单', amount: '306', rate: '0.06' },
-  { name: '砍价订单', amount: '0', rate: '0.00' }
+  { name: '普通订单', amount: '0.00', rate: '0.00' }
 ])
 
 onMounted(() => {
-  setTimeout(() => {
-    initCharts()
-  }, 300)
+  loadAllData()
 })
 
+async function loadAllData() {
+  const endTime = new Date().toISOString()
+  const startTime = new Date(Date.now() - 30 * 24 * 60 * 60 * 1000).toISOString()
+  
+  try {
+    // 1. 加载汇总数据
+    orderStats.value = await fetchOrderStats(startTime, endTime)
+    
+    // 2. 加载趋势数据
+    const trendData = await fetchOrderTrend(startTime, endTime)
+    initTrendChart(trendData)
+    
+    // 3. 加载来源数据
+    const sourceData = await fetchOrderSourceStats(startTime, endTime)
+    initSourceChart(sourceData)
+  } catch (e) {
+    uni.showToast({ title: '加载统计数据失败', icon: 'none' })
+  }
+}
+
 /**
  * 转换 UTS 对象为纯 JS 对象，确保 ECharts 能正确解析
  */
@@ -170,12 +186,12 @@ function toPlainObject(obj: any): any {
   return plain
 }
 
-function initCharts() {
-  initTrendChart()
-  initSourceChart()
-}
+function initSourceChart(data: any[]) {
+  const chartData = data.map(item => ({
+    name: item.source === 'unknown' ? '全渠道' : item.source,
+    value: item.order_count
+  }))
 
-function initSourceChart() {
   const option = {
     tooltip: {
       trigger: 'item',
@@ -206,31 +222,19 @@ function initSourceChart() {
         labelLine: {
           show: true
         },
-        data: [
-          { value: 1048, name: '公众号' },
-          { value: 735, name: '小程序' },
-          { value: 580, name: 'H5' },
-          { value: 484, name: 'PC' },
-          { value: 300, name: 'APP' }
-        ]
+        data: chartData
       }
     ]
   }
   sourceOption.value = toPlainObject(option)
 }
 
-function initTrendChart() {
-  const dates = [
-    '01-04', '01-05', '01-06', '01-07', '01-08', '01-09', '01-10', '01-11', '01-12', '01-13',
-    '01-14', '01-15', '01-16', '01-17', '01-18', '01-19', '01-20', '01-21', '01-22', '01-23',
-    '01-24', '01-25', '01-26', '01-27', '01-28', '01-29', '01-30', '01-31', '02-01', '02-02'
-  ]
-
-  const orderAmount = [
-    8000, 2000, 9000, 1000, 138000, 6000, 1000, 500, 800, 200, 
-    5000, 35000, 7000, 1000, 12000, 1000, 100000, 16000, 18000, 1000,
-    1200, 1500, 68000, 1000, 10000, 2000, 4000, 8000, 2000, 1000
-  ]
+function initTrendChart(data: any[]) {
+  const dates = data.map(item => item.date_group.substring(5))
+  const orderAmounts = data.map(item => item.total_amount)
+  const orderCounts = data.map(item => item.order_count)
+  const refundAmounts = data.map(item => item.refund_amount)
+  const refundCounts = data.map(item => item.refund_count)
 
   const option = {
     tooltip: {
@@ -275,25 +279,25 @@ function initTrendChart() {
         symbolSize: 6,
         itemStyle: { color: '#5b8ff9' },
         lineStyle: { width: 2 },
-        data: orderAmount
+        data: orderAmounts
       },
       {
         name: '订单量',
         type: 'line',
         itemStyle: { color: '#5ad8a6' },
-        data: dates.map((_ : string) : number => Math.floor(Math.random() * 20))
+        data: orderCounts
       },
       {
         name: '退款金额',
         type: 'line',
         itemStyle: { color: '#ff9d4d' },
-        data: dates.map((_ : string) : number => 0)
+        data: refundAmounts
       },
       {
         name: '退款订单量',
         type: 'line',
         itemStyle: { color: '#9270ca' },
-        data: dates.map((_ : string) : number => 0)
+        data: refundCounts
       }
     ]
   }