18 changed files with 3771 additions and 9 deletions
@ -0,0 +1,461 @@ |
|||
<template> |
|||
<div class="main-chart mb5" style="height: 100%;"> |
|||
<!-- TradingView Widget BEGIN --> |
|||
<div class="tradingview-widget-container" style="height: 100%;"> |
|||
<div id="tradingview_lautin" style="height: 100%;"> |
|||
<!-- 存放图表库容器 --> |
|||
</div> |
|||
</div> |
|||
<!-- TradingView Widget END --> |
|||
</div> |
|||
</template> |
|||
|
|||
<script> |
|||
import Model from "@/api/custom/Model"; |
|||
import Option from "@/api/option"; |
|||
import Exchange from "@/api/exchange"; |
|||
import tvStyle from "@/assets/js/tvStyle.js"; |
|||
import { mapState } from "vuex"; |
|||
import bus from "@/components/bus.js"; |
|||
|
|||
export default { |
|||
props: ["socket", "symbol", "priceDecimals"], |
|||
|
|||
data() { |
|||
return { |
|||
model: null, // 数据模型 |
|||
interval: "D" ,// [字符串格式]和TV的resolution同步 |
|||
// interval: "60" ,// [字符串格式]和TV的resolution同步 |
|||
theme:localStorage.getItem('theme')||'dark', |
|||
intertime: '' |
|||
}; |
|||
}, |
|||
|
|||
computed: { |
|||
lang() { |
|||
let local; |
|||
// console.log(localStorage.lang) |
|||
if (localStorage.lang) { |
|||
if (localStorage.lang == "tw") { |
|||
local = "zh_TW"; |
|||
} else if (localStorage.lang == "cn") { |
|||
local = "zh"; |
|||
} else if (localStorage.lang == "kor") { |
|||
local = "ko"; |
|||
} else if (localStorage.lang == "jp") { |
|||
local = "ja"; |
|||
} else if (localStorage.lang == "de") { |
|||
local = "de_DE"; |
|||
} else if (localStorage.lang == "fra") { |
|||
local = "fr"; |
|||
} else if (localStorage.lang == "it") { |
|||
local = "it"; |
|||
} else if (localStorage.lang == "pt") { |
|||
local = "pt"; |
|||
} else if (localStorage.lang == "spa") { |
|||
local = "es"; |
|||
} else if (localStorage.lang == "en") { |
|||
local = "en"; |
|||
}else { |
|||
local = "en"; |
|||
} |
|||
} |
|||
return local; |
|||
}, |
|||
// ...mapState({ |
|||
// theme: "theme" |
|||
// }) |
|||
}, |
|||
methods: { |
|||
translateInterval2Period() { |
|||
let period; |
|||
switch (this.interval) { |
|||
case "1": |
|||
period = "1min"; |
|||
break; |
|||
case "5": |
|||
period = "5min"; |
|||
break; |
|||
case "15": |
|||
period = "15min"; |
|||
break; |
|||
case "30": |
|||
period = "30min"; |
|||
break; |
|||
case "60": |
|||
period = "60min"; |
|||
break; |
|||
case "D": |
|||
case "1D": |
|||
period = "1day"; |
|||
break; |
|||
case "W": |
|||
case "1W": |
|||
period = "1week"; |
|||
break; |
|||
case "M": |
|||
case "1M": |
|||
period = "1mon"; |
|||
break; |
|||
} |
|||
return period; |
|||
}, |
|||
translateInterval2Period1() { |
|||
let period1; |
|||
switch (this.intertime) { |
|||
case "1": |
|||
period1 = "1min"; |
|||
break; |
|||
case "5": |
|||
period1 = "5min"; |
|||
break; |
|||
case "15": |
|||
period1 = "15min"; |
|||
break; |
|||
case "30": |
|||
period1 = "30min"; |
|||
break; |
|||
case "60": |
|||
period1 = "60min"; |
|||
break; |
|||
case "D": |
|||
case "1D": |
|||
period1 = "1day"; |
|||
break; |
|||
case "W": |
|||
case "1W": |
|||
period1 = "1week"; |
|||
break; |
|||
case "M": |
|||
case "1M": |
|||
period1 = "1mon"; |
|||
break; |
|||
} |
|||
return period1; |
|||
}, |
|||
// 创建分时按钮 |
|||
createBtns() { |
|||
const model = this.model; |
|||
const widget = this.model.widget; |
|||
// widget.createButton() |
|||
// .addClass("my-theme") |
|||
// .text("主题") |
|||
// .on("click", function () { |
|||
// console.log(widget); |
|||
// widget.changeTheme("aa"); |
|||
|
|||
// }).parent().addClass('my-aa') |
|||
|
|||
// 创建分时按钮 |
|||
const resolutions = [ |
|||
// { |
|||
// title: 'Time', |
|||
// resolution: '1', |
|||
// chartType: 3 |
|||
// }, // 1，2，3几种类型 |
|||
{ |
|||
title: "1" + this.$t("exchange.min"), |
|||
resolution: "1", |
|||
chartType: 1 |
|||
}, |
|||
{ |
|||
title: "5" + this.$t("exchange.min"), |
|||
resolution: "5", |
|||
chartType: 1 |
|||
}, |
|||
{ |
|||
title: "15" + this.$t("exchange.min"), |
|||
resolution: "15", |
|||
chartType: 1 |
|||
}, |
|||
{ |
|||
title: "30" + this.$t("exchange.min"), |
|||
resolution: "30", |
|||
chartType: 1 |
|||
}, |
|||
{ |
|||
title: "1" + this.$t("exchange.hour"), |
|||
resolution: "60", |
|||
chartType: 1 |
|||
}, |
|||
{ |
|||
title: "1" + this.$t("exchange.day"), |
|||
resolution: "D", |
|||
chartType: 1 |
|||
}, |
|||
{ |
|||
title: "1" + this.$t("exchange.week"), |
|||
resolution: "W", |
|||
chartType: 1 |
|||
}, |
|||
{ |
|||
title: "1" + this.$t("exchange.month"), |
|||
resolution: "M", |
|||
chartType: 1 |
|||
} |
|||
]; |
|||
|
|||
let btns = [], // 存放所有按钮 |
|||
parents = []; |
|||
resolutions.forEach(item => { |
|||
// 生成按钮 |
|||
let $parent = widget |
|||
.createButton() |
|||
.attr("title", item.title) |
|||
.addClass("my-date") |
|||
.css({ |
|||
background: (index, value) => { |
|||
if (this.interval == item.resolution) { |
|||
return this.theme=='dark'?'#ccc':'#091722'; |
|||
} |
|||
}, |
|||
color: () => { |
|||
if (this.interval == item.resolution) { |
|||
return "#758696"; |
|||
} |
|||
} |
|||
}) |
|||
.text(item.title) |
|||
.on("click", function(e) { |
|||
const btns = this.parentNode.parentNode.querySelectorAll( |
|||
".my-date" |
|||
); |
|||
|
|||
btns.forEach(btn => { |
|||
if (btn === this) { |
|||
btn.style.cssText = `background : ${this.theme=='dark'?'#ccc':'#091722'}; |
|||
color:#758696;`; |
|||
} else btn.style.cssText = ``; |
|||
}); |
|||
|
|||
// widget.chart().setResolution(item.resolution, function onReadyCallback() {}); |
|||
model.setResolution(item.resolution, function onReadyCallback() {}); |
|||
}) |
|||
.parent() |
|||
.addClass("my-group"); |
|||
|
|||
parents.push($parent[0]); // 父节点集合 |
|||
}); |
|||
widget.chart() |
|||
.createStudy( |
|||
"Moving Average", |
|||
false, |
|||
true, |
|||
[5, "close", 0], |
|||
null, |
|||
{ |
|||
"Plot.color": "#e843da", |
|||
} |
|||
); |
|||
widget.chart() |
|||
.createStudy( |
|||
"Moving Average", |
|||
false, |
|||
true, |
|||
[10, "close", 0], |
|||
null, |
|||
{ |
|||
"Plot.color": "#53b987", |
|||
} |
|||
); |
|||
widget.chart() |
|||
.createStudy( |
|||
"Moving Average", |
|||
false, |
|||
true, |
|||
[30, "close", 0], |
|||
null, |
|||
{ |
|||
"Plot.color": "#ff231f", |
|||
} |
|||
); |
|||
|
|||
// setTimeout(function () { |
|||
// // 给my-group外层套一个DIV |
|||
// const resolution_container = document.createElement("div"); |
|||
// resolution_container.className = "resolution_container"; |
|||
// $(resolution_container).append($(parents).clone()); |
|||
// $(resolution_container).replaceAll($(parents[0])); |
|||
// // |
|||
// }, 50) |
|||
}, |
|||
|
|||
// 获取交易对基本信息 |
|||
getSymbol() { |
|||
if (this.priceDecimals) { |
|||
return Promise.resolve({ |
|||
pair_name: this.priceDecimals |
|||
}); |
|||
} else { |
|||
return Exchange.getSymbolInfo({ |
|||
symbol: this.symbol |
|||
}); |
|||
} |
|||
}, |
|||
// 解压 |
|||
unzip(b64Data) { |
|||
let u8 = window.atob(b64Data); |
|||
let jiya = window.pako.inflate(u8) |
|||
let str = this.Uint8ArrayToString(jiya); |
|||
return JSON.parse(str); |
|||
}, |
|||
Uint8ArrayToString(fileData) { |
|||
var dataString = ""; |
|||
for (var i = 0; i < fileData.length; i++) { |
|||
dataString += String.fromCharCode(fileData[i]); |
|||
} |
|||
return dataString; |
|||
}, |
|||
// 获取历史记录数据 |
|||
getHistoryCallback(onLoadCallback) { |
|||
// 取图表回传的solution |
|||
this.intertime = this.interval; |
|||
this.interval = this.model.interval; |
|||
|
|||
// 转化接口所需的period |
|||
let period1 = this.translateInterval2Period1(); |
|||
let period = this.translateInterval2Period(); |
|||
if(this.intertime!==this.model.interval){ |
|||
this.model.subscribe([ |
|||
{ |
|||
cmd: "unsub", |
|||
msg: `Kline_${this.symbol}_${period1}` |
|||
}, |
|||
{ |
|||
cmd: "sub", |
|||
msg: `Kline_${this.symbol}_${period}` |
|||
} |
|||
]); |
|||
|
|||
// 已有图表库 通过修改symbol触发图标库更新 重新执行getSymbol和getBar |
|||
this.model.setSymbol(this.symbol); |
|||
} |
|||
|
|||
Option.getStockKline({ |
|||
symbol: this.symbol, |
|||
period, |
|||
size: 500, |
|||
zip:1 |
|||
}) |
|||
.then(data => { |
|||
let list = []; |
|||
// 组装tv数据格式 |
|||
for (let item of this.unzip(data.data)) { |
|||
list.push({ |
|||
time: item.id * 1000, |
|||
open: item.open, |
|||
high: item.high, |
|||
low: item.low, |
|||
close: item.close, |
|||
volume: item.amount |
|||
}); |
|||
} |
|||
let lastTime = list[list.length - 1].time; |
|||
// console.log(lastTime,'--------') |
|||
onLoadCallback(list, lastTime); |
|||
}) |
|||
.catch(err => {}); |
|||
}, |
|||
|
|||
// 初始化图表 |
|||
initTV() { |
|||
// 先订阅数据 再创建图表库 |
|||
let period = this.translateInterval2Period(); |
|||
this.model.subscribe([ |
|||
{ |
|||
cmd: "sub", |
|||
msg: `Kline_${this.symbol}_${period}` |
|||
} |
|||
]); |
|||
// console.log(this.lang) |
|||
this.model.init( |
|||
{ |
|||
// 初始化交易对和分时 |
|||
symbol: this.symbol, |
|||
interval: this.interval, |
|||
container_id: "tradingview_lautin", // 设置容器 |
|||
height: 1000, |
|||
locale: this.lang, // 语言设置 |
|||
priceDecimals: this.priceDecimals, |
|||
disabled_features:['header_resolutions','header_symbol_search', "volume_force_overlay"], |
|||
enabled_features:['header_indicators'], |
|||
overrides: tvStyle[this.theme], |
|||
// toolbar_bg: this.theme == "dark" ? "#222e3d" : "#f1f3f6",#121212 |
|||
toolbar_bg: this.theme == "dark" ? "#121212" : "#f1f3f6", |
|||
custom_css_url: `/static/Kline/charting_library/static/css/tradingview_${ |
|||
this.theme == "dark" ? "black" : "white" |
|||
}.css`, |
|||
debug:false, |
|||
}, |
|||
this.getHistoryCallback |
|||
); |
|||
|
|||
// 创建分时和主题按钮 |
|||
this.model.widget.onChartReady(this.createBtns.bind(this)); |
|||
} |
|||
}, |
|||
|
|||
watch: { |
|||
// 渲染图表库内容 |
|||
symbol(newVal, oldVal) { |
|||
if (!oldVal) { |
|||
// 初始化订阅数据并渲染图表库 |
|||
this.initTV(); |
|||
} else { |
|||
// 切换交易对 取消旧数据 订阅新数据 |
|||
let period = this.translateInterval2Period(); |
|||
this.model.subscribe([ |
|||
{ |
|||
cmd: "unsub", |
|||
msg: `Kline_${oldVal}_${period}` |
|||
}, |
|||
{ |
|||
cmd: "sub", |
|||
msg: `Kline_${newVal}_${period}` |
|||
} |
|||
]); |
|||
|
|||
// 已有图表库 通过修改symbol触发图标库更新 重新执行getSymbol和getBar |
|||
this.model.setSymbol(newVal); |
|||
} |
|||
}, |
|||
}, |
|||
|
|||
created() { |
|||
bus.$on('sendMsg', msg => { |
|||
// console.info(msg) |
|||
// this.model = new Model(msg, this); |
|||
this.model.conglian(msg) |
|||
let period = this.translateInterval2Period(); |
|||
this.model.subscribe([ |
|||
{ |
|||
cmd: "sub", |
|||
msg: `Kline_${this.symbol}_${period}` |
|||
} |
|||
]); |
|||
|
|||
}); |
|||
}, |
|||
|
|||
mounted() { |
|||
// console.Info(this.socket) |
|||
// 初始化模型对象 建立ws连接 |
|||
this.model = new Model(this.socket, this); |
|||
|
|||
// 刷新页面时订阅数据并创建图表 |
|||
if (this.symbol) this.initTV(); // 必须在mounted之后 因为渲染tv时需要查找容器 |
|||
} |
|||
}; |
|||
</script> |
|||
|
|||
<style lang="scss"> |
|||
#tradingview_lautin { |
|||
height: 550px; |
|||
} |
|||
|
|||
// 分时按钮 |
|||
#tradingview_878d2 .my-group { |
|||
cursor: pointer !important; |
|||
border: 1px solid red !important; |
|||
} |
|||
</style> |
|||
@ -0,0 +1,390 @@ |
|||
<template> |
|||
<div class="col-md-3" style="background-color: #121212;padding-left: 0px;padding-right: 0px;margin-right: 8px;"> |
|||
<div class="mb15"><!-- order-book --> |
|||
<div class="d-flex"> |
|||
<div class="heading" :class="tabcolor == 1 ?'textcolor':''" @click="tabcolor = 1">{{ $t("exchange.order-book") }}</div> |
|||
<div class="heading" :class="tabcolor == 2 ?'textcolor':''" @click="tabcolor = 2">{{ $t("exchange.recent-trades") }}</div> |
|||
</div> |
|||
<table class="table" v-if="tabcolor == 1"> |
|||
<thead> |
|||
<tr style="display:block;"> |
|||
<th class="w-33">{{ $t("exchange.price") }}({{pair.to}})</th> |
|||
<th class="w-33 text-right">{{ $t("exchange.amount") }} |
|||
<!-- ({{pair.from}}) --> |
|||
({{pair.to}}) |
|||
</th> |
|||
<th class="w-33 text-right">{{ $t("exchange.total") }}({{pair.from}})</th> |
|||
</tr> |
|||
</thead> |
|||
|
|||
<tbody class="sell-orders" v-if="symbol!='gitpusdt'"> |
|||
<div class="order-item" v-for="item in sellList" :key="item.id"> |
|||
<el-progress class="progress" type="line" :stroke-width="39" :percentage="getValue(item.amount)" :show-text="false" color="rgba(216,43,43,0.15)"> |
|||
</el-progress> |
|||
<!-- 卖单 使用弹性盒子倒序排列 --> |
|||
<tr style="display:block;" class="tb-cells" @click.stop="handleOrder(item.price)"> |
|||
<td class="w-33 red" title="pick this price to sell">{{ item.price|omitTo(priceDecimals) }}</td> |
|||
<td class="w-33 text-right">{{ item.amount|omitTo(qtyDecimals) }}</td> |
|||
<td class="w-33 text-right">{{ item.price|multiple(item.amount, priceDecimals) }}</td> |
|||
</tr> |
|||
</div> |
|||
</tbody> |
|||
|
|||
<tbody class="ob-heading"> |
|||
<tr style="display:block;" v-if="newTrade"> |
|||
<td class="w-33"> |
|||
<span>{{ $t("exchange.last-price") }}</span> |
|||
<i :class="newTrade.changeRate > 0 ? 'tri-inc' : 'tri-dec'"></i> |
|||
<b :class="newTrade.changeRate > 0 ? 'increace' : 'decreace'">{{ newTrade.price}}</b> |
|||
</td> |
|||
<td class="w-33 text-right"> |
|||
<span v-if="langs=='cn'">CNY</span> |
|||
<span v-else>$</span> |
|||
<!-- ≈ {{omitTo(newTrade.price*price_cny)}} --> |
|||
<span v-if="langs=='cn'">≈ {{newTrade.price*priceCny|omitTo(2)}}</span> |
|||
<span v-else>≈ {{newTrade.price|omitTo(2)}}</span> |
|||
</td> |
|||
<td class="w-33 text-right" :class="changeRate.startsWith('+') ? 'increace' : 'decreace'"> |
|||
<span>{{ $t("exchange.change") }}</span> |
|||
{{ changeRate }} |
|||
</td> |
|||
</tr> |
|||
<tr style="display:block;" v-else> |
|||
<td class="w-33"><span>{{ $t("exchange.last-price") }}</span> -</td> |
|||
<td class="w-33 text-right"> |
|||
<span>CNY</span> - |
|||
</td> |
|||
<td class="w-33 text-right"><span>{{ $t("exchange.change") }}</span> -</td> |
|||
</tr> |
|||
</tbody> |
|||
|
|||
<tbody class="buy-orders" :style="[{'height':symbol!='gitpusdt'?'':'470px!important'}]"> |
|||
<!-- 买单 反序数值 --> |
|||
<div class="order-item" v-for="item in reversed" :key="item.id"> |
|||
<el-progress class="progress" type="line" :stroke-width="39" :percentage="getValue(item.amount)" :show-text="false" color="rgba(37, 188, 103, 0.15)"> |
|||
</el-progress> |
|||
<!-- 卖单 使用弹性盒子倒序排列 --> |
|||
<tr style="display:block;" class="tb-cells" @click.stop="handleOrder(item.price)"> |
|||
<td class="w-33 green" title="pick this price to buy">{{ item.price|omitTo(priceDecimals) }}</td> |
|||
<td class="w-33 text-right">{{ item.amount|omitTo(qtyDecimals) }}</td> |
|||
<td class="w-33 text-right">{{ item.price|multiple(item.amount, priceDecimals) }}</td> |
|||
</tr> |
|||
</div> |
|||
|
|||
</tbody> |
|||
</table> |
|||
</div> |
|||
<div class="market-history" style="border: 0px;" v-if="tabcolor == 2"> |
|||
<ul class="nav nav-pills" role="tablist" v-if="0"> |
|||
<li class="nav-item"> |
|||
<a class="nav-link active" data-toggle="pill" href="#recent-trades" role="tab" aria-selected="true"> |
|||
{{ $t("exchange.recent-trades") }} |
|||
</a> |
|||
</li> |
|||
<!-- <li class="nav-item"> |
|||
<a class="nav-link" data-toggle="pill" href="#market-depth" role="tab" aria-selected="false">Market |
|||
Depth</a> |
|||
</li> --> |
|||
</ul> |
|||
<div class="tab-content"> |
|||
<div class="tab-pane fade show active" id="recent-trades" role="tabpanel"> |
|||
<table class="table trade-list"> |
|||
<thead> |
|||
<tr> |
|||
<th style="display:block;width:100%;"> |
|||
<div class="w-33"> |
|||
{{ $t("exchange.price") }}({{pair.to}}) |
|||
</div> |
|||
<div class="w-33 text-right"> |
|||
{{ $t("exchange.amount") }}({{pair.from}}) |
|||
</div> |
|||
<div class="w-33 text-right"> |
|||
{{ $t("exchange.time") }} |
|||
</div> |
|||
</th> |
|||
</tr> |
|||
</thead> |
|||
<tbody> |
|||
|
|||
<tr v-for="(item, index) in tradeList" :key="index"> |
|||
<td style="display:block;width:100%"> |
|||
<div class="w-33" :style="{color : item.color}">{{ item.price }}</div> |
|||
<div class="w-33 text-right">{{ item.amount }}</div> |
|||
<div class="w-33 text-right">{{ item.time }}</div> |
|||
</td> |
|||
</tr> |
|||
|
|||
</tbody> |
|||
</table> |
|||
</div> |
|||
<!-- <div class="tab-pane fade" id="market-depth" role="tabpanel"> |
|||
<div class="depth-chart-container"> |
|||
<div class="depth-chart-inner"> |
|||
<div id="lightDepthChart"></div> |
|||
</div> |
|||
</div> |
|||
</div> --> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
</template> |
|||
|
|||
<script> |
|||
|
|||
import Market from "@/api/market"; |
|||
|
|||
export default { |
|||
|
|||
// props : ["priceDecimals", "qtyDecimals"], |
|||
props:[ |
|||
'priceCny' |
|||
], |
|||
data() { |
|||
return this.$parent; |
|||
}, |
|||
|
|||
computed: { |
|||
langs(){ |
|||
return localStorage.getItem('lang')||'en' |
|||
}, |
|||
reversed() { |
|||
// 按给定值 倒序排列 |
|||
if (this.buyList && this.buyList.length) return this.buyList; |
|||
else return []; |
|||
|
|||
}, |
|||
|
|||
changeRate() { |
|||
|
|||
// 开盘价为0时 则返回0值 |
|||
if (!this.marketInfo || !this.marketInfo.open) return `+0.00%`; |
|||
|
|||
let val = Math.division( |
|||
Math.subtr(this.newTrade.price, this.marketInfo.open), |
|||
this.marketInfo.open); |
|||
|
|||
// 补充+号 |
|||
let sign = val >= 0 ? '+' : ''; |
|||
let percentage = `${sign}${Math.multiple(val, 100, 2)}%`; |
|||
|
|||
return percentage; |
|||
|
|||
}, |
|||
|
|||
tradeList() { |
|||
|
|||
let count = 0; |
|||
|
|||
// 处理第1~(n-1)条记录，第一条永远显示绿色 |
|||
if (this.trade && this.trade.length) { |
|||
|
|||
return this.trade.sort((m, n) => { |
|||
|
|||
let dm = Number(m.price), |
|||
dn = Number(n.price); |
|||
|
|||
if (dn >= dm) { |
|||
n.color = "#53b987"; |
|||
n.changeRate = 1; |
|||
} else { |
|||
n.color = "#ff231f"; |
|||
n.changeRate = -1; |
|||
} |
|||
|
|||
n.price = Math.omitTo(n.price, this.priceDecimals); |
|||
n.amount = Math.omitTo(n.amount, this.qtyDecimals); |
|||
n.time = Date.parseTime(n.ts, false, "{h}:{i}:{s}"); |
|||
|
|||
// 处理最后一个值 |
|||
if (++count == this.trade.length - 1) { |
|||
m.color = "#53b987"; |
|||
m.changeRate = 1; |
|||
m.price = Math.omitTo(m.price, this.priceDecimals); |
|||
m.amount = Math.omitTo(m.amount, this.qtyDecimals); |
|||
m.time = Date.parseTime(m.ts, false, "{h}:{i}:{s}"); |
|||
} |
|||
}); |
|||
} else { |
|||
return this.trade; |
|||
} |
|||
} |
|||
|
|||
}, |
|||
|
|||
methods: { |
|||
|
|||
// 计算深度 当前数量 / 买卖最大值 |
|||
getValue(amount) { |
|||
const arr = this.buyList.concat(this.sellList).map(item => item.amount); |
|||
let max = Math.max(...arr); |
|||
return Math.division(amount, max, 2) * 100; |
|||
}, |
|||
|
|||
// 将委托价带入交易控制面板中 |
|||
handleOrder(price, ordertype) { |
|||
// 修改父组件的order |
|||
if (this.passOrderPrice) { |
|||
this.buyorder.entrust_price = Math.omitTo(price, this.priceDecimals); |
|||
this.sellorder.entrust_price = Math.omitTo(price, this.priceDecimals); |
|||
} |
|||
}, |
|||
|
|||
// 测试方法 用于progress传入值 |
|||
format(item) { |
|||
return function (percentage) { |
|||
return `<span>${Math.omitTo(item.price, this.priceDecimals)}</span> |
|||
<span>${Math.omitTo(item.qty, this.qtyDecimals)}</span> |
|||
<span>${Math.multiple(item.price, item.qty, this.priceDecimals)}</span>`; |
|||
} |
|||
}, |
|||
|
|||
bookTrades() { |
|||
Market.getstockMarketInfo(this.symbol).then(response => { |
|||
// |
|||
this.sellList = response.sellList.sort((a, b) => b.price - a.price); |
|||
this.buyList = response.buyList; |
|||
this.trade = response.tradeList; |
|||
|
|||
}).catch(err => { |
|||
|
|||
}); |
|||
} |
|||
|
|||
|
|||
}, |
|||
|
|||
mounted() { |
|||
// 在mounted中重置初始化的[]值，如果在created之前的话 []会覆盖ajax查询的值 |
|||
this.bookTrades(); |
|||
}, |
|||
|
|||
} |
|||
</script> |
|||
|
|||
<style lang="scss"> |
|||
.w-33 { |
|||
width: 32% !important; |
|||
display: inline-block !important; |
|||
vertical-align: text-top !important; |
|||
box-sizing: border-box !important; |
|||
} |
|||
|
|||
.buy-orders { |
|||
|
|||
height: 235px !important; |
|||
overflow: hidden !important; |
|||
|
|||
td { |
|||
@include ff(OpenSans-Regular); |
|||
} |
|||
|
|||
} |
|||
|
|||
.sell-orders { |
|||
|
|||
@extend .buy-orders; |
|||
|
|||
@include flexible(column-reverse, flex-start, flex-start, wrap); |
|||
|
|||
// flex-shrink: 0; // 不压缩 |
|||
display: flex !important; |
|||
overflow-x: hidden; // 重要 换行后 隐藏右侧内容 |
|||
|
|||
} |
|||
|
|||
.order-item { |
|||
|
|||
position: relative; |
|||
z-index: 1; |
|||
width: 100%; |
|||
height: 39px; |
|||
|
|||
.progress { |
|||
height: 100%; |
|||
border-radius: 0; |
|||
background: none; |
|||
} |
|||
|
|||
.tb-cells { |
|||
position: absolute; |
|||
left: 0; |
|||
top: 0; |
|||
height: 100%; |
|||
z-index: 100; |
|||
cursor: pointer; |
|||
|
|||
&:hover { |
|||
background: none; |
|||
|
|||
} |
|||
} |
|||
|
|||
// 给外边框添加不同的底色 |
|||
&:nth-child(even) .progress .el-progress-bar__outer { |
|||
background: #F8F8FF; |
|||
// background: #f6f8f9; |
|||
|
|||
} |
|||
|
|||
&:nth-child(odd) .progress .el-progress-bar__outer { |
|||
background: #ffffff; |
|||
} |
|||
} |
|||
|
|||
.el-progress { |
|||
|
|||
.el-progress-bar { |
|||
|
|||
/**重构progress的背景色 */ |
|||
.el-progress-bar__outer { |
|||
|
|||
// 去除外表框的圆角 |
|||
border-radius: 0 !important; |
|||
// background: #fff; |
|||
|
|||
.el-progress-bar__inner { |
|||
|
|||
border-radius: 0 !important; |
|||
|
|||
right: 0; // 将进度容器由左对齐变成右对齐 |
|||
left: auto; |
|||
|
|||
&::after {} |
|||
} |
|||
|
|||
} |
|||
} |
|||
} |
|||
|
|||
.trade-list { |
|||
tbody { |
|||
// height: 279px; |
|||
height: 505px; |
|||
|
|||
tr { |
|||
|
|||
// @include flexible(); |
|||
// td:nth-last-child { |
|||
// flex-grow: 1; |
|||
// } |
|||
td { |
|||
cursor: text !important; |
|||
} |
|||
} |
|||
} |
|||
} |
|||
|
|||
#darkDepthChart, |
|||
#lightDepthChart { |
|||
height: 305px; |
|||
} |
|||
</style> |
|||
<style lang="scss" scoped> |
|||
.ob-heading { |
|||
border: 1px solid #333; |
|||
box-shadow: 0 0 5px #555; |
|||
} |
|||
.textcolor{ |
|||
color: #007bff; |
|||
} |
|||
</style> |
|||
@ -0,0 +1,618 @@ |
|||
<template> |
|||
<div class="col-md-8"> |
|||
|
|||
<!-- 生成K线图 --> |
|||
<k-line :symbol="symbol" :marketId="marketId" :priceDecimals="priceDecimals"></k-line> |
|||
|
|||
<!-- 交易处理 --> |
|||
<div class="market-trade"> |
|||
<ul class="nav nav-pills"> |
|||
<li class="nav-item"> |
|||
<a href :class="[`nav-link`, {active:!isCondition&&!isMarket}]" @click.prevent="isCondition=false;isMarket=false;">Limit</a> |
|||
</li> |
|||
<li class="nav-item"> |
|||
<a href :class="[`nav-link`, {active:!isCondition&&isMarket}]" @click.prevent="isCondition=false;isMarket=true;">Market</a> |
|||
</li> |
|||
<li class="nav-item"> |
|||
<a href :class="[`nav-link`, {active:isCondition&&!isMarket}]" @click.prevent="isCondition=true;isMarket=false;">Stop Limit</a> |
|||
</li> |
|||
<li class="nav-item"> |
|||
<a href :class="[`nav-link`, {active:isCondition&&isMarket}]" @click.prevent="isCondition=true;isMarket=true;">Stop Market</a> |
|||
</li> |
|||
</ul> |
|||
<div class="tab-content"> |
|||
<div class="tab-pane fade show active"> |
|||
<div class="d-flex justify-content-between"> |
|||
<!------------- Buy Order --------------> |
|||
<div class="market-trade-buy"> |
|||
|
|||
<!-- Trigger Price --> |
|||
<el-popover popper-class='popover-tips' placement="top-start" trigger="manual" v-model="visibles.buy.trigger"> |
|||
<span class="content"> |
|||
<i class="el-icon-warning-outline"></i> |
|||
{{ msgList.buy[0] }} |
|||
</span> |
|||
<div class="input-group" v-if="isCondition" slot="reference"> |
|||
<input type="number" v-model="buyorder.trigger_price" class="form-control" placeholder="请输入触发价格"> |
|||
<div class="input-group-append"> |
|||
<span class="input-group-text">{{pair.from}}</span> |
|||
</div> |
|||
</div> |
|||
</el-popover> |
|||
|
|||
<template v-if="isMarket"> |
|||
<div class="input-group"> |
|||
<!-- Market Price --> |
|||
<input type="text" class="form-control" disabled placeholder="在最佳市场价格成交"> |
|||
</div> |
|||
</template> |
|||
<template v-else> |
|||
<el-popover popper-class='popover-tips' placement="top-start" trigger="manual" v-model="visibles.buy.limitPrice"> |
|||
<span class="content"> |
|||
<i class="el-icon-warning-outline"></i> |
|||
{{ msgList.buy[1] }} |
|||
</span> |
|||
<div class="input-group" slot="reference"> |
|||
<!-- Entrust Price --> |
|||
<input type="number" v-model="buyorder.entrust_price" class="form-control" placeholder="请输入价格"> |
|||
<div class="input-group-append"> |
|||
<span class="input-group-text">{{pair.from}}</span> |
|||
</div> |
|||
</div> |
|||
</el-popover> |
|||
</template> |
|||
|
|||
<!-- Amount/Total --> |
|||
<template v-if="isMarket"> |
|||
<el-popover popper-class='popover-tips' placement="top-start" trigger="manual" v-model="visibles.buy.marketTotal"> |
|||
<span class="content"> |
|||
<i class="el-icon-warning-outline"></i> |
|||
{{ msgList.buy[3] }} |
|||
</span> |
|||
<div class="input-group" slot="reference"> |
|||
<input type="number" v-model="buyTotal" class="form-control" min=0 placeholder="请输入总值"> |
|||
<div class="input-group-append"> |
|||
<span class="input-group-text">{{pair.to}}</span> |
|||
</div> |
|||
</div> |
|||
</el-popover> |
|||
</template> |
|||
<template v-else> |
|||
<el-popover popper-class='popover-tips' placement="top-start" trigger="manual" v-model="visibles.buy.limitAmount"> |
|||
<!-- 提示框的内容 --> |
|||
<span class="content"> |
|||
<!-- 图标 --> |
|||
<i class="el-icon-warning-outline"></i> |
|||
<!-- 提示 --> |
|||
{{ msgList.buy[2] }} |
|||
</span> |
|||
<div class="input-group" slot="reference"> |
|||
<input type="number" v-model="buyorder.amount" class="form-control" min=0 placeholder="请输入数量"> |
|||
<div class="input-group-append"> |
|||
<span class="input-group-text">{{pair.to}}</span> |
|||
</div> |
|||
</div> |
|||
</el-popover> |
|||
</template> |
|||
|
|||
<!-- Percent --> |
|||
<ul class="market-trade-list"> |
|||
<li v-for="(item,index) in percentage" :key="index" :class="{buyPercentActive:index == buyPercentIndex}" @click="renderBuyAmount(item.value, index)"> |
|||
<a href="javascript:void 0">{{ item.label }}</a> |
|||
</li> |
|||
</ul> |
|||
|
|||
<!-- Total --> |
|||
<el-popover popper-class='popover-tips' placement="top-start" trigger="manual" v-model="visibles.buy.orderTotal"> |
|||
<span class="content"> |
|||
<i class="el-icon-warning-outline"></i> |
|||
{{ msgList.buy[5] }} |
|||
</span> |
|||
<p slot="reference"> |
|||
{{$t('exchange.order-total')}}: |
|||
<span> <b>{{buyTotal}}</b> {{pair.from}} </span> |
|||
</p> |
|||
</el-popover> |
|||
|
|||
<!-- Available --> |
|||
<p>{{$t('otc.j3')}}: |
|||
<span> {{toBalance}} {{pair.to}}</span><br /> |
|||
<span> {{fromBalance}} {{pair.from}}</span> |
|||
</p> |
|||
<button class="btn buy" @click="handleBuyOrder">Buy {{pair.to}}</button> |
|||
</div> |
|||
|
|||
<!------------ Sell Order -----------> |
|||
<div class="market-trade-sell"> |
|||
<el-popover popper-class='popover-tips' placement="top-start" trigger="manual" v-model="visibles.sell.trigger"> |
|||
<span class="content"> |
|||
<i class="el-icon-warning-outline"></i> |
|||
{{ msgList.sell[0] }} |
|||
</span> |
|||
<!-- Trigger Price --> |
|||
<div class="input-group" v-if="isCondition" slot="reference"> |
|||
<input type="number" v-model="sellorder.trigger_price" class="form-control" min=0 placeholder="请输入触发价格"> |
|||
<div class="input-group-append"> |
|||
<span class="input-group-text">{{pair.from}}</span> |
|||
</div> |
|||
</div> |
|||
</el-popover> |
|||
|
|||
<template v-if="isMarket"> |
|||
<div class="input-group"> |
|||
<!-- Market Price --> |
|||
<input type="text" class="form-control" disabled placeholder="在最佳市场价格成交"> |
|||
</div> |
|||
</template> |
|||
<template v-else> |
|||
<el-popover popper-class='popover-tips' placement="top-start" trigger="manual" v-model="visibles.sell.limitPrice"> |
|||
<span class="content"> |
|||
<i class="el-icon-warning-outline"></i> |
|||
{{ msgList.sell[1] }} |
|||
</span> |
|||
<div class="input-group" slot="reference"> |
|||
<!-- Entrust Price --> |
|||
<input type="number" v-model="sellorder.entrust_price" class="form-control" min=0 placeholder="请输入价格"> |
|||
<div class="input-group-append"> |
|||
<span class="input-group-text">{{pair.from}}</span> |
|||
</div> |
|||
</div> |
|||
</el-popover> |
|||
</template> |
|||
|
|||
<!-- Amount --> |
|||
<el-popover popper-class='popover-tips' placement="top-start" trigger="manual" v-model="visibles.sell.marketAmount"> |
|||
<span class="content"> |
|||
<i class="el-icon-warning-outline"></i> |
|||
{{ msgList.sell[4] }} |
|||
</span> |
|||
<div class="input-group" slot="reference"> |
|||
<input type="number" v-model="sellorder.amount" class="form-control" min=0 placeholder="请输入数量"> |
|||
<div class="input-group-append"> |
|||
<span class="input-group-text">{{pair.to}}</span> |
|||
</div> |
|||
</div> |
|||
</el-popover> |
|||
|
|||
<ul class="market-trade-list"> |
|||
<li v-for="(item,index) in percentage" :key="index" :class="{sellPercentActive:index == sellPercentIndex}" @click="renderSellAmount(item.value, index)"> |
|||
<a href="javascript:void 0">{{ item.label }}</a> |
|||
</li> |
|||
</ul> |
|||
|
|||
<!-- Total --> |
|||
<el-popover popper-class='popover-tips' placement="top-start" trigger="manual" v-model="visibles.sell.orderTotal"> |
|||
<span class="content"> |
|||
<i class="el-icon-warning-outline"></i> |
|||
{{ msgList.sell[5] }} |
|||
</span> |
|||
<p slot="reference"> |
|||
{{$t('exchange.order-total')}}: |
|||
<span> |
|||
<b>{{sellTotal}}</b> {{pair.from}} </span> |
|||
</p> |
|||
</el-popover> |
|||
|
|||
<p>{{$t('otc.j3')}}: |
|||
<span> {{toBalance}} {{pair.to}} </span><br /> |
|||
<span> {{fromBalance}} {{pair.from}}</span> |
|||
</p> |
|||
<button class="btn sell" @click="handleSellOrder">Sell {{pair.to}}</button> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
</template> |
|||
|
|||
<script> |
|||
|
|||
import Exchange from "@/api/exchange"; |
|||
|
|||
export default { |
|||
|
|||
props: ["pair", "buyorder", "marketId", "sellorder", "fromBalance", "toBalance", "symbol", "newTrade", "minQty", "minTotal", "priceDecimals", "qtyDecimals"], |
|||
data() { |
|||
return { |
|||
isMarket: false, |
|||
isCondition: false, |
|||
userBanlance: null, |
|||
|
|||
cacheTotal: 0, // 存放市价单输入的总值 |
|||
cachePrice: null, // 存放最新价格 |
|||
|
|||
// 气泡弹框内容和触发 |
|||
visibles: { |
|||
"buy": { |
|||
limitPrice: false, // 限制价格 |
|||
limitAmount: false, // 限制数量 |
|||
marketTotal: false, // 限制总额 |
|||
marketAmount: false, // 市价数量 |
|||
trigger: false, // 触发价格 |
|||
orderTotal: false, // 订单总额 |
|||
}, |
|||
"sell": { |
|||
limitPrice: false, |
|||
limitAmount: false, |
|||
marketTotal: false, |
|||
marketAmount: false, |
|||
trigger: false, |
|||
orderTotal: false, |
|||
}, |
|||
}, |
|||
msgList: { |
|||
"buy": Array(6).fill(''), // 5个空字符串的数组 |
|||
"sell": Array(6).fill('') |
|||
}, |
|||
// 百分比集合 |
|||
percentage: [{ |
|||
label: "25%", |
|||
value: 0.25 |
|||
}, |
|||
{ |
|||
label: "50%", |
|||
value: 0.5 |
|||
}, |
|||
{ |
|||
label: "75%", |
|||
value: 0.75 |
|||
}, |
|||
{ |
|||
label: "100%", |
|||
value: 1 |
|||
}, |
|||
], |
|||
// |
|||
buyPercentIndex: null, |
|||
sellPercentIndex: null, |
|||
} |
|||
}, |
|||
|
|||
computed: { |
|||
|
|||
// 获取type类型值 |
|||
type() { |
|||
if (!this.isCondition) { |
|||
return this.isMarket ? 2 : 1; |
|||
} else { |
|||
return this.isMarket ? 4 : 3; |
|||
} |
|||
}, |
|||
|
|||
theme() { |
|||
return localStorage.theme ? localStorage.theme : "light"; |
|||
}, |
|||
|
|||
buyTotal: { |
|||
get() { |
|||
if (!this.isMarket) { |
|||
return Math.multiple(this.buyorder.entrust_price, this.buyorder.amount); |
|||
} else { |
|||
return this.cacheTotal; |
|||
} |
|||
}, |
|||
set(val) { |
|||
// 根据总值 计算数量 |
|||
if (!this.isMarket) { |
|||
this.buyorder.amount = Math.division(val, this.buyorder.entrust_price); |
|||
} else { // 市价单 缓存总值 |
|||
this.cacheTotal = val; |
|||
} |
|||
} |
|||
}, |
|||
|
|||
sellTotal: { |
|||
get() { |
|||
return Math.multiple(this.sellorder.entrust_price, this.sellorder.amount); |
|||
} |
|||
}, |
|||
|
|||
// 当前语言 |
|||
lang() { |
|||
let browser_Lang = navigator.language.includes('zh') ? 'zh' : 'en'; |
|||
return localStorage.lang || browser_Lang; |
|||
}, |
|||
|
|||
}, |
|||
|
|||
watch: { |
|||
custom(newVal) { |
|||
// console.log(newVal) |
|||
}, |
|||
|
|||
type() { |
|||
// 切换订单类型时 清空价格和数量 |
|||
// 数量改变时 触发percentage更新 |
|||
this.reset(); |
|||
}, |
|||
|
|||
// 有新交易时触发 给限价单设定初始价格 |
|||
newTrade(newVal, oldVal) { |
|||
if (!this.isMarket) { |
|||
|
|||
// 新交易对有trade数据 |
|||
if (!oldVal && newVal) { // 没值到初始化值 |
|||
// 修改order里面price的值 |
|||
this.cachePrice = newVal.price; |
|||
this.reset(); |
|||
} |
|||
|
|||
// 切换交易对时 清空了数据 |
|||
if (oldVal && !newVal) { // 有值到没值的过程 |
|||
this.cachePrice = null; |
|||
this.reset(); |
|||
} |
|||
} |
|||
}, |
|||
}, |
|||
|
|||
methods: { |
|||
|
|||
renderBuyAmount(val, index) { |
|||
if (!this.buyorder.entrust_price) { |
|||
this.visibles.buy.limitPrice = true; |
|||
this.msgList.buy[1] = this.$t('nav.tips'); |
|||
this.clearAll(); |
|||
return; |
|||
} |
|||
this.buyPercentIndex = index; |
|||
this.buyTotal = Math.multiple(this.fromBalance, val); |
|||
}, |
|||
|
|||
renderSellAmount(val, index) { |
|||
if (!this.sellorder.entrust_price) { |
|||
this.visibles.sell.limitPrice = true; |
|||
this.msgList.sell[1] = this.$t('nav.tips'); |
|||
this.clearAll(); |
|||
return; |
|||
} |
|||
this.sellPercentIndex = index; |
|||
this.sellorder.amount = Math.multiple(this.toBalance, val); |
|||
}, |
|||
|
|||
handleBuyOrder() { |
|||
|
|||
// 执行前端的有效性验证 |
|||
if (!this.chkValidate(this.buyorder, this.buyTotal, "buy")) return; |
|||
|
|||
const baseArgs = { |
|||
symbol: this.symbol, |
|||
type: this.type, |
|||
}; |
|||
|
|||
// 区分限价、市价和条件委托单 |
|||
// 1、限价单买入时 需要的参数：价格、数量、 |
|||
// 2、市价单买入时 需要的参数：总值 |
|||
// 3、条件单买入时 需要的参数：触发价、价格数量或者总值 |
|||
// 4、卖出时 需要价格和数量 |
|||
Exchange.storeEntrust(Object.assign(this.buyorder, { |
|||
total: this.buyTotal, |
|||
}, baseArgs)).then(data => { |
|||
// 触发父组件的方法 更新余额和订单 |
|||
this.$emit('update'); |
|||
// 清空表单 |
|||
this.reset(); |
|||
}).catch(err => { |
|||
|
|||
}); |
|||
}, |
|||
|
|||
handleSellOrder() { |
|||
// 执行前端的有效性验证 |
|||
if (!this.chkValidate(this.sellorder, this.sellTotal, "sell")) return; |
|||
|
|||
const baseArgs = { |
|||
symbol: this.symbol, |
|||
type: this.type, |
|||
}; |
|||
Exchange.storeEntrust(Object.assign(this.sellorder, { |
|||
total: this.sellTotal |
|||
}, baseArgs)).then(data => { |
|||
// 触发父组件的方法 更新余额和订单 |
|||
this.$emit('update'); |
|||
// 清空表单 |
|||
this.reset(); |
|||
}).catch(err => { |
|||
|
|||
}); |
|||
}, |
|||
|
|||
reset() { |
|||
|
|||
// 如果没有newTrade时 则没有缓存价格 重置为最小值0 |
|||
// 由于输入框去除了精度空值 这里还需要手动设置精度值 |
|||
let price = this.cachePrice || 0; |
|||
|
|||
this.buyorder.entrust_price = Math.omitTo(price, this.priceDecimals); |
|||
this.buyorder.trigger_price = Math.omitTo(price, this.priceDecimals); |
|||
|
|||
this.sellorder.entrust_price = Math.omitTo(price, this.priceDecimals); |
|||
this.sellorder.trigger_price = Math.omitTo(price, this.priceDecimals); |
|||
|
|||
// 清空数量 |
|||
this.buyorder.amount = 0; |
|||
this.sellorder.amount = 0; |
|||
|
|||
// total赋值会触发set方法 |
|||
// this.buyTotal = 0; |
|||
// this.cacheTotal = 0; |
|||
|
|||
// 去除百分比样式 |
|||
this.buyPercentIndex = -1; |
|||
this.sellPercentIndex = -1; |
|||
}, |
|||
|
|||
clearAll() { |
|||
// 5s后统一清除提示框 |
|||
setTimeout(function () { |
|||
Object.keys(this.visibles.buy).forEach(key => this.visibles.buy[key] = false); |
|||
Object.keys(this.visibles.sell).forEach(key => this.visibles.sell[key] = false); |
|||
}.bind(this), 5000); |
|||
}, |
|||
|
|||
empty(val) { |
|||
let ret; |
|||
switch (typeof val) { |
|||
case "number": |
|||
ret = val == 0; |
|||
break; |
|||
case "string": |
|||
ret = val == "0" || /^\s?$/.test(val); |
|||
break; |
|||
case "boolean": |
|||
ret = val; |
|||
break; |
|||
default: |
|||
ret = Boolean(val); |
|||
break; |
|||
} |
|||
return ret; |
|||
}, |
|||
|
|||
chkValidate(order, total, orderType) { |
|||
let flag = true; |
|||
|
|||
switch (this.type) { |
|||
|
|||
case 1: // limit |
|||
if (this.empty(order.entrust_price)) { |
|||
flag = false; |
|||
this.visibles[orderType].limitPrice = true; |
|||
this.msgList[orderType][1] = this.$t('nav.a1'); |
|||
} else if (this.empty(order.amount)) { |
|||
flag = false; |
|||
this.visibles[orderType].limitAmount = true; |
|||
this.msgList[orderType][2] = this.$t('nav.a2'); |
|||
} else { |
|||
if (order.amount < this.minQty) { |
|||
flag = false; |
|||
this.visibles[orderType].limitAmount = true; |
|||
this.msgList[orderType][2] = this.$t('nav.a3')+`${this.minQty}`; |
|||
} |
|||
|
|||
if (total < this.minTotal) { |
|||
flag = false; |
|||
this.visibles[orderType].orderTotal = true; |
|||
this.msgList[orderType][5] = this.$t('nav.b8')+`${this.minTotal}`; |
|||
} |
|||
} |
|||
break; |
|||
|
|||
case 2: // market |
|||
if (order.direction == "buy") { // 买 |
|||
if (this.empty(total)) { |
|||
flag = false; |
|||
this.visibles[orderType].marketTotal = true; |
|||
this.msgList[orderType][3] = this.$t('nav.a4'); |
|||
} else if (this.total < this.minTotal) { |
|||
flag = false; |
|||
this.visibles.marketTotal = true; |
|||
this.msgList[3] = this.$t('nav.a5')+`${this.minTotal}`; |
|||
} |
|||
} |
|||
|
|||
if (order.direction == "sell") { // 卖 |
|||
if (this.empty(order.amount)) { |
|||
flag = false; |
|||
this.visibles[orderType].marketAmount = true; |
|||
this.msgList[orderType][4] = this.$t('nav.a6'); |
|||
} else if (order.amount < this.minQty) { |
|||
flag = false; |
|||
this.visibles[orderType].marketAmount = true; |
|||
this.msgList[orderType][4] = this.$t('nav.a7')+` ${this.minQty}`; |
|||
} |
|||
} |
|||
break; |
|||
|
|||
case 3: // stop-limit |
|||
|
|||
if (this.empty(order.trigger_price)) { |
|||
flag = false; |
|||
this.visibles[orderType].trigger = true; |
|||
this.msgList[orderType][0] = this.$t('nav.a8') |
|||
} else if (this.empty(order.entrust_price)) { |
|||
flag = false; |
|||
this.visibles[orderType].limitPrice = true; |
|||
this.msgList[orderType][1] = this.$t('nav.a9') |
|||
} else if (this.empty(order.amount)) { |
|||
flag = false; |
|||
this.visibles[orderType].limitAmount = true; |
|||
this.msgList[orderType][2] = this.$t('nav.b1') |
|||
} |
|||
break; |
|||
|
|||
case 4: // stop-market |
|||
if (this.empty(order.trigger_price)) { |
|||
flag = false; |
|||
this.visibles[orderType].trigger = true; |
|||
this.msgList[orderType][0] = this.$t('nav.b2') |
|||
} else { |
|||
|
|||
if (order.direction == "buy") { |
|||
if (this.empty(total)) { |
|||
flag = false; |
|||
this.visibles[orderType].marketTotal = true; |
|||
this.msgList[orderType][3] = this.$t('nav.b3') |
|||
} else if (total < this.minTotal) { |
|||
flag = false; |
|||
this.visibles[orderType].marketTotal = true; |
|||
this.msgList[orderType][3] = this.$t('nav.b5')+` ${this.minTotal}` |
|||
} |
|||
} |
|||
|
|||
if (order.direction == "sell") { |
|||
if (this.empty(order.amount)) { |
|||
flag = false; |
|||
this.visibles[orderType].marketAmount = true; |
|||
this.msgList[orderType][4] = this.$t('nav.b6') |
|||
} else if (order.amount < this.minQty) { |
|||
flag = false; |
|||
this.visibles[orderType].marketAmount = true; |
|||
this.msgList[orderType][4] = this.$t('nav.b7')+` ${this.minQty}` |
|||
} |
|||
} |
|||
|
|||
} |
|||
break; |
|||
} |
|||
|
|||
// 清除所有样式 |
|||
this.clearAll(); |
|||
|
|||
// 返回验证结果 |
|||
return flag; |
|||
}, |
|||
|
|||
|
|||
}, |
|||
|
|||
created() { |
|||
|
|||
}, |
|||
|
|||
} |
|||
</script> |
|||
|
|||
<style lang="scss" scoped> |
|||
.buyPercentActive { |
|||
a:link { |
|||
font-weight: bold; |
|||
background: #26a69a; |
|||
color: #fff; |
|||
} |
|||
} |
|||
|
|||
.sellPercentActive { |
|||
a:link { |
|||
font-weight: bold; |
|||
background: #ef5350; |
|||
color: #fff; |
|||
} |
|||
} |
|||
|
|||
.input-group-text { |
|||
width: 68px; |
|||
@include flexible(row, center, center); |
|||
} |
|||
</style> |
|||
@ -0,0 +1,706 @@ |
|||
<template> |
|||
<!-- <div> --> |
|||
<!-- <div class="banner-block col-xs-8">--> |
|||
<!-- <el-carousel :interval="6000" height="450px">--> |
|||
<!-- <el-carousel-item v-for="item in pcBannerList" :key="item.id">--> |
|||
<!-- <img :src="item.imgurl" width="100%" height="100%" />--> |
|||
<!-- </el-carousel-item>--> |
|||
<!-- </el-carousel>--> |
|||
<!-- </div>--> |
|||
<!-- <div class="container-fluid mtb15 no-fluid"> |
|||
<div class="row sm-gutters"> --> |
|||
|
|||
<!-- symbols --> |
|||
<!-- <symbols :marketList="marketList" :marketId="marketId" :isLogin="isLogin" :symbol.sync="symbol"> |
|||
</symbols> --> |
|||
|
|||
<!-- kline --> |
|||
<!-- <stock-kline :symbol="symbol" :socket="ws.socket" :priceDecimals="priceDecimals"></stock-kline> --> |
|||
|
|||
<!-- order book --> |
|||
<!-- <book-trades :priceCny="price_cny"></book-trades> --> |
|||
|
|||
<!-- 交易布局 --> |
|||
<!-- <make-deal :isLogin="isLogin" :pair="pair" :socket="ws.socket" :symbol="symbol" :buyorder="buyorder" |
|||
:sellorder="sellorder" :fromBalance="fromBalance" :toBalance="toBalance" :newTrade="newTrade" |
|||
:minQty="minQty" :minTotal="minTotal" :priceDecimals="priceDecimals" :qtyDecimals="qtyDecimals" |
|||
@update="update"></make-deal> --> |
|||
|
|||
<!-- market news --> |
|||
<!-- <market-news></market-news> --> |
|||
|
|||
<!-- order list --> |
|||
<!-- <order-list ref="Order" :ordersOpen="ordersOpen" :conditionOrders="conditionOrders" |
|||
:ordersHistory="ordersHistory" :holdPositionList="holdPositionList" :priceDecimals="priceDecimals" :qtyDecimals="qtyDecimals" |
|||
:isLogin="isLogin" :pair="pair" @change="currentTab = $event" @update="update" |
|||
@Pagination="page = $event" @Pagination1="page1 = $event"></order-list> --> |
|||
|
|||
<!-- </div> |
|||
</div> |
|||
</div> --> |
|||
<div class="contract-page" style="background-color: #000;"> |
|||
<div class="coin-change d-flex align-items-center py-2 pl-4 heading justify-content-between" style="background-color: #121212;"> |
|||
<div class="d-flex align-items-center"> |
|||
<div class="coin d-flex align-items-center"> |
|||
<el-popover |
|||
placement="bottom" |
|||
ref="popover" |
|||
width="400" |
|||
trigger="click" |
|||
> |
|||
<div slot="reference"> |
|||
{{ activeContract.pair_name }} |
|||
<el-button size="mini"> |
|||
<i class="el-icon-arrow-down"></i> |
|||
</el-button> |
|||
</div> |
|||
<div |
|||
class="markets-pair-list" |
|||
style="max-height:300px;overflow:auto;" |
|||
> |
|||
<template v-for="parent in marketList"> |
|||
<div class="px-3 text-primary" :key="parent.coin_name"> |
|||
{{ parent.coin_name }} |
|||
</div> |
|||
<table class="table" :key="parent.coin_name + 1"> |
|||
<thead> |
|||
<tr class="text-secondary"> |
|||
<th class="w-10/24">{{ $t("contract.h5") }}</th> |
|||
<th class="w-7/24">{{ $t("contract.g3") }}</th> |
|||
<th class="w-7/24 text-right"> |
|||
{{ $t("contract.h6") }} |
|||
</th> |
|||
</tr> |
|||
</thead> |
|||
<tbody> |
|||
<!-- @click="symbol = item.symbol" --> |
|||
<tr |
|||
v-for="item in parent.marketInfoList" |
|||
:key="item.symbol" |
|||
:class="{ active: item.symbol == symbol }" |
|||
@click="ispopover1(item.symbol)" |
|||
> |
|||
<td class="w-10/24"> |
|||
{{ item.symbol }}/{{ parent.coin_name }} |
|||
</td> |
|||
<td |
|||
class="w-7/24 " |
|||
:class="item.increase < 0 ? 'decreace' : 'increace'" |
|||
> |
|||
{{item.price}} |
|||
<!-- item.symbol == symbol ? price1 : --> |
|||
</td> |
|||
<td |
|||
class="w-7/24" |
|||
:class="item.increase < 0 ? 'decreace' : 'increace'" |
|||
> |
|||
{{ item.increaseStr }} |
|||
</td> |
|||
</tr> |
|||
</tbody> |
|||
</table> |
|||
</template> |
|||
</div> |
|||
</el-popover> |
|||
</div> |
|||
<div |
|||
class="price px-3 border-right" |
|||
:class="{ |
|||
decreace: activeContract.increase < 0, |
|||
increace: activeContract.increase >= 0 |
|||
}" |
|||
> |
|||
<span class="current">{{ activeContract.price }}$</span> |
|||
<!-- <span class="current">{{price1}}$</span> --> |
|||
|
|||
<span class="zf">{{ activeContract.increaseStr }}</span> |
|||
</div> |
|||
<!-- 币种价值数据 --> |
|||
<div class="d-flex fn-12"> |
|||
<div class="item px-2"> |
|||
<div class="title mb-1 text-secondary"> |
|||
24h {{ $t("contract.h7") }} |
|||
</div> |
|||
<div> |
|||
{{ activeContract.high }} |
|||
</div> |
|||
</div> |
|||
<div class="item px-2"> |
|||
<div class="title mb-1 text-secondary"> |
|||
24h {{ $t("contract.h8") }} |
|||
</div> |
|||
<div> |
|||
{{ activeContract.low }} |
|||
</div> |
|||
</div> |
|||
<div class="item px-2"> |
|||
<div class="title mb-1 text-secondary"> |
|||
24h {{ $t("contract.h9") }} |
|||
<!-- （{{ $t("contract.e2") }}） --> |
|||
<!-- (USDT) --> |
|||
</div> |
|||
<div> |
|||
{{ activeContract.vol }} |
|||
</div> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
<!-- <div><theme-change /></div> --> |
|||
</div> |
|||
<div class="page-top d-flex pt-2"> |
|||
<div class="kline-box flex-fill mr-2"> |
|||
<stock-kline :symbol="symbol" :socket="ws.socket" :priceDecimals="priceDecimals"></stock-kline> |
|||
</div> |
|||
<!-- 盘口 --> |
|||
<book-trades :priceCny="price_cny"></book-trades> |
|||
<!-- 交易 --> |
|||
<make-deal :isLogin="isLogin" :pair="pair" :socket="ws.socket" :symbol="symbol" :buyorder="buyorder" |
|||
:sellorder="sellorder" :fromBalance="fromBalance" :toBalance="toBalance" :newTrade="newTrade" |
|||
:minQty="minQty" :minTotal="minTotal" :priceDecimals="priceDecimals" :qtyDecimals="qtyDecimals" |
|||
@update="update"></make-deal> |
|||
</div> |
|||
<order-list ref="Order" :ordersOpen="ordersOpen" :conditionOrders="conditionOrders" |
|||
:ordersHistory="ordersHistory" :holdPositionList="holdPositionList" :priceDecimals="priceDecimals" :qtyDecimals="qtyDecimals" |
|||
:isLogin="isLogin" :pair="pair" @change="currentTab = $event" @update="update" |
|||
@Pagination="page = $event" @Pagination1="page1 = $event"></order-list> |
|||
</div> |
|||
</div> |
|||
</template> |
|||
|
|||
<script> |
|||
import Socket from '@/api/server/Socket.js'; |
|||
import Market from '@/api/market.js'; |
|||
import Exchange from "@/api/exchange"; |
|||
import Order from "@/api/order" |
|||
import Home from "@/api/home"; |
|||
import bus from "@/components/bus.js"; |
|||
export default { |
|||
|
|||
components: { |
|||
"Symbols": () => import( /* webpackChunkName:"symbols" */ "./symbols"), |
|||
"MakeDeal": () => import( /* webpackChunkName:"chart-deal" */ "./make-deal"), |
|||
"BookTrades": () => import( /* webpackChunkName:"order-book" */ "./book-trades"), |
|||
"MarketNews": () => import( /* webpackChunkName:"market-news" */ "./market-news"), |
|||
"OrderList": () => import( /* webpackChunkName:"order-list" */ "./order-list") |
|||
}, |
|||
|
|||
beforeCreate() { |
|||
|
|||
// this.ws = new Socket(`${this.Globals.Server.Path.WS}`); |
|||
|
|||
}, |
|||
|
|||
data() { |
|||
|
|||
return { |
|||
tabcolor:1, |
|||
price1:0, |
|||
isLianjie: false, |
|||
// `btcusdt` 不含`/`的小写 |
|||
symbol: this.$route.params.symbol || null, |
|||
marketId: null, |
|||
marketInfo: null, // 交易对基本信息 |
|||
pair: { |
|||
from: '-', |
|||
to: '-', |
|||
}, |
|||
marketList: [], // 在symbol组件中 需要遍历 因此默认数组避免出错 |
|||
trade: [], |
|||
pcBannerList: [], |
|||
newTrade: null, |
|||
|
|||
// 所有的数据 都统一按照价格从小到大排序 |
|||
buyList: [], |
|||
sellList: [], |
|||
|
|||
// 初始化精度值和交易 |
|||
priceDecimals: 0, |
|||
qtyDecimals: 0, |
|||
minQty: 0, |
|||
minTotal: 0, |
|||
|
|||
now: null, |
|||
|
|||
// 下单情况 可由orderbook跨页面定制 |
|||
buyorder: { |
|||
trigger_price: '', // 触发价 |
|||
entrust_price: '', // 委托价 |
|||
amount: 0, // 数量 |
|||
direction: "buy", // 方向 |
|||
}, |
|||
|
|||
sellorder: { |
|||
entrust_price: '', |
|||
trigger_price: '', |
|||
amount: 0, |
|||
direction: "sell", |
|||
}, |
|||
|
|||
// 从order传递price |
|||
passOrderPrice: true, |
|||
|
|||
// 各种委托单 |
|||
ordersOpen: { |
|||
total: 0, |
|||
}, |
|||
|
|||
ordersHistory: { |
|||
total: 0, |
|||
}, |
|||
|
|||
holdPositionList: { |
|||
total: 0, |
|||
}, |
|||
|
|||
conditionOrders: { |
|||
total: 0, |
|||
}, |
|||
|
|||
// 用户钱包余额 |
|||
fromBalance: 0, |
|||
toBalance: 0, |
|||
|
|||
// 当前页面socket |
|||
ws: null, |
|||
|
|||
// 是否开启交易密码 |
|||
transPwdEnabled: false, |
|||
|
|||
currentTab: "stockholdPosition", // orders显示的tab |
|||
price_cny: 0, |
|||
page: 1, |
|||
page1: 1, |
|||
timer: null |
|||
} |
|||
|
|||
}, |
|||
|
|||
computed: { |
|||
|
|||
// 当前语言 |
|||
lang() { |
|||
let browser_Lang = navigator.language.includes('zh') ? 'cn' : 'en', |
|||
lang = localStorage.lang || browser_Lang; |
|||
return lang; |
|||
}, |
|||
|
|||
isLogin() { |
|||
return Boolean(this.userAuth); |
|||
}, |
|||
|
|||
userAuth() { |
|||
const auth = localStorage.getItem("auth"); |
|||
let ret = ""; |
|||
if (auth) { |
|||
let { |
|||
memberId, |
|||
accessToken |
|||
} = JSON.parse(auth); |
|||
ret = `?${accessToken}&${memberId}`; |
|||
} |
|||
return ret; |
|||
}, |
|||
|
|||
userInfo() { |
|||
if (this.isLogin) { |
|||
return JSON.parse(localStorage.getItem("auth")); |
|||
} else { |
|||
return { |
|||
user_id: 0, |
|||
}; |
|||
} |
|||
}, |
|||
activeContract(val) { |
|||
let marketList=this.marketList |
|||
.map(item => item.marketInfoList) |
|||
.flat() |
|||
.find(item => item.symbol == this.symbol) || {} |
|||
if(val.price){ |
|||
delete marketList.price |
|||
} |
|||
return marketList; |
|||
}, |
|||
}, |
|||
|
|||
watch: { |
|||
// 切换symbol时更新路由 |
|||
symbol(newVal, oldVal) { |
|||
|
|||
// 取消订阅 或者关闭连接 防止干扰下次值 |
|||
if (oldVal) this.unsub(oldVal); |
|||
|
|||
// 还原页面状态 避免造成数据值紊乱 |
|||
this.trade = []; |
|||
this.sellList = []; |
|||
this.buyList = []; |
|||
this.newTrade = null; |
|||
|
|||
// 买卖单数据结构 |
|||
this.buyorder = { |
|||
trigger_price: '', |
|||
entrust_price: '', |
|||
amount: 0, |
|||
direction: "buy", |
|||
}; |
|||
this.sellorder = { |
|||
trigger_price: '', |
|||
entrust_price: '', |
|||
amount: 0, |
|||
direction: "sell", |
|||
}; |
|||
|
|||
// 请求新的页面数据 |
|||
if (newVal) this.$router.push(`/exchangestock/${newVal}`); |
|||
}, |
|||
|
|||
marketInfo(newVal, oldVal) { |
|||
if (newVal && !oldVal) { // 第一次取得marketInfo时 更新接口 主要针对刷新页面 |
|||
this.update(); |
|||
} |
|||
}, |
|||
|
|||
// 加载新页面 重新订阅所有数据 |
|||
$route( /*newRouter, oldRouter*/ ) { |
|||
|
|||
this.addSub(); |
|||
|
|||
// 初始化market信息 |
|||
this.findMarketBySymbol(); |
|||
|
|||
// 更新所有接口数据 |
|||
this.update(); |
|||
|
|||
}, |
|||
|
|||
currentTab() { |
|||
// tab切换时自动更新 |
|||
this.getOrders(); |
|||
}, |
|||
page() { |
|||
if (this.currentTab == "histories") { // 历史委托 |
|||
this.getHistories(); |
|||
} |
|||
}, |
|||
// page1() { |
|||
// if (this.currentTab == "stockholdPosition") { // 目前持仓 |
|||
// this.stockholdPosition() |
|||
// } |
|||
// } |
|||
}, |
|||
|
|||
methods: { |
|||
ispopover1(item){ |
|||
this.symbol=item; |
|||
}, |
|||
initMarket() { |
|||
// 初始化订阅marketList数据 |
|||
this.ws.send({ |
|||
"cmd": "sub", |
|||
"msg": 'exchangeMarketList', |
|||
}) |
|||
}, |
|||
|
|||
// 订阅当前的symbol |
|||
addSub() { |
|||
|
|||
this.ws.send([{ |
|||
cmd: 'sub', |
|||
msg: `sellList_${this.symbol}` |
|||
}, { |
|||
cmd: 'sub', |
|||
msg: `buyList_${this.symbol}` |
|||
}, { |
|||
cmd: 'req', |
|||
msg: `tradeList_${this.symbol}` |
|||
}, { |
|||
cmd: 'sub', |
|||
msg: `tradeList_${this.symbol}` |
|||
}]); |
|||
|
|||
}, |
|||
|
|||
// 取消指定的symbol |
|||
unsub(symbol) { |
|||
|
|||
this.ws.send([{ |
|||
cmd: 'unsub', |
|||
msg: `sellList_${symbol}` |
|||
}, { |
|||
cmd: 'unsub', |
|||
msg: `buyList_${symbol}` |
|||
}, { |
|||
cmd: 'unsub', |
|||
msg: `tradeList_${symbol}` |
|||
}]); |
|||
|
|||
}, |
|||
|
|||
// 在交易列表中 查找当前id记录 并将行情信息写入全局 |
|||
// 以便在其他组件中 直接使用 |
|||
findMarketBySymbol() { |
|||
|
|||
let isKeep = true; // 退出外层循环的标识符 |
|||
|
|||
for (let coin of this.marketList) { |
|||
|
|||
for (let market of coin.marketInfoList) { |
|||
|
|||
// 查询交易对名称 |
|||
if (market.symbol === this.symbol) { |
|||
|
|||
// 转化pair为集合 便于提取 |
|||
this.pair = { |
|||
to: market.coin_name, // 右币 |
|||
from: coin.coin_name // 左币 |
|||
}; |
|||
|
|||
// 创建marketId |
|||
this.marketId = market.pair_id; |
|||
|
|||
// 写入market信息 |
|||
this.marketInfo = market; |
|||
|
|||
// 未有选定Tab时 默认一个now 后期从子组件中取 |
|||
if (!this.now) this.now = coin.coin_name; |
|||
|
|||
// 写入数据值精度 用来显示截取长度 |
|||
this.priceDecimals = market.price_decimals; |
|||
this.qtyDecimals = market.qty_decimals; |
|||
|
|||
// 下单时 需要验证最小数量和最小总值 |
|||
this.minTotal = market.min_total; |
|||
this.minQty = market.min_qty; |
|||
|
|||
isKeep = false; |
|||
|
|||
// 终止内部循环 |
|||
break; |
|||
} |
|||
} |
|||
|
|||
// 终止外部循环 |
|||
if (!isKeep) break; |
|||
} |
|||
}, |
|||
|
|||
getBalance() { |
|||
|
|||
if (this.isLogin) { |
|||
|
|||
Exchange.getstockUserBalance(this.marketInfo.pair_name).then(data => { |
|||
|
|||
this.fromBalance = data[this.pair.from.toUpperCase()].usable_balance; |
|||
this.toBalance = data[this.pair.to.toUpperCase()].usable_balance; |
|||
|
|||
}).catch(err => { |
|||
|
|||
}); |
|||
} |
|||
|
|||
}, |
|||
|
|||
// 更新接口数据 |
|||
update() { |
|||
this.getBalance(); |
|||
this.getOrders(); |
|||
this.getCurrencyExCny(); |
|||
}, |
|||
// 获取汇率 |
|||
getCurrencyExCny() { |
|||
if (!this.pair.from || this.pair.from == '-') return; |
|||
Exchange.getCurrencyExCny({ |
|||
coin_name: this.pair.from |
|||
}).then(res => { |
|||
this.price_cny = res.price_cny |
|||
}) |
|||
}, |
|||
getOrders() { |
|||
|
|||
if (this.currentTab == "opens") { // 当前委托 |
|||
|
|||
this.getOpens(); |
|||
|
|||
} else if (this.currentTab == "conditions") { // 条件委托 |
|||
|
|||
this.getConditions(); |
|||
|
|||
} else if (this.currentTab == "histories") { // 历史委托 |
|||
|
|||
this.getHistories(); |
|||
|
|||
} else if (this.currentTab == "stockholdPosition") { |
|||
this.stockholdPosition() |
|||
this.timer = setInterval(()=>{ |
|||
this.stockholdPosition() |
|||
}, 3000) |
|||
} |
|||
|
|||
// console.log("---订单更新成功---"); |
|||
|
|||
}, |
|||
|
|||
getOpens() { |
|||
if (this.isLogin) { |
|||
Order.getstockCurrentEntrust({ |
|||
symbol: this.marketInfo.pair_name, |
|||
}).then(data => { |
|||
this.ordersOpen = data |
|||
}).catch(err => { |
|||
// console.log(err) |
|||
}) |
|||
} |
|||
}, |
|||
|
|||
getConditions() { |
|||
if (this.isLogin) { |
|||
Order.getConditionEntrust({ |
|||
symbol: this.marketInfo.pair_name, |
|||
}).then(data => { |
|||
this.conditionOrders = data; |
|||
}).catch(err => { |
|||
// console.log(err) |
|||
}) |
|||
} |
|||
}, |
|||
|
|||
getHistories() { |
|||
if (this.isLogin) { |
|||
Order.getstockHistoryEntrust({ |
|||
symbol: this.marketInfo.pair_name, |
|||
page:this.page |
|||
}) |
|||
.then(data => { |
|||
this.ordersHistory = data; |
|||
}) |
|||
.catch(err => {}) |
|||
} |
|||
}, |
|||
|
|||
stockholdPosition(){ |
|||
if (this.isLogin) { |
|||
let data = { |
|||
symbol: this.marketInfo.pair_name, |
|||
page:this.page1 |
|||
}; |
|||
Exchange.stockholdPosition(data ,{ loading: false }).then(data => { |
|||
this.holdPositionList = data; |
|||
}).catch(err => {}) |
|||
} |
|||
}, |
|||
|
|||
indexList() { |
|||
Home.indexList().then((res) => { |
|||
this.pcBannerList = res.pcBannerList |
|||
setTimeout(() => { |
|||
this.skroll(); |
|||
}, 100); |
|||
}).catch((res) => {}); |
|||
}, |
|||
initWs() { |
|||
// this.ws = new Socket(`${this.Globals.Server.Path.WS}`); |
|||
this.ws = new Socket(`${this.Globals.Server.Path.WS2}`); |
|||
this.ws.on("open", () => { |
|||
if (this.isLianjie) { |
|||
bus.$emit('sendMsg', this.ws.socket); |
|||
this.isLianjie = false |
|||
} |
|||
// 连接成功后 初始化订阅市场信息 |
|||
this.initMarket(); |
|||
// 如果指定了id 订阅该行情的所有其他信息 |
|||
if (this.symbol) this.addSub(); |
|||
}) |
|||
|
|||
this.ws.on("message", (response) => { |
|||
|
|||
let { |
|||
data, // 返回数据 |
|||
sub, // 订阅标签 |
|||
type, // 返回类型 |
|||
msg, // 提示信息 |
|||
code, // 错误代号 |
|||
} = response; |
|||
|
|||
// 答复心跳 保持连接 |
|||
if (type == "ping") this.ws.send({ |
|||
type: "pong" |
|||
}); |
|||
|
|||
switch (sub) { |
|||
|
|||
case "exchangeMarketList": |
|||
|
|||
this.marketList = data; |
|||
|
|||
if (!this.symbol) { // 默认symbol 重新请求数据 |
|||
this.symbol = _.nth(data).marketInfoList[0].symbol; |
|||
} else { // 找出该symbol对应的记录并更新页面 |
|||
this.findMarketBySymbol(); |
|||
} |
|||
|
|||
break; |
|||
|
|||
case `buyList_${this.symbol}`: |
|||
|
|||
this.buyList = data; |
|||
break; |
|||
|
|||
case `sellList_${this.symbol}`: |
|||
|
|||
this.sellList = data; |
|||
break; |
|||
|
|||
case `tradeList_${this.symbol}`: |
|||
if (type == "history") { // 历史记录 |
|||
this.trade = this.trade.concat(data); |
|||
} else if (type == "dynamic") { // 有更新就推送 |
|||
this.trade.unshift(data); |
|||
} |
|||
// 最新交易 更新用于余额和订单记录 |
|||
this.newTrade = _.nth(this.trade); |
|||
if (this.newTrade && this.newTrade.buy_user_id === this.userInfo.user_id || this |
|||
.newTrade.sell_user_id == this.userInfo.user_id) this.update(); |
|||
break; |
|||
} |
|||
}); |
|||
|
|||
this.ws.on("close", () => { |
|||
// this.$message({ |
|||
// type: "error", |
|||
// message: this.$t("nav.b8"), |
|||
// duration: 2000, |
|||
// }); |
|||
this.isLianjie = true |
|||
this.initWs() |
|||
// if (this.symbol) this.getCurrencyExCny(); |
|||
// this.indexList() |
|||
|
|||
}); |
|||
} |
|||
}, |
|||
|
|||
created() { |
|||
|
|||
this.initWs() |
|||
if (this.symbol) this.getCurrencyExCny(); |
|||
this.indexList() |
|||
|
|||
Market.getstockMarketList().then(data => { |
|||
this.marketList = data; |
|||
}).catch(err => {}); |
|||
// this.update(); |
|||
}, |
|||
beforeDestroy() { |
|||
clearInterval(this.timer); |
|||
}, |
|||
|
|||
mounted() { |
|||
// if (this.symbol) this.update(); |
|||
}, |
|||
} |
|||
</script> |
|||
|
|||
<style> |
|||
.el-popover{ |
|||
background-color: #121212; |
|||
} |
|||
</style> |
|||
@ -0,0 +1,824 @@ |
|||
<template> |
|||
<div class="col-md-3" style="background-color: #121212;"> |
|||
<div class="px-4 py-2 heading"> |
|||
<!-- <theme-change/> --> |
|||
<el-tooltip placement="bottom" effect="light"> |
|||
<div slot="content" class="market"> |
|||
<div class="coin p-md color-light fn-20"> |
|||
<img :src="detail.coin_icon" width="20" height="20" alt=""> |
|||
{{detail.full_name}} |
|||
</div> |
|||
<div class="list"> |
|||
<div class="d-flex justify-between p-x-md p-y-xs"> |
|||
<div>{{$t('nav.c3')}}：</div> |
|||
<div class="color-light"> |
|||
{{detail.total_issuance}} |
|||
</div> |
|||
</div> |
|||
<div class="d-flex justify-between p-x-md p-y-xs"> |
|||
<div>{{$t('nav.c4')}}：</div> |
|||
<div class="color-light"> |
|||
{{detail.total_circulation}} |
|||
</div> |
|||
</div> |
|||
<div class="d-flex justify-between p-x-md p-y-xs"> |
|||
<div>{{$t('nav.c5')}}：</div> |
|||
<div class="color-light"> |
|||
{{detail.crowdfunding_price}} |
|||
</div> |
|||
</div> |
|||
<div class="d-flex justify-between p-x-md p-y-xs"> |
|||
<div>{{$t('nav.c6')}}：</div> |
|||
<div class="color-light"> |
|||
{{detail.publish_time}} |
|||
</div> |
|||
</div> |
|||
<div class=" p-x-md p-y-xs"> |
|||
<div>{{$t('nav.c7')}}：</div> |
|||
<div class="color-light ov"> |
|||
{{detail.white_paper_link}} |
|||
</div> |
|||
</div> |
|||
<div class=" p-x-md p-y-xs"> |
|||
<div>{{$t('nav.c8')}}：</div> |
|||
<div class="color-light ov"> |
|||
{{detail.official_website_link}} |
|||
</div> |
|||
</div> |
|||
</div> |
|||
<div class="p-md"> |
|||
<div class="fn-20 color-light"> |
|||
{{$t('nav.c9')}} |
|||
</div> |
|||
<div class="p-y-md edit-content" v-html="detail.coin_content"> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
<!-- <el-button><img src="../../assets/img/shuoming.png" width="20" height="20" alt=""></el-button> --> |
|||
</el-tooltip> |
|||
|
|||
</div> |
|||
<!-- 生成K线图 --> |
|||
<!-- <stock-kline :symbol="symbol" :socket="socket" :priceDecimals="priceDecimals"></stock-kline> --> |
|||
|
|||
<!-- 交易处理 --> |
|||
<div class="market-trade "> |
|||
<h4 style="text-align: center;">{{$t('nav.c12')}}</h4> |
|||
<div class="d-flex" style="margin: 14px;justify-content: space-around;border: 1px solid #b9b9b9;border-radius: 40px;"> |
|||
<div :class="Tab_buysell == 1?'Tab_buy':'Tab_buy1'" @click="Tab_buysell=1">{{$t('order.buy')}}</div> |
|||
<div :class="Tab_buysell == 2?'Tab_sell':'Tab_sell1'" @click="Tab_buysell=2">{{$t('order.sell')}}</div> |
|||
</div> |
|||
<ul class="nav nav-pills"> |
|||
<li class="nav-item"> |
|||
<a href :class="[`nav-link`, {active:!isCondition&&isMarket}]" @click.prevent="isCondition=false;isMarket=true;" style="background-color: transparent;"> |
|||
{{ $t("common.market") }} |
|||
</a> |
|||
</li> |
|||
<li class="nav-item"> |
|||
<a href :class="[`nav-link`, {active:!isCondition&&!isMarket}]" @click.prevent="isCondition=false;isMarket=false;" style="background-color: transparent;"> |
|||
{{ $t("common.limit") }}</a> |
|||
</li> |
|||
|
|||
<!-- <li class="nav-item"> |
|||
<a href :class="[`nav-link`, {active:isCondition&&!isMarket}]" @click.prevent="isCondition=true;isMarket=false;"> |
|||
{{ $t("common.stop-limit") }}</a> |
|||
</li> |
|||
<li class="nav-item"> |
|||
<a href :class="[`nav-link`, {active:isCondition&&isMarket}]" @click.prevent="isCondition=true;isMarket=true;"> |
|||
{{ $t("common.stop-market") }}</a> |
|||
</li> --> |
|||
</ul> |
|||
<div class="tab-content"> |
|||
<div class="tab-pane fade show active"> |
|||
<div class="d-flex justify-content-between"> |
|||
<!------------- Buy Order --------------> |
|||
<div class="market-trade-buy" v-if="Tab_buysell == 1"> |
|||
|
|||
<!-- Trigger Price --> |
|||
<el-popover popper-class='popover-tips' placement="top-start" trigger="manual" v-model="visibles.buy.trigger"> |
|||
<span class="content"> |
|||
<i class="el-icon-warning-outline"></i> |
|||
{{ msgList.buy[0] }} |
|||
</span> |
|||
<div class="input-group" v-if="isCondition" slot="reference"> |
|||
<input type="number" style="background-color: #121212;" v-model="buyorder.trigger_price" class="form-control" :placeholder="$t('exchange.trigger-price')"> |
|||
<div class="input-group-append"> |
|||
<span class="input-group-text">{{pair.from}}</span> |
|||
</div> |
|||
</div> |
|||
</el-popover> |
|||
|
|||
<template v-if="isMarket"> |
|||
<div class="input-group"> |
|||
<!-- Market Price --> |
|||
<input type="text" class="form-control" disabled :placeholder="$t('exchange.at-best-price')"> |
|||
</div> |
|||
</template> |
|||
<template v-else> |
|||
<el-popover popper-class='popover-tips' placement="top-start" trigger="manual" v-model="visibles.buy.limitPrice"> |
|||
<span class="content"> |
|||
<i class="el-icon-warning-outline"></i> |
|||
{{ msgList.buy[1] }} |
|||
</span> |
|||
<div class="input-group" slot="reference"> |
|||
<!-- Entrust Price --> |
|||
<input type="number" v-model="buyorder.entrust_price" class="form-control" :placeholder="$t('exchange.enter-price')"> |
|||
<div class="input-group-append"> |
|||
<span class="input-group-text">{{pair.from}}</span> |
|||
</div> |
|||
</div> |
|||
</el-popover> |
|||
</template> |
|||
|
|||
<!-- Amount/Total --> |
|||
<template v-if="isMarket"> |
|||
<el-popover popper-class='popover-tips' placement="top-start" trigger="manual" v-model="visibles.buy.marketTotal"> |
|||
<span class="content"> |
|||
<i class="el-icon-warning-outline"></i> |
|||
{{ msgList.buy[3] }} |
|||
</span> |
|||
<div class="input-group" slot="reference"> |
|||
<!-- <input type="number" v-model="buyTotal" class="form-control" min=0 :placeholder="$t('exchange.enter-total')"> --> |
|||
<input type="number" v-model="buyorder.amount" class="form-control" min=0 :placeholder="$t('exchange.enter-total')"> |
|||
<div class="input-group-append"> |
|||
<!-- <span class="input-group-text">{{pair.from}}</span> --> |
|||
<span class="input-group-text">{{pair.to}}</span> |
|||
</div> |
|||
</div> |
|||
</el-popover> |
|||
</template> |
|||
<template v-else> |
|||
<el-popover popper-class='popover-tips' placement="top-start" trigger="manual" v-model="visibles.buy.limitAmount"> |
|||
<!-- 提示框的内容 --> |
|||
<span class="content"> |
|||
<!-- 图标 --> |
|||
<i class="el-icon-warning-outline"></i> |
|||
<!-- 提示 --> |
|||
{{ msgList.buy[2] }} |
|||
</span> |
|||
<div class="input-group" slot="reference"> |
|||
<input type="number" v-model="buyorder.amount" class="form-control" min=0 :placeholder="$t('exchange.enter-amount')"> |
|||
<div class="input-group-append"> |
|||
<span class="input-group-text">{{pair.to}}</span> |
|||
</div> |
|||
</div> |
|||
</el-popover> |
|||
</template> |
|||
|
|||
<!-- Percent --> |
|||
<ul class="market-trade-list"> |
|||
<li v-for="(item,index) in percentage" :key="index" :class="{buyPercentActive:index == buyPercentIndex}" @click="renderBuyAmount(item.value, index)"> |
|||
<a href="javascript:void 0">{{ item.label }}</a> |
|||
</li> |
|||
</ul> |
|||
|
|||
<!-- Total --> |
|||
<el-popover popper-class='popover-tips' placement="top-start" trigger="manual" v-model="visibles.buy.orderTotal"> |
|||
<span class="content"> |
|||
<i class="el-icon-warning-outline"></i> |
|||
{{ msgList.buy[5] }} |
|||
</span> |
|||
<p slot="reference"> |
|||
{{$t('exchange.order-total')}} |
|||
<span> <b>{{buyTotal}}</b> {{pair.from}} </span> |
|||
</p> |
|||
</el-popover> |
|||
|
|||
<!-- Available --> |
|||
<p> |
|||
{{ $t('exchange.amount') }} |
|||
<span> {{toBalance}} {{pair.to}}</span><br /> |
|||
{{ $t('exchange.balance') }} |
|||
<span> {{fromBalance}} {{pair.from}}</span> |
|||
</p> |
|||
<button class="btn buy" @click="handleBuyOrder">{{ $t("common.buy") }} {{pair.to}}</button> |
|||
</div> |
|||
|
|||
<!-- Sell Order --> |
|||
<div class="market-trade-buy" v-if="Tab_buysell == 2"> |
|||
<!-- class="market-trade-sell" --> |
|||
<el-popover popper-class='popover-tips' placement="top-start" trigger="manual" v-model="visibles.sell.trigger"> |
|||
<span class="content"> |
|||
<i class="el-icon-warning-outline"></i> |
|||
{{ msgList.sell[0] }} |
|||
</span> |
|||
<!-- Trigger Price --> |
|||
<div class="input-group" v-if="isCondition" slot="reference"> |
|||
<input type="number" v-model="sellorder.trigger_price" class="form-control" min=0 :placeholder="$t('exchange.trigger-price')"> |
|||
<div class="input-group-append"> |
|||
<span class="input-group-text">{{pair.from}}</span> |
|||
</div> |
|||
</div> |
|||
</el-popover> |
|||
|
|||
<template v-if="isMarket"> |
|||
<div class="input-group"> |
|||
<!-- Market Price --> |
|||
<input type="text" class="form-control" disabled :placeholder="$t('exchange.at-best-price')"> |
|||
</div> |
|||
</template> |
|||
<template v-else> |
|||
<el-popover popper-class='popover-tips' placement="top-start" trigger="manual" v-model="visibles.sell.limitPrice"> |
|||
<span class="content"> |
|||
<i class="el-icon-warning-outline"></i> |
|||
{{ msgList.sell[1] }} |
|||
</span> |
|||
<div class="input-group" slot="reference"> |
|||
<!-- Entrust Price --> |
|||
<input type="number" v-model="sellorder.entrust_price" class="form-control" min=0 :placeholder="$t('exchange.enter-price')"> |
|||
<div class="input-group-append"> |
|||
<span class="input-group-text">{{pair.from}}</span> |
|||
</div> |
|||
</div> |
|||
</el-popover> |
|||
</template> |
|||
|
|||
<!-- Amount --> |
|||
<el-popover popper-class='popover-tips' placement="top-start" trigger="manual" v-model="visibles.sell.limitAmount"> |
|||
<span class="content"> |
|||
<i class="el-icon-warning-outline"></i> |
|||
{{ msgList.sell[2] }} |
|||
</span> |
|||
<div class="input-group" slot="reference"> |
|||
<input type="number" v-model="sellorder.amount" class="form-control" min=0 :placeholder="$t('exchange.enter-amount')"> |
|||
<div class="input-group-append"> |
|||
<span class="input-group-text">{{pair.to}}</span> |
|||
</div> |
|||
</div> |
|||
</el-popover> |
|||
|
|||
<ul class="market-trade-list"> |
|||
<li v-for="(item,index) in percentage" :key="index" :class="{sellPercentActive:index == sellPercentIndex}" @click="renderSellAmount(item.value, index)"> |
|||
<a href="javascript:void 0">{{ item.label }}</a> |
|||
</li> |
|||
</ul> |
|||
|
|||
<!-- Total --> |
|||
<el-popover popper-class='popover-tips' placement="top-start" trigger="manual" v-model="visibles.sell.orderTotal"> |
|||
<span class="content"> |
|||
<i class="el-icon-warning-outline"></i> |
|||
{{ msgList.sell[5] }} |
|||
</span> |
|||
<p slot="reference"> |
|||
{{ $t('exchange.order-total') }} |
|||
<span> |
|||
<b>{{sellTotal}}</b> {{pair.from}} </span> |
|||
</p> |
|||
</el-popover> |
|||
|
|||
<p> |
|||
{{$t('exchange.amount')}} |
|||
<span> {{toBalance}} {{pair.to}} </span><br /> |
|||
{{ $t('exchange.balance') }} |
|||
<span> {{fromBalance}} {{pair.from}}</span> |
|||
</p> |
|||
<button class="btn sell" @click="handleSellOrder">{{ $t("common.sell") }} {{pair.to}}</button> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
</template> |
|||
|
|||
<script> |
|||
import Exchange from "@/api/exchange"; |
|||
import Market from "@/api/market"; |
|||
export default { |
|||
|
|||
props: ["isLogin", "socket", "symbol", "pair", "buyorder", "sellorder", "fromBalance", "toBalance", "newTrade", "minQty", "minTotal", "priceDecimals", "qtyDecimals"], |
|||
|
|||
data() { |
|||
return { |
|||
Tab_buysell:1, |
|||
detail:[], |
|||
isMarket: true, |
|||
isCondition: false, |
|||
userBanlance: null, |
|||
|
|||
cacheTotal: 0, // 存放市价单输入的总值 |
|||
cachePrice: null, // 存放最新价格 |
|||
|
|||
// 气泡弹框内容和触发 |
|||
visibles: { |
|||
"buy": { |
|||
limitPrice: false, // 限制价格 |
|||
limitAmount: false, // 限制数量 |
|||
marketTotal: false, // 限制总额 |
|||
marketAmount: false, // 市价数量 |
|||
trigger: false, // 触发价格 |
|||
orderTotal: false, // 订单总额 |
|||
}, |
|||
"sell": { |
|||
limitPrice: false, |
|||
limitAmount: false, |
|||
marketTotal: false, |
|||
marketAmount: false, |
|||
trigger: false, |
|||
orderTotal: false, |
|||
}, |
|||
}, |
|||
msgList: { |
|||
"buy": Array(6).fill(''), // 5个空字符串的数组 |
|||
"sell": Array(6).fill('') |
|||
}, |
|||
// 百分比集合 |
|||
percentage: [{ |
|||
label: "25%", |
|||
value: 0.25 |
|||
}, |
|||
{ |
|||
label: "50%", |
|||
value: 0.5 |
|||
}, |
|||
{ |
|||
label: "75%", |
|||
value: 0.75 |
|||
}, |
|||
{ |
|||
label: "100%", |
|||
value: 1 |
|||
}, |
|||
], |
|||
// |
|||
buyPercentIndex: null, |
|||
sellPercentIndex: null, |
|||
} |
|||
}, |
|||
|
|||
computed: { |
|||
|
|||
// 获取type类型值 |
|||
type() { |
|||
if (!this.isCondition) { |
|||
return this.isMarket ? 2 : 1; |
|||
} else { |
|||
return this.isMarket ? 4 : 3; |
|||
} |
|||
}, |
|||
|
|||
theme() { |
|||
return localStorage.theme ? localStorage.theme : "light"; |
|||
}, |
|||
|
|||
buyTotal: { |
|||
get() { |
|||
if (!this.isMarket) { |
|||
return Math.multiple(this.buyorder.entrust_price, this.buyorder.amount); |
|||
} else { |
|||
// return this.cacheTotal; |
|||
return Math.multiple(this.buyorder.entrust_price, this.buyorder.amount); |
|||
} |
|||
}, |
|||
set(val) { |
|||
// 根据总值 计算数量 |
|||
if (!this.isMarket) { |
|||
this.buyorder.amount = Math.division(val, this.buyorder.entrust_price); |
|||
} else { // 市价单 缓存总值 |
|||
this.cacheTotal = val; |
|||
this.buyorder.amount = this.cacheTotal |
|||
} |
|||
} |
|||
}, |
|||
|
|||
sellTotal: { |
|||
get() { |
|||
return Math.multiple(this.sellorder.entrust_price, this.sellorder.amount); |
|||
} |
|||
}, |
|||
|
|||
// 当前语言 |
|||
lang() { |
|||
let browser_Lang = navigator.language.includes('zh') ? 'zh' : 'en'; |
|||
return localStorage.lang || browser_Lang; |
|||
}, |
|||
|
|||
}, |
|||
|
|||
watch: { |
|||
custom(newVal) { |
|||
// console.log(newVal) |
|||
}, |
|||
|
|||
type() { |
|||
// 切换订单类型时 清空价格和数量 |
|||
// 数量改变时 触发percentage更新 |
|||
this.reset(); |
|||
}, |
|||
|
|||
// 有新交易时触发 给限价单设定初始价格 |
|||
newTrade(newVal, oldVal) { |
|||
// if (!this.isMarket ) { |
|||
|
|||
// 新交易对有trade数据 |
|||
if (!oldVal && newVal) { // 没值到初始化值 |
|||
// 修改order里面price的值 |
|||
this.cachePrice = newVal.price; |
|||
this.reset(); |
|||
} |
|||
|
|||
// 切换交易对时 清空了数据 |
|||
if (oldVal && !newVal) { // 有值到没值的过程 |
|||
this.cachePrice = null; |
|||
this.reset(); |
|||
} |
|||
// } |
|||
}, |
|||
symbol(){ |
|||
this.getCoinInfo() |
|||
} |
|||
}, |
|||
|
|||
methods: { |
|||
getCoinInfo(){ |
|||
// console.log(this.symbol.indexOf('usdt')!=-1) |
|||
|
|||
// if(!this.symbol){ |
|||
// return; |
|||
// } |
|||
if(this.symbol.indexOf('usdt')!=-1){ |
|||
var market=this.symbol.substring(0,this.symbol.length-4); |
|||
}else{ |
|||
var market=this.symbol.substring(0,this.symbol.length-3); |
|||
} |
|||
// console.log(market) |
|||
let data = { |
|||
coin_name:market, |
|||
// coin_name:this.symbol, |
|||
lang:this.lang |
|||
} |
|||
Market.getstockCoinInfo(data).then(res => { |
|||
this.detail = res |
|||
}).catch(err => { |
|||
|
|||
}); |
|||
}, |
|||
renderBuyAmount(val, index) { |
|||
// console.Info(val) |
|||
// console.Info(this.buyorder) |
|||
if (!this.buyorder.entrust_price) { |
|||
this.visibles.buy.limitPrice = true; |
|||
this.msgList.buy[1] = this.$t('nav.set'); |
|||
this.clearAll(); |
|||
return; |
|||
} |
|||
this.buyPercentIndex = index; |
|||
this.buyTotal = Math.multiple(this.fromBalance, val); |
|||
}, |
|||
|
|||
renderSellAmount(val, index) { |
|||
if (!this.sellorder.entrust_price) { |
|||
this.visibles.sell.limitPrice = true; |
|||
this.msgList.sell[1] = this.$t('nav.set'); |
|||
this.clearAll(); |
|||
return; |
|||
} |
|||
this.sellPercentIndex = index; |
|||
this.sellorder.amount = Math.multiple(this.toBalance, val); |
|||
}, |
|||
|
|||
handleBuyOrder() { |
|||
|
|||
// 执行前端的有效性验证 |
|||
if (!this.chkValidate(this.buyorder, this.buyTotal, "buy")) return; |
|||
|
|||
const baseArgs = { |
|||
symbol: this.pair.to.concat('/', this.pair.from), |
|||
type: this.type, |
|||
}; |
|||
|
|||
// 区分限价、市价和条件委托单 |
|||
// 1、限价单买入时 需要的参数：价格、数量、 |
|||
// 2、市价单买入时 需要的参数：总值 |
|||
// 3、条件单买入时 需要的参数：触发价、价格数量或者总值 |
|||
// 4、卖出时 需要价格和数量 |
|||
Exchange.stockstoreEntrust(Object.assign(this.buyorder, { |
|||
total: this.buyTotal, |
|||
}, baseArgs)).then(data => { |
|||
this.$message({ |
|||
message:'success', |
|||
type: "success" |
|||
}); |
|||
// 触发父组件的方法 更新余额和订单 |
|||
this.$emit('update'); |
|||
// 清空表单 |
|||
this.reset(); |
|||
}).catch(err => { |
|||
|
|||
}); |
|||
}, |
|||
|
|||
handleSellOrder() { |
|||
// 执行前端的有效性验证 |
|||
if (!this.chkValidate(this.sellorder, this.sellTotal, "sell")) return; |
|||
// console.info(this.sellTotal) |
|||
const baseArgs = { |
|||
symbol: this.pair.to.concat('/', this.pair.from), |
|||
type: this.type, |
|||
}; |
|||
Exchange.stockstoreEntrust(Object.assign(this.sellorder, { |
|||
total: this.sellTotal |
|||
}, baseArgs)).then(data => { |
|||
this.$message({ |
|||
message:'success', |
|||
type: "success" |
|||
}); |
|||
// 触发父组件的方法 更新余额和订单 |
|||
this.$emit('update'); |
|||
// 清空表单 |
|||
this.reset(); |
|||
}).catch(err => { |
|||
|
|||
}); |
|||
}, |
|||
|
|||
reset() { |
|||
|
|||
// 如果没有newTrade时 则没有缓存价格 重置为最小值0 |
|||
// 由于输入框去除了精度空值 这里还需要手动设置精度值 |
|||
let price = this.cachePrice || 0; |
|||
// console.info(price) |
|||
// console.info(this.priceDecimals) |
|||
this.buyorder.entrust_price = Math.omitTo(price, this.priceDecimals); |
|||
this.buyorder.trigger_price = Math.omitTo(price, this.priceDecimals); |
|||
|
|||
this.sellorder.entrust_price = Math.omitTo(price, this.priceDecimals); |
|||
// console.info(this.sellorder.entrust_price) |
|||
this.sellorder.trigger_price = Math.omitTo(price, this.priceDecimals); |
|||
|
|||
// 清空数量 |
|||
this.buyorder.amount = 0; |
|||
this.sellorder.amount = 0; |
|||
|
|||
// total赋值会触发set方法 |
|||
// this.buyTotal = 0; |
|||
// this.cacheTotal = 0; |
|||
|
|||
// 去除百分比样式 |
|||
this.buyPercentIndex = -1; |
|||
this.sellPercentIndex = -1; |
|||
}, |
|||
|
|||
clearAll() { |
|||
// 5s后统一清除提示框 |
|||
setTimeout(function () { |
|||
Object.keys(this.visibles.buy).forEach(key => this.visibles.buy[key] = false); |
|||
Object.keys(this.visibles.sell).forEach(key => this.visibles.sell[key] = false); |
|||
}.bind(this), 5000); |
|||
}, |
|||
|
|||
empty(val) { |
|||
let ret; |
|||
switch (typeof val) { |
|||
case "number": |
|||
ret = val == 0; |
|||
break; |
|||
case "string": |
|||
ret = val == "0" || /^\s?$/.test(val); |
|||
break; |
|||
case "boolean": |
|||
ret = val; |
|||
break; |
|||
default: |
|||
ret = Boolean(val); |
|||
break; |
|||
} |
|||
return ret; |
|||
}, |
|||
|
|||
chkValidate(order, total, orderType) { |
|||
// |
|||
// 验证登录 |
|||
if (!this.isLogin) { |
|||
this.$confirm(this.$t('nav.login'), { |
|||
confirmButtonText:this.$t('common.confirmBtn'), |
|||
cancelButtonText: this.$t('common.cancelBtn'), |
|||
type: 'warning' |
|||
}).then(() => { |
|||
this.$router.push(`/sign-in`); |
|||
}).catch(); |
|||
return; |
|||
} |
|||
|
|||
let flag = true; |
|||
|
|||
switch (this.type) { |
|||
|
|||
case 1: // limit |
|||
if (this.empty(order.entrust_price)) { |
|||
flag = false; |
|||
this.visibles[orderType].limitPrice = true; |
|||
this.msgList[orderType][1] = this.$t('nav.a1'); |
|||
} else if (this.empty(order.amount)) { |
|||
flag = false; |
|||
this.visibles[orderType].limitAmount = true; |
|||
this.msgList[orderType][2] = this.$t('nav.a2'); |
|||
} else { |
|||
if (order.amount < this.minQty) { |
|||
flag = false; |
|||
this.visibles[orderType].limitAmount = true; |
|||
this.msgList[orderType][2] = this.$t('nav.a3')+`${this.minQty}`; |
|||
} |
|||
|
|||
if (total < this.minTotal) { |
|||
flag = false; |
|||
this.visibles[orderType].orderTotal = true; |
|||
this.msgList[orderType][5] = this.$t('exchange.total')+`${this.minTotal}`; |
|||
} |
|||
} |
|||
break; |
|||
|
|||
case 2: // market |
|||
if (order.direction == "buy") { // 买 |
|||
if (this.empty(total)) { |
|||
flag = false; |
|||
this.visibles[orderType].marketTotal = true; |
|||
this.msgList[orderType][3] = this.$t('nav.a4'); |
|||
} else if (this.total < this.minTotal) { |
|||
flag = false; |
|||
this.visibles.marketTotal = true; |
|||
this.msgList[3] = this.$t('nav.a5')+` ${this.minTotal}`; |
|||
} |
|||
} |
|||
|
|||
if (order.direction == "sell") { // 卖 |
|||
if (this.empty(order.amount)) { |
|||
flag = false; |
|||
this.visibles[orderType].marketAmount = true; |
|||
this.msgList[orderType][4] = this.$t('nav.a6'); |
|||
} else if (order.amount < this.minQty) { |
|||
flag = false; |
|||
this.visibles[orderType].marketAmount = true; |
|||
this.msgList[orderType][4] = this.$t('nav.a7')+` ${this.minQty}`; |
|||
} |
|||
} |
|||
break; |
|||
|
|||
case 3: // stop-limit |
|||
|
|||
if (this.empty(order.trigger_price)) { |
|||
flag = false; |
|||
this.visibles[orderType].trigger = true; |
|||
this.msgList[orderType][0] = this.$t('nav.a8') |
|||
} else if (this.empty(order.entrust_price)) { |
|||
flag = false; |
|||
this.visibles[orderType].limitPrice = true; |
|||
this.msgList[orderType][1] = this.$t('nav.a9') |
|||
} else if (this.empty(order.amount)) { |
|||
flag = false; |
|||
this.visibles[orderType].limitAmount = true; |
|||
this.msgList[orderType][2] = this.$t('nav.b1') |
|||
} |
|||
break; |
|||
|
|||
case 4: // stop-market |
|||
if (this.empty(order.trigger_price)) { |
|||
flag = false; |
|||
this.visibles[orderType].trigger = true; |
|||
this.msgList[orderType][0] = this.$t('nav.b2') |
|||
} else { |
|||
|
|||
if (order.direction == "buy") { |
|||
if (this.empty(total)) { |
|||
flag = false; |
|||
this.visibles[orderType].marketTotal = true; |
|||
this.msgList[orderType][3] = this.$t('nav.b3') |
|||
} else if (total < this.minTotal) { |
|||
flag = false; |
|||
this.visibles[orderType].marketTotal = true; |
|||
this.msgList[orderType][3] = this.$t('nav.b5')+` ${this.minTotal}` |
|||
} |
|||
} |
|||
|
|||
if (order.direction == "sell") { |
|||
if (this.empty(order.amount)) { |
|||
flag = false; |
|||
this.visibles[orderType].marketAmount = true; |
|||
this.msgList[orderType][4] = this.$t('nav.b6') |
|||
} else if (order.amount < this.minQty) { |
|||
flag = false; |
|||
this.visibles[orderType].marketAmount = true; |
|||
this.msgList[orderType][4] =this.$t('nav.b7')+ ` ${this.minQty}` |
|||
} |
|||
} |
|||
|
|||
} |
|||
break; |
|||
} |
|||
|
|||
// 清除所有样式 |
|||
this.clearAll(); |
|||
|
|||
// 返回验证结果 |
|||
return flag; |
|||
}, |
|||
|
|||
}, |
|||
|
|||
created() { |
|||
this.getCoinInfo() |
|||
this.reset(); |
|||
}, |
|||
|
|||
} |
|||
</script> |
|||
|
|||
<style lang="scss" scoped> |
|||
.buyPercentActive { |
|||
a:link { |
|||
font-weight: bold; |
|||
background: #26a69a; |
|||
color: #fff; |
|||
} |
|||
} |
|||
|
|||
.sellPercentActive { |
|||
a:link { |
|||
font-weight: bold; |
|||
background: #ef5350; |
|||
color: #fff; |
|||
} |
|||
} |
|||
|
|||
.input-group-text { |
|||
width: 68px; |
|||
@include flexible(row, center, center); |
|||
} |
|||
|
|||
.market-trade { |
|||
border: none; |
|||
border-color: transparent; |
|||
} |
|||
.market{ |
|||
width: 300px; |
|||
height: 500px; |
|||
overflow: scroll; |
|||
display: flex; |
|||
flex-wrap: wrap; |
|||
padding: 10px; |
|||
display: -webkit-box; |
|||
color: black; |
|||
.ov{ |
|||
width: 100%; |
|||
table-layout:fixed; |
|||
word-break:break-all; |
|||
overflow:hidden; |
|||
} |
|||
} |
|||
.p-y-xs{ |
|||
padding: 5px 0; |
|||
} |
|||
.el-button{ |
|||
padding: 0!important; |
|||
background: transparent!important; |
|||
} |
|||
|
|||
.Tab_buy{ |
|||
width: 50%; |
|||
height: 40px; |
|||
color: #ffffff; |
|||
line-height: 40px; |
|||
text-align: center; |
|||
border-radius: 40px; |
|||
background-color: #25a750; |
|||
} |
|||
.Tab_buy1{ |
|||
width: 50%; |
|||
height: 40px; |
|||
color: #ffffff; |
|||
line-height: 40px; |
|||
text-align: center; |
|||
border-radius: 40px; |
|||
} |
|||
.Tab_sell{ |
|||
width: 50%; |
|||
height: 40px; |
|||
color: #ffffff; |
|||
line-height: 40px; |
|||
text-align: center; |
|||
border-radius: 40px; |
|||
background-color: #ca3f64; |
|||
} |
|||
.Tab_sell1{ |
|||
width: 50%; |
|||
height: 40px; |
|||
color: #ffffff; |
|||
line-height: 40px; |
|||
text-align: center; |
|||
border-radius: 40px; |
|||
} |
|||
|
|||
.market-trade input{ |
|||
border: 1px solid #404040; |
|||
} |
|||
.input-group-text{ |
|||
border: 1px solid #404040; |
|||
background-color: #121212; |
|||
} |
|||
.form-control{ |
|||
background-color: #121212; |
|||
} |
|||
.market-trade p{ |
|||
color: #e7e7e7; |
|||
} |
|||
</style> |
|||
@ -0,0 +1,54 @@ |
|||
<template> |
|||
<div class="col-md-3"> |
|||
<div class="market-news mt15"> |
|||
|
|||
<h2 class="heading">{{ $t("common.news") }}</h2> |
|||
<ul> |
|||
<li v-for="item in records" :key="item.id"> |
|||
|
|||
<router-link :to="`/college/detail/${item.category_id}/${item.id}`"> |
|||
<strong>{{ truncate(item.title, 25) }}</strong> |
|||
{{ truncate(item.excerpt, 50) }} |
|||
<span>{{ item.updated_at }}</span> |
|||
</router-link> |
|||
|
|||
</li> |
|||
</ul> |
|||
</div> |
|||
</div> |
|||
</template> |
|||
|
|||
<script> |
|||
import Exchange from "@/api/exchange"; |
|||
|
|||
export default { |
|||
data() { |
|||
return { |
|||
records: [], // 所有新动态 |
|||
} |
|||
}, |
|||
|
|||
methods: { |
|||
getDynamic() { |
|||
Exchange.newTrends(10).then(data => { |
|||
this.records = data; |
|||
}).catch(err => { |
|||
|
|||
}); |
|||
}, |
|||
truncate(str, length) { |
|||
return _.truncate(str, { |
|||
length |
|||
}); |
|||
} |
|||
}, |
|||
|
|||
created() { |
|||
this.getDynamic(); |
|||
}, |
|||
} |
|||
</script> |
|||
|
|||
<style> |
|||
|
|||
</style> |
|||
@ -0,0 +1,358 @@ |
|||
<template> |
|||
<div class="col-md-9"> |
|||
<div class="exchange-history order-history market-order mt15"> |
|||
<ul class="nav nav-pills" role="tablist"> |
|||
<li class="nav-item" @click="toggle('stockholdPosition')"> |
|||
<a class="nav-link active" data-toggle="pill" href="#stock-holdPosition" role="tab" aria-selected="true">{{$t("exchange.a2")}}</a> |
|||
</li> |
|||
<li class="nav-item" @click="toggle('opens')"> |
|||
<a class="nav-link" data-toggle="pill" href="#open-orders" role="tab" aria-selected="true"> |
|||
{{ $t("common.open-orders") }}</a> |
|||
</li> |
|||
<!-- <li class="nav-item" @click="toggle('conditions')"> |
|||
<a class="nav-link" data-toggle="pill" href="#stop-orders" role="tab" aria-selected="false"> |
|||
{{ $t("common.condition-orders") }}</a> |
|||
</li> --> |
|||
<li class="nav-item" @click="toggle('histories')"> |
|||
<a class="nav-link" data-toggle="pill" href="#order-history" role="tab" aria-selected="false"> |
|||
{{ $t("common.history-orders") }}</a> |
|||
</li> |
|||
</ul> |
|||
<div class="tab-content"> |
|||
<div class="tab-pane fade show active" id="open-orders" role="tabpanel"> |
|||
<table class="table" v-if="ordersOpen.total"> |
|||
<thead> |
|||
<tr class="text-nowrap"> |
|||
<th>{{ $t("common.created") }}</th> |
|||
<th>{{ $t("common.pair") }}</th> |
|||
<th>{{ $t("common.direction") }}</th> |
|||
<th>{{ $t("common.order-type") }}</th> |
|||
<th>{{ $t("common.order-price") }}</th> |
|||
<th>{{ $t("common.order-amount") }}</th> |
|||
<th>{{ $t("common.executed-amount") }}</th> |
|||
<th>{{ $t("common.executed-total") }}</th> |
|||
<th>{{ $t("common.outstanding") }}</th> |
|||
<th>{{ $t("common.order-total") }}</th> |
|||
<!-- <th>状态</th> --> |
|||
<th class="text-right">{{ $t("common.action") }}</th> |
|||
</tr> |
|||
</thead> |
|||
<tbody class="order-tbody"> |
|||
<tr v-for="(item,idx) in ordersOpen.data" :key="item.id" class="text-nowrap"> |
|||
<td>{{item.created_at}}</td> |
|||
<td>{{item.symbol}}</td> |
|||
|
|||
<template v-if="item.entrust_type == 1"> |
|||
<td class="green">{{$t("common.buy-in")}}</td> |
|||
</template> |
|||
<template v-else-if="item.entrust_type == 2"> |
|||
<td class="red">{{$t("common.sell-out")}}</td> |
|||
</template> |
|||
|
|||
<td> |
|||
<template v-if="item.type==1">{{ $t("common.limit-type") }}</template> |
|||
<template v-if="item.type==2">{{ $t("common.market-type") }}</template> |
|||
</td> |
|||
|
|||
<td>{{item.entrust_price|omitTo(priceDecimals)}}</td> |
|||
|
|||
<td>{{item.amount|omitTo(qtyDecimals)}}</td> |
|||
|
|||
<td>{{item.traded_amount|omitTo(priceDecimals)}}</td> |
|||
<td>{{item.traded_money|omitTo(priceDecimals)}}</td> |
|||
|
|||
<td>{{item.surplus_amount||omitTo(qtyDecimals)}}</td> |
|||
|
|||
<td>{{item.money ? Math.omitTo(item.money, priceDecimals) : '-'}}</td> |
|||
<!-- <td>完成</td> --> |
|||
<td class="text-nowrap"> |
|||
<button type="button" class="btn btn-sm btn-outline-danger" |
|||
@click="delOrder(item,idx)">{{ $t("common.cancel") }}</button> |
|||
</td> |
|||
</tr> |
|||
</tbody> |
|||
</table> |
|||
<div class="no-data" v-else> |
|||
<span> |
|||
<i class="icon ion-md-document"></i> |
|||
{{ $t("common.notData") }} |
|||
</span> |
|||
</div> |
|||
</div> |
|||
|
|||
<div class="tab-pane fade" id="stock-holdPosition" role="tabpanel"> |
|||
<table class="table" v-if="holdPositionList.length>0"> |
|||
<thead> |
|||
<tr class="text-nowrap"> |
|||
<th>{{$t("exchange.a3")}}</th> |
|||
<th>{{$t("exchange.a4")}}</th> |
|||
<th>{{$t("exchange.a5")}}</th> |
|||
<th>{{$t("exchange.a6")}}</th> |
|||
<th>{{$t("exchange.a7")}}</th> |
|||
<th>{{$t("exchange.a8")}}</th> |
|||
<th>{{$t("exchange.a9")}}</th> |
|||
<th>{{$t("exchange.a10")}}</th> |
|||
</tr> |
|||
</thead> |
|||
<tbody class="order-tbody"> |
|||
<tr v-for="(item,idx) in holdPositionList" :key="item.id" class="text-nowrap"> |
|||
<td>{{item.pair_name}}</td> |
|||
<td>{{item.market}}</td> |
|||
<td>{{item.usable_balance}}</td> |
|||
<td>{{item.realtimePrice}}</td> |
|||
<td>{{item.cost_price}}</td> |
|||
<td>{{item.dayProfit}}</td> |
|||
<td>{{item.unRealProfit}}</td> |
|||
<td>{{item.profitRate}}</td> |
|||
</tr> |
|||
</tbody> |
|||
</table> |
|||
<span class="no-data" v-else> |
|||
<i class="icon ion-md-document"></i> |
|||
{{ $t("common.notData") }} |
|||
</span> |
|||
<!-- <div class="p-2"> |
|||
<el-pagination layout="prev, pager, next" :page-size="holdPositionList.per_page" |
|||
@current-change="changePagination1" :total="holdPositionList.total"> |
|||
</el-pagination> |
|||
</div> --> |
|||
</div> |
|||
|
|||
<div class="tab-pane fade" id="stop-orders" role="tabpanel"> |
|||
<!-- <ul class="d-flex justify-content-between market-order-item"> |
|||
<li>{{ $t("common.created") }}</li> |
|||
<li>{{ $t("common.pair") }}</li> |
|||
<li>{{ $t("common.direction") }}</li> |
|||
<li>{{ $t("common.order-type") }}</li> |
|||
<li>{{ $t("common.avg-price") }}</li> |
|||
<li>{{ $t("common.executed") }}</li> |
|||
<li>{{ $t("common.order-total") }}</li> |
|||
<li>{{ $t("common.price-total") }}</li> |
|||
</ul> |
|||
<span class="no-data"> |
|||
<i class="icon ion-md-document"></i> |
|||
{{ $t("common.notData") }} |
|||
</span> --> |
|||
</div> |
|||
|
|||
<div class="tab-pane fade" id="order-history" role="tabpanel"> |
|||
<table class="table" v-if="ordersHistory.total"> |
|||
<thead> |
|||
<tr class="text-nowrap"> |
|||
<th>{{ $t("common.created") }}</th> |
|||
<th>{{ $t("common.pair") }}</th> |
|||
<th>{{ $t("common.direction") }}</th> |
|||
<th>{{ $t("common.order-type") }}</th> |
|||
<th>{{ $t("common.order-price") }}</th> |
|||
<th>{{ $t("common.order-amount") }}</th> |
|||
<th>{{ $t("common.executed-amount") }}</th> |
|||
<th>{{ $t("common.avg-price") }}</th> |
|||
|
|||
<th>{{ $t("common.order-total") }}</th> |
|||
<th>{{ $t("common.status") }}</th> |
|||
<th>{{ $t("common.details") }}</th> |
|||
</tr> |
|||
</thead> |
|||
<tbody> |
|||
<template v-for="(item,index) in ordersHistory.data"> |
|||
<tr class="text-nowrap" :key="item.id" :name="item.entrust_type+'_'+item.id+'_'+index" |
|||
slot="title" @click="handleChange(item)"> |
|||
<td>{{item.created_at}}</td> |
|||
<td>{{item.symbol}}</td> |
|||
<template v-if="item.entrust_type == 1"> |
|||
<td class="green">{{$t("common.buy-in")}}</td> |
|||
</template> |
|||
<template v-else-if="item.entrust_type == 2"> |
|||
<td class="red">{{$t("common.sell-out")}}</td> |
|||
</template> |
|||
<td> |
|||
<template v-if="item.type==1">{{ $t("common.limit-type") }}</template> |
|||
<template v-if="item.type==2">{{ $t("common.market-type") }}</template> |
|||
</td> |
|||
<td>{{item.entrust_price ? Math.omitTo(item.entrust_price, priceDecimals) : '-'}} |
|||
</td> |
|||
<td>{{item.amount|omitTo(qtyDecimals)}}</td> |
|||
|
|||
<td>{{ item.traded_amount|omitTo(qtyDecimals) }}</td> |
|||
|
|||
<td v-if="item.status"> |
|||
{{Math.division(item.traded_money,item.traded_amount,priceDecimals)}} |
|||
</td> |
|||
<td v-else>-</td> |
|||
<td>{{item.traded_money|omitTo(priceDecimals)}}</td> |
|||
<template v-if="item.status"> |
|||
<td v-if="item.status == 3"> |
|||
{{ $t("common.completed") }} |
|||
</td> |
|||
</template> |
|||
<template v-else> |
|||
<td>{{ $t("common.canceled") }}</td> |
|||
</template> |
|||
<td> |
|||
<i v-if="item.show" class="el-icon-arrow-down"></i> |
|||
<i v-else class="el-icon-arrow-right"></i> |
|||
</td> |
|||
</tr> |
|||
<tr :key="item.id+'t'" v-if="item.show"> |
|||
<td colspan="11"> |
|||
<template v-if="item.children && item.children.length"> |
|||
<div v-for="rec in item.children" :key="rec.order_id"> |
|||
<span> |
|||
<span class="text-secondary"> |
|||
{{ $t("common.id") }} |
|||
</span>：{{ rec.order_id}}   |
|||
</span> |
|||
<span><span class="text-secondary"> |
|||
{{ $t("common.created") }}</span>：{{ rec.created_at}} |
|||
 </span> |
|||
<span><span class="text-secondary"> |
|||
{{ $t("common.filled-price") }}</span>：{{ rec.unit_price|omitTo(priceDecimals)}} |
|||
 </span> |
|||
<span><span class="text-secondary"> |
|||
{{ $t("common.filled-amount") }}</span>：{{ rec.trade_amount|omitTo(qtyDecimals)}} |
|||
 </span> |
|||
<span><span class="text-secondary"> |
|||
{{ $t("common.filled-total") }}</span>：{{ rec.trade_money|omitTo(priceDecimals)}} |
|||
 </span> |
|||
<span><span class="text-secondary"> |
|||
{{ $t("common.fee") }}</span>：{{ rec.trade_fee|omitTo(priceDecimals)}} |
|||
 </span> |
|||
<span v-if="rec.total_profit>=0"><span class="text-secondary"> |
|||
{{ $t("common.d23") }}</span>：{{rec.total_profit}} |
|||
 </span> |
|||
</div> |
|||
</template> |
|||
<div class="text-center text-secondary" v-else> |
|||
Loading... |
|||
</div> |
|||
</td> |
|||
</tr> |
|||
</template> |
|||
</tbody> |
|||
</table> |
|||
<span class="no-data" v-else> |
|||
<i class="icon ion-md-document"></i> |
|||
{{ $t("common.notData") }} |
|||
</span> |
|||
<div class="p-2"> |
|||
<el-pagination layout="prev, pager, next" :page-size="ordersHistory.per_page" |
|||
@current-change="changePagination" :total="ordersHistory.total"> |
|||
</el-pagination> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
</template> |
|||
|
|||
<script> |
|||
import Order from "@/api/order"; |
|||
import math from "@/utils/class/math.js"; |
|||
|
|||
export default { |
|||
props: [ |
|||
"ordersOpen", |
|||
"ordersHistory", |
|||
"holdPositionList", |
|||
"conditionOrders", |
|||
"priceDecimals", |
|||
"qtyDecimals", |
|||
"isLogin", |
|||
"pair" |
|||
], |
|||
|
|||
data() { |
|||
return { |
|||
currentTab: "stockholdPosition", |
|||
activeItems: [] |
|||
}; |
|||
}, |
|||
methods: { |
|||
omitTo: math.omitTo, |
|||
toggle(name) { |
|||
this.currentTab = name; |
|||
// 更新父组件 |
|||
this.$emit("change", name); |
|||
}, |
|||
|
|||
update() { |
|||
this.$emit("update"); |
|||
}, |
|||
|
|||
// 撤销当前订单 |
|||
delOrder(item, idx) { |
|||
let data = { |
|||
entrust_id: item.id, |
|||
entrust_type: item.entrust_type, |
|||
symbol: item.symbol |
|||
}; |
|||
this.$confirm(this.$t("order.ifCancel", { |
|||
confirmButtonText: this.$t('common.confirmBtn'), |
|||
cancelButtonText: this.$t('common.cancelBtn'), |
|||
})) |
|||
.then(res => { |
|||
Order.stockcancelEntrust(data) |
|||
.then(res => { |
|||
this.$message.success(this.$t("order.cancelSuccess")); |
|||
this.update(); |
|||
}) |
|||
.catch(() => {}); |
|||
}) |
|||
.catch(err => {}); |
|||
}, |
|||
|
|||
handleChange(item) { |
|||
this.$set(item, "show", !item.show); |
|||
if (item.children) return; |
|||
if (this.isLogin) { |
|||
Order.getstockEntrustTradeRecord({ |
|||
entrust_type: item.entrust_type, |
|||
entrust_id: item.id |
|||
}) |
|||
.then(data => { |
|||
this.$set(item, "children", data); |
|||
}) |
|||
.catch(err => {}); |
|||
} |
|||
|
|||
}, |
|||
changePagination(idx) { |
|||
// console.log(idx); |
|||
this.$emit("Pagination", idx); |
|||
}, |
|||
changePagination1(idx) { |
|||
// console.log(idx); |
|||
this.$emit("Pagination1", idx); |
|||
} |
|||
}, |
|||
created() { |
|||
// console.log(this.ordersHistory); |
|||
} |
|||
}; |
|||
</script> |
|||
|
|||
<style scoped> |
|||
.market-order{ |
|||
border: 1px solid #404040; |
|||
} |
|||
</style> |
|||
<style lang="scss"> |
|||
.exchange-history { |
|||
.nav { |
|||
background: #121212; |
|||
} |
|||
|
|||
.nav-link.active { |
|||
color: #007bff; |
|||
background: transparent; |
|||
} |
|||
} |
|||
|
|||
.order-tbody { |
|||
display: table-row-group !important; |
|||
|
|||
tr { |
|||
float: none; |
|||
} |
|||
} |
|||
</style> |
|||
@ -0,0 +1,260 @@ |
|||
<template> |
|||
<div class="col-md-3"> |
|||
<div class="market-pairs"> |
|||
|
|||
<!-- 搜索框区域 --> |
|||
<div class="input-group"> |
|||
<div class="input-group-prepend"> |
|||
<span class="input-group-text" id="inputGroup-sizing-sm"> |
|||
<i class="icon ion-md-search"></i> |
|||
</span> |
|||
</div> |
|||
<input type="text" class="form-control" v-model="keyword" :placeholder="$t('exchange.search')" aria-describedby="inputGroup-sizing-sm"> |
|||
</div> |
|||
|
|||
<!-- 币种列表 --> |
|||
<ul class="nav nav-pills" role="tablist" ref="navList"> |
|||
|
|||
<li class="nav-item" v-for="(coin, index) in markets" :key="index"> |
|||
<a :class="[`nav-link`, {active:currentCoinIdx == index}]" href @click.prevent="currentCoinIdx = index"> |
|||
<!-- 查看收藏交易对 --> |
|||
<template v-if="coin.coin_name == 'fav'"> |
|||
<i class="icon ion-md-star"></i> |
|||
</template> |
|||
<template v-else> |
|||
{{ coin.coin_name }} |
|||
</template> |
|||
</a> |
|||
</li> |
|||
|
|||
</ul> |
|||
|
|||
<!-- 币种行情信息，不同的交易对价值 --> |
|||
<div class="tab-content"> |
|||
|
|||
<div v-for="(coin, index) in markets" :key="index"> |
|||
<table class="table" v-if="currentCoinIdx == index"> |
|||
<thead> |
|||
<tr style="display:block"> |
|||
<th class="w-33">{{ $t("exchange.pair") }}</th> |
|||
<th class="w-33 text-right">{{ $t("exchange.last-price") }}</th> |
|||
<th class="w-33 text-right">{{ $t("exchange.change") }}</th> |
|||
</tr> |
|||
</thead> |
|||
|
|||
<tbody> |
|||
<tr style="display:block" :class="{highlight : item.pair_id == marketId}" @click="$emit('update:symbol', item.symbol)" v-for="(item, key) in coin.marketInfoList" :key="key" v-show="isShow(item)"> |
|||
<td class="w-33" style="white-space:nowrap"> |
|||
<i class="icon ion-md-star h6" :class="{ active: isCoolect(item) }" @click.self="handleFav(item)"></i> |
|||
{{ coin.coin_name == 'fav' ? item.pair_name : item.coin_name + '/' + coin.coin_name}} |
|||
</td> |
|||
<td class="w-33 text-right"> |
|||
{{ coin.coin_name == 'fav' ? item.close : item.price}} |
|||
</td> |
|||
<!-- <td class="w-33 text-right" :class="item.increaseStr.startsWith('-') ? 'red' : 'green'"> --> |
|||
<td class="w-33 text-right" :class="increaseStrColor(item)"> |
|||
{{ item.increaseStr }} |
|||
</td> |
|||
</tr> |
|||
</tbody> |
|||
</table> |
|||
</div> |
|||
|
|||
</div> |
|||
</div> |
|||
</div> |
|||
</template> |
|||
|
|||
<script> |
|||
import Market from "@/api/market"; |
|||
import Home from "@/api/home"; |
|||
import { symbolCircle } from "d3"; |
|||
export default { |
|||
|
|||
props: { |
|||
marketList: { |
|||
type: Array, |
|||
|
|||
// 初始化填充页面排版的数据 |
|||
default: Array(5).fill({ |
|||
coin_name: "-", |
|||
marketInfoList: Array(10).fill({ |
|||
coin_name: "-", |
|||
price: "-", |
|||
increace: 0, |
|||
increaseStr: "+0.00%", |
|||
}), |
|||
}) |
|||
}, |
|||
|
|||
isLogin: { |
|||
type: Boolean, |
|||
default: false, |
|||
}, |
|||
|
|||
marketId: { |
|||
type: Number, |
|||
default: null, |
|||
}, |
|||
|
|||
firstEnter: true, |
|||
}, |
|||
|
|||
data() { |
|||
return { |
|||
keyword: '', // 搜索关键字 |
|||
current: "fav", |
|||
// 个人收藏的交易对信息 |
|||
favList: { |
|||
coinName: "fav", |
|||
marketInfoList: Array(10).fill({ |
|||
pair: "-", |
|||
price: "-", |
|||
increace: 0, |
|||
increaseStr: "+0.00%", |
|||
}), |
|||
}, |
|||
|
|||
// 收藏交易对的数据结构 |
|||
favList: { |
|||
coin_name: "fav", |
|||
image: require("@/assets/img/waiting.png"), |
|||
marketInfoList: [], |
|||
}, |
|||
|
|||
currentCoinIdx: 0, // 当前展示的币种 |
|||
|
|||
cacheMarketList : [], |
|||
collect:[] |
|||
} |
|||
|
|||
}, |
|||
|
|||
computed: { |
|||
|
|||
markets() { |
|||
// 将行情列表和收藏交易对整理一起 方便渲染 |
|||
return [...this.cacheMarketList, this.favList]; |
|||
}, |
|||
|
|||
}, |
|||
|
|||
watch : { |
|||
marketList (list) { |
|||
if (list.length) this.cacheMarketList = list; |
|||
} |
|||
}, |
|||
|
|||
methods: { |
|||
|
|||
/* |
|||
* 询问用户是否登录 |
|||
* 如果已经登录 返回true |
|||
* 如果没有登录 询问用户是否登录进行操作 |
|||
*/ |
|||
inquiryLogin() { |
|||
if (!this.isLogin) { |
|||
this.$confirm(this.$t('nav.login'), this.$t('nav.tips'), { |
|||
confirmButtonText: this.$t('home.Login'), |
|||
cancelButtonText: this.$t('home.Cancel'), |
|||
type: "info", |
|||
}) |
|||
.then(() => { |
|||
location.href = "/login"; |
|||
}) |
|||
.catch(() => {}); |
|||
return false; |
|||
} else { |
|||
return true; |
|||
} |
|||
}, |
|||
|
|||
// 搜索关键字 |
|||
isShow(symbol) { |
|||
|
|||
const reg = new RegExp(this.keyword, "gi"); |
|||
if (!this.keyword) return true; |
|||
else { |
|||
let name = symbol.pair_name || symbol.coin_name; |
|||
return name.search(reg) >= 0; |
|||
} |
|||
// return !this.keyword || symbol.coinName.concat(symbol.pair).search(reg) >= 0; |
|||
|
|||
}, |
|||
// 是否为自选 |
|||
isCoolect(i) { |
|||
// console.log(this.markets[this.currentCoinIdx].marketInfoList) |
|||
return this.favList.marketInfoList.map((item) => item.pair_name).includes(i.pair_name); |
|||
}, |
|||
// 添加收藏的方法 |
|||
handleFav(item) { |
|||
let data = { |
|||
pair_name: item.pair_name, |
|||
}; |
|||
Home.option(data) |
|||
.then((res) => { |
|||
this.getCollect(); |
|||
if (res) { |
|||
this.$message.success(this.$t("home.add")); |
|||
} else { |
|||
this.$message.success(this.$t("home.cancel")); |
|||
} |
|||
}) |
|||
.catch((err) => {}); |
|||
}, |
|||
getCollect() { |
|||
Home.getCollect() |
|||
.then((res) => { |
|||
this.favList.marketInfoList = res||[]; |
|||
}) |
|||
.catch((err) => {}); |
|||
}, |
|||
increaseStrColor(item){ |
|||
if (item && item.increaseStr && item.increaseStr.startsWith('-')) { |
|||
return 'red' |
|||
} else { |
|||
return 'green' |
|||
} |
|||
} |
|||
}, |
|||
|
|||
created() { |
|||
|
|||
}, |
|||
|
|||
mounted() { |
|||
// 初始化市场行情 覆盖初始化的[] |
|||
Market.getstockMarketList().then(data => { |
|||
this.cacheMarketList = data; |
|||
}).catch(err => {}); |
|||
|
|||
// console.log(this.isLogin) |
|||
// 如果已登陆 则写入收藏交易对 |
|||
if (this.isLogin) { |
|||
this.getCollect() |
|||
|
|||
} |
|||
} |
|||
|
|||
} |
|||
</script> |
|||
|
|||
<style lang="scss"> |
|||
.highlight { |
|||
background: #f6f8f9; |
|||
background: #F8F8FF; |
|||
|
|||
td:first-child { |
|||
color: #007bff !important; |
|||
} |
|||
} |
|||
|
|||
.w-33 { |
|||
display: inline-block !important; |
|||
vertical-align: top !important; |
|||
width: 32% !important; |
|||
} |
|||
.active{ |
|||
color: #326AEB!important; |
|||
} |
|||
</style> |
|||
Loading…
Reference in new issue