货币交易翻译

lxf

2025-07-15 f3c40298d1ef0e3424483d99854c9bef3f92573a

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

@@ -6,16 +6,18 @@
        <div class="flex justify-start pt-45 before">
          <div class="flex items-center ">
            <img src="@/assets/image/icon_back.png" class="w-35 h-35 back" alt="" @click="jump()">
            <img src="@/assets/theme/dark/image/black-convert.png" alt="convert-img" class="w-35 h-35" @click="onSidebar">
            <img src="@/assets/theme/dark/image/black-convert.png" alt="convert-img" class="w-35 h-35"
              @click="onSidebar">
            <div class="flex pl-21 textColor" @click="onSidebar">
              <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 || '--' }}%</div>
              <!-- 右上角小图标 -->
            <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()">
         <img src="../../../assets/image/public/record.png" alt="record-img" class="w-64 h-35 pr-30 record-img"
           @click="goHistory" />
            <img src="../../../assets/image/public/record.png" alt="record-img" class="w-64 h-35 pr-30 record-img"
              @click="goHistory" />
          </div>
          <!-- <div class="flex items-center">
                        <img src="../../assets/image/public/k-line.png" alt="line-img" class="w-38 h-35"
@@ -23,13 +25,13 @@
                    </div> -->
        </div>
        <!-- v-if="!selectIndex==2" -->
        <div class="flex justify-between  pt-34" >
        <div class="flex justify-between  pt-34">
          <!-- <button class="tabBtn w-368 h-74 lh-74 border-none  rounded"
            :class="selectIndex == 1 ? 'select-active' : 'no-select'" @click="changeTab(1)">
            {{ $t('永续合约') }}</button> -->
          <!-- <button class="tabBtn w-368 h-74 lh-74 border-none  rounded"
            :class="selectIndex == 2 ? 'select-one-active' : 'no-select'" @click="changeTab(2)">
            {{ queryType == 'cryptos' ? $t('交割合约') : $t('期货交易') }}</button> -->
            {{ queryType == 'cryptos' ? $t('交割合约') : $t('货币交易') }}</button> -->
        </div>
      </div>
    </div>
@@ -38,7 +40,7 @@
      <div class="pl-42 border-b-color pt-48 pb-48">
        <div class="textColor">
          <span class="font-bold font-45 mr-12">{{ title }} {{ $t('合约') }}</span>
          <span class="font-30">/{{ 'USD'}} </span>
          <span class="font-30">/{{ 'USD' }} </span>
        </div>
      </div>
      <div class="pl-42 pr-40 font-28">
@@ -62,8 +64,9 @@
          </div>
          <div class="text-right">
            <div class="textColor font-28">{{ item.close }}</div>
            <div class="mt-10 font-28" :class="item.change_ratio_str > 0 ? 'text-green' : 'text-red'">{{ item.change_ratio_str
            }}%</div>
            <div class="mt-10 font-28" :class="item.change_ratio_str > 0 ? 'text-green' : 'text-red'">{{
              item.change_ratio_str
              }}%</div>
          </div>
        </div>
      </div>
@@ -78,7 +81,7 @@
import { useQuotesStore } from '@/store/quotes.store';
import { THEME } from '@/config/theme'
import { setStorage, getStorage } from '@/utils/utis'
import { _getCoinList } from '@/service/quotes.api'; 
import { _getCoinList } from '@/service/quotes.api';
export default {
  name: "contractHeader",
  props: {
@@ -146,21 +149,21 @@
    }
  },
  methods: {
     goHistory() {
       if (this.$store.state.user.userInfo.token) {
         let type = 'cryptos'
         if (this.$route.query.type) {
           type = this.$route.query.type
         }
         const url = this.topIndex / 1 === 1 ? '/cryptos/perpetualHistory' : '/cryptos/deliveryContractHistory'
         this.$router.push({
           path: url, query: { symbol: this.symbol, type: type }
         });
       } else {
         this.$router.push('/login')
       }
	  
     },
    goHistory() {
      if (this.$store.state.user.userInfo.token) {
        let type = 'cryptos'
        if (this.$route.query.type) {
          type = this.$route.query.type
        }
        const url = this.topIndex / 1 === 1 ? '/cryptos/perpetualHistory' : '/cryptos/deliveryContractHistory'
        this.$router.push({
          path: url, query: { symbol: this.symbol, type: type }
        });
      } else {
        this.$router.push('/login')
      }

    },
    onRoute(item) {
      if (this.$route.params.symbol !== item.symbol) {
        this.$router.push(`/cryptos/perpetualContract/${item.symbol}?selectIndex=${this.selectIndex}`)
@@ -174,10 +177,10 @@
    async onSidebar() { // 侧边栏打开
      // console.log('侧边栏打开: ', this.selectIndex)
      // if (this.selectIndex == 2) {
       // 优先用本地缓存的 coins
       let arr = getStorage('qoutes')
     let coninArr = ''
     console.log('arr:', arr)
      // 优先用本地缓存的 coins
      let arr = getStorage('qoutes')
      let coninArr = ''
      console.log('arr:', arr)

      if (arr && arr.length) {
        // 如果本地有 coins，优先用本地
@@ -188,15 +191,15 @@
        // 如果本地没有 coins，拉取接口
        const quotesData = await _getCoinList()
        console.log('quotesData:', quotesData)
          quotesData.forEach(item => {
            coninArr += item.symbol + ','
          })
          setStorage('qoutes', { coins: 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)
      // 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);
      // }