From 3337d79d38cf882243a5646b2fcac916d8376e34 Mon Sep 17 00:00:00 2001
From: wxy <14293288+zysysys@user.noreply.gitee.com>
Date: Wed, 4 Sep 2024 19:59:07 +0800
Subject: [PATCH] =?UTF-8?q?=E6=96=B0=E5=A2=9E=E7=94=A8=E6=88=B7=E4=BD=99?=
 =?UTF-8?q?=E9=A2=9D=E5=92=8C=E6=9C=88=E5=BA=A6=E6=B6=88=E8=B4=B9=E5=9B=BE?=
 =?UTF-8?q?=E8=A1=A8=E5=B1=95=E7=A4=BA=E5=8A=9F=E8=83=BD?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

添加了一个图表，以直观展示用户余额和过去12个月的总消费金额。优化了数据获取逻辑，确保组件在`index.vue`中能够正确拉取和显示数据。同时，修复了与用户余额相关的API路径问题。
---
 src/api/system/user.js         |  8 ++++++++
 src/views/money/user/index.vue | 30 ++++++++++++++++++++++++++----
 2 files changed, 34 insertions(+), 4 deletions(-)

diff --git a/src/api/system/user.js b/src/api/system/user.js
index 24af30b..8ddbd3c 100644
--- a/src/api/system/user.js
+++ b/src/api/system/user.js
@@ -21,6 +21,14 @@ export function userloginfo(query) {
   })
 }
 
+//查询12个月的总消费
+export function months() {
+  return request({
+    url: '/system/user/months',
+    method: 'get',
+  })
+}
+
 
 //充值用户记录
 export function userPayinfo(query) {
diff --git a/src/views/money/user/index.vue b/src/views/money/user/index.vue
index 874a1a7..95d70df 100644
--- a/src/views/money/user/index.vue
+++ b/src/views/money/user/index.vue
@@ -63,18 +63,22 @@
 </template>
 
 <script>
-import {userBalance} from "@/api/system/user"; //
+import {userBalance,months} from "@/api/system/user"; //
 import * as echarts from 'echarts' //引用echarts
 import {checkRealNameAuth} from "@/api/system/user";
+import item from "@/layout/components/Sidebar/Item.vue";
 
 export default {
   data() {
     return {
       charts: "",
       dialogVisible: false,
+      listDate:[],
+      a:[],
+      b:[],
       dialogFormVisible: false,
       formLabelWidth: '120px',
-      opinionData: ["155", "400", "900", "800", "300", "900", "270", "684", "165", "0", "300", "150"], // 数据
+      opinionData: [],
       userBalanceData: {
         userBalance: '加载中...'
       },
@@ -97,11 +101,25 @@ export default {
   },
   created() {
     this.fetchUserBalance();
+    this.getList()
   },
   mounted() {
     this.drawLine();
   },
   methods: {
+    getList(){
+      months().then(response => {
+        const responseDate = response;
+         responseDate.forEach(item => {
+            console.log('月',item.month, '总金额:', item.totalAmount)
+         });
+         this.listDate = responseDate;
+         this.drawLine();
+         this.$nextTick( () => {
+           console.log(JSON.stringify(this.listDate))
+         });
+      });
+    },
     handleCancel() {
       this.dialogVisible = false;
     },
@@ -172,6 +190,10 @@ export default {
       // 初始化折线图
       this.charts = echarts.init(document.getElementById('main'));
 
+
+      this.a = this.listDate.map(item => item.month)
+      this.b = this.listDate.map(item => item.totalAmount)
+
       // 设置折线图数据和样式
       this.charts.setOption({
         title: {
@@ -213,7 +235,7 @@ export default {
             alignWithLabel: true,
           },
           // 自定义标签
-          data: ["1月", "2月", "3月", "4月", "5月", "6月", "7月", "8月", "9月", "10月", "11月", "12月"],
+          data: this.a,
         },
 
         // 自定义：设置y轴刻度
@@ -230,7 +252,7 @@ export default {
             name: "消费金额", // 自定义
             type: "line",
             stack: "总量", // 自定义
-            data: this.opinionData, // 自定义
+            data: this.b,
             areaStyle: {
               color: {
                 type: "linear",