<template>
|
<v-page >
|
<v-header :title="$t('exchange.g1')">
|
<template #right>
|
<v-link to="/pages/commission/revoke">
|
<van-icon class="fn-22 m-t-xs" name="todo-list-o" />
|
</v-link>
|
</template>
|
</v-header>
|
<view class="p-x-md p-y-xs">
|
<van-tabs type="card" :active="active" @change="changeActive">
|
<van-tab :title="$t('exchange.a4')"></van-tab>
|
<van-tab :title="$t('exchange.a5')"></van-tab>
|
</van-tabs>
|
</view>
|
<!-- 当前委托 -->
|
<v-paging :ajax="getCurrentEntrust" key="0" class="layout-main" v-if="active==0">
|
<template #box="list">
|
<view v-for="item in $list(list)" class="item bg-panel-4 m-md rounded-sm" :key="item.order_no">
|
<view class="head d-flex align-center border-b p-x-md p-y-xs justify-between">
|
<view class="d-flex">
|
<view
|
v-if="item.entrust_type==1"
|
class="suatus color-buy fn-20 m-r-xs rounded"
|
>{{$t('exchange.b5')}}</view>
|
<view
|
v-if="item.entrust_type==2"
|
class="suatus color-sell fn-20 m-r-xs rounded"
|
>{{$t('exchange.b6')}}</view>
|
<view>
|
<view class="color-light fn-20">{{item.symbol}}</view>
|
<view class="fn-10">{{item.created_at}}</view>
|
</view>
|
</view>
|
<view>{{item.status_text}}</view>
|
</view>
|
<view class="p-x-md p-y-xs">
|
<view class="row d-flex m-y-xs justify-between">
|
<view class="label fn-sm">{{$t('exchange.b8')}}</view>
|
<view class="color-light">
|
<template v-if="item.type==1">{{$t('exchange.b9')}}</template>
|
<template v-if="item.type==2">{{$t('exchange.c0')}}</template>
|
</view>
|
</view>
|
<view class="row d-flex m-y-xs justify-between">
|
<view class="label fn-sm">{{$t('exchange.b7')}}</view>
|
<view class="color-light">{{item.entrust_price}}</view>
|
</view>
|
<view class="row d-flex m-y-xs justify-between">
|
<view class="label fn-sm">{{$t('exchange.c1')}}</view>
|
<view class="color-buy">{{item.traded_amount}}</view>
|
</view>
|
<view class="row d-flex m-y-xs justify-between">
|
<view class="label fn-sm">{{$t('exchange.c2')}}</view>
|
<view class="color-light">{{item.amount}}</view>
|
</view>
|
</view>
|
</view>
|
</template>
|
</v-paging>
|
<!-- 历史委托 -->
|
<v-paging :ajax="getHistoryEntrust" key="1" class="layout-main" v-if="active==1">
|
|
<template #box="list">
|
<view v-for="item in $list(list)" class="item bg-panel-4 m-md rounded-sm" :key="item.order_no">
|
<view class="head d-flex align-center border-b p-x-md p-y-xs justify-between">
|
<view class="d-flex">
|
<view
|
v-if="item.entrust_type==1"
|
class="suatus color-buy fn-20 m-r-xs rounded"
|
>{{$t('exchange.b5')}}</view>
|
<view
|
v-if="item.entrust_type==2"
|
class="suatus color-sell fn-20 m-r-xs rounded"
|
>{{$t('exchange.b6')}}</view>
|
<view>
|
<view class="color-light fn-20">{{item.symbol}}</view>
|
<view class="fn-10">{{item.created_at}}</view>
|
</view>
|
</view>
|
<view>{{item.status_text}}</view>
|
</view>
|
<view class="p-x-md p-y-xs">
|
<view class="row d-flex m-y-xs justify-between" v-if="item.type==1">
|
<view class="label fn-sm">{{$t('exchange.b7')}}</view>
|
<view class="color-light">{{item.entrust_price}}</view>
|
</view>
|
<view class="row d-flex m-y-xs justify-between" v-else>
|
<view class="label fn-sm">{{$t('contract.a2')}}{{$t('common.total')}}</view>
|
<view class="color-light">{{item.money}}</view>
|
</view>
|
<view class="row d-flex m-y-xs justify-between">
|
<view class="label fn-sm">{{$t('exchange.b8')}}</view>
|
<view class="color-light">
|
<template v-if="item.type==1">{{$t('exchange.b9')}}</template>
|
<template v-if="item.type==2">{{$t('exchange.c0')}}</template>
|
</view>
|
</view>
|
<view class="row d-flex m-y-xs justify-between">
|
<view class="label fn-sm">{{$t('exchange.c1')}}</view>
|
<view class="color-buy">{{omitTo(item.traded_amount,6)}}</view>
|
</view>
|
<view class="row d-flex m-y-xs justify-between">
|
<view class="label fn-sm">{{$t('exchange.e2')}}</view>
|
<view class="color-buy">{{omitTo(division(item.traded_money,item.traded_amount),6)}}</view>
|
</view>
|
|
<view class="row d-flex m-y-xs justify-between">
|
<view class="label fn-sm">{{$t('exchange.c2')}}</view>
|
<view class="color-light">{{omitTo(item.amount,6)}}</view>
|
</view>
|
</view>
|
</view>
|
</template>
|
</v-paging>
|
</v-page>
|
</template>
|
<script>
|
import Order from "@/api/order";
|
import math from "@/utils/class/math";
|
export default {
|
data() {
|
return {
|
active: 0,
|
getCurrentEntrust: Order.getCurrentEntrust,
|
getHistoryEntrust: Order.getHistoryEntrust,
|
};
|
},
|
computed: {
|
},
|
methods: {
|
division: math.division,
|
omitTo:math.omitTo,
|
changeActive($ev) {
|
this.active = $ev.detail.name;
|
},
|
},
|
};
|
</script>
|
<style lang="scss" scoped>
|
.list {
|
.suatus {
|
&.color-sell {
|
background: rgba($sell, 0.1);
|
}
|
&.color-buy {
|
background: rgba($buy, 0.1);
|
}
|
padding: 5px 10px;
|
}
|
}
|
::v-deep .van-tabs__nav--card .van-tab{
|
color:$light;
|
}
|
::v-deep .van-tabs__nav--card{
|
border:0!important;
|
border-radius: 10px;
|
overflow: hidden;
|
background-color:$form-panel-4;
|
}
|
::v-deep .van-tabs__nav--card .van-tab.van-tab--active{
|
background-color:$theme-1;
|
color: white!important;
|
}
|
</style>
|
