fix: NFT黑屏修复+充值模块重写+市场页USDC

2026-04-28 23:35:00 +08:00
parent 82675dea71
commit 1af9642513
8 changed files with 6975 additions and 0 deletions
@@ -0,0 +1,186 @@
+<template>
+  <div style="width: 100%">
+    <v-chart :options="polar" :style="'width: ' + width + ';height:' + height + ';'" />
+  </div>
+</template>
+<script>
+import ECharts from "vue-echarts"; // 在 webpack 环境下指向 components/ECharts.vue
+import echarts from "echarts";
+
+export default {
+  props: {
+    symbol: {
+      type: String,
+      default: "",
+    },
+    period: {
+      type: String,
+      default: "1day",
+    },
+    count: {
+      type: Number,
+      default: 7,
+    },
+    color: {
+      type: String,
+      default: "up",
+    },
+    width: {
+      type: String,
+      default: "150px",
+    },
+    height: {
+      type: String,
+      default: "50px",
+    },
+    useTestData: {
+      type: Boolean,
+      default: false,
+    },
+  },
+  name: "ChartBox",
+  data() {
+    console.log("颜色", this.color);
+    return {
+      books: ["book0", "book1"],
+      msg: "this is BookList",
+      polar: {
+        animation: true,
+        left: 0,
+        right: 0,
+        top: 0,
+        bottom: 0,
+        xAxis: {
+          type: "category",
+          data: ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"],
+          splitLine: false,
+          show: false,
+        },
+        yAxis: {
+          type: "value",
+          splitLine: false,
+          show: false,
+        },
+        series: [
+          {
+            data: [120, 132, 101, 134, 90, 230, 210],
+            type: "line",
+            symbol: "none",
+            smooth: true,
+            areaStyle: {
+              normal: {
+                color: {
+                  x: 0,
+                  y: 0,
+                  x2: 0,
+                  y2: 1,
+                  colorStops: [
+                    {
+                      offset: 0,
+                      color: this.color == "up" ? "#00f0ff" : "rgba(255,73,74,0.9)", // 0% 处的颜色，修复透明度值
+                    },
+                    {
+                      offset: 0.7,
+                      color:
+                        this.color == "up" ? "rgba(53,182,90,0)" : "rgba(255,73,74,0)", // 100% 处的颜色
+                    },
+                  ],
+                  globalCoord: false, // 缺省为 false
+                },
+              },
+            },
+            itemStyle: {
+              normal: {
+                color: this.color == "up" ? "#00f0ff" : "#ff494a", //折线点的颜色
+                lineStyle: {
+                  color: this.color == "up" ? "#00f0ff" : "#ff494a", //折线的颜色
+                  width: 0.4,
+                },
+              },
+            },
+          },
+        ],
+      },
+    };
+  },
+  components: {
+    "v-chart": ECharts,
+  },
+  methods: {
+    updateChart() {
+      // 更新图表颜色
+      this.polar.series[0].itemStyle.normal.color =
+        this.color == "up" ? "#00f0ff" : "#ff494a";
+      this.polar.series[0].itemStyle.normal.lineStyle.color =
+        this.color == "up" ? "#00f0ff" : "#ff494a";
+      this.polar.series[0].areaStyle.normal.color.colorStops[0].color =
+        this.color == "up" ? "#00f0ff" : "rgba(255,73,74,0.9)";
+      this.polar.series[0].areaStyle.normal.color.colorStops[1].color =
+        this.color == "up" ? "rgba(53,182,90,0)" : "rgba(255,73,74,0)";
+    },
+  },
+  watch: {
+    color(val) {
+      this.updateChart();
+    },
+  },
+  created() {
+    this.updateChart();
+  },
+  mounted() {
+    if (this.useTestData) {
+      console.log("使用测试数据");
+      return;
+    }
+
+    // 如果没有提供symbol，则使用测试数据
+    if (!this.symbol) {
+      console.warn("Chart Warning: No symbol provided, using test data");
+      return;
+    }
+
+    let that = this;
+    let now = parseInt(new Date().valueOf() / 1000);
+    let start = now - 3600 * 24 * 7;
+    this.$http
+      .get("/api/currency/new_timeshar", {
+        params: {
+          symbol: this.symbol + "/USDC",
+          from: start,
+          to: parseInt(new Date().valueOf() / 1000),
+          period: this.period,
+        },
+      })
+      .then((res) => {
+        if (res.data && res.data.data && res.data.data.length > 0) {
+          let rsp = res.data;
+          let invoke = rsp.data.reverse().slice(0, this.count).reverse();
+          let data = [];
+          let data1 = [];
+          invoke.forEach((x) => {
+            data.push(x.id);
+            data1.push(x.close);
+          });
+
+          // 确保data1中有数据再进行处理
+          if (data1.length > 0) {
+            let min = Math.min.apply(null, data1);
+            for (let i = 0; i < data1.length; i++) {
+              data1[i] = data1[i] - min;
+            }
+            console.log("data=====", data);
+            that.polar.xAxis.data = data;
+            that.polar.series[0].data = data1;
+          } else {
+            console.error("Chart Error: No data points found");
+          }
+        } else {
+          console.error("Chart Error: Invalid or empty response data");
+        }
+      })
+      .catch((error) => {
+        console.error("Chart Error:", error);
+      });
+  },
+};
+</script>