From fcb00a66b4053550b473a29d7299c7a4737eea75 Mon Sep 17 00:00:00 2001
From: lxf <1371462558@qq.com>
Date: Wed, 16 Jul 2025 14:41:04 +0800
Subject: [PATCH] 翻译
---
src/page/trade/index.vue | 1152 +++++++++++++++++++++++++++++++--------------------------
1 files changed, 630 insertions(+), 522 deletions(-)
diff --git a/src/page/trade/index.vue b/src/page/trade/index.vue
index b892255..b4fbfca 100644
--- a/src/page/trade/index.vue
+++ b/src/page/trade/index.vue
@@ -1,6 +1,6 @@
<template>
- <div class="pb-108 no_touch trade">
- <!-- <div class="px-30 pt-20">
+ <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">
@@ -15,451 +15,564 @@
</div>
</div>
</div> -->
- <!-- :key="symbol"-->
- <!-- 头部区 -->
- <trade-head :backFunc="() => $router.push('/')" :symbol="symbol" :symbolname="symbolname" :price="price" :range="range" :isTrade="true"
- @update-coin="onUpdate" @data="quote = $event" />
+ <!-- :key="symbol"-->
+ <!-- 头部区 -->
+ <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" />
- <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" />
- </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">
- <!-- <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>
- <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>
- <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 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="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>
- </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' }}
- </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">{{ 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">{{ item.volume }}</strong>
- <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-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 }} {{ $t('k线图表') }}</span>
- <!-- <van-icon class="textColor" @click.stop="showCharts = !showCharts"
+ <!-- <div class="fixed w-full shadow z-10 tabBackground1"> -->
+ <div class="flex justify-between px-30 py-10">
+ <span class="font-24 textColor2"
+ >{{ symbolname }} {{ $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" />
- <!-- </div> -->
- <van-action-sheet v-model="isSelectShow" @select="onSelect" :actions="actions" :cancel-text="$t('取消')"
- close-on-click-action @cancel="onCancel" />
</div>
+ <k-line-charts
+ :update-key="updateKey"
+ :update-data="quote"
+ :symbol="symbol"
+ :showBottom="false"
+ />
+ <!-- </div> -->
+
+ <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"
+ />
+ <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"
+ />
+ </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"
+ >
+ <!-- <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>
+ <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>
+ <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 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="
+ 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>
+ </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" }}
+ </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">{{
+ 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">{{ item.volume }}</strong>
+ <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-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>
+
+ <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",
- 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() {
- var 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,
- symbolname:'',
- }
- },
- async created() {
- if (!this.coinList.length) {
- await this.SET_COIN_LIST()
- }
- console.log('this.symbolname',this.$route.query.name);
- },
- methods: {
- ...mapActions('home', [SET_COIN_LIST]),
- onUpdate(symbol) { // 更新
- console.log("symbol123123",symbol);
- this.symbolname = getStorage('symbolname')
- 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}`)
- this.$router.push({
- path: `/tradeRecord/${this.symbol}`,
- query: { name: this.symbolname }
- });
- },
- //价格类型下拉框切换
- 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) {
- var that = this
- let {
- params: {
- symbol
- },
- } = to;
- // this.symbolname = this.$route.params.name
- 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.symbolname = getStorage("symbolname");
- vm.init(symbol);
- });
- // }
-
- } else {
- next();
- }
- },
- activated() {
- // if (!this.socket) {
- // this.startQuoteSocket()
- // }
- },
- deactivated() {
- this.closeSocket()
- this.clearTimer()
- },
- beforeDestroy() {
- this.closeSocket()
- // this.clearTimeout(true)
- this.clearTimer()
+ 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() {
+ var 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,
+ symbolname: "",
+ };
+ },
+ async created() {
+ if (!this.coinList.length) {
+ await this.SET_COIN_LIST();
+ }
+ console.log("this.symbolname", this.$route.query.name);
+ },
+ methods: {
+ ...mapActions("home", [SET_COIN_LIST]),
+ onUpdate(symbol) {
+ // 更新
+ console.log("symbol123123", symbol);
+ this.symbolname = getStorage("symbolname");
+ 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}`)
+ this.$router.push({
+ path: `/tradeRecord/${this.symbol}`,
+ query: { name: this.symbolname },
+ });
+ },
+ //价格类型下拉框切换
+ 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) {
+ var that = this;
+ let {
+ params: { symbol },
+ } = to;
+ // this.symbolname = this.$route.params.name
+ 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.symbolname = getStorage("symbolname");
+ vm.init(symbol);
+ });
+ // }
+ } else {
+ next();
+ }
+ },
+ activated() {
+ // if (!this.socket) {
+ // this.startQuoteSocket()
+ // }
+ },
+ deactivated() {
+ this.closeSocket();
+ this.clearTimer();
+ },
+ beforeDestroy() {
+ this.closeSocket();
+ // this.clearTimeout(true)
+ this.clearTimer();
+ },
+};
</script>
<style lang="scss" scoped>
@@ -473,53 +586,53 @@
//}
.no_touch {
- -webkit-user-select: none;
- user-select: none;
- -ms-user-select: none;
- -moz-user-select: none;
+ -webkit-user-select: none;
+ user-select: none;
+ -ms-user-select: none;
+ -moz-user-select: none;
- @include themify() {
- background: themed("main_background");
- }
+ @include themify() {
+ background: themed("main_background");
+ }
- min-height: 100vh;
+ min-height: 100vh;
}
.list-enter-active,
.list-leave-active {
- will-change: transform;
- transition: all 250ms;
+ will-change: transform;
+ transition: all 250ms;
}
.list-enter {
- opacity: 0;
- transform: translate3d(-100%, 0, 0);
+ opacity: 0;
+ transform: translate3d(-100%, 0, 0);
}
.list-leave {
- opacity: 0;
- transform: translate3d(100%, 0, 0);
+ 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;
+ border-top-left-radius: 20px;
+ border-top-right-radius: 20px;
+ padding: 0 30px;
+ box-sizing: border-box;
}
.my-swipe {
- width: 100%;
+ width: 100%;
}
.active-line {
- position: relative;
- // padding: 15px 0;
- color: #fff;
+ position: relative;
+ // padding: 15px 0;
+ color: #fff;
- @include themify() {
- background-color: themed("color_main");
- }
+ @include themify() {
+ background-color: themed("color_main");
+ }
}
// .active-line::after {
@@ -537,8 +650,8 @@
// }
.shadow {
- bottom: 108px;
- box-sizing: border-box;
+ bottom: 108px;
+ box-sizing: border-box;
}
// .textColor {
@@ -547,98 +660,93 @@
.borderColor,
.border-solid-grey {
- @include themify() {
- border: 1px solid themed("border_color");
- }
+ @include themify() {
+ border: 1px solid themed("border_color");
+ }
}
-
.tabBackground1 {
- @include themify() {
- border: 1px solid themed("border_color1");
- }
+ @include themify() {
+ border: 1px solid themed("border_color1");
+ }
}
// 下拉
.option-box {
- position: absolute;
- left: 0;
- right: 0;
- top: 90px;
- width: 100%;
+ position: absolute;
+ left: 0;
+ right: 0;
+ top: 90px;
+ width: 100%;
- @include themify() {
- background: themed("grey_bg");
- }
+ @include themify() {
+ background: themed("grey_bg");
+ }
- text-align: center;
- border-radius: 4px;
+ text-align: center;
+ border-radius: 4px;
- @include themify() {
- color: themed("text_color3");
- }
+ @include themify() {
+ color: themed("text_color3");
+ }
- z-index: 10;
+ z-index: 10;
}
-.option-box>div {
- padding: 30px 0;
+.option-box > div {
+ padding: 30px 0;
}
-.option-box>div:hover {
- // background-color: #F5F5F5;
+.option-box > div:hover {
+ // background-color: #F5F5F5;
}
.k-select-box {
- position: relative;
- top: -130px;
- justify-content: flex-end;
- padding: 0 30px;
- align-items: center;
+ position: relative;
+ top: -130px;
+ justify-content: flex-end;
+ padding: 0 30px;
+ align-items: center;
- .select-box {
- width: 220px;
+ .select-box {
+ width: 220px;
- @include themify() {
- background: themed("input_background");
- }
-
- margin-right: 20px;
+ @include themify() {
+ background: themed("input_background");
}
+ margin-right: 20px;
+ }
}
.van-popup {
- @include themify() {
- background: themed("color_main");
- }
+ @include themify() {
+ background: themed("color_main");
+ }
}
.actions-active {
- @include themify() {
- background: themed("color_main") !important;
- }
+ @include themify() {
+ background: themed("color_main") !important;
+ }
}
.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__item,
+ ::v-deep .van-action-sheet__cancel {
+ @include themify() {
+ background: themed("input_background1");
}
- ::v-deep .van-action-sheet__gap {
- @include themify() {
- background: themed("cont_background");
- }
+ @include themify() {
+ color: themed("text_color");
}
+ }
+
+ ::v-deep .van-action-sheet__gap {
+ @include themify() {
+ background: themed("cont_background");
+ }
+ }
}
</style>
-
--
Gitblit v1.9.3