| | |
| | | <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="{ slide2: animated1 }" v-if="Number(selectIndex) === 1"> |
| | | <section class="value-container" v-if="showMore"> |
| | | <div class="flex-l"> |
| | | <p class="first-line red">{{ formatMoney(chartData?.close) }}</p> |
| | |
| | | showLength = 7 |
| | | }, |
| | | initFutrue(val) { |
| | | if (val) { |
| | | if (this.$route.query.selectIndex == 2) { |
| | | if (this.isUpdate) { |
| | | setTimeout(() => { |
| | | this.onTopTab(2) |
| | | }) |
| | | this.isUpdate = false |
| | | } |
| | | } |
| | | if (!val || !this.symbol) return |
| | | if (this.selectIndex === 2 && this.curTab && typeof this[this.curTab] === 'function') { |
| | | this.$nextTick(() => { |
| | | this[this.curTab](this.symbol) |
| | | }) |
| | | } |
| | | this.isUpdate = false |
| | | } |
| | | }, |
| | | data() { |
| | |
| | | handleClickShowMore() { |
| | | this.showMore = !this.showMore |
| | | }, |
| | | onTopTab(evt) { // 当前tab 永续/交割 |
| | | this.keyIndex += 1 |
| | | this.selectIndex = evt |
| | | syncContractTab(evt, bumpKey = true) { |
| | | const idx = Number(evt) |
| | | if (bumpKey) { |
| | | this.keyIndex += 1 |
| | | } |
| | | this.selectIndex = idx |
| | | this.clearTimer() |
| | | if (this.selectIndex / 1 === 1) { |
| | | //this.curTab = 'fetchOrderListCur' |
| | | if (idx === 1) { |
| | | 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.curTab = 'fetchFutrueHoldList' |
| | | this.animated1 = true |
| | | this.timer = setTimeout(() => { |
| | | this.animated1 = false |
| | | clearTimeout(this.timer) |
| | | }, 200) |
| | | } |
| | | this[this.curTab](this.symbol) |
| | | if (this.symbol && this.curTab && typeof this[this.curTab] === 'function') { |
| | | this.$nextTick(() => { |
| | | this[this.curTab](this.symbol) |
| | | }) |
| | | } |
| | | }, |
| | | onTopTab(evt) { // 当前tab 永续/交割(页内切换,同步 URL 供底部栏高亮) |
| | | this.syncContractTab(evt, true) |
| | | if (String(this.$route.query.selectIndex) !== String(evt)) { |
| | | this.$router.replace({ |
| | | path: this.$route.path, |
| | | query: { ...this.$route.query, selectIndex: String(evt) } |
| | | }).catch(() => {}) |
| | | } |
| | | }, |
| | | onOrdered(evt) { // 下单过后的回调 |
| | | this.clearTimer() |
| | |
| | | } |
| | | }, |
| | | fetchDeepData(symbol) { |
| | | this.asks = [] |
| | | this.bids = [] |
| | | _getDeepData(symbol).then(data => { // 获取深度 |
| | | this.handleDeep(data) |
| | | this.startDeepSocket() // socket |
| | |
| | | if (symbol) { |
| | | next(vm => { |
| | | if (selectIndex) { |
| | | // vm.selectIndex = selectIndex |
| | | if (vm.selectIndex / 1 === 2) { |
| | | vm.selectIndex = Number(selectIndex) |
| | | if (vm.selectIndex === 2) { |
| | | vm.curTab = 'fetchFutrueHoldList' |
| | | } else { |
| | | //vm.curTab = 'fetchOrderListCur' |
| | | vm.curTab = 'fetchOrderListHold' |
| | | } |
| | | } else { |
| | | //vm.curTab = 'fetchOrderListCur' |
| | | vm.curTab = 'fetchOrderListHold' |
| | | } |
| | | vm.symbol = symbol |
| | |
| | | next() |
| | | } |
| | | }, |
| | | beforeRouteUpdate(to, from, next) { |
| | | const selectIndex = to.query.selectIndex |
| | | if (selectIndex !== undefined && selectIndex !== null && selectIndex !== '') { |
| | | const idx = Number(selectIndex) |
| | | if (this.selectIndex !== idx) { |
| | | this.syncContractTab(idx, true) |
| | | } |
| | | } |
| | | if (to.params.symbol && to.params.symbol !== this.symbol) { |
| | | this.onUpdate(to.params.symbol) |
| | | } |
| | | next() |
| | | }, |
| | | deactivated() { |
| | | this.closeSocket() |
| | | this.clearTimer() |