解决交易和合约切换值不同步的问题

lxf

2025-05-18 4702be083e8b554eb3037f0ecc0b4ba1d04c2406

 src/page/trade/index.vue

@@ -17,33 +17,70 @@
        </div> -->
        <!-- :key="symbol"-->
        <!-- 头部区 -->
        <trade-head :backFunc="() => $router.push('/')" :symbol="symbol" :symbolname="symbolname" :price="price" :range="range" :isTrade="true"
            @update-coin="onUpdate" @data="quote = $event" />
    <trade-head
      :backFunc="() => $router.push('/')"
      :symbol="symbol"
      :symbolname="symbolname"
      :price="price"
      :range="range"
      :isTrade="true"
      @update-coin="onUpdate"
      @data="quote = $event"
    />

        <div class="trade-buy-sell flex justify-between px-30 py-30">
            <trade-order-area :symbol="symbol" :symbolname="symbolname" :init-open="initOpen" :init-close="initClose" :price="price"
                @ordered="onOrdered" />
      <trade-order-area
        :symbol="symbol"
        :symbolname="symbolname"
        :init-open="initOpen"
        :init-close="initClose"
        :price="price"
        @ordered="onOrdered"
      />
            <keep-alive>
                <trade-deep-data :selectValue="selectValue" :symbolname="symbolname" @getList="getList" :showType="showType" :symbol="symbol"
                    v-if="symbol" :price="price" class="w-290 ml-30" />
        <trade-deep-data
          :selectValue="selectValue"
          :symbolname="symbolname"
          @getList="getList"
          :showType="showType"
          :symbol="symbol"
          v-if="symbol"
          :price="price"
          class="w-290 ml-30"
        />
            </keep-alive>
        </div>
        <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="mt-20 mb-22 select-box" style="position: relative">
        <div
          class="flex justify-between items-center w-full h-70"
          @click="selectBtn"
        >
                    <!-- <img src="@/assets/image/public/warn.png" alt="warn-icon" class="w-25 h-25 pl-20"/> -->
                    <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 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
            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" />
        <img
          src="@/assets/image/selectIcon.png"
          alt="warn-icon"
          class="w-36 h-30"
        />
            </div>
        </div>
        <div class="h-16 diviLine"></div>
@@ -51,58 +88,104 @@
            <div class="flex justify-between pb-20 border-b-color items-center">
                <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('当前委托') }}<span v-if="tabType == '1'"></span></div>
            <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'"></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" />
        <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" />
      <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" />
      <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>
        <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">
          <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" />
              <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">{{ item.full_name }}</strong>
                                <span class="font-20 text-grey">{{ item.symbol.toUpperCase() }}</span>
                <strong class="font-28 textColor mb-6">{{
                  item.full_name
                }}</strong>
                <span class="font-20 text-grey">{{
                  item.symbol.toUpperCase()
                }}</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 }}
                                {{ item.usdt ? (item.usdt * currency.rate).toFixed(2) : '0.0' }}
                {{ 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>
        <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">
          <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" />
              <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">{{ item.symbol.toUpperCase() }}</strong>
                <strong class="font-28 textColor mb-6">{{
                  item.symbol.toUpperCase()
                }}</strong>
                                <span class="font-20 text-grey">{{ item.full_name }}</span>
                            </p>
                        </div>
@@ -110,47 +193,66 @@
                            <strong class="font-28 textColor mb-6">{{ item.volume }}</strong>
                            <span class="font-20 text-grey">
                                {{ currency.currency_symbol }}
                                {{ item.usdt ? (item.usdt * currency.rate).toFixed(2) : '0.0' }}
                {{ 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-185 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
      v-if="tabType == '1' && !entrustList.length"
      class="flex flex-col justify-center items-center pt-185 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 class="fixed w-full shadow z-10 tabBackground1"> -->
            <div class="flex justify-between px-30 py-10">
                <span class="font-24 textColor2">{{ symbolname }}&nbsp;{{ $t('k线图表') }}</span>
      <span class="font-24 textColor2"
        >{{ symbolname }}&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" 
                :showBottom="false" />
    <k-line-charts
      :update-key="updateKey"
      :update-data="quote"
      :symbol="symbol"
      :showBottom="false"
    />
        <!-- </div> -->
        <van-action-sheet v-model="isSelectShow" @select="onSelect" :actions="actions" :cancel-text="$t('取消')"
            close-on-click-action @cancel="onCancel" />
    <van-action-sheet
      v-model="isSelectShow"
      @select="onSelect"
      :actions="actions"
      :cancel-text="$t('取消')"
      close-on-click-action
      @cancel="onCancel"
    />
    </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 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 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 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 { getStorage } from "@/utils/utis";

export default {
    name: "TradePage",
@@ -166,22 +268,22 @@
        [ActionSheet.name]: ActionSheet,
        EntrustItem,
        KLineCharts,
        historyItem
    historyItem,
    },
    computed: {
        ...mapGetters('user', ['userInfo']),
    ...mapGetters("user", ["userInfo"]),
        ...mapGetters({
            coinList: 'home/coinList',
            currency: 'home/currency'
      coinList: "home/coinList",
      currency: "home/currency",
        }),
    },
    data() {
        var  initArr = []
    var initArr = [];
        for (let i = 0; i < 8; i++) {
            initArr.push({
                volume: '--',
                price: '--'
            })
        volume: "--",
        price: "--",
      });
        }
        return {
            HOST_URL,
@@ -193,9 +295,9 @@
            timeout: null,
            timer: null, // 底部持仓等的公用定时器
            timer2: null, // 交割合约底部持仓等的公用定时器
            symbol: '',
            price: '',
            range: '',
      symbol: "",
      price: "",
      range: "",
            initOpen: {},
            initClose: {},
            asks: initArr, // 卖单
@@ -207,9 +309,9 @@
            socket: null, // 行情
            sockets: {
                quotes: null, // 行情
                deep: null /// 深度
        deep: null, /// 深度
            },
            curTab: '', // 当前委托还是持有仓位
      curTab: "", // 当前委托还是持有仓位
            selectIndex: 1, // 当前tab
            initFutrue: {}, /// 交割合约
            show: false, // popup
@@ -221,167 +323,180 @@
            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: '' }],
      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,
         symbolname:'',
        }
      symbolname: "",
    };
    },
    async created() {
        if (!this.coinList.length) {
            await this.SET_COIN_LIST()
      await this.SET_COIN_LIST();
        }
      console.log('this.symbolname',this.$route.query.name);
    console.log("this.symbolname", this.$route.query.name);
    },
    methods: {
        ...mapActions('home', [SET_COIN_LIST]),
        onUpdate(symbol) { // 更新
    ...mapActions("home", [SET_COIN_LIST]),
    onUpdate(symbol) {
      // 更新
         console.log("symbol123123",symbol);
         this.symbolname = getStorage('symbolname')
            this.symbol = symbol
            this.closeSocket()
            this.init(symbol)
      this.symbolname = getStorage("symbolname");
      this.symbol = symbol;
      this.closeSocket();
      this.init(symbol);
        },
        getCoinPrce(val) {
            _getHomeList(val).then((res) => {
                this.coinPrice = res[0].close
            })
        this.coinPrice = res[0].close;
      });
        },
        tabClick(type) {
            this.tabType = type;
            if (type == 2 && !this.userInfo.token) {
                this.$router.push('/login')
                return
        this.$router.push("/login");
        return;
            }
            this.entrustList = []
            this.getOrderList()
      this.entrustList = [];
      this.getOrderList();
        },
        onOrdered(evt) { // 下单过后的回调
            this.clearTimer()
    onOrdered(evt) {
      // 下单过后的回调
      this.clearTimer();
            // this.clearTimeout()
            this.initParam(this.symbol, evt) // 重新初始化
      this.initParam(this.symbol, evt); // 重新初始化
            //console.log('下单后更新数据')
        },
        onTab(evt) { // 点击tab后的回调
            console.log('evt', evt)
            this.clearTimer()
    onTab(evt) {
      // 点击tab后的回调
      console.log("evt", evt);
      this.clearTimer();
            // this.clearTimeout()
            this.curTab = evt
            this[evt](this.symbol)
      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++
        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)
    startQuoteSocket() {
      // 行情socket
      console.log("symbol", this.symbol);
            if (!this.symbol) {
                return
        return;
            }
            this.socket = new WebSocket(`${WS_URL}/1/${this.symbol}`)
      this.socket = new WebSocket(`${WS_URL}/1/${this.symbol}`);
            this.socket.onmessage = (evt) => {
                const { data } = evt
                const { code, data: _data } = JSON.parse(data)
        const { data } = evt;
        const { code, data: _data } = JSON.parse(data);
                if (code / 1 === 0) {
                    this.handleQoutes(_data)
          this.handleQoutes(_data);
                }
            }
      };
        },
        initParam(symbol, type) { // 初始化参数
            if (type === 'open' || !type) {
    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)
                    })
        Axios.tradeBuyToken({}).then((res) => {
          this.initOpen = res.data;
          console.log(this.initOpen.volume, res.data.volume, type);
        });
            }
            if (type === 'close' || !type) {
      if (type === "close" || !type) {
                Axios.tradeSellToken({
                    symbol
                }).then(res => {
                    this.initClose = res.data
                })
          symbol,
        }).then((res) => {
          this.initClose = res.data;
        });
            }
            this.getWallet()
      this.getWallet();
            if (this.userInfo.token) {
                this.getOrderList();
            }
        },
        init(symbol) { // 初始化页面
            this.symbol = symbol.toLowerCase()
    init(symbol) {
      // 初始化页面
      this.symbol = symbol.toLowerCase();
            if (!this.socket) {
                this.startQuoteSocket()
        this.startQuoteSocket();
            }
            this.initParam(symbol) // 'open'
            this.clearTimer()
            this.getCoinPrce(symbol)
      this.initParam(symbol); // 'open'
      this.clearTimer();
      this.getCoinPrce(symbol);
        },
        closeSocket() {
            this.socket && this.socket.close()
            this.socket = null
      this.socket && this.socket.close();
      this.socket = null;
        },
        clearTimer() {
            clearInterval(this.timer)
            this.timer = null
      clearInterval(this.timer);
      this.timer = null;
        },
        tradeBuy() {
            Axios.tradeBuy({
                volume: 1,
                session_token: '',
                symbol: '',
        session_token: "",
        symbol: "",
                price: 1,
                order_price_type: '' //limit限价  opponent市价
            }).then((res) => {
        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)); }
        })
        .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(() => {

        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(() => {

            })
        .then((res) => {
          this.initParam(this.symbol);
          this.$toast(this.$t("成功"));
        })
        .catch(() => {});
        },
        getWallet() {
            TradeApi.getPairs({
                pairs: `${this.symbol}/usdt`
            })
                .then(res => {
        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}`)
         this.$router.push({
           path: `/tradeRecord/${this.symbol}`,
           query: { name: this.symbolname }
        query: { name: this.symbolname },
         });
        },
        //价格类型下拉框切换
@@ -392,36 +507,34 @@
        selectItem(item) {
            this.title = item.name;
            this.isShow = false;
            this.selectValue = item.value
      this.selectValue = item.value;
        },
        onSelect(item) {
            this.showType = item.value
      this.showType = item.value;
            this.actions.map((item) => {
                item.className = ''
            })
            item.className = 'actions-active'
        item.className = "";
      });
      item.className = "actions-active";
        },
        onCancel() {
            this.isSelectShow = false
      this.isSelectShow = false;
        },
        getList(val) {
            if (val.numberLength <= 2) {
                this.title = val.arry[0].name
        this.title = val.arry[0].name;
            } else {
                this.title = val.arry[val.arry.length - 1].name
        this.title = val.arry[val.arry.length - 1].name;
            }
            this.sortList = val.arry
        }
      this.sortList = val.arry;
    },
    },
beforeRouteEnter(to, from, next) {
         var that = this
    var that = this;
         let {
            params: {
               symbol
            },
      params: { symbol },
         } = to;
         // this.symbolname = this.$route.params.name
         let catchTradeSymbol = getStorage("tradeSymbol");
    let catchTradeSymbol = getStorage("symbol");
         if (catchTradeSymbol) {
            symbol = catchTradeSymbol;
         }
@@ -439,7 +552,6 @@
                  vm.init(symbol);
               });
            // }
				
         } else {
            next();
         }
@@ -450,16 +562,15 @@
        // }
    },
    deactivated() {
        this.closeSocket()
        this.clearTimer()
    this.closeSocket();
    this.clearTimer();
    },
    beforeDestroy() {
        this.closeSocket()
    this.closeSocket();
        // this.clearTimeout(true)
        this.clearTimer()
    }
}

    this.clearTimer();
  },
};
</script>

<style lang="scss" scoped>
@@ -552,7 +663,6 @@
    }
}


.tabBackground1 {
    @include themify() {
        border: 1px solid themed("border_color1");
@@ -605,7 +715,6 @@

        margin-right: 20px;
    }

}

.van-popup {
@@ -621,10 +730,8 @@
}

.trade {

    ::v-deep .van-action-sheet__item,
    ::v-deep .van-action-sheet__cancel {

        @include themify() {
            background: themed("input_background1");
        }
@@ -641,4 +748,3 @@
    }
}
</style>