453530270@qq.com
3 years ago
@ -0,0 +1,2 @@ |
|||
# jiaoyi |
|||
|
|||
|
After Width: | Height: | Size: 1.3 KiB |
|
After Width: | Height: | Size: 61 KiB |
|
After Width: | Height: | Size: 17 KiB |
|
Before Width: | Height: | Size: 1.2 KiB After Width: | Height: | Size: 1.2 KiB |
|
Before Width: | Height: | Size: 36 KiB After Width: | Height: | Size: 12 KiB |
|
Before Width: | Height: | Size: 36 KiB |
|
Before Width: | Height: | Size: 32 KiB After Width: | Height: | Size: 32 KiB |
|
Before Width: | Height: | Size: 288 B After Width: | Height: | Size: 234 B |
|
Before Width: | Height: | Size: 2.2 KiB After Width: | Height: | Size: 2.2 KiB |
|
Before Width: | Height: | Size: 978 B After Width: | Height: | Size: 978 B |
|
Before Width: | Height: | Size: 1.8 KiB After Width: | Height: | Size: 1.8 KiB |
|
Before Width: | Height: | Size: 7.8 KiB After Width: | Height: | Size: 7.8 KiB |
|
After Width: | Height: | Size: 754 B |
|
Before Width: | Height: | Size: 2.9 KiB After Width: | Height: | Size: 2.9 KiB |
|
Before Width: | Height: | Size: 3.5 KiB After Width: | Height: | Size: 3.5 KiB |
|
After Width: | Height: | Size: 2.3 KiB |
|
Before Width: | Height: | Size: 2.8 KiB After Width: | Height: | Size: 2.8 KiB |
|
Before Width: | Height: | Size: 20 KiB After Width: | Height: | Size: 20 KiB |
|
After Width: | Height: | Size: 1.4 KiB |
|
After Width: | Height: | Size: 92 KiB |
@ -0,0 +1,874 @@ |
|||
<template> |
|||
<div class="col-md-6"> |
|||
<div class="px-4 py-2 heading"> |
|||
<!--<div class="coin-change d-flex align-items-center py-2 pl-4 heading justify-content-between" style="width:100%;float: right">--> |
|||
<!-- <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 }}11111111--> |
|||
<!-- <!– <el-button size="mini">--> |
|||
<!-- <i class="el-icon-arrow-down"></i>--> |
|||
<!-- </el-button> –>--> |
|||
<!-- </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="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>--> |
|||
<!-- <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线图 --> |
|||
<k-line :symbol="symbol" :socket="socket" :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=true;"> |
|||
{{ $t("common.market") }} |
|||
</a> |
|||
</li> |
|||
<li class="nav-item"> |
|||
<a href :class="[`nav-link`, {active:!isCondition&&!isMarket}]" @click.prevent="isCondition=false;isMarket=false;"> |
|||
{{ $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"> |
|||
|
|||
<!-- 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="$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')"> |
|||
<div class="input-group-append"> |
|||
<span class="input-group-text">{{pair.from}}</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-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"; |
|||
import Contract from "@/api/contract"; |
|||
export default { |
|||
|
|||
props: ["isLogin", "socket", "symbol", "pair", "buyorder", "sellorder", "fromBalance", "toBalance", "newTrade", "minQty", "minTotal", "priceDecimals", "qtyDecimals"], |
|||
|
|||
data() { |
|||
return { |
|||
contractList: [], |
|||
detail:[], |
|||
isMarket: true, |
|||
isCondition: false, |
|||
userBanlance: null, |
|||
|
|||
cacheTotal: 0, // 存放市价单输入的总值 |
|||
cachePrice: null, // 存放最新价格 |
|||
|
|||
activeContract:[], |
|||
// 气泡弹框内容和触发 |
|||
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: { |
|||
|
|||
|
|||
_activeContract(val) { |
|||
Market.getMarketList().then(data => { |
|||
|
|||
let contractList = data[0] |
|||
.map(item => item.marketInfoList) |
|||
.flat() |
|||
.find(item => item.symbol == this.activeSymbol) || {} |
|||
|
|||
}).catch(err => {}); |
|||
|
|||
|
|||
// console.log("market detail") |
|||
// console.log(val) |
|||
// let contractList = this.contractList |
|||
// .map(item => item.marketInfoList) |
|||
// .flat() |
|||
// .find(item => item.symbol == this.activeSymbol) || {} |
|||
// if (val.price) { |
|||
// delete contractList.price |
|||
// } |
|||
// console.log(contractList) |
|||
return contractList; |
|||
}, |
|||
|
|||
// 获取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(); |
|||
} |
|||
// } |
|||
}, |
|||
symbol(){ |
|||
this.getCoinInfo() |
|||
} |
|||
}, |
|||
|
|||
methods: { |
|||
// 获取合约市场 |
|||
getMarketList() { |
|||
|
|||
Contract.getMarketList().then(res => { |
|||
this.contractList = res[0]; |
|||
//console.log("%c%s","color:green","market res") |
|||
let tmpList = res[0].marketInfoList; |
|||
for(i=0;i<tmpList.length;i++){ |
|||
let tcurCoin = tmpList[i] |
|||
if(tcurCoin.symbol.toLowerCase()+"usdt" === this.symbol){ |
|||
this.activeContract = tcurCoin |
|||
} |
|||
} |
|||
|
|||
// |
|||
this.activeContract = filterList |
|||
// 默认值 |
|||
let firstParent = res[0]; |
|||
if (firstParent) { |
|||
let first = firstParent.marketInfoList[0]; |
|||
if (first) this.activeSymbol = first.symbol; |
|||
} |
|||
}); |
|||
}, |
|||
getCoinInfo(){ |
|||
// console.log(this.symbol.indexOf('usdt')!=-1) |
|||
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("%c%s","#ccff00","currnet market") |
|||
console.log(market) |
|||
let data = { |
|||
coin_name:market, |
|||
lang:this.lang |
|||
} |
|||
|
|||
//点击会跟随变化 |
|||
let tmpList = this.contractList.marketInfoList; |
|||
for(i=0;i<tmpList.length;i++){ |
|||
let tcurCoin = tmpList[i] |
|||
if(tcurCoin.symbol.toLowerCase()+"usdt" === this.symbol){ |
|||
this.activeContract = tcurCoin |
|||
} |
|||
} |
|||
|
|||
Market.getCoinInfo(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.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; |
|||
// console.info(this.sellTotal) |
|||
const baseArgs = { |
|||
symbol: this.pair.to.concat('/', this.pair.from), |
|||
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; |
|||
// 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.getMarketList(); |
|||
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; |
|||
} |
|||
</style> |
|||
|
Before Width: | Height: | Size: 3.7 KiB |
|
Before Width: | Height: | Size: 4.8 KiB |
|
Before Width: | Height: | Size: 5.1 KiB |
|
Before Width: | Height: | Size: 2.1 KiB |
|
Before Width: | Height: | Size: 4.5 KiB |
|
Before Width: | Height: | Size: 8.3 KiB |
|
Before Width: | Height: | Size: 5.8 KiB |
|
Before Width: | Height: | Size: 2.7 KiB |
|
Before Width: | Height: | Size: 21 KiB |
|
Before Width: | Height: | Size: 22 KiB |
|
Before Width: | Height: | Size: 20 KiB |
|
Before Width: | Height: | Size: 720 KiB |
|
Before Width: | Height: | Size: 36 KiB |
|
Before Width: | Height: | Size: 35 KiB |
|
Before Width: | Height: | Size: 34 KiB |