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">
@@ -84,11 +84,12 @@
          </div>
        </section>
        <div class="mainBackground rounded-view" key="x">
          <PerpetualOpen class="pl-30 pr-30" :key="keyIndex + 'a'" :selectIndex="selectIndex" :symbol="symbol"
          <!-- 永续合约 -->
          <!-- <PerpetualOpen class="pl-30 pr-30" :key="keyIndex + 'a'" :selectIndex="selectIndex" :symbol="symbol"
            :green-data="bids" :red-data="asks" :price="price" :init-open="initOpen" :init-close="initClose"
            :init-futrue="initFutrue" :currentType="currentType" @changeValueBack="changeValueBack"
            @changeCurrentType="changeCurrentType" @ordered="onOrdered">
          </PerpetualOpen>
          </PerpetualOpen> -->
          <div class="line"></div>
          <!-- 委托/持仓-->
          <PerpetualOrder class="pl-30 pr-30" :key="keyIndex + 'b'" :symbol="symbol" :order-cur="orderCur"
@@ -103,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">
@@ -122,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">
@@ -171,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>
@@ -227,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';
@@ -259,6 +260,15 @@
    }),
  },
  watch: {
  //   '$route.params.symbol': {
  //   immediate: true,
  //   handler(newVal) {
  //     if (newVal) {
  //       this.symbol = newVal
  //       this.onUpdate(newVal) // 重新初始化数据
  //     }
  //   }
  // },
    selectIndex(val) {
      showLength = 7
    },
@@ -358,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) {
@@ -449,15 +463,13 @@
      this.clearTimer()
      // this.clearTimeout()
      this.initParam(this.symbol, evt) // 重新初始化
      // TODO: 这里要做判断
      if (this.selectIndex / 1 === 1) {
        this[this.curTab](this.symbol) // 重新调取记录
        console.log('this.curTab', this.curTab)
      } else { // 交割合约
        this[this.curTab](this.symbol)
        // this.show = true
        console.log('curTab', evt, this.curTab)

        // 判断方法是否存在
      const fn = this[this.curTab];
      if (typeof fn === 'function') {
        fn.call(this, this.symbol);
        console.log('[onOrdered] 调用方法:', this.curTab, '参数:', this.symbol, '事件:', evt);
      } else {
        console.warn(`[onOrdered] curTab 方法不存在: ${this.curTab}`);
      }
      //console.log('下单后更新数据')
    },
@@ -477,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++
      }
@@ -548,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;
@@ -570,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 => {
@@ -617,7 +639,7 @@
        symbol: symbol,
        type: 'orders',
        page_no: 1,
        symbolType: 'cryptos'
        // symbolType: 'cryptos'
      }
      if (this.userInfo.token) {
        contractOrder(obj).then(data => {
@@ -638,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
@@ -655,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)
      }

    },