<template>
|
<div>
|
<div class="flex mt-52 items-center">
|
<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}/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"
|
/>
|
</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%' }"
|
>
|
<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="flex items-center justify-center mt-20">
|
<img
|
:src="`${HOST_URL}/wap/symbol/${coin}.png`"
|
alt="logo"
|
class="w-48 h-48 rounded-full mr-23"
|
/>
|
|
{{ 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}/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>
|
<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"
|
/>
|
</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="flex-1 flex items-center">
|
<div>
|
<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>
|
</div>
|
</div>
|
<div class="text-right" v-if="activeIndex == 0">
|
<div class="item-title textColor">{{ item.usable }}</div>
|
<div class="item-text">${{ item.usdt }}</div>
|
</div>
|
</div>
|
</div>
|
</div>
|
</van-popup>
|
</div>
|
</template>
|
|
<script>
|
import { ActionSheet, Popup, Field } from "vant";
|
import { HOST_URL } from "@/config";
|
// import { mapGetters } from "vuex";
|
export default {
|
name: "MiningExchangeInput",
|
components: {
|
[ActionSheet.name]: ActionSheet,
|
[Popup.name]: Popup,
|
[Field.name]: Field,
|
},
|
computed: {
|
// ...mapGetters({coinList: 'home/coinList'}),
|
// actions() { // 下拉列表
|
// const list = this.coinList.slice(0)
|
// list.map(item => {
|
// item.name = item.symbol.toUpperCase()
|
// })
|
// list.unshift({symbol: 'usdt', name: 'USDT'})
|
// return list
|
// }
|
},
|
created() {
|
this.currencyList = this.actions;
|
this.allCurrencyList = this.actions;
|
},
|
props: {
|
actions: {
|
type: Array,
|
default() {
|
return [];
|
},
|
},
|
title: {
|
type: String,
|
default: "",
|
},
|
disabled: {
|
type: Boolean,
|
default: false,
|
},
|
value: {
|
type: [Number, String],
|
default: 0,
|
},
|
getval: {
|
type: String,
|
default: "",
|
},
|
coin: {
|
type: String,
|
default: "eth",
|
},
|
coin_name: {
|
type: String,
|
default: "ETH",
|
},
|
coin1: {
|
type: String,
|
default: "eth",
|
},
|
coin1_name: {
|
type: String,
|
default: "ETH",
|
},
|
showMax: {
|
type: Boolean,
|
default: true,
|
},
|
tips: {
|
type: Array,
|
default() {
|
return [];
|
},
|
},
|
type: {
|
type: Number,
|
default: 1,
|
},
|
},
|
watch: {
|
actions(val) {
|
this.currencyList = val;
|
this.allCurrencyList = val;
|
},
|
},
|
data() {
|
return {
|
HOST_URL,
|
show: false,
|
searchValue: "",
|
activeIndex: 0,
|
currencyList: [],
|
allCurrencyList: [],
|
};
|
},
|
methods: {
|
onInput(e) {
|
// 响应外层v-models
|
this.$emit("input", e.target.value);
|
},
|
onMax() {
|
this.$emit("max");
|
},
|
onShowActionSheet() {
|
if (this.type == 1) {
|
this.activeIndex = 0;
|
} else {
|
this.activeIndex = 1;
|
}
|
if (this.actions.length) {
|
this.show = true;
|
}
|
},
|
onSelect(e) {
|
// 选中
|
let obj = {
|
item: e,
|
type: this.activeIndex,
|
};
|
this.searchValue = "";
|
this.$emit("select", obj);
|
this.show = false;
|
},
|
checkActive(val) {
|
this.activeIndex = val;
|
},
|
//搜索
|
searchFun() {
|
if (this.searchValue) {
|
this.currencyList = this.currencyList.filter((item) => {
|
return (
|
item.symbol.toUpperCase().indexOf(this.searchValue.toUpperCase()) !=
|
-1
|
);
|
});
|
} else {
|
this.currencyList = this.allCurrencyList;
|
}
|
},
|
},
|
};
|
</script>
|
<style lang="scss" scoped>
|
.input-wrap {
|
border-left: 1px solid #3e4968;
|
padding-left: 30px;
|
}
|
|
.van-action-sheet__item {
|
@include themify() {
|
background: themed("main_background");
|
}
|
|
@include themify() {
|
color: themed("text_color");
|
}
|
}
|
|
.money-bag {
|
color: #818181;
|
}
|
|
.exchange-pop {
|
.tab-list {
|
@include themify() {
|
background: themed("tab_background");
|
}
|
|
border-radius: 140px;
|
height: 180px;
|
color: #fff;
|
|
.tab-item {
|
text-align: center;
|
}
|
|
.active {
|
@include themify() {
|
background: themed("btn_background");
|
}
|
|
border-radius: 140px;
|
}
|
}
|
|
.title {
|
color: #fff;
|
padding: 30px 0;
|
}
|
|
.search-input {
|
color: #fff;
|
|
@include themify() {
|
background: themed("tab_background");
|
}
|
|
border-radius: 80px;
|
}
|
|
.list {
|
color: #fff;
|
|
.list-item {
|
.item-title {
|
font-size: 30px;
|
font-weight: bold;
|
}
|
|
.item-text {
|
color: #868d9a;
|
font-size: 24px;
|
margin-top: 5px;
|
}
|
}
|
}
|
}
|
|
::v-deep .van-field__control {
|
color: #747a8f;
|
}
|
</style>
|
