登录界面

lxf

2025-07-10 bba4046da481abccecf541e76f17a2e32a4cc344

 src/components/Transform/contract-header/index.vue

@@ -11,9 +11,9 @@
              <div class="font-35">{{ symbolName.toUpperCase() || '--' }}</div>
              <div class="ml-15 font-28">{{ title }}</div>
            </div>
            <div class="pl-10 w-160  font-28" :class="{ 'text-green': range > 0, 'text-red': range <= 0 }">{{ range > 0 ?
              '+' : '' }}{{ range || '--' }}%</div>
            <!-- <img src="@/assets/image/kline.png" class="w-44 h-44 right" alt="" @click="klineJump()"> -->
            <div class="pl-10 w-160  font-28" :class="{ 'text-green': range > 0, 'text-red': range <= 0 }">{{ range || '--' }}%</div>
              <!-- 右上角小图标 -->
            <img src="@/assets/image/kline.png" class="w-44 h-44 right" alt="" @click="klineJump()">
          </div>
          <!-- <div class="flex items-center">
                        <img src="../../assets/image/public/k-line.png" alt="line-img" class="w-38 h-35"
@@ -60,7 +60,7 @@
          </div>
          <div class="text-right">
            <div class="textColor font-28">{{ item.close }}</div>
            <div class="mt-10 font-28" :class="item.change_ratio > 0 ? 'text-green' : 'text-red'">{{ item.change_ratio
            <div class="mt-10 font-28" :class="item.change_ratio_str > 0 ? 'text-green' : 'text-red'">{{ item.change_ratio_str
            }}%</div>
          </div>
        </div>
@@ -75,7 +75,8 @@
import { _getHomeList } from "@/service/home.api";
import { useQuotesStore } from '@/store/quotes.store';
import { THEME } from '@/config/theme'
import { setStorage } from '@/utils/utis'
import { setStorage, getStorage } from '@/utils/utis'
import { _getCoinList } from '@/service/quotes.api'; 
export default {
  name: "contractHeader",
  props: {
@@ -145,7 +146,7 @@
  methods: {
    onRoute(item) {
      if (this.$route.params.symbol !== item.symbol) {
        // this.$router.push(`/cryptos/perpetualContract/${item.symbol}?selectIndex=${this.selectIndex}`)
        this.$router.push(`/cryptos/perpetualContract/${item.symbol}?selectIndex=${this.selectIndex}`)
        // debugger
        this.$emit('update-coin', item.symbol)
        setStorage('symbol', item.symbol)
@@ -153,15 +154,35 @@
      }
      this.show = false
    },
    onSidebar() { // 侧边栏打开
    async onSidebar() { // 侧边栏打开
      // console.log('侧边栏打开: ', this.selectIndex)
      if (this.selectIndex == 2) {
        const quotesData = JSON.parse(localStorage.getItem('qoutes'));
        this.coins = quotesData.coins || [];
        this.coins = quotesData.coins.map(item => item.symbol)
      // if (this.selectIndex == 2) {
       // 优先用本地缓存的 coins
       let arr = getStorage('qoutes')
     let coninArr = ''
     console.log('arr:', arr)

      if (arr && arr.length) {
        // 如果本地有 coins，优先用本地
        arr.forEach(item => {
          coninArr += item.symbol + ','
        })
      } else {
        this.coins = this.coinList.map(item => item.symbol);
        // 如果本地没有 coins，拉取接口
        const quotesData = await _getCoinList()
        console.log('quotesData:', quotesData)
          quotesData.forEach(item => {
            coninArr += item.symbol + ','
          })
          setStorage('qoutes', { coins: quotesData }) // 存到本地
      }
      this.coins = coninArr
        // const quotesData = JSON.parse(localStorage.getItem('qoutes'));
        // this.coins = quotesData.coins || [];
        // this.coins = quotesData.coins.map(item => item.symbol)
      // } else {
      //   this.coins = this.coinList.map(item => item.symbol);
      // }

      // quotesStore.coins

@@ -170,7 +191,7 @@
      this.fetchList()
    },
    fetchList() { // 获取行情
      _getHomeList(this.coins.join(',')).then(list => {
      _getHomeList(this.coins).then(list => {
        // console.log(list)
        this.list = list
        if (this.timeout) {