feat(admin): full integration of order, product, and finance modules with real RPC data streams

pages/mall/admin/finance/recharge.uvue

@@ -4,24 +4,14 @@
     <view class="filter-card border-shadow">
       <view class="filter-row">
         <view class="filter-item">
-          <text class="filter-label">时间选择:</text>
-          <view class="date-picker-wrap">
-            <text class="calendar-icon">📅</text>
-            <text class="date-placeholder">开始日期 - 结束日期</text>
-          </view>
-        </view>
-        <view class="filter-item">
-          <text class="filter-label">支付类型:</text>
-          <view class="select-box">
-            <text class="select-txt">全部</text>
-            <text class="arrow-down">▼</text>
-          </view>
+          <text class="filter-label">支付状态:</text>
+          <uni-data-select v-model="paidValue" :localdata="paidOptions" class="data-select" @change="handleQuery" />
         </view>
         <view class="filter-item search-wrap">
           <text class="filter-label">搜索:</text>
-          <input class="search-input" placeholder="请输入用户昵称、订单号" />
+          <input class="search-input" v-model="searchKeyword" placeholder="请输入用户昵称、订单号" @confirm="handleQuery" />
         </view>
-        <view class="btn-query">
+        <view class="btn-query" @click="handleQuery">
           <text class="btn-txt">查询</text>
         </view>
       </view>
@@ -29,7 +19,7 @@
 
     <!-- 统计网格 -->
     <view class="stats-grid">
-      <view class="stat-card border-shadow" v-for="(item, index) in stats" :key="index">
+      <view class="stat-card border-shadow" v-for="(item, index) in statsItems" :key="index">
         <view class="icon-circle" :class="item.colorClass">
           <text class="stat-icon">{{ item.icon }}</text>
         </view>
@@ -51,8 +41,7 @@
     <view class="table-container border-shadow">
       <view class="table-header">
         <view class="th col-id"><text class="th-txt">ID</text></view>
-        <view class="th col-avatar"><text class="th-txt">头像</text></view>
-        <view class="th col-nickname"><text class="th-txt">用户昵称</text></view>
+        <view class="th col-nickname"><text class="th-txt">用户信息</text></view>
         <view class="th col-orderno"><text class="th-txt">订单号</text></view>
         <view class="th col-amount"><text class="th-txt">支付金额</text></view>
         <view class="th col-paid"><text class="th-txt">是否支付</text></view>
@@ -62,102 +51,169 @@
       </view>
 
       <view class="table-body">
-        <view class="table-row" v-for="item in tableData" :key="item.id">
-          <view class="td col-id"><text class="td-txt">{{ item.id }}</text></view>
-          <view class="td col-avatar">
-            <view class="avatar-box">
-              <text class="avatar-placeholder" v-if="!item.hasAvatar">🖼️</text>
-              <view class="avatar-img-mock" v-else></view>
+        <view v-if="loading" class="table-loading" style="padding: 40px; text-align: center;">
+          <text>加载中...</text>
+        </view>
+        <view v-else-if="tableData.length === 0" class="table-empty" style="padding: 40px; text-align: center;">
+          <text>暂无充值记录</text>
+        </view>
+        <view v-else class="table-row" v-for="(item, index) in tableData" :key="item.id">
+          <view class="td col-id"><text class="td-txt">{{ (page - 1) * pageSize + index + 1 }}</text></view>
+          <view class="td col-nickname">
+            <view class="u-info-box">
+              <text class="u-name">{{ item.user_name || '未知' }}</text>
+              <text class="u-email">{{ item.user_email || '-' }}</text>
             </view>
           </view>
-          <view class="td col-nickname"><text class="td-txt">{{ item.nickname }}</text></view>
-          <view class="td col-orderno"><text class="td-txt">{{ item.orderNo }}</text></view>
-          <view class="td col-amount"><text class="td-txt">{{ item.amount }}</text></view>
-          <view class="td col-paid"><text class="td-txt">{{ item.isPaid }}</text></view>
-          <view class="td col-type"><text class="td-txt">{{ item.type }}</text></view>
-          <view class="td col-time"><text class="td-txt">{{ item.time }}</text></view>
+          <view class="td col-orderno"><text class="td-txt">{{ item.order_no }}</text></view>
+          <view class="td col-amount">
+            <view class="amount-box">
+              <text class="price">¥{{ item.price.toFixed(2) }}</text>
+              <text class="give" v-if="item.give_price > 0">赠:¥{{ item.give_price.toFixed(2) }}</text>
+            </view>
+          </view>
+          <view class="td col-paid">
+            <text class="status-tag" :class="item.paid == 1 ? 'paid' : 'unpaid'">
+              {{ item.paid == 1 ? '已支付' : '未支付' }}
+            </text>
+          </view>
+          <view class="td col-type"><text class="td-txt">{{ getRechargeTypeText(item.recharge_type) }}</text></view>
+          <view class="td col-time"><text class="td-txt">{{ item.pay_time ? item.pay_time.substring(0, 16).replace('T', ' ') : '-' }}</text></view>
           <view class="td col-ops">
-            <text class="op-link">删除</text>
+            <text class="op-link">详情</text>
           </view>
         </view>
       </view>
     </view>
+
+    <!-- 分页区域 -->
+    <view class="pagination-footer">
+      <view class="page-total">
+        <text class="total-txt">共 {{ total }} 条</text>
+      </view>
+      <view class="page-btns">
+        <view class="p-btn" :class="{ disabled: page <= 1 }" @click="prevPage">
+          <text><</text>
+        </view>
+        <view class="p-btn active">
+          <text>{{ page }}</text>
+        </view>
+        <view class="p-btn" :class="{ disabled: page >= totalPages }" @click="nextPage">
+          <text>></text>
+        </view>
+      </view>
+      <view class="page-jump">
+        <text class="jump-txt">前往</text>
+        <input class="jump-input" v-model="jumpPage" type="number" @confirm="goToJumpPage" />
+        <text class="jump-txt">页</text>
+      </view>
+    </view>
   </view>
 </template>
 
 <script setup lang="uts">
-import { ref } from 'vue'
+import { ref, onMounted, computed } from 'vue'
+import { fetchRechargeList, fetchFinanceOverview } from '@/services/admin/financeService.uts'
 
-const stats = ref([
-  { label: '充值总金额', value: '446747490.72', icon: '¥', colorClass: 'blue' },
-  { label: '充值退款金额', value: '1.19', icon: '¥', colorClass: 'orange' },
-  { label: '支付宝充值金额', value: '78812.24', icon: '支', colorClass: 'green' },
-  { label: '微信充值金额', value: '8518075.11', icon: '✔', colorClass: 'pink' }
+const paidValue = ref<string>('all')
+const searchKeyword = ref('')
+const page = ref(1)
+const pageSize = ref(15)
+const total = ref(0)
+const loading = ref(false)
+const jumpPage = ref('')
+
+const paidOptions = [
+  { value: 'all', text: '全部状态' },
+  { value: '1', text: '已支付' },
+  { value: '0', text: '未支付' }
+]
+
+const statsItems = ref([
+  { label: '充值总金额', value: '0.00', icon: '¥', colorClass: 'blue' },
+  { label: '充值退款金额', value: '0.00', icon: '¥', colorClass: 'orange' },
+  { label: '本月充值金额', value: '0.00', icon: '月', colorClass: 'green' },
+  { label: '今日充值金额', value: '0.00', icon: '今', colorClass: 'pink' }
 ])
 
-interface RechargeRecord {
-  id: number
-  hasAvatar: boolean
-  nickname: string
-  orderNo: string
-  amount: string
-  isPaid: string
-  type: string
-  time: string
+const tableData = ref<any[]>([])
+
+const totalPages = computed(() : number => {
+  if (pageSize.value <= 0) return 1
+  return Math.ceil(total.value / pageSize.value)
+})
+
+async function loadStats() {
+  const endTime = new Date().toISOString()
+  const startTime = new Date(Date.now() - 30 * 24 * 60 * 60 * 1000).toISOString()
+  const res = await fetchFinanceOverview(startTime, endTime)
+  if (res != null) {
+    statsItems.value[0].value = res.recharge_amount.toFixed(2)
+  }
 }
 
-const tableData = ref<RechargeRecord[]>([
-  {
-    id: 4522,
-    hasAvatar: true,
-    nickname: 'TTA NW',
-    orderNo: 'cz540603403592531968',
-    amount: '10.00',
-    isPaid: '未支付',
-    type: '微信充值',
-    time: '暂无'
-  },
-  {
-    id: 4521,
-    hasAvatar: true,
-    nickname: 'TTA NW',
-    orderNo: 'cz540592008763277312',
-    amount: '3343.00',
-    isPaid: '未支付',
-    type: '微信充值',
-    time: '暂无'
-  },
-  {
-    id: 4520,
-    hasAvatar: true,
-    nickname: '绯',
-    orderNo: 'cz538561368400330752',
-    amount: '500.00',
-    isPaid: '未支付',
-    type: '支付宝充值',
-    time: '暂无'
-  },
-  {
-    id: 4519,
-    hasAvatar: false,
-    nickname: '六六狗',
-    orderNo: 'cz538368229429477376',
-    amount: '50.00',
-    isPaid: '未支付',
-    type: '微信充值',
-    time: '暂无'
-  },
-  {
-    id: 4518,
-    hasAvatar: false,
-    nickname: 'aabbc',
-    orderNo: 'cz538165303901683712',
-    amount: '10.00',
-    isPaid: '未支付',
-    type: '其他充值',
-    time: '暂无'
+async function loadList() {
+  loading.value = true
+  try {
+    const paid = paidValue.value == 'all' ? null : parseInt(paidValue.value)
+    const res = await fetchRechargeList(
+      page.value,
+      pageSize.value,
+      paid,
+      null,
+      null,
+      searchKeyword.value || null
+    )
+    tableData.value = res.items
+    total.value = res.total
+  } catch (e) {
+    uni.showToast({ title: '加载充值记录失败', icon: 'none' })
+  } finally {
+    loading.value = false
   }
-])
+}
+
+onMounted(() => {
+  loadStats()
+  loadList()
+})
+
+const handleQuery = () => {
+  page.value = 1
+  loadList()
+}
+
+const prevPage = () => {
+  if (page.value > 1) {
+    page.value--
+    loadList()
+  }
+}
+
+const nextPage = () => {
+  if (page.value < totalPages.value) {
+    page.value++
+    loadList()
+  }
+}
+
+const goToJumpPage = () => {
+  const targetPage = parseInt(jumpPage.value)
+  if (!isNaN(targetPage) && targetPage >= 1 && targetPage <= totalPages.value) {
+    page.value = targetPage
+    loadList()
+    jumpPage.value = ''
+  } else {
+    uni.showToast({ title: '页码无效', icon: 'none' })
+  }
+}
+
+function getRechargeTypeText(type : string | null) : string {
+  if (type == 'wechat') return '微信充值'
+  if (type == 'alipay') return '支付宝充值'
+  if (type == 'system') return '后台补单'
+  return type || '其他充值'
+}
 </script>
 
 <style scoped lang="scss">
@@ -199,47 +255,8 @@ const tableData = ref<RechargeRecord[]>([
   white-space: nowrap;
 }
 
-.date-picker-wrap {
-  width: 220px;
-  height: 32px;
-  border: 1px solid #dcdfe6;
-  border-radius: 4px;
-  display: flex;
-  flex-direction: row;
-  align-items: center;
-  padding: 0 12px;
-}
-
-.calendar-icon {
-  font-size: 12px;
-  margin-right: 8px;
-}
-
-.date-placeholder {
-  font-size: 13px;
-  color: #c0c4cc;
-}
-
-.select-box {
-  width: 160px;
-  height: 32px;
-  border: 1px solid #dcdfe6;
-  border-radius: 4px;
-  display: flex;
-  flex-direction: row;
-  align-items: center;
-  justify-content: space-between;
-  padding: 0 12px;
-}
-
-.select-txt {
-  font-size: 13px;
-  color: #606266;
-}
-
-.arrow-down {
-  font-size: 8px;
-  color: #c0c4cc;
+.data-select {
+  width: 140px;
 }
 
 .search-wrap {
@@ -264,6 +281,7 @@ const tableData = ref<RechargeRecord[]>([
   align-items: center;
   justify-content: center;
   margin-left: 10px;
+  cursor: pointer;
 }
 
 .btn-txt {
@@ -336,6 +354,7 @@ const tableData = ref<RechargeRecord[]>([
   display: flex;
   align-items: center;
   justify-content: center;
+  cursor: pointer;
 }
 
 .btn-export-txt {
@@ -373,6 +392,7 @@ const tableData = ref<RechargeRecord[]>([
   display: flex;
   flex-direction: row;
   border-bottom: 1px solid #ebeef5;
+  min-height: 60px;
 }
 
 .td {
@@ -387,39 +407,71 @@ const tableData = ref<RechargeRecord[]>([
   color: #606266;
 }
 
-.col-id { width: 80px; }
-.col-avatar { width: 80px; }
-.col-nickname { width: 150px; }
+.u-info-box {
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+  .u-name { font-size: 13px; color: #303133; font-weight: 500; }
+  .u-email { font-size: 11px; color: #909399; }
+}
+
+.amount-box {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  .price { font-size: 14px; color: #303133; font-weight: bold; }
+  .give { font-size: 11px; color: #f56c6c; }
+}
+
+.status-tag {
+  font-size: 12px;
+  padding: 2px 8px;
+  border-radius: 2px;
+  &.paid { background-color: #f6ffed; color: #52c41a; border: 1px solid #b7eb8f; }
+  &.unpaid { background-color: #fff1f0; color: #ff4d4f; border: 1px solid #ffa39e; }
+}
+
+.col-id { width: 60px; }
+.col-nickname { width: 180px; justify-content: flex-start; }
 .col-orderno { width: 220px; }
 .col-amount { width: 120px; }
-.col-paid { width: 120px; }
-.col-type { width: 150px; }
-.col-time { width: 150px; }
+.col-paid { width: 100px; }
+.col-type { width: 120px; }
+.col-time { width: 160px; }
 .col-ops { flex: 1; min-width: 100px; }
 
-.avatar-box {
-  width: 40px;
-  height: 40px;
-  background-color: #f0f2f5;
-  border-radius: 4px;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  overflow: hidden;
-}
-
-.avatar-img-mock {
-  width: 100%;
-  height: 100%;
-  background-color: #ccc;
-}
-
-.avatar-placeholder {
-  font-size: 16px;
-}
-
 .op-link {
   font-size: 13px;
   color: #1890ff;
+  cursor: pointer;
 }
+
+/* 分页 */
+.pagination-footer {
+  padding: 24px 0;
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  justify-content: flex-end;
+  gap: 12px;
+}
+.total-txt { font-size: 14px; color: #606266; }
+.page-btns { display: flex; flex-direction: row; gap: 8px; }
+.p-btn { 
+  width: 32px; 
+  height: 32px; 
+  border: 1px solid #dcdfe6; 
+  border-radius: 4px; 
+  display: flex; 
+  align-items: center; 
+  justify-content: center; 
+  font-size: 14px;
+  cursor: pointer;
+}
+.p-btn.active { background-color: #2d8cf0; border-color: #2d8cf0; color: #fff; }
+.p-btn.disabled { color: #c0c4cc; background-color: #f5f7fa; cursor: not-allowed; }
+
+.page-jump { display: flex; flex-direction: row; align-items: center; gap: 8px; }
+.jump-txt { font-size: 14px; color: #606266; }
+.jump-input { width: 40px; height: 32px; border: 1px solid #dcdfe6; text-align: center; border-radius: 4px; font-size: 14px; }
 </style>