From fcb00a66b4053550b473a29d7299c7a4737eea75 Mon Sep 17 00:00:00 2001
From: lxf <1371462558@qq.com>
Date: Wed, 16 Jul 2025 14:41:04 +0800
Subject: [PATCH] 翻译
---
src/page/quotes.vue | 600 +++++++++++++++++++++++++++++++++++------------------------
1 files changed, 359 insertions(+), 241 deletions(-)
diff --git a/src/page/quotes.vue b/src/page/quotes.vue
index 85cc563..a3489de 100644
--- a/src/page/quotes.vue
+++ b/src/page/quotes.vue
@@ -1,272 +1,390 @@
<template>
- <div class="quotes pb-108">
- <div class="px-32 py-13 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 search-input border-none bg-none" @input="onInput" />
- </div>
+ <div class="quotes pb-108">
+ <van-tabs
+ v-model="active"
+ swipeable
+ :animated="isAnimated"
+ sticky
+ shrink
+ :beforeChange="beforeChange"
+ >
+ <van-tab
+ :title="item.text"
+ v-for="item in tabList"
+ :key="item.id"
+ :name="item.id"
+ class="broder-r-grey px-32 tablist-rap"
+ >
+ <div class="flex items-center inp-wrp">
+ <!-- <img src="@/assets/image/icon-left_arrow.png" alt="logo" class="w-20 h-33 border-1 mr-32" @click="back"/> -->
+ <div class="inputBoxbg 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 search-input border-none bg-none"
+ @input="onInput"
+ />
+ </div>
</div>
- <van-tabs v-model="active" swipeable :animated="isAnimated" sticky shrink :beforeChange="beforeChange">
- <van-tab :title="item.text" v-for="item in tabList" :key="item.id" :name="item.id" class="broder-r-grey px-32 ">
- <list-quatation class="quotesQuatation" @listSort="listSort" :showMore="false" :list-data="item.data"
- :tabActive="active">
- <div class="flex border-t-grey items-center bg-white px-32 h-100 w-full font-24" v-if="active === 1">
- <p class="w-160 h-44 rounded bg-grey text-center mr-20 flex justify-center items-center"
- style="background: #EAECEF; padding: 0 5px">
- {{ $t('现货/合约') }}</p>
- <!-- <p class="w-80 h-44 rounded text-center text-grey flex justify-center items-center">合约</p> -->
- </div>
- </list-quatation>
- <div v-if="!item.data.length" 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>
- </van-tab>
- </van-tabs>
- <Footer></Footer>
- </div>
+ <list-quatation
+ class="quotesQuatation"
+ @listSort="listSort"
+ :showMore="false"
+ :list-data="item.data"
+ :tabActive="active"
+ >
+ <div
+ class="flex border-t-grey items-center bg-white px-32 h-100 w-full font-24"
+ v-if="active === 1"
+ >
+ <p
+ class="w-160 h-44 rounded bg-grey text-center mr-20 flex justify-center items-center"
+ style="background: #eaecef; padding: 0 5px"
+ >
+ {{ $t("现货/合约") }}
+ </p>
+ <!-- <p class="w-80 h-44 rounded text-center text-grey flex justify-center items-center">合约</p> -->
+ </div>
+ </list-quatation>
+ <div
+ v-if="!item.data.length"
+ 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>
+ </van-tab>
+ </van-tabs>
+ <Footer></Footer>
+ </div>
</template>
<script>
-import { Tab, Tabs } from 'vant'
+import { Tab, Tabs } from "vant";
import ListQuatation from "@/components/list-quotation";
-import { _myCoins, _getHomeList } from '@/API/home.api'
+import { _myCoins, _getHomeList } from "@/API/home.api";
import { mapGetters, mapActions } from "vuex";
-import { SET_COIN_LIST } from '@/store/const.store'
+import { SET_COIN_LIST } from "@/store/const.store";
export default {
- name: 'PageQoutes',
- components: {
- ListQuatation,
- [Tab.name]: Tab,
- [Tabs.name]: Tabs
- },
- async created() {
- this.active = this.$route.query.active / 1
- if (this.userInfo.token) {
- const list = await _myCoins() // 获取我的自选
- this.myList = list.map(item => item.symbol) // 获取
- }
- await this.fetchQoutes()
- },
- computed: {
- ...mapGetters({ coinList: 'home/coinList', userInfo: 'user/userInfo' }),
- },
- data() {
- const arr = []
- for (let i = 0; i < 10; i++) {
- arr.push({ id: i })
- }
- return {
- tabList: [
- { id: 1, text: this.$t('自选'), data: arr, loading: true },
- { id: 2, text: this.$t('现货'), data: arr, loading: true },
- { id: 3, text: this.$t('合约'), data: arr, loading: true }
- ],
- keywords: '', // 搜索关键字
- filterData: [],
- myList: [],
- active: 1,
-
- timeout: null,
- inputTimeout: null,
- duration: 1000,
- isAnimated: false,
- sortVal: 0
- }
- },
- methods: {
- ...mapActions('home', [SET_COIN_LIST]),
- listSort(val) {
- this.sortVal = val
- },
- async fetchQoutes() { // 现货/合约
- if (!this.coinList.length) {
- await this.SET_COIN_LIST()
- }
- const coins = this.coinList.map(item => item.symbol)
- const data = await _getHomeList(coins.join(','))
- console.log(data)
- this.tabList[0]['data'] = data.filter(item => this.myList.includes(item.symbol))
- this.tabList[1]['data'] = data
- this.tabList[2]['data'] = data
- if (this.keywords) { // 过滤数据
- this.getFilterData()
- }
- if (this.timeout) {
- clearTimeout(this.timeout)
- this.timeout = null
- }
- console.log(this.tabList[1])
- //排序
- if (this.sortVal == 1) {
-
- this.tabList[0]['data'] = this.tabList[0]['data'].sort(this.sortLetterList("symbol"))
- this.tabList[1]['data'] = this.tabList[1]['data'].sort(this.sortLetterList("symbol"))
- this.tabList[2]['data'] = this.tabList[2]['data'].sort(this.sortLetterList("symbol"))
- }
- if (this.sortVal == 2) {
- this.tabList[0]['data'] = this.tabList[0]['data'].sort(this.sortLetterTwoList("symbol"))
- this.tabList[1]['data'] = this.tabList[1]['data'].sort(this.sortLetterTwoList("symbol"))
- this.tabList[2]['data'] = this.tabList[2]['data'].sort(this.sortLetterTwoList("symbol"))
- }
- if (this.sortVal == 3) {
- this.tabList[0]['data'] = this.tabList[0]['data'].sort(this.orderListAsc("close", "ask"))
- this.tabList[1]['data'] = this.tabList[1]['data'].sort(this.orderListAsc("close", "ask"))
- this.tabList[2]['data'] = this.tabList[2]['data'].sort(this.orderListAsc("close", "ask"))
- }
- if (this.sortVal == 4) {
- this.tabList[0]['data'] = this.tabList[0]['data'].sort(this.orderListAsc("close"))
- this.tabList[1]['data'] = this.tabList[1]['data'].sort(this.orderListAsc("close"))
- this.tabList[2]['data'] = this.tabList[2]['data'].sort(this.orderListAsc("close"))
- }
- if (this.sortVal == 5) {
- this.tabList[0]['data'] = this.tabList[0]['data'].sort(this.orderListAsc("change_ratio"))
- this.tabList[1]['data'] = this.tabList[1]['data'].sort(this.orderListAsc("change_ratio"))
- this.tabList[2]['data'] = this.tabList[2]['data'].sort(this.orderListAsc("change_ratio"))
- }
- if (this.sortVal == 6) {
- this.tabList[0]['data'] = this.tabList[0]['data'].sort(this.orderListAsc("change_ratio", "ask"))
- this.tabList[1]['data'] = this.tabList[1]['data'].sort(this.orderListAsc("change_ratio", "ask"))
- this.tabList[2]['data'] = this.tabList[2]['data'].sort(this.orderListAsc("change_ratio", "ask"))
- }
- this.timeout = setTimeout(() => {
- this.fetchQoutes()
- }, this.duration)
- },
- //字母排序
- sortLetterList(propertyName) {
- return function sortList(object1, object2) {
- const value1 = object1[propertyName];
- const value2 = object2[propertyName];
- if (value2 < value1) {
- return 1;
- }
- if (value2 > value1) {
- return -1;
- }
- return 0;
- };
- },
- sortLetterTwoList(propertyName) {
- return function sortList(object1, object2) {
- const value1 = object1[propertyName];
- const value2 = object2[propertyName];
- if (value2 > value1) {
- return 1;
- }
- if (value2 < value1) {
- return -1;
- }
- return 0;
- };
- },
- //数字排序
- orderListAsc(filed, type = "asc") {
- return (a, b) => {
- if (type == "asc") return parseFloat(a[filed]) > parseFloat(b[filed]) ? 1 : -1;
- return parseFloat(a[filed]) > parseFloat(b[filed]) ? -1 : 1;
- };
- },
- getFilterData() { // 过滤后的数据
- const index = this.active / 1 - 1
- console.log(index)
- this.tabList[index]['data'] = this.tabList[index]['data'].filter(item => item.symbol.includes(this.keywords.toLocaleLowerCase()))
- },
- back() {
- this.$router.go(-1)
- },
- onInput() { // 输入
- if (this.inputTimeout) {
- clearTimeout(this.inputTimeout)
- this.inputTimeout = null
- }
- this.inputTimeout = setTimeout(() => {
- this.getFilterData()
- }, 50)
- },
- beforeChange() {
- this.keywords = ''
- return true
- },
- startTimeout() {
- this.clearTimeout()
- this.fetchQoutes()
- },
- clearTimeout() {
- if (this.timeout) {
- clearTimeout(this.timeout)
- this.timeout = null
- }
- }
- },
- async activated() {
- console.log('sss')
- this.startTimeout()
- if (this.userInfo.token) {
- const list = await _myCoins() // 获取我的自选
- this.myList = list.map(item => item.symbol) // 获取
- }
- this.tabList[0].text = this.$t('自选')
- this.tabList[1].text = this.$t('现货')
- this.tabList[2].text = this.$t('合约')
- },
- deactivated() {
- this.clearTimeout()
- },
- beforeDestroy() {
- this.clearTimeout()
- if (this.inputTimeout) {
- clearTimeout(this.inputTimeout)
- this.inputTimeout = null
- }
- },
- beforeRouteEnter(to, from, next) {
- next(vm => {
- vm.isAnimated = true;
- })
+ name: "PageQoutes",
+ components: {
+ ListQuatation,
+ [Tab.name]: Tab,
+ [Tabs.name]: Tabs,
+ },
+ async created() {
+ this.active = this.$route.query.active / 1;
+ if (this.userInfo.token) {
+ const list = await _myCoins(); // 获取我的自选
+ this.myList = list.map((item) => item.symbol); // 获取
}
-}
+ await this.fetchQoutes();
+ },
+ computed: {
+ ...mapGetters({ coinList: "home/coinList", userInfo: "user/userInfo" }),
+ },
+ data() {
+ const arr = [];
+ for (let i = 0; i < 10; i++) {
+ arr.push({ id: i });
+ }
+ return {
+ tabList: [
+ { id: 1, text: this.$t("自选"), data: arr, loading: true },
+ { id: 2, text: "USDT", data: arr, loading: true },
+ // { id: 3, text: this.$t('合约'), data: arr, loading: true }
+ ],
+ keywords: "", // 搜索关键字
+ filterData: [],
+ myList: [],
+ active: 1,
+ timeout: null,
+ inputTimeout: null,
+ duration: 1000,
+ isAnimated: false,
+ sortVal: 0,
+ };
+ },
+ methods: {
+ ...mapActions("home", [SET_COIN_LIST]),
+ listSort(val) {
+ this.sortVal = val;
+ },
+ async fetchQoutes() {
+ // 现货/合约
+ if (!this.coinList.length) {
+ await this.SET_COIN_LIST();
+ }
+ const coins = this.coinList.map((item) => item.symbol);
+ const data = await _getHomeList(coins.join(","));
+ console.log(data);
+ this.tabList[0]["data"] = data.filter((item) =>
+ this.myList.includes(item.symbol)
+ );
+ this.tabList[1]["data"] = data;
+ this.tabList[2]["data"] = data;
+ if (this.keywords) {
+ // 过滤数据
+ this.getFilterData();
+ }
+ if (this.timeout) {
+ clearTimeout(this.timeout);
+ this.timeout = null;
+ }
+ console.log(this.tabList[1]);
+ //排序
+ if (this.sortVal == 1) {
+ this.tabList[0]["data"] = this.tabList[0]["data"].sort(
+ this.sortLetterList("symbol")
+ );
+ this.tabList[1]["data"] = this.tabList[1]["data"].sort(
+ this.sortLetterList("symbol")
+ );
+ this.tabList[2]["data"] = this.tabList[2]["data"].sort(
+ this.sortLetterList("symbol")
+ );
+ }
+ if (this.sortVal == 2) {
+ this.tabList[0]["data"] = this.tabList[0]["data"].sort(
+ this.sortLetterTwoList("symbol")
+ );
+ this.tabList[1]["data"] = this.tabList[1]["data"].sort(
+ this.sortLetterTwoList("symbol")
+ );
+ this.tabList[2]["data"] = this.tabList[2]["data"].sort(
+ this.sortLetterTwoList("symbol")
+ );
+ }
+ if (this.sortVal == 3) {
+ this.tabList[0]["data"] = this.tabList[0]["data"].sort(
+ this.orderListAsc("close", "ask")
+ );
+ this.tabList[1]["data"] = this.tabList[1]["data"].sort(
+ this.orderListAsc("close", "ask")
+ );
+ this.tabList[2]["data"] = this.tabList[2]["data"].sort(
+ this.orderListAsc("close", "ask")
+ );
+ }
+ if (this.sortVal == 4) {
+ this.tabList[0]["data"] = this.tabList[0]["data"].sort(
+ this.orderListAsc("close")
+ );
+ this.tabList[1]["data"] = this.tabList[1]["data"].sort(
+ this.orderListAsc("close")
+ );
+ this.tabList[2]["data"] = this.tabList[2]["data"].sort(
+ this.orderListAsc("close")
+ );
+ }
+ if (this.sortVal == 5) {
+ this.tabList[0]["data"] = this.tabList[0]["data"].sort(
+ this.orderListAsc("change_ratio")
+ );
+ this.tabList[1]["data"] = this.tabList[1]["data"].sort(
+ this.orderListAsc("change_ratio")
+ );
+ this.tabList[2]["data"] = this.tabList[2]["data"].sort(
+ this.orderListAsc("change_ratio")
+ );
+ }
+ if (this.sortVal == 6) {
+ this.tabList[0]["data"] = this.tabList[0]["data"].sort(
+ this.orderListAsc("change_ratio", "ask")
+ );
+ this.tabList[1]["data"] = this.tabList[1]["data"].sort(
+ this.orderListAsc("change_ratio", "ask")
+ );
+ this.tabList[2]["data"] = this.tabList[2]["data"].sort(
+ this.orderListAsc("change_ratio", "ask")
+ );
+ }
+ this.timeout = setTimeout(() => {
+ this.fetchQoutes();
+ }, this.duration);
+ },
+ //字母排序
+ sortLetterList(propertyName) {
+ return function sortList(object1, object2) {
+ const value1 = object1[propertyName];
+ const value2 = object2[propertyName];
+ if (value2 < value1) {
+ return 1;
+ }
+ if (value2 > value1) {
+ return -1;
+ }
+ return 0;
+ };
+ },
+ sortLetterTwoList(propertyName) {
+ return function sortList(object1, object2) {
+ const value1 = object1[propertyName];
+ const value2 = object2[propertyName];
+ if (value2 > value1) {
+ return 1;
+ }
+ if (value2 < value1) {
+ return -1;
+ }
+ return 0;
+ };
+ },
+ //数字排序
+ orderListAsc(filed, type = "asc") {
+ return (a, b) => {
+ if (type == "asc")
+ return parseFloat(a[filed]) > parseFloat(b[filed]) ? 1 : -1;
+ return parseFloat(a[filed]) > parseFloat(b[filed]) ? -1 : 1;
+ };
+ },
+ getFilterData() {
+ // 过滤后的数据
+ const index = this.active / 1 - 1;
+ console.log(index);
+ this.tabList[index]["data"] = this.tabList[index]["data"].filter((item) =>
+ item.symbol.includes(this.keywords.toLocaleLowerCase())
+ );
+ },
+ back() {
+ this.$router.go(-1);
+ },
+ onInput() {
+ // 输入
+ if (this.inputTimeout) {
+ clearTimeout(this.inputTimeout);
+ this.inputTimeout = null;
+ }
+ this.inputTimeout = setTimeout(() => {
+ this.getFilterData();
+ }, 50);
+ },
+ beforeChange() {
+ this.keywords = "";
+ return true;
+ },
+ startTimeout() {
+ this.clearTimeout();
+ this.fetchQoutes();
+ },
+ clearTimeout() {
+ if (this.timeout) {
+ clearTimeout(this.timeout);
+ this.timeout = null;
+ }
+ },
+ },
+ async activated() {
+ console.log("sss");
+ this.startTimeout();
+ if (this.userInfo.token) {
+ const list = await _myCoins(); // 获取我的自选
+ this.myList = list.map((item) => item.symbol); // 获取
+ }
+ this.tabList[0].text = this.$t("自选");
+ this.tabList[1].text = this.$t("现货");
+ // this.tabList[2].text = this.$t("合约");
+ },
+ deactivated() {
+ this.clearTimeout();
+ },
+ beforeDestroy() {
+ this.clearTimeout();
+ if (this.inputTimeout) {
+ clearTimeout(this.inputTimeout);
+ this.inputTimeout = null;
+ }
+ },
+ beforeRouteEnter(to, from, next) {
+ next((vm) => {
+ vm.isAnimated = true;
+ });
+ },
+};
</script>
<style lang="scss" scoped>
.search-input {
- @include themify() {
- color: themed("text_color");
- }
+ @include themify() {
+ color: themed("text_color");
+ }
}
+.inp-wrp {
+ height: 6.75rem;
+ margin: 2rem 0;
+ .items-center {
+ padding: 0 1rem;
+ }
+ .rounded-full {
+ height: 6.75rem;
+ border-radius: 1rem;
+ }
+}
.quotes {
- box-sizing: border-box;
- width: 100%;
-
- @include themify() {
- background: themed("main_background");
+ padding: 24px 0 24px 0;
+ :deep(.van-tab) {
+ width: 10rem;
+ flex: none;
+ }
+ :deep(.van-tab--active) {
+ min-width: 150px;
+ text-align: center;
+ padding: 18px 0px;
+ border-radius: 4px;
+ position: relative;
+ // color: #f7b328 !important;
+ font-size: 38px !important;
+ font-weight: 700;
+ .van-tab__text {
+ font-size: 38px !important;
}
+ }
+ :deep(.van-tabs__line) {
+ background-color: #f7b328 !important;
+ width: 5.5rem !important;
+ }
+}
+.quotes {
+ box-sizing: border-box;
+ width: 100%;
+
+ @include themify() {
+ background: themed("main_background");
+ }
}
.quotes ::v-deep .van-tabs__nav {
- @include themify() {
- background: themed("main_background");
- }
+ @include themify() {
+ background: themed("main_background");
+ }
}
.quotes ::v-deep .van-tab--active {
- @include themify() {
- color: themed("text_color");
- }
+ @include themify() {
+ color: themed("text_color");
+ }
}
.inputBoxbg {
- @include themify() {
- background: themed("tab_background");
- }
+ @include themify() {
+ background: themed("tab_background");
+ }
}
.quotesQuatation .van-cell {
- @include themify() {
- background: themed("main_background") !important;
- }
+ @include themify() {
+ background: themed("main_background") !important;
+ }
}
</style>
--
Gitblit v1.9.3