1

jhzh

2026-05-22 ef52095f5e9f0a9fe2da779bb1573947d77d75b6

 src/components/Transform/mining-exchange-input/index.vue

@@ -1,35 +1,26 @@
<template>
  <div id="cryptos">
    <div class="flex mt-30 items-center">
      <p class=" font-18 flex-1 textColor">{{ title }}</p>
      <!-- <div class="money-bag" v-if="isMoney">
        现货钱包
        <img src="@/assets/image/exchange/icon_4.png" alt="" class="w-25 h-25" />
      </div> -->
      <div v-if="available.length > 0" class="labelColor">
        {{ $t('可用数量') }}：
        <span>{{ available }}</span>
  <div id="cryptos" class="exchange-input-card">
    <div class="exchange-input-head">
      <span class="exchange-input-title">{{ title }}</span>
      <span class="exchange-input-balance">{{ $t('balance') }}: {{ available || '0' }}</span>
    </div>
    <div class="exchange-input-row">
      <div class="exchange-input-coin" @click="type === 1 && onShowActionSheet()">
        <img :src="`${HOST_URL}/symbol/${type == 1 ? iconImg1 : iconImg2}.png`" alt=""
          class="exchange-input-coin-icon" />
        <span class="exchange-input-coin-symbol">{{ type == 1 ? coin.toUpperCase() : coin1.toUpperCase() }}</span>
        <van-icon v-if="type === 1" name="arrow-down" class="exchange-input-arrow" />
      </div>
      <div class="exchange-input-value">
        <input v-if="type == 1" type="number" class="exchange-input-field"
          v-model="oneValue" @input="onInput" :disabled="disabled" placeholder="0" />
        <span v-else class="exchange-input-result">≈ {{ value || '0' }}</span>
      </div>
    </div>
    <div style="box-sizing: border-box" class="w-full rounded mt-22 flex items-center box-border py-3 inputBackground">
      <div class="flex border-r-gray border-white items-center" @click="onShowActionSheet">
        <img :src="`${HOST_URL}/symbol/${type == 1 ? iconImg1 : iconImg2}.png`" alt="logo"
          class="rounded-full mr-5 currency-icon" />
        <span class="font-16 mr-10 w-62 textColor">{{ type == 1 ? coin.toUpperCase() : coin1.toUpperCase() }}</span>
        <img src="./icon-arrow.png" alt="logo" class="w-12 h-8 icon-arrow" />
    <div class="exchange-input-max" v-if="showMax">
      <span @click="onMax">{{ $t('最大') }}</span>
      </div>
      <div class="input-wrap flex justify-between flex-1 items-center ml-10">
        <input placeholder="" v-if="type == 1" type="number" class="h-40 pl-10 border-none inputBackground textColor"
          v-model="oneValue" @input="onInput" :disabled="disabled" />
        <input placeholder="" v-if="type == 2" type="number" class="h-40 pl-10 border-none inputBackground textColor"
          :value="value" @input="onInput" :disabled="disabled" />
      </div>
      <!-- <div v-if="showMax" class="pr-20" @click="onMax">{{ $t('最大') }}</div> -->
    </div>
    <div class="flex justify-end" v-if="showMax">
      <van-button type="default" round size="small" @click="onMax">{{ $t('最大') }}</van-button>
    </div>
    <div class="flex justify-between font-22 mt-15 text-grey">
    <div class="flex justify-between font-22 mt-15 text-grey" v-if="tips && tips.length">
      <p v-for="(tip, index) in tips" :key="index">{{ tip }}</p>
    </div>
    <!-- <van-action-sheet  v-model="show" :actions="actions" @select="onSelect" /> -->
@@ -242,6 +233,88 @@
  },
};
</script>
<style lang="scss" scoped>
.exchange-input-card {
  background-color: #fff !important;
  font-size: 2rem;
  padding: 40px 0;
}
.exchange-input-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 17px;
}
.exchange-input-title {
  color: #888;
  font-size: 2rem;
}
.exchange-input-balance {
  color: #888;
  font-size: 2rem;
}
.exchange-input-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 7px 0;
  min-height: 53px;
}
.exchange-input-coin {
  display: flex;
  align-items: center;
  gap: 12px;
  cursor: pointer;
}
.exchange-input-coin-icon {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  flex-shrink: 0;
}
.exchange-input-coin-symbol {
  font-size: 2rem;
  font-weight: 600;
  color: #333;
}
.exchange-input-arrow {
  color: #666;
  font-size: 1.6rem;
}
.exchange-input-value {
  flex: 1;
  text-align: right;
  min-width: 0;
  margin-left: 19px;
}
.exchange-input-field {
  width: 100%;
  border: none;
  background: transparent;
  font-size: 2rem;
  font-weight: 600;
  color: #333;
  text-align: right;
  outline: none;
}
.exchange-input-field::placeholder {
  color: #bbb;
}
.exchange-input-result {
  font-size: 2rem;
  font-weight: 600;
  color: #666;
}
.exchange-input-max {
  text-align: right;
  margin-top: 7px;
}
.exchange-input-max span {
  font-size: 2rem;
  color: #5e2bc8;
  cursor: pointer;
}
</style>
<style lang="scss">
@import "@/assets/init.scss";

@@ -250,7 +323,6 @@
  font-size: 30px;

  .input-wrap {
    // border-left: 1px solid #3E4968;
    padding-left: 30px;
  }