projectionscreenPc/src/views/coincoin/components/trade_depth.vue

<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>