<template>
|
<div class="my_order">
|
<tab-head :title="$t('订单')" v-if="!Operation"></tab-head>
|
|
<div v-if="!Operation" style="padding: 0 0.3rem;">
|
<div class="tui-money">
|
<div class="normal flex-center">
|
<div>
|
<div class="text-xs">
|
{{ $t("浮動盈虧") }}
|
<van-icon name="eye-o" />
|
</div>
|
<div class="price" :style="`color:${moneyData.profitAndLoss > 0
|
? 'red'
|
: moneyData.profitAndLoss < 0
|
? 'green'
|
: ''
|
}`
|
">
|
{{ moneyData.symbol }} {{ moneyData.profitAndLoss }}
|
</div>
|
</div>
|
</div>
|
<div class="all-assets flex-between">
|
<div class="assets-item flex-center" style="align-items: start;">
|
<div class="all-size">{{ $t("總資產") }}</div>
|
<div class="big-size">
|
{{ moneyData.symbol }}{{ moneyData.totalMoney }}
|
</div>
|
</div>
|
<div class="assets-item flex-center">
|
<div class="all-size">
|
{{ $t("hj48") }}
|
</div>
|
<div class="big-size">
|
{{ moneyData.symbol }}{{ moneyData.availableBalance }}
|
</div>
|
</div>
|
<div class="assets-item flex-center" style="align-items: end;">
|
<div class="all-size">{{ $t("平仓盈亏") }}</div>
|
<div class="big-size">
|
{{ moneyData.symbol }}{{ moneyData.cumulativeProfitAndLoss }}
|
</div>
|
</div>
|
</div>
|
<div class="control flex-between">
|
<div class="control-item flex-center" @click="$router.push('/markets-list')">
|
<img src="@/assets/img/mr.png" />
|
<div class="action-item-text">{{ $t("gm") }}</div>
|
</div>
|
<div class="control-item flex-center" @click="$router.push('/markets-list')">
|
<img src="@/assets/img/mc.png" />
|
<div class="action-item-text">{{ $t("hj78") }}</div>
|
</div>
|
<div class="control-item flex-center" @click="$router.push('/Record')">
|
<img src="@/assets/img/pc.png" />
|
<div class="action-item-text">{{ $t("jl") }}</div>
|
</div>
|
</div>
|
</div>
|
</div>
|
|
<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:0 .3rem .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 class="tui-wrapItem" style="width: 25%;">
|
<div style="font-size: 0.28rem;margin-bottom: .25rem;">
|
{{ $t("MingCheng") }}/{{ $t("市值") }}
|
</div>
|
<div style="font-size: .4rem;">
|
{{ i.stockSpell }}
|
</div>
|
<div style="font-size: .28rem;">
|
{{ i.orderTotalPrice }}
|
</div>
|
</div>
|
|
<div class="tui-wrapItem" style="width: 22%;">
|
<div style="font-size: 0.28rem;margin-bottom: .25rem;text-align: center;">
|
{{ $t("持股") }}/{{ $t("可卖") }}
|
</div>
|
<div style="font-size: .4rem;text-align: center;">
|
{{ i.orderNum }}
|
</div>
|
<div style="font-size: .28rem;text-align: center;">
|
{{ i.orderNum }}
|
</div>
|
</div>
|
|
<div class="tui-wrapItem" style="width: 25%;">
|
<div style="font-size: 0.28rem;margin-bottom: .25rem;text-align: end;">
|
{{ $t("Current") }}/{{ $t("Cost") }}
|
</div>
|
<div style="font-size: .4rem;text-align: end;">
|
{{ i.now_price }}
|
</div>
|
<div style="font-size: .28rem;text-align: end;">
|
{{ i.buyOrderPrice }}
|
</div>
|
</div>
|
|
<div class="tui-wrapItem" style="width: 28%;">
|
<div style="font-size: 0.28rem;margin-bottom: .25rem;text-align: end;">
|
{{ $t("盈虧") }}/{{ $t("hj141") }}
|
</div>
|
<div style="font-size: .4rem;text-align: end;" :style="`color:${i.profitAndLose < 0
|
? 'green'
|
: i.profitAndLose > 0
|
? 'red'
|
: ''
|
}`
|
">
|
{{ i.profitAndLose }}
|
</div>
|
<div style="font-size: .28rem;text-align: end;" :style="`color:${i.profitAndLose < 0
|
? 'green'
|
: i.profitAndLose > 0
|
? 'red'
|
: ''
|
}`
|
">
|
{{ i.profitAndLoseParent }}
|
</div>
|
</div>
|
</div>
|
|
<div class="jiaoyi-action flex-between" v-if="actIndex == index">
|
<div class="action-item flex-center" @click="goBuy(i, 1)">
|
<img src="@/assets/img/mr.png" />
|
<div class="action-item-text">{{ $t("gm") }}</div>
|
</div>
|
<div class="action-item flex-center" @click="goBuy(i, 0)">
|
<img src="@/assets/img/mc.png" />
|
<div class="action-item-text">{{ $t("hj78") }}</div>
|
</div>
|
<div class="action-item flex-center" @click="toDetails(i)">
|
<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>
|
let teimss = null; // 轮询获取账户金额计时器
|
let teimss2 = null; // 轮询获取持仓数据计时器
|
import tabHead from "@/components/tabHead.vue";
|
import * as api from "@/axios/api";
|
export default {
|
components: {
|
tabHead
|
},
|
data() {
|
return {
|
active: "0",
|
pageNum: 1,
|
pageSize: 9999,
|
total: 1,
|
list: [], // 持仓数据
|
list2: [], // 平仓数据
|
actObj: {}, // 选择的持仓对象
|
actIndex: null,
|
moneyData: {} // 账户金额
|
};
|
},
|
watch: {
|
active: {
|
handler(state) {
|
this.pageNum = 1;
|
this.getList(state);
|
|
clearInterval(teimss2);
|
// 判断如果是获取平仓数据就不再轮询
|
if(state == '1') return
|
teimss2 = setInterval(() => {
|
this.getList(state);
|
}, 3000);
|
},
|
immediate: true
|
}
|
},
|
props: {
|
// 是否可操作
|
Operation: {
|
type: Boolean,
|
default: false
|
}
|
},
|
created() {
|
this.getMoney();
|
teimss = setInterval(() => {
|
this.getMoney();
|
}, 10000);
|
},
|
beforeDestroy() {
|
clearInterval(teimss);
|
clearInterval(teimss2);
|
},
|
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;
|
},
|
goBuy(i, index) {
|
// console.log("ddddd", i);
|
// return;
|
this.$router.push({
|
path: "/TradingBuy",
|
query: {
|
t: index,
|
code: i.stockCode,
|
m: i.now_price,
|
id: i.stockId,
|
name: i.stockName,
|
spell: i.stockSpell,
|
bayType: i.stockGid,
|
gid: i.stockGidJb
|
}
|
});
|
},
|
// 平仓跳转详情
|
toDetails(i) {
|
if (!i.positionSn) return;
|
this.$router.push({
|
path: "/Stockdetail",
|
query: { codes: i.positionSn }
|
});
|
},
|
// 获取账户金额
|
async getMoney() {
|
let data = await api.getMoney();
|
if (data.status === 0) {
|
this.moneyData = data.data[0];
|
}
|
}
|
}
|
};
|
</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);
|
|
.tui-money {
|
margin-top: 0.65rem;
|
margin-bottom: 0.3rem;
|
width: 100%;
|
background: linear-gradient(90deg, #585fb4, #48529e);
|
border-radius: 0.175rem;
|
|
.control {
|
width: 100%;
|
padding: 0.2rem 0.3rem;
|
|
.control-item {
|
width: 33%;
|
padding-top: 0.1rem;
|
flex-direction: column;
|
|
.action-item-text {
|
font-size: 0.3rem;
|
line-height: 0.3rem;
|
color: #aaa;
|
}
|
|
img {
|
width: 0.5rem;
|
height: 0.5rem;
|
margin-bottom: 0.3rem;
|
}
|
}
|
}
|
|
.all-assets {
|
width: 100%;
|
padding: 0.225rem 0.3rem 0.35rem;
|
justify-content: space-evenly;
|
border-bottom: #aaa solid 1px;
|
|
.assets-item {
|
width: 33%;
|
flex-shrink: 0;
|
flex-direction: column;
|
|
.big-size {
|
font-size: 0.35rem;
|
color: #fff;
|
padding-top: 0.15rem;
|
}
|
|
.all-size {
|
font-size: 0.35rem;
|
color: #c4c7e4;
|
}
|
}
|
}
|
|
.normal {
|
padding: 0.375rem 0;
|
margin: 0 0.375rem;
|
position: relative;
|
|
.price {
|
font-size: 0.825rem;
|
line-height: 0.825rem;
|
font-weight: 500;
|
padding-top: 0.3rem;
|
color: #fff;
|
}
|
|
.text-xs {
|
font-size: 0.45rem;
|
color: #c7c9e6;
|
text-align: center;
|
}
|
}
|
}
|
|
.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 0rem 0;
|
color: #898a8e;
|
width: 54%;
|
line-height: 0.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>
|
