<template>
|
<div id="cryptos">
|
<div :key="symbol" class="pb-108 no_touch">
|
<!-- 头部区 -->
|
<ContractHeader :symbol="symbol" :range="range" :selectIndex="selectIndex" :symbolName="symbolName"
|
:balance="userInfo.balance" @tab="onTopTab" @update-coin="onUpdate">
|
</ContractHeader>
|
<p class="status-info" v-if="chartData.market && chartData.market.status">
|
<span>{{ chartData.market.status && $t(chartData.market.status) }},</span>
|
<span class="time">{{ chartData.market.time_str }}</span>
|
<span>{{ chartData.market.time_zone && $t(chartData.market.time_zone) }}</span>
|
</p>
|
<div :class="{ slide2: animated1 }" v-if="selectIndex === 1">
|
<!-- <div class="line-container">
|
<div class="index-info line-l" :class="showMore ? 'hidden' : ''">
|
<p class="first-line red">{{ formatMoney(chartData?.close) }}</p>
|
<p class="second-line">
|
<span class="red">{{ chartData?.netChange }}</span>
|
<span class="red">{{ `${chartData?.change_ratio}%` }}</span>
|
</p>
|
</div>
|
<div @click="handleClickShowMore()" class="line-r">
|
<div class="title-box" v-if="!showMore">
|
<span class="text">{{ $t('ExpandQuotes') }}</span>
|
<img src="@/assets/image/down-arrow2.png" alt="arrow" />
|
</div>
|
<div class="title-box" v-else>
|
<span class="text">{{ $t('PutAwayQuotes') }}</span>
|
<img src="@/assets/image/up-arrow2.png" alt="arrow" />
|
</div>
|
</div>
|
</div> -->
|
<section class="value-container" v-if="showMore">
|
<div class="flex-l">
|
<p class="first-line red">{{ formatMoney(chartData?.close) }}</p>
|
<p class="second-line">
|
<span class="red">{{ chartData?.netChange }}</span>
|
<span class="red">{{ `${chartData?.change_ratio}%` }}</span>
|
</p>
|
</div>
|
<div class="flex-r">
|
<div class="flex-r-item">
|
<p>
|
<span class="label">{{ $t('high') }}</span>
|
<span class="value">{{ formatMoney(chartData?.high) }}</span>
|
</p>
|
<p>
|
<span class="label">{{ $t('Low') }}</span>
|
<span class="value">{{ formatMoney(chartData?.low) }}</span>
|
</p>
|
<p>
|
<span class="label">{{ $t('open') }}</span>
|
<span class="value">{{ formatMoney(chartData?.open) }}</span>
|
</p>
|
</div>
|
<div class="flex-r-item">
|
<p>
|
<span class="label">{{ $t('marketValue') }}</span>
|
<span class="value">{{ formatMoney(chartData?.marketCapital) }}</span>
|
</p>
|
<p>
|
<span class="label">{{ $t('share') }}</span>
|
<span class="value">{{ formatMoney(chartData?.open) }}</span>
|
</p>
|
<p>
|
<span class="label">{{ $t('amplitude') }}</span>
|
<span class="value">{{ formatMoney(chartData?.changeRatio) }}</span>
|
</p>
|
</div>
|
<div class="flex-r-item">
|
<p>
|
<span class="label">{{ $t('quantity') }}</span>
|
<span class="value">{{ formatMoney(chartData?.volume) }}</span>
|
</p>
|
<p>
|
<span class="label">{{ $t('Change') }}</span>
|
<span class="value">{{ formatMoney(chartData?.turnoverRate) }}</span>
|
</p>
|
<p>
|
<span class="label">{{ $t('Forehead') }}</span>
|
<span class="value">{{ formatMoney(chartData?.volume) }}</span>
|
</p>
|
</div>
|
</div>
|
</section>
|
<div class="mainBackground rounded-view" key="x">
|
<!-- 永续合约 -->
|
<!-- <PerpetualOpen class="pl-30 pr-30" :key="keyIndex + 'a'" :selectIndex="selectIndex" :symbol="symbol"
|
:green-data="bids" :red-data="asks" :price="price" :init-open="initOpen" :init-close="initClose"
|
:init-futrue="initFutrue" :currentType="currentType" @changeValueBack="changeValueBack"
|
@changeCurrentType="changeCurrentType" @ordered="onOrdered">
|
</PerpetualOpen> -->
|
<div class="line"></div>
|
<!-- 委托/持仓-->
|
<PerpetualOrder class="pl-30 pr-30" :key="keyIndex + 'b'" :symbol="symbol" :order-cur="orderCur"
|
:order-hold="orderHold" :topIndex="selectIndex" :futrue-hold="futrueHold" :futrue-histroy="futrueHistroy"
|
@tab="onTab" @recall="onRecall">
|
</PerpetualOrder>
|
</div>
|
</div>
|
<div :class="{ slide1: animated2 }" v-else>
|
<!-- <div class="line-container">
|
<div class="index-info line-l" :class="showMore ? 'hidden' : ''">
|
<p class="first-line red">{{ formatMoney(chartData?.close) }}</p>
|
<p class="second-line">
|
<span class="red">{{ chartData?.netChange }}</span>
|
<span class="red">{{ `${chartData?.change_ratio}%` }}</span>
|
</p>
|
</div>
|
<div @click="handleClickShowMore()" class="line-r">
|
<div class="title-box" v-if="!showMore">
|
<span class="text">{{ $t('ExpandQuotes') }}</span>
|
<img src="@/assets/image/down-arrow2.png" alt="arrow" />
|
</div>
|
<div class="title-box" v-else>
|
<span class="text">{{ $t('PutAwayQuotes') }}</span>
|
<img src="@/assets/image/up-arrow2.png" alt="arrow" />
|
</div>
|
</div>
|
</div> -->
|
<section class="value-container" v-if="showMore">
|
<div class="flex-l">
|
<p class="first-line red">{{ formatMoney(chartData?.close) }}</p>
|
<p class="second-line">
|
<span class="red">{{ chartData?.netChange }}</span>
|
<span class="red">{{ `${chartData?.change_ratio}%` }}</span>
|
</p>
|
</div>
|
<div class="flex-r">
|
<div class="flex-r-item">
|
<p>
|
<span class="label">{{ $t('high') }}</span>
|
<span class="value">{{ formatMoney(chartData?.high) }}</span>
|
</p>
|
<p>
|
<span class="label">{{ $t('Low') }}</span>
|
<span class="value">{{ formatMoney(chartData?.low) }}</span>
|
</p>
|
<p>
|
<span class="label">{{ $t('open') }}</span>
|
<span class="value">{{ formatMoney(chartData?.open) }}</span>
|
</p>
|
</div>
|
<div class="flex-r-item">
|
<p>
|
<span class="label">{{ $t('marketValue') }}</span>
|
<span class="value">{{ formatMoney(chartData?.marketCapital) }}</span>
|
</p>
|
<p>
|
<span class="label">{{ $t('share') }}</span>
|
<span class="value">{{ formatMoney(chartData?.open) }}</span>
|
</p>
|
<p>
|
<span class="label">{{ $t('amplitude') }}</span>
|
<span class="value">{{ formatMoney(chartData?.changeRatio) }}</span>
|
</p>
|
</div>
|
<div class="flex-r-item">
|
<p>
|
<span class="label">{{ $t('quantity') }}</span>
|
<span class="value">{{ formatMoney(chartData?.volume) }}</span>
|
</p>
|
<p>
|
<span class="label">{{ $t('Change') }}</span>
|
<span class="value">{{ formatMoney(chartData?.turnoverRate) }}</span>
|
</p>
|
<p>
|
<span class="label">{{ $t('Forehead') }}</span>
|
<span class="value">{{ formatMoney(chartData?.volume) }}</span>
|
</p>
|
</div>
|
</div>
|
</section>
|
<div class="mainBackground rounded-view" key="y">
|
<PerpetualOpen class="pl-30 pr-30" :key="keyIndex + 'c'" :selectIndex="selectIndex" :symbol="symbol"
|
:green-data="bids" :red-data="asks" :price="price" :init-open="initOpen" :init-close="initClose"
|
:init-futrue="initFutrue" @ordered="onOrdered" @changeValueBack="changeValueBack">
|
</PerpetualOpen>
|
<div class="line"></div>
|
<!-- 委托/持仓-->
|
<PerpetualOrder class="pl-30 pr-30" :key="keyIndex + 'd'" :symbol="symbol" :order-cur="orderCur"
|
:order-hold="orderHold" :price="price" :topIndex="selectIndex" :futrue-hold="futrueHold"
|
:futrue-histroy="futrueHistroy" @tab="onTab" @recall="onRecall">
|
</PerpetualOrder>
|
</div>
|
</div>
|
|
</div>
|
<div class="fixed-box">
|
<div class="flex justify-between items-center px-30 py-20" @click.stop="handleClickShowKlineChart()">
|
<span class="font-30 textColor2" style="color:#fff;">{{ symbol.toUpperCase() }} {{ $t('k线图表') }}</span>
|
<van-icon class="font-30" style="color:#fff;" :name="showCharts ? 'arrow-down' : 'arrow-up'"></van-icon>
|
</div>
|
<!-- <section class="indicator-index-container" v-if="showKlineChart">
|
<div class="indicator-index-box">
|
<div class="flex-l">
|
<ul>
|
<li v-for="(item, index) in filterOne" :key="item" @click="handleClickSelectTime(item, index)"
|
:class="[item.index === timeLabelActive ? 'active' : '']">{{
|
item.name
|
}}</li>
|
<li @click="handleClickMoreBtn">{{ $t('更多') }}</li>
|
</ul>
|
</div>
|
</div>
|
<div class="indicator-index-box-second" v-if="showMore">
|
<ul>
|
<li v-for="(item, index) in filterTwo" :key="item" @click="handleClickSelectTime(item, index)"
|
:class="[item.index === timeLabelActive ? 'active' : '']">{{
|
item.name
|
}}</li>
|
</ul>
|
</div>
|
</section> -->
|
<div class="kline-container flex" v-if="showKlineChart">
|
<div class="chart-index">
|
<!-- <fx-kline :height="500" :symbol="symbol" :isShowsolid="true" :chartType="chartType" v-if="symbol" @data="onData"
|
:key="`${symbol}-${timeValue}`" /> -->
|
<k-line-charts :update-key="updateKey" :update-data="quote" :symbol="symbol" :showBottom="true" />
|
</div>
|
</div>
|
</div>
|
</div>
|
</template>
|
|
<script>
|
import ContractHeader from '@/components/Transform/contract-header/index.vue'
|
import PerpetualOpen from '@/components/Transform/perpetual-open/index.vue'
|
import PerpetualOrder from '@/components/Transform/perpetual-order/index.vue'
|
|
import { _getDeepData, _initOpen, _initClose, _futrueOrderInit, _contractApplyOrderList, contractOrder, _futrueOrderList } from "@/service/trade.api";
|
import { _getBalance } from '@/service/user.api'
|
import { _getHomeList } from '@/service/home.api'
|
import { Popup, Swipe, SwipeItem } from 'vant';
|
import { mapActions, mapGetters } from 'vuex'
|
import { SET_COIN_LIST } from '@/store/const.store'
|
import { WS_URL } from '@/config'
|
import { getStorage, formatMoney } from '@/utils/index'
|
import { useQuotesStore } from '@/store/quotes.store'
|
import { SET_STAGE } from '@/store/types.store';
|
import KLineCharts from '@/components/Transform/kline-charts/index.vue'
|
const quotesStore = useQuotesStore()
|
|
var showLength = 7
|
export default {
|
name: "perpetualContract",
|
components: {
|
ContractHeader,
|
PerpetualOpen,
|
PerpetualOrder,
|
[Popup.name]: Popup,
|
[Swipe.name]: Swipe,
|
[SwipeItem.name]: SwipeItem,
|
KLineCharts
|
},
|
computed: {
|
...mapGetters('user', ['userInfo']),
|
...mapGetters({
|
coinList: 'home/coinList',
|
}),
|
},
|
watch: {
|
selectIndex(val) {
|
showLength = 7
|
},
|
initFutrue(val) {
|
if (val) {
|
if (this.$route.query.selectIndex == 2) {
|
if (this.isUpdate) {
|
setTimeout(() => {
|
this.onTopTab(2)
|
})
|
this.isUpdate = false
|
}
|
}
|
}
|
}
|
},
|
data() {
|
const initArr = []
|
for (let i = 0; i < showLength; i++) {
|
initArr.push({
|
amount: '--',
|
price: '--'
|
})
|
}
|
return {
|
quote: {},
|
initTimer: null,
|
keyIndex: 0,
|
timeout: null,
|
timer: null, // 底部持仓等的公用定时器
|
timer2: null, // 交割合约底部持仓等的公用定时器
|
balance: 0,
|
symbol: '',
|
price: '',
|
range: '',
|
initOpen: {},
|
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,
|
currentType: 'open',
|
showCharts: false,
|
type: 'cryptos',
|
chartData: {},
|
showMore: false,
|
filterOne: [
|
{ name: this.$t('分时'), paramsValue: 'timeSharing', seconds: 1 * 60 * 1000, index: 0, },
|
{ name: '1' + this.$t('天'), paramsValue: '1day', seconds: 1 * 24 * 60 * 60 * 1000, index: 1, },
|
{ name: '1' + this.$t('周'), paramsValue: '1week', seconds: 7 * 24 * 60 * 60 * 1000, index: 2, },
|
{ name: '1' + this.$t('月'), paramsValue: '1mon', seconds: 30 * 24 * 60 * 60 * 1000, index: 3, },
|
{ name: '5' + this.$t('天'), paramsValue: '5day', seconds: 5 * 24 * 60 * 60 * 1000, index: 4, },
|
{ name: this.$t('season'), paramsValue: '1quarter', seconds: 3 * 30 * 24 * 60 * 60 * 1000, index: 5, },
|
{ name: this.$t('Year'), paramsValue: '1year', seconds: 12 * 30 * 24 * 60 * 60 * 1000, index: 6, },
|
],
|
filterTwo: [
|
{ name: '120' + this.$t('分'), paramsValue: '120min', seconds: 2 * 60 * 60 * 1000, index: 7, },
|
{ name: '60' + this.$t('分'), paramsValue: '60min', seconds: 1 * 60 * 60 * 1000, index: 8, },
|
{ name: '30' + this.$t('分'), paramsValue: '30min', seconds: 30 * 60 * 1000, index: 9, },
|
{ name: '15' + this.$t('分'), paramsValue: '15min', seconds: 15 * 60 * 1000, index: 10, },
|
{ name: '5' + this.$t('分'), paramsValue: '5min', seconds: 5 * 60 * 1000, index: 11, },
|
{ name: '1' + this.$t('分'), paramsValue: '1min', seconds: 1 * 60 * 1000, index: 12, },
|
],
|
showKlineChart: false,
|
chartType: '',
|
timeValue: '',
|
chartData: {},
|
timeLabelActive: 1,
|
showMore: false,
|
symbolName: '',
|
updateKey: 1,
|
currentType: 'long',
|
isUpdate: true
|
}
|
},
|
async created() {
|
|
if (this.$route.query.type) {
|
this.type = this.$route.query.type
|
}
|
await this.SET_COIN_LIST(this.type)
|
_getBalance().then(data => { // 获取用户余额
|
this.$store.commit('user/SET_USERINFO', { balance: data.money })
|
// const { money } = data
|
// this.balance = money
|
})
|
},
|
methods: {
|
...mapActions('home', [SET_COIN_LIST]),
|
onUpdate(symbol) { // 更新
|
this.currentType = 'long'
|
this.symbol = symbol
|
this.closeSocket()
|
this.init(symbol)
|
},
|
changeCurrentType(type) {
|
this.currentType = type
|
},
|
formatMoney,
|
handleClickShowKlineChart() {
|
this.showKlineChart = !this.showKlineChart
|
},
|
handleClickSelectTime(params) {
|
const { paramsValue, seconds, index } = params;
|
this.timeLabelActive = index;
|
quotesStore[SET_STAGE]({ stage: paramsValue, seconds })
|
this.onSelectTime(paramsValue)
|
},
|
onSelectTime(evt) {
|
this.timeValue = evt
|
if (evt == 'timeSharing') {
|
this.chartType = 'area'
|
} else {
|
this.chartType = 'candle_solid'
|
}
|
},
|
// 事件
|
onData(data) {
|
this.chartData = data
|
},
|
handleClickMoreBtn() {
|
this.showMore = !this.showMore
|
},
|
onRecall() { // 撤单or 平仓 evt
|
this.clearTimer()
|
let obj = {
|
symbol: this.symbol,
|
type: 'orders',
|
page_no: 1,
|
symbolType: 'cryptos'
|
}
|
contractOrder(obj).then(data => {
|
|
this.orderHold = data
|
})
|
this[this.curTab](this.symbol)
|
_initOpen({ symbol: this.symbol }).then(data => {
|
this.initOpen = data
|
})
|
},
|
handleClickShowMore() {
|
this.showMore = !this.showMore
|
},
|
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.timer = setTimeout(() => {
|
this.animated2 = false
|
clearTimeout(this.timer)
|
}, 200)
|
} else {
|
// this.animated2 = true
|
// this.timer = setTimeout(() => {
|
// this.animated2 = false
|
// clearTimeout(this.timer)
|
// }, 200)
|
this.animated1 = true
|
this.timer = setTimeout(() => {
|
this.animated1 = false
|
clearTimeout(this.timer)
|
}, 200)
|
}
|
this[this.curTab](this.symbol)
|
},
|
onOrdered(evt) { // 下单过后的回调
|
this.clearTimer()
|
// this.clearTimeout()
|
this.initParam(this.symbol, evt) // 重新初始化
|
// 判断方法是否存在
|
const fn = this[this.curTab];
|
if (typeof fn === 'function') {
|
fn.call(this, this.symbol);
|
console.log('[onOrdered] 调用方法:', this.curTab, '参数:', this.symbol, '事件:', evt);
|
} else {
|
console.warn(`[onOrdered] curTab 方法不存在: ${this.curTab}`);
|
}
|
//console.log('下单后更新数据')
|
},
|
onTab(evt) { // 点击tab后的回调
|
console.log('evt2', evt)
|
this.clearTimer()
|
// this.clearTimeout()
|
this.curTab = evt
|
this[evt](this.symbol)
|
},
|
fetchQoutes(symbol) { // 获取当前行情
|
_getHomeList(symbol).then(data => { // 获取行情
|
this.symbolName = data[0].name
|
console.log(data[0].name)
|
this.handleQoutes(data)
|
this.startQuoteSocket() // socket
|
})
|
},
|
handleQoutes(data) {
|
if (data && data.length) {
|
const cur = data[0]
|
this.price = cur.close
|
this.range = cur.change_ratio + ''
|
this.quote = cur
|
this.updateKey++
|
}
|
},
|
fetchDeepData(symbol) {
|
_getDeepData(symbol).then(data => { // 获取深度
|
this.handleDeep(data)
|
this.startDeepSocket() // socket
|
})
|
},
|
handleDeep(data) {
|
this.deepData = data
|
const { asks, bids } = data
|
// this.asks = []
|
// this.bids = []
|
// if (asks.length < showLength) {
|
// for (let i = 0; i < showLength - asks.length; i++) {
|
// let obj = {
|
// amount: '--',
|
// price: '--'
|
// }
|
// asks.push(obj)
|
// }
|
// }
|
// if (bids.length < showLength) {
|
// for (let i = 0; i < showLength - bids.length; i++) {
|
// let obj = {
|
// amount: '--',
|
// price: '--'
|
// }
|
// this.bids.push(obj)
|
// }
|
// }
|
this.asks = asks.sort((a, b) => b.price - a.price).slice(0, showLength)
|
this.bids = bids.sort((a, b) => b.price - a.price).slice(0, showLength)
|
},
|
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)
|
this.chartData = _data[0] ?? {}
|
}
|
}
|
},
|
startDeepSocket() {
|
this.sockets.deep = new WebSocket(`${WS_URL}/3/${this.symbol}`)
|
this.sockets.deep.onmessage = (evt) => {
|
const { data } = evt
|
const { code, data: _data } = JSON.parse(data)
|
if (code / 1 === 0) {
|
if (_data) {
|
this.handleDeep(_data)
|
}
|
}
|
}
|
},
|
initParam(symbol, type) { // 初始化参数
|
if (type === 'open' || type === 'long' || type === 'short' || !type) {
|
let initFunTimer = null;
|
let initFun = () => {
|
_initOpen({ symbol: symbol }).then(data => {
|
console.log(data, '22222222')
|
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: 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 => {
|
console.log(data, '数据9999')
|
this.initFutrue = data
|
})
|
}
|
},
|
fetchOrderListCur(symbol) { // 当前委托
|
//console.log('当前委托')
|
if (this.userInfo.token) {
|
_contractApplyOrderList({
|
symbol,
|
type: 'orders',
|
page_no: 1
|
}).then(data => {
|
this.orderCur = data
|
})
|
this.clearTimer()
|
this.timer = setInterval(() => {
|
_contractApplyOrderList({
|
symbol,
|
type: 'orders',
|
page_no: 1
|
}).then(data => {
|
// if (typeof this.timer === 'string') {
|
// this.timer = null
|
// return
|
// }
|
this.orderCur = data
|
})
|
}, 1000)
|
}
|
},
|
fetchOrderListHold(symbol) { // 当前持仓
|
let obj = {
|
symbol: symbol,
|
type: 'orders',
|
page_no: 1,
|
symbolType: 'cryptos'
|
}
|
if (this.userInfo.token) {
|
contractOrder(obj).then(data => {
|
// this.orderHold = data
|
this.orderHold = data.sort(this.sortData);
|
})
|
this.timer = setInterval(() => {
|
contractOrder(obj).then(data => {
|
// if (typeof this.timer === 'string') {
|
// this.timer = null
|
// return
|
// }
|
// this.orderHold = data
|
this.orderHold = data.sort(this.sortData);
|
})
|
}, 1000)
|
}
|
},
|
fetchFutrueHoldList(symbol) { // 交割持仓
|
if (this.userInfo.token) {
|
_futrueOrderList(symbol, 'orders', 1, 'cryptos').then(data => {
|
// this.futrueHold = data
|
this.futrueHold = data.sort(this.sortData);
|
})
|
this.timer = setInterval(() => {
|
_futrueOrderList(symbol, 'orders', 1, 'cryptos').then(data => {
|
// if (typeof this.timer === 'string') {
|
// this.timer = null
|
// return
|
// }
|
// this.futrueHold = data
|
this.futrueHold = data.sort(this.sortData);
|
})
|
}, 1000)
|
}
|
},
|
fetchFutrueHistory(symbol) { // 交割历史持仓
|
_futrueOrderList(symbol, 'hisorders', 1, 'cryptos').then(data => {
|
this.futrueHistroy = data
|
// this.clearTimeout()
|
})
|
},
|
init(symbol) { // 初始化页面
|
this.symbol = symbol
|
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)
|
}
|
|
},
|
closeSocket() {
|
this.sockets.quotes && this.sockets.quotes.close()
|
this.sockets.deep && this.sockets.deep.close()
|
this.sockets.quotes = null
|
this.sockets.deep = null
|
},
|
// clearTimeout(noNeed) {
|
// clearTimeout(this.timeout)
|
// if (noNeed) { // 防止timout定时器因接口返回继续触发
|
// this.timeout = ''
|
// return
|
// }
|
// this.timeout = null
|
// },
|
clearTimer() {
|
clearInterval(this.timer)
|
// if (isNeed) {
|
// this.timer = ''
|
// return
|
// }
|
this.timer = null
|
},
|
changeCurrentType(type) {
|
this.currentType = type
|
},
|
changeValueBack(val) {
|
if (val == 0) {
|
showLength = 7
|
} else {
|
showLength = 14
|
}
|
},
|
sortData(a, b) {
|
return new Date(b.open_time).getTime() - new Date(a.open_time).getTime()
|
}
|
},
|
beforeRouteEnter(to, from, next) {
|
let { params: { symbol }, query: { selectIndex } } = to
|
let catchSymbol = getStorage('symbol')
|
if (!symbol && catchSymbol) {
|
symbol = catchSymbol
|
}
|
if (symbol) {
|
next(vm => {
|
if (selectIndex) {
|
// vm.selectIndex = selectIndex
|
if (vm.selectIndex / 1 === 2) {
|
vm.curTab = 'fetchFutrueHoldList'
|
} else {
|
//vm.curTab = 'fetchOrderListCur'
|
vm.curTab = 'fetchOrderListHold'
|
}
|
} else {
|
//vm.curTab = 'fetchOrderListCur'
|
vm.curTab = 'fetchOrderListHold'
|
}
|
vm.symbol = symbol
|
vm.init(symbol)
|
})
|
} else {
|
next()
|
}
|
},
|
deactivated() {
|
this.closeSocket()
|
this.clearTimer()
|
},
|
beforeUnmount() {
|
this.closeSocket()
|
// this.clearTimeout(true)
|
this.clearTimer()
|
}
|
}
|
|
</script>
|
|
<style lang="scss">
|
//.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)
|
//}
|
@import "@/assets/init.scss";
|
|
#cryptos {
|
.status-info {
|
margin-top: 20px;
|
padding: 0 30px;
|
font-size: 24px;
|
line-height: 64px;
|
height: 64px;
|
border-top: 1px solid $border_color;
|
border-bottom: 1px solid $border_color;
|
|
.time {
|
width: 220px;
|
display: inline-block;
|
}
|
}
|
|
.no_touch {
|
-webkit-user-select: none;
|
user-select: none;
|
-ms-user-select: none;
|
-moz-user-select: none;
|
}
|
|
.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;
|
}
|
|
|
.line-container {
|
margin-top: 10px;
|
display: flex;
|
justify-content: space-between;
|
|
.line-l {
|
margin-left: 24px;
|
display: flex;
|
flex: 1;
|
align-items: center;
|
|
.first-line {
|
font-weight: 700;
|
font-size: 32px;
|
color: $red;
|
}
|
|
.second-line {
|
margin-left: 10px;
|
text-align: left;
|
}
|
}
|
|
|
.hidden {
|
visibility: hidden;
|
}
|
|
.line-r {
|
padding: 0 30px;
|
display: flex;
|
width: 210px;
|
margin-right: 12px;
|
font-size: 12px;
|
}
|
|
.title-box {
|
flex: 1;
|
display: flex;
|
justify-content: flex-end;
|
align-items: center;
|
font-size: 12px;
|
text-align: right;
|
|
span {
|
color: #747A8F;
|
}
|
|
img {
|
margin-left: 10px;
|
width: 20px;
|
height: 20px;
|
}
|
}
|
}
|
|
|
.my-swipe {
|
width: 100%;
|
}
|
|
.my-swipe .van-swipe-item {}
|
|
.line {
|
height: 13px;
|
background: $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;
|
}
|
|
.value-container {
|
padding: 10px 12px;
|
margin-top: 4px;
|
display: flex;
|
justify-content: space-between;
|
font-size: 12px;
|
color: #747A8F;
|
border-bottom: 1px solid $border_color;
|
|
.flex-l {
|
display: flex;
|
flex-direction: column;
|
justify-content: center;
|
width: 240px;
|
|
.first-line {
|
font-weight: 700;
|
font-size: 32px;
|
color: $red;
|
}
|
|
.second-line {
|
margin-top: 8px;
|
text-align: left;
|
}
|
}
|
|
.flex-r {
|
flex: 1;
|
display: flex;
|
align-items: center;
|
color: $text_color;
|
|
.flex-r-item {
|
flex: 1;
|
|
.label {
|
color: $lable_color;
|
margin-right: 10px;
|
}
|
}
|
}
|
}
|
}
|
|
.fixed-box {
|
position: fixed;
|
width: 100%;
|
bottom: 0;
|
left: 0;
|
z-index: 1000;
|
background: #141417;
|
}
|
|
.indicator-index-container {
|
.indicator-index-box {
|
padding: 24px;
|
display: flex;
|
// justify-content: space-between;
|
align-items: center;
|
|
|
|
ul {
|
display: flex;
|
flex-wrap: wrap;
|
|
li {
|
text-align: center;
|
margin: 0 8px;
|
padding: 0px 8px;
|
font-size: 24px;
|
border-radius: 8px;
|
}
|
}
|
|
|
.flex-r {
|
display: flex;
|
justify-content: flex-end;
|
width: 80px;
|
|
img {
|
width: 12px;
|
height: 16px;
|
}
|
|
}
|
}
|
|
.active {
|
background: $btn_main;
|
}
|
}
|
|
.indicator-index-box-second {
|
ul {
|
display: flex;
|
border: 1px solid $border_color;
|
align-items: center;
|
border-right: none;
|
}
|
|
li {
|
flex: 1;
|
height: 64px;
|
line-height: 64px;
|
text-align: center;
|
font-size: 12px;
|
border-right: 1px solid $border_color;
|
}
|
}
|
|
.kline-container {
|
margin-top: 10px;
|
|
.order-book-container {
|
padding: 100px 2px 0 6px;
|
width: 130px;
|
border-left: 1px solid $border_color;
|
}
|
|
.chart-index {
|
flex: 1;
|
min-width: 200px;
|
}
|
|
|
|
.text-sm {
|
position: relative;
|
}
|
|
.select-div {
|
width: 100px;
|
position: absolute;
|
top: 30px;
|
left: 0;
|
z-index: 100;
|
|
ul {
|
box-shadow: 0px 3px 11px 0px rgb(0 0 0 / 10%);
|
|
li {
|
background: $text_color;
|
text-align: center;
|
padding: 10px 0;
|
font-size: 16px;
|
}
|
|
li:not(:last-child) {
|
border-bottom: 1px solid $border-grey;
|
}
|
}
|
}
|
|
.active {
|
background: $btn_main !important;
|
color: $text_color;
|
}
|
}
|
</style>
|
