From 35f3f260f3d3c51ac2256899ade3b9a144b46b28 Mon Sep 17 00:00:00 2001
From: zzzz <690498789@qq.com>
Date: Fri, 19 Apr 2024 05:58:04 +0800
Subject: [PATCH] first
---
src/page/search/index.vue | 683 ++++++++++++++++++++++++++++++--------------------------
1 files changed, 365 insertions(+), 318 deletions(-)
diff --git a/src/page/search/index.vue b/src/page/search/index.vue
index 8fc3111..784fb92 100644
--- a/src/page/search/index.vue
+++ b/src/page/search/index.vue
@@ -1,373 +1,420 @@
<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 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 { mapGetters } from "vuex";
+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.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'
- }),
- },
- filters: {
-
- },
- beforeDestroy() {
- clearInterval(this.timeout)
- },
- methods: {
- 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() { // 获取行情
- _getHomeList(this.coinArr.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}`
- });
-
- }
+ 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;
+ width: 150px;
+ text-align: center;
+ color: #868d9a;
+ font-size: 28px;
}
.inputBoxbg {
- @include themify() {
- background: themed("tab_background");
- }
-
+ @include themify() {
+ background: themed("tab_background");
+ }
}
.search-input {
- @include themify() {
- color: themed("text_color");
- }
+ @include themify() {
+ color: themed("text_color");
+ }
}
.list-item {
- align-items: center;
- margin-bottom: 40px;
+ align-items: center;
+ margin-bottom: 40px;
- .item-left {
- font-size: 36px;
- font-weight: bold;
+ .item-left {
+ font-size: 36px;
+ font-weight: bold;
- span {
- color: #868D9A;
- font-weight: initial;
- font-size: 28px;
- }
+ span {
+ color: #868d9a;
+ font-weight: initial;
+ font-size: 28px;
}
+ }
- .item-right {
- text-align: right;
- font-size: 30px;
- font-weight: bold;
+ .item-right {
+ text-align: right;
+ font-size: 30px;
+ font-weight: bold;
- .increase {
- font-size: 26px;
- font-weight: initial;
- }
+ .increase {
+ font-size: 26px;
+ font-weight: initial;
}
+ }
- .green {
- color: #5EBA89;
- }
+ .green {
+ color: #5eba89;
+ }
- .red {
- color: #F6465D;
- }
-
+ .red {
+ color: #f6465d;
+ }
}
.function-item {
- align-items: center;
- margin-bottom: 60px;
+ align-items: center;
+ margin-bottom: 60px;
- .item-left {
- font-size: 30px;
- font-weight: bold;
- }
+ .item-left {
+ font-size: 30px;
+ font-weight: bold;
+ }
- .item-right {
- color: #B8BDC5;
- font-size: 30px;
- }
+ .item-right {
+ color: #b8bdc5;
+ font-size: 30px;
+ }
- .imgBox {
- img {
- width: 42px;
- height: 42px;
- }
+ .imgBox {
+ img {
+ width: 42px;
+ height: 42px;
}
+ }
}
.star-icon {
- color: #c8cad2;
+ color: #c8cad2;
}
.star-icon-check {
- color: #FCD436;
+ color: #fcd436;
}
.symbol-name {
- @include themify() {
- color: themed("text_color");
- }
+ @include themify() {
+ color: themed("text_color");
+ }
}
.accountChange {
- ::v-deep .van-tabs__nav {
- background: transparent;
- }
+ ::v-deep .van-tabs__nav {
+ background: transparent;
+ }
- ::v-deep .van-tab {
- @include themify() {
- color: themed("text_color");
- }
+ ::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);
+ 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>
--
Gitblit v1.9.3