充值订单筛选

src/api/member/recharge/index.ts

@@ -3,14 +3,15 @@ import request from '@/config/axios'
 export interface MemberRechargePageReqVO {
   pageNo: number
   pageSize: number
-  userId?: number
+  userMobile?: string
   payChannel?: string
   payStatus?: number
+  redeemed?: number
   createTime?: [string, string]
 }
 
 export interface MemberRechargeRespVO {
-  id: number
+  id: number | null
   userId: number
   userMobile: string
   amount: number
@@ -46,5 +47,8 @@ export const MemberRechargeApi = {
   },
   manualRecharge: async (data: MemberRechargeManualReqVO) => {
     return request.post({ url: '/member/recharge/manual', data })
+  },
+  getPendingCount: async () => {
+    return request.get({ url: '/member/recharge/pending-count' })
   }
 }

src/views/member/recharge/index.vue

@@ -11,10 +11,10 @@
           :inline="true"
           label-width="100px"
         >
-          <el-form-item label="用户ID" prop="userId">
+          <el-form-item label="手机号" prop="userMobile">
             <el-input
-              v-model="queryParams.userId"
-              placeholder="请输入用户ID"
+              v-model="queryParams.userMobile"
+              placeholder="请输入手机号"
               clearable
               @keyup.enter="handleQuery"
               class="!w-240px"
@@ -44,6 +44,19 @@
               <el-option label="已退款" :value="2" />
             </el-select>
           </el-form-item>
+          <el-form-item label="充值状态" prop="redeemed">
+            <el-select
+              v-model="queryParams.redeemed"
+              placeholder="请选择充值状态"
+              clearable
+              class="!w-240px"
+            >
+              <el-option label="无需充值" :value="0" />
+              <el-option label="已充值" :value="1" />
+              <el-option label="待充值" :value="2" />
+              <el-option label="已人工充值" :value="3" />
+            </el-select>
+          </el-form-item>
           <el-form-item label="创建时间" prop="createTime">
             <el-date-picker
               v-model="queryParams.createTime"
@@ -56,8 +69,12 @@
             />
           </el-form-item>
           <el-form-item>
-            <el-button @click="handleQuery"><Icon icon="ep:search" class="mr-5px" /> 搜索</el-button>
-            <el-button @click="resetQuery"><Icon icon="ep:refresh" class="mr-5px" /> 重置</el-button>
+            <el-button @click="handleQuery"
+              ><Icon icon="ep:search" class="mr-5px" /> 搜索</el-button
+            >
+            <el-button @click="resetQuery"
+              ><Icon icon="ep:refresh" class="mr-5px" /> 重置</el-button
+            >
           </el-form-item>
         </el-form>
       </el-tab-pane>
@@ -65,7 +82,9 @@
       <!-- 待充值 Tab -->
       <el-tab-pane name="pending">
         <template #label>
-          <span>待充值</span>
+          <el-badge :value="pendingCount" :hidden="pendingCount === 0" :max="99">
+            <span>待充值</span>
+          </el-badge>
         </template>
       </el-tab-pane>
     </el-tabs>
@@ -74,8 +93,14 @@
   <!-- 列表 -->
   <ContentWrap>
     <!-- 充值记录列表 -->
-    <el-table v-loading="loading" :data="list" :stripe="true" :show-overflow-tooltip="true" v-if="activeTab === 'list'">
-      <el-table-column label="用户名" align="center" prop="userMobile" />
+    <el-table
+      v-loading="loading"
+      :data="list"
+      :stripe="true"
+      :show-overflow-tooltip="true"
+      v-if="activeTab === 'list'"
+    >
+      <el-table-column label="手机号" align="center" prop="userMobile" />
       <el-table-column label="充值金额" align="center" prop="amount">
         <template #default="{ row }">
           <span>¥{{ row.amount }}</span>
@@ -112,30 +137,38 @@
       />
       <el-table-column label="交易流水号" align="center" prop="transactionId" min-width="180" />
       <el-table-column label="备注" align="center" prop="remark" min-width="150" />
-      <el-table-column label="处理人" align="center" prop="manualOperatorId" width="100">
+      <el-table-column
+        label="创建时间"
+        align="center"
+        prop="createTime"
+        :formatter="dateFormatter"
+        width="180px"
+      />
+      <el-table-column label="处理人" align="center" prop="manualOperatorName" width="100">
         <template #default="scope">
-          <span v-if="scope.row.redeemed === 3">{{ scope.row.manualOperatorId || '-' }}</span>
+          <span v-if="scope.row.redeemed === 3">{{ scope.row.manualOperatorName || '-' }}</span>
           <span v-else>-</span>
         </template>
       </el-table-column>
       <el-table-column label="处理时间" align="center" prop="manualProcessTime" width="180">
         <template #default="scope">
-          <span v-if="scope.row.redeemed === 3">{{ scope.row.manualProcessTime ? formatDate(scope.row.manualProcessTime) : '-' }}</span>
+          <span v-if="scope.row.redeemed === 3 && scope.row.manualProcessTime">{{
+            formatDate(scope.row.manualProcessTime)
+          }}</span>
           <span v-else>-</span>
         </template>
       </el-table-column>
-      <el-table-column
-        label="创建时间"
-        align="center"
-        prop="createTime"
-        :formatter="dateFormatter"
-        width="180px"
-      />
     </el-table>
 
     <!-- 待充值列表 -->
-    <el-table v-loading="pendingLoading" :data="pendingList" :stripe="true" :show-overflow-tooltip="true" v-if="activeTab === 'pending'">
-      <el-table-column label="用户名" align="center" prop="userMobile" />
+    <el-table
+      v-loading="pendingLoading"
+      :data="pendingList"
+      :stripe="true"
+      :show-overflow-tooltip="true"
+      v-if="activeTab === 'pending'"
+    >
+      <el-table-column label="手机号" align="center" prop="userMobile" />
       <el-table-column label="充值金额" align="center" prop="amount">
         <template #default="{ row }">
           <span>¥{{ row.amount }}</span>
@@ -162,27 +195,17 @@
       <el-table-column label="交易流水号" align="center" prop="transactionId" min-width="180" />
       <el-table-column label="备注" align="center" prop="remark" min-width="150" />
       <el-table-column
-        label="操作"
-        align="center"
-        width="100"
-      >
-        <template #default="scope">
-          <el-button
-            type="primary"
-            link
-            @click="openManualDialog(scope.row)"
-          >
-            人工充值
-          </el-button>
-        </template>
-      </el-table-column>
-      <el-table-column
         label="创建时间"
         align="center"
         prop="createTime"
         :formatter="dateFormatter"
         width="180px"
       />
+      <el-table-column label="操作" align="center" width="100">
+        <template #default="scope">
+          <el-button type="primary" link @click="openManualDialog(scope.row)"> 人工充值 </el-button>
+        </template>
+      </el-table-column>
     </el-table>
 
     <!-- 分页 -->
@@ -205,14 +228,8 @@
   <!-- 人工充值弹窗 -->
   <Dialog v-model="dialogVisible" title="人工充值" width="400px">
     <el-form ref="formRef" :model="formData" :rules="formRules" label-width="100px">
-      <el-form-item label="充值记录ID">
-        <el-input v-model="formData.rechargeId" disabled />
-      </el-form-item>
-      <el-form-item label="用户" prop="userMobile">
-        <el-input v-model="formData.userMobile" disabled />
-      </el-form-item>
-      <el-form-item label="充值金额" prop="amount">
-        <el-input v-model="formData.amount" disabled />
+      <el-form-item label="充值金额">
+        <span>¥{{ formData.amount }}</span>
       </el-form-item>
       <el-form-item label="兑换码" prop="redemptionCode">
         <el-input v-model="formData.redemptionCode" placeholder="请输入兑换码" />
@@ -220,7 +237,9 @@
     </el-form>
     <template #footer>
       <el-button @click="dialogVisible = false">取 消</el-button>
-      <el-button type="primary" @click="handleManualRecharge" :loading="submitLoading">确 定</el-button>
+      <el-button type="primary" @click="handleManualRecharge" :loading="submitLoading"
+        >确 定</el-button
+      >
     </template>
   </Dialog>
 </template>
@@ -239,6 +258,7 @@ const list = ref<MemberRechargeRespVO[]>([])
 const pendingList = ref<MemberRechargeRespVO[]>([])
 const total = ref(0)
 const pendingTotal = ref(0)
+const pendingCount = ref(0)
 const dialogVisible = ref(false)
 const submitLoading = ref(false)
 const formRef = ref()
@@ -246,9 +266,10 @@ const formRef = ref()
 const queryParams = reactive({
   pageNo: 1,
   pageSize: 10,
-  userId: undefined,
+  userMobile: undefined,
   payChannel: undefined,
   payStatus: undefined,
+  redeemed: undefined,
   createTime: []
 })
 
@@ -261,7 +282,6 @@ const queryFormRef = ref()
 
 const formData = reactive({
   rechargeId: undefined as number | undefined,
-  userMobile: '',
   amount: '',
   redemptionCode: ''
 })
@@ -271,15 +291,28 @@ const formRules = {
 }
 
 /** 格式化日期时间 */
-const formatDate = (date: string) => {
+const formatDate = (date: any) => {
   if (!date) return '-'
-  return date.substring(0, 19)
+  if (typeof date === 'number') {
+    // 毫秒时间戳
+    const d = new Date(date)
+    const pad = (n: number) => n.toString().padStart(2, '0')
+    return `${d.getFullYear()}-${pad(d.getMonth() + 1)}-${pad(d.getDate())} ${pad(d.getHours())}:${pad(d.getMinutes())}:${pad(d.getSeconds())}`
+  }
+  if (typeof date === 'string') {
+    return date.substring(0, 19)
+  }
+  if (date instanceof Date) {
+    return date.toLocaleString()
+  }
+  return String(date)
 }
 
 /** Tab 切换 */
 const handleTabChange = (tab: string) => {
   if (tab === 'pending') {
     getPendingList()
+    getPendingCount()
   } else {
     getList()
   }
@@ -309,6 +342,17 @@ const getPendingList = async () => {
   }
 }
 
+/** 获取待充值数量 */
+const getPendingCount = async () => {
+  try {
+    const res = await MemberRechargeApi.getPendingCount()
+    pendingCount.value = res || 0
+    console.log('pendingCount.value', pendingCount.value, 'res.data', res)
+  } catch {
+    pendingCount.value = 0
+  }
+}
+
 /** 搜索按钮操作 */
 const handleQuery = () => {
   queryParams.pageNo = 1
@@ -323,9 +367,12 @@ const resetQuery = () => {
 
 /** 打开人工充值弹窗 */
 const openManualDialog = (row: MemberRechargeRespVO) => {
+  if (!row.id) {
+    ElMessage.error('充值记录ID无效')
+    return
+  }
   formData.rechargeId = row.id
-  formData.userMobile = row.userMobile || ''
-  formData.amount = row.amount ? `¥${row.amount}` : ''
+  formData.amount = row.amount ? `${row.amount}` : ''
   formData.redemptionCode = ''
   dialogVisible.value = true
 }
@@ -342,6 +389,7 @@ const handleManualRecharge = async () => {
     })
     dialogVisible.value = false
     getPendingList()
+    getPendingCount()
     ElMessage.success('人工充值处理成功')
   } finally {
     submitLoading.value = false
@@ -351,5 +399,6 @@ const handleManualRecharge = async () => {
 /** 初始化 */
 onMounted(() => {
   getList()
+  getPendingCount()
 })
 </script>