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 |