From e01cee0f0c5c5c2eb2d8595eadb3c7a9df2a37fc Mon Sep 17 00:00:00 2001
From: 李凌 <344137771@qq.com>
Date: Wed, 21 Jan 2026 16:37:01 +0800
Subject: [PATCH] 1
---
src/components/Transform/mining-account/index.vue | 549 ++++++++++++++++++++++++++++++------------------------
1 files changed, 301 insertions(+), 248 deletions(-)
diff --git a/src/components/Transform/mining-account/index.vue b/src/components/Transform/mining-account/index.vue
index 09642e9..556205d 100644
--- a/src/components/Transform/mining-account/index.vue
+++ b/src/components/Transform/mining-account/index.vue
@@ -1,220 +1,264 @@
<template>
- <div id="cryptos">
- <div id="mining-account">
- <div style="position: relative" class="px-30 pb-104">
- <div class="account_card">
- <mining-exchange-input :title="$t('从')" :value1="form.volume" :actions="actions"
- @select="onSelect('symbol', $event)" @input="onInput" :type="1" @max="onMax" :coin="form.symbol"
- :coin1="form.symbol_to" :tips="[]" :iconImg1="form.iconImg1" :iconImg2="form.iconImg2"
- :available="`${amountAvailable} ${form.symbol.toUpperCase()}`" :showMax="true" />
- <!-- <div v-if="show" class="font-28 text-grey">
+ <div id="cryptos">
+ <div id="mining-account">
+ <div style="position: relative" class="px-30 pb-104">
+ <div class="account_card">
+ <mining-exchange-input :title="$t('从')" :value1="form.volume" :actions="actions"
+ @select="onSelect('symbol', $event)" @input="onInput" :type="1" @max="onMax" :coin="form.symbol"
+ :coin1="form.symbol_to" :tips="[]" :iconImg1="form.iconImg1" :iconImg2="form.iconImg2"
+ :available="`${amountAvailable} ${form.symbol.toUpperCase()}`" :showMax="true" />
+ <!-- <div v-if="show" class="font-28 text-grey">
{{ $t('可用数量') }}：
<span class="textColor">{{ amountAvailable }} {{ form.symbol.toUpperCase() }}</span>
</div> -->
- </div>
+ </div>
- <div class="flex justify-center convert-box">
- <img src="../../../assets/image/assets-center/convert-two.png" alt="" @click="onSwitch" />
- </div>
+ <div class="flex justify-center convert-box">
+ <img src="../../../assets/image/assets-center/convert-two.png" alt="" @click="onSwitch" />
+ </div>
- <div class="account_card">
- <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" :coin="form.symbol"
- :coin1="form.symbol_to" :tips="[]" :showMax="false" :iconImg1="form.iconImg1" :iconImg2="form.iconImg2" />
- </div>
+ <div class="account_card">
+ <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" :coin="form.symbol"
+ :coin1="form.symbol_to" :tips="[]" :showMax="false" :iconImg1="form.iconImg1"
+ :iconImg2="form.iconImg2" />
+ </div>
- <div class="exchange-btn w-full flex justify-center mt-116">
- <p class="h-100 btnMain mx-auto flex justify-center items-center text-white w-768" @click="onConfirm">
- {{ $t('询价') }}
- </p>
- </div>
- </div>
- </div>
- </div>
+ <div class="exchange-btn w-full flex justify-center mt-116">
+ <p class="h-100 btnMain mx-auto flex justify-center items-center text-white w-768"
+ @click="onConfirm">
+ {{ $t('询价') }}
+ </p>
+ </div>
+ </div>
+ </div>
+ </div>
</template>
<script>
import MiningExchangeInput from "../mining-exchange-input/index.vue";
-import { Grid, GridItem, Popup, Icon, showToast } from "vant";
+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'
+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,
- },
- },
- 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())
+ 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,
+ },
+ },
+ 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("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
- },
- },
- data() {
- return {
- showPopup: false,
- activeRecord: 'exchange',
- valueTwo: 0,
- rate: 0,
- form: { // 闪兑
- symbol: 'ETH',
- symbol_to: 'USDT',
- volume: '',
- rate: 0,
- iconImg2: '',
- iconImg1: '',
- symbol_ex: '',
- symbol_to_ex: '',
+ if (dataInfo) {
+ res = dataInfo.usable
+ } else {
+ res = 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.symbol, symbol_data: item.symbol, usable: item.usable, usdt: item.usdt, symbol_data: item.symbol_data })
- })
- this.wallets = data.extends
- this.form.symbol_to = this.actions[2].symbol_data
- this.form.symbol = this.actions[0].symbol_data
+ return res
+ },
+ },
+ data() {
+ return {
+ showPopup: false,
+ activeRecord: 'exchange',
+ valueTwo: 0,
+ rate: 0,
+ form: { // 闪兑
+ symbol: 'USDC',
+ symbol_to: 'USDT',
+ name: '',
+ volume: '',
+ rate: 0,
+ iconImg2: '',
+ iconImg1: '',
+ symbol_ex: '',
+ symbol_to_ex: '',
- this.form.iconImg1 = this.actions[0].symbol_data
- this.form.iconImg2 = this.actions[2].symbol_data
+ },
+ 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
- this.form.symbol_ex = this.actions[0].symbol
- this.form.symbol_to_ex = this.actions[2].symbol
+ })
+ },
+ 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 () {
- })
- },
- 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 () {
+ 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.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
-
- this.form.volume = ''
- 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
- }
- },
- beforeUnmount() {
- // console.log('beforeDestroy')
- this.clearInterval()
- }
+ 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 = ''
+ }
+ 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
+ },
+ strToArr(str, separator = ',') {
+ if (typeof str !== 'string') return [];
+ return str.split(separator);
+ },
+ },
+ beforeUnmount() {
+ // console.log('beforeDestroy')
+ this.clearInterval()
+ }
};
</script>
@@ -222,62 +266,71 @@
@import "@/assets/init.scss";
#cryptos {
- .account_card {
- background: $inp-b !important;
- border-radius: 2.5rem;
- padding: 1.2rem 2.5rem;
+ .account_card {
+ // background: $inp-b !important;
+ border-radius: 2.5rem;
+ padding: 1.2rem 2.5rem;
- div {
- background: $inp-b !important;
- }
- }
+ @include themify() {
+ background: themed("input_background") !important;
+ }
- .exchange-btn {
- bottom: 48px;
- left: 0;
+ div {
+ // background: $inp-b !important;
- font-size: 36px;
+ @include themify() {
+ background: themed("input_background") !important;
+ }
+ }
+ }
- p {
- border-radius: 4rem;
- }
- }
+ .exchange-btn {
+ bottom: 48px;
+ left: 0;
- .active {
- color: $black;
+ font-size: 36px;
- &:after {
- content: '';
- display: block;
- position: absolute;
- bottom: 0;
- width: 140px;
- height: 8px;
- background: $active_line;
- margin: 0 auto;
- }
- }
+ p {
+ border-radius: 4rem;
+ }
+ }
- .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%;
- }
- }
+ .active {
+ color: $black;
- .btnMain {
- background: linear-gradient(90deg, #2C64D4 0%, #38AEEA 100%);
- border-radius: 5px;
- font-weight: bold;
- }
+ &: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>
+</style>
\ No newline at end of file
--
Gitblit v1.9.3