添加消费明细页面展示及导出功能

实现了一个新的消费明细页面，包括搜索消费记录和导出功能。页面包含日期选择器，支持定制时间范围查询，以及导出按钮，允许用户将消费记录导出为Excel文件。

后台API `userloginfo` 被添加用于处理购买记录的获取请求。该请求携带分页参数及可选的时间范围，返回消费记录列表及其总数量。

src/api/system/user.js

@@ -12,6 +12,16 @@ export function listUser(query) {
 
 
 
+//购买用户记录
+export function userloginfo(query) {
+  return request({
+    url: '/system/user/purchaseRecord',
+    method: 'get',
+    params: query
+  })
+}
+
+
 //充值用户记录
 export function userPayinfo(query) {
   return request({

src/views/money/buy/index.vue

@@ -1,11 +1,119 @@
-<script setup>
-
-</script>
-
 <template>
+  <div style="padding: 20px;">
+    <h1 style="text-align: center; margin-bottom: 30px;">消費明細</h1>
+    <el-divider></el-divider>
+    <el-form  ref="queryForm" :inline="true" :model="queryParams" size="small">
+      <el-form-item label="创建时间">
+        <el-date-picker
+          v-model="dateRange"
+          end-placeholder="结束日期"
+          range-separator="-"
+          start-placeholder="开始日期"
+          style="width: 240px"
+          type="daterange"
+          value-format="yyyy-MM-dd"
+        ></el-date-picker>
+      </el-form-item>
+      <el-form-item>
+        <el-button icon="el-icon-search" size="mini" type="primary" @click="handleQuery">搜索</el-button>
+      </el-form-item>
+    </el-form>
+    <el-row>
+      <el-button
+        v-hasPermi="['system:purchaseRecord:export']"
+        icon="el-icon-download"
+        plain
+        size="mini"
+        type="warning"
+        @click="handleExport"
+      >导出
+      </el-button>
+    </el-row>
 
+    <el-table
+      :data="listDate"
+      style="width: 100%; border-collapse: collapse;">
+      <el-table-column
+        label="序号"
+        width="300"
+        style="border: 1px solid #ccc; padding: 10px; text-align: center;">
+        <template slot-scope="scope">
+          {{ scope.row.id }}
+        </template>
+      </el-table-column>
+      <el-table-column
+        label="數據名稱"
+        width="300"
+        style="border: 1px solid #ccc; padding: 10px; text-align: center;">
+        <template slot-scope="scope">
+          {{ scope.row.dataName }}
+        </template>
+      </el-table-column>
+      <el-table-column
+        label="消費金额"
+        width="300"
+        style="border: 1px solid #ccc; padding: 10px; text-align: center;">
+        <template slot-scope="scope">
+          {{ scope.row.amount }}
+        </template>
+      </el-table-column>
+      <el-table-column
+        label="消費時間"
+        width="300"
+        style="border: 1px solid #ca8a8a; padding: 10px; text-align: center;">
+        <template slot-scope="scope">
+          {{ scope.row.createTime }}
+        </template>
+      </el-table-column>
+    </el-table>
+    <pagination
+      v-show="total > 0"
+      :limit.sync="queryParams.pageSize"
+      :page.sync="queryParams.pageNum"
+      :total="total"
+      @pagination="getList"
+    />
+  </div>
 </template>
 
-<style scoped lang="scss">
 
-</style>
+<script>
+import { userloginfo } from "@/api/system/user";
+import PanelGroup from "@/views/dashboard/PanelGroup.vue";
+export default {
+  components: {PanelGroup},
+  data() {
+    return {
+      dateRange: [],
+      listDate: [],
+      total: 0,
+      queryParams: {
+        pageNum: 1,
+        pageSize: 10,
+      }
+    }
+  },
+  created() {
+    this.getList();
+  },
+  methods: {
+    /** 搜索按钮操作 */
+    handleQuery() {
+      this.queryParams.pageNum = 1;
+      this.getList();
+    },
+    /** 导出按钮操作 */
+    handleExport() {
+      this.download('system/user/purchaseRecord/export', {
+        ...this.queryParams
+      }, `pay_${new Date().getTime()}.xlsx`)
+    },
+    getList() {
+      userloginfo(this.addDateRange(this.queryParams,this.dateRange)).then(response => {
+          this.listDate = response.data.rows;
+          this.total = response.data.total;
+        }
+      );}
+  }
+}
+</script>