1

jhzh

2024-08-15 0b909dcd3e4c925b23c69a375a5077fb733766aa

 src/page/perpetualContract/index.vue

@@ -1,692 +1,720 @@
<template>
   <div :key="symbol" class="pb-108 no_touch">
  <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>

      <!-- 头部区 -->

      <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>
            <!-- <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>
         </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>
            <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>
         </div>
      </div>
      <div class="fixed w-full shadow z-10 tabBackground1">
         <div class="flex justify-between px-30 py-10">
            <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>
         </div>
         <k-line-charts :update-key="updateKey" :update-data="quote" :symbol="symbol" v-if="symbol && showCharts"
            :showBottom="false" />
      </div>
   </div>
    <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>
        <!-- <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>
      </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>
        <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>
      </div>
    </div>
    <div class="fixed w-full shadow z-10 tabBackground1">
      <div class="flex justify-between px-30 py-10">
        <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>
      </div>
      <k-line-charts
        :update-key="updateKey"
        :update-data="quote"
        :symbol="symbol"
        v-if="symbol && showCharts"
        :showBottom="false"
      />
    </div>
  </div>
</template>

<script>
   import ContractHeader from "@/components/contract-header/index.vue";
   import PerpetualOpen from "@/components/perpetual-open/index.vue";
   import PerpetualOrder from "@/components/perpetual-order/index.vue";
import ContractHeader from "@/components/contract-header/index.vue";
import PerpetualOpen from "@/components/perpetual-open/index.vue";
import PerpetualOrder from "@/components/perpetual-order/index.vue";

   import {
      _getBalance,
      _getDeepData,
      _initOpen,
      _initClose,
      _orderListCur,
      _orderListHold,
      _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 KLineCharts from "@/components/kline-charts";
   var showLength = 7;
   export default {
      name: "perpetualContract",
      components: {
         ContractHeader,
         PerpetualOpen,
         PerpetualOrder,
         [Popup.name]: Popup,
         [Swipe.name]: Swipe,
         [SwipeItem.name]: SwipeItem,
         KLineCharts,
      },
      computed: {
         ...mapGetters("user", ["userInfo"]),
         ...mapGetters({
            coinList: "home/coinList",
         }),
      },
      watch: {
         selectIndex(val) {
            showLength = 7;
         },
      },
      data() {
         const initArr = [];
         for (let i = 0; i < showLength; i++) {
            initArr.push({
               amount: "--",
               price: "--",
            });
         }
         return {
import {
  _getBalance,
  _getDeepData,
  _initOpen,
  _initClose,
  _orderListCur,
  _orderListHold,
  _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 KLineCharts from "@/components/kline-charts";
var showLength = 7;
export default {
  name: "perpetualContract",
  components: {
    ContractHeader,
    PerpetualOpen,
    PerpetualOrder,
    [Popup.name]: Popup,
    [Swipe.name]: Swipe,
    [SwipeItem.name]: SwipeItem,
    KLineCharts,
  },
  computed: {
    ...mapGetters("user", ["userInfo"]),
    ...mapGetters({
      coinList: "home/coinList",
    }),
  },
  watch: {
    selectIndex(val) {
      showLength = 7;
    },
  },
  data() {
    const initArr = [];
    for (let i = 0; i < showLength; i++) {
      initArr.push({
        amount: "--",
        price: "--",
      });
    }
    return {

            quote: {},
            initTimer: null,
            keyIndex: 0,
            timeout: null,
            timer: null, // 底部持仓等的公用定时器
            timer1: null, // tab切换动画
            timer2: null, // 交割合约底部持仓等的公用定时器
            balance: 0,
            symbol: "",
            price: "",
            newname: '',
            range: "",
            stop_price_profit: "",
            stop_price_loss: "",
            initOpen: {},
            initClose: {},
            asks: initArr, // 卖单
            bids: initArr, // 买单
            orderCur: [], // 当前委托
            orderHold: [], // 持有仓位
            futrueHold: [], // 交割持仓
            futrueHistroy: [], // 交割历史
            sockets: {
               quotes: null, // 行情
               deep: null, /// 深度
            },
            curTab: "", // 当前委托还是持有仓位
            selectIndex: 1, // 当前tab
            initFutrue: {}, /// 交割合约
            show: false, // popup
            animated1: false,
            animated2: false,
            currentType: "",
            showCharts: false,
            // curRequest: [], //
         };
      },
      async created() {
         if (!this.coinList.length) {
            await this.SET_COIN_LIST();
         }
         _getBalance().then((data) => {
            // 获取用户余额
            this.$store.commit("user/SET_USERINFO", {
               balance: data.money
            });
            // const { money } = data
            // this.balance = money
         });
      },
      methods: {
         ...mapActions("home", [SET_COIN_LIST]),
         ...mapActions("user", ["GET_UERS_KYC"]),
      quote: {},
      initTimer: null,
      keyIndex: 0,
      timeout: null,
      timer: null, // 底部持仓等的公用定时器
      timer1: null, // tab切换动画
      timer2: null, // 交割合约底部持仓等的公用定时器
      balance: 0,
      symbol: "",
      price: "",
     newname:'',
      range: "",
      stop_price_profit: "",
      stop_price_loss: "",
      initOpen: {},
      initClose: {},
      asks: initArr, // 卖单
      bids: initArr, // 买单
      orderCur: [], // 当前委托
      orderHold: [], // 持有仓位
      futrueHold: [], // 交割持仓
      futrueHistroy: [], // 交割历史
      sockets: {
        quotes: null, // 行情
        deep: null, /// 深度
      },
      curTab: "", // 当前委托还是持有仓位
      selectIndex: 1, // 当前tab
      initFutrue: {}, /// 交割合约
      show: false, // popup
      animated1: false,
      animated2: false,
      currentType: "",
      showCharts: false,
      // curRequest: [], //
    };
  },
  async created() {
    if (!this.coinList.length) {
      await this.SET_COIN_LIST();
    }
    _getBalance().then((data) => {
      // 获取用户余额
      this.$store.commit("user/SET_USERINFO", { balance: data.money });
      // const { money } = data
      // this.balance = money
    });
  },
  methods: {
    ...mapActions("home", [SET_COIN_LIST]),
    ...mapActions("user", ["GET_UERS_KYC"]),

         onUpdate(symbol) {
            // 更新
            this.symbol = symbol;
            this.closeSocket();
            this.init(symbol);
         },
         oniszyzs() {
            this.iszyzs = true
         },
         onRecall() {
            // 撤单or 平仓 evt
            this.clearTimer();
            _orderListHold(this.symbol).then((data) => {
               this.orderHold = data;
            });
            this[this.curTab](this.symbol);
            _initOpen(this.symbol).then((data) => {
               this.initOpen = data;
            });
         },
         onTopTab(evt) {
            // 当前tab 永续/交割
            this.keyIndex += 1;
            this.selectIndex = evt;
            this.clearTimer();
            if (this.selectIndex / 1 === 1) {
               //this.curTab = 'fetchOrderListCur'
               this.curTab = "fetchOrderListHold";
               // this.animated1 = true
               // this.timer = setTimeout(() => {
               //     this.animated1 = false
               //     clearTimeout(this.timer)
               // }, 200)
               this.animated2 = true;
               this.timer1 = setTimeout(() => {
                  this.animated2 = false;
                  clearTimeout(this.timer1);
               }, 200);
            } else {
               // this.animated2 = true
               // this.timer = setTimeout(() => {
               //     this.animated2 = false
               //     clearTimeout(this.timer)
               // }, 200)
               this.animated1 = true;
               this.timer1 = setTimeout(() => {
                  this.animated1 = false;
                  clearTimeout(this.timer1);
               }, 200);
            }
            console.log(this.curTab);
            this[this.curTab](this.symbol);
         },
         onOrdered(evt) {
            // 下单过后的回调
            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);
            }
            //console.log('下单后更新数据')
         },
         onTab(evt) {
            // 点击tab后的回调
            console.log("evt", evt);
            this.clearTimer();
            // this.clearTimeout()
            this.curTab = evt;
            this[evt](this.symbol);
         },
         fetchQoutes(symbol) {
            // 获取当前行情
            _getHomeList(symbol).then((data) => {
               // 获取行情
               this.handleQoutes(data);
               this.startQuoteSocket(); // k线socket
               this.startDeepSocket(); // socket
            });
         },
         handleQoutes(data) {
            if (data && data.length) {
               const cur = data[0];
               this.price = cur.close;
               this.range = cur.change_ratio + "";
               this.newname = cur.name
               this.quote = cur;
               this.updateKey++;
            }
         },
         fetchDeepData(symbol) {
            console.log("sd");
            _getDeepData(symbol).then((data) => {
               // 获取深度
               console.log(data);
               this.handleDeep(data);
               this.startDeepSocket(); // socket
            });
         },
         handleDeep(data) {
            if (this.symbol !== data.symbol) {
               return;
            }
            this.deepData = 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);
         },
         startQuoteSocket() {
            // 行情socket
            this.sockets.quotes = new WebSocket(`${WS_URL}/1/${this.symbol}`);
            // socket.onopen =  () => {
            //     console.log('open')
            //     socket.send('hello')
            // }
            this.sockets.quotes.onmessage = (evt) => {
               const {
                  data
               } = evt;
               const {
                  code,
                  data: _data
               } = JSON.parse(data);
               if (code / 1 === 0) {
                  this.handleQoutes(_data);
               }
            };
         },
         startDeepSocket() {
            // 开启socket链接
            this.closeSocket();
    onUpdate(symbol) {
      // 更新
      this.symbol = symbol;
      this.closeSocket();
      this.init(symbol);
    },
   oniszyzs(){
      debugger
      this.iszyzs = true
   },
    onRecall() {
      // 撤单or 平仓 evt
      this.clearTimer();
      _orderListHold(this.symbol).then((data) => {
        this.orderHold = data;
      });
      this[this.curTab](this.symbol);
      _initOpen(this.symbol).then((data) => {
        this.initOpen = data;
      });
    },
    onTopTab(evt) {
      // 当前tab 永续/交割
      this.keyIndex += 1;
      this.selectIndex = evt;
      this.clearTimer();
      if (this.selectIndex / 1 === 1) {
        //this.curTab = 'fetchOrderListCur'
        this.curTab = "fetchOrderListHold";
        // this.animated1 = true
        // this.timer = setTimeout(() => {
        //     this.animated1 = false
        //     clearTimeout(this.timer)
        // }, 200)
        this.animated2 = true;
        this.timer1 = setTimeout(() => {
          this.animated2 = false;
          clearTimeout(this.timer1);
        }, 200);
      } else {
        // this.animated2 = true
        // this.timer = setTimeout(() => {
        //     this.animated2 = false
        //     clearTimeout(this.timer)
        // }, 200)
        this.animated1 = true;
        this.timer1 = setTimeout(() => {
          this.animated1 = false;
          clearTimeout(this.timer1);
        }, 200);
      }
      console.log(this.curTab);
      this[this.curTab](this.symbol);
    },
    onOrdered(evt) {
      // 下单过后的回调
      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);
      }
      //console.log('下单后更新数据')
    },
    onTab(evt) {
      // 点击tab后的回调
      console.log("evt", evt);
      this.clearTimer();
      // this.clearTimeout()
      this.curTab = evt;
      this[evt](this.symbol);
    },
    fetchQoutes(symbol) {
      // 获取当前行情
      _getHomeList(symbol).then((data) => {
        // 获取行情
        this.handleQoutes(data);
        this.startQuoteSocket(); // socket
      });
    },
    handleQoutes(data) {
      if (data && data.length) {
        const cur = data[0];
        this.price = cur.close;
        this.range = cur.change_ratio + "";
      this.newname = cur.name
        this.quote = cur;
        this.updateKey++;
      }
    },
    fetchDeepData(symbol) {
      console.log("sd");
      _getDeepData(symbol).then((data) => {
        // 获取深度
        console.log(data);
        this.handleDeep(data);
        this.startDeepSocket(); // socket
      });
    },
    handleDeep(data) {
      if (this.symbol !== data.symbol) {
        return;
      }
      this.deepData = 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);
    },
    startQuoteSocket() {
      // 行情socket
      this.sockets.quotes = new WebSocket(`${WS_URL}/1/${this.symbol}`);
      // socket.onopen =  () => {
      //     console.log('open')
      //     socket.send('hello')
      // }
      this.sockets.quotes.onmessage = (evt) => {
        const { data } = evt;
        const { code, data: _data } = JSON.parse(data);
        if (code / 1 === 0) {
          this.handleQoutes(_data);
        }
      };
    },
    startDeepSocket() {
      // 开启socket链接
      this.closeSocket();

            this.socket = new WebSocket(`${WS_URL}/3/${this.symbol}`);
      this.socket = new WebSocket(`${WS_URL}/3/${this.symbol}`);

            this.socket.onopen = () => {
               console.log("WebSocket connection established");
            };
      this.socket.onopen = () => {
        console.log("WebSocket connection established");
      };

            this.socket.onmessage = (evt) => {
               const {
                  data
               } = evt;
               const {
                  code,
                  data: _data
               } = JSON.parse(data);
               if (code / 1 === 0) {
                  this.handleDeep(_data);
               }
            };
      this.socket.onmessage = (evt) => {
        const { data } = evt;
        const { code, data: _data } = JSON.parse(data);
        if (code / 1 === 0) {
          this.handleDeep(_data);
        }
      };

            this.socket.onerror = (error) => {
               console.error("WebSocket error:", error);
               setTimeout(this.startDeepSocket, 5000); // 5秒后尝试重新连接
            };
      this.socket.onerror = (error) => {
        console.error("WebSocket error:", error);
        setTimeout(this.startDeepSocket, 5000); // 5秒后尝试重新连接
      };

            this.socket.onclose = (event) => {
               console.log("WebSocket connection closed:", event);
               // 重新连接，可以根据需求添加重连的逻辑，这里只是简单的示例
            };
         },
      this.socket.onclose = (event) => {
        console.log("WebSocket connection closed:", event);
        // 重新连接，可以根据需求添加重连的逻辑，这里只是简单的示例
      };
    },

         initParam(symbol, type) {
            // 初始化参数
            if (type === "open" || type === "long" || type === "short" || !type) {
               let initFunTimer = null;
               let initFun = () => {
                  _initOpen(symbol)
                     .then((data) => {
                        this.initOpen = data;
                        clearTimeout(initFunTimer);
                        initFunTimer = null;
                     })
                     .catch((err) => {
                        initFunTimer = setTimeout(() => {
                           initFun();
                        }, 3000);
                     });
               };
               initFun();
            }
            if (type === "close" || !type) {
               let initFunTimer = null;
               let initFun = () => {
                  _initClose(symbol)
                     .then((data) => {
                        this.initClose = data;
                        console.log(this.initClose);
                        clearTimeout(initFunTimer);
                        initFunTimer = null;
                     })
                     .catch((err) => {
                        initFunTimer = setTimeout(() => {
                           initFun();
                        }, 3000);
                     });
               };
               initFunTimer = setTimeout(() => {
                  initFun();
               }, 600);
            }
            if (type === "futrue" || !type) {
               _futrueOrderInit(symbol).then((data) => {
                  this.initFutrue = data;
               });
            }
         },
         fetchOrderListCur(symbol) {
            // 当前委托
            //console.log('当前委托')
            if (this.userInfo.token) {
               _orderListCur(symbol).then((data) => {
                  this.orderCur = data;
               });
               this.clearTimer();
               this.timer = setInterval(() => {
                  _orderListCur(symbol).then((data) => {
                     // if (typeof this.timer === 'string') {
                     //   this.timer = null
                     //   return
                     // }
                     this.orderCur = data;
                  });
               }, 1000);
            } else {
               this.orderCur = [];
            }
         },
         fetchOrderListHold(symbol) {
            // 当前持仓
            if (!symbol) {
               return;
            }
            if (this.userInfo.token) {
               _orderListHold(symbol).then((data) => {
                  // this.orderHold = data
                  this.orderHold = data.sort(this.sortData);
               });
               this.timer = setInterval(() => {
                  _orderListHold(symbol).then((data) => {
                     // if (typeof this.timer === 'string') {
                     //   this.timer = null
                     //   return
                     // }
                     // this.orderHold = data
                     this.orderHold = data.sort(this.sortData);
                  });
               }, 1000);
            } else {
               this.orderHold = [];
            }
         },
         fetchFutrueHoldList(symbol) {
            if (!symbol) {
               return;
            }
            // 交割持仓
            if (this.userInfo.token) {
               let length = 0;
               _futrueOrderList(symbol).then((data) => {
                  // this.futrueHold = data
                  this.futrueHold = data.sort(this.sortData);
                  length = data.length;
               });
               this.timer = setInterval(() => {
                  _futrueOrderList(symbol).then((data) => {
                     // if (typeof this.timer === 'string') {
                     //   this.timer = null
                     //   return
                     // }
    initParam(symbol, type) {
      // 初始化参数
      if (type === "open" || type === "long" || type === "short" || !type) {
        let initFunTimer = null;
        let initFun = () => {
          _initOpen(symbol)
            .then((data) => {
              this.initOpen = data;
              clearTimeout(initFunTimer);
              initFunTimer = null;
            })
            .catch((err) => {
              initFunTimer = setTimeout(() => {
                initFun();
              }, 3000);
            });
        };
        initFun();
      }
      if (type === "close" || !type) {
        let initFunTimer = null;
        let initFun = () => {
          _initClose(symbol)
            .then((data) => {
              this.initClose = data;
              console.log(this.initClose);
              clearTimeout(initFunTimer);
              initFunTimer = null;
            })
            .catch((err) => {
              initFunTimer = setTimeout(() => {
                initFun();
              }, 3000);
            });
        };
        initFunTimer = setTimeout(() => {
          initFun();
        }, 600);
      }
      if (type === "futrue" || !type) {
        _futrueOrderInit(symbol).then((data) => {
          this.initFutrue = data;
        });
      }
    },
    fetchOrderListCur(symbol) {
      // 当前委托
      //console.log('当前委托')
      if (this.userInfo.token) {
        _orderListCur(symbol).then((data) => {
          this.orderCur = data;
        });
        this.clearTimer();
        this.timer = setInterval(() => {
          _orderListCur(symbol).then((data) => {
            // if (typeof this.timer === 'string') {
            //   this.timer = null
            //   return
            // }
            this.orderCur = data;
          });
        }, 1000);
      } else {
        this.orderCur = [];
      }
    },
    fetchOrderListHold(symbol) {
      // 当前持仓
      if (!symbol) {
        return;
      }
      if (this.userInfo.token) {
        _orderListHold(symbol).then((data) => {
          // this.orderHold = data
          this.orderHold = data.sort(this.sortData);
        });
        this.timer = setInterval(() => {
          _orderListHold(symbol).then((data) => {
            // if (typeof this.timer === 'string') {
            //   this.timer = null
            //   return
            // }
            // this.orderHold = data
            this.orderHold = data.sort(this.sortData);
          });
        }, 1000);
      } else {
        this.orderHold = [];
      }
    },
    fetchFutrueHoldList(symbol) {
      if (!symbol) {
        return;
      }
      // 交割持仓
      if (this.userInfo.token) {
        let length = 0;
        _futrueOrderList(symbol).then((data) => {
          // this.futrueHold = data
          this.futrueHold = data.sort(this.sortData);
          length = data.length;
        });
        this.timer = setInterval(() => {
          _futrueOrderList(symbol).then((data) => {
            // if (typeof this.timer === 'string') {
            //   this.timer = null
            //   return
            // }

                     this.futrueHold = data.sort(this.sortData);
                     if (length != data.length) {
                        length = data.length;
                        _futrueOrderInit(symbol).then((dataList) => {
                           this.initFutrue = dataList;
                        });
                     }
                  });
               }, 1000);
            } else {
               this.futrueHold = [];
            }
         },
         fetchFutrueHistory(symbol) {
            // 交割历史持仓
            _futrueOrderList(symbol, "hisorders").then((data) => {
               this.futrueHistroy = data;
               // this.clearTimeout()
            });
         },
         init(symbol) {
            // 初始化页面
            this.symbol = symbol.toLowerCase();
            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);
            } else {
               this.fetchFutrueHoldList(symbol);
            }
         },
         closeSocket() {
            this.sockets.quotes && this.sockets.quotes.close();
            this.sockets.deep && this.sockets.deep.close();
            this.sockets.quotes = null;
            this.sockets.deep = null;
         },
         // clearTimeout(noNeed) {
         //     clearTimeout(this.timeout)
         //     if (noNeed) { // 防止timout定时器因接口返回继续触发
         //       this.timeout = ''
         //       return
         //     }
         //     this.timeout = null
         // },
         clearTimer() {
            clearInterval(this.timer);
            // if (isNeed) {
            //   this.timer = ''
            //   return
            // }
            this.timer = null;
         },
         changeCurrentType(type) {
            this.currentType = type;
         },
         changeValueBack(val) {
            if (val == 0) {
               showLength = 7;
            } else {
               showLength = 13;
            }
         },
         sortData(a, b) {
            return new Date(b.open_time).getTime() - new Date(a.open_time).getTime();
         },
      },
      mounted() {
         this.GET_UERS_KYC();
         let symbol = this.$route.params.symbol;
         let catchSymbol = getStorage("symbol");
         if (!symbol && catchSymbol) {
            symbol = catchSymbol;
         }
         if (this.selectIndex / 1 === 2) {
            this.curTab = "fetchFutrueHoldList";
         } else {
            this.curTab = "fetchOrderListHold";
         }
         this.symbol = symbol;
         this.init(symbol);
      },
      activated() {
         let symbol = this.$route.params.symbol;
         let catchSymbol = getStorage("symbol");
         if (!symbol && catchSymbol) {
            symbol = catchSymbol;
         }
         if (this.selectIndex / 1 === 2) {
            this.curTab = "fetchFutrueHoldList";
         } else {
            this.curTab = "fetchOrderListHold";
         }
         this.symbol = symbol;
         this.init(symbol);
      },
            this.futrueHold = data.sort(this.sortData);
            if (length != data.length) {
              length = data.length;
              _futrueOrderInit(symbol).then((dataList) => {
                this.initFutrue = dataList;
              });
            }
          });
        }, 1000);
      } else {
        this.futrueHold = [];
      }
    },
    fetchFutrueHistory(symbol) {
      // 交割历史持仓
      _futrueOrderList(symbol, "hisorders").then((data) => {
        this.futrueHistroy = data;
        // this.clearTimeout()
      });
    },
    init(symbol) {
      // 初始化页面
      this.symbol = symbol.toLowerCase();
      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);
      } else {
        this.fetchFutrueHoldList(symbol);
      }
    },
    closeSocket() {
      this.sockets.quotes && this.sockets.quotes.close();
      this.sockets.deep && this.sockets.deep.close();
      this.sockets.quotes = null;
      this.sockets.deep = null;
    },
    // clearTimeout(noNeed) {
    //     clearTimeout(this.timeout)
    //     if (noNeed) { // 防止timout定时器因接口返回继续触发
    //       this.timeout = ''
    //       return
    //     }
    //     this.timeout = null
    // },
    clearTimer() {
      clearInterval(this.timer);
      // if (isNeed) {
      //   this.timer = ''
      //   return
      // }
      this.timer = null;
    },
    changeCurrentType(type) {
      this.currentType = type;
    },
    changeValueBack(val) {
      if (val == 0) {
        showLength = 7;
      } else {
        showLength = 13;
      }
    },
    sortData(a, b) {
      return new Date(b.open_time).getTime() - new Date(a.open_time).getTime();
    },
  },
  mounted() {
    this.GET_UERS_KYC();
    let symbol = this.$route.params.symbol;
    let catchSymbol = getStorage("symbol");
    if (!symbol && catchSymbol) {
      symbol = catchSymbol;
    }
    if (this.selectIndex / 1 === 2) {
      this.curTab = "fetchFutrueHoldList";
    } else {
      this.curTab = "fetchOrderListHold";
    }
    this.symbol = symbol;
    this.init(symbol);
  },
  activated() {
    let symbol = this.$route.params.symbol;
    let catchSymbol = getStorage("symbol");
    if (!symbol && catchSymbol) {
      symbol = catchSymbol;
    }
    if (this.selectIndex / 1 === 2) {
      this.curTab = "fetchFutrueHoldList";
    } else {
      this.curTab = "fetchOrderListHold";
    }
    this.symbol = symbol;
    this.init(symbol);
  },

      deactivated() {
         this.closeSocket();
         this.clearTimer();
      },
      activated() {
         this.currentType = this.$route.query.currentType ?
            this.$route.query.currentType :
            "long";
      },
      beforeDestroy() {
         this.closeSocket();
         // this.clearTimeout(true)
         this.clearTimer();
      },
   };
  deactivated() {
    this.closeSocket();
    this.clearTimer();
  },
  activated() {
    this.currentType = this.$route.query.currentType
      ? this.$route.query.currentType
      : "long";
  },
  beforeDestroy() {
    this.closeSocket();
    // this.clearTimeout(true)
    this.clearTimer();
  },
};
</script>

<style lang="scss" scoped>
   //.list-enter-active, .list-leave-active {
   //  transition: all .5s;
   //  transform: translateY(30px)
   //}
   //.list-enter, .list-leave-to
   //  /* .list-leave-active for below version 2.1.8 */ {
   //  transform: translateY(0)
   //}
   .no_touch {
      -webkit-user-select: none;
      user-select: none;
      -ms-user-select: none;
      -moz-user-select: none;
      padding-bottom: 150px !important;
   }
	
//.list-enter-active, .list-leave-active {
//  transition: all .5s;
//  transform: translateY(30px)
//}
//.list-enter, .list-leave-to
//  /* .list-leave-active for below version 2.1.8 */ {
//  transform: translateY(0)
//}
.no_touch {
  -webkit-user-select: none;
  user-select: none;
  -ms-user-select: none;
  -moz-user-select: none;
  padding-bottom: 150px !important;
}

   .list-enter-active,
   .list-leave-active {
      will-change: transform;
      transition: all 250ms;
   }
.list-enter-active,
.list-leave-active {
  will-change: transform;
  transition: all 250ms;
}

   .list-enter {
      opacity: 0;
      transform: translate3d(-100%, 0, 0);
   }
.list-enter {
  opacity: 0;
  transform: translate3d(-100%, 0, 0);
}

   .list-leave {
      opacity: 0;
      transform: translate3d(100%, 0, 0);
   }
.list-leave {
  opacity: 0;
  transform: translate3d(100%, 0, 0);
}

   .rounded-view {
      border-top-left-radius: 20px;
      border-top-right-radius: 20px;
      box-sizing: border-box;
   }
.rounded-view {
  border-top-left-radius: 20px;
  border-top-right-radius: 20px;
  box-sizing: border-box;
}

   .my-swipe {
      width: 100%;
   }
.my-swipe {
  width: 100%;
}

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

   .line {
      height: 13px;
.line {
  height: 13px;

      @include themify() {
         background: themed("tab_background");
      }
   }
  @include themify() {
    background: themed("tab_background");
  }
}

   @keyframes animate1 {
      0% {
         opacity: 1;
         transform: translate3d(100%, 0, 0);
      }
@keyframes animate1 {
  0% {
    opacity: 1;
    transform: translate3d(100%, 0, 0);
  }

      //   40% {
      //      opacity: 1;
      //     transform: translate3d(50%, 0, 0);
      //   }
      100% {
         opacity: 1;
         transform: translate3d(0%, 0, 0);
      }
   }
  //   40% {
  //      opacity: 1;
  //     transform: translate3d(50%, 0, 0);
  //   }
  100% {
    opacity: 1;
    transform: translate3d(0%, 0, 0);
  }
}

   @keyframes animate2 {
      0% {
         opacity: 1;
         transform: translate3d(-100%, 0, 0);
      }
@keyframes animate2 {
  0% {
    opacity: 1;
    transform: translate3d(-100%, 0, 0);
  }

      //   40% {
      //      opacity: 1;
      //     transform: translate3d(50%, 0, 0);
      //   }
      100% {
         opacity: 1;
         transform: translate3d(0%, 0, 0);
      }
   }
  //   40% {
  //      opacity: 1;
  //     transform: translate3d(50%, 0, 0);
  //   }
  100% {
    opacity: 1;
    transform: translate3d(0%, 0, 0);
  }
}

   .slide1 {
      animation: animate1 200ms linear;
   }
.slide1 {
  animation: animate1 200ms linear;
}

   .slide2 {
      animation: animate2 200ms linear;
   }
.slide2 {
  animation: animate2 200ms linear;
}

   .line {
      @include themify() {
         background: themed("divi_line");
      }
   }
.line {
  @include themify() {
    background: themed("divi_line");
  }
}

   ::v-deep .contract-header {
      @include themify() {
         background: themed("main_background");
      }
   }
::v-deep .contract-header {
  @include themify() {
    background: themed("main_background");
  }
}

   .tabBackground1 {
      @include themify() {
         border: 1px solid themed("border_color1");
      }
   }
.tabBackground1 {
  @include themify() {
    border: 1px solid themed("border_color1");
  }
}

   .shadow {
      bottom: 108px;
      box-sizing: border-box;
   }
</style>
.shadow {
  bottom: 108px;
  box-sizing: border-box;
}
</style>