feat

lxf

2025-04-18 66a33e936d39ec4db7fdffed5d646e044ccc43e9

 src/components/mining-account/index.vue

@@ -4,21 +4,51 @@
      <van-tab :title="$t('市价')"></van-tab>
    </van-tabs>
    <div style="position: relative" class="px-30 pb-104">
      <mining-exchange-input :title="$t('从')" :isMoney="true" v-model="form.volume" :actions="actions"
        @select="onSelect('symbol', $event)" @input="onInput" @max="onMax" :type="1" :coin="form.symbol" :tips="[]"
        :showMax="true" />
      <div v-if="show" class="font-28 textColor">{{ $t('可用数量') }}：<span class="textColor">{{ amountAvailable
      }}&nbsp;{{ form.symbol.toUpperCase() }}</span>
      <mining-exchange-input
        :title="$t('从')"
        :isMoney="true"
        v-model="form.volume"
        :actions="actions"
        @select="onSelect('symbol', $event)"
        @input="onInput"
        @max="onMax"
        :type="1"
        :coin="form.symbol"
        :coin_name="form.symbol_name"
        :tips="[]"
        :showMax="true"
      />
      <div v-if="show" class="font-28 textColor">
        {{ $t("可用数量") }}：<span class="textColor"
          >{{ amountAvailable }}&nbsp;{{ form.symbol.toUpperCase() }}</span
        >
      </div>
      <div class="flex ex-bg justify-center my-42 items-center">
        <img src="@/assets/image/exchange/icon_3.png" alt="" class="w-25 h-25" @click="onSwitch" />
        <img
          src="@/assets/image/exchange/icon_3.png"
          alt=""
          class="w-25 h-25"
          @click="onSwitch"
        />
      </div>
      <mining-exchange-input :title="$t('至')" :value="form.volume ? (form.volume * form.rate).toFixed(5) : ''"
        :actions="actions" @select="onSelect('symbol_to', $event)" :disabled="true" :type="2" :coin1="form.symbol_to"
        :tips="[]" :showMax="false" />
      <mining-exchange-input
        :title="$t('至')"
        :value="form.volume ? (form.volume * form.rate).toFixed(5) : ''"
        :actions="actions"
        @select="onSelect('symbol_to', $event)"
        :disabled="true"
        :type="2"
        :coin1="form.symbol_to"
        :coin1_name="form.symbol1_name"
        :tips="[]"
        :showMax="false"
      />
      <div class="exchange-btn w-full flex justify-center mt-20">
        <p class="h-100 btnMain mx-auto flex justify-center items-center text-white w-768" @click="onConfirm">
          {{ $t('询价') }}
        <p
          class="h-100 btnMain mx-auto flex justify-center items-center text-white w-768"
          @click="onConfirm"
        >
          {{ $t("询价") }}
        </p>
      </div>
    </div>
@@ -29,12 +59,19 @@
import MiningExchangeInput from "@/components/mining-exchange-input";
import { Grid, GridItem, Popup, Icon } from "vant";
// import { mapState } from "vuex";
import { _exchangeRage, _getAllWallet, _getBalance, _initWidthdrawl, _widthdrawl, _records } from "@/API/fund.api";
import { _getBalance as __getBalance } from '@/API/trade.api'
import {
  _exchangeRage,
  _getAllWallet,
  _getBalance,
  _initWidthdrawl,
  _widthdrawl,
  _records,
} from "@/API/fund.api";
import { _getBalance as __getBalance } from "@/API/trade.api";
import { mapGetters } from "vuex";
import Axios from "@/API/recharge";
import { List, PullRefresh, Tab, Tabs } from 'vant';
import { debounce } from '@/utils/utis'
import { List, PullRefresh, Tab, Tabs } from "vant";
import { debounce } from "@/utils/utis";
export default {
  name: "MiningAcccount",
  components: {
@@ -46,7 +83,7 @@
    [List.name]: List,
    [PullRefresh.name]: PullRefresh,
    [Tab.name]: Tab,
    [Tabs.name]: Tabs
    [Tabs.name]: Tabs,
  },
  props: {
    show: {
@@ -55,135 +92,163 @@
    },
  },
  computed: {
    ...mapGetters('user', ['userInfo']),
    ...mapGetters("user", ["userInfo"]),
    amountAvailable() {
      let res
      let data = this.wallets.find(item => item.symbol === this.form.symbol.toLowerCase())
      let res;
      let data = this.wallets.find(
        (item) => item.symbol === this.form.symbol.toLowerCase()
      );
      if (data) {
        res = data.usable
        res = data.usable;
      } else {
        res = 0
        res = 0;
      }
      return res;
    },
    tabList() {
      return [
        { id: 1, text: this.$t('提幣') },
        { id: 2, text: this.$t('交易記錄') }
      ]
        { id: 1, text: this.$t("提幣") },
        { id: 2, text: this.$t("交易記錄") },
      ];
    },
    addr() {
      const account = this.userInfo.account
      return account && account.substr(0, 5) + '********' + account.substr(account.length - 5)
    }
      const account = this.userInfo.account;
      return (
        account &&
        account.substr(0, 5) + "********" + account.substr(account.length - 5)
      );
    },
  },
  data() {
    return {
      showPopup: false,
      activeRecord: 'exchange',
      activeRecord: "exchange",
      valueTwo: 0,
      rate: 0,
      form: { // 闪兑
        symbol: 'ETH',
        symbol_to: 'USDT',
        volume: '',
        rate: 0
      form: {
        // 闪兑
        symbol: "ETH",
        symbol_to: "USDT",
        symbol_name: "",
        symbol1_name: "",
        volume: "",
        rate: 0,
      },
      interval: null,
      actions: [],
      balance: 0, // 质押余额
      page: 1,
      loading: false, // 当loading为true时，转圈圈
      finished: false,  // 数据是否请求结束，结束会先显示'已经全部加载完毕'
      noData: false,// 如果没有数据，显示暂无数据
      finished: false, // 数据是否请求结束，结束会先显示'已经全部加载完毕'
      noData: false, // 如果没有数据，显示暂无数据
      wallets: [], // 钱包列表
      active: 0

    }
      active: 0,
    };
  },
  created() {
    _getAllWallet().then(data => {
      console.log('闪兑', data)
      data.extends.map(item => {
        console.log(item)
        this.actions.push({ symbol: item.symbol, name: item.symbol.toUpperCase(), usable: item.usable, usdt: item.usdt })
      })
      this.wallets = data.extends
      this.form.symbol = this.actions[0].name
      let toObj = this.actions.find(item => {
        return item.symbol.toLowerCase() == 'btc'
      })
      this.form.symbol_to = toObj.name
    })
    _getAllWallet().then((data) => {
      console.log("闪兑", data);
      data.extends.map((item) => {
        console.log(item);
        // symbol.toUpperCase()
        if (item.name) {
          this.actions.push({
            symbol: item.symbol,
            name: item.name.split("/")[0],
            usable: item.usable,
            usdt: item.usdt,
          });
        }
      });
      this.wallets = data.extends;
      this.form.symbol = this.actions[0].symbol;
      this.form.symbol_name = this.actions[0].name;
      // let toObj = this.actions.find((item) => {
      //   return item.symbol.toLowerCase() == "btc";
      // });
      // console.log('toObj: ',toObj.name)
      this.form.symbol_to = this.actions[1].symbol;
      this.form.symbol1_name = this.actions[1].name;
    });
  },
  methods: {
    onMax() { // 最大
      console.log(this.amountAvailable)
    onMax() {
      // 最大
      console.log(this.amountAvailable);
      if (this.amountAvailable / 1) {
        this.form.volume = this.amountAvailable
        this.onInput()
        this.form.volume = this.amountAvailable;
        this.onInput();
      } else {
        this.$toast(this.$t('你没有可提数量'))
        this.$toast(this.$t("你没有可提数量"));
      }
    },
    onInput() { // 获取最新
      this.clearInterval()
      if (this.form.volume == '') {
        this.form.get_volume = ''
    onInput() {
      // 获取最新
      this.clearInterval();
      if (this.form.volume == "") {
        this.form.get_volume = "";
      } else {
        this.debounceFn()
        this.debounceFn();
      }
    },
    debounceFn: debounce(function () {
      this.fetchRate(true)
      this.fetchRate(true);
    }, 300),
    fetchRate(callback) { // interval
      _exchangeRage(this.form).then(data => {
        const { get_rate } = data
        this.form.rate = get_rate
        this.clearInterval()
        if (callback && typeof callback === 'function') {
          callback()
    fetchRate(callback) {
      // interval
      _exchangeRage(this.form).then((data) => {
        const { get_rate } = data;
        this.form.rate = get_rate;
        this.clearInterval();
        if (callback && typeof callback === "function") {
          callback();
        }
      })
      });
    },
    onSwitch() { // 交换
      const temp = this.form.symbol
      this.form.symbol = this.form.symbol_to
      this.form.symbol_to = temp
      this.form.volume = ''
      this.clearInterval()
    onSwitch() {
      // 交换
      const temp = this.form.symbol;
      this.form.symbol = this.form.symbol_to;
      this.form.symbol_to = temp;
      this.form.volume = "";
      this.clearInterval();
    },
    onSelect(type, evt) { // 选择
    onSelect(type, evt) {
      console.log("onSelect: ", type, evt);
      // 选择
      if (evt.type == 0) {
        this.form['symbol'] = evt.item.name
        this.form["symbol"] = evt.item.symbol;
        this.form["symbol_name"] = evt.item.name;
      } else {
        this.form['symbol_to'] = evt.item.name
        this.form["symbol_to"] = evt.item.symbol;
        this.form["symbol1_name"] = evt.item.name;
      }
      if (this.form.symbol !== this.form.symbol_to) {
        this.form.volume = ''
        this.form.volume = "";
      }
      this.clearInterval()
      this.clearInterval();
    },
    onConfirm() { // 闪兑
      this.clearInterval()
      if (this.form.volume == '') {
        this.$toast(this.$t('请输入数量'));
    onConfirm() {
      // 闪兑
      this.clearInterval();
      if (this.form.volume == "") {
        this.$toast(this.$t("请输入数量"));
      } else {
        this.fetchRate(() => {
          this.$emit("exchange", this.form);
        })
        });
      }
    },
    clearInterval() { // 清除定时器
      clearInterval(this.interval)
      this.interval = null
    }
    clearInterval() {
      // 清除定时器
      clearInterval(this.interval);
      this.interval = null;
    },
  },
  beforeDestroy() {
    // console.log('beforeDestroy')
    this.clearInterval()
  }
    this.clearInterval();
  },
};
</script>

@@ -208,8 +273,6 @@
  }
}



.ex-bg {
  width: 70px;
  height: 70px;
@@ -226,7 +289,7 @@
  margin-top: 400px;

  .btnMain {
    background: linear-gradient(90deg, #2C64D4 0%, #38AEEA 100%);
    background: linear-gradient(90deg, #2c64d4 0%, #38aeea 100%);
    border-radius: 10px;
  }
}