You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
139 lines
3.6 KiB
139 lines
3.6 KiB
<template>
|
|
<div class="datalist-box">
|
|
<div class="datalist-title hc-bgColor3">
|
|
<span class="tit-span">{{$t('盘口')}}</span>
|
|
</div>
|
|
|
|
<div class="datalist-list1">
|
|
<div class="table-box">
|
|
<div class="deal-list deal-list-title">
|
|
<ul>
|
|
<li>{{$t('价格')}}({{currentPair.convertType}})</li>
|
|
<li>{{$t('数量')}}({{currentPair.dealCoin}})</li>
|
|
<li>{{$t('累计')}}({{currentPair.dealCoin}})</li>
|
|
</ul>
|
|
</div>
|
|
|
|
<div class="deal-folder" :class="{'deal-folder-open': depthListType == 3}" v-if="depthListType != 2">
|
|
<!-- 买单 -->
|
|
<div class="deal-list">
|
|
<ul v-for="(item, index) of buyDepth" :key="index">
|
|
<li><span class="red-text">{{item.price}}</span></li>
|
|
<li><span>{{item.remain}}</span></li>
|
|
<li><span>{{item.amount}}</span></li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="deal-list-update">
|
|
<h3>
|
|
<span class="red-text" :class="{'green-text': currentPair.changes > 0}">{{currentPair.price}}</span>
|
|
<i>≈ {{currentPair.price * 7 | Decimal(2)}} CNY</i>
|
|
</h3>
|
|
<span class="more-aa hc-color4">
|
|
{{$t('更多')}}
|
|
</span>
|
|
</div>
|
|
|
|
<div class="deal-folder" :class="{'deal-folder-open': depthListType == 2}" v-if="depthListType != 3">
|
|
<!-- 卖单 -->
|
|
<div class="deal-list">
|
|
<ul v-for="(item, index) of sellDepth" :key="index">
|
|
<li><span class="green-text">{{item.price}}</span></li>
|
|
<li><span>{{item.remain}}</span></li>
|
|
<li><span>{{item.amount}}</span></li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="deallist-operation hc-bgColor3">
|
|
<div class="deal-list-range">
|
|
<!-- 普通 -->
|
|
<div class="list-range-1" :class="{'active': depthListType == 1}" @click="changeList(1)"></div>
|
|
<!-- 只显示买单 -->
|
|
<div class="list-range-2" :class="{'active': depthListType == 2}" @click="changeList(2)"></div>
|
|
<!-- 只显示卖单 -->
|
|
<div class="list-range-3" :class="{'active': depthListType == 3}" @click="changeList(3)"></div>
|
|
</div>
|
|
|
|
<div class="deal-list-type">
|
|
<el-select v-model="depth" @change="chooseDepth">
|
|
<el-option v-for="item in depthOptions" :key="item.value" :label="item.label" :value="item.value">
|
|
</el-option>
|
|
</el-select>
|
|
</div>
|
|
<div class="clearfix"></div>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
import { mapState } from 'vuex'
|
|
export default {
|
|
name: 'tradeDepth',
|
|
props: {
|
|
depthValue: Number,
|
|
},
|
|
data() {
|
|
return {
|
|
timers:'',
|
|
|
|
depthListType: 1, //1全部 2买单 3卖单
|
|
depth: 0, //深度
|
|
depthOptions: [ //深度
|
|
{value: 0, label: '深度1'},
|
|
{value: 1, label: '深度2'},
|
|
{value: 2, label: '深度3'},
|
|
{value: 3, label: '深度4'},
|
|
],
|
|
}
|
|
},
|
|
computed: {
|
|
...mapState('trend', ['currentPair', 'buyList', 'sellList']),
|
|
|
|
buyDepth() {
|
|
let list = [];
|
|
let buyLength = this.depthListType == 2 ? 30: 15;
|
|
|
|
this.buyList.forEach((item, index) => {
|
|
if(index < buyLength) {
|
|
list.push(item)
|
|
}
|
|
});
|
|
|
|
return list;
|
|
},
|
|
sellDepth() {
|
|
let list = [];
|
|
let sellLength = this.depthListType == 3 ? 30: 15;
|
|
|
|
this.sellList.forEach((item, index) => {
|
|
if(index < sellLength) {
|
|
list.push(item)
|
|
}
|
|
});
|
|
console.log(JSON.stringify(list)+'卖卖卖')
|
|
return list;
|
|
},
|
|
},
|
|
methods: {
|
|
chooseDepth(val) { //切换深度
|
|
this.$emit('chooseDepth', val);
|
|
},
|
|
changeList(val) { //切换列表类型
|
|
this.depthListType = val;
|
|
}
|
|
},
|
|
}
|
|
</script>
|
|
|
|
<style scoped>
|
|
.deal-folder {
|
|
height: 300px;
|
|
}
|
|
.deal-folder-open {
|
|
height: 600px;
|
|
}
|
|
</style>
|