zuqiuh5.git - Gitblit

<template>
  <div id="mining-account">
    <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;USDT</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"
        />
      </div>
      <mining-exchange-input
        :title="$t('至')"
        :value="form.volume1"
        :actions="actions"
        @select="onSelect('symbol_to', $event)"
        :disabled="true"
        :type="2"
        :coin1="form.symbol_to"
        :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>
      </div>
    </div>
  </div>
</template>
 
<script>
import MiningExchangeInput from "./mining-exchange-input";
import { Grid, GridItem, Popup, Icon } from "vant";
import {
  _exchangeRage,
  _getAllWallet,
  _getBalance,
  _initWidthdrawl,
  _widthdrawl,
  _records,
} from "@/API/fund.api";
import { _getBalance as __getBalance } from "@/API/trade.api";
import { mapGetters } from "vuex";
import Axiosassets from "@/API/assets";
import { List, PullRefresh, Tab, Tabs } from "vant";
import { debounce } from "@/utils/utis";
export default {
  name: "MiningAcccount",
  components: {
    [Grid.name]: Grid,
    [GridItem.name]: GridItem,
    [Popup.name]: Popup,
    [Icon.name]: Icon,
    MiningExchangeInput,
    [List.name]: List,
    [PullRefresh.name]: PullRefresh,
    [Tab.name]: Tab,
    [Tabs.name]: Tabs,
  },
  props: {
    show: {
      type: Boolean,
      default: false,
    },
  },
  computed: {
    ...mapGetters("home", ["currency", "theme"]),
    ...mapGetters("user", ["userInfo"]),
    amountAvailable() {
      let res;
 
      let data = this.actions.find((item) => {
        // console.log(item.name, this.form.symbol, "====");
        return item.name === this.form.symbol;
      });
      console.log(this.form, this.actions, data);
      if (data) {
        res = data.usable;
      } else {
        res = 0;
      }
      return res;
    },
    tabList() {
      return [
        { 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)
      );
    },
  },
  data() {
    return {
      showPopup: false,
      activeRecord: "exchange",
      valueTwo: 0,
      rate: 0,
      form: {
        // 闪兑
        symbol: this.$t("现货账户"),
        symbol_to: this.$t("合约账户 (U本位)"),
        volume: "",
        volume1: "",
        rate: 0,
      },
      interval: null,
      actions: [
        {
          symbol: "usdt",
          name: this.$t("现货账户"),
          usable: "--",
          usdt: "--",
          key: "money_wallet",
          apiKey: "MONEY",
        },
        {
          symbol: "usdt",
          name: this.$t("合约账户 (U本位)"),
          usable: "--",
          usdt: "--",
          key: "pact_money",
          apiKey: "PACK_MONEY",
        },
        {
          symbol: "usdt",
          name: this.$t("期权合约账户"),
          usable: "--",
          usdt: "--",
          key: "delivery_money",
          apiKey: "DELIVERY_MONEY",
        },
      ],
      balance: 0, // 质押余额
      page: 1,
      loading: false, // 当loading为true时，转圈圈
      finished: false, // 数据是否请求结束，结束会先显示'已经全部加载完毕'
      noData: false, // 如果没有数据，显示暂无数据
      wallets: [], // 钱包列表
      active: 0,
    };
  },
  created() {
    Axiosassets.GetConvert().then((res) => {
      const { code, data } = res;
      if (code) {
        this.actions.map((item) => {
          // console.log(data[item.key], item.key);
          item.usable = data[item.key];
          item.usdt = (data[item.key] * this.currency.rate).toFixed(2);
        });
        // this.actions.map((item) => [(item.usable = data[item.key])]);
      }
    });
  },
  methods: {
    getAssets() {
      Axios.GetConvert().then((res) => {
        const { code, data } = res;
        if (code) {
          //console.log('总资产数据',data)
          this.funds = data;
        }
      });
    },
    onMax() {
      // 最大
 
      if (this.amountAvailable / 1) {
        this.form.volume = this.amountAvailable;
        this.onInput();
      } else {
        this.$toast(this.$t("你没有可提数量"));
      }
    },
    onInput() {
      // 获取最新
      this.clearInterval();
      if (this.form.volume == "") {
        this.form.get_volume = "";
      } else {
        this.debounceFn();
      }
    },
    debounceFn: debounce(function () {
      // 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();
        }
      });
    },
    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) {
      // 选择
      let symbol = this.form["symbol"];
      let symbol1 = this.form["symbol_to"];
      if (type == "symbol") {
        this.form["symbol"] = evt.item;
      } else {
        this.form["symbol_to"] = evt.item;
      }
      if (this.form["symbol"] === this.form["symbol_to"] && type == "symbol") {
        // console.log(33333);
        this.form["symbol_to"] = symbol;
      }
      if (
        this.form["symbol"] === this.form["symbol_to"] &&
        type == "symbol_to"
      ) {
        // console.log(33333);
        this.form["symbol"] = symbol1;
      }
      if (this.form.symbol !== this.form.symbol_to) {
        this.form.volume = "";
      }
      this.clearInterval();
    },
    async onConfirm() {
      // 闪兑
      this.clearInterval();
      if (this.form.volume == "") {
        this.$toast(this.$t("请输入数量"));
      } else if (Number(this.form.volume) > Number(this.amountAvailable)) {
        this.$toast(this.$t("请输入数量"));
      } else {
        let opt = { amount: Number(this.form.volume) };
        this.actions.map((item) => {
          if (item.name === this.form.symbol) {
            opt.from = item.apiKey;
          }
          if (item.name === this.form.symbol_to) {
            opt.to = item.apiKey;
          }
        });
        const res = await Axiosassets.SetAllAssets(opt);
 
        if (res.code === "0") {
          this.$router.push("/funds");
        }
      }
    },
    clearInterval() {
      // 清除定时器
      clearInterval(this.interval);
      this.interval = null;
    },
  },
  beforeDestroy() {
    // console.log('beforeDestroy')
    this.clearInterval();
  },
};
</script>
 
<style lang="scss" scoped>
#mining-account {
  ::v-deep .van-tabs__nav {
    @include themify() {
      background-color: themed("main_background") !important;
    }
  }
 
  ::v-deep .van-tab {
    @include themify() {
      color: themed("text_color");
    }
  }
 
  ::v-deep .van-tab--active {
    @include themify() {
      background: themed("main_background") !important;
    }
  }
}
 
.ex-bg {
  width: 70px;
  height: 70px;
 
  @include themify() {
    background: 12px solid themed("cont_background");
  }
 
  border-radius: 50%;
  margin: 30px auto;
}
 
.exchange-btn {
  margin-top: 400px;
 
  .btnMain {
    background: linear-gradient(90deg, #2c64d4 0%, #38aeea 100%);
    border-radius: 10px;
  }
}
</style>