1

jhzh

2024-08-15 0b909dcd3e4c925b23c69a375a5077fb733766aa

 src/page/perpetualContract/index.vue

@@ -2,38 +2,86 @@
   <div :key="symbol" class="pb-108 no_touch">

      <!-- 头部区 -->

      <ContractHeader :symbol="symbol" :newname="newname" :range="range" :selectIndex="selectIndex"
         :balance="userInfo.balance" @tab="onTopTab" @update-coin="onUpdate">
    <ContractHeader
      :symbol="symbol"
     :newname="newname"
      :range="range"
      :selectIndex="selectIndex"
      :balance="userInfo.balance"
      @tab="onTopTab"
      @update-coin="onUpdate"
    >
      </ContractHeader>
		

      <div :class="{ slide2: animated1 }" v-if="selectIndex === 1">
         <div class="mainBackground" key="x">
            <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" @ordered="onOrdered" :currentType="currentType"
               @changeCurrentType="changeCurrentType" @changeValueBack="changeValueBack">
        <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"
          @ordered="onOrdered"
          :currentType="currentType"
          @changeCurrentType="changeCurrentType"
          @changeValueBack="changeValueBack"
        >
            </PerpetualOpen>
            <!-- <div class="line"></div> -->
            <PerpetualOrder class="pl-30 pr-30" :key="keyIndex + 'b'" :symbol="symbol" :order-cur="orderCur"
               :order-hold="orderHold" :topIndex="selectIndex" :futrue-hold="futrueHold"
               :futrue-histroy="futrueHistroy" @tab="onTab" @recall="onRecall">
        <PerpetualOrder
          class="pl-30 pr-30"
          :key="keyIndex + 'b'"
          :symbol="symbol"
          :order-cur="orderCur"
          :order-hold="orderHold"
          :topIndex="selectIndex"
          :futrue-hold="futrueHold"
          :futrue-histroy="futrueHistroy"
          @tab="onTab"
          @recall="onRecall"
        >
            </PerpetualOrder>
         </div>
      </div>
      <div :class="{ slide1: animated2 }" v-else>
         <div class="mainBackground" key="y">
            <PerpetualOpen class="pl-30 pr-30" :key="keyIndex + 'c'" :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"
               @iszyzs="oniszyzs">
        <PerpetualOpen
          class="pl-30 pr-30"
          :key="keyIndex + 'c'"
          :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"
        @iszyzs="oniszyzs"
        >
            </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" @iszyzs="oniszyzs">
        <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"
        @iszyzs="oniszyzs"
        >
            </PerpetualOrder>
         </div>
      </div>
@@ -42,11 +90,19 @@
            <span class="font-24 textColor2">
               {{ newname}}&nbsp;{{ $t("k线图表") }}
            </span>
            <van-icon class="textColor" @click.stop="showCharts = !showCharts"
               :name="showCharts ? 'arrow-down' : 'arrow-up'"></van-icon>
        <van-icon
          class="textColor"
          @click.stop="showCharts = !showCharts"
          :name="showCharts ? 'arrow-down' : 'arrow-up'"
        ></van-icon>
         </div>
         <k-line-charts :update-key="updateKey" :update-data="quote" :symbol="symbol" v-if="symbol && showCharts"
            :showBottom="false" />
      <k-line-charts
        :update-key="updateKey"
        :update-data="quote"
        :symbol="symbol"
        v-if="symbol && showCharts"
        :showBottom="false"
      />
      </div>
   </div>
</template>
@@ -66,27 +122,12 @@
      _futrueOrderInit,
      _futrueOrderList,
   } from "@/API/trade.api";
   import {
      _getHomeList
   } from "@/API/home.api";
   import {
      Popup,
      Swipe,
      SwipeItem
   } from "vant";
   import {
      mapActions,
      mapGetters
   } from "vuex";
   import {
      SET_COIN_LIST
   } from "@/store/const.store";
   import {
      WS_URL
   } from "@/config";
   import {
      getStorage
   } from "@/utils/utis";
import { _getHomeList } from "@/API/home.api";
import { Popup, Swipe, SwipeItem } from "vant";
import { mapActions, mapGetters } from "vuex";
import { SET_COIN_LIST } from "@/store/const.store";
import { WS_URL } from "@/config";
import { getStorage } from "@/utils/utis";
   import KLineCharts from "@/components/kline-charts";
   var showLength = 7;
   export default {
@@ -164,9 +205,7 @@
         }
         _getBalance().then((data) => {
            // 获取用户余额
            this.$store.commit("user/SET_USERINFO", {
               balance: data.money
            });
      this.$store.commit("user/SET_USERINFO", { balance: data.money });
            // const { money } = data
            // this.balance = money
         });
@@ -182,6 +221,7 @@
            this.init(symbol);
         },
         oniszyzs() {
      debugger
            this.iszyzs = true
         },
         onRecall() {
@@ -258,8 +298,7 @@
            _getHomeList(symbol).then((data) => {
               // 获取行情
               this.handleQoutes(data);
               this.startQuoteSocket(); // k线socket
               this.startDeepSocket(); // socket
        this.startQuoteSocket(); // socket
            });
         },
         handleQoutes(data) {
@@ -286,10 +325,7 @@
               return;
            }
            this.deepData = data;
            const {
               asks,
               bids
            } = data;
      const { asks, bids } = data;
            this.asks = asks.sort((a, b) => a.price - b.price).slice(0, showLength);
            this.bids = bids.sort((a, b) => a.price - b.price).slice(-showLength);
         },
@@ -301,13 +337,8 @@
            //     socket.send('hello')
            // }
            this.sockets.quotes.onmessage = (evt) => {
               const {
                  data
               } = evt;
               const {
                  code,
                  data: _data
               } = JSON.parse(data);
        const { data } = evt;
        const { code, data: _data } = JSON.parse(data);
               if (code / 1 === 0) {
                  this.handleQoutes(_data);
               }
@@ -324,13 +355,8 @@
            };

            this.socket.onmessage = (evt) => {
               const {
                  data
               } = evt;
               const {
                  code,
                  data: _data
               } = JSON.parse(data);
        const { data } = evt;
        const { code, data: _data } = JSON.parse(data);
               if (code / 1 === 0) {
                  this.handleDeep(_data);
               }
@@ -562,9 +588,9 @@
         this.clearTimer();
      },
      activated() {
         this.currentType = this.$route.query.currentType ?
            this.$route.query.currentType :
            "long";
    this.currentType = this.$route.query.currentType
      ? this.$route.query.currentType
      : "long";
      },
      beforeDestroy() {
         this.closeSocket();
@@ -575,6 +601,7 @@
</script>

<style lang="scss" scoped>
	
   //.list-enter-active, .list-leave-active {
   //  transition: all .5s;
   //  transform: translateY(30px)
@@ -617,7 +644,8 @@
      width: 100%;
   }

   .my-swipe .van-swipe-item {}
.my-swipe .van-swipe-item {
}

   .line {
      height: 13px;