1

jhzh

2024-10-21 153962b949e70fb7a694f7d14ec630d6bdafa1aa

 src/page/TtrendDetails/index.vue

@@ -1,7 +1,7 @@
<template>
  <div class="trend-detail pb-90 mainBackground">
    <!-- 头部 -->
    <!-- <div class="w-full h-88 flex items-center justify-between px-32 box-border">
   <div class="trend-detail pb-90 mainBackground">
      <!-- 头部 -->
      <!-- <div class="w-full h-88 flex items-center justify-between px-32 box-border">
            <div class="flex items-center w-full" @click="onRoute('/quotes?active=3')">
                <img src="@/assets/image/assets-center/convert.png" class="w-38 h-38" />
                <p class="font-38 font-600 ml-10">{{quote.name}}</p>
@@ -13,48 +13,30 @@
                    @click="goHistory" />
            </div>
        </div> -->
    <trade-head
      @openRecord="openRecord"
      :backFunc="() => $router.push('/')"
      :symbol="symbol=='mother'?'ORBITAL':(symbol=='zkp'?'ZYD':(symbol=='dia'?'DEA':(symbol=='xeta'?'AXFD':(symbol=='og'?'SMK':(symbol=='fil'?'FPP':symbol.toUpperCase())))))"
      :islevel="true"
      @update-coin="onUpdate"
      @data="quote = $event"
      :title="$t('永续')"
      @changeLine="onChangeLine"
      :isReturn="isReturn"
      :kineType="kineType"
      :tabIndex="tab"
    />
    <div class="flex justify-between px-32 pt-40" v-if="!kineType">
      <div
        class="w-368 h-80 mr-32 flex justify-center items-center rounded box-border tabBtn"
        :class="tab === '1' ? 'activeBtn' : ''"
        @click="onTab('1')"
      >
        {{ $t("永续合约") }}
      </div>
      <div
        class="w-368 h-80 flex justify-center items-center rounded box-border tabBtn"
        :class="tab === '2' ? 'activeBtn' : ''"
        @click="onTab('2')"
      >
        {{ $t("期权合约") }}
      </div>
    </div>
    <!-- 数据区 -->
    <div :class="{ slide2: animated1, slide1: animated2 }">
      <div>
        <div class="flex flex-1 px-32 mt-40">
          <div class="flex flex-col font-22">
            <p
              class="font-70 font-600"
              :class="quote.change_ratio > 0 ? 'text-green' : 'text-red'"
            >
              {{ quote.close || "--" }}
            </p>
            <p class="font-22 mt-10 textColor">
              ≈ {{ currency.currency_symbol
      <trade-head @openRecord="openRecord" :backFunc="() => $router.push('/')"
         :symbol="symbol=='mother'?'ORBITAL':(symbol=='zkp'?'ZYD':(symbol=='dia'?'DEA':(symbol=='xeta'?'AXFD':(symbol=='og'?'SMK':(symbol=='fil'?'FPP':(symbol=='ethw'?'EGT':(symbol=='gas'?'ASK':(symbol=='axs'?'JKRT':symbol.toUpperCase()))))))))"
         :islevel="true" @update-coin="onUpdate" @data="quote = $event" :title="$t('永续')" @changeLine="onChangeLine"
         :isReturn="isReturn" :kineType="kineType" :tabIndex="tab" />
      <div class="flex justify-between px-32 pt-40" v-if="!kineType">
         <div class="w-368 h-80 mr-32 flex justify-center items-center rounded box-border tabBtn"
            :class="tab === '1' ? 'activeBtn' : ''" @click="onTab('1')">
            {{ $t("永续合约") }}
         </div>
         <div class="w-368 h-80 flex justify-center items-center rounded box-border tabBtn"
            :class="tab === '2' ? 'activeBtn' : ''" @click="onTab('2')">
            {{ $t("期权合约") }}
         </div>
      </div>
      <!-- 数据区 -->
      <div :class="{ slide2: animated1, slide1: animated2 }">
         <div>
            <div class="flex flex-1 px-32 mt-40">
               <div class="flex flex-col font-22">
                  <p class="font-70 font-600" :class="quote.change_ratio > 0 ? 'text-green' : 'text-red'">
                     {{ quote.close || "--" }}
                  </p>
                  <p class="font-22 mt-10 textColor">
                     ≈ {{ currency.currency_symbol
              }}{{
                quote.close
                  ? (quote.close * currency.rate).toFixed(
@@ -64,74 +46,61 @@
                    )
                  : "--"
              }}
              <span :class="quote.change_ratio > 0 ? 'text-green' : 'text-red'"
                >{{
                     <span :class="quote.change_ratio > 0 ? 'text-green' : 'text-red'">{{
                  quote.change_ratio || (quote.change_ratio === 0 ? 0 : "--")
                }}%</span
              >
            </p>
            <p class="text-grey mt-10">
              {{ $t("标记价格") }} {{ quote.open || "--" }}
            </p>
          </div>
          <div class="flex flex-wrap flex-1 justify-end font-22">
            <div class="flex w-1/2 flex-col justify-between w-177">
              <p class="text-grey">{{ $t("24h最高价") }}</p>
              <p class="textColor">{{ quote.high || "--" }}</p>
            </div>
            <div class="flex w-1/2 flex-col justify-between w-177">
              <p class="text-grey">
                {{ $t("24h成交量") }}( {{ symbol | _symbolName() }})
              </p>
              <p class="textColor">
                {{ fixDate(quote.amount * 1, $i18n) || "--" }}
              </p>
            </div>
            <div class="flex w-1/2 flex-col justify-between w-177 mt-20">
              <p class="text-grey">{{ $t("24h最低价") }}</p>
              <p class="textColor">{{ quote.low || "--" }}</p>
            </div>
            <div class="flex w-1/2 flex-col justify-between w-177 mt-20">
              <p class="text-grey">{{ $t("24h成交额(USDT)") }}</p>
              <p class="textColor">
                {{ (quote.volume * 1).toFixed(2) || "--" }}
              </p>
            </div>
          </div>
        </div>
      </div>
      <!-- k line-->
      <div class="mt-35 h-482-px">
        <kline-charts
          :update-key="updateKey"
          :update-data="quote"
          :isChangeLine="isChangeLine"
          :symbol="symbol"
          v-if="symbol"
          @updataLine="isChangeLine = false"
        />
      </div>
      <div class="w-full h-20 greyBg"></div>
      <!-- tab 区域-->
      <div class="pb-180 tabContent">
        <van-tabs v-model="active">
          <van-tab :title="$t('委托订单')" name="1">
            <div class="flex px-32 justify-between px-32">
              <ul class="flex flex-col flex-1 mr-20">
                <li class="font-28 text-grey mt-30 mb-15 w-full">
                  <p>{{ $t("买入") }}</p>
                  <p class="flex justify-between items-cener font-22">
                    <span style="margin-right: -10px"
                      >{{ $t("价格") }}(USDT)</span
                    >
                    <span>{{ $t("数量") }}({{ symbol | _symbolName() }})</span>
                  </p>
                </li>
                <li
                  v-for="(item, index) in bids"
                  :key="index"
                  class="flex justify-between font-26 py-15"
                  :style="{
                }}%</span>
                  </p>
                  <p class="text-grey mt-10">
                     {{ $t("标记价格") }} {{ quote.open || "--" }}
                  </p>
               </div>
               <div class="flex flex-wrap flex-1 justify-end font-22">
                  <div class="flex w-1/2 flex-col justify-between w-177">
                     <p class="text-grey">{{ $t("24h最高价") }}</p>
                     <p class="textColor">{{ quote.high || "--" }}</p>
                  </div>
                  <div class="flex w-1/2 flex-col justify-between w-177">
                     <p class="text-grey">
                        {{ $t("24h成交量") }}( {{ symbol | _symbolName() }})
                     </p>
                     <p class="textColor">
                        {{ fixDate(quote.amount * 1, $i18n) || "--" }}
                     </p>
                  </div>
                  <div class="flex w-1/2 flex-col justify-between w-177 mt-20">
                     <p class="text-grey">{{ $t("24h最低价") }}</p>
                     <p class="textColor">{{ quote.low || "--" }}</p>
                  </div>
                  <div class="flex w-1/2 flex-col justify-between w-177 mt-20">
                     <p class="text-grey">{{ $t("24h成交额(USDT)") }}</p>
                     <p class="textColor">
                        {{ (quote.volume * 1).toFixed(2) || "--" }}
                     </p>
                  </div>
               </div>
            </div>
         </div>
         <!-- k line-->
         <div class="mt-35 h-482-px">
            <kline-charts :update-key="updateKey" :update-data="quote" :isChangeLine="isChangeLine" :symbol="symbol"
               v-if="symbol" @updataLine="isChangeLine = false" />
         </div>
         <div class="w-full h-20 greyBg"></div>
         <!-- tab 区域-->
         <div class="pb-180 tabContent">
            <van-tabs v-model="active">
               <van-tab :title="$t('委托订单')" name="1">
                  <div class="flex px-32 justify-between px-32">
                     <ul class="flex flex-col flex-1 mr-20">
                        <li class="font-28 text-grey mt-30 mb-15 w-full">
                           <p>{{ $t("买入") }}</p>
                           <p class="flex justify-between items-cener font-22">
                              <span style="margin-right: -10px">{{ $t("价格") }}(USDT)</span>
                              <span>{{ $t("数量") }}({{ symbol | _symbolName() }})</span>
                           </p>
                        </li>
                        <li v-for="(item, index) in bids" :key="index"
                           class="flex justify-between font-26 py-15" :style="{
                    background:
                      `linear-gradient(to left,${
                        theme == 'dark' ? '#121212' : '#ffffff'
@@ -140,30 +109,26 @@
                      '%,rgba(94,186,137,.1) ' +
                      (item.amount / bids[bids.length - 1].amount) * 100 +
                      '%,rgba(94,186,137,.1) 100%)',
                  }"
                >
                  <span class="textColor">{{ item.price || "--" }}</span>
                  <span v-if="symbol == 'shib'" class="text-green">{{
                  }">
                           <span class="textColor">{{ item.price || "--" }}</span>
                           <span v-if="symbol == 'shib'" class="text-green">{{
                    fixDate(item.amount, $i18n) || "--"
                  }}</span>
                  <span v-else class="text-green">{{
                           <span v-else class="text-green">{{
                    item.amount || "--"
                  }}</span>
                </li>
              </ul>
              <ul class="flex-1 flex flex-col ml-20">
                <li class="font-28 text-grey mt-30 mb-15 w-full">
                  <p>{{ $t("卖出") }}</p>
                  <p class="flex justify-between items-center font-22">
                    <span class="-ml-5">{{ $t("价格") }}(USDT)</span>
                    <span>{{ $t("数量") }}({{ symbol | _symbolName() }})</span>
                  </p>
                </li>
                <li
                  v-for="(item, index) in asks"
                  :key="index"
                  class="flex justify-between font-26 py-15"
                  :style="{
                        </li>
                     </ul>
                     <ul class="flex-1 flex flex-col ml-20">
                        <li class="font-28 text-grey mt-30 mb-15 w-full">
                           <p>{{ $t("卖出") }}</p>
                           <p class="flex justify-between items-center font-22">
                              <span class="-ml-5">{{ $t("价格") }}(USDT)</span>
                              <span>{{ $t("数量") }}({{ symbol | _symbolName() }})</span>
                           </p>
                        </li>
                        <li v-for="(item, index) in asks" :key="index"
                           class="flex justify-between font-26 py-15" :style="{
                    background:
                      `linear-gradient(to left,${
                        theme == 'dark' ? '#121212' : '#ffffff'
@@ -172,69 +137,57 @@
                      '%,rgba(246,70,93,.1) ' +
                      (item.amount / asks[asks.length - 1].amount) * 100 +
                      '%,rgba(246,70,93,.1) 100%)',
                  }"
                >
                  <span class="textColor">{{ item.price || "--" }}</span>
                  <span v-if="symbol == 'shib'" class="text-red">{{
                  }">
                           <span class="textColor">{{ item.price || "--" }}</span>
                           <span v-if="symbol == 'shib'" class="text-red">{{
                    fixDate(item.amount, $i18n) || "--"
                  }}</span>
                  <span v-else class="text-red">{{ item.amount || "--" }}</span>
                </li>
              </ul>
            </div>
          </van-tab>
          <van-tab :title="$t('最新交易')" name="2">
            <ul class="px-32 font-28 text-grey">
              <li class="flex justify-between mt-30">
                <span class="flex-1">{{ $t("时间") }}</span>
                <span class="flex-1">{{ $t("方向") }}</span>
                <span class="flex-1">{{ $t("价格") }}(USDT)</span>
                <span class="flex-1 flex justify-center"
                  >{{ $t("数量") }}({{ symbol.toUpperCase() }})</span
                >
              </li>
              <li
                v-for="(item, index) in deals"
                :key="item.ts + item.price + item.amount || index"
                class="flex justify-between mt-30"
              >
                <span class="flex-1">{{
                           <span v-else class="text-red">{{ item.amount || "--" }}</span>
                        </li>
                     </ul>
                  </div>
               </van-tab>
               <van-tab :title="$t('最新交易')" name="2">
                  <ul class="px-32 font-28 text-grey">
                     <li class="flex justify-between mt-30">
                        <span class="flex-1">{{ $t("时间") }}</span>
                        <span class="flex-1">{{ $t("方向") }}</span>
                        <span class="flex-1">{{ $t("价格") }}(USDT)</span>
                        <span
                           class="flex-1 flex justify-center">{{ $t("数量") }}({{ symbol.toUpperCase() }})</span>
                     </li>
                     <li v-for="(item, index) in deals" :key="item.ts + item.price + item.amount || index"
                        class="flex justify-between mt-30">
                        <span class="flex-1">{{
                  item.current_time ? item.current_time : "--"
                }}</span>
                <span
                  :class="item.direction === 'buy' ? 'text-green' : 'text-red'"
                  class="flex-1"
                  >{{
                        <span :class="item.direction === 'buy' ? 'text-green' : 'text-red'" class="flex-1">{{
                    item.direction === "buy" ? $t("买入") : $t("卖出")
                  }}</span
                >
                <span
                  :class="item.direction === 'buy' ? 'text-green' : 'text-red'"
                  class="flex-1 flex-justify-center"
                  >{{ item.price || "--" }}</span
                >
                <span class="flex-1 flex justify-center">{{
                  }}</span>
                        <span :class="item.direction === 'buy' ? 'text-green' : 'text-red'"
                           class="flex-1 flex-justify-center">{{ item.price || "--" }}</span>
                        <span class="flex-1 flex justify-center">{{
                  item.amount || "--"
                }}</span>
              </li>
            </ul>
          </van-tab>
          <van-tab :title="$t('深度图')" name="3">
            <div class="buy-sell-box">
              <div class="buy-item">
                <div class="bg-line"></div>
                {{ $t("买盘") }}
              </div>
              <div class="sell-item">
                <div class="bg-line"></div>
                {{ $t("卖盘") }}
              </div>
            </div>
            <div class="deep-chart-box">
              <deep-chart :deepBuy="deepBuy" :deepSell="deepSell"></deep-chart>
            </div>
          </van-tab>
          <!-- <van-tab :title="$t('数据分析')" name="4">
                     </li>
                  </ul>
               </van-tab>
               <van-tab :title="$t('深度图')" name="3">
                  <div class="buy-sell-box">
                     <div class="buy-item">
                        <div class="bg-line"></div>
                        {{ $t("买盘") }}
                     </div>
                     <div class="sell-item">
                        <div class="bg-line"></div>
                        {{ $t("卖盘") }}
                     </div>
                  </div>
                  <div class="deep-chart-box">
                     <deep-chart :deepBuy="deepBuy" :deepSell="deepSell"></deep-chart>
                  </div>
               </van-tab>
               <!-- <van-tab :title="$t('数据分析')" name="4">
                        <div class="capital-box">
                            <div class="capital-flows">
                                <span class="title">资金流向分析</span><van-icon name="warning-o" />
@@ -277,7 +230,7 @@
                            </div>
                        </div>
                    </van-tab> -->
          <!-- <van-tab :title="$t('币种简介')" name="3" class="border-t-color" v-if="this.$te(`${symbol}简介`)">
               <!-- <van-tab :title="$t('币种简介')" name="3" class="border-t-color" v-if="this.$te(`${symbol}简介`)">
                        <div class="px-20 py-20 font-40 text-grey">
                            {{ $t('关于名称', { 'symbol': symbol.toUpperCase() }) }}
                        </div>
@@ -285,715 +238,723 @@
                            {{ $t(`${symbol}简介`, { 'symbol': symbol.toUpperCase() }) }}
                        </div>
                    </van-tab> -->
        </van-tabs>
      </div>
      <!-- 按钮区 -->
      <div
        class="flex pl-40 pt-11 pb-11 pr-32 text-white justify-between fixed bottom-108 w-full box-border h-90-px z-10 buttonSafe"
        v-if="!kineType"
        :class="theme == 'dark' ? 'bg-night1' : 'bg-grey'"
      >
        <div
          class="flex flex-col mx-30 items-center"
          @click="onRoute('/exchangeRate')"
        >
          <img src="@/assets/image/icon-rate.png" class="w-38 h-38" />
          <p class="font-25 text-grey mt-8 text-center">{{ $t("汇率") }}</p>
        </div>
        <div
          ref="toBuy"
          class="w-540 h-88 bg-green flex justify-center items-center rounded-lg"
          @click="onSubmit('buy')"
        >
          {{ tab == 1 ? $t("交易") : $t("交易") }}
        </div>
        <!-- <div
            </van-tabs>
         </div>
         <!-- 按钮区 -->
         <div class="flex pl-40 pt-11 pb-11 pr-32 text-white justify-between fixed bottom-108 w-full box-border h-90-px z-10 buttonSafe"
            v-if="!kineType" :class="theme == 'dark' ? 'bg-night1' : 'bg-grey'">
            <div class="flex flex-col mx-30 items-center" @click="onRoute('/exchangeRate')">
               <img src="@/assets/image/icon-rate.png" class="w-38 h-38" />
               <p class="font-25 text-grey mt-8 text-center">{{ $t("汇率") }}</p>
            </div>
            <div ref="toBuy" class="w-540 h-88 bg-green flex justify-center items-center rounded-lg"
               @click="onSubmit('buy')">
               {{ tab == 1 ? $t("交易") : $t("交易") }}
            </div>
            <!-- <div
          ref="toSell"
          class="w-270 h-88 bg-red flex justify-center items-center rounded-lg"
          @click="onSubmit('sell')"
        >
          {{ tab == 1 ? $t("开空") : $t("买空") }}
        </div> -->
      </div>
    </div>
    <van-popup
      v-model="show"
      class="rounded-2xl"
      :key="initFutrue.session_token"
    >
      <popup-confirm-order
        :paras="initFutrue.para"
        :symbol="symbol"
        :direction="direction"
        :balance="initFutrue.amount"
        :price="quote.close"
        @close="onClose"
        @confirm="onOrderConfirm"
        v-if="popType === 'confirm'"
      />
      <popup-delivery
        showBtns
        :detailData="detailData"
        :key="detailData.order_no"
        @close="onClose"
        @continueToBuy="order()"
        @timeEnd="handleTimeEnd"
        :price="quote.close"
        v-else
      />
    </van-popup>
  </div>
         </div>
      </div>
      <van-popup v-model="show" class="rounded-2xl" :key="initFutrue.session_token">
         <popup-confirm-order :paras="initFutrue.para" :symbol="symbol" :direction="direction"
            :balance="initFutrue.amount" :price="quote.close" @close="onClose" @confirm="onOrderConfirm"
            v-if="popType === 'confirm'" />
         <popup-delivery showBtns :detailData="detailData" :key="detailData.order_no" @close="onClose"
            @continueToBuy="order()" @timeEnd="handleTimeEnd" :price="quote.close" v-else />
      </van-popup>
   </div>
</template>
<script>
import { Tab, Tabs, Popup } from "vant";
import TradeHead from "@/components/trade-head/index.vue";
import KlineCharts from "@/components/kline-charts";
import deepChart from "@/components/deepChart";
import pieChart from "@/components/pieChart";
import inflowKline from "@/components/inflow-kline";
import cylinderChart from "@/components/cylinderChart";
import { _getHomeList, _collect, _deleteCollect } from "@/API/home.api";
import {
  _getBalance,
  _futrueOrder,
  _futrueOrderInit,
  _futrueOrderDetail,
} from "@/API/trade.api";
import { mapGetters } from "vuex";
import { fixDate } from "@/utils/utis";
import { WS_URL } from "@/config";
import PopupDelivery from "@/components/popup-delivery";
import PopupConfirmOrder from "@/components/popup-confirm-order";
export default {
  name: "TrendDetails",
  components: {
    [Tabs.name]: Tabs,
    [Tab.name]: Tab,
    [Popup.name]: Popup,
    KlineCharts,
    PopupDelivery,
    PopupConfirmOrder,
    TradeHead,
    deepChart,
    pieChart,
    inflowKline,
    cylinderChart,
  },
  data() {
    const arr = [];
    for (let i = 0; i < 17; i++) {
      arr.push({
        id: i,
      });
    }
    return {
      show: false,
      direction: "buy",
      initFutrue: {},
      detailData: {},
      price: "",
      popType: "confirm", // confirm / counting
      fixDate,
      tab: "1", // 顶部标签
      symbol: "",
      quoteData: [],
      quote: {},
      active: 1,
      asks: arr, // 卖
      bids: arr, // 买
      deals: arr, // 交易
      sockets: {
        quote: null,
        deals: null,
        askBid: null,
      },
      animated1: false,
      animated2: false,
      updateKey: 1,
      collected: "0", // 是否自选
      maxSell: 0, // 卖单最大
      maxBuy: 0, // 买单最大
      order_no: "",
      timer: null,
      isChangeLine: false,
      isReturn: true, //是否有返回
      kineType: "",
      // updateData: {}
      deepBuy: [],
      deepSell: [],
      fromPath: "",
    };
  },
  computed: {
    ...mapGetters({
      currency: "home/currency",
      userInfo: "user/userInfo",
      theme: "home/theme",
    }),
  },
  mounted() {
    //this.continueOrder()
    this.kineType = this.$route.query.kineType;
  },
  created() {},
  watch: {
    active(val) {
      // tab切换
      if (val / 1 === 1 || val / 1 === 3) {
        this.sockets.deals && this.sockets.deals.close();
        this.sockets.deals = null;
        if (this.symbol) {
          // 刚进来可能是null
          this.startAskBidSocket();
        }
      } else {
        this.sockets.askBid && this.sockets.askBid.close();
        this.sockets.askBid = null;
        this.startDealsSocket();
      }
    },
    symbol() {
      this.closeSocket();
    },
  },
  methods: {
    onChangeLine() {
      this.isChangeLine = true;
    },
    continueOrder() {
      let direction = this.$route.query.direction;
      if (direction) {
        this.symbol = this.$route.params.symbol;
        this.tab = "2";
        console.log(this.tab);
        this.onSubmit(direction);
      }
    },
    order() {
      this.onSubmit(this.direction);
    },
    onTab(e) {
      this.tab = e;
      // this.$router.go()
      if (e == 1) {
        this.animated1 = true;
        this.timer = setTimeout(() => {
          this.animated1 = false;
          clearTimeout(this.timer);
        }, 200);
      } else {
        this.animated2 = true;
        this.timer = setTimeout(() => {
          this.animated2 = false;
          clearTimeout(this.timer);
        }, 200);
      }
    },
   import {
      Tab,
      Tabs,
      Popup
   } from "vant";
   import TradeHead from "@/components/trade-head/index.vue";
   import KlineCharts from "@/components/kline-charts";
   import deepChart from "@/components/deepChart";
   import pieChart from "@/components/pieChart";
   import inflowKline from "@/components/inflow-kline";
   import cylinderChart from "@/components/cylinderChart";
   import {
      _getHomeList,
      _collect,
      _deleteCollect
   } from "@/API/home.api";
   import {
      _getBalance,
      _futrueOrder,
      _futrueOrderInit,
      _futrueOrderDetail,
   } from "@/API/trade.api";
   import {
      mapGetters
   } from "vuex";
   import {
      fixDate
   } from "@/utils/utis";
   import {
      WS_URL
   } from "@/config";
   import PopupDelivery from "@/components/popup-delivery";
   import PopupConfirmOrder from "@/components/popup-confirm-order";
   export default {
      name: "TrendDetails",
      components: {
         [Tabs.name]: Tabs,
         [Tab.name]: Tab,
         [Popup.name]: Popup,
         KlineCharts,
         PopupDelivery,
         PopupConfirmOrder,
         TradeHead,
         deepChart,
         pieChart,
         inflowKline,
         cylinderChart,
      },
      data() {
         const arr = [];
         for (let i = 0; i < 17; i++) {
            arr.push({
               id: i,
            });
         }
         return {
            show: false,
            direction: "buy",
            initFutrue: {},
            detailData: {},
            price: "",
            popType: "confirm", // confirm / counting
            fixDate,
            tab: "1", // 顶部标签
            symbol: "",
            quoteData: [],
            quote: {},
            active: 1,
            asks: arr, // 卖
            bids: arr, // 买
            deals: arr, // 交易
            sockets: {
               quote: null,
               deals: null,
               askBid: null,
            },
            animated1: false,
            animated2: false,
            updateKey: 1,
            collected: "0", // 是否自选
            maxSell: 0, // 卖单最大
            maxBuy: 0, // 买单最大
            order_no: "",
            timer: null,
            isChangeLine: false,
            isReturn: true, //是否有返回
            kineType: "",
            // updateData: {}
            deepBuy: [],
            deepSell: [],
            fromPath: "",
         };
      },
      computed: {
         ...mapGetters({
            currency: "home/currency",
            userInfo: "user/userInfo",
            theme: "home/theme",
         }),
      },
      mounted() {
         //this.continueOrder()
         this.kineType = this.$route.query.kineType;
      },
      created() {},
      watch: {
         active(val) {
            // tab切换
            if (val / 1 === 1 || val / 1 === 3) {
               this.sockets.deals && this.sockets.deals.close();
               this.sockets.deals = null;
               if (this.symbol) {
                  // 刚进来可能是null
                  this.startAskBidSocket();
               }
            } else {
               this.sockets.askBid && this.sockets.askBid.close();
               this.sockets.askBid = null;
               this.startDealsSocket();
            }
         },
         symbol() {
            this.closeSocket();
         },
      },
      methods: {
         onChangeLine() {
            this.isChangeLine = true;
         },
         continueOrder() {
            let direction = this.$route.query.direction;
            if (direction) {
               this.symbol = this.$route.params.symbol;
               this.tab = "2";
               console.log(this.tab);
               this.onSubmit(direction);
            }
         },
         order() {
            this.onSubmit(this.direction);
         },
         onTab(e) {
            this.tab = e;
            // this.$router.go()
            if (e == 1) {
               this.animated1 = true;
               this.timer = setTimeout(() => {
                  this.animated1 = false;
                  clearTimeout(this.timer);
               }, 200);
            } else {
               this.animated2 = true;
               this.timer = setTimeout(() => {
                  this.animated2 = false;
                  clearTimeout(this.timer);
               }, 200);
            }
         },

    onCollect() {
      // 收藏，取消收藏
      let _api = _collect;
      if (this.collected === "1") {
        _api = _deleteCollect;
      }
      _api(this.symbol).then(() => {
        this.collected = this.collected === "1" ? "0" : "1";
        if (this.collected === "1") {
          this.$toast.success(this.$t("收藏成功"));
        } else {
          this.$toast.success(this.$t("取消收藏"));
        }
      });
    },
    goHistory() {
      const url =
        this.topIndex / 1 === 1
          ? "perpetualHistory"
          : "deliveryContractHistory";
      this.$router.push({
        path: `/${url}?symbol=${this.symbol}`,
      });
    },
    fetchData() {
      this.closeSocket();
      _getHomeList(this.symbol).then((data) => {
        // console.log(data[0])
        this.quote = data[0];
        this.$nextTick(() => {
          if (!this.sockets.quote && this.symbol) {
            this.startQuoteScoket();
          }
         onCollect() {
            // 收藏，取消收藏
            let _api = _collect;
            if (this.collected === "1") {
               _api = _deleteCollect;
            }
            _api(this.symbol).then(() => {
               this.collected = this.collected === "1" ? "0" : "1";
               if (this.collected === "1") {
                  this.$toast.success(this.$t("收藏成功"));
               } else {
                  this.$toast.success(this.$t("取消收藏"));
               }
            });
         },
         goHistory() {
            const url =
               this.topIndex / 1 === 1 ?
               "perpetualHistory" :
               "deliveryContractHistory";
            this.$router.push({
               path: `/${url}?symbol=${this.symbol}`,
            });
         },
         fetchData() {
            this.closeSocket();
            _getHomeList(this.symbol).then((data) => {
               // console.log(data[0])
               this.quote = data[0];
               this.$nextTick(() => {
                  if (!this.sockets.quote && this.symbol) {
                     this.startQuoteScoket();
                  }

          if (
            (this.tab === "1" || this.tab === "3") &&
            !this.sockets.askBid &&
            this.symbol
          ) {
            this.startAskBidSocket();
          }
        });
        // this.startDealsSocket()
      });
    },
    startQuoteScoket() {
      this.sockets.quote = new WebSocket(`${WS_URL}/1/${this.symbol}`);
      this.sockets.quote.onmessage = (evt) => {
        const { data } = evt;
        const { code, data: _data } = JSON.parse(data);
        if (code / 1 === 0) {
          this.quote = _data[0];
          let str = _data[0] ? _data[0].close.toString() : "";
          if (str.indexOf(".") != -1) {
            this.coinLength = str.split(".")[1].length;
          }
          this.updateKey++;
        }
      };
    },
    startAskBidSocket() {
      // 委托
      this.sockets.askBid = new WebSocket(`${WS_URL}/3/${this.symbol}`);
      this.sockets.askBid.onmessage = (evt) => {
        const { data } = evt;
        const { code, data: _data } = JSON.parse(data);
        if (code / 1 === 0) {
          let { asks, bids } = _data;
          this.deepBuy = bids;
          this.deepSell = asks;
          asks = asks.sort((prev, next) => prev.price - next.price);
          bids = bids.sort((prev, next) => prev.price - next.price);
          this.asks = asks.slice(0, 17);
          this.bids = bids.reverse().slice(0, 17);
        }
      };
    },
    startDealsSocket() {
      // 交易
      this.sockets.deals = new WebSocket(`${WS_URL}/2/${this.symbol}`);
      this.sockets.deals.onmessage = (evt) => {
        const { data } = evt;
        const { code, data: _data } = JSON.parse(data);
        if (code / 1 === 0) {
          this.deals = _data.data.slice(0, 17);
        }
      };
    },
    onRoute(path) {
      // 跳转汇率页面
      this.$router.push(path);
    },
    onSubmit(direction) {
      // TODO: 返回
      if (this.tab === "2") {
        this.popType = "confirm";
        this.direction = direction;
        _futrueOrderInit(this.symbol).then((data) => {
          this.initFutrue = data;
          this.show = true;
        });
        return;
      } else {
        let currentType = direction == "buy" ? "long" : "short";
        this.$router.push(
          `/perpetualContract/${this.symbol}?currentType=${currentType}`
        );
      }
    },
    onClose() {
      this.show = false;
    },
    handleTimeEnd() {
      _futrueOrderDetail(this.order_no).then((data) => {
        clearTimeout(this.timeout);
        this.detailData = data;
        if (data.state !== "created") {
          this.timeout = setTimeout(() => {
            this.handleTimeEnd();
          }, 1000);
        }
      });
    },
    onOrderConfirm(e) {
      // 确认订单
      _futrueOrder({
        ...e,
        symbol: this.symbol,
        direction: this.direction,
        session_token: this.initFutrue.session_token,
      })
        .then((data) => {
          // console.log(data)
          this.order_no = data.order_no;
          _getBalance().then((data) => {
            // 刷新余额
            this.$store.commit("user/SET_USERINFO", { balance: data.money });
          });
          _futrueOrderDetail(data.order_no).then((data) => {
            this.detailData = data;
            this.popType = "";
          });
        })
        .catch(() => {
          setTimeout(() => {
            _futrueOrderInit(this.symbol).then((data) => {
              this.order_no = "";
              this.initFutrue = data;
            });
          }, 1000);
        });
    },
    closeSocket() {
      this.sockets.quote && this.sockets.quote.close();
      this.sockets.deals && this.sockets.deals.close();
      this.sockets.askBid && this.sockets.askBid.close();
      this.sockets.quote = null;
      this.sockets.deals = null;
      this.sockets.askBid = null;
    },
    onUpdate(symbol) {
      // 更新
      this.closeSocket();
      this.symbol = symbol;
      this.fetchData();
    },
    openRecord() {
      if (this.fromPath == "Trade") {
        this.$router.push("/tradeRecord/" + this.symbol);
      } else {
        this.$router.push("/perpetualHistory?symbol=" + this.symbol);
      }
      console.log(this.fromPath);
    },
  },
  activated() {
    // if (!this.sockets.quote && this.symbol) {
    //     this.startQuoteScoket()
    // }
    // if (this.tab === '1' && !this.sockets.askBid && this.symbol) {
    //     this.startAskBidSocket()
    // }
    if (!this.symbol) {
      this.symbol = this.$route.params.symbol;
      this.fetchData();
      this.closeSocket();
    }
    if (this.tab === "2" && !this.sockets.deals && this.symbol) {
      this.startDealsSocket();
    }
    this.continueOrder();
    this.kineType = this.$route.query.kineType;
  },
  deactivated() {
    this.closeSocket();
  },
  beforeDestroy() {
    this.sockets.quote && this.sockets.quote.close();
    this.sockets.deals && this.sockets.deals.close();
    this.sockets.askBid && this.sockets.askBid.close();
    this.sockets.quote = null;
    this.sockets.deals = null;
    this.sockets.askBid = null;
  },
  beforeRouteEnter(to, from, next) {
    const {
      params: { symbol },
    } = to;
    console.log(symbol);
    next((vm) => {
      vm.fromPath = from.name;
      vm.symbol = symbol;
      vm.closeSocket();
      vm.fetchData();
    });
  },
};
                  if (
                     (this.tab === "1" || this.tab === "3") &&
                     !this.sockets.askBid &&
                     this.symbol
                  ) {
                     this.startAskBidSocket();
                  }
               });
               // this.startDealsSocket()
            });
         },
         startQuoteScoket() {
            this.sockets.quote = new WebSocket(`${WS_URL}/1/${this.symbol}`);
            this.sockets.quote.onmessage = (evt) => {
               const {
                  data
               } = evt;
               const {
                  code,
                  data: _data
               } = JSON.parse(data);
               if (code / 1 === 0) {
                  this.quote = _data[0];
                  let str = _data[0] ? _data[0].close.toString() : "";
                  if (str.indexOf(".") != -1) {
                     this.coinLength = str.split(".")[1].length;
                  }
                  this.updateKey++;
               }
            };
         },
         startAskBidSocket() {
            // 委托
            this.sockets.askBid = new WebSocket(`${WS_URL}/3/${this.symbol}`);
            this.sockets.askBid.onmessage = (evt) => {
               const {
                  data
               } = evt;
               const {
                  code,
                  data: _data
               } = JSON.parse(data);
               if (code / 1 === 0) {
                  let {
                     asks,
                     bids
                  } = _data;
                  this.deepBuy = bids;
                  this.deepSell = asks;
                  asks = asks.sort((prev, next) => prev.price - next.price);
                  bids = bids.sort((prev, next) => prev.price - next.price);
                  this.asks = asks.slice(0, 17);
                  this.bids = bids.reverse().slice(0, 17);
               }
            };
         },
         startDealsSocket() {
            // 交易
            this.sockets.deals = new WebSocket(`${WS_URL}/2/${this.symbol}`);
            this.sockets.deals.onmessage = (evt) => {
               const {
                  data
               } = evt;
               const {
                  code,
                  data: _data
               } = JSON.parse(data);
               if (code / 1 === 0) {
                  this.deals = _data.data.slice(0, 17);
               }
            };
         },
         onRoute(path) {
            // 跳转汇率页面
            this.$router.push(path);
         },
         onSubmit(direction) {
            // TODO: 返回
            if (this.tab === "2") {
               this.popType = "confirm";
               this.direction = direction;
               _futrueOrderInit(this.symbol).then((data) => {
                  this.initFutrue = data;
                  this.show = true;
               });
               return;
            } else {
               let currentType = direction == "buy" ? "long" : "short";
               this.$router.push(
                  `/perpetualContract/${this.symbol}?currentType=${currentType}`
               );
            }
         },
         onClose() {
            this.show = false;
         },
         handleTimeEnd() {
            _futrueOrderDetail(this.order_no).then((data) => {
               clearTimeout(this.timeout);
               this.detailData = data;
               if (data.state !== "created") {
                  this.timeout = setTimeout(() => {
                     this.handleTimeEnd();
                  }, 1000);
               }
            });
         },
         onOrderConfirm(e) {
            // 确认订单
            _futrueOrder({
                  ...e,
                  symbol: this.symbol,
                  direction: this.direction,
                  session_token: this.initFutrue.session_token,
               })
               .then((data) => {
                  // console.log(data)
                  this.order_no = data.order_no;
                  _getBalance().then((data) => {
                     // 刷新余额
                     this.$store.commit("user/SET_USERINFO", {
                        balance: data.money
                     });
                  });
                  _futrueOrderDetail(data.order_no).then((data) => {
                     this.detailData = data;
                     this.popType = "";
                  });
               })
               .catch(() => {
                  setTimeout(() => {
                     _futrueOrderInit(this.symbol).then((data) => {
                        this.order_no = "";
                        this.initFutrue = data;
                     });
                  }, 1000);
               });
         },
         closeSocket() {
            this.sockets.quote && this.sockets.quote.close();
            this.sockets.deals && this.sockets.deals.close();
            this.sockets.askBid && this.sockets.askBid.close();
            this.sockets.quote = null;
            this.sockets.deals = null;
            this.sockets.askBid = null;
         },
         onUpdate(symbol) {
            // 更新
            this.closeSocket();
            this.symbol = symbol;
            this.fetchData();
         },
         openRecord() {
            if (this.fromPath == "Trade") {
               this.$router.push("/tradeRecord/" + this.symbol);
            } else {
               this.$router.push("/perpetualHistory?symbol=" + this.symbol);
            }
            console.log(this.fromPath);
         },
      },
      activated() {
         // if (!this.sockets.quote && this.symbol) {
         //     this.startQuoteScoket()
         // }
         // if (this.tab === '1' && !this.sockets.askBid && this.symbol) {
         //     this.startAskBidSocket()
         // }
         if (!this.symbol) {
            this.symbol = this.$route.params.symbol;
            this.fetchData();
            this.closeSocket();
         }
         if (this.tab === "2" && !this.sockets.deals && this.symbol) {
            this.startDealsSocket();
         }
         this.continueOrder();
         this.kineType = this.$route.query.kineType;
      },
      deactivated() {
         this.closeSocket();
      },
      beforeDestroy() {
         this.sockets.quote && this.sockets.quote.close();
         this.sockets.deals && this.sockets.deals.close();
         this.sockets.askBid && this.sockets.askBid.close();
         this.sockets.quote = null;
         this.sockets.deals = null;
         this.sockets.askBid = null;
      },
      beforeRouteEnter(to, from, next) {
         const {
            params: {
               symbol
            },
         } = to;
         console.log(symbol);
         next((vm) => {
            vm.fromPath = from.name;
            vm.symbol = symbol;
            vm.closeSocket();
            vm.fetchData();
         });
      },
   };
</script>
<style lang="scss" scoped>
@import "../../assets/init.scss";
   @import "../../assets/init.scss";

@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;
   }

.tabBtn {
  border: 2px solid #eaedf2;
  border-radius: 9px;
  color: #868d9a;
}
   .tabBtn {
      border: 2px solid #eaedf2;
      border-radius: 9px;
      color: #868d9a;
   }

.activeBtn {
  @include themify() {
    background: themed("btn_main");
  }
   .activeBtn {
      @include themify() {
         background: themed("btn_main");
      }

  color: #fff;
  border: none;
}
      color: #fff;
      border: none;
   }

.pb-180 {
  ::v-deep .van-tab {
    flex: initial;
    padding: 0 32px;
  }
   .pb-180 {
      ::v-deep .van-tab {
         flex: initial;
         padding: 0 32px;
      }

  ::v-deep .van-tab__text--ellipsis {
    padding: 14px 0;
  }
      ::v-deep .van-tab__text--ellipsis {
         padding: 14px 0;
      }

  ::v-deep .van-tabs__line {
    width: 160px;
  }
}
      ::v-deep .van-tabs__line {
         width: 160px;
      }
   }

.buttonSafe {
  bottom: calc(constant(safe-area-inset-bottom));
  bottom: calc(env(safe-area-inset-bottom));
}
   .buttonSafe {
      bottom: calc(constant(safe-area-inset-bottom));
      bottom: calc(env(safe-area-inset-bottom));
   }

.trend-detail {
  .tabBtn {
    @include themify() {
      border: 2px solid themed("border_color");
    }
  }
   .trend-detail {
      .tabBtn {
         @include themify() {
            border: 2px solid themed("border_color");
         }
      }

  ::v-deep .van-tabs__nav {
    @include themify() {
      background: themed("main_background") !important;
    }
  }
      ::v-deep .van-tabs__nav {
         @include themify() {
            background: themed("main_background") !important;
         }
      }

  ::v-deep .van-tab--active {
    @include themify() {
      color: themed("text_color");
    }
  }
      ::v-deep .van-tab--active {
         @include themify() {
            color: themed("text_color");
         }
      }

  ul li {
    @include themify() {
      background: themed("main_background");
    }
  }
      ul li {
         @include themify() {
            background: themed("main_background");
         }
      }

  .activeBtn {
    border: none !important;
  }
}
      .activeBtn {
         border: none !important;
      }
   }

.deep-chart-box {
  padding-left: 30px;
  overflow: hidden;
}
   .deep-chart-box {
      padding-left: 30px;
      overflow: hidden;
   }

.capital-box {
  padding: 30px 30px;
   .capital-box {
      padding: 30px 30px;

  .capital-flows {
    display: flex;
    align-items: center;
      .capital-flows {
         display: flex;
         align-items: center;

    .title {
      color: #ecf0f8;
      font-size: 16px;
      font-weight: bold;
      margin-right: 10px;
      display: flex;
    }
  }
         .title {
            color: #ecf0f8;
            font-size: 16px;
            font-weight: bold;
            margin-right: 10px;
            display: flex;
         }
      }

  .tab-box {
    display: flex;
    flex-wrap: wrap;
    margin-top: 20px;
      .tab-box {
         display: flex;
         flex-wrap: wrap;
         margin-top: 20px;

    .tab-item {
      padding: 15px 22px;
      background: #171a27;
      border-radius: 2px;
      color: #ffffff;
      font-size: 30px;
      margin-right: 30px;
      margin-bottom: 20px;
      font-size: 14px;
    }
  }
         .tab-item {
            padding: 15px 22px;
            background: #171a27;
            border-radius: 2px;
            color: #ffffff;
            font-size: 30px;
            margin-right: 30px;
            margin-bottom: 20px;
            font-size: 14px;
         }
      }

  .pie-box {
    background: #161d2b;
    padding: 50px 0;
  }
      .pie-box {
         background: #161d2b;
         padding: 50px 0;
      }

  .order-box {
    border: 1px dashed #3c3f55;
    border-radius: 3px;
    margin-top: 20px;
    color: #c5cbd8;
      .order-box {
         border: 1px dashed #3c3f55;
         border-radius: 3px;
         margin-top: 20px;
         color: #c5cbd8;

    .order-header {
      display: flex;
    }
         .order-header {
            display: flex;
         }

    .flex-item {
      flex: 1;
      text-align: center;
      padding: 20px 0;
    }
  }
         .flex-item {
            flex: 1;
            text-align: center;
            padding: 20px 0;
         }
      }

  .capital-title {
    padding-top: 30px;
      .capital-title {
         padding-top: 30px;

    .title {
      color: #ecf0f8;
      font-size: 30px;
      font-weight: bold;
      margin-right: 10px;
    }
         .title {
            color: #ecf0f8;
            font-size: 30px;
            font-weight: bold;
            margin-right: 10px;
         }

    .text {
      color: #c5cbd8;
      font-size: 14px;
      margin-top: 10px;
    }
  }
}
         .text {
            color: #c5cbd8;
            font-size: 14px;
            margin-top: 10px;
         }
      }
   }

.buy-sell-box {
  display: flex;
  justify-content: center;
  margin: 30px 0px;
   .buy-sell-box {
      display: flex;
      justify-content: center;
      margin: 30px 0px;

  .buy-item {
    display: flex;
      .buy-item {
         display: flex;

    @include themify() {
      color: themed("text_color");
    }
         @include themify() {
            color: themed("text_color");
         }

    .bg-line {
      width: 40px;
      height: 40px;
      background: #d9001b;
      border-radius: 5px;
      margin-right: 10px;
    }
  }
         .bg-line {
            width: 40px;
            height: 40px;
            background: #d9001b;
            border-radius: 5px;
            margin-right: 10px;
         }
      }

  .sell-item {
    margin-left: 30px;
    display: flex;
      .sell-item {
         margin-left: 30px;
         display: flex;

    @include themify() {
      color: themed("text_color");
    }
         @include themify() {
            color: themed("text_color");
         }

    .bg-line {
      width: 40px;
      height: 40px;
      background: #2ebd85;
      border-radius: 5px;
      margin-right: 10px;
    }
  }
}
         .bg-line {
            width: 40px;
            height: 40px;
            background: #2ebd85;
            border-radius: 5px;
            margin-right: 10px;
         }
      }
   }

.bg-white {
  .capital-flows {
    display: flex;
    align-items: center;
   .bg-white {
      .capital-flows {
         display: flex;
         align-items: center;

    .title {
      color: #000;
      font-size: 16px;
      font-weight: bold;
      margin-right: 10px;
      display: flex;
    }
  }
         .title {
            color: #000;
            font-size: 16px;
            font-weight: bold;
            margin-right: 10px;
            display: flex;
         }
      }

  .tab-box {
    .tab-item {
      background: #f7f8fa;
      color: #000;
      font-size: 14px;
    }
  }
      .tab-box {
         .tab-item {
            background: #f7f8fa;
            color: #000;
            font-size: 14px;
         }
      }

  .pie-box {
    background: #fff;
    padding: 50px 0;
  }
      .pie-box {
         background: #fff;
         padding: 50px 0;
      }

  .order-box {
    border: 1px dashed #000;
    border-radius: 3px;
    margin-top: 20px;
    color: #000;
  }
      .order-box {
         border: 1px dashed #000;
         border-radius: 3px;
         margin-top: 20px;
         color: #000;
      }

  .capital-title {
    padding-top: 30px;
      .capital-title {
         padding-top: 30px;

    .title {
      color: #000;
      font-size: 30px;
      font-weight: bold;
      margin-right: 10px;
    }
         .title {
            color: #000;
            font-size: 30px;
            font-weight: bold;
            margin-right: 10px;
         }

    .text {
      color: #000;
      font-size: 14px;
      margin-top: 10px;
    }
  }
}
         .text {
            color: #000;
            font-size: 14px;
            margin-top: 10px;
         }
      }
   }

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

.tabContent {
  ::v-deep .van-tabs__wrap {
    height: 100% !important;
  }
}
</style>
   .tabContent {
      ::v-deep .van-tabs__wrap {
         height: 100% !important;
      }
   }
</style>