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

lxf

2025-06-13 066ec67b7080f07a0e47dda9864ee6be2e4b9053

 src/views/wallet/components/optionRecord.vue

New file
@@ -0,0 +1,296 @@
<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>

          <el-table
            :data="tableData"
            class="width100"
            :header-row-class-name="getRowClass"
            :empty-text="$t('message.home.noData')"
          >
            <el-table-column
              prop="close_time"
              :label="$t('message.user.shijian')"
              :formatter="formatterDate"
            ></el-table-column>
            <!-- <el-table-column prop="order_no" label="订单号"></el-table-column>  -->
            <el-table-column
              prop="name"
              :label="$t('message.user.bizhong')"
            ></el-table-column>
            <el-table-column
              prop="direction"
              :label="$t('message.user.leixing')"
            >
              <template #default="scope">
                <div :class="scope.row.direction == 'buy' ? 'green' : 'red'">
                  {{
                    scope.row.direction == "buy"
                      ? $t("message.home.kaiduo")
                      : $t("message.home.kaikong")
                  }}
                </div>
              </template>
            </el-table-column>
            <el-table-column
              prop="trade_avg_price"
              :label="$t('message.user.kaicangjiage')"
            ></el-table-column>
            <el-table-column
              prop="amount_open"
              :label="$t('message.user.chengjiaoshuliang')"
            ></el-table-column>
            <el-table-column
              prop="close_avg_price"
              :label="$t('message.user.pingcangjiage')"
            ></el-table-column>
            <el-table-column
              prop="fee"
              :label="$t('message.user.shouxufei')"
            ></el-table-column>
            <el-table-column
              prop="profit"
              :label="$t('message.user.shijiyingkui')"
            >
              <template #default="scope">
                <div :class="scope.row.profit > 0 ? 'green' : 'red'">
                  {{ scope.row.profit }}
                </div>
              </template>
            </el-table-column>
            <el-table-column
              prop="change_radio"
              :label="$t('message.user.shouyilv') + '(%)'"
            >
              <template #default="scope">
                <div :class="scope.row.change_ratio > 0 ? 'green' : 'red'">
                  {{ scope.row.change_ratio }}
                </div>
              </template>
            </el-table-column>
            <el-table-column prop="state" :label="$t('message.user.zhuangtai')">
              <template #default="scope">
                <div>
                  {{
                    scope.row.state == "created"
                      ? $t("message.user.yipingcang")
                      : $t("message.user.chicang")
                  }}
                </div>
              </template>
            </el-table-column>
          </el-table>
          <!-- 分页 -->
          <el-pagination
            class="pagination-box"
            v-model:current-page="pageNum"
            default-page-size="20"
            layout="prev, pager, next"
            :total="tableLength"
            @current-change="handleCurrentChange"
          />
        </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.dangqjy"), this.$t("message.user.lisjy")],
      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: {
    formatterDate(row) {
      return dayjs.unix(row.create_time_ts).format("YYYY-MM-DD HH:mm:ss");
    },
    handleCurrentChange(val) {
      this.pageNum = val;
      this.getList();
    },
    handleClick(tab, event) {
      console.log(tab, event);
      this.getList();
    },
    //获取列表数据
    async getList() {
      const data = {
        page_no: this.pageNum,
        type: this.activeName === 1 ? "orders" : "hisorders", // orders 为当前持仓，hisorders 为历史持仓
        symbol: "",
        symbolType: this.type,
      };
      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;
      }
    },
    //矿池锁仓列表,state=2为已解锁的
    async getMineList() {
      const res = await getMinerOrder({
        state: 2,
        page_no: 1,
      });
      this.mineData = res.data;
    },
    //理财详情
    goDetail() {},
    //矿池详情
    goMineDetail() {},
    //给表头设置边框线
    getRowClass({ rowIndex, columnIndex }) {
      if (rowIndex == 0) {
        return "border-top:1px solid #EBEEF5";
      }
    },

    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;
}

.head {
  padding: 32px;
  box-sizing: border-box;
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  border-radius: 16px;
  background: linear-gradient(to bottom right, #f7b328, #1e2129);
  font-size: 14px;
  color: #ffffffb3;
  margin-bottom: 20px;
  .value {
    margin-top: 12px;
    font-size: 30px;
    color: #fff;
  }
}
.pagination-box {
  justify-content: center;
  display: flex;
  margin-top: 20px;
}

/deep/ .el-table {
  border-radius: 8px;
  padding: 16px;
  background-color: #1b1e26 !important;
  color: #fff;
}
/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;
}
/deep/ .el-table tr {
  background-color: #1b1e26 !important;
}
/deep/
  .el-table--enable-row-hover
  .el-table__body
  tr:hover
  > td.el-table__cell {
  background-color: #1b1e26 !important;
}
/deep/ .el-table td.el-table__cell div {
  /* color: #fff; */
}
/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;
}
</style>