wwbsr/pages/exchange/miao-record.vue

<template>
	<v-page>
		<!-- <v-header class="nav-head" :title="$t('miao.b1')"></v-header> -->
		<v-paging :ajax="getHistoryEntrust" style="height:100vh" ref="pages">
			<template #box="list">
				<van-empty v-if="!$list(list).length" description="" />
				<div class="item bg-panel-4 m-md rounded-sm box-shadow" v-for="item in $list(list)" :key="item.id">
					<div class="head d-flex align-center border-b  p-x-md p-y-xs justify-between">
						<div class="d-flex">
							<div>
								<div class="color-light fn-20">{{ item.coin_name }}</div>
								<div class="fn-10">{{$date(item.created_at)  }}</div>
							</div>
						</div>
						<div class="d-flex">
							<span v-if="item.type == 1" class="color-buy">{{$t('miao.b2')}}</span>
							<span v-if="item.type == 2" class="color-sell">{{$t('miao.b3')}}</span>
						</div>
					</div>
					<div class="p-x-md p-y-xs">
						<div class="row d-flex m-y-mini justify-between">
							<div class="label fn-sm">{{$t('miao.b4')}}</div>
							<div class="color-light">{{item.monovalent*1}}</div>
						</div>
						<div class="row d-flex m-y-mini justify-between">
							<div class="label fn-sm">{{$t('miao.b5')}}</div>
							<div class="color-light">{{item.trade_money*1}}</div>
						</div>
<!-- 						<div class="row d-flex m-y-mini justify-between">
							<div class="label fn-sm">手续费</div>
							<div class="color-light">{{item.fee*1}}</div>
						</div> -->
						<div class="row d-flex m-y-mini justify-between">
							<div class="label fn-sm"> {{$t('miao.b6')}}</div>
							<div class="color-light">{{item.rate*1}}%</div>
						</div>
						<div class="row d-flex m-y-mini justify-between">
							<div class="label fn-sm">{{$t('miao.b7')}}</div>
							<div class="color-light">{{item.time}} sec</div>
						</div>
						<div class="row d-flex m-y-mini justify-between" v-if="item.status == 2">
							<div class="label fn-sm">{{$t('miao.b8')}}</div>
							<div class="color-light">{{item.exit_price * 1}}</div>
						</div>
						
						
 						<div class="row d-flex m-y-mini justify-between"  v-if="item.status == 2">
							<div class="label fn-sm">{{$t('miao.b9')}}</div>
							
							<div v-if="item.type == 1">
								<div class="color-light" v-if="(item.exit_price*1) > (item.monovalent)" >{{item.result*1}}</div>
								<div class="color-light" v-if="(item.exit_price*1) <= (item.monovalent)" >-{{item.trade_money*1}}</div>
							</div>
							<div v-if="item.type == 2">
								<div class="color-light" v-if="(item.exit_price*1) < (item.monovalent)" >{{item.result*1}}</div>
								<div class="color-light" v-if="(item.exit_price*1) >= (item.monovalent)" >-{{item.trade_money*1}}</div>
							</div>
							
						</div> 
						<div class="row d-flex m-y-mini justify-between" v-if="item.status == 1&&item.ttl">
							<div class="label fn-sm">{{$t('miao.b10')}}</div>
							<div class="color-light">
								<van-count-down :time="item.ttl * 1000" @finish="getList">
								</van-count-down>
							</div>
						</div>
					</div>
				</div>
			</template>
		</v-paging>
	</v-page>
	
</template>

<script>
	import Contract from "@/api/contract";
	export default {
		name: "contract-entrustment",
		data() {
			return {
				show: false,
				activeItem: {},
				order_details: []
			};
		},
		methods: {
			getList(){
				this.$refs.pages.ref()
			},
			getHistoryEntrust: Contract.OrderListM,
			status(status) {
				switch (status) {
					case 0:
						return this.$t('contract.b6');
					case 1:
						return this.$t('contract.b7');
					case 2:
						return this.$t('contract.b9');
					case 3:
						return this.$t('contract.b9');
				}
			},
			cals(side, order_type) {
				// side - order_type
				let map = {
					"1-1": this.$t('contract.c0'),
					"1-2": this.$t('contract.c1'),
					"2-1": this.$t('contract.c2'),
					"2-2": this.$t('contract.c3'),
				};
				return map[`${side}-${order_type}`];
			},
		},
	};
</script>

<style lang="scss" scoped>
	.m-y-mini {
		margin-top: 5px;
		margin-bottom: 5px;
	}
</style>