1233

dcc

2024-06-29 e5108083cff1cb9b4df2de3fb845be56ea1622d4

 src/page/trade/index.vue

@@ -1,763 +1,1304 @@
<template>
  <div class="pb-108 no_touch trade">
    <!-- <div class="px-30 pt-20">
            <div class="flex h-88 w-full box-border border-solid-grey rounded-lg">
                <div @click="$router.push('/exchange/exchangePage')"
                    class="font-bold font-32 flex justify-center items-center flex-1">
                    <span class="h-60 lh-60 font-16  px-40 borderColor rounded-lg textColor">{{ $t('闪兑') }}</span>
                </div>
                <div class="font-bold flex font-32 justify-center items-center flex-1">
                    <span class="h-60 lh-60 btnMain px-40 rounded-lg text-white font-16">{{ $t('现货') }}</span>
                </div>
                <div @click="$router.push({ path: '/wantBuy', query: { frompath: `/trade/${symbol}` } })"
                    class="font-bold font-32 flex justify-center items-center flex-1">
                    <span class="h-60 lh-60 font-16  px-40 borderColor rounded-lg textColor">c2c</span>
                </div>
            </div>
        </div> -->
    <!-- :key="symbol"-->
    <!-- 头部区 -->
    <trade-head
      :backFunc="() => $router.push('/')"
      :symbol="symbol"
      :price="price"
      :range="range"
      :isTrade="true"
      @update-coin="onUpdate"
      @data="quote = $event"
    />
   <div class="pb-108 no_touch trade">
      <div class="typebox" style="display: flex;">
         <div :class="typeindex==index?'typebox_box':'typebox_boxa'" @click="typeclick(index)"
            v-for="(item,index) in typelist" :key="index">{{item}}</div>
      </div>
      <div v-if="typeindex==0">
         <trade-head :backFunc="() => $router.push('/')" :symbol="symbol" :newname="newname" :price="price" :range="range"
            :isTrade="true" @update-coin="onUpdate" @data="quote = $event" />

    <div class="trade-buy-sell flex justify-between px-30 py-30">
      <keep-alive>
        <trade-deep-data
          :selectValue="selectValue"
          @getList="getList"
          :showType="showType"
          :symbol="symbol"
          v-if="symbol"
          :price="price"
          class="w-290 mr-30"
        />
      </keep-alive>
      <trade-order-area
        :symbol="symbol"
        :init-open="initOpen"
        :init-close="initClose"
        :price="price"
        @ordered="onOrdered"
      />
    </div>
         <div class="trade-buy-sell flex justify-between px-30 py-30">
            <keep-alive>
               <trade-deep-data :selectValue="selectValue" @getList="getList"  :showType="showType" :symbol="symbol"
                  v-if="symbol" :price="price" class="w-290 mr-30" />
            </keep-alive>
            <trade-order-area :symbol="symbol" :init-open="initOpena" :newname="newname" :init-close="initClose" :price="price"
               @ordered="onOrdereda" />
         </div>

    <!-- 2222  -->
    <!-- <div class="flex k-select-box">
      <div class="mt-20 mb-22 select-box" style="position: relative">
        <div
          class="flex justify-between items-center w-full h-70"
          @click="selectBtn"
        >
          <div class="pl-16 textColor" style="width: 80%">{{ title }}</div>
          <img
            src="@/assets/image/public/grey-select.png"
            alt="select-icon"
            class="w-22 h-11 pr-20"
          />
        </div>
        <div class="option-box" v-show="isShow">
          <div
            class="font-30"
            v-for="(item, index) in sortList"
            :key="index"
            @click="selectItem(item)"
          >
            {{ item.name }}
          </div>
        </div>
      </div>
      <div @click="isSelectShow = true">
        <img
          src="@/assets/image/selectIcon.png"
          alt="warn-icon"
          class="w-36 h-30"
        />
      </div>
    </div> -->
    <!-- <div class="h-16 diviLine"></div> -->
    <div class="list-data">
      <div>
        <div class="flex justify-between pb-20 items-center pt-10">
          <div class="flex pl-30">
            <template>
              <div
                class="px-10 py-10 flex items-center text-grey"
                @click="tabClick('1')"
                :class="tabType == '1' ? 'active-line' : ''"
              >
                {{ $t("当前委托")
         <div class="list-data">
            <div>
               <div class="flex justify-between pb-20 items-center pt-10">
                  <div class="flex pl-30 mar-23">
                     <template>
                        <div class="px-10 py-10 flex items-center text-grey" @click="tabClick('1')"
                           :class="tabType == '1' ? 'active-line' : ''">
                           {{ $t("当前委托")
                }}<span v-if="tabType == '1'">({{ entrustList.length }})</span>
              </div>
              <div
                class="px-10 ml-50 py-10 flex items-center text-grey"
                @click="tabClick('3')"
                :class="tabType == '3' ? 'active-line' : ''"
              >
                {{ $t("历史委托") }}
              </div>
              <div
                class="px-10 py-10 flex items-center ml-50 text-grey"
                @click="tabClick('2')"
                :class="tabType == '2' ? 'active-line' : ''"
              >
                {{ $t("资产") }}
              </div>
            </template>
          </div>
          <img
            src="../../assets/image/public/record.png"
            alt="record-img"
            class="w-32 h-35 pr-30"
            @click="goHistory"
          />
        </div>
      </div>
      <div class="pl-32 pr-32 pb-100" v-if="tabType == '1'">
        <entrust-item
          v-for="item in entrustList"
          :key="item.order_no"
          :entrust="item"
          state="submitted"
          @cancelOrder="cancelOrder"
        />
      </div>
      <div class="pl-32 pr-32 pb-100" v-else-if="tabType == '3'">
        <history-item
          v-for="item in entrustList"
          :key="item.order_no"
          :coinPrice="coinPrice"
          :entrust="item"
          :state="item.state"
          @cancelOrder="cancelOrder"
        />
      </div>
      <div class="pl-32 pr-32" v-else>
        <div class="mb-20 border-b">
          <p class="font-28 text-grey mt-24 mb-42">{{ $t("当前币对资产") }}</p>
          <ul>
            <li
              v-for="item in pairsList"
              :key="item.symbol"
              class="flex justify-between py-10"
            >
              <div class="flex items-center">
                <img
                  :src="
                        </div>
                        <div class="px-10 ml-50 py-10 flex items-center text-grey" @click="tabClick('3')"
                           :class="tabType == '3' ? 'active-line' : ''">
                           {{ $t("历史委托") }}
                        </div>
                        <div class="px-10 py-10 flex items-center ml-50 text-grey" @click="tabClick('2')"
                           :class="tabType == '2' ? 'active-line' : ''">
                           {{ $t("资产") }}
                        </div>
                     </template>
                  </div>
                  <span @click="goHistory">
                     <img src="@/assets/3x/names8.png" alt="record-img" class="w-32 h-35 pr-30" />
                  </span>
               </div>
            </div>
            <div class="pl-32 pr-32 pb-100" v-if="tabType == '1'">
               <entrust-item v-for="item in entrustList" :key="item.order_no" :entrust="item" state="submitted"
                  @cancelOrder="cancelOrder" />
            </div>
            <div class="pl-32 pr-32 pb-100" v-else-if="tabType == '3'">
               <history-item v-for="item in entrustList" :key="item.order_no" :coinPrice="coinPrice"
                  :entrust="item" :state="item.state" @cancelOrder="cancelOrder" />
            </div>
            <div class="pl-32 pr-32" v-else>
               <div class="mb-20 border-b">
                  <p class="font-28 text-grey mt-24 mb-42">{{ $t("当前币对资产") }}</p>
                  <ul>
                     <li v-for="item in pairsList" :key="item.symbol" class="flex justify-between py-10">
                        <div class="flex items-center">
                           <img :src="
                    item.symbol
                      ? `${HOST_URL}/wap/symbol/${item.symbol}.png`
                      : require('@/assets/loading-default.png')
                  "
                  class="w-52 h-52 rounded-full mr-16"
                />
                <p class="flex flex-col">
                  <strong class="font-28 textColor mb-6">{{
                  " class="w-52 h-52 rounded-full mr-16" />
                           <p class="flex flex-col">
                              <strong class="font-28 textColor mb-6">{{
                    item.symbol.toUpperCase()
                  }}</strong>
                  <span class="font-20 text-grey">{{ item.full_name }}</span>
                </p>
              </div>
              <div class="flex flex-col items-end text-grey">
                <strong class="font-28 textColor mb-6">{{
                              <span class="font-20 text-grey">{{ item.full_name }}</span>
                           </p>
                        </div>
                        <div class="flex flex-col items-end text-grey">
                           <strong class="font-28 textColor mb-6">{{
                  item.volume
                }}</strong>
                <span class="font-20 text-grey">
                  {{ currency.currency_symbol }}
                  {{
                           <span class="font-20 text-grey">
                              {{ currency.currency_symbol }}
                              {{
                    item.usdt ? (item.usdt * currency.rate).toFixed(2) : "0.0"
                  }}
                </span>
              </div>
            </li>
          </ul>
        </div>
        <div class="mb-60 border-b">
          <p class="font-28 text-grey mt-24 mb-42">{{ $t("其他非0资产") }}</p>
          <ul>
            <li
              v-for="item in no_zeroList"
              :key="item.symbol"
              class="flex justify-between py-10"
            >
              <div class="flex items-center">
                <img
                  :src="
                           </span>
                        </div>
                     </li>
                  </ul>
               </div>
               <div class="mb-60 border-b">
                  <p class="font-28 text-grey mt-24 mb-42">{{ $t("其他非0资产") }}</p>
                  <ul>
                     <li v-for="item in no_zeroList" :key="item.symbol" class="flex justify-between py-10">
                        <div class="flex items-center">
                           <img :src="
                    item.symbol
                      ? `${HOST_URL}/wap/symbol/${item.symbol}.png`
                      : require('@/assets/loading-default.png')
                  "
                  class="w-52 h-52 rounded-full mr-16"
                />
                <p class="flex flex-col">
                  <strong class="font-28 textColor mb-6">{{
                  " class="w-52 h-52 rounded-full mr-16" />
                           <p class="flex flex-col">
                              <strong class="font-28 textColor mb-6">{{
                    item.symbol.toUpperCase()
                  }}</strong>
                  <span class="font-20 text-grey">{{ item.full_name }}</span>
                </p>
              </div>
              <div class="flex flex-col items-end">
                <strong class="font-28 textColor mb-6">{{
                              <span class="font-20 text-grey">{{ item.full_name }}</span>
                           </p>
                        </div>
                        <div class="flex flex-col items-end">
                           <strong class="font-28 textColor mb-6">{{
                  item.volume
                }}</strong>
                <span class="font-20 text-grey">
                  {{ currency.currency_symbol }}
                  {{
                           <span class="font-20 text-grey">
                              {{ currency.currency_symbol }}
                              {{
                    item.usdt ? (item.usdt * currency.rate).toFixed(2) : "0.0"
                  }}
                </span>
              </div>
            </li>
          </ul>
        </div>
      </div>
      <div
        v-if="tabType == '1' && !entrustList.length"
        class="flex flex-col justify-center items-center pt-155 pb-100"
      >
        <img
          src="@/assets/image/assets-center/no-data.png"
          alt="no-date"
          class="w-180 h-180"
        />
        <p class="textColor">{{ $t("暂无数据") }}</p>
      </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"
          >{{ symbol.toUpperCase() }}/USDT&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>
    <van-action-sheet
      v-model="isSelectShow"
      @select="onSelect"
      :actions="actions"
      :cancel-text="$t('取消')"
      close-on-click-action
      @cancel="onCancel"
    />
  </div>
                           </span>
                        </div>
                     </li>
                  </ul>
               </div>
            </div>
            <div v-if="tabType == '1' && !entrustList.length"
               class="flex flex-col justify-center items-center pt-155 pb-100">
               <img src="@/assets/image/assets-center/no-data.png" alt="no-date" class="w-180 h-180" />
               <p class="textColor">{{ $t("暂无数据") }}</p>
            </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>
         <van-action-sheet v-model="isSelectShow" @select="onSelect" :actions="actions" :cancel-text="$t('取消')"
            close-on-click-action @cancel="onCancel" />
      </div>
      <div v-if="typeindex==1">
         <aaa></aaa>
      </div>
   </div>
</template>

<script>
import TradeHead from "@/components/trade-head/index.vue";
import TradeOrderArea from "@/components/trade-order-area/index.vue";
import TradeDeepData from "@/components/trade-deep-data/index.vue";
import EntrustItem from "@/components/entrust-item";
import KLineCharts from "@/components/kline-charts";
import historyItem from "@/components/history-item";
   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";
   var showLength = 7;
	
	
   import TradeHead from "@/components/trade-head/index.vue";
   import TradeOrderArea from "@/components/trade-order-area/index.vue";
   import TradeDeepData from "@/components/trade-deep-data/index.vue";
   import EntrustItem from "@/components/entrust-item";
   import KLineCharts from "@/components/kline-charts";
   import historyItem from "@/components/history-item";
   import aaa from "../../page/perpetualContract/index.vue"
   import Axios from "@/API/trading";
   import {
      _getHomeList
   } from "@/API/home.api";
   import {
      Popup,
      Swipe,
      SwipeItem,
      Circle,
      Icon,
      ActionSheet
   } from "vant";
   import {
      mapActions,
      mapGetters
   } from "vuex";
   import {
      SET_COIN_LIST
   } from "@/store/const.store";
   import {
      WS_URL,
      HOST_URL
   } from "@/config";
   import TradeApi from "@/API/trading.js";
   import {
      getStorage
   } from "@/utils/utis";

import Axios from "@/API/trading";
import { _getHomeList } from "@/API/home.api";
import { Popup, Swipe, SwipeItem, Circle, Icon, ActionSheet } from "vant";
import { mapActions, mapGetters } from "vuex";
import { SET_COIN_LIST } from "@/store/const.store";
import { WS_URL, HOST_URL } from "@/config";
import TradeApi from "@/API/trading.js";
import { getStorage } from "@/utils/utis";

export default {
  name: "TradePage",
  components: {
    TradeHead,
    TradeOrderArea,
    TradeDeepData,
    [Popup.name]: Popup,
    [Swipe.name]: Swipe,
    [SwipeItem.name]: SwipeItem,
    [Circle.name]: Circle,
    [Icon.name]: Icon,
    [ActionSheet.name]: ActionSheet,
    EntrustItem,
    KLineCharts,
    historyItem,
  },
  computed: {
    ...mapGetters("user", ["userInfo"]),
    ...mapGetters({
      coinList: "home/coinList",
      currency: "home/currency",
    }),
  },
  data() {
    const initArr = [];
    for (let i = 0; i < 8; i++) {
      initArr.push({
        volume: "--",
        price: "--",
      });
    }
    return {
      HOST_URL,
      quote: {},
      showCharts: false,
      updateKey: 1,
      initTimer: null,
      keyIndex: 0,
      timeout: null,
      timer: null, // 底部持仓等的公用定时器
      timer2: null, // 交割合约底部持仓等的公用定时器
      symbol: "",
      price: "",
      range: "",
      initOpen: {},
      initClose: {},
      asks: initArr, // 卖单
      bids: initArr, // 买单
      orderCur: [], // 当前委托
      orderHold: [], // 持有仓位
      futrueHold: [], // 交割持仓
      futrueHistroy: [], // 交割历史
      socket: null, // 行情
      sockets: {
        quotes: null, // 行情
        deep: null, /// 深度
      },
      curTab: "", // 当前委托还是持有仓位
      selectIndex: 1, // 当前tab
      initFutrue: {}, /// 交割合约
      show: false, // popup
      entrustList: [], //当前委托订单
      tabType: 1,
      no_zeroList: [], //其他非0资产数组
      pairsList: {}, //当前资产
      // curRequest: [], //
      isShow: false,
      title: 1,
      isSelectShow: false,
      actions: [
        { name: this.$t("默认"), value: 0, className: "actions-active" },
        { name: this.$t("展示买单"), value: 1, className: "" },
        { name: this.$t("展示卖单"), value: 2, className: "" },
      ],
      showType: 0,
      sortList: [],
      selectValue: 0,
      coinPrice: 0,
    };
  },
  async created() {
    if (!this.coinList.length) {
      await this.SET_COIN_LIST();
    }
  },
  methods: {
    ...mapActions("home", [SET_COIN_LIST]),
    onUpdate(symbol) {
      // 更新
      this.symbol = symbol;
      this.closeSocket();
      this.init(symbol);
    },
    getCoinPrce(val) {
      _getHomeList(val).then((res) => {
        this.coinPrice = res[0].close;
      });
    },
    tabClick(type) {
      this.tabType = type;
      if (type == 2 && !this.userInfo.token) {
        this.$router.push("/login");
        return;
      }
      this.entrustList = [];
      this.getOrderList();
    },
    onOrdered(evt) {
      // 下单过后的回调
      this.clearTimer();
      // this.clearTimeout()
      this.initParam(this.symbol, evt); // 重新初始化
      //console.log('下单后更新数据')
    },
    onTab(evt) {
      // 点击tab后的回调
      console.log("evt", evt);
      this.clearTimer();
      // this.clearTimeout()
      this.curTab = evt;
      this[evt](this.symbol);
    },
    handleQoutes(data) {
      if (data && data.length) {
        const cur = data[0];
        this.price = cur.close;
        this.range = cur.change_ratio + "";
        this.quote = cur;
        this.updateKey++;
      }
    },
    startQuoteSocket() {
      // 行情socket
      console.log("symbol", this.symbol);
      if (!this.symbol) {
        return;
      }
      this.socket = new WebSocket(`${WS_URL}/1/${this.symbol}`);
      this.socket.onmessage = (evt) => {
        const { data } = evt;
        const { code, data: _data } = JSON.parse(data);
        if (code / 1 === 0) {
          this.handleQoutes(_data);
        }
      };
    },
    initParam(symbol, type) {
      // 初始化参数
      if (type === "open" || !type) {
        //console.log('开仓数据')
        Axios.tradeBuyToken({}).then((res) => {
          this.initOpen = res.data;
          console.log(this.initOpen.volume, res.data.volume, type);
        });
      }
      if (type === "close" || !type) {
        Axios.tradeSellToken({
          symbol,
        }).then((res) => {
          this.initClose = res.data;
        });
      }
      this.getWallet();
      if (this.userInfo.token) {
        this.getOrderList();
      }
    },
    init(symbol) {
      // 初始化页面
      this.symbol = symbol.toLowerCase();
      if (!this.socket) {
        this.startQuoteSocket();
      }
      this.initParam(symbol); // 'open'
      this.clearTimer();
      this.getCoinPrce(symbol);
    },
    closeSocket() {
      this.socket && this.socket.close();
      this.socket = null;
    },
    clearTimer() {
      clearInterval(this.timer);
      this.timer = null;
    },
    tradeBuy() {
      Axios.tradeBuy({
        volume: 1,
        session_token: "",
        symbol: "",
        price: 1,
        order_price_type: "", //limit限价  opponent市价
      })
        .then((res) => {
          console.log(res);
        })
        .catch((error) => {
          if (error.code === "ECONNABORTED") {
            this.$toast(this.$t("网络超时！"));
          } else if (error.msg !== undefined) {
            this.$toast(this.$t(error.msg));
          }
        });
    },
    getOrderList() {
      TradeApi.tradeRecord({
        page_no: 1,
        symbol: this.$route.params.symbol,
        type: this.tabType == 1 ? "orders" : "hisorders",
      })
        .then((res) => {
          console.log(res.data);
          this.entrustList = res.data;
        })
        .catch(() => {});
    },
    cancelOrder(order) {
      TradeApi.tradeCancel({
        order_no: order,
      })
        .then((res) => {
          this.initParam(this.symbol);
          this.$toast(this.$t("成功"));
        })
        .catch(() => {});
    },
    getWallet() {
      TradeApi.getPairs({
        pairs: `${this.symbol}/usdt`,
      }).then((res) => {
        this.pairsList = res.data.pairs;
        this.no_zeroList = res.data.no_zero;
      });
    },
    goHistory() {
      this.$router.push(`/tradeRecord/${this.symbol}`);
    },
    //价格类型下拉框切换
    selectBtn() {
      this.isShow = !this.isShow;
    },
    //选择价格类型
    selectItem(item) {
      this.title = item.name;
      this.isShow = false;
      this.selectValue = item.value;
    },
    onSelect(item) {
      this.showType = item.value;
      this.actions.map((item) => {
        item.className = "";
      });
      item.className = "actions-active";
    },
    onCancel() {
      this.isSelectShow = false;
    },
    getList(val) {
      if (val.numberLength <= 2) {
        this.title = val.arry[0].name;
      } else {
        this.title = val.arry[val.arry.length - 1].name;
      }
      this.sortList = val.arry;
    },
  },
  beforeRouteEnter(to, from, next) {
    let {
      params: { symbol },
    } = to;
    console.log("to", to);
    let catchTradeSymbol = getStorage("tradeSymbol");
    if (catchTradeSymbol) {
      symbol = catchTradeSymbol;
    }
    console.log(catchTradeSymbol);
    if (symbol) {
      next((vm) => {
        vm.symbol = symbol;
        vm.init(symbol);
      });
    } else {
      next();
    }
  },
  activated() {
    // if (!this.socket) {
    //     this.startQuoteSocket()
    // }
  },
  deactivated() {
    this.closeSocket();
    this.clearTimer();
  },
  beforeDestroy() {
    this.closeSocket();
    // this.clearTimeout(true)
    this.clearTimer();
  },
};
   export default {
      name: "TradePage",
      components: {
         ContractHeader,
         PerpetualOpen,
         PerpetualOrder,
         [Popup.name]: Popup,
         [Swipe.name]: Swipe,
         [SwipeItem.name]: SwipeItem,
         KLineCharts,
         TradeHead,
         TradeOrderArea,
         TradeDeepData,
         [Popup.name]: Popup,
         [Swipe.name]: Swipe,
         [SwipeItem.name]: SwipeItem,
         [Circle.name]: Circle,
         [Icon.name]: Icon,
         [ActionSheet.name]: ActionSheet,
         EntrustItem,
         KLineCharts,
         historyItem,
         aaa
      },
      computed: {
         ...mapGetters("user", ["userInfo"]),
         ...mapGetters({
            coinList: "home/coinList",
            currency: "home/currency",
         }),
      },
      watch: {
        selectIndex(val) {
          showLength = 7;
        },
      },
      data() {
         const initArr = [];
         for (let i = 0; i < showLength; i++) {
           initArr.push({
             amount: "--",
             price: "--",
           });
         }
         // const initArr = [];
         // for (let i = 0; i < 8; i++) {
         //    initArr.push({
         //       volume: "--",
         //       price: "--",
         //    });
         // }
         return {
            quote: {},
            initTimer: null,
            keyIndex: 0,
            timeout: null,
            timer: null, // 底部持仓等的公用定时器
            timer1: null, // tab切换动画
            timer2: null, // 交割合约底部持仓等的公用定时器
            balance: 0,
            symbol: "",
            price: "",
            range: "",
            stop_price_profit: "",
            stop_price_loss: "",
            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,
            newname:'',
            currentType: "",
            showCharts: false,
            // curRequest: [], //
				
            HOST_URL,
            quote: {},
            typelist: [this.$t("交易"), this.$t("合约")],
            typeindex: 0,
            showCharts: false,
            updateKey: 1,
            initTimer: null,
            keyIndex: 0,
            timeout: null,
            timer: null, // 底部持仓等的公用定时器
            timer2: null, // 交割合约底部持仓等的公用定时器
            symbol: "",
            price: "",
            range: "",
            initOpena: {},
            initOpen: {},
            initClose: {},
            asks: initArr, // 卖单
            bids: initArr, // 买单
            orderCur: [], // 当前委托
            orderHold: [], // 持有仓位
            name:'',
            futrueHold: [], // 交割持仓
            futrueHistroy: [], // 交割历史
            socket: null, // 行情
            sockets: {
               quotes: null, // 行情
               deep: null, /// 深度
            },
            curTab: "", // 当前委托还是持有仓位
            selectIndex: 1, // 当前tab
            initFutrue: {}, /// 交割合约
            show: false, // popup
            entrustList: [], //当前委托订单
            tabType: 1,
            no_zeroList: [], //其他非0资产数组
            pairsList: {}, //当前资产
            // curRequest: [], //
            isShow: false,
            title: 1,
            isSelectShow: false,
            actions: [{
                  name: this.$t("默认"),
                  value: 0,
                  className: "actions-active"
               },
               {
                  name: this.$t("展示买单"),
                  value: 1,
                  className: ""
               },
               {
                  name: this.$t("展示卖单"),
                  value: 2,
                  className: ""
               },
            ],
            showType: 0,
            sortList: [],
            selectValue: 0,
            coinPrice: 0,
         };
      },
      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
         });
      },
      mounted() {
         this.GET_UERS_KYC();
         let symbol = this.$route.params.symbol;
         let type = this.$route.params.aa;
         let catchSymbol = getStorage("symbol");
         if (!symbol && catchSymbol) {
           symbol = catchSymbol;
         }
         if (this.selectIndex / 1 === 2) {
           this.curTab = "fetchFutrueHoldList";
         } else {
           this.curTab = "fetchOrderListHold";
         }
         this.symbol = symbol;
         if(this.typeindex==0){
            this.inita(symbol);
         }else{
            this.init(symbol);
         }
      },
      methods: {
         ...mapActions("home", [SET_COIN_LIST]),
         ...mapActions("user", ["GET_UERS_KYC"]),
         typeclick(e) {
            this.typeindex = e
            if(e==0){
               this.initParama(this.symbol)
            }else{
               this.symbol = 'wld'
               this.initParam(this.symbol)
            }
            this.$forceUpdate()
         },
         onUpdate(symbol,name) {
            // 更新
            this.symbol = symbol;
            this.newname = name
            this.closeSocket();
            if(this.typeindex==0){
               this.closeSocketa();
            }else{
               this.closeSocket();
            }
            if(this.typeindex==0){
               this.inita(symbol);
            }else{
               this.init(symbol);
            }
         },
         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);
         },
         getCoinPrce(val) {
            _getHomeList(val).then((res) => {
               this.coinPrice = res[0].close;
            });
         },
         tabClick(type) {
            this.tabType = type;
            if (type == 2 && !this.userInfo.token) {
               this.$router.push("/login");
               return;
            }
            this.entrustList = [];
            this.getOrderList();
         },
         changeCurrentType(type) {
           this.currentType = type;
         },
         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()
           });
         },
         onOrdereda(evt) {
            // 下单过后的回调
            this.clearTimer();
            // this.clearTimeout()
            if(this.typeindex==0){
               this.initParama(this.symbol, evt); // 重新初始化
            }else{
               this.initParam(this.symbol, evt); // 重新初始化
            }
            //console.log('下单后更新数据')
         },
         onOrdered(evt) {
           // 下单过后的回调
           this.clearTimer();
           // this.clearTimeout()
           if(this.typeindex==0){
              this.initParama(this.symbol, evt); // 重新初始化
           }else{
              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('下单后更新数据')
         },
         changeValueBack(val) {
           if (val == 0) {
             showLength = 7;
           } else {
             showLength = 13;
           }
         },
         onTab(evt) {
            // 点击tab后的回调
            console.log("evt", evt);
            this.clearTimer();
            // this.clearTimeout()
            this.curTab = evt;
            this[evt](this.symbol);
         },
         fetchQoutes(symbol) {
           // 获取当前行情
           // symbol.order = "desc"
           _getHomeList(symbol).then((data) => {
             // 获取行情
             this.handleQoutes(data);
             this.startQuoteSocket(); // socket
            if(this.typeindex==0){
               this.startQuoteSocketa(); // socket
            }else{
               this.startQuoteSocket(); // socket
            }
           });
         },
         handleQoutes(data) {
            if (data && data.length) {
               const cur = data[0];
               this.price = cur.close;
               this.newname = cur.name;
               this.range = cur.change_ratio + "";
               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);
         },
         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 = [];
           }
         },
         startDeepSocket() {
           // 开启socket链接
           if(this.typeindex==0){
              this.closeSocketa();
           }else{
              this.closeSocket();
           }
			
           this.socket = new WebSocket(`${WS_URL}/3/${this.symbol}`);
			
           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.onerror = (error) => {
             console.error("WebSocket error:", error);
             setTimeout(this.startDeepSocket, 5000); // 5秒后尝试重新连接
           };
			
           this.socket.onclose = (event) => {
             console.log("WebSocket connection closed:", event);
             // 重新连接，可以根据需求添加重连的逻辑，这里只是简单的示例
           };
         },
         startQuoteSocketa() {
            // 行情socket
            console.log("symbol", this.symbol);
            if (!this.symbol) {
               return;
            }
            this.socket = new WebSocket(`${WS_URL}/1/${this.symbol}`);
            this.socket.onmessage = (evt) => {
               const {
                  data
               } = evt;
               const {
                  code,
                  data: _data
               } = JSON.parse(data);
               // console.log(_data);
               if (code / 1 === 0) {
                  this.handleQoutes(_data);
               }
            };
         },
         initParama(symbol, type) {
            // 初始化参数
            if (type === "open" || !type) {
               //console.log('开仓数据')
               Axios.tradeBuyToken({}).then((res) => {
                  this.initOpena = res.data;
                  console.log(this.initOpen.volume, res.data.volume, type);
               });
            }
            if (type === "close" || !type) {
               Axios.tradeSellToken({
                  symbol,
               }).then((res) => {
                  this.initClose = res.data;
               });
            }
            this.getWallet();
            if (this.userInfo.token) {
               this.getOrderList();
            }
         },
         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;
             });
           }
         },
         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);
           }
         },
         inita(symbol) {
            // 初始化页面
            this.symbol = symbol.toLowerCase();
            if (!this.socket) {
               if(this.typeindex==0){
                  this.startQuoteSocketa(); // socket
               }else{
                  this.startQuoteSocket(); // socket
               }
            }
            // this.initParam(symbol); // 'open'
            if(this.typeindex==0){
               this.initParama(symbol); // 'open'
            }else{
               this.initParam(symbol); // 'open'
            }
            this.clearTimer();
            this.getCoinPrce(symbol);
         },
         closeSocketa() {
            this.socket && this.socket.close();
            this.socket = null;
         },
         closeSocket() {
           this.sockets.quotes && this.sockets.quotes.close();
           this.sockets.deep && this.sockets.deep.close();
           this.sockets.quotes = null;
           this.sockets.deep = null;
         },
         clearTimer() {
            clearInterval(this.timer);
            this.timer = null;
         },
         tradeBuy() {
            Axios.tradeBuy({
                  volume: 1,
                  session_token: "",
                  symbol: "",
                  price: 1,
                  order_price_type: "", //limit限价  opponent市价
               })
               .then((res) => {
                  console.log(res);
               })
               .catch((error) => {
                  if (error.code === "ECONNABORTED") {
                     this.$toast(this.$t("网络超时！"));
                  } else if (error.msg !== undefined) {
                     this.$toast(this.$t(error.msg));
                  }
               });
         },
         getOrderList() {
            TradeApi.tradeRecord({
                  page_no: 1,
                  symbol: this.$route.params.symbol,
                  type: this.tabType == 1 ? "orders" : "hisorders",
               })
               .then((res) => {
                  console.log(res.data);
                  this.entrustList = res.data;
               })
               .catch(() => {});
         },
         cancelOrder(order) {
            TradeApi.tradeCancel({
                  order_no: order,
               })
               .then((res) => {
                  if(this.typeindex==0){
                     this.initParama(this.symbol);
                  }else{
                     this.initParam(this.symbol);
                  }
                  this.$toast(this.$t("成功"));
               })
               .catch(() => {});
         },
         getWallet() {
            TradeApi.getPairs({
               pairs: `${this.symbol}/usdt`,
            }).then((res) => {
               this.pairsList = res.data.pairs;
               this.no_zeroList = res.data.no_zero;
            });
         },
         goHistory() {
            this.$router.push(`/tradeRecord/${this.symbol}`);
         },
         //价格类型下拉框切换
         selectBtn() {
            this.isShow = !this.isShow;
         },
         //选择价格类型
         selectItem(item) {
            this.title = item.name;
            this.isShow = false;
            this.selectValue = item.value;
         },
         onSelect(item) {
            this.showType = item.value;
            this.actions.map((item) => {
               item.className = "";
            });
            item.className = "actions-active";
         },
         onCancel() {
            this.isSelectShow = false;
         },
         getList(val) {
            if (val.numberLength <= 2) {
               this.title = val.arry[0].name;
            } else {
               this.title = val.arry[val.arry.length - 1].name;
            }
            this.sortList = val.arry;
         },
      },
      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);
          }
        };
      },
		
      beforeRouteEnter(to, from, next) {
         var that = this
         let {
            params: {
               symbol
            },
         } = to;
         let catchTradeSymbol = getStorage("tradeSymbol");
         if (catchTradeSymbol) {
            symbol = catchTradeSymbol;
         }
         if (symbol) {
            // debugger
            // if(that.typeindex==0){
            //    next((vm) => {
            //       vm.symbol = symbol;
            //       vm.inita(symbol);
            //    });
            // }else{
               next((vm) => {
                  vm.symbol = symbol;
                  vm.init(symbol);
               });
            // }
				
         } else {
            next();
         }
      },
      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;
        if(this.typeindex==0){
           this.inita(symbol);
        }else{
           this.init(symbol);
        }
      },
      activated() {
         this.currentType = this.$route.query.currentType
           ? this.$route.query.currentType
           : "long";
      },
      deactivated() {
         if(this.typeindex==0){
            this.closeSocketa();
         }else{
            this.closeSocket();
         }
         this.clearTimer();
      },
		
		
      beforeDestroy() {
         if(this.typeindex==0){
            this.closeSocketa();
         }else{
            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)
//}
   //.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)
   //}
   .typebox_box {
      width: 50%;
      background-color: #9691fa;
      color: #fff;
      display: flex;
      justify-content: center;
      align-items: center;
   }

.no_touch {
  -webkit-user-select: none;
  user-select: none;
  -ms-user-select: none;
  -moz-user-select: none;
   .typebox_boxa {
      width: 50%;
      background-color: #fff;
      color: #9691fa;
      display: flex;
      justify-content: center;
      align-items: center;
   }

  @include themify() {
    background: themed("main_background");
  }
   .no_touch {
      -webkit-user-select: none;
      user-select: none;
      -ms-user-select: none;
      -moz-user-select: none;

  min-height: 100vh;
}
      @include themify() {
         background: themed("main_background");
      }

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

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

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

.rounded-view {
  border-top-left-radius: 20px;
  border-top-right-radius: 20px;
  padding: 0 30px;
  box-sizing: border-box;
}
   .list-enter-active,
   .list-leave-active {
      will-change: transform;
      transition: all 250ms;
   }

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

.active-line {
  position: relative;
  // padding: 15px 0;
  color: #9691fa;
  font-weight: 600;
   .list-leave {
      opacity: 0;
      transform: translate3d(100%, 0, 0);
   }

  @include themify() {
    // background-color: themed("color_main");
  }
}
   .rounded-view {
      border-top-left-radius: 20px;
      border-top-right-radius: 20px;
      padding: 0 30px;
      box-sizing: border-box;
   }

// .active-line::after {
//     content: '';
//     position: absolute;
//     left: 50%;
//     transform: translateX(-50%);
//     bottom: 0;
//     right: 0;
//     width: 280px;
//     height: 8px;
//        @include themify() {
//            background-color: themed("color_main");
//        }
// }
   .my-swipe {
      width: 100%;
   }

.shadow {
  bottom: 108px;
  box-sizing: border-box;
}
   .active-line {
      position: relative;
      // padding: 15px 0;
      color: #9691fa;
      font-weight: 600;

// .textColor {
//     color: #DAD5DC;
// }
      @include themify() {
         // background-color: themed("color_main");
      }
   }

.borderColor,
.border-solid-grey {
  @include themify() {
    border: 1px solid themed("border_color");
  }
}
   // .active-line::after {
   //     content: '';
   //     position: absolute;
   //     left: 50%;
   //     transform: translateX(-50%);
   //     bottom: 0;
   //     right: 0;
   //     width: 280px;
   //     height: 8px;
   //        @include themify() {
   //            background-color: themed("color_main");
   //        }
   // }

.tabBackground1 {
  @include themify() {
    border: 1px solid themed("border_color1");
  }
}
   .shadow {
      bottom: 108px;
      box-sizing: border-box;
   }

// 下拉
.option-box {
  position: absolute;
  left: 0;
  right: 0;
  top: 90px;
  width: 100%;
   // .textColor {
   //     color: #DAD5DC;
   // }

  @include themify() {
    background: themed("grey_bg");
  }
   .borderColor,
   .border-solid-grey {
      @include themify() {
         border: 1px solid themed("border_color");
      }
   }

  text-align: center;
  border-radius: 4px;
   .tabBackground1 {
      @include themify() {
         border: 1px solid themed("border_color1");
      }
   }

  @include themify() {
    color: themed("text_color3");
  }
   // 下拉
   .option-box {
      position: absolute;
      left: 0;
      right: 0;
      top: 90px;
      width: 100%;

  z-index: 10;
}
      @include themify() {
         background: themed("grey_bg");
      }

.option-box > div {
  padding: 30px 0;
}
      text-align: center;
      border-radius: 4px;

.option-box > div:hover {
  // background-color: #F5F5F5;
}
      @include themify() {
         color: themed("text_color3");
      }

.k-select-box {
  position: relative;
  top: -130px;
  //   justify-content: flex-end;
  padding: 0 30px;
  align-items: center;
      z-index: 10;
   }

  .select-box {
    width: 220px;
   .option-box>div {
      padding: 30px 0;
   }

    @include themify() {
      background: themed("input_background");
    }
   .option-box>div:hover {
      // background-color: #F5F5F5;
   }

    margin-right: 20px;
  }
}
   .k-select-box {
      position: relative;
      top: -130px;
      //   justify-content: flex-end;
      padding: 0 30px;
      align-items: center;

.van-popup {
  @include themify() {
    background: themed("color_main");
  }
}
      .select-box {
         width: 220px;

.actions-active {
  @include themify() {
    background: themed("color_main") !important;
  }
}
         @include themify() {
            background: themed("input_background");
         }

.trade {
  ::v-deep .van-action-sheet__item,
  ::v-deep .van-action-sheet__cancel {
    @include themify() {
      background: themed("input_background1");
    }
         margin-right: 20px;
      }
   }

    @include themify() {
      color: themed("text_color");
    }
  }
   .van-popup {
      @include themify() {
         background: themed("color_main");
      }
   }

  ::v-deep .van-action-sheet__gap {
    @include themify() {
      background: themed("cont_background");
    }
  }
}
   .actions-active {
      @include themify() {
         background: themed("color_main") !important;
      }
   }

.list-data {
  margin: 30px;
  min-height: 550px;
  box-shadow: 0px 0px 10px 5px rgba(0, 0, 0, 0.05);
  //
}
</style>
   .trade {

      ::v-deep .van-action-sheet__item,
      ::v-deep .van-action-sheet__cancel {
         @include themify() {
            background: themed("input_background1");
         }

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

      ::v-deep .van-action-sheet__gap {
         @include themify() {
            background: themed("cont_background");
         }
      }
   }

   .list-data {
      margin: 30px;
      min-height: 550px;
      box-shadow: 0px 0px 10px 5px rgba(0, 0, 0, 0.05);
      //
   }
	
   //.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 {
     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;
   }
	
   .my-swipe {
     width: 100%;
   }
	
   .my-swipe .van-swipe-item {
   }
	
   .line {
     height: 13px;
	
     @include themify() {
       background: themed("tab_background");
     }
   }
	
   @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);
     }
   }
	
   @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);
     }
   }
	
   .slide1 {
     animation: animate1 200ms linear;
   }
	
   .slide2 {
     animation: animate2 200ms linear;
   }
	
   .line {
     @include themify() {
       background: themed("divi_line");
     }
   }
	
   ::v-deep .contract-header {
     @include themify() {
       background: themed("main_background");
     }
   }
	
   .tabBackground1 {
     @include themify() {
       border: 1px solid themed("border_color1");
     }
   }
	
   .shadow {
     bottom: 108px;
     box-sizing: border-box;
   }
</style>