style: 明细

src/views/biz/membershipPoint/index.vue

@@ -46,7 +46,7 @@ const memberTypeOptions = [
 // 添加涨分弹窗相关状态
 const raisePointDialog = ref(false);
 const raisePointForm = ref({
-  spendingPoints: 0,
+  pointNum: 0,
   reasonId: "",
   description: ""
 });
@@ -62,6 +62,18 @@ const reasonOptions = [
   { value: 9, label: "其他" }
 ];
 
+// 明细抽屉相关
+const detailDrawer = ref(false);
+const detailLoading = ref(false);
+const detailData = ref([]);
+const detailTotal = ref(0);
+const detailQueryParams = ref({
+  pageNum: 1,
+  pageSize: 20,
+  userId: "",
+  companyId: ""
+});
+
 // 获取公司列表
 const getCompanyList = async () => {
   try {
@@ -242,8 +254,11 @@ const columns: TableColumnList = [
 
 // 添加操作方法
 const handleDetail = row => {
-  console.log("查看明细", row);
-  // TODO: 实现查看明细逻辑
+  detailQueryParams.value.userId = row.userId;
+  detailQueryParams.value.companyId = row.companyId;
+  detailQueryParams.value.pageNum = 1;
+  detailDrawer.value = true;
+  getPointDetail();
 };
 
 const handleEdit = row => {
@@ -254,7 +269,7 @@ const handleEdit = row => {
 const handleRaise = row => {
   currentRow.value = row;
   raisePointForm.value = {
-    spendingPoints: 0,
+    pointNum: 0,
     reasonId: "",
     description: ""
   };
@@ -264,7 +279,7 @@ const handleRaise = row => {
 // 添加提交方法
 const handleRaiseSubmit = async () => {
   try {
-    if (raisePointForm.value.spendingPoints <= 0) {
+    if (raisePointForm.value.pointNum <= 0) {
       ElMessage.warning("请输入正确的积分数量");
       return;
     }
@@ -276,18 +291,20 @@ const handleRaiseSubmit = async () => {
     const params = {
       userId: currentRow.value.userId,
       companyId: currentRow.value.companyId,
-      spendingPoints: raisePointForm.value.spendingPoints,
+      pointNum: raisePointForm.value.pointNum,
       reasonId: raisePointForm.value.reasonId,
       description: raisePointForm.value.description
     };
 
     console.log("params", params);
 
-    const res = await request(bizApi("membershipPointRaise"), {
+    const res = await request(bizApi("raisePoint"), {
       method: "POST",
       body: JSON.stringify(params)
     });
 
+    console.info(res);
+
     if (res.status === 200) {
       ElMessage.success("涨分成功");
       raisePointDialog.value = false;
@@ -296,6 +313,7 @@ const handleRaiseSubmit = async () => {
       ElMessage.error(res.msg || "涨分失败");
     }
   } catch (error) {
+    console.info(error);
     console.error("涨分失败:", error);
     ElMessage.error(error.message || "涨分失败");
   }
@@ -322,6 +340,83 @@ const handleDelete = row => {
     });
 };
 
+// 获取积分明细
+const getPointDetail = async () => {
+  try {
+    detailLoading.value = true;
+    const params = { ...detailQueryParams.value };
+    const res = await request(bizApi("pointSpendPage"), {
+      method: "POST",
+      body: JSON.stringify(params)
+    });
+
+    if (res.status === 200) {
+      detailData.value = res.data.rows;
+      detailTotal.value = res.data.records;
+    } else {
+      ElMessage.error(res.msg || "获取明细失败");
+    }
+  } catch (error) {
+    console.error("获取积分明细失败:", error);
+    ElMessage.error(error.message || "获取明细失败");
+  } finally {
+    detailLoading.value = false;
+  }
+};
+
+// 明细分页改变
+const handleDetailSizeChange = (val: number) => {
+  detailQueryParams.value.pageSize = val;
+  getPointDetail();
+};
+
+const handleDetailCurrentChange = (val: number) => {
+  detailQueryParams.value.pageNum = val;
+  getPointDetail();
+};
+
+// 明细表格列定义
+const detailColumns = [
+  {
+    label: "变动积分",
+    prop: "spendingPoints",
+    width: "80",
+    align: "center"
+  },
+  {
+    label: "类型",
+    prop: "spendingType",
+    width: "60",
+    formatter: row => {
+      return row.spendingType === 0 ? "充值" : "消费";
+    }
+  },
+  {
+    label: "变动原因",
+    prop: "reasonId",
+    width: "80",
+    formatter: row => {
+      const reason = reasonOptions.find(item => item.value === row.reasonId);
+      return reason ? reason.label : "-";
+    }
+  },
+  {
+    label: "备注说明",
+    prop: "description",
+    width: "150"
+  },
+  {
+    label: "创建时间",
+    prop: "createTime",
+    width: "160",
+    formatter: row => {
+      return row.createTime
+        ? dayjs(row.createTime).format("YYYY-MM-DD HH:mm:ss")
+        : "";
+    }
+  }
+];
+
 // 页面加载时获取数据
 onMounted(() => {
   getPointList();
@@ -470,7 +565,7 @@ onMounted(() => {
         </el-form-item>
         <el-form-item label="调整积分：" required>
           <el-input-number
-            v-model="raisePointForm.spendingPoints"
+            v-model="raisePointForm.pointNum"
             :min="1"
             :max="999999"
             placeholder="请输入调整积分"
@@ -506,6 +601,69 @@ onMounted(() => {
         </span>
       </template>
     </el-dialog>
+
+    <!-- 添加明细抽屉 -->
+    <el-drawer
+      v-model="detailDrawer"
+      title="积分明细"
+      width="50%"
+      :close-on-click-modal="false"
+      :before-close="() => (detailDrawer = false)"
+    >
+      <div class="detail-container">
+        <pure-table
+          v-loading="detailLoading"
+          :data="detailData"
+          :columns="detailColumns"
+          :height="height"
+          row-key="id"
+        >
+          <template #operation="{ row }">
+            <el-button
+              link
+              type="primary"
+              size="small"
+              @click="handleDetail(row)"
+            >
+              明细
+            </el-button>
+            <!-- <el-button link type="primary" size="small" @click="handleEdit(row)">
+              编辑
+            </el-button> -->
+            <el-button
+              link
+              type="primary"
+              size="small"
+              @click="handleRaise(row)"
+            >
+              涨分
+            </el-button>
+            <el-button
+              link
+              type="danger"
+              size="small"
+              disabled
+              :style="{ opacity: 0.5 }"
+              @click="handleDelete(row)"
+            >
+              删除
+            </el-button>
+          </template>
+        </pure-table>
+
+        <div class="pagination-container">
+          <el-pagination
+            v-model:current-page="detailQueryParams.pageNum"
+            v-model:page-size="detailQueryParams.pageSize"
+            :page-sizes="[10, 20, 30, 50]"
+            :total="detailTotal"
+            layout="total, sizes, prev, pager, next, jumper"
+            @size-change="handleDetailSizeChange"
+            @current-change="handleDetailCurrentChange"
+          />
+        </div>
+      </div>
+    </el-drawer>
   </div>
 </template>