<template>
|
<div class="my_order">
|
<van-tabs v-model="active" title-inactive-color="#898a8e">
|
<van-tab
|
:title="$t('hj2')"
|
name="0"
|
title-style="font-size:0.4rem;"
|
></van-tab>
|
<van-tab
|
:title="$t('hj121')"
|
name="1"
|
title-style="font-size:0.4rem;"
|
></van-tab>
|
</van-tabs>
|
|
<div class="mo_list" v-if="active == '0'">
|
<div
|
class="mol_item"
|
v-for="(i, index) in list"
|
:key="i.id"
|
@click="open(i, index)"
|
>
|
<div class="moli_title flex-between">
|
<div>
|
{{ i.stockSpell }}
|
</div>
|
<div :style="`color:${i.orderDirection == '买涨' ? 'green' : 'red'}`">
|
{{ i.orderDirection == "买涨" ? $t("gm") : $t("hj78") }}
|
</div>
|
</div>
|
<div class="moli_orderTitle">
|
<span>{{ $t("订单号") }}</span>
|
<span style="margin-left: 1em;">{{ i.buyOrderId }}</span>
|
</div>
|
<div style="display:flex;flex-wrap:wrap;padding-bottom: .35rem;">
|
<div class="tui-wrapItem flex-start">
|
<div>
|
{{ $t("Price") }}
|
</div>
|
<div style="margin-left: .25rem;font-size: .4rem;">
|
{{ i.orderTotalPrice }}
|
</div>
|
</div>
|
|
<div class="tui-wrapItem flex-start" style="width: 46%;">
|
<div>
|
{{ $t("盈虧") }}
|
</div>
|
<div
|
style="margin-left: .25rem;font-size: .4rem;"
|
:style="
|
`color:${
|
i.profitAndLose > 0
|
? 'green'
|
: i.profitAndLose < 0
|
? 'red'
|
: ''
|
}`
|
"
|
>
|
{{ i.profitAndLose }}
|
</div>
|
</div>
|
|
<div class="tui-wrapItem flex-start">
|
<div>
|
{{ $t("持倉價") }}
|
</div>
|
<div style="margin-left: .25rem;">
|
{{ i.buyOrderPrice }}
|
</div>
|
</div>
|
|
<div class="tui-wrapItem flex-start" style="width:100%">
|
<div>
|
{{ $t("持倉時間") }}
|
</div>
|
<div style="margin-left: .25rem;">
|
{{ $moment(i.buyOrderTime).format("DD-MM-YYYY hh:mm:ss A") }}
|
</div>
|
</div>
|
</div>
|
|
<div class="jiaoyi-action flex-between" v-if="actIndex == index">
|
<div class="action-item flex-center">
|
<img src="@/assets/img/mr.png" />
|
<div class="action-item-text">{{ $t("gm") }}</div>
|
</div>
|
<div class="action-item flex-center">
|
<img src="@/assets/img/mc.png" />
|
<div class="action-item-text">{{ $t("hj78") }}</div>
|
</div>
|
<div class="action-item flex-center">
|
<img src="@/assets/img/pc.png" />
|
<div class="action-item-text">{{ $t("平仓") }}</div>
|
</div>
|
</div>
|
</div>
|
|
<div class="more-news">
|
<span>{{ $t("沒有更多了") }}</span>
|
</div>
|
</div>
|
|
<div class="mo_list" v-if="active == '1'">
|
<div
|
class="mol_item"
|
v-for="(i, index) in list2"
|
:key="i.id"
|
@click="open(i, index)"
|
>
|
<div class="moli_title flex-between">
|
<div>
|
{{ i.stockSpell }}
|
</div>
|
<div :style="`color:${i.orderDirection == '买涨' ? 'green' : 'red'}`">
|
{{ i.orderDirection == "买涨" ? $t("gm") : $t("hj78") }}
|
</div>
|
</div>
|
<div class="moli_orderTitle">
|
<span>{{ $t("订单号") }}</span>
|
<span style="margin-left: 1em;">{{ i.buyOrderId }}</span>
|
</div>
|
<div style="display:flex;flex-wrap:wrap;padding-bottom: .35rem;">
|
<div class="tui-wrapItem flex-start">
|
<div>
|
{{ $t("Price") }}
|
</div>
|
<div style="margin-left: .25rem;font-size: .4rem;">
|
{{ i.orderTotalPrice }}
|
</div>
|
</div>
|
|
<div class="tui-wrapItem flex-start" style="width: 46%;">
|
<div>
|
{{ $t("盈虧") }}
|
</div>
|
<div
|
style="margin-left: .25rem;font-size: .4rem;"
|
:style="
|
`color:${
|
i.profitAndLose > 0
|
? 'green'
|
: i.profitAndLose < 0
|
? 'red'
|
: ''
|
}`
|
"
|
>
|
{{ i.profitAndLose }}
|
</div>
|
</div>
|
|
<div class="tui-wrapItem flex-start">
|
<div>
|
{{ $t("持倉價") }}
|
</div>
|
<div style="margin-left: .25rem;">
|
{{ i.buyOrderPrice }}
|
</div>
|
</div>
|
|
<div class="tui-wrapItem flex-start" style="width: 46%;">
|
<div>
|
{{ $t("成交价") }}
|
</div>
|
<div style="margin-left: .25rem;">
|
{{ i.sellOrderPrice }}
|
</div>
|
</div>
|
|
<div class="tui-wrapItem">
|
<div>
|
{{ $t("持倉時間") }}
|
</div>
|
<div>
|
{{ $moment(i.buyOrderTime).format("DD-MM-YYYY hh:mm:ss A") }}
|
</div>
|
</div>
|
|
<div class="tui-wrapItem" style="width: 46%;">
|
<div>
|
{{ $t("hj128") }}
|
</div>
|
<div>
|
{{ $moment(i.sellOrderTime).format("DD-MM-YYYY hh:mm:ss A") }}
|
</div>
|
</div>
|
</div>
|
</div>
|
|
<div class="more-news">
|
<span>{{ $t("沒有更多了") }}</span>
|
</div>
|
</div>
|
</div>
|
</template>
|
|
<script>
|
import * as api from "@/axios/api";
|
export default {
|
data() {
|
return {
|
active: "0",
|
pageNum: 1,
|
pageSize: 9999,
|
total: 1,
|
list: [], // 持仓数据
|
list2: [], // 平仓数据
|
actObj: {}, // 选择的持仓对象
|
actIndex: null
|
};
|
},
|
watch: {
|
active: {
|
handler(state) {
|
this.pageNum = 1;
|
this.getList(state);
|
},
|
immediate: true
|
}
|
},
|
props: {
|
// 是否可操作
|
Operation: {
|
type: Boolean,
|
default: false
|
}
|
},
|
created() {},
|
methods: {
|
// 获取 持仓 数据
|
async getList(state = 0) {
|
let opt = {
|
state,
|
pageNum: this.pageNum,
|
pageSize: this.pageSize
|
};
|
let data = await api.getchicang(opt);
|
|
if (data.status === 0) {
|
if (this.active == "0") this.list = data.data.list;
|
else this.list2 = data.data.list;
|
}
|
},
|
open(i, index) {
|
if (!this.Operation) return;
|
this.actObj = i;
|
this.actIndex = index;
|
}
|
}
|
};
|
</script>
|
|
<style lang="less" scoped>
|
/deep/ .van-tabs__nav {
|
background: none;
|
.van-tab__text--ellipsis {
|
overflow: visible;
|
}
|
.van-tab--active {
|
color: #ccc !important;
|
}
|
}
|
/deep/ .van-tabs__line {
|
background-color: rgb(82, 91, 173);
|
}
|
.my_order {
|
width: 100%;
|
font-size: 0.3rem;
|
background-color: rgba(#000, 0.9);
|
.mo_list {
|
padding: 0 0.35rem;
|
.mol_item {
|
margin: 0 0 0.3rem;
|
background-color: #13161e;
|
border-radius: 0.325rem;
|
color: #898a8e;
|
margin-top: 0.3rem;
|
.jiaoyi-action {
|
width: 100%;
|
height: 1.5rem;
|
background-color: #191d27;
|
.action-item {
|
width: 33%;
|
flex-shrink: 0;
|
flex-direction: column;
|
.action-item-text {
|
font-size: 0.3rem;
|
line-height: 0.3rem;
|
color: #898a8e;
|
}
|
img {
|
width: 0.5rem;
|
height: 0.5rem;
|
margin-bottom: 0.16rem;
|
}
|
}
|
}
|
.tui-wrapItem {
|
padding: 0.175rem 0.3rem 0;
|
color: #898a8e;
|
width: 54%;
|
line-height: .4rem;
|
}
|
.moli_orderTitle {
|
padding: 0.3rem 0.3rem 0;
|
color: #ccc;
|
}
|
.moli_title {
|
padding: 0.3rem;
|
border-bottom: 1px solid #494949;
|
font-weight: 700;
|
color: #ccc;
|
font-size: 0.4rem;
|
}
|
}
|
}
|
}
|
</style>
|
