BTC排一.ETH排二，USDT排三其他随便

dcc

2024-06-29 358dd78ee40aea1e43fd7987c6e604960c2d0672

 src/page/quotes.vue

@@ -1,272 +1,420 @@
<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">
    <div class="header-box">
      <div class="tabs-box">
        <div
          v-for="item in tabList"
          :key="item.id"
          :class="`${active === item.id ? 'active-tabls' : ''}`"
          @click="active = item.id"
        >
          {{ item.text }}
        </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>
      <div class="px-32 py-13 flex items-center">
        <div class="inputBoxbg h-60 w-full rounded-full flex items-center">
          <input
            style="padding-left: 10px; max-width: 130px"
            type="text"
            v-model="keywords"
            :placeholder="$t('搜索币种')"
            class="h-full flex-1 search-input border-none bg-none"
            @input="onInput"
          />
          <img
            src="@/assets/3x/资源 22@3x.png"
            alt="logo"
            class="w-32 h-32 mx-16"
          />
        </div>
      </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>
          </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,
  name: "PageQoutes",
  components: {
    ListQuatation,
    [Tab.name]: Tab,
    [Tabs.name]: Tabs,
  },

            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;
        })
  async created() {
    this.keywords = this.$route.query.inputdata;
    // console.log(this.inputdata, "this.inputdata");
    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",
      newcoinArr: "home/newcoinArr",
    }),
  },
  data() {
    const arr = [];
    for (let i = 0; i < 10; i++) {
      arr.push({ id: i });
    }
    return {
      inputdata: "",
      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,
    };
  },
  mounted() {
    this.NEW_CION_LIST();
    this.GET_UERS_KYC();
  },
  methods: {
    ...mapActions("home", [SET_COIN_LIST, "NEW_CION_LIST"]),
    ...mapActions("user", ["GET_UERS_KYC"]),

    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 mainArray = coins.filter((item) => !this.newcoinArr.includes(item));
      const data = await _getHomeList(mainArray.join(","));
      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;
      }
      //排序
      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.keywords, this.tabList);
      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");
  }
}

.quotes {
    box-sizing: border-box;
    width: 100%;
  padding-top: 50px;
  position: relative;
  box-sizing: border-box;
  width: 100%;

    @include themify() {
        background: themed("main_background");
    }
  @include themify() {
    background: themed("main_background");
  }

  .sousuo {
    position: fixed;
    right: 0;
    top: 0;
    z-index: 9999;
  }
}

.quotes ::v-deep .van-tabs__nav {
    @include themify() {
        background: themed("main_background");
    }
  @include themify() {
    background: themed("main_background");
  }
}
.quotes ::v-deep .van-sticky {
  display: none;
}

.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;
  }
}

.header-box {
  position: fixed;
  top: 0;
  left: 0;
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  z-index: 999;
  background-color: #fff;
  .tabs-box {
    display: flex;
    color: #9691fa;
    font-weight: 400;
    flex: 1;
    justify-content: space-between;
    padding-left: 70px;
    padding-right: 20px;

    .active-tabls {
      color: #807cf7;
      font-weight: 900;
    }
  }
}
</style>