1

lxf

2025-07-15 59269b6839c57aeb0d547dfd6da38157180483fd

 src/views/cryptos/PerpetualContract/index.vue

@@ -5,9 +5,10 @@
      <ContractHeader :symbol="symbol" :range="range" :selectIndex="selectIndex" :symbolName="symbolName"
        :balance="userInfo.balance" @tab="onTopTab" @update-coin="onUpdate">
      </ContractHeader>
     <k-line-charts :update-key="updateKey" :update-data="quote" :symbol="symbol" :showBottom="true" />
      <p class="status-info" v-if="chartData.market && chartData.market.status">
        <span>{{ chartData.market.status && $t(chartData.market.status) }},</span>
        <span class="time">{{ chartData.market.time_str }}</span>&nbsp;
        <span class="time">{{ chartData.market.time }}</span>&nbsp;
        <span>{{ chartData.market.time_zone && $t(chartData.market.time_zone) }}</span>
      </p>
      <div :class="{ slide2: animated1 }" v-if="selectIndex === 1">
@@ -35,7 +36,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_str}%` }}</span>
              <span class="red">{{ `${chartData?.change_ratio}%` }}</span>
            </p>
          </div>
          <div class="flex-r">
@@ -123,7 +124,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_str}%` }}</span>
              <span class="red">{{ `${chartData?.change_ratio}%` }}</span>
            </p>
          </div>
          <div class="flex-r">
@@ -171,55 +172,81 @@
            </div>
          </div>
        </section>
        <div class="mainBackground rounded-view" key="y">
        <div class="btns" style="margin-top:20px;">
           <div class="tbns_mc" @click="showPopupclick('close')">{{$t('卖出')}}</div>
           <div class="tbns_mr" @click="showPopupclick('open')">{{$t('买入')}}</div>
        </div>
		
      <div class="ws_box">
         <div class="ws_box_box">
            <div class="ws_box_box_box">
               <div class="ws_box_box_box_top">
                  <img class="ws_box_box_box_top_img" src="../../../assets/img/icon-dollar.png"/>
                  <div class="ws_box_box_box_top_txt">{{$t('开')}}</div>
               </div>
               <div class="ws_box_box_box_btn">{{quote.open}}</div>
            </div>
            <div class="ws_box_box_box">
               <div class="ws_box_box_box_top">
                  <img class="ws_box_box_box_top_img" src="../../../assets/img/icon-arrow-up.png"/>
                  <div class="ws_box_box_box_top_txt">{{$t('高')}}</div>
               </div>
               <div class="ws_box_box_box_btn">{{quote.high}}</div>
            </div>
         </div>
         <div class="ws_box_box" style="padding-bottom: 10px;">
            <div class="ws_box_box_box">
               <div class="ws_box_box_box_top">
                  <img class="ws_box_box_box_top_img" src="../../../assets/img/icon-arrow-down.png"/>
                  <div class="ws_box_box_box_top_txt">{{$t('低')}}</div>
               </div>
               <div class="ws_box_box_box_btn">{{quote.low}}</div>
            </div>
            <div class="ws_box_box_box">
               <div class="ws_box_box_box_top">
                  <img class="ws_box_box_box_top_img" src="../../../assets/img/icon-foldline.png"/>
                  <div class="ws_box_box_box_top_txt">{{$t('24h成交量')}}</div>
               </div>
               <div class="ws_box_box_box_btn">{{quote.amount}}</div>
            </div>
         </div>
      </div>
      <van-popup v-model:show="showPopup"  :round="true">
        <div class="popup-content" >
         <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>
          <!-- <van-button @click="showPopup = false">关闭</van-button> -->
        </div>
      </van-popup>
      <!-- <div class="mainBackground rounded-view" key="y">
          <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>
          <div class="line"></div>
          <!-- 委托/持仓-->
          <PerpetualOrder class="pl-30 pr-30" :key="keyIndex + 'd'" :symbol="symbol" :order-cur="orderCur"
            :order-hold="orderHold" :price="price" :topIndex="selectIndex" :futrue-hold="futrueHold"
            :futrue-histroy="futrueHistroy" @tab="onTab" @recall="onRecall">
          </PerpetualOrder>
        </div>
        </div> -->
      </div>

    </div>
    <div class="fixed-box">
    <!-- <div class="fixed-box">
      <div class="flex justify-between items-center px-30 py-20" @click.stop="handleClickShowKlineChart()">
        <span class="font-30  textColor2" style="color:#fff;">{{ symbol.toUpperCase() }}&nbsp;&nbsp;{{ $t('k线图表') }}</span>
        <van-icon class="font-30" style="color:#fff;" :name="showCharts ? 'arrow-down' : 'arrow-up'"></van-icon>
      </div>
      <!-- <section class="indicator-index-container" v-if="showKlineChart">
        <div class="indicator-index-box">
          <div class="flex-l">
            <ul>
              <li v-for="(item, index) in filterOne" :key="item" @click="handleClickSelectTime(item, index)"
                :class="[item.index === timeLabelActive ? 'active' : '']">{{
                  item.name
                }}</li>
              <li @click="handleClickMoreBtn">{{ $t('更多') }}</li>
            </ul>
          </div>
        </div>
        <div class="indicator-index-box-second" v-if="showMore">
          <ul>
            <li v-for="(item, index) in filterTwo" :key="item" @click="handleClickSelectTime(item, index)"
              :class="[item.index === timeLabelActive ? 'active' : '']">{{
                item.name
              }}</li>
          </ul>
        </div>
      </section> -->
    
      <div class="kline-container flex" v-if="showKlineChart">
        <div class="chart-index">
          <!-- <fx-kline :height="500" :symbol="symbol" :isShowsolid="true" :chartType="chartType" v-if="symbol" @data="onData"
            :key="`${symbol}-${timeValue}`" /> -->
          
          <k-line-charts :update-key="updateKey" :update-data="quote" :symbol="symbol" :showBottom="true" />
        </div>
      </div>
    </div>
    </div> -->
  </div>
</template>

@@ -296,6 +323,7 @@
    return {
      quote: {},
      initTimer: null,
     showPopup:false,
      keyIndex: 0,
      timeout: null,
      timer: null, // 底部持仓等的公用定时器
@@ -322,6 +350,7 @@
      show: false, // popup
      animated1: false,
      animated2: false,
     _symbol:'',
      currentType: 'open',
      showCharts: false,
      type: 'cryptos',
@@ -380,6 +409,10 @@
      this.symbol = symbol
      this.init(symbol)
    },
   showPopupclick(e){
      this.showPopup = !this.showPopup
      // this.$refs.TradeOrderArea.changeTab(e);
   },
    changeCurrentType(type) {
      this.currentType = type
    },
@@ -464,6 +497,7 @@
      // this.clearTimeout()
      this.initParam(this.symbol, evt) // 重新初始化
        // 判断方法是否存在
      this.showPopup = false
      const fn = this[this.curTab];
      if (typeof fn === 'function') {
        fn.call(this, this.symbol);
@@ -474,7 +508,7 @@
      //console.log('下单后更新数据')
    },
    onTab(evt) { // 点击tab后的回调
      console.log('evt2', evt)
      // console.log('evt2', evt)
      this.clearTimer()
      // this.clearTimeout()
      this.curTab = evt
@@ -483,17 +517,17 @@
    fetchQoutes(symbol) { // 获取当前行情
      _getHomeList(symbol).then(data => { // 获取行情
        this.symbolName = data[0].name
        console.log(data[0].name)
        // console.log(data[0].name)
        this.handleQoutes(data)
        this.startQuoteSocket() // socket
      })
    },
    handleQoutes(data) {
      console.log('handleQoutes: ', data);
      // console.log('handleQoutes: ', data);
      if (data && data.length) {
        const cur = data[0]
        this.price = cur.close
        this.range = (cur.change_ratio_str || cur.changeRatioStr)
        this.range = (cur.change_ratio || cur.changeRatio)
        this.quote = cur
        this.updateKey++
      }
@@ -688,9 +722,15 @@
      this.clearTimer()

      const _symbol = symbol || this.symbol
	  
     if(this.symbol){
        this._symbol = this.symbol
     }else{
        this._symbol =  symbol
     }
      console.log('init: ',this.symbol, symbol)
      this.fetchQoutes(_symbol)
      this.fetchDeepData(_symbol)
      // this.fetchDeepData(_symbol)
      this.initParam(_symbol) // 'open'
      // this.clearTimer()
      //if (this.curTab === 'fetchOrderListCur') {
@@ -779,6 +819,71 @@
</script>

<style lang="scss">
   .ws_box_box_box_btn{
      font-size: 35px;
      font-weight: bold;
      padding-bottom: 20px;
   }
   .ws_box_box_box_top_img{
      width: 30px;
      height: 30px;
      margin-right: 10px;
   }
   .ws_box_box_box_top{
      display: flex;
      align-items: center;
      font-size: 30px;
      font-weight: bold;
      color: #8c8883;
   }
   .ws_box_box_box{
      width: 50%;
      display: flex;
      flex-direction: column;
      padding-top: 40px;
      padding-left: 40px;
   }
   .ws_box_box{
      display: flex;
   }
   .ws_box{
      display: flex;
      flex-direction: column;
      background-color: #F6F7F9;
      border-radius:24px;
      color:#333;
      margin:30px;
   }
   .tbns_mr {
      font-weight: bold;
      font-size: 35px;
      text-align:center;
      background-color: #3A7FF6;
      color: #fff;
      width: 350px;
      line-height: 100px;
      height: 100px;
      border-radius: 50px;
   }
   .tbns_mc {
      font-weight: bold;
      font-size: 35px;
      text-align:center;
      background-color: #DE5D57;
      color: #fff;
      width: 350px;
      line-height: 100px;
      height: 100px;
      border-radius: 50px;
   }
	
   .btns {
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin: 0 20px;
      // width: 100%;
   }
//.list-enter-active, .list-leave-active {
//  transition: all .5s;
//  transform: translateY(30px)