<template>
|
<!-- 账变记录 -->
|
<div class="accountChange">
|
<div class="px-32 py-30 flex items-center">
|
<!-- <img src="@/assets/image/icon-left_arrow.png" alt="logo" class="w-20 h-33 border-1 mr-32" @click="back"/> -->
|
<div class="inputBoxbg h-60 w-full rounded-full flex items-center">
|
<img
|
src="@/assets/image/icon-search.png"
|
alt="logo"
|
class="w-32 h-32 mx-16"
|
/>
|
<input
|
type="text"
|
v-model="keywords"
|
:placeholder="$t('搜索')"
|
class="h-full flex-1 border-none search-input bg-none"
|
@input="onInput"
|
/>
|
</div>
|
<div class="cancel" @click="cancel">
|
{{ $t("取消") }}
|
</div>
|
</div>
|
<van-tabs v-model="active" @change="changeValue">
|
<van-tab :title="$t('热门搜索')"></van-tab>
|
<van-tab :title="$t('热门功能')"></van-tab>
|
</van-tabs>
|
<div v-if="active == 0" class="px-32 mt-20">
|
<div
|
class="list-item flex"
|
v-for="(item, index) in currencyList"
|
:key="index"
|
@click.stop="onItemClick(item)"
|
>
|
<div class="flex-1 item-left flex">
|
<div class="">
|
<van-icon
|
class="star-icon-check"
|
v-if="index == 0 || index == 1"
|
name="fire"
|
/>
|
<span v-else class="font-35">
|
{{ index + 1 }}
|
</span>
|
</div>
|
<div class="pl-30 symbol-name">
|
{{ item.symbol.toUpperCase() }}<span>/usdt</span>
|
</div>
|
</div>
|
<div class="item-right">
|
<div class="symbol-name">{{ item.close }}</div>
|
<div
|
class="increase mt-10"
|
:class="[item.change_ratio > 0 ? 'green' : 'red']"
|
>
|
{{ item.change_ratio }}%
|
</div>
|
</div>
|
<van-icon
|
:class="[item.isCollection ? 'star-icon-check' : 'star-icon']"
|
class="font-40 ml-20"
|
name="star"
|
@click.stop="onCollect(item)"
|
/>
|
</div>
|
</div>
|
<div v-if="active == 1" class="px-32 mt-30">
|
<div
|
class="function-item list-item flex"
|
v-for="(item, index) in dataList"
|
@click="jump(item.path)"
|
:key="index"
|
>
|
<div class="flex-1 flex item-left">
|
<div>
|
<span v-if="index == 0 || index == 1">{{ index + 1 }}</span>
|
<span v-else>
|
{{ index + 1 }}
|
</span>
|
</div>
|
<div class="imgBox ml-30"><img :src="item.icon" alt="" /></div>
|
<div class="ml-30 symbol-name">{{ item.name }}</div>
|
</div>
|
<div class="item-right">
|
<van-icon name="arrow" />
|
</div>
|
</div>
|
</div>
|
<div
|
v-if="dataList.length == 0 || currencyList.length == 0"
|
class="flex flex-col justify-center items-center pt-185"
|
>
|
<img
|
src="@/assets/image/assets-center/no-data.png"
|
alt="no-date"
|
class="w-180 h-180"
|
/>
|
<p class="textColor">{{ $t("暂无数据") }}</p>
|
</div>
|
<div class="loading-box" v-if="isLoading">
|
<van-loading type="spinner" size="24px" />
|
</div>
|
</div>
|
</template>
|
|
<script>
|
import { _fundRecord } from "@/API/fund.api";
|
import { List } from "vant";
|
import { Tab, Tabs, Loading } from "vant";
|
import {
|
_getHomeList,
|
_myCoins,
|
_collect,
|
_deleteCollect,
|
} from "@/API/home.api";
|
import { mapActions, mapGetters } from "vuex";
|
import { TIME_OUT } from "@/config";
|
import { setStorage } from "@/utils/utis";
|
export default {
|
name: "search",
|
data() {
|
return {
|
keywords: "",
|
active: 0,
|
allFunList: [],
|
dataList: [],
|
allCurrencyList: [],
|
currencyList: [],
|
timeout: null,
|
collectionList: [],
|
isLoading: true,
|
};
|
},
|
mounted() {
|
this.NEW_CION_LIST();
|
this.allFunList = [
|
{
|
name: this.$t("理财"),
|
icon: require(`../../assets/theme/${this.theme}/image/nav/finance.png`),
|
path: "/fm-home",
|
},
|
{
|
name: this.$t("充值"),
|
icon: require(`../../assets/theme/${this.theme}/image/nav/account.png`),
|
// path: '/recharge/rechargePage'
|
path: "/recharge/rechargeList",
|
},
|
{
|
name: this.$t("合约交易"),
|
icon: require(`../../assets/theme/${this.theme}/image/nav/trading.png`),
|
path: "/trendDetails/btc",
|
},
|
{
|
name: this.$t("闪兑"),
|
icon: require(`../../assets/theme/${this.theme}/image/nav/exchange.png`),
|
path: "/exchange/exchangePage",
|
},
|
];
|
this.dataList = this.allFunList;
|
if (this.$store.state.user.userInfo.token) {
|
this.myCoinsList();
|
}
|
setTimeout(() => {
|
this.fetchQList();
|
}, 1000);
|
},
|
components: {
|
[List.name]: List,
|
[Tabs.name]: Tabs,
|
[Tab.name]: Tab,
|
[Loading.name]: Loading,
|
},
|
watch: {
|
collectionList(val) {
|
if (val) {
|
this.allCurrencyList.map((item) => {
|
val.map((item2) => {
|
if (item.symbol == item2.symbol) {
|
item.isCollection = true;
|
}
|
});
|
});
|
this.currencyList.map((item) => {
|
val.map((item2) => {
|
if (item.symbol == item2.symbol) {
|
item.isCollection = true;
|
}
|
});
|
});
|
}
|
},
|
},
|
computed: {
|
...mapGetters({
|
coinArr: "home/coinArr",
|
theme: "home/theme",
|
newcoinArr: "home/newcoinArr",
|
}),
|
},
|
filters: {},
|
beforeDestroy() {
|
clearInterval(this.timeout);
|
},
|
methods: {
|
...mapActions("home", ["NEW_CION_LIST"]),
|
|
onInput() {
|
if (this.active == 1) {
|
if (this.keywords) {
|
this.dataList = this.dataList.filter((item) => {
|
return item.name.indexOf(this.keywords) != -1;
|
});
|
} else {
|
this.dataList = this.allFunList;
|
}
|
}
|
},
|
cancel() {
|
this.$router.go(-1);
|
},
|
jump(path) {
|
this.$router.push(path);
|
},
|
myCoinsList() {
|
_myCoins().then((res) => {
|
this.collectionList = res;
|
});
|
},
|
onCollect(item) {
|
// 收藏，取消收藏
|
let _api = _collect;
|
if (item.isCollection) {
|
_api = _deleteCollect;
|
}
|
_api(item.symbol).then(() => {
|
this.myCoinsList();
|
item.collected = !item.collected;
|
if (!item.isCollection) {
|
this.$toast.success(this.$t("收藏成功"));
|
} else {
|
this.$toast.success(this.$t("取消收藏"));
|
}
|
});
|
},
|
fetchQList() {
|
// 获取行情
|
const mainArray = this.coinArr.filter(
|
(item) => !this.newcoinArr.includes(item)
|
);
|
_getHomeList(mainArray.join(",")).then((res) => {
|
this.isLoading = false;
|
res.map((item) => {
|
this.$set(item, "isCollection", false);
|
});
|
this.allCurrencyList = res;
|
this.currencyList = res;
|
this.allCurrencyList.map((item) => {
|
this.collectionList.map((item2) => {
|
if (item.symbol == item2.symbol) {
|
item.isCollection = true;
|
}
|
});
|
});
|
this.currencyList.map((item) => {
|
this.collectionList.map((item2) => {
|
if (item.symbol == item2.symbol) {
|
item.isCollection = true;
|
}
|
});
|
});
|
if (this.active == 0) {
|
if (this.keywords) {
|
this.currencyList = this.currencyList.filter((item) => {
|
return (
|
item.name.toUpperCase().indexOf(this.keywords.toUpperCase()) !=
|
-1
|
);
|
});
|
} else {
|
this.currencyList = this.allCurrencyList;
|
}
|
}
|
this.timeout = setTimeout(() => {
|
this.fetchQList();
|
}, 1000);
|
});
|
|
if (this.timeout) {
|
clearInterval(this.timeout);
|
}
|
},
|
changeValue() {
|
console.log(this.dataList);
|
this.keywords = "";
|
},
|
onItemClick(item) {
|
setStorage("symbol", item.symbol);
|
this.$router.push({
|
path: `/perpetualContract/${item.symbol}`,
|
});
|
},
|
},
|
};
|
</script>
|
<style lang="scss" scoped>
|
.cancel {
|
width: 150px;
|
text-align: center;
|
color: #868d9a;
|
font-size: 28px;
|
}
|
|
.inputBoxbg {
|
@include themify() {
|
background: themed("tab_background");
|
}
|
}
|
|
.search-input {
|
@include themify() {
|
color: themed("text_color");
|
}
|
}
|
|
.list-item {
|
align-items: center;
|
margin-bottom: 40px;
|
|
.item-left {
|
font-size: 36px;
|
font-weight: bold;
|
|
span {
|
color: #868d9a;
|
font-weight: initial;
|
font-size: 28px;
|
}
|
}
|
|
.item-right {
|
text-align: right;
|
font-size: 30px;
|
font-weight: bold;
|
|
.increase {
|
font-size: 26px;
|
font-weight: initial;
|
}
|
}
|
|
.green {
|
color: #5eba89;
|
}
|
|
.red {
|
color: #f6465d;
|
}
|
}
|
|
.function-item {
|
align-items: center;
|
margin-bottom: 60px;
|
|
.item-left {
|
font-size: 30px;
|
font-weight: bold;
|
}
|
|
.item-right {
|
color: #b8bdc5;
|
font-size: 30px;
|
}
|
|
.imgBox {
|
img {
|
width: 42px;
|
height: 42px;
|
}
|
}
|
}
|
|
.star-icon {
|
color: #c8cad2;
|
}
|
|
.star-icon-check {
|
color: #fcd436;
|
}
|
|
.symbol-name {
|
@include themify() {
|
color: themed("text_color");
|
}
|
}
|
|
.accountChange {
|
::v-deep .van-tabs__nav {
|
background: transparent;
|
}
|
|
::v-deep .van-tab {
|
@include themify() {
|
color: themed("text_color");
|
}
|
}
|
}
|
|
.loading-box {
|
position: fixed;
|
top: 0;
|
left: 0;
|
z-index: 10;
|
width: 100%;
|
height: 100%;
|
display: flex;
|
align-items: center;
|
justify-content: center;
|
background: rgba(0, 0, 0, 0.4);
|
}
|
</style>
|
