样式修改

lxf

2025-05-19 45190f969dd8c7d3d2c6e366694f0dadc5ea07e8

 src/page/FinancialHistory/index.vue

@@ -1,59 +1,101 @@
<template>
  <div id="MiningPoolFinanceHistory" class="MiningPoolFinanceHistory">
    <assets-head :title="$t('历史')" :back-func="() => {
      $router.push({
        path: '/funds',
        query: {
          tab: 3,
          index: type // 0: 查看理财订单 1: 矿机
    <assets-head
      :title="$t('质押记录')"
      :back-func="
        () => {
          $router.push({
            path: '/funds',
            query: {
              tab: 3,
              index: type, // 0: 查看理财订单 1: 矿机
            },
          });
        }
      })
    }"></assets-head>
      "
    ></assets-head>
    <van-tabs v-model="active" ref="tabs" @change="onchange">
      <van-tab :title="$t('购买')">
      <van-tab :title="$t('进行中')">
        <div class="contBackground h-2"></div>
        <van-pull-refresh :pulling-text="$t('下拉即可刷新')" :loosing-text="$t('释放即可刷新')" :loading-text="$t('加载中')"
          v-model="isLoading" @refresh="onRefresh">
          <van-list v-model="loading" :finished="finished" @load="onLoad" :loading-text="$t('加载中')">
        <van-pull-refresh
          :pulling-text="$t('下拉即可刷新')"
          :loosing-text="$t('释放即可刷新')"
          :loading-text="$t('加载中')"
          v-model="isLoading"
          @refresh="onRefresh"
        >
          <van-list
            v-model="loading"
            :finished="finished"
            @load="onLoad"
            :loading-text="$t('加载中')"
          >
            <div v-for="(item, index) in list" :key="'buy' + index">
              <div class="box-border px-33">
                <div class="flex justify-between items-center h-110 font-31 font-400">
                  <div class="text-grey">{{ $t('时间') }}</div>
                  <div class="textColor"> {{ item.create_time }}</div>
                <div
                  class="flex justify-between items-center h-110 font-31 font-400"
                >
                  <div class="text-grey">{{ $t("时间") }}</div>
                  <div class="textColor">{{ item.create_time }}</div>
                </div>
                <div class="flex justify-between items-center h-110 font-31 font-400">
                  <div class="text-grey">{{ $t('数量') }}</div>
                <div
                  class="flex justify-between items-center h-110 font-31 font-400"
                >
                  <div class="text-grey">{{ $t("数量") }}</div>
                  <div class="textColor">{{ item.amount }}&nbsp;USDT</div>
                </div>
                <div class="flex justify-between items-center h-110 font-31 font-400">
                  <div class="text-grey">{{ $t('周期') }}</div>
                  <div class="textColor"> {{ item.cycle == 0 ? $t('无限期') : item.cycle + $t('天') }}</div>
                </div>
                <div class="flex justify-between items-center h-110 font-31 font-400">
                  <div class="text-grey">{{ $t('累计收益') }}</div>
                  <div class="textColor" :class="item.profit / 1 > 0 ? 'text-green' : 'text-red'"> {{ item.profit }}
                <div
                  class="flex justify-between items-center h-110 font-31 font-400"
                >
                  <div class="text-grey">{{ $t("周期") }}</div>
                  <div class="textColor">
                    {{ item.cycle == 0 ? $t("无限期") : item.cycle + $t("天") }}
                  </div>
                </div>
                <!-- <div class="flex justify-center pb-10"><van-button style="border-radius: 5px" size="small" @click="handleGoOrderDetail(item)" class="btnMain text-white">{{$t('详情')}}</van-button></div> -->
                <div
                  class="flex justify-between items-center h-110 font-31 font-400"
                >
                  <div class="text-grey">{{ $t("累计收益") }}</div>
                  <div
                    class="textColor"
                    :class="item.profit / 1 > 0 ? 'text-green' : 'text-red'"
                  >
                    {{ item.profit }}
                  </div>
                </div>
              </div>
              <div class="contBackground h-12"></div>
            </div>
          </van-list>
        </van-pull-refresh>
      </van-tab>
      <van-tab :title="$t('赎回')">
      <van-tab :title="$t('已结束')">
        <div class="contBackground h-2"></div>
        <van-pull-refresh :pulling-text="$t('下拉即可刷新')" :loosing-text="$t('释放即可刷新')" :loading-text="$t('加载中')"
          v-model="isLoading" @refresh="onRefresh">
          <van-list v-model="loading" :finished="finished" :finished-text="$t('没有更多了')" @load="onLoad">
        <van-pull-refresh
          :pulling-text="$t('下拉即可刷新')"
          :loosing-text="$t('释放即可刷新')"
          :loading-text="$t('加载中')"
          v-model="isLoading"
          @refresh="onRefresh"
        >
          <van-list
            v-model="loading"
            :finished="finished"
            :finished-text="$t('没有更多了')"
            @load="onLoad"
          >
            <div class="flex justify-center">
              <financial-list :list="list" :btnShow="false" :type="type" :goBack="true"></financial-list>
              <financial-list
                :list="list"
                :btnShow="false"
                :type="type"
                :goBack="true"
              ></financial-list>
            </div>
          </van-list>
        </van-pull-refresh>

      </van-tab>
      <van-tab :title="$t('利息')">
      <!-- <van-tab :title="$t('利息')">
        <div class="contBackground h-2"></div>
        <van-pull-refresh :pulling-text="$t('下拉即可刷新')" :loosing-text="$t('释放即可刷新')" :loading-text="$t('加载中')"
          v-model="isLoading" @refresh="onRefresh">
@@ -75,17 +117,20 @@
            </div>
          </van-list>
        </van-pull-refresh>
      </van-tab>
      </van-tab> -->
    </van-tabs>
  </div>
</template>

<script>
import { Tab, Tabs, Icon, List, PullRefresh, Button } from 'vant';
import assetsHead from '@/components/assets-head';
import { Tab, Tabs, Icon, List, PullRefresh, Button } from "vant";
import assetsHead from "@/components/assets-head";

import { getfinacialProductsBought, getMachineBought } from '@/API/financialManagement';
import { _fundRecord } from '@/API/fund.api';
import {
  getfinacialProductsBought,
  getMachineBought,
} from "@/API/financialManagement";
import { _fundRecord } from "@/API/fund.api";
import financialList from "@/components/assetsCenter/financialList";
export default {
  name: "index",
@@ -97,7 +142,7 @@
    [Button.name]: Button,
    [PullRefresh.name]: PullRefresh,
    assetsHead,
    financialList
    financialList,
  },
  data() {
    return {
@@ -108,127 +153,141 @@
      page: 1,
      active: 0,
      list: [],
    }
    };
  },
  methods: {
    handleGoOrderDetail(item) {
      if (this.type === 0) {
        this.$router.push({
          path: '/financialOrder',
          path: "/financialOrder",
          query: {
            ...item,
            showBtn: this.active === 0,
            goBack: true
          }
        })
            goBack: true,
          },
        });
      } else {
        this.$router.push({
          path: '/miningMachineOrder',
          path: "/miningMachineOrder",
          query: {
            ...item,
            showBtn: this.active === 0,
            goBack: true
          }
        })
            goBack: true,
          },
        });
      }
    },
    onRefresh() {
      console.log('refresh')
      this.init()
      console.log("refresh");
      this.init();
    },
    onLoad() {
      this.get()
      this.get();
    },
    onchange() {
      this.init()
      this.init();
    },
    init() {
      this.page = 1
      this.list = []
      this.get()
      this.page = 1;
      this.list = [];
      this.get();
    },
    get() {
      if (this.type === 0) { // 普通理财历史
      if (this.type === 0) {
        // 普通理财历史
        if (this.active === 0) {
          getfinacialProductsBought({
            page_no: this.page,
            state: '1'
          }).then(res => { // 已购理财产品
            this.handleData(res)
          })
            state: "1",
          }).then((res) => {
            // 已购理财产品
            this.handleData(res);
          });
        } else if (this.active === 1) {
          getfinacialProductsBought({
            page_no: this.page,
            state: '2'
          }).then(res => {  // 已赎回理财产品
            this.handleData(res)
          })
            state: "2",
          }).then((res) => {
            // 已赎回理财产品
            this.handleData(res);
          });
        } else {
          _fundRecord('finance', this.page, 'finance_profit').then(res => { // 利息
            this.handleData(res)
          })
          _fundRecord("finance", this.page, "finance_profit").then((res) => {
            // 利息
            this.handleData(res);
          });
        }
      } else {  // 矿机理财历史
      } else {
        // 矿机理财历史
        if (this.active === 0) {
          getMachineBought({
            page_no: this.page,
            state: '1'
          }).then(res => { // 已购理财产品
            this.handleData(res)
          })
            state: "1",
          }).then((res) => {
            // 已购理财产品
            this.handleData(res);
          });
        } else if (this.active === 1) {
          getMachineBought({
            page_no: this.page,
            state: '2'
          }).then(res => {  // 已赎回理财产品
            this.handleData(res)
          })
            state: "2",
          }).then((res) => {
            // 已赎回理财产品
            this.handleData(res);
          });
        } else {
          _fundRecord('miner', this.page, 'miner_profit').then(res => { // 利息
            this.handleData(res)
          })
          _fundRecord("miner", this.page, "miner_profit").then((res) => {
            // 利息
            this.handleData(res);
          });
        }
      }
    },
    handleData(data) {
      this.isLoading = false;
      console.log(data)
      this.list = this.list.concat(data)
      this.loading = false
      console.log(data);
      this.list = this.list.concat(data);
      this.loading = false;
      if (data.length < 10) {
        this.finished = true
        this.finished = true;
      }
      this.page++
    }
      this.page++;
    },
  },
  created() {
    if (this.$route.query.tab) {
      this.active = this.$route.query.tab
      this.active = this.$route.query.tab;
    }
    if (this.$route.query.type) {
      this.type = this.$route.query.type / 1
      this.type = this.$route.query.type / 1;
    }
  },
  mounted() {
  },
}
  mounted() {},
};
</script>

<style lang="scss" scoped>
.MiningPoolFinanceHistory {
  width: 100%;
  box-sizing: border-box;

  ::v-deep .van-tab {
    width: 10rem;
    flex: none;
  }
  ::v-deep .van-tabs__nav {
    // background: rgb(247, 179, 40);
    @include themify() {
      background: themed("main_background");
    }
  }

  ::v-deep .van-tabs__line {
    background: rgb(247, 179, 40);
  }
  ::v-deep .van-tab--active {
    @include themify() {
      color: themed("text_color");
    }
    color: rgb(247, 179, 40);
    // @include themify() {
    //   color: themed("text_color");
    // }
  }
}
</style>