From 66a33e936d39ec4db7fdffed5d646e044ccc43e9 Mon Sep 17 00:00:00 2001
From: lxf <1371462558@qq.com>
Date: Fri, 18 Apr 2025 10:44:39 +0800
Subject: [PATCH] feat
---
src/components/mining-exchange-input/index.vue | 191 +++++++++++++++++++++++++++++++----------------
1 files changed, 126 insertions(+), 65 deletions(-)
diff --git a/src/components/mining-exchange-input/index.vue b/src/components/mining-exchange-input/index.vue
index c08ef00..14e7bd1 100644
--- a/src/components/mining-exchange-input/index.vue
+++ b/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>
--
Gitblit v1.9.3