admin模块接入数据库

pages/mall/admin/distribution/promoter/index.uvue

@@ -4,10 +4,12 @@
       <view class="filter-row">
         <view class="filter-item">
           <text class="label">时间选择：</text>
-          <view class="date-picker-mock">
-            <text class="placeholder">开始日期 - 结束日期</text>
-            <text class="icon-calendar">📅</text>
-          </view>
+          <AnalyticsDateRangePicker
+            :initialStartDate="startDate"
+            :initialEndDate="endDate"
+            @apply="onApplyRange"
+            @clear="onClearRange"
+          />
         </view>
         <view class="filter-item">
           <text class="label">搜索：</text>
@@ -23,6 +25,11 @@
         <button class="btn ghost small" @click="onExport">导出</button>
       </view>
       <view class="table-container">
+        <!-- Loading 遮罩 -->
+        <view v-if="isLoading" class="loading-mask">
+          <text class="loading-text">数据加载中...</text>
+        </view>
+
         <view class="table-header">
           <view class="col col-id"><text>ID</text></view>
           <view class="col col-img"><text>头像</text></view>
@@ -38,16 +45,19 @@
           <view class="col col-ops"><text>操作</text></view>
         </view>
         <view class="table-body">
+          <view v-if="promoterList.length === 0 && !isLoading" class="empty-row">
+            <text>暂无数据</text>
+          </view>
           <view v-for="item in promoterList" :key="item.id" class="table-row">
             <view class="col col-id"><text>{{ item.id }}</text></view>
             <view class="col col-img">
-              <image class="table-img" src="/static/logo.png" mode="aspectFill" />
+              <image class="table-img" :src="item.avatar_url || '/static/logo.png'" mode="aspectFill" />
             </view>
             <view class="col col-info">
               <view class="user-info-box">
                 <text class="info-text">昵称:{{ item.nickname }}</text>
-                <text class="info-text">姓名:{{ item.name }}</text>
-                <text class="info-text">电话:{{ item.phone }}</text>
+                <text class="info-text">姓名:{{ item.name || '-' }}</text>
+                <text class="info-text">电话:{{ item.phone || '-' }}</text>
               </view>
             </view>
             <view class="col col-level"><text>{{ item.level }}</text></view>
@@ -68,21 +78,88 @@
         </view>
       </view>
       <view class="pagination">
-        <text class="page-info">共 {{ promoterList.length }} 条</text>
+        <view class="pager-btns">
+          <button class="btn small" :disabled="page <= 1" @click="onPrevPage">上一页</button>
+          <text class="page-num">第 {{ page }} 页</text>
+          <button class="btn small" :disabled="promoterList.length < pageSize" @click="onNextPage">下一页</button>
+        </view>
+        <text class="page-info">当前页数据 {{ promoterList.length }} 条</text>
       </view>
     </view>
   </view>
 </template>
 
 <script setup lang="uts">
-import { ref } from 'vue'
-const promoterList = ref([
-  { id: '82764', nickname: '183****5762', name: '-', phone: '183****5762', level: '--', userCount: 0, orderCount: 0, orderAmount: '0.00', commissionTotal: '0.00', withdrawnAmount: 0, withdrawCount: 0, unwithdrawnAmount: 0 },
-])
-function onSearch() { uni.showToast({ title: '查询中...', icon: 'none' }) }
-function onExport() { uni.showToast({ title: '开始导出', icon: 'none' }) }
-function onPromoter(item: any) { uni.showToast({ title: '推广人: ' + item.id, icon: 'none' }) }
-function onMore(item: any) { uni.showToast({ title: '更多: ' + item.id, icon: 'none' }) }
+import { ref, onMounted } from 'vue'
+import AnalyticsDateRangePicker from '@/components/analytics/AnalyticsDateRangePicker.uvue'
+import { getPromoterList, Promoter, PromoterListParams } from '@/services/admin/distributionService.uts'
+
+const promoterList = ref<Promoter[]>([])
+const isLoading = ref(false)
+const searchQuery = ref('')
+const page = ref(1)
+const pageSize = 20
+
+const startDate = ref<string>('')
+const endDate = ref<string>('')
+
+onMounted(() => {
+  loadPromoters()
+})
+
+async function loadPromoters() {
+  isLoading.value = true
+  try {
+    const params: PromoterListParams = {
+      search: searchQuery.value,
+      page: page.value,
+      pageSize: pageSize,
+      startTime: startDate.value ? (startDate.value + ' 00:00:00') : null,
+      endTime: endDate.value ? (endDate.value + ' 23:59:59') : null
+    }
+    const res = await getPromoterList(params)
+    promoterList.value = res
+  } catch (e) {
+    uni.showToast({ title: '加载推广员失败', icon: 'none' })
+  } finally {
+    isLoading.value = false
+  }
+}
+
+function onSearch() {
+  page.value = 1
+  loadPromoters()
+}
+
+function onApplyRange(payload: any) {
+  startDate.value = payload?.start ?? ''
+  endDate.value = payload?.end ?? ''
+  page.value = 1
+  loadPromoters()
+}
+
+function onClearRange() {
+  startDate.value = ''
+  endDate.value = ''
+  page.value = 1
+  loadPromoters()
+}
+
+function onNextPage() {
+  if (promoterList.value.length < pageSize) return
+  page.value++
+  loadPromoters()
+}
+
+function onPrevPage() {
+  if (page.value <= 1) return
+  page.value--
+  loadPromoters()
+}
+
+function onExport() { uni.showToast({ title: '导出功能开发中', icon: 'none' }) }
+function onPromoter(item : Promoter) { uni.showToast({ title: '推广人: ' + item.id, icon: 'none' }) }
+function onMore(item : Promoter) { uni.showToast({ title: '更多: ' + item.id, icon: 'none' }) }
 </script>
 
 <style scoped lang="scss">
@@ -109,6 +186,26 @@ function onMore(item: any) { uni.showToast({ title: '更多: ' + item.id, icon:
 .op-link { color: #1890ff; cursor: pointer; }
 .op-divider { color: #e8e8e8; margin: 0 8px; }
 .arrow-down { font-size: 10px; color: #1890ff; margin-left: 4px; }
-.pagination { padding: 16px 24px; border-top: 1px solid #f0f0f0; }
+.pagination { padding: 16px 24px; border-top: 1px solid #f0f0f0; display: flex; flex-direction: row; align-items: center; justify-content: space-between; }
+.pager-btns { display: flex; flex-direction: row; align-items: center; gap: 12px; }
+.page-num { font-size: 14px; color: #333; }
 .page-info { font-size: 14px; color: #999; }
+
+/* Loading & Empty Styles */
+.loading-mask {
+  position: absolute;
+  top: 0; left: 0; right: 0; bottom: 0;
+  background-color: rgba(255, 255, 255, 0.7);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  z-index: 10;
+}
+.loading-text { color: #1890ff; font-size: 14px; }
+.empty-row {
+  padding: 40px 0;
+  text-align: center;
+  color: #999;
+  font-size: 14px;
+}
 </style>