style

lxf

2025-07-08 2eef7e881d02d05bd0e1237a8456466f0c9afbce

 src/views/cryptos/PerpetualContract/index.vue

@@ -16,7 +16,7 @@
            <p class="first-line red">{{ formatMoney(chartData?.close) }}</p>
            <p class="second-line">
              <span class="red">{{ chartData?.netChange }}</span>&nbsp;
              <span class="red">{{ `${chartData?.change_ratio}%` }}</span>
              <span class="red">{{ `${chartData?.change_ratio_str}%` }}</span>
            </p>
          </div>
          <div @click="handleClickShowMore()" class="line-r">
@@ -35,7 +35,7 @@
            <p class="first-line red">{{ formatMoney(chartData?.close) }}</p>
            <p class="second-line">
              <span class="red">{{ chartData?.netChange }}</span>&nbsp;
              <span class="red">{{ `${chartData?.change_ratio}%` }}</span>
              <span class="red">{{ `${chartData?.change_ratio_str}%` }}</span>
            </p>
          </div>
          <div class="flex-r">
@@ -104,7 +104,7 @@
            <p class="first-line red">{{ formatMoney(chartData?.close) }}</p>
            <p class="second-line">
              <span class="red">{{ chartData?.netChange }}</span>&nbsp;
              <span class="red">{{ `${chartData?.change_ratio}%` }}</span>
              <span class="red">{{ `${chartData?.change_ratio_str}%` }}</span>
            </p>
          </div>
          <div @click="handleClickShowMore()" class="line-r">
@@ -123,7 +123,7 @@
            <p class="first-line red">{{ formatMoney(chartData?.close) }}</p>
            <p class="second-line">
              <span class="red">{{ chartData?.netChange }}</span>&nbsp;
              <span class="red">{{ `${chartData?.change_ratio}%` }}</span>
              <span class="red">{{ `${chartData?.change_ratio_str}%` }}</span>
            </p>
          </div>
          <div class="flex-r">
@@ -172,7 +172,7 @@
          </div>
        </section>
        <div class="mainBackground rounded-view" key="y">
          <PerpetualOpen class="pl-30 pr-30" :key="keyIndex + 'c'" :selectIndex="selectIndex" :symbol="symbol"
          <PerpetualOpen class="pl-30 pr-30" :key="symbol" :selectIndex="selectIndex" :symbol="symbol"
            :green-data="bids" :red-data="asks" :price="price" :init-open="initOpen" :init-close="initClose"
            :init-futrue="initFutrue" @ordered="onOrdered" @changeValueBack="changeValueBack">
          </PerpetualOpen>
@@ -228,7 +228,7 @@
import PerpetualOpen from '@/components/Transform/perpetual-open/index.vue'
import PerpetualOrder from '@/components/Transform/perpetual-order/index.vue'

import { _getDeepData, _initOpen, _initClose, _futrueOrderInit, _contractApplyOrderList, contractOrder, _futrueOrderList } from "@/service/trade.api";
import { _getDeepData, _initOpen, _initClose, _futrueOrderInit, _contractApplyOrderList, contractOrder, _futrueOrderList, _getKline } from "@/service/trade.api";
import { _getBalance } from '@/service/user.api'
import { _getHomeList } from '@/service/home.api'
import { Popup, Swipe, SwipeItem } from 'vant';
@@ -260,6 +260,15 @@
    }),
  },
  watch: {
  //   '$route.params.symbol': {
  //   immediate: true,
  //   handler(newVal) {
  //     if (newVal) {
  //       this.symbol = newVal
  //       this.onUpdate(newVal) // 重新初始化数据
  //     }
  //   }
  // },
    selectIndex(val) {
      showLength = 7
    },
@@ -359,12 +368,16 @@
      // this.balance = money
    })
  },

  methods: {
    ...mapActions('home', [SET_COIN_LIST]),
    onUpdate(symbol) { // 更新
      // debugger
      this.currentType = 'long'
      this.symbol = symbol
      this.closeSocket()
      // this.clearTimer()

      this.symbol = symbol
      this.init(symbol)
    },
    changeCurrentType(type) {
@@ -476,10 +489,11 @@
      })
    },
    handleQoutes(data) {
      // console.log('handleQoutes: ', data);
      if (data && data.length) {
        const cur = data[0]
        this.price = cur.close
        this.range = cur.change_ratio + ''
        this.range = cur.changeRatioStr + ''
        this.quote = cur
        this.updateKey++
      }
@@ -547,18 +561,27 @@
      if (type === 'open' || type === 'long' || type === 'short' || !type) {
        let initFunTimer = null;
        let initFun = () => {
          _initOpen({ symbol: symbol }).then(data => {
            console.log(data, '22222222')
          _getKline(symbol, '1min').then(data => {
            this.initOpen = data
            clearTimeout(initFunTimer)
            initFunTimer = null
          }).catch(err => {
           }).catch(err => {
            initFunTimer = setTimeout(() => {
              initFun()
            }, 3000);
          })
          // _initOpen({ symbol: symbol }).then(data => {
          //   console.log(data, '22222222')
          //   this.initOpen = data
          //   clearTimeout(initFunTimer)
          //   initFunTimer = null
          // }).catch(err => {
          //   initFunTimer = setTimeout(() => {
          //     initFun()
          //   }, 3000);
          // })
        }
        initFun()
        // initFun()
      }
      if (type === 'close' || !type) {
        let initFunTimer = null;
@@ -569,14 +592,14 @@
            clearTimeout(initFunTimer)
            initFunTimer = null
          }).catch(err => {
            initFunTimer = setTimeout(() => {
              initFun()
            }, 3000);
            // initFunTimer = setTimeout(() => {
            //   initFun()
            // }, 3000);
          })
        }
        initFunTimer = setTimeout(() => {
          initFun()
        }, 600);
        // initFunTimer = setTimeout(() => {
        //   initFun()
        // }, 600);
      }
      if (type === 'futrue' || !type) {
        _futrueOrderInit(symbol).then(data => {
@@ -616,7 +639,7 @@
        symbol: symbol,
        type: 'orders',
        page_no: 1,
        symbolType: 'cryptos'
        // symbolType: 'cryptos'
      }
      if (this.userInfo.token) {
        contractOrder(obj).then(data => {
@@ -637,12 +660,12 @@
    },
    fetchFutrueHoldList(symbol) { // 交割持仓
      if (this.userInfo.token) {
        _futrueOrderList(symbol, 'orders', 1, 'cryptos').then(data => {
        _futrueOrderList(symbol, 'orders', 1).then(data => {
          // this.futrueHold = data
          this.futrueHold = data.sort(this.sortData);
        })
        this.timer = setInterval(() => {
          _futrueOrderList(symbol, 'orders', 1, 'cryptos').then(data => {
          _futrueOrderList(symbol, 'orders', 1).then(data => {
            // if (typeof this.timer === 'string') {
            //   this.timer = null
            //   return
@@ -654,23 +677,28 @@
      }
    },
    fetchFutrueHistory(symbol) { // 交割历史持仓
      _futrueOrderList(symbol, 'hisorders', 1, 'cryptos').then(data => {
      _futrueOrderList(symbol, 'hisorders', 1 ).then(data => {
        this.futrueHistroy = data
        // this.clearTimeout()
      })
    },
    init(symbol) { // 初始化页面
      this.symbol = symbol
      this.fetchQoutes(symbol)
      this.fetchDeepData(symbol)
      this.initParam(symbol) // 'open'
      // 在清理一遍
      this.closeSocket()
      this.clearTimer()

      const _symbol = symbol || this.symbol
      console.log('init: ',this.symbol, symbol)
      this.fetchQoutes(_symbol)
      this.fetchDeepData(_symbol)
      this.initParam(_symbol) // 'open'
      // this.clearTimer()
      //if (this.curTab === 'fetchOrderListCur') {
      if (this.curTab === 'fetchOrderListHold') {
        //this.fetchOrderListCur(symbol)
        this.fetchOrderListHold(symbol)
        this.fetchOrderListHold(_symbol)
      } else {
        this.fetchFutrueHoldList(symbol)
        this.fetchFutrueHoldList(_symbol)
      }

    },