feat

lxf

2025-04-18 66a33e936d39ec4db7fdffed5d646e044ccc43e9

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

@@ -1,66 +1,119 @@
<template>
  <div>
    <div class="flex mt-52 items-center">
      <p class=" font-30 flex-1 textColor">{{ title }}</p>
      <p class="font-30 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>
    <div style="box-sizing: border-box"
      class="w-full rounded mt-22 px-20 flex items-center box-border py-20 inputBackground">
      <div class="flex border-r-gray border-white items-center" @click="onShowActionSheet">
        <img :src="`${HOST_URL}/symbol/${type == 1 ? coin.toLowerCase() : coin1.toLowerCase()}.png`" alt="logo"
          class="w-48 h-48 rounded-full mr-23" />
        <span class="font-30 mr-50 w-62 textColor">{{ type == 1 ? coin : coin1 }}</span>
    <div
      style="box-sizing: border-box"
      class="w-full rounded mt-22 px-20 flex items-center box-border py-20 inputBackground"
    >
      <div
        class="flex border-r-gray border-white items-center"
        @click="onShowActionSheet"
      >
        <img
          :src="`${HOST_URL}/wap/symbol/${type == 1 ? coin : coin1}.png`"
          alt="logo"
          class="w-48 h-48 rounded-full mr-23"
        />
        <span class="font-30 mr-50 w-62 textColor">{{
          type == 1 ? coin_name : coin1_name
        }}</span>
        <img src="./icon-arrow.png" alt="logo" class="w-22 h-14" />
      </div>
      <div class="input-wrap flex justify-between flex-1 items-center ml-30">
        <input placeholder="" type="number" class="h-60 border-none inputBackground textColor" :value="value"
          @input="onInput" :disabled="disabled" />
        <input
          placeholder=""
          type="number"
          class="h-60 border-none inputBackground textColor"
          :value="value"
          @input="onInput"
          :disabled="disabled"
        />
      </div>
      <div v-if="showMax" class="text-blue pr-20" @click="onMax">{{ $t('最大') }}</div>
      <div v-if="showMax" class="text-blue pr-20" @click="onMax">
        {{ $t("最大") }}
      </div>
    </div>
    <div class="flex justify-between font-22 mt-15 text-grey">
      <p v-for="(tip, index) in tips" :key="index">{{ tip }}</p>
    </div>
    <!-- <van-action-sheet  v-model="show" :actions="actions" @select="onSelect" /> -->
    <van-popup v-model="show" position="bottom" class="mainBackground" :style="{ height: '80%' }">
    <van-popup
      v-model="show"
      position="bottom"
      class="mainBackground"
      :style="{ height: '80%' }"
    >
      <div class="px-30 py-30 exchange-pop">
        <div class="tab-list flex">
          <div class="tab-item flex-1 textColor" :class="[activeIndex == 0 ? 'active' : '']" @click="checkActive(0)">
            <div class="mt-30">{{ $t('从') }}</div>
          <div
            class="tab-item flex-1 textColor"
            :class="[activeIndex == 0 ? 'active' : '']"
            @click="checkActive(0)"
          >
            <div class="mt-30">{{ $t("从") }}</div>
            <div class="flex items-center justify-center mt-20">
              <img :src="`${HOST_URL}/symbol/${coin.toLowerCase()}.png`" alt="logo"
                class="w-48 h-48 rounded-full mr-23" />
              <img
                :src="`${HOST_URL}/wap/symbol/${coin}.png`"
                alt="logo"
                class="w-48 h-48 rounded-full mr-23"
              />

              {{ coin }}
              {{ coin_name }}
            </div>
          </div>
          <div class="tab-item flex-1 textColor" :class="[activeIndex == 1 ? 'active' : '']" @click="checkActive(1)">
            <div class="mt-30">{{ $t('至') }}</div>
            <div class="flex items-center justify-center  mt-20">
              <img :src="`${HOST_URL}/symbol/${coin1.toLowerCase()}.png`" alt="logo"
                class="w-48 h-48 rounded-full mr-23" />
              {{ coin1 }}
          <div
            class="tab-item flex-1 textColor"
            :class="[activeIndex == 1 ? 'active' : '']"
            @click="checkActive(1)"
          >
            <div class="mt-30">{{ $t("至") }}</div>
            <div class="flex items-center justify-center mt-20">
              <img
                :src="`${HOST_URL}/wap/symbol/${coin1}.png`"
                alt="logo"
                class="w-48 h-48 rounded-full mr-23"
              />
              {{ coin1_name }}
            </div>
          </div>
        </div>
        <div class="title">{{ $t('闪兑至') }}</div>
        <div class="title">{{ $t("闪兑至") }}</div>
        <div>
          <van-field v-model="searchValue" @input="searchFun" class="search-input" :placeholder="$t('搜索')"
            >
          <van-field
            v-model="searchValue"
            @input="searchFun"
            class="search-input"
            :placeholder="$t('搜索')"
          >
            <template slot="left-icon">
              <img src="@/assets/image/exchange/icon_5.png" alt="" class="w-40 h-40 mt-5" />
              <img
                src="@/assets/image/exchange/icon_5.png"
                alt=""
                class="w-40 h-40 mt-5"
              />
            </template>
          </van-field>
        </div>
        <div class="list mt-40">

          <div class="list-item flex mb-30" v-for="(item, index) in currencyList" :key="index" @click="onSelect(item)">
          <div
            class="list-item flex mb-30"
            v-for="(item, index) in currencyList"
            :key="index"
            @click="onSelect(item)"
          >
            <div class="flex-1 flex items-center">
              <div>
                <img :src="`${HOST_URL}/symbol/${item.symbol}.png`" alt="logo" class="w-70 h-70 rounded-full mr-23" />
                <img
                  :src="`${HOST_URL}/wap/symbol/${item.symbol}.png`"
                  alt="logo"
                  class="w-70 h-70 rounded-full mr-23"
                />
              </div>
              <div>
                <div class="item-title textColor">{{ item.name }}</div>
@@ -79,7 +132,7 @@

<script>
import { ActionSheet, Popup, Field } from "vant";
import { HOST_URL } from '@/config'
import { HOST_URL } from "@/config";
// import { mapGetters } from "vuex";
export default {
  name: "MiningExchangeInput",
@@ -100,16 +153,15 @@
    // }
  },
  created() {

    this.currencyList = this.actions
    this.allCurrencyList = this.actions
    this.currencyList = this.actions;
    this.allCurrencyList = this.actions;
  },
  props: {
    actions: {
      type: Array,
      default() {
        return []
      }
        return [];
      },
    },
    title: {
      type: String,
@@ -117,7 +169,7 @@
    },
    disabled: {
      type: Boolean,
      default: false
      default: false,
    },
    value: {
      type: [Number, String],
@@ -125,13 +177,21 @@
    },
    getval: {
      type: String,
      default: ''
      default: "",
    },
    coin: {
      type: String,
      default: "eth",
    },
    coin_name: {
      type: String,
      default: "ETH",
    },
    coin1: {
      type: String,
      default: "eth",
    },
    coin1_name: {
      type: String,
      default: "ETH",
    },
@@ -148,69 +208,74 @@
    type: {
      type: Number,
      default: 1,
    }
    },
  },
  watch: {
    actions(val) {
      this.currencyList = val
      this.allCurrencyList = val
    }
      this.currencyList = val;
      this.allCurrencyList = val;
    },
  },
  data() {
    return {
      HOST_URL,
      show: false,
      searchValue: '',
      searchValue: "",
      activeIndex: 0,
      currencyList: [],
      allCurrencyList: []
      allCurrencyList: [],
    };
  },
  methods: {
    onInput(e) { // 响应外层v-models
      this.$emit('input', e.target.value)
    onInput(e) {
      // 响应外层v-models
      this.$emit("input", e.target.value);
    },
    onMax() {
      this.$emit('max')
      this.$emit("max");
    },
    onShowActionSheet() {
      if (this.type == 1) {
        this.activeIndex = 0
        this.activeIndex = 0;
      } else {
        this.activeIndex = 1
        this.activeIndex = 1;
      }
      if (this.actions.length) {
        this.show = true;
      }
    },
    onSelect(e) { // 选中
    onSelect(e) {
      // 选中
      let obj = {
        item: e,
        type: this.activeIndex
      }
      this.searchValue = ''
      this.$emit('select', obj)
        type: this.activeIndex,
      };
      this.searchValue = "";
      this.$emit("select", obj);
      this.show = false;
    },
    checkActive(val) {
      this.activeIndex = val
      this.activeIndex = val;
    },
    //搜索
    searchFun() {
      if (this.searchValue) {
        this.currencyList = this.currencyList.filter((item) => {
          return item.symbol.toUpperCase().indexOf(this.searchValue.toUpperCase()) != -1
        })
          return (
            item.symbol.toUpperCase().indexOf(this.searchValue.toUpperCase()) !=
            -1
          );
        });
      } else {
        this.currencyList = this.allCurrencyList
        this.currencyList = this.allCurrencyList;
      }
    }
    },
  },
};
</script>
<style lang="scss" scoped>
.input-wrap {
  border-left: 1px solid #3E4968;
  border-left: 1px solid #3e4968;
  padding-left: 30px;
}

@@ -224,12 +289,9 @@
  }
}



.money-bag {
  color: #818181;
}


.exchange-pop {
  .tab-list {
@@ -273,14 +335,13 @@
    color: #fff;

    .list-item {

      .item-title {
        font-size: 30px;
        font-weight: bold;
      }

      .item-text {
        color: #868D9A;
        color: #868d9a;
        font-size: 24px;
        margin-top: 5px;
      }
@@ -289,6 +350,6 @@
}

::v-deep .van-field__control {
  color: #747A8F;
  color: #747a8f;
}
</style>