1

李凌

2025-09-19 e1e51991ad91c14fa00c5cf46f95e514f676ac4d

 src/components/Transform/mining-account/index.vue

@@ -37,287 +37,292 @@
</template>

<script>
   import MiningExchangeInput from "../mining-exchange-input/index.vue";
   import {
      Grid,
      GridItem,
      Popup,
      Icon,
      showToast
   } from "vant";
   // import { mapState } from "vuex";
   import {
      _exchangeRage,
      _getAllWallet,
      _initWidthdrawl,
      _widthdrawl,
      _records
   } from "@/service/fund.api";
   import {
      mapGetters
   } from "vuex";
   import {
      List,
      PullRefresh
   } from 'vant';
   import {
      debounce
   } from '@/utils'
   export default {
      name: "MiningAcccount",
      components: {
         [Grid.name]: Grid,
         [GridItem.name]: GridItem,
         [Popup.name]: Popup,
         [Icon.name]: Icon,
         MiningExchangeInput,
         [List.name]: List,
         [PullRefresh.name]: PullRefresh
import MiningExchangeInput from "../mining-exchange-input/index.vue";
import {
   Grid,
   GridItem,
   Popup,
   Icon,
   showToast
} from "vant";
// import { mapState } from "vuex";
import {
   _exchangeRage,
   _getAllWallet,
   _initWidthdrawl,
   _widthdrawl,
   _records
} from "@/service/fund.api";
import {
   mapGetters
} from "vuex";
import {
   List,
   PullRefresh
} from 'vant';
import {
   debounce
} from '@/utils'
export default {
   name: "MiningAcccount",
   components: {
      [Grid.name]: Grid,
      [GridItem.name]: GridItem,
      [Popup.name]: Popup,
      [Icon.name]: Icon,
      MiningExchangeInput,
      [List.name]: List,
      [PullRefresh.name]: PullRefresh
   },
   props: {
      show: {
         type: Boolean,
         default: false,
      },
      props: {
         show: {
            type: Boolean,
            default: false,
   },
   computed: {
      ...mapGetters('user', ['userInfo']),
      tabList() {
         return [{
            id: 1,
            text: this.$t('提幣')
         },
         {
            id: 2,
            text: this.$t('交易記錄')
         }
         ]
      },
      computed: {
         ...mapGetters('user', ['userInfo']),
         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)
         },
         amountAvailable() {
            console.log(this.form.symbol)
            console.log(this.wallets)
            let res
            let dataInfo = this.wallets.find(item => item.symbol_data.toUpperCase() === this.form.symbol.toUpperCase())
      addr() {
         const account = this.userInfo.account
         return account && account.substr(0, 5) + '********' + account.substr(account.length - 5)
      },
      amountAvailable() {
         // console.log("ddddddddddddddddddd", this.form.iconImg1, this.wallets)
         let res
         let dataInfo = this.wallets.find(item => item.symbol_data.toUpperCase() == this.form.iconImg1.toUpperCase())

            if (dataInfo) {
               res = dataInfo.usable
            } else {
               res = 0
            }
            return res
         },
         if (dataInfo) {
            res = dataInfo.usable
         } else {
            res = 0
         }

         return res
      },
      data() {
         return {
            showPopup: false,
            activeRecord: 'exchange',
            valueTwo: 0,
   },
   data() {
      return {
         showPopup: false,
         activeRecord: 'exchange',
         valueTwo: 0,
         rate: 0,
         form: { // 闪兑
            symbol: 'USDC',
            symbol_to: 'USDT',
            name: '',
            volume: '',
            rate: 0,
            form: { // 闪兑
               symbol: 'USDC',
               symbol_to: 'USDT',
               volume: '',
               rate: 0,
               iconImg2: '',
               iconImg1: '',
               symbol_ex: '',
               symbol_to_ex: '',
            iconImg2: '',
            iconImg1: '',
            symbol_ex: '',
            symbol_to_ex: '',

            },
            interval: null,
            actions: [],
            balance: 0, // 质押余额
            page: 1,
            loading: false, // 当loading为true时，转圈圈
            finished: false, // 数据是否请求结束，结束会先显示'已经全部加载完毕'
            noData: false, // 如果没有数据，显示暂无数据
            wallets: [], // 钱包列表
            active: 0,
         },
         interval: null,
         actions: [],
         balance: 0, // 质押余额
         page: 1,
         loading: false, // 当loading为true时，转圈圈
         finished: false, // 数据是否请求结束，结束会先显示'已经全部加载完毕'
         noData: false, // 如果没有数据，显示暂无数据
         wallets: [], // 钱包列表
         active: 0,
      }
   },
   created() {
      let obj = {
         symbolType: 'cryptos'
      }
      _getAllWallet(obj).then(data => {
         this.actions = []
         data.extends.map(item => {
            this.actions.push({
               symbol: item.symbol,
               name: item.name,
               symbol_data: item.symbol,
               usable: item.usable,
               usdt: item.usdt,
               symbol_data: item.symbol_data
            })
         })
         this.wallets = data.extends
         console.log("this.actions", this.actions[0].symbol_data);
         this.form.symbol = this.strToArr(this.actions[0].name, '/')[0]
         this.form.symbol_to = this.strToArr(this.actions[1].name, '/')[0]
         this.form.iconImg1 = this.actions[0].symbol_data
         this.form.iconImg2 = this.actions[1].symbol_data
         this.form.symbol_ex = this.actions[0].symbol
         this.form.symbol_to_ex = this.actions[1].symbol

      })
   },
   methods: {
      onMax() { // 最大
         if (this.amountAvailable / 1) {
            this.form.volume = this.amountAvailable
            this.debounceFn()
         } else {
            showToast(this.$t('你没有可提数量'))
         }
      },
      created() {
         let obj = {
            symbolType: 'cryptos'
      onInput(e) { // 获取最新
         this.form.volume = e.target.value
         this.clearInterval()
         if (this.form.volume == '') {
            this.form.get_volume = ''
         } else {
            this.debounceFn()
         }
         _getAllWallet(obj).then(data => {
            this.actions = []
            data.extends.map(item => {
               this.actions.push({
                  symbol: item.symbol,
                  name: item.symbol,
                  symbol_data: item.symbol,
                  usable: item.usable,
                  usdt: item.usdt,
                  symbol_data: item.symbol_data
               })
            })
            this.wallets = data.extends
            console.log("this.actions",this.actions[0].symbol_data);
            this.form.symbol = this.actions[0].symbol_data
            this.form.symbol_to = this.actions[1].symbol_data
            this.form.iconImg1 = this.actions[0].symbol_data
            this.form.iconImg2 = this.actions[1].symbol_data
            this.form.symbol_ex = this.actions[0].symbol
            this.form.symbol_to_ex = this.actions[1].symbol
      },
      debounceFn: debounce(function () {

         this.fetchRate(true)
      }, 300),
      fetchRate(callback) { // interval
         let obj = {
            symbol: this.form.symbol_ex,
            symbol_to: this.form.symbol_to_ex,
            volume: this.form.volume
         }
         _exchangeRage(obj).then(data => {
            const {
               get_rate
            } = data
            this.form.rate = get_rate
            this.clearInterval()
            if (callback && typeof callback === 'function') {
               callback()
            }
         })
      },
      methods: {
         onMax() { // 最大
            if (this.amountAvailable / 1) {
               this.form.volume = this.amountAvailable
               this.debounceFn()
            } else {
               showToast(this.$t('你没有可提数量'))
            }
         },
         onInput(e) { // 获取最新
            this.form.volume = e.target.value
            this.clearInterval()
            if (this.form.volume == '') {
               this.form.get_volume = ''
            } else {
               this.debounceFn()
            }
         },
         debounceFn: debounce(function() {
      onSwitch() { // 交换
         const temp = this.form.symbol
         this.form.symbol = this.form.symbol_to
         this.form.symbol_to = temp
         const tempImg = this.form.iconImg1
         this.form.iconImg1 = this.form.iconImg2
         this.form.iconImg2 = tempImg
         const tempsymbol = this.form.symbol_ex
         this.form.symbol_ex = this.form.symbol_to_ex
         this.form.symbol_to_ex = tempsymbol

            this.fetchRate(true)
         }, 300),
         fetchRate(callback) { // interval
            let obj = {
               symbol: this.form.symbol_ex,
               symbol_to: this.form.symbol_to_ex,
               volume: this.form.volume
            }
            _exchangeRage(obj).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
            const tempImg = this.form.iconImg1
            this.form.iconImg1 = this.form.iconImg2
            this.form.iconImg2 = tempImg
            const tempsymbol = this.form.symbol_ex
            this.form.symbol_ex = this.form.symbol_to_ex
            this.form.symbol_to_ex = tempsymbol
				
         this.form.volume = ''
         console.log("this.form", this.form);
         this.clearInterval()
      },
      onSelect(type, evt) { // 选择
         if (evt.type == 0) {
            this.form['symbol'] = this.strToArr(evt.item.name, '/')[0]
            this.form['iconImg1'] = evt.item.symbol_data
            this.form['symbol_ex'] = evt.item.symbol
         } else {
            this.form['symbol_to'] = this.strToArr(evt.item.name, '/')[0]
            this.form['iconImg2'] = evt.item.symbol_data
            this.form['symbol_to_ex'] = evt.item.symbol
         }
         if (this.form.symbol !== this.form.symbol_to) {
            this.form.volume = ''
            console.log("this.form",this.form);
            this.clearInterval()
         },
         onSelect(type, evt) { // 选择
            if (evt.type == 0) {
               this.form['symbol'] = evt.item.symbol_data
               this.form['iconImg1'] = evt.item.symbol_data
               this.form['symbol_ex'] = evt.item.symbol
            } else {
               this.form['symbol_to'] = evt.item.symbol_data
               this.form['iconImg2'] = evt.item.symbol_data
               this.form['symbol_to_ex'] = evt.item.symbol
            }
            if (this.form.symbol !== this.form.symbol_to) {
               this.form.volume = ''
            }
            this.clearInterval()
         },
         onConfirm() { // 闪兑
            this.clearInterval()
            if (this.form.volume == '') {
               showToast(this.$t('请输入数量'));
            } else {
               this.fetchRate(() => {
                  this.$emit("exchange", this.form);
               })
            }
         },
         clearInterval() { // 清除定时器
            clearInterval(this.interval)
            this.interval = null
         }
         this.clearInterval()
      },
      onConfirm() { // 闪兑
         this.clearInterval()
         if (this.form.volume == '') {
            showToast(this.$t('请输入数量'));
         } else {
            this.fetchRate(() => {
               this.$emit("exchange", this.form);
            })
         }
      },
      beforeUnmount() {
         // console.log('beforeDestroy')
         this.clearInterval()
      }
   };
      clearInterval() { // 清除定时器
         clearInterval(this.interval)
         this.interval = null
      },
      strToArr(str, separator = ',') {
         if (typeof str !== 'string') return [];
         return str.split(separator);
      },
   },
   beforeUnmount() {
      // console.log('beforeDestroy')
      this.clearInterval()
   }
};
</script>

<style scoped lang="scss">
   @import "@/assets/init.scss";
@import "@/assets/init.scss";

   #cryptos {
      .account_card {
#cryptos {
   .account_card {
      background: $inp-b !important;
      border-radius: 2.5rem;
      padding: 1.2rem 2.5rem;

      div {
         background: $inp-b !important;
         border-radius: 2.5rem;
         padding: 1.2rem 2.5rem;

         div {
            background: $inp-b !important;
         }
      }

      .exchange-btn {
         bottom: 48px;
         left: 0;

         font-size: 36px;

         p {
            border-radius: 4rem;
         }
      }

      .active {
         color: $black;

         &:after {
            content: '';
            display: block;
            position: absolute;
            bottom: 0;
            width: 140px;
            height: 8px;
            background: $active_line;
            margin: 0 auto;
         }
      }

      .convert-box {
         background: $mainbgWhiteColor;
         margin: -2rem auto;
         border-radius: 50%;
         display: flex;
         align-items: center;
         justify-content: center;
         width: 6rem;
         height: 6rem;
         position: relative;

         img {
            width: 50%;
            height: 50%;
         }
      }

      .btnMain {
         background: linear-gradient(90deg, #2C64D4 0%, #38AEEA 100%);
         border-radius: 5px;
         font-weight: bold;
      }
   }

   .exchange-btn {
      bottom: 48px;
      left: 0;

      font-size: 36px;

      p {
         border-radius: 4rem;
      }
   }

   .active {
      color: $black;

      &:after {
         content: '';
         display: block;
         position: absolute;
         bottom: 0;
         width: 140px;
         height: 8px;
         background: $active_line;
         margin: 0 auto;
      }
   }

   .convert-box {
      background: $mainbgWhiteColor;
      margin: -2rem auto;
      border-radius: 50%;
      display: flex;
      align-items: center;
      justify-content: center;
      width: 6rem;
      height: 6rem;
      position: relative;

      img {
         width: 50%;
         height: 50%;
      }
   }

   .btnMain {
      background: linear-gradient(90deg, #2C64D4 0%, #38AEEA 100%);
      border-radius: 5px;
      font-weight: bold;
   }
}
</style>