Merge branch 'master' of http://124.156.157.155:8060/r/~admin/aerospace-pc

lxf

2025-06-13 066ec67b7080f07a0e47dda9864ee6be2e4b9053

 src/views/wealth/transactionRecord.vue

New file
@@ -0,0 +1,304 @@
<template>
  <div class="router-view">
    <div class="trade">
      <div class="recharge_content">
        <el-tabs
          v-model="activeName"
          class="order-tab"
          @tab-click="handleClick"
        >
          <el-tab-pane
            v-for="(item, index) in labels"
            :key="index"
            :name="index"
            :label="item"
            name="financial"
          >
          </el-tab-pane>
          <div class="list">
            <div class="item" v-for="(item, index) in tableData" :key="index">
              <div class="el-row">
                <div class="el-col el-col-8">
                  <div>
                    {{
                      activeName
                        ? $t("message.home.pingcang") +
                          $t("message.home.shijian")
                        : $t("message.user.shijian")
                    }}
                  </div>
                  <div class="value">{{ formatterDate(item) }}</div>
                </div>
                <div class="el-col el-col-8">
                  <div>{{ $t("message.user.bizhong") }}</div>
                  <div class="value">{{ item.name }}</div>
                </div>
                <div class="el-col el-col-8">
                  <div>{{ $t("message.user.leixing") }}</div>
                  <div
                    class="value red"
                    :class="item.direction == 'buy' ? 'green' : 'red'"
                  >
                    {{
                      item.direction == "buy"
                        ? $t("message.home.kaiduo")
                        : $t("message.home.kaikong")
                    }}
                  </div>
                </div>
              </div>
              <div class="el-row">
                <div class="el-col el-col-8">
                  <div>
                    {{
                      activeName
                        ? $t("message.user.pingcangjiage")
                        : $t("message.user.kaicangjiage")
                    }}
                  </div>
                  <div class="value">
                    {{
                      activeName ? item.close_avg_price : item.close_avg_price
                    }}
                  </div>
                </div>
                <div class="el-col el-col-8">
                  <div>{{ $t("message.user.chengjiaoshuliang") }}</div>
                  <div class="value">{{ item.amount_open }}</div>
                </div>
                <div class="el-col el-col-8">
                  <div>{{ $t("message.user.zhuangtai") }}</div>
                  <div class="value">
                    {{
                      item.state == "created"
                        ? $t("message.user.yipingcang")
                        : $t("message.user.chicang")
                    }}
                  </div>
                </div>
              </div>
              <div class="el-row">
                <div class="el-col el-col-8">
                  <div>
                    {{ $t("message.home.gangganbeishu") }}
                  </div>
                  <div class="value">{{ item.lever_rate }}</div>
                </div>
                <div class="el-col el-col-8">
                  <div>{{ $t("message.home.shouxufei") }}</div>
                  <div class="value">{{ item.fee }}</div>
                </div>
                <div class="el-col el-col-8">
                  <div>{{ $t("message.home.yingkui") }}</div>
                  <div class="value">
                    {{ item.profit }}/{{
                      (() => {
                        const base =
                          item.trade_avg_price * item.amount_open || 1;
                        let percent = (parseFloat(item.profit) / base) * 100;
                        if (percent !== 0 && Math.abs(percent) < 0.000001) {
                          percent = percent > 0 ? 0.000001 : -0.000001;
                        }
                        return percent.toFixed(6);
                      })()
                    }}%
                  </div>
                </div>
              </div>
            </div>
          </div>
          <!-- 分页 -->
          <!-- <el-pagination
            class="pagination-box"
            v-model:current-page="pageNum"
            default-page-size="20"
            :total="tableLength"
            @current-change="handleCurrentChange"
          /> -->
          <el-pagination
            class="pagination-box"
            background
            v-model:current-page="pageNum"
            @current-change="handleCurrentChange"
            default-page-size="20"
            layout="prev, pager, next"
            :total="tableLength"
          >
          </el-pagination>
        </el-tabs>
      </div>
    </div>
  </div>
  <footer-view></footer-view>
</template>

<script>
import { getContractOrder } from "@/api/order.js";
import dayjs from "dayjs";

export default {
  name: "financialHistory",
  data() {
    return {
      activeName: 0,
      labels: [this.$t("message.user.ma47"), this.$t("message.user.ma48")],
      tableData: [],
      mineData: [],
      pageNum: 1,
      tableLength: 0,
    };
  },
  mounted() {
    // if (this.$route.query.type) {
    //   this.activeName = this.$route.query.type;
    // }
    let spToken = localStorage.getItem("spToken");
    if (spToken) {
      this.getList();
      this.getMineList();
    }
  },
  methods: {
    handleClick(tab, event) {
      console.log("handleClick: ");
      this.pageNum = 1;
      this.getList();
    },
    formatterDate(row) {
      return dayjs.unix(row.create_time_ts).format("YYYY-MM-DD HH:mm:ss");
    },
    async getList() {
      const data = {
        page_no: this.pageNum,
        type: this.activeName ? "orders" : "hisorders",
        // symbol: "",
      };
      const res = await getContractOrder(data);
      this.tableData = res.data;
      this.tableLength = res.data.length;
      if (this.tableLength == 0 || this.tableLength < 10) {
        this.isNext = true;
      } else {
        this.isNext = false;
      }
    },
    handleCurrentChange(val) {
      this.pageNum = val;
      this.getList();
    },

    getLocalLan() {
      var lang = JSON.parse(localStorage.getItem("lang"));
      // 简体中文：miner_name，繁体：miner_name_cn miner_name_en
      if (lang == "en") {
        return "miner_name_en";
      } else if (lang == "cht") {
        return "miner_name_cn";
      } else if (lang == "zh-CN") {
        return "miner_name";
      }
      return "miner_name_en";
    },
  },
};
</script>

<style scoped>
.router-view {
  flex: 1;
  background-color: #000;
}

.trade {
  min-height: 700px;
  background: #000;
  padding-bottom: 16px;
  padding-top: 28px;
}

.trade .recharge_content {
  max-width: 1232px;
  min-width: 976px;
  margin: 0 auto;
  color: #fff;
}

/deep/ .el-table {
  border-radius: 8px;
  padding: 16px;
  background-color: #1b1e26 !important;
}
/deep/ .el-table th.el-table__cell {
  background-color: #1b1e26 !important;
  border-bottom: none !important;
}
/deep/ .el-table__inner-wrapper:before {
  background-color: #1b1e26 !important;
}
/deep/ .el-tabs__nav-wrap:after {
  background-color: #000 !important;
}
/deep/ .el-tabs__item,
/deep/ .el-tabs__item:hover {
  color: #b1b1b1 !important;
  font-size: 18px;
}
/deep/ .el-tabs__item.is-active {
  color: #f7b328 !important;
  font-size: 18px !important;
  font-weight: 600;
}
.list {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}
.list .item {
  width: 47%;
  background: #112639;
  padding: 12px;
  border-radius: 8px;
  margin-bottom: 16px;
  font-size: 12px;
  color: #b1b1b180;
}

.el-row {
  margin-bottom: 16px;

  box-sizing: border-box;
  display: flex;
  flex-wrap: wrap;
  position: relative;
}

.list .item .value {
  font-size: 14px;
  color: #b1b1b1;
  margin-top: 6px;
}
.list .item .value.red {
  color: red;
}
.list .item .value.green {
  color: #1cd36d;
}

/deep/ .el-pagination button.is-disabled,
/deep/ .el-pagination button:disabled,
/deep/ .el-pager li,
/deep/ .el-input__wrapper {
  background-color: #1b1e26 !important;
}
/deep/ .el-pager li.is-active {
  color: #f7b328 !important;
}
/deep/ .el-input__inner {
  color: #fff;
}
.pagination-box {
  justify-content: center;
  display: flex;
  margin-top: 20px;
}
</style>