充值失败列表

src/api/member/recharge/index.ts

@@ -12,6 +12,7 @@ export interface MemberRechargePageReqVO {
 export interface MemberRechargeRespVO {
   id: number
   userId: number
+  userMobile: string
   amount: number
   quota: number
   payChannel: string
@@ -23,10 +24,27 @@ export interface MemberRechargeRespVO {
   callbackStatus: number
   remark: string
   createTime: string
+  redemptionCode: string
+  redemptionQuota: number
+  redeemed: number
+  redeemedName: string
+  manualOperatorId: number
+  manualProcessTime: string
+}
+
+export interface MemberRechargeManualReqVO {
+  rechargeId: number
+  redemptionCode: string
 }
 
 export const MemberRechargeApi = {
   getPage: async (params: MemberRechargePageReqVO) => {
     return request.get({ url: '/member/recharge/page', params })
+  },
+  getPendingPage: async (params: { pageNo: number; pageSize: number }) => {
+    return request.get({ url: '/member/recharge/pending-page', params })
+  },
+  manualRecharge: async (data: MemberRechargeManualReqVO) => {
+    return request.post({ url: '/member/recharge/manual', data })
   }
 }

src/views/member/recharge/index.vue

 <template>
   <ContentWrap>
-    <!-- 搜索工作栏 -->
-    <el-form
-      class="-mb-15px"
-      :model="queryParams"
-      ref="queryFormRef"
-      :inline="true"
-      label-width="100px"
-    >
-      <el-form-item label="用户ID" prop="userId">
-        <el-input
-          v-model="queryParams.userId"
-          placeholder="请输入用户ID"
-          clearable
-          @keyup.enter="handleQuery"
-          class="!w-240px"
-        />
-      </el-form-item>
-      <el-form-item label="支付渠道" prop="payChannel">
-        <el-select
-          v-model="queryParams.payChannel"
-          placeholder="请选择支付渠道"
-          clearable
-          class="!w-240px"
-        >
-          <el-option label="微信支付" value="wx" />
-          <el-option label="支付宝" value="alipay" />
-          <el-option label="旺铺聚合" value="wpgj" />
-        </el-select>
-      </el-form-item>
-      <el-form-item label="支付状态" prop="payStatus">
-        <el-select
-          v-model="queryParams.payStatus"
-          placeholder="请选择支付状态"
-          clearable
-          class="!w-240px"
+    <el-tabs v-model="activeTab" @tab-change="handleTabChange">
+      <!-- 充值记录 Tab -->
+      <el-tab-pane label="充值记录" name="list">
+        <!-- 搜索工作栏 -->
+        <el-form
+          class="-mb-15px"
+          :model="queryParams"
+          ref="queryFormRef"
+          :inline="true"
+          label-width="100px"
         >
-          <el-option label="待支付" :value="0" />
-          <el-option label="已支付" :value="1" />
-          <el-option label="已退款" :value="2" />
-        </el-select>
-      </el-form-item>
-      <el-form-item label="创建时间" prop="createTime">
-        <el-date-picker
-          v-model="queryParams.createTime"
-          value-format="YYYY-MM-DD HH:mm:ss"
-          type="daterange"
-          start-placeholder="开始日期"
-          end-placeholder="结束日期"
-          :default-time="[new Date('1 00:00:00'), new Date('1 23:59:59')]"
-          class="!w-220px"
-        />
-      </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-form-item>
-    </el-form>
+          <el-form-item label="用户ID" prop="userId">
+            <el-input
+              v-model="queryParams.userId"
+              placeholder="请输入用户ID"
+              clearable
+              @keyup.enter="handleQuery"
+              class="!w-240px"
+            />
+          </el-form-item>
+          <el-form-item label="支付渠道" prop="payChannel">
+            <el-select
+              v-model="queryParams.payChannel"
+              placeholder="请选择支付渠道"
+              clearable
+              class="!w-240px"
+            >
+              <el-option label="微信支付" value="wx" />
+              <el-option label="支付宝" value="alipay" />
+              <el-option label="旺铺聚合" value="wpgj" />
+            </el-select>
+          </el-form-item>
+          <el-form-item label="支付状态" prop="payStatus">
+            <el-select
+              v-model="queryParams.payStatus"
+              placeholder="请选择支付状态"
+              clearable
+              class="!w-240px"
+            >
+              <el-option label="待支付" :value="0" />
+              <el-option label="已支付" :value="1" />
+              <el-option label="已退款" :value="2" />
+            </el-select>
+          </el-form-item>
+          <el-form-item label="创建时间" prop="createTime">
+            <el-date-picker
+              v-model="queryParams.createTime"
+              value-format="YYYY-MM-DD HH:mm:ss"
+              type="daterange"
+              start-placeholder="开始日期"
+              end-placeholder="结束日期"
+              :default-time="[new Date('1 00:00:00'), new Date('1 23:59:59')]"
+              class="!w-220px"
+            />
+          </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-form-item>
+        </el-form>
+      </el-tab-pane>
+
+      <!-- 待充值 Tab -->
+      <el-tab-pane name="pending">
+        <template #label>
+          <span>待充值</span>
+        </template>
+      </el-tab-pane>
+    </el-tabs>
   </ContentWrap>
 
   <!-- 列表 -->
   <ContentWrap>
-    <el-table v-loading="loading" :data="list" :stripe="true" :show-overflow-tooltip="true">
+    <!-- 充值记录列表 -->
+    <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 }">
@@ -81,6 +94,15 @@
           <el-tag v-else-if="scope.row.payStatus === 2" type="danger">已退款</el-tag>
         </template>
       </el-table-column>
+      <el-table-column label="充值状态" align="center" prop="redeemed" width="120">
+        <template #default="scope">
+          <el-tag v-if="scope.row.redeemed === 0" type="info">无需充值</el-tag>
+          <el-tag v-else-if="scope.row.redeemed === 1" type="success">已充值</el-tag>
+          <el-tag v-else-if="scope.row.redeemed === 2" type="danger">待充值</el-tag>
+          <el-tag v-else-if="scope.row.redeemed === 3" type="warning">已人工充值</el-tag>
+          <span v-else>-</span>
+        </template>
+      </el-table-column>
       <el-table-column
         label="支付时间"
         align="center"
@@ -89,14 +111,72 @@
         width="180px"
       />
       <el-table-column label="交易流水号" align="center" prop="transactionId" min-width="180" />
-      <el-table-column label="回调状态" align="center" prop="callbackStatus" width="100">
+      <el-table-column label="备注" align="center" prop="remark" min-width="150" />
+      <el-table-column label="处理人" align="center" prop="manualOperatorId" width="100">
+        <template #default="scope">
+          <span v-if="scope.row.redeemed === 3">{{ scope.row.manualOperatorId || '-' }}</span>
+          <span v-else>-</span>
+        </template>
+      </el-table-column>
+      <el-table-column label="处理时间" align="center" prop="manualProcessTime" width="180">
         <template #default="scope">
-          <el-tag v-if="scope.row.callbackStatus === 0" type="info">未处理</el-tag>
-          <el-tag v-else type="success">已处理</el-tag>
+          <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-column label="充值金额" align="center" prop="amount">
+        <template #default="{ row }">
+          <span>¥{{ row.amount }}</span>
+        </template>
+      </el-table-column>
+      <el-table-column label="获得额度" align="center" prop="quota" width="120">
+        <template #default="{ row }">
+          {{ row.quota }}
+        </template>
+      </el-table-column>
+      <el-table-column label="支付渠道" align="center" prop="payChannelName" width="120" />
+      <el-table-column label="充值状态" align="center" prop="redeemed" width="120">
+        <template #default>
+          <el-tag type="danger">待充值</el-tag>
         </template>
       </el-table-column>
+      <el-table-column
+        label="支付时间"
+        align="center"
+        prop="payTime"
+        :formatter="dateFormatter"
+        width="180px"
+      />
+      <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"
@@ -104,14 +184,45 @@
         width="180px"
       />
     </el-table>
+
     <!-- 分页 -->
     <Pagination
       :total="total"
       v-model:page="queryParams.pageNo"
       v-model:limit="queryParams.pageSize"
       @pagination="getList"
+      v-if="activeTab === 'list'"
+    />
+    <Pagination
+      :total="pendingTotal"
+      v-model:page="pendingParams.pageNo"
+      v-model:limit="pendingParams.pageSize"
+      @pagination="getPendingList"
+      v-if="activeTab === 'pending'"
     />
   </ContentWrap>
+
+  <!-- 人工充值弹窗 -->
+  <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>
+      <el-form-item label="兑换码" prop="redemptionCode">
+        <el-input v-model="formData.redemptionCode" placeholder="请输入兑换码" />
+      </el-form-item>
+    </el-form>
+    <template #footer>
+      <el-button @click="dialogVisible = false">取 消</el-button>
+      <el-button type="primary" @click="handleManualRecharge" :loading="submitLoading">确 定</el-button>
+    </template>
+  </Dialog>
 </template>
 
 <script setup lang="ts">
@@ -121,9 +232,17 @@ import { MemberRechargeApi, MemberRechargeRespVO } from '@/api/member/recharge'
 /** 会员充值记录 列表 */
 defineOptions({ name: 'MemberRecharge' })
 
+const activeTab = ref('list')
 const loading = ref(true)
+const pendingLoading = ref(true)
 const list = ref<MemberRechargeRespVO[]>([])
+const pendingList = ref<MemberRechargeRespVO[]>([])
 const total = ref(0)
+const pendingTotal = ref(0)
+const dialogVisible = ref(false)
+const submitLoading = ref(false)
+const formRef = ref()
+
 const queryParams = reactive({
   pageNo: 1,
   pageSize: 10,
@@ -132,8 +251,40 @@ const queryParams = reactive({
   payStatus: undefined,
   createTime: []
 })
+
+const pendingParams = reactive({
+  pageNo: 1,
+  pageSize: 10
+})
+
 const queryFormRef = ref()
 
+const formData = reactive({
+  rechargeId: undefined as number | undefined,
+  userMobile: '',
+  amount: '',
+  redemptionCode: ''
+})
+
+const formRules = {
+  redemptionCode: [{ required: true, message: '请输入兑换码', trigger: 'blur' }]
+}
+
+/** 格式化日期时间 */
+const formatDate = (date: string) => {
+  if (!date) return '-'
+  return date.substring(0, 19)
+}
+
+/** Tab 切换 */
+const handleTabChange = (tab: string) => {
+  if (tab === 'pending') {
+    getPendingList()
+  } else {
+    getList()
+  }
+}
+
 /** 查询列表 */
 const getList = async () => {
   loading.value = true
@@ -146,6 +297,18 @@ const getList = async () => {
   }
 }
 
+/** 查询待充值列表 */
+const getPendingList = async () => {
+  pendingLoading.value = true
+  try {
+    const data = await MemberRechargeApi.getPendingPage(pendingParams)
+    pendingList.value = data.list
+    pendingTotal.value = data.total
+  } finally {
+    pendingLoading.value = false
+  }
+}
+
 /** 搜索按钮操作 */
 const handleQuery = () => {
   queryParams.pageNo = 1
@@ -158,6 +321,33 @@ const resetQuery = () => {
   handleQuery()
 }
 
+/** 打开人工充值弹窗 */
+const openManualDialog = (row: MemberRechargeRespVO) => {
+  formData.rechargeId = row.id
+  formData.userMobile = row.userMobile || ''
+  formData.amount = row.amount ? `¥${row.amount}` : ''
+  formData.redemptionCode = ''
+  dialogVisible.value = true
+}
+
+/** 人工充值 */
+const handleManualRecharge = async () => {
+  if (!formRef.value) return
+  await formRef.value.validate()
+  submitLoading.value = true
+  try {
+    await MemberRechargeApi.manualRecharge({
+      rechargeId: formData.rechargeId!,
+      redemptionCode: formData.redemptionCode
+    })
+    dialogVisible.value = false
+    getPendingList()
+    ElMessage.success('人工充值处理成功')
+  } finally {
+    submitLoading.value = false
+  }
+}
+
 /** 初始化 */
 onMounted(() => {
   getList()