luyisha 3 years ago
parent
commit
e039662e07
  1. BIN
      dist.zip
  2. 56
      src/assets/scss/module/_contract.scss
  3. 5
      src/assets/scss/module/_market-book.scss
  4. 7
      src/assets/scss/module/_market-history.scss
  5. 3
      src/assets/scss/module/_market-pairs.scss
  6. 8
      src/assets/scss/module/_market-trade.scss
  7. 2
      src/components/KLine.vue
  8. 433
      src/views/contract/exchange-store.vue
  9. 18
      src/views/contract/handicap.vue
  10. 169
      src/views/contract/index.vue
  11. 33
      src/views/exchange/book-trades.vue
  12. 160
      src/views/exchange/index.vue
  13. 85
      src/views/exchange/make-deal.vue
  14. 5
      src/views/exchange/order-list.vue
  15. 26
      src/views/exchange/symbols.vue
  16. 2
      src/views/home/index.vue
  17. 3
      src/views/option/kline.vue

BIN
dist.zip

Binary file not shown.

56
src/assets/scss/module/_contract.scss

@ -7,10 +7,57 @@
}
.page-top {
padding-top: 1px;
padding-left: 1rem;
padding-right: 0.5rem;
padding-bottom: 1rem;
background-color: #f5f5f5;
border-bottom: 1px solid #ebebeb;
// border-bottom: 1px solid #ebebeb;
.left-box-A{
padding-right: 1rem;
}
.top-box-A{
color: #000;
background-color: #fff;
padding: 1rem;
margin-bottom: 1rem;
.min-width-A{
min-width: 120px;
}
.min-width-B{
min-width: 160px;
}
.fn-28{
font-weight: bold;
padding-right: 1rem;
}
.p-l-A{
padding-left: 2rem!important;
}
}
.bottom-box-left{
width: 400px;
flex-shrink: 0;
background-color: #fff;
margin-right: 1rem;
.table td{
border-top: 1px solid #eee;
}
.table tr.active{
background-color: #F8F8FD;
}
// .table tr.active td.tr-text{
// color: #4387F7 !important;
// }
// td.tr-text{
// color: #578F45 !important;
// }
.table tbody tr{
cursor: pointer;
}
}
.kline-box {
// background: $cls-white;
background: #fff;
@ -59,7 +106,8 @@
.handicap {
// width: 200px;
width: 250px;
width: 370px;
font-size: 16px;
.handicap-body {
.item {
@ -76,7 +124,7 @@
.sell,
.buy {
// height: 310px;
height: 230px;
height: 265px;
overflow: auto;
}

5
src/assets/scss/module/_market-book.scss

@ -4,6 +4,7 @@
.order-book th {
width: 100%;
table-layout: fixed;
font-size: 16px;
}
.order-book tr {
float: left;
@ -12,7 +13,7 @@
}
.order-book .table thead th {
font-weight: 400;
font-size: 12px;
font-size: 14px;
}
.order-book thead tr {
border-bottom: 1px solid #FFFFFF;
@ -121,7 +122,7 @@
.ob-heading span {
color: #4a4a4a;
display: block;
font-size: 12px;
font-size: 14px;
font-weight: 400;
}

7
src/assets/scss/module/_market-history.scss

@ -1,3 +1,7 @@
.market-history{
font-size: 16px;
height: 100%;
}
.market-history .nav {
background: #F5F9FC;
}
@ -38,3 +42,6 @@
border: 1px solid #ebebeb;
border-radius: 2px;
}
.table td{
font-size: 16px;
}

3
src/assets/scss/module/_market-pairs.scss

@ -1,6 +1,5 @@
.market-pairs {
border: 1px solid #ebebeb;
padding-top: 14px;
border-radius: 2px;
}
@ -24,7 +23,7 @@
}
.market-pairs .nav {
margin-top: 14px;
// margin-top: 14px;
background: #f5f9fc;
}

8
src/assets/scss/module/_market-trade.scss

@ -80,18 +80,18 @@
.market-trade button.buy,
.market-trade button.sell {
background: #26de81;
background: #6CD98A;
color: #fff;
text-transform: uppercase;
padding: 10px;
margin-top: 30px;
width: 100%;
box-shadow: 0px 0px 15px 0px #26de81ad;
// box-shadow: 0px 0px 15px 0px #26de81ad;
}
.market-trade button.sell {
background: #ff231f;
box-shadow: 0px 0px 15px 0px #ff231fad;
background: #EC4030;
// box-shadow: 0px 0px 15px 0px #ff231fad;
}
.market-trade p {

2
src/components/KLine.vue

@ -394,7 +394,7 @@ export default {
<style lang="scss">
#tradingview_lautin {
height: 550px;
height: 610px;//K线
}
//

433
src/views/contract/exchange-store.vue

@ -1,5 +1,5 @@
<template>
<div class="markets-pair-list exchange-store bg-plain ex-s-p-c">
<div class="markets-pair-list exchange-store bg-plain">
<div class="nav nav-pills" style="align-items: center;width:180px;" v-if="0">
<div class="nav-item" :class="{ active: tab == 1 }">
<a class="nav-link" :class="{ active: tab == 1 }" @click="tab = 1">{{
@ -43,13 +43,21 @@
</el-popover>
</div>
</div>
<div class="content-box">
<div class="nav-item" :class="{ active: tab == 1 }" style="flex-shrink:0;">
<a class="nav-link" :class="{ active: tab == 1 }" @click="tab = 1">{{
$t("contract.d5")
}}</a>
<div class="nav nav-pills">
<div class="nav-item" :class="{ active: form.type == 2 }" @click="form.type = 2">
<a style="display:block;padding:5px 0px;">
{{ $t("contract.d9") }}
</a>
</div>
<div class="nav-item" :class="{ active: form.type == 1 }" @click="form.type = 1">
<a style="display:block;padding:5px 0px;">
{{ $t("contract.e0") }}
</a>
</div>
</div>
<div class="d-flex align-items-center" style="flex-shrink:0;">
<div class="d-flex align-items-center" style="flex-shrink:0;margin-left:20px;">
<el-popover
placement="bottom"
width="100"
@ -80,97 +88,55 @@
</div>
</el-popover>
</div>
<div class="line-A"></div>
<div v-if="type == 2" class="input-group my-4 input-group-sm">
<div class="input-group-prepend">
<span class="input-group-text">{{ $t("contract.d7") }}</span>
</div>
<input type="number" class="form-control" placeholder="" />
<div class="input-group-append">
<span class="input-group-text">USDT</span>
</div>
</div>
<div>
<div class="" style="color: #666;">
<div class="nav nav-pills">
<div class="nav-item" :class="{ active: form.type == 1 }" @click="form.type = 1">
<a style="display:block;padding:5px 0px;margin:0 15px 0 0;">
{{ $t("contract.e0") }}
</a>
</div>
<div class="nav-item" :class="{ active: form.type == 2 }" @click="form.type = 2">
<a style="display:block;padding:5px 0px;margin:0 15px 0 0;">
{{ $t("contract.d9") }}
</a>
</div>
</div>
</div>
<div class="" style="color: #666;white-space: nowrap;margin: 0px 0px 10px 0px;">
<span style="margin-right: 10px;">{{ $t("contract.a3") }}</span>
<span> {{ accountInfo.usable_balance }} USDT
<div class="ex-s-p-c">
<!-- 买入 -->
<div style="width:47%;">
<div class="usable-box-A">
<span>{{ $t("contract.a3") }}</span>
<span style="color: #444;"> {{ accountInfo.usable_balance }} USDT
<i
class="el-icon-sort"
@click="$router.push('/wallet/assets/exchange')"
></i>
</span>
</div>
</div>
<div class="line-A"></div>
<div class="d-flex align-items-center px-2">
<div class="input-group-a">
<div class="input-group-append">
<span class="input-group-text">{{ $t("contract.d8") }}</span>
</div>
<template v-if="form.type == 1">
<div class="form-control-A">{{ $t('contract.d8') }}</div>
<input
type="number"
v-model="form.entrust_price"
v-model="form.entrust_price_buy"
class="form-control"
placeholder=""
:placeholder="$t('contract.d8')"
/>
<div class="input-group-append">
<span class="input-group-text">USDT</span>
</div>
<div class="form-control-B">USDT</div>
</template>
<template v-if="form.type == 2">
<div class="form-control-A">{{ $t('contract.d8') }}</div>
<input
type="text"
disabled
:value="$t('contract.d9')"
class="form-control"
:placeholder="$t('contract.d9')"
placeholder=""
/>
</template>
</div>
<!-- <button
@click="form.type == 1 ? (form.type = 2) : (form.type = 1)"
class="btn btn-sm btn-outline-primary ml-2 text-nowrap"
>
{{ form.type == 1 ? $t("contract.e0") : $t("contract.d9") }}
</button> -->
</div>
<div class="input-group-a align-items-center">
<div class="">
<!-- <span class="input-group-text">{{ $t("contract.e1") }}</span> -->
<span class="input-group-text">{{ $t("contract.l2") }}</span>
</div>
<div class="input-group-a">
<div class="form-control-A">{{ $t("contract.l2") }}</div>
<input
type="number"
class="form-control"
v-model="margin"
v-model="margin_buy"
:placeholder="tips"
/>
<!-- <div class="input-group-append">
<span class="input-group-text">{{ $t("contract.e2") }}</span>
</div> -->
</div>
<div class="line-A"></div>
<div style="width:200px;margin:0px 12px;">
<div>
<div class="px-2" v-if="this.tab == 1">
<el-slider
:value="activeStep"
@input="sliderChange"
:value="activeStep_buy"
@input="sliderChange($event, 'buy')"
:format-tooltip="tooltip"
:marks="marks"
></el-slider>
@ -181,7 +147,7 @@
<div class="d-flex justify-content-between mb-3" style="color: #999;">
<div>{{ $t("contract.e1") }}</div>
<!-- {{$t("contract.e2")}} -->
<div>{{ amount }}</div>
<div>{{ amount_buy }}</div>
</div>
<!-- <div class="d-flex justify-content-between mb-4">
<div>{{ $t("contract.a3") }}:</div>
@ -206,8 +172,28 @@
</div>
</div>
</div>
<div class="line-A"></div>
<div class="exchange_button" v-if="tab == 1" style="color: #999;">
<div class="d-flex justify-content-between">
<div class="input-group-a" style="width:49%;">
<input
type="number"
class="form-control"
v-model="form.sl_trigger_price_buy"
:placeholder="$t('contract.i7')"
style="text-align:left;"
/>
<div class="form-control-B">USDT</div>
</div>
<div class="input-group-a" style="width:49%;">
<input
type="number"
class="form-control"
v-model="form.tp_trigger_price_buy"
:placeholder="$t('contract.i8')"
style="text-align:left;"
/>
<div class="form-control-B">USDT</div>
</div>
</div>
<div class="px-2 flex-fill">
<button
@click="ifOpenPosition(1)"
@ -217,11 +203,116 @@
{{ $t("contract.d0") }}
<!-- <span class="fn-12"> {{ $t("contract.e6") }} </span> -->
</button>
<div class="text-left" style="white-space: nowrap;">
<div class="text-left" style="white-space: nowrap; color: #999;">
{{ $t("contract.e7") }} {{ maxNum }}
<!-- {{ $t("contract.e2") }} -->
</div>
</div>
</div>
<!-- 卖出 -->
<div style="width:47%;">
<div class="usable-box-A">
<span>{{ $t("contract.a3") }}</span>
<span style="color: #444;"> {{ accountInfo.usable_balance }} USDT
<i
class="el-icon-sort"
@click="$router.push('/wallet/assets/exchange')"
></i>
</span>
</div>
<div class="input-group-a">
<template v-if="form.type == 1">
<div class="form-control-A">{{ $t('contract.d8') }}</div>
<input
type="number"
v-model="form.entrust_price_sell"
class="form-control"
:placeholder="$t('contract.d8')"
/>
<div class="form-control-B">USDT</div>
</template>
<template v-if="form.type == 2">
<div class="form-control-A">{{ $t('contract.d8') }}</div>
<input
type="text"
disabled
:value="$t('contract.d9')"
class="form-control"
placeholder=""
/>
</template>
</div>
<div class="input-group-a">
<div class="form-control-A">{{ $t("contract.l2") }}</div>
<input
type="number"
class="form-control"
v-model="margin_sell"
:placeholder="tips"
/>
</div>
<div>
<div class="px-2" v-if="this.tab == 1">
<el-slider
:value="activeStep_sell"
@input="sliderChange($event, 'sell')"
:format-tooltip="tooltip"
:marks="marks"
></el-slider>
<!-- :step="25" -->
</div>
<!-- 开仓 -->
<div v-if="tab == 1" class="kaicang">
<div class="d-flex justify-content-between mb-3" style="color: #999;">
<div>{{ $t("contract.e1") }}</div>
<!-- {{$t("contract.e2")}} -->
<div>{{ amount_sell }}</div>
</div>
<!-- <div class="d-flex justify-content-between mb-4">
<div>{{ $t("contract.a3") }}:</div>
<div>
{{ accountInfo.usable_balance }} USDT
<i
class="el-icon-sort"
@click="$router.push('/wallet/assets/exchange')"
></i>
</div>
</div> -->
</div>
<!-- 平仓 -->
<div v-if="tab == 2">
<div class="d-flex justify-content-between">
<div>{{ $t("contract.e4") }}</div>
<div>{{ multiplePositions }} {{ $t("contract.e2") }}</div>
</div>
<div class="d-flex justify-content-between mb-4">
<div>{{ $t("contract.e5") }}:</div>
<div>{{ shortPosition }} {{ $t("contract.e2") }}</div>
</div>
</div>
</div>
<div class="d-flex justify-content-between">
<div class="input-group-a" style="width:49%;">
<input
type="number"
class="form-control"
v-model="form.sl_trigger_price_sell"
:placeholder="$t('contract.i7')"
style="text-align:left;"
/>
<div class="form-control-B">USDT</div>
</div>
<div class="input-group-a" style="width:49%;">
<input
type="number"
class="form-control"
v-model="form.tp_trigger_price_sell"
:placeholder="$t('contract.i8')"
style="text-align:left;"
/>
<div class="form-control-B">USDT</div>
</div>
</div>
<div class="px-2 flex-fill">
<button
@click="ifOpenPosition(2)"
@ -232,12 +323,39 @@
<!-- <span class="fn-12"> {{ $t("contract.e8") }} </span> -->
</button>
<!-- <div class="text-center"> -->
<div class="text-right" style="white-space: nowrap;">
<div class="text-left" style="white-space: nowrap; color: #999;">
{{ $t("contract.e7") }} {{ maxNum }}
<!-- {{ $t("contract.e2") }} -->
</div>
</div>
</div>
</div>
<div class="content-box" v-if="0">
<div class="line-A"></div>
<div v-if="type == 2" class="input-group my-4 input-group-sm">
<div class="input-group-prepend">
<span class="input-group-text">{{ $t("contract.d7") }}</span>
</div>
<input type="number" class="form-control" placeholder="" />
<div class="input-group-append">
<span class="input-group-text">USDT</span>
</div>
</div>
<div>
</div>
<div class="line-A"></div>
<div class="line-A"></div>
<div class="line-A"></div>
<div class="exchange_button" v-if="tab == 1" style="color: #999;">
</div>
<div class="" v-if="tab == 2">
<div class="px-2 flex-fill mb-4">
<button
@ -281,8 +399,16 @@ export default {
// 1: 2:
type: 2,
entrust_price: undefined,
entrust_price_buy: undefined,
entrust_price_sell: undefined,
amount:"",
lever_rate: ""
amount_buy:"",
amount_sell:"",
lever_rate: "",
sl_trigger_price_sell:'',//
sl_trigger_price_buy:'',//
tp_trigger_price_sell:'',//
tp_trigger_price_buy:'',//
},
//
maxNum: 0,
@ -296,6 +422,8 @@ export default {
75:''
},
margin:0,
margin_buy:0,
margin_sell:0,
};
},
props: {
@ -324,15 +452,22 @@ export default {
watch: {
symbol() {
this.form.entrust_price = undefined;
this.form.entrust_price_sell = undefined;
this.form.entrust_price_buy = undefined;
this.contractAccount();
this.getSymbolDetail();
},
defaultPrice(n) {
this.form.entrust_price = n;
this.form.entrust_price_sell = n;
this.form.entrust_price_buy = n;
},
newPriceObj(n) {
if (n && this.form.entrust_price === undefined) {
this.form.entrust_price = n.price;
if (n && this.form.entrust_price_sell === undefined) {
this.form.entrust_price_sell = n.price;
}
if (n && this.form.entrust_price_buy === undefined) {
this.form.entrust_price_buy = n.price;
}
},
contractOpen(n, o) {
@ -390,9 +525,14 @@ export default {
if (!item) return 0;
return item.avail_position;
},
activeStep() {
if (!this.form.amount || !this.maxNum) return 0;
let num = (this.form.amount / this.maxNum) * 100;
activeStep_buy() {
if (!this.form.amount_buy || !this.maxNum) return 0;
let num = (this.form.amount_buy / this.maxNum) * 100;
return num;
},
activeStep_sell() {
if (!this.form.amount_sell || !this.maxNum) return 0;
let num = (this.form.amount_sell / this.maxNum) * 100;
return num;
},
//
@ -400,13 +540,22 @@ export default {
// if (!this.form.lever_rate) return '';
// return math.omitTo(this.form.amount*this.unit_amount / this.form.lever_rate, 4);
// },
amount(){
amount_buy(){
console.info(this.form.lever_rate)
console.info(this.margin)
if (!this.form.lever_rate || !this.margin) return 0;
let p=this.margin*this.form.lever_rate;
console.info(this.margin_buy)
if (!this.form.lever_rate || !this.margin_buy) return 0;
let p=this.margin_buy*this.form.lever_rate;
this.form.amount=p;
this.form.amount_buy=p;
return p
},
amount_sell(){
console.info(this.form.lever_rate)
console.info(this.margin_sell)
if (!this.form.lever_rate || !this.margin_sell) return 0;
let p=this.margin_sell*this.form.lever_rate;
this.form.amount_sell=p;
return p
}
},
@ -455,10 +604,17 @@ export default {
});
},
//
sliderChange($ev) {
this.form.amount = Math.round((this.maxNum * $ev) / 100)||'';
sliderChange($ev, operate) {
if(operate=='sell'){
this.form.amount_sell = Math.round((this.maxNum * $ev) / 100)||'';
console.info(this.form)
this.margin_sell=this.form.amount_sell/this.form.lever_rate || 0
}else if (operate == 'buy'){
this.form.amount_buy = Math.round((this.maxNum * $ev) / 100)||'';
console.info(this.form)
this.margin=this.form.amount/this.form.lever_rate || 0
this.margin_buy=this.form.amount_buy/this.form.lever_rate || 0
}
},
//
selectLever(idx) {
@ -508,21 +664,56 @@ export default {
},
//
openPosition(side) {
// side ,1--buy,2--sell
let data = {
side,
symbol: this.symbol,
...this.form
// side,
// symbol: this.symbol,
// ...this.form
};
if(side==1){
data = {
amount: this.form.amount_buy,
entrust_price: this.form.entrust_price_buy,
lever_rate: this.form.lever_rate,
side: 1,
symbol: this.symbol,
type: this.form.type,
sl_trigger_price: this.form.sl_trigger_price_buy,//
tp_trigger_price: this.form.tp_trigger_price_buy,//
}
}else if(side==2){
data = {
amount: this.form.amount_sell,
entrust_price: this.form.entrust_price_sell,
lever_rate: this.form.lever_rate,
side: 2,
symbol: this.symbol,
type: this.form.type,
sl_trigger_price: this.form.sl_trigger_price_sell,//
tp_trigger_price: this.form.tp_trigger_price_sell,//
}
}
if(this.form.type==2){
// data.entrust_price = this.margin;
data.entrust_price = this.newPriceObj.price;
data.amount = this.amount;
if(side==1){
data.amount = this.amount_buy;
}else if(side==2){
data.amount = this.amount_sell;
}
}
console.log(this.margin, '保证金')
console.log(data, 111111, this.newPriceObj.price);
Contract.openPosition(data).then(() => {
this.contractAccount();
this.form.amount = 0;
this.form.amount_buy = 0;
this.form.amount_sell = 0;
this.form.sl_trigger_price_sell = 0;//
this.form.sl_trigger_price_buy = 0;//
this.form.tp_trigger_price_sell = 0;//
this.form.tp_trigger_price_buy = 0;
this.$message.success(this.$t("contract.f5"));
this.$emit("position");
});
@ -557,26 +748,76 @@ export default {
/* /deep/ .el-slider__stop{
background-color: ;
} */
.markets-pair-list .nav-item.active a{
color: #F7D558 !important;
.markets-pair-list{
padding: 5px 12px;
}
.content-box{
display: flex;
align-items: center;
}
.nav-item{
padding: 4px 19px;
text-align-last: center;
background-color: #FFF;
border-radius: 3px;
margin-right: 10px;
cursor: pointer;
}
.nav-item.active{
background-color: #F7D558;
}
.nav-item a{
color: #333 !important;
}
.ex-s-p-c{
display: flex;
justify-content: space-between;
align-items: center;
border-top: 1px solid;
padding: 10px 0px;
}
.ex-s-p-c .content-box{
.usable-box-A{
color: #666;
white-space: nowrap;
margin-bottom: 10px;
display: flex;
align-items: center;
justify-content: space-between;
}
.ex-s-p-c .input-group-a {
position: relative;
display: -ms-flexbox;
display: flex;
-ms-flex-align: stretch;
align-items: stretch;
-ms-flex-align: center;
align-items: center;
justify-content: space-between;
background-color: #fafafa;
margin-bottom: 10px;
}
.form-control{
border: none;
font-size: 14px;
text-align: right;
flex: 1;
color: #000;
}
.form-control-A{
color: #666;
text-align: center;
padding: 0px 10px;
}
.form-control-B{
color: #000;
text-align: center;
padding: 0px 10px;
}
.btn-success{
background-color: #9ED889;
background-image: none;
padding: 10px;
}
.btn-danger{
background-color: #D5444E;
background-image: none;
padding: 10px;
}
.line-A{
width: 1px;

18
src/views/contract/handicap.vue

@ -2,7 +2,7 @@
<div class="markets-pair-list handicap bg-plain">
<div class="nav nav-pills">
<div class="nav-item" :class="{ active: tab == 1 }">
<a class="nav-link" :class="{ active: tab == 1 }" @click="tab = 1">{{
<a class="nav-link" @click="tab = 1">{{
$t("contract.f7")
}}</a>
</div>
@ -32,7 +32,7 @@
<i class="el-icon-arrow-down"></i>
</div>
</div>
<div class="label-group d-flex text-secondary fn-12 py-2">
<div class="label-group d-flex text-secondary py-2">
<div class="w-10/24">
{{ $t("contract.d8") }}
</div>
@ -67,8 +67,8 @@
class="current-nav d-flex border-top align-items-center"
>
<div class="w-10/24">
<div class="name text-secondary fn-12">{{ $t("contract.g3") }}</div>
<div class="num fn-20 increase">
<div class="name text-secondary">{{ $t("contract.g3") }}</div>
<div class="num fn-28 increase">
{{ newPriceObj.price }}
<!-- 最新价 -->
</div>
@ -98,9 +98,9 @@
</div>
</div>
<!-- 实时成交 -->
<div class="real-time p-3" v-if="tab == 2 || 1" style="height: 235px;overflow: hidden;color: #666;">
<div class="real-time p-3" v-if="tab == 2 || 1" style="height: 308px;overflow: hidden;color: #666;">
<div class="nav-item">{{ $t("contract.f8") }}</div>
<div class="d-flex text-secondary fn-12">
<div class="d-flex text-secondary">
<div class="w-10/24">
{{ $t("contract.b1") }}
</div>
@ -109,7 +109,7 @@
{{ $t("contract.e1") }}({{ $t("contract.e2") }})
</div>
</div>
<div class="d-flex fn-12" v-for="(item, idx) in tradeList" :key="idx">
<div class="d-flex" v-for="(item, idx) in tradeList" :key="idx">
<div class="w-10/24">
{{ parseTime(item.ts, false, "{h}:{i}:{s}") }}
</div>
@ -268,7 +268,7 @@ export default {
} else if (sub == this.msg.trade) {
this.tradeList.unshift(data);
this.tradeList.pop();
console.info(this.tradeList, 2222222)
// console.info(this.tradeList, 2222222)
// this.newPriceObj = data;
// this.$emit("input", this.newPriceObj);
} else if (type == "ping" ||cmd == "ping") {
@ -302,6 +302,6 @@ export default {
</script>
<style scoped>
.nav-item.active a{
color: #F7D558 !important;
color: #EBBA65 !important;
}
</style>

169
src/views/contract/index.vue

@ -7,62 +7,11 @@
<!-- </el-carousel-item>-->
<!-- </el-carousel>-->
<!-- </div>-->
<div class="page-top d-flex pt-2">
<div class="page-top d-flex pt-3">
<div class="flex-fill">
<div class="flex-fill left-box-A">
<!-- 左边盒子顶部 -->
<div class="d-flex">
<!-- 左侧边栏 -->
<div>
<template v-for="parent in contractList">
<!-- <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 tr-text">{{ $t("xtzcoins3.c4") }}</th>
<th class="w-7/24 tr-text">{{ $t("contract.g3") }}</th>
<th class="w-7/24 text-right tr-text">
{{ $t("contract.h6") }}
</th>
</tr>
</thead>
<tbody>
<!-- @click="activeSymbol = item.symbol" -->
<tr
v-for="item in parent.marketInfoList"
:key="item.symbol"
:class="{ active: item.symbol == activeSymbol }"
@click="ispopover1(item.symbol)"
>
<td class="w-10/24 tr-text">
{{ item.symbol }}/{{ parent.coin_name }}
</td>
<td
class="w-7/24 "
:class="item.increase < 0 ? 'decreace' : 'increase'"
>
{{ item.price }}
</td>
<td
class="w-7/24"
:class="item.increase < 0 ? 'decreace' : 'increase'"
>
{{ item.increaseStr }}
</td>
</tr>
</tbody>
</table>
</template>
</div>
<!-- -->
<div class="kline-box flex-fill mr-2">
<!-- K线图上面 -->
<div
class="coin-change d-flex align-items-center py-2 pl-4 heading justify-content-between"
>
<div class="top-box-A">
<div class="d-flex align-items-center">
<div class="coin d-flex align-items-center" v-if="0">
<el-popover
@ -125,20 +74,36 @@
</div>
</el-popover>
</div>
<div
class="price px-3 border-right"
:class="{
<div class="price px-3 border-right">
<div class="item fn-28">{{ activeContract.pair_name }}</div>
</div>
<div class="d-flex fn-16 px-3 p-l-A align-items-center">
<div class="item px-3 min-width-B">
<div class="title mb-1" :class="{
decreace: activeContract.increase < 0,
increase: activeContract.increase >= 0
}"
>
<span class="current">{{ activeContract.price }}$</span>
&nbsp;
<span class="zf">{{ activeContract.increaseStr }}</span>
}">
{{ activeContract.price }}
</div>
<!-- <div>
${{ activeContract.price }}
</div> -->
</div>
<div class="item px-2 min-width-A">
<div class="title mb-1 text-secondary">
{{ $t("contract.h6") }}
</div>
<div :class="{
decreace: activeContract.increase < 0,
increase: activeContract.increase >= 0
}">
{{ activeContract.increaseStr }}
</div>
</div>
</div>
<!-- 币种价值数据 -->
<div class="d-flex fn-12">
<div class="item px-2">
<div class="d-flex fn-16">
<div class="item px-2 min-width-B">
<div class="title mb-1 text-secondary">
24h {{ $t("contract.h7") }}
</div>
@ -146,7 +111,7 @@
{{ activeContract.high }}
</div>
</div>
<div class="item px-2">
<div class="item px-2 min-width-B">
<div class="title mb-1 text-secondary">
24h {{ $t("contract.h8") }}
</div>
@ -154,7 +119,7 @@
{{ activeContract.low }}
</div>
</div>
<div class="item px-2">
<div class="item px-2 min-width-B">
<div class="title mb-1 text-secondary">
24h {{ $t("contract.h9") }}
<!-- {{ $t("contract.e2") }} -->
@ -168,6 +133,55 @@
</div>
<!-- <div><theme-change /></div> -->
</div>
<!-- 左边盒子底部 -->
<div class="d-flex">
<!-- 左侧边栏 -->
<div class="bottom-box-left">
<template v-for="parent in contractList">
<!-- <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("xtzcoins3.c4") }}</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="activeSymbol = item.symbol" -->
<tr
v-for="item in parent.marketInfoList"
:key="item.symbol"
:class="{ active: item.symbol == activeSymbol }"
@click="ispopover1(item.symbol)"
>
<td class="w-10/24 tr-text">
{{ item.symbol }}/{{ parent.coin_name }}
</td>
<td
class="w-7/24 "
:class="item.increase < 0 ? 'decreace' : 'increase'"
>
{{ item.price }}
</td>
<td
class="w-7/24 text-right"
:class="item.increase < 0 ? 'decreace' : 'increase'"
>
{{ item.increaseStr }}
</td>
</tr>
</tbody>
</table>
</template>
</div>
<!-- 右侧图&交易 -->
<div class="kline-box flex-fill">
<!-- K线图 -->
<kline
:activeCoin="{ pair_name: activeContract.pair_name }"
@ -175,10 +189,7 @@
:contract="true"
:wsUrl="wsUrl"
/>
</div>
</div>
<!-- 左边盒子底部交易 -->
<!-- 交易 -->
<exchange-store
:holdPositionList="holdPositionList"
:symbol="activeSymbol"
@ -190,6 +201,9 @@
@getSymbolDetail="symbolDetail=$event"
/>
</div>
</div>
</div>
<!-- 盘口 -->
<handicap
@ -298,7 +312,7 @@ export default {
if(val.price){
delete contractList.price
}
console.log(contractList, 'co-activeContract----------------')
// console.log(contractList, 'co-activeContract----------------')
return contractList;
},
isLogin() {
@ -445,16 +459,5 @@ export default {
.increase{
color: #53b987;
}
.table td{
border-top: 1px solid #e7e7e7;
}
.table tr.active td.tr-text{
color: #4387F7 !important;
}
td.tr-text{
color: #578F45 !important;
}
.table tbody tr{
cursor: pointer;
}
</style>

33
src/views/exchange/book-trades.vue

@ -1,6 +1,7 @@
<template>
<div class="col-md-3">
<div class="order-book mb15">
<div class="col-md-3" style="margin-left: -15px;">
<div style="display: flex;flex-direction: column;align-items: end;height: 100%;">
<div class="order-book mb15" style="width: 95%;background-color: #fff;">
<h2 class="heading">{{ $t("exchange.order-book") }}</h2>
<table class="table">
<thead>
@ -32,19 +33,22 @@
<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 ? 'increase' : 'decreace'">{{ newTrade.price}}</b>
<i :class="activeContract.increase > 0 ? 'tri-inc' : 'tri-dec'"></i>
<b :class="activeContract.increase > 0 ? 'increase' : 'decreace'">
<!-- {{ newTrade.price}} -->
{{ activeContract.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>
<span v-if="langs=='cn'"> {{activeContract.price*priceCny|omitTo(2)}}</span>
<span v-else> {{ activeContract.price|omitTo(2) }}</span>
</td>
<td class="w-33 text-right" :class="changeRate.startsWith('+') ? 'increase' : 'decreace'">
<td class="w-33 text-right" :class="activeContract.increaseStr.startsWith('+') ? 'increase' : 'decreace'">
<span>{{ $t("exchange.change") }}</span>
{{ changeRate }}
{{ activeContract.increaseStr }}
</td>
</tr>
<tr style="display:block;" v-else>
@ -72,7 +76,7 @@
</tbody>
</table>
</div>
<div class="market-history">
<div class="market-history" style="width: 95%;background-color: #fff;">
<ul class="nav nav-pills" role="tablist">
<li class="nav-item">
<a class="nav-link active" data-toggle="pill" href="#recent-trades" role="tab" aria-selected="true">
@ -124,6 +128,7 @@
</div>
</div>
</div>
</div>
</template>
<script>
@ -134,7 +139,7 @@ export default {
// props : ["priceDecimals", "qtyDecimals"],
props:[
'priceCny'
'priceCny','activeContract'
],
data() {
return this.$parent;
@ -365,7 +370,7 @@ export default {
.trade-list {
tbody {
height: 279px;
height: 365px;
tr {
@ -398,13 +403,13 @@ export default {
}
.order-item{
color: #666;
background-color: #f5f5f5!important;
background-color: #fff!important;
}
.order-item tr{
background-color: #f5f5f5!important;
background-color: #fff!important;
}
.order-item tr td{
background-color: #f5f5f5!important;
background-color: #fff!important;
}
.ob-heading{
border: 1px solid #e0e0e0;

160
src/views/exchange/index.vue

@ -7,17 +7,83 @@
<!-- </el-carousel-item>-->
<!-- </el-carousel>-->
<!-- </div>-->
<div class="container-fluid no-fluid" style="background-color: #f5f5f5;padding: 15px 0px;">
<div class="container-fluid no-fluid" style="background-color: #f5f5f5;padding: 15px 15px;">
<div class="row sm-gutters">
<div class="col-md-9" style="padding-right:0px!important;margin-right: 15px;">
<div class="row">
<div class="col-md-12" style="padding-right: 0px!important;">
<div class="px-4 py-3 heading">
<div class="d-flex align-items-center">
<div class="price px-3 border-right">
<div class="item fn-28">{{ activeContract.pair_name }}</div>
</div>
<div class="d-flex fn-16 px-3 p-l-A align-items-center">
<div class="item px-3 min-width-B">
<div class="title mb-1" :class="{
decreace: activeContract.increase < 0,
increase: activeContract.increase >= 0
}">
{{ activeContract.price }}
</div>
<!-- <div>
${{ activeContract.price }}
</div> -->
</div>
<div class="item px-2 min-width-A">
<div class="title mb-1 text-secondary">
{{ $t("contract.h6") }}
</div>
<div :class="{
decreace: activeContract.increase < 0,
increase: activeContract.increase >= 0
}">
{{ activeContract.increaseStr }}
</div>
</div>
</div>
<!-- 币种价值数据 -->
<div class="d-flex fn-16">
<div class="item px-2 min-width-B">
<div class="title mb-1 text-secondary">
24h {{ $t("contract.h7") }}
</div>
<div>
{{ activeContract.high }}
</div>
</div>
<div class="item px-2 min-width-B">
<div class="title mb-1 text-secondary">
24h {{ $t("contract.h8") }}
</div>
<div>
{{ activeContract.low }}
</div>
</div>
<div class="item px-2 min-width-B">
<div class="title mb-1 text-secondary">
24h {{ $t("contract.h9") }}
<!-- {{ $t("contract.e2") }} -->
(USDT)
</div>
<div>
{{ activeContract.vol }}
</div>
</div>
</div>
</div>
</div>
</div>
<!-- symbols -->
<symbols :marketList="marketList" :marketId="marketId" :isLogin="isLogin" :symbol.sync="symbol"></symbols>
<!-- kline -->
<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>
</div>
<!-- order book -->
<book-trades :priceCny="price_cny"></book-trades>
<book-trades :priceCny="price_cny" :activeContract="activeContract"></book-trades>
<!-- market news -->
<!-- <market-news></market-news> -->
@ -125,7 +191,9 @@ export default {
transPwdEnabled: false,
currentTab: "opens", // orderstab
price_cny:0
price_cny:0,
activeContract:{},
ws: new Socket(this.Globals.Server.Path.WS1),
}
},
@ -247,6 +315,9 @@ export default {
}, {
cmd: 'sub',
msg: `tradeList_${this.symbol}`
}, {
cmd: 'sub',
msg: `swapMarketList`
}]);
},
@ -266,6 +337,9 @@ export default {
}, {
cmd: 'unsub',
msg: `tradeList_${symbol}`
}, {
cmd: 'sub',
msg: `swapMarketList`
}]);
},
@ -291,6 +365,7 @@ export default {
// marketId
this.marketId = market.pair_id;
// console.log(this.marketId, 'marketId-p--------')
// market
this.marketInfo = market;
@ -422,6 +497,7 @@ export default {
this.initMarket();
// id
if (this.symbol) this.addSub();
// this.getSwapMarketList();
})
this.ws.on("message", (response) => {
@ -438,11 +514,10 @@ export default {
if (type == "ping") this.ws.send({
type: "pong"
});
switch (sub) {
case "exchangeMarketList":
console.log(data,'----000---')
this.marketList = data;
// console.log(this.marketList[0].marketInfoList[0].close, '0000------------')
@ -452,6 +527,13 @@ export default {
this.findMarketBySymbol();
}
this.activeContract = data
.map(item => item.marketInfoList)
.flat()
.find(item => {
return item.pair_name.replace('/', '').toLowerCase() == this.symbol
});
console.log(this.activeContract, this.activeContract.close, '122222--------', this.symbol+'symbol')
break;
case `buyList_${this.symbol}`:
@ -474,6 +556,19 @@ export default {
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;
case `swapMarketList`:
//
if( data.symbol=='BTC' )(data.price).toFixed(1)
let listA = data;
let listB = listA
.map(item => item.marketInfoList)
.flat()
.find(item => {
return item.pair_name.replace('/', '').toLowerCase() == this.symbol
});
this.activeContract = listB || {};
console.log(this.symbol, this.activeContract, 'ex-activeContract----------------')
break;
}
});
@ -489,6 +584,38 @@ export default {
// this.indexList()
});
},
getSwapMarketList(){
let msg = "swapMarketList";
this.ws.send({
cmd: "sub",
msg: msg
});
this.ws.on("message", res => {
let { data, sub,cmd } = res;
console.log(data, sub,cmd, '000000000000000')
if (sub == msg) {
if( data.symbol=='BTC' )(data.price).toFixed(1)
let listA = data;
let listB = listA
.map(item => item.marketInfoList)
.flat()
.find(item => {
return item.pair_name.replace('/', '').toLowerCase() == this.symbol
});
this.activeContract = listB || {};
console.log(this.symbol, this.activeContract, 'ex-activeContract----------------')
}else if (cmd == "ping") {
this.ws.send({
cmd: "pong"
});
}
});
this.ws.on('close',()=>{
this.ws= new Socket(this.Globals.Server.Path.WS1),
console.log('链接关闭');
this.wsOpen();
})
}
},
@ -506,6 +633,25 @@ export default {
}
</script>
<style>
<style scoped>
.heading{
color: #333;
border: 1px solid #e5e5e5;
margin-bottom:10px;
background-color:#fff;
}
.p-l-A{
padding-left: 2rem!important;
}
.fn-28{
font-weight: bold;
padding-right: 1rem;
color: #444;
}
.min-width-A{
min-width: 120px;
}
.min-width-B{
min-width: 160px;
}
</style>

85
src/views/exchange/make-deal.vue

@ -1,5 +1,5 @@
<template>
<div class="col-md-6">
<div class="col-md-8" style="background-color: #fff;padding:0px !important;">
<div class="px-4 py-2 heading">
<!-- <theme-change/> -->
<el-tooltip placement="bottom" effect="light">
@ -58,50 +58,7 @@
</el-tooltip>
</div>
<div class="px-4 py-2 heading" style="border: 1px solid #e5e5e5;margin-bottom:10px;">
<div class="coin-change d-flex align-items-center py-2 pl-4 heading justify-content-between">
<div class="d-flex align-items-center">
<!-- <div
class="price px-3 border-right"
:class="{
decreace: activeContract.increase < 0,
increase: activeContract.increase >= 0
}"
>
<span class="current">{{ activeContract.price }}$</span>
&nbsp;
<span class="zf">{{ activeContract.increaseStr }}</span>
</div> -->
<!-- 币种价值数据 -->
<div class="d-flex fn-12">
<div class="title mb-1 text-secondary px-2">
<!-- 24h {{ $t("contract.h7") }} -->
24h {{ $t("option.zf") }}
</div>
<div class="px-3" :class="{
decreace: activeContract.increase < 0,
increase: activeContract.increase >= 0
}">
<!-- {{ activeContract.high }} -->
{{ activeContract.increaseStr }}
</div>
<div class="title mb-1 text-secondary px-2">
24h {{ $t("contract.h8") }}
</div>
<div class="px-3">
{{ activeContract.low }}
</div>
<div class="title mb-1 text-secondary px-2">
24h {{ $t("contract.h9") }}
(USDT)
</div>
<div class="decreace px-3">
{{ activeContract.vol }}
</div>
</div>
</div>
</div>
</div>
<!-- 生成K线图 -->
<k-line :symbol="symbol" :socket="socket" :priceDecimals="priceDecimals"></k-line>
@ -383,8 +340,6 @@ export default {
//
buyPercentIndex: null,
sellPercentIndex: null,
activeContract:{},
ws: new Socket(this.Globals.Server.Path.WS1),
}
},
@ -753,46 +708,12 @@ export default {
//
return flag;
},
getSwapMarketList(){
let msg = "swapMarketList";
this.ws.send({
cmd: "sub",
msg: msg
});
this.ws.on("message", res => {
let { data, sub,cmd } = res;
if (sub == msg) {
if( data.symbol=='BTC' )(data.price).toFixed(1)
let listA = data;
let listB = listA
.map(item => item.marketInfoList)
.flat()
.find(item => {
return item.pair_name.replace('/', '').toLowerCase() == this.symbol
});
this.activeContract = listB || {};
// console.log(this.symbol, this.activeContract, 'ex-activeContract----------------')
}else if (cmd == "ping") {
this.ws.send({
cmd: "pong"
});
}
});
this.ws.on('close',()=>{
this.ws= new Socket(this.Globals.Server.Path.WS1),
console.log('链接关闭');
this.wsOpen();
})
}
},
created() {
this.getCoinInfo()
this.reset();
this.ws.on("open", () => {
this.getSwapMarketList();
});
// this.getSwapMarketList();
},
}

5
src/views/exchange/order-list.vue

@ -1,5 +1,5 @@
<template>
<div class="col-md-9">
<div class="col-md-12">
<div class="exchange-history order-history market-order mt15">
<ul class="nav nav-pills" role="tablist">
<li class="nav-item" @click="toggle('opens')">
@ -279,8 +279,9 @@ export default {
<style lang="scss">
.exchange-history {
background-color: #fff;
.nav {
background: #f5f9fc;
// background: #f5f9fc;
}
.nav-link.active {

26
src/views/exchange/symbols.vue

@ -1,9 +1,9 @@
<template>
<div class="col-md-3">
<div class="col-md-4">
<div class="market-pairs">
<!-- 搜索框区域 -->
<div class="input-group">
<div class="input-group" v-if="0">
<div class="input-group-prepend">
<span class="input-group-text" id="inputGroup-sizing-sm">
<i class="icon ion-md-search"></i>
@ -44,7 +44,7 @@
<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">
<td class="w-33" style="white-space:nowrap;color: #000;">
<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>
@ -90,7 +90,7 @@ export default {
default: false,
},
marketId: {
marketId: {// id
type: Number,
default: null,
},
@ -231,13 +231,16 @@ export default {
</script>
<style lang="scss">
.market-pairs{
background-color: #fff;
height: 100%;
}
.highlight {
background: #f6f8f9;
background: #F8F8FF;
background: #F8F8FD;
td:first-child {
color: #007bff !important;
}
// td:first-child {
// color: #007bff !important;
// }
}
.w-33 {
@ -255,6 +258,9 @@ tbody tr{
color: green;
}
.table td, .table th {
border-top: 1px solid #e0e0e0;
border-top: 1px solid #eee;
}
.table tr.active{
background-color: #F8F8FD;
}
</style>

2
src/views/home/index.vue

@ -465,7 +465,7 @@
</div>
</div>
<div style="width:25%;text-align: right;">
<div class="th">{{ $t("xtzcoins3.a12") }}</div>
<div class="th">{{ $t("xtzcoins3.c3") }}</div>
<div class="td" v-for="(item, index) in brokenLine" :key="index">{{item.vol}}</div>
</div>
</div>

3
src/views/option/kline.vue

@ -322,8 +322,7 @@ methods: {
let Tdata = new VDatafeed(this);
let widget=(_this.TView = new TradingView.widget({
width: "100%",
// height: 590,
height: 800,
height: 610,//K线
interval: _this.timer,
// timezone: "Asia/Shanghai",
timezone: "America/Toronto",

Loading…
Cancel
Save