1

jhzh

2024-10-21 153962b949e70fb7a694f7d14ec630d6bdafa1aa

 src/page/TtrendDetails/index.vue

@@ -13,32 +13,17 @@
                    @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"
    />
      <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')"
      >
         <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')"
      >
         <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>
@@ -47,10 +32,7 @@
      <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'"
            >
                  <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">
@@ -64,11 +46,9 @@
                    )
                  : "--"
              }}
              <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
              >
                }}%</span>
            </p>
            <p class="text-grey mt-10">
              {{ $t("标记价格") }} {{ quote.open || "--" }}
@@ -102,14 +82,8 @@
      </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"
        />
            <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 区域-->
@@ -121,17 +95,12 @@
                <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 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="{
                        <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,8 +109,7 @@
                      '%,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">{{
                    fixDate(item.amount, $i18n) || "--"
@@ -159,11 +127,8 @@
                    <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 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,8 +137,7 @@
                      '%,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">{{
                    fixDate(item.amount, $i18n) || "--"
@@ -189,30 +153,19 @@
                <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
                >
                        <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"
              >
                     <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>
                        <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>
@@ -288,23 +241,14 @@
        </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')"
        >
         <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')"
        >
            <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
@@ -316,52 +260,47 @@
        </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 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 {
      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 {
      _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 {
      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 {
@@ -507,9 +446,9 @@
    },
    goHistory() {
      const url =
        this.topIndex / 1 === 1
          ? "perpetualHistory"
          : "deliveryContractHistory";
               this.topIndex / 1 === 1 ?
               "perpetualHistory" :
               "deliveryContractHistory";
      this.$router.push({
        path: `/${url}?symbol=${this.symbol}`,
      });
@@ -538,8 +477,13 @@
    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);
               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() : "";
@@ -554,10 +498,18 @@
      // 委托
      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);
               const {
                  data
               } = evt;
               const {
                  code,
                  data: _data
               } = JSON.parse(data);
        if (code / 1 === 0) {
          let { asks, bids } = _data;
                  let {
                     asks,
                     bids
                  } = _data;
          this.deepBuy = bids;
          this.deepSell = asks;
          asks = asks.sort((prev, next) => prev.price - next.price);
@@ -571,8 +523,13 @@
      // 交易
      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);
               const {
                  data
               } = evt;
               const {
                  code,
                  data: _data
               } = JSON.parse(data);
        if (code / 1 === 0) {
          this.deals = _data.data.slice(0, 17);
        }
@@ -626,7 +583,9 @@
          this.order_no = data.order_no;
          _getBalance().then((data) => {
            // 刷新余额
            this.$store.commit("user/SET_USERINFO", { balance: data.money });
                     this.$store.commit("user/SET_USERINFO", {
                        balance: data.money
                     });
          });
          _futrueOrderDetail(data.order_no).then((data) => {
            this.detailData = data;
@@ -696,7 +655,9 @@
  },
  beforeRouteEnter(to, from, next) {
    const {
      params: { symbol },
            params: {
               symbol
            },
    } = to;
    console.log(symbol);
    next((vm) => {