增加会员明细和导出功能

jsowell-ui/src/views/member/info/index.vue

@@ -168,6 +168,13 @@
                     </el-button>
                 </template>
             </el-table-column>
+          <el-table-column label="查看" align="center" class-name="small-padding fixed-width">
+            <template slot-scope="scope">
+              <el-button size="mini" type="text" @click="viewWalletDetails(scope.row)" slot="reference">
+                明细
+              </el-button>
+            </template>
+          </el-table-column>
         </el-table>
 
         <pagination
@@ -177,6 +184,57 @@
             :limit.sync="queryParams.pageSize"
             @pagination="getList"
         />
+        <!-- 明细 -->
+        <el-dialog :visible.sync="vehicleDetails" title="会员钱包流水明细" width="70%">
+          <el-form :model="detailParameters" size="small" :inline="true">
+            <el-form-item label="选择日期范围" prop="dateRange">
+              <el-date-picker
+                v-model="dateRange"
+                type="daterange"
+                value-format="yyyy-MM"
+                range-separator="-"
+                start-placeholder="开始月份"
+                end-placeholder="结束月份"
+              />
+            </el-form-item>
+            <el-form-item style="margin-left: 10px">
+              <el-button type="primary" icon="el-icon-search" size="mini" @click="searchWalletDetails">
+                搜索
+              </el-button>
+              <el-button icon="el-icon-download" type="warning" size="mini" @click="exportWalletList">
+                导出
+              </el-button>
+            </el-form-item>
+            <el-col :span="24">
+              <el-form-item label="总充值:"> {{ totalRechargeAmount }}</el-form-item>
+              <el-form-item label="总消费:" style="padding-left: 50px">{{ totalConsumeAmount }}</el-form-item>
+              <el-form-item label="总余额:" style="padding-left: 50px">{{ totalBalance }}</el-form-item>
+              <el-form-item label="充值金额:" style="padding-left: 50px">{{ cumulativeRechargeAmount }}</el-form-item>
+              <el-form-item label="订单消费金额:" style="padding-left: 50px">{{ cumulativeConsumeAmount }}</el-form-item>
+            </el-col>
+          </el-form>
+          <el-table :data="memberLogList" stripe style="width: 100%" v-loading="detailLoading">
+            <el-table-column label="出账/进账类型" align="center">
+              <template #default="scope">
+                {{ getTypeText(scope.row.type) }}
+              </template>
+            </el-table-column>
+            <el-table-column label="钱包编号" align="center" prop="walletCode"/>
+            <el-table-column label="操作类型" align="center">
+              <template #default="scope">
+                {{ getSubTypeText(scope.row.subType) }}
+              </template>
+            </el-table-column>
+            <el-table-column label="订单编号" align="center" prop="relatedOrderCode"/>
+            <el-table-column label="金额" align="center" prop="orderAmount"/>
+            <el-table-column label="创建时间" align="center" prop="transactionTime"/>
+            <el-table-column label="操作人员" align="center" prop="createBy"/>
+          </el-table>
+
+          <!-- Pagination -->
+          <pagination v-show="memberLogList.length > 0" :total="closeTotal" :page.sync="detailParameters.pageNum"
+                      :limit.sync="detailParameters.pageSize" @pagination="fetchWalletDetails" style="margin-top: 20px"/>
+        </el-dialog>
 
         <!-- 添加或修改会员基础信息对话框 -->
         <el-dialog :title="title" :visible.sync="open" width="500px" append-to-body>
@@ -247,6 +305,7 @@ import {
     updateInfo,
     updateMemberBalance,
     getMerchantListByAuth,
+    queryMemberDetails
 } from "@/api/member/info";
 
 export default {
@@ -297,7 +356,26 @@ export default {
             // 表单参数
             form: {},
             // 表单校验
-            rules: {}
+            rules: {},
+          detailParameters: {
+            memberId: null,
+            pageNum: 1,
+            pageSize: 10,
+            tradeDate: null, // 添加日期范围参数
+            endDate: null // 新增结束日期参数
+          },
+          // 明细相关变量
+          memberLogList: [],
+          closeTotal: 0,
+          totalRechargeAmount: 0,
+          totalConsumeAmount: 0,
+          totalBalance: 0,
+          cumulativeRechargeAmount: 0,
+          cumulativeConsumeAmount: 0,
+          detailLoading: false,
+          vehicleDetails: false,
+          createTimeRange: null,
+          dateRange: null
         };
     },
     computed: {
@@ -310,6 +388,7 @@ export default {
         this.getList();
 
         this.getMerchantList();
+        this.defaultDateRange = this.getValidDateRange();
     },
     methods: {
         /** 查询会员基础信息列表 */
@@ -475,6 +554,116 @@ export default {
             this.download('member/info/export', {
                 ...this.queryParams
             }, `info_${new Date().getTime()}.xlsx`)
+        },
+        getTypeText(type) {
+          switch (type) {
+            case '1':
+              return '进账';
+            case '2':
+              return '出账';
+            default:
+              return type;
+          }
+        },
+        getSubTypeText(subType) {
+          switch (subType) {
+            case '10':
+              return '充值';
+            case '11':
+              return '赠送';
+            case '12':
+              return '订单结算退款';
+            case '20':
+              return '后管扣款';
+            case '21':
+              return '订单付款';
+            case '22':
+              return '用户退款';
+            default:
+              return subType;
+          }
+        },
+        // 查看会员钱包流水明细
+        viewWalletDetails(row) {
+          if (!row.memberId) {
+            this.$modal.msgError('会员 ID 不能为空');
+            return;
+          }
+
+          // 设置日期范围为默认值
+          this.dateRange = this.defaultDateRange;
+
+          // 设置查询参数
+          this.detailParameters = {
+            memberId: row.memberId,
+            pageNum: 1,
+            pageSize: 10,
+            tradeDate: this.defaultDateRange[0],
+            endDate: this.defaultDateRange[1]
+          };
+
+          // 获取明细数据
+          this.fetchWalletDetails();
+          this.vehicleDetails = true;
+        },
+        getValidDateRange() {
+          if (this.dateRange) {
+            return this.dateRange;
+          }
+
+          // 默认查询当前月
+          const now = new Date();
+          const year = now.getFullYear();
+          const month = String(now.getMonth() + 1).padStart(2, '0');
+          return [
+            `${year}-${month}`,
+            `${year}-${month}`
+          ];
+        },
+        fetchWalletDetails() {
+          const params = {
+            memberId: this.detailParameters.memberId,
+            tradeDate: this.detailParameters.tradeDate,
+            endDate: this.detailParameters.endDate,
+            pageNum: this.detailParameters.pageNum,
+            pageSize: this.detailParameters.pageSize
+          };
+
+          queryMemberDetails(params).then(response => {
+            if (response.code === 200) {
+              const data = response.data;
+              this.memberLogList = data.pageResponse.list || [];
+              this.closeTotal = data.pageResponse.total || 0;
+
+              this.totalRechargeAmount = data.totalRechargeAmount || 0;
+              this.totalConsumeAmount = data.totalConsumeAmount || 0;
+              this.totalBalance = data.totalBalance || 0;
+              this.cumulativeRechargeAmount = data.cumulativeRechargeAmount || 0;
+              this.cumulativeConsumeAmount = data.cumulativeConsumeAmount || 0;
+            } else {
+              this.$modal.msgError(response.msg);
+            }
+            this.detailLoading = false;
+          }).catch(() => {
+            this.detailLoading = false;
+          });
+        },
+        searchWalletDetails() {
+          if (this.dateRange) {
+            this.detailParameters.tradeDate = this.dateRange[0];
+            this.detailParameters.endDate = this.dateRange[1];
+          } else {
+            this.$modal.msgWarning('请选择日期范围');
+            return;
+          }
+          this.detailParameters.pageNum = 1;
+          this.fetchWalletDetails();
+        },
+        exportWalletList(){
+          this.download('member/info/exportWalletList', {
+            ...this.queryParams,
+            memberId: this.detailParameters.memberId
+          }, `info_${new Date().getTime()}.xlsx`)
         }
     }
 };