<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.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>
|
<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.toLowerCase()}.png`" alt="logo"
|
class="w-48 h-48 rounded-full mr-23" />
|
|
{{ coin }}
|
</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.toLowerCase()}.png`" alt="logo"
|
class="w-48 h-48 rounded-full mr-23" />
|
{{ coin1 }}
|
</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",
|
},
|
coin1: {
|
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>
|
