From 1bd03f5c2e7b9fa9cc80c4e673e18132da411333 Mon Sep 17 00:00:00 2001
From: jhzh <1628036192@qq.com>
Date: Wed, 12 Nov 2025 16:21:06 +0800
Subject: [PATCH] 1
---
src/page/user/myOrder.vue | 477 +++++++++++++++++++++++++++++++++++++++++++++++++---------
1 files changed, 398 insertions(+), 79 deletions(-)
diff --git a/src/page/user/myOrder.vue b/src/page/user/myOrder.vue
index 1377ecb..a52c77e 100644
--- a/src/page/user/myOrder.vue
+++ b/src/page/user/myOrder.vue
@@ -1,25 +1,76 @@
<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 }}<span v-if="moneyData.isZf==1">-</span>{{ 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-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-tab :title="$t('hj109')" name="2" 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="mo_all_sell" @click="allsellclick()">
+ <div>{{ $t("gball") }}</div>
+ </div>
+ <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 }}
@@ -28,69 +79,78 @@
{{ 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 style="display:flex;flex-wrap:wrap;padding:0 .3rem .35rem;">
+ <div class="tui-wrapItem" style="width: 25%;">
+ <div style="font-size: 0.28rem;margin-bottom: .25rem;">
+ {{ $t("MingCheng") }}/{{ $t("市值") }}
</div>
- <div style="margin-left: .25rem;font-size: .4rem;">
+ <div style="font-size: .4rem;">
+ {{ i.stockSpell }}
+ </div>
+ <div style="font-size: .28rem;">
{{ i.orderTotalPrice }}
</div>
</div>
- <div class="tui-wrapItem flex-start" style="width: 46%;">
- <div>
- {{ $t("盈虧") }}
+ <div class="tui-wrapItem" style="width: 22%;">
+ <div style="font-size: 0.28rem;margin-bottom: .25rem;text-align: center;">
+ {{ $t("持股") }}/{{ $t("可卖") }}
</div>
- <div
- style="margin-left: .25rem;font-size: .4rem;"
- :style="
- `color:${
- i.profitAndLose > 0
- ? 'green'
- : i.profitAndLose < 0
- ? 'red'
- : ''
- }`
- "
- >
- {{ i.profitAndLose }}
+ <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 flex-start">
- <div>
- {{ $t("持倉價") }}
+ <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="margin-left: .25rem;">
+ <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 flex-start" style="width:100%">
- <div>
- {{ $t("持倉時間") }}
+ <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="margin-left: .25rem;">
- {{ $moment(i.buyOrderTime).format("DD-MM-YYYY hh:mm:ss A") }}
+ <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">
+ <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">
+ <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">
+ <div class="action-item flex-center" @click="toDetails(i)">
<img src="@/assets/img/pc.png" />
<div class="action-item-text">{{ $t("平仓") }}</div>
</div>
@@ -103,12 +163,7 @@
</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="mol_item" v-for="(i, index) in list2" :key="i.id" @click="open(i, index)">
<div class="moli_title flex-between">
<div>
{{ i.stockSpell }}
@@ -135,18 +190,13 @@
<div>
{{ $t("盈虧") }}
</div>
- <div
- style="margin-left: .25rem;font-size: .4rem;"
- :style="
- `color:${
- i.profitAndLose > 0
- ? 'green'
- : i.profitAndLose < 0
- ? 'red'
- : ''
- }`
- "
- >
+ <div style="margin-left: .25rem;font-size: .4rem;" :style="`color:${i.profitAndLose > 0
+ ? 'green'
+ : i.isZf < 0
+ ? 'red'
+ : ''
+ }`
+ ">
{{ i.profitAndLose }}
</div>
</div>
@@ -193,29 +243,126 @@
<span>{{ $t("沒有更多了") }}</span>
</div>
</div>
+
+ <div class="mo_list" v-if="active == '2'">
+ <div class="mol_item" v-for="(i, index) in orderList" :key="i.id" >
+ <div class="moli_title flex-between">
+ <div>
+ {{ i.stockName }}
+ </div>
+ <div v-if="i.status!=2" @click="cdclick(i.id)" class="mo_all_sells">
+ {{ $t("hj126") }}
+ </div>
+ </div>
+
+ <div style="display:flex;flex-wrap:wrap;padding-bottom: .35rem;margin: 0 10px;">
+ <div class="tui-wrapItem flex-start">
+ <div>
+ {{ $t("hj125") }}
+ </div>
+ <div style="margin-left: .25rem;font-size: .4rem;">
+ {{ i.nowPrice }}
+ </div>
+ </div>
+
+ <div class="tui-wrapItem flex-start" style="width: 46%;">
+ <div>
+ {{ $t("hj101") }}
+ </div>
+ <div style="margin-left: .25rem;font-size: .4rem;" >
+ {{ i.lever }}
+ </div>
+ </div>
+
+ <div class="tui-wrapItem flex-start">
+ <div>
+ {{ $t("hj270") }}
+ </div>
+ <div style="margin-left: .25rem;">
+ {{ i.buyNum }}
+ </div>
+ </div>
+
+ <div class="tui-wrapItem flex-start" style="width: 46%;">
+ <div>
+ {{ $t("hj271") }}
+ </div>
+ <div style="margin-left: .25rem;">
+ {{ i.targetPrice }}
+ </div>
+ </div>
+
+ <div class="tui-wrapItem">
+ <div>
+ {{ $t("操作时间") }}
+ </div>
+ <div>
+ {{ i.addTime }}
+ </div>
+ </div>
+
+ <div class="tui-wrapItem" style="width: 46%;">
+ <div>
+ {{ $t("状态") }}
+ </div>
+ <div v-if="i.status==0">
+ {{ $t('已挂单') }}
+ </div>
+ <div v-if="i.status==2">
+ {{ $t('买入失败') }}
+ </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";
+import { Notify } from "vant";
export default {
+ components: {
+ tabHead
+ },
data() {
return {
active: "0",
pageNum: 1,
pageSize: 9999,
+ orderList:[],//挂单列表
total: 1,
list: [], // 持仓数据
list2: [], // 平仓数据
actObj: {}, // 选择的持仓对象
- actIndex: null
+ actIndex: null,
+ moneyData: {} // 账户金额
};
},
watch: {
active: {
handler(state) {
- this.pageNum = 1;
- this.getList(state);
+ console.log(state);
+ if(state==2){
+ this.getorderList()
+ }else{
+ this.pageNum = 1;
+ this.getList(state);
+
+ clearInterval(teimss2);
+ // 判断如果是获取平仓数据就不再轮询
+ if(state == '1') return
+ teimss2 = setInterval(() => {
+ this.getList(state);
+ }, 3000);
+ }
},
immediate: true
}
@@ -227,8 +374,31 @@
default: false
}
},
- created() {},
+ created() {
+ this.getMoney();
+ teimss = setInterval(() => {
+ this.getMoney();
+ }, 3000);
+ },
+ beforeDestroy() {
+ clearInterval(teimss);
+ clearInterval(teimss2);
+ },
methods: {
+ async cdclick(id){
+ let data = await api.revocationOrder({"id":id});
+ if (data.status === 0) {
+ Notify({ type: "success", message: data.msg });
+ this.getorderList()
+ }
+ },
+ // 获取 挂单 数据
+ async getorderList() {
+ let data = await api.getorderList();
+ if (data.status === 0) {
+ this.orderList = data.data
+ }
+ },
// 获取 持仓 数据
async getList(state = 0) {
let opt = {
@@ -236,60 +406,206 @@
pageNum: this.pageNum,
pageSize: this.pageSize
};
- let data = await api.getchicang(opt);
+ 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;
}
},
+ // 一键平仓
+ async allsellclick(){
+ let data = await api.allsell();
+ if (data.status === 0) {
+ Notify({ type: "success", message: data.msg });
+ this.getList(state);
+ } else {
+ Notify({ type: "danger", message: data.msg });
+ }
+ },
open(i, index) {
- if (!this.Operation) return;
+ // 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>
+ .mo_all_sells{
+ padding: 10px 20px;
+ background: linear-gradient(90deg, #585fb4, #48529e);
+ border-radius: 25px;
+ text-align: center;
+ display: flex;
+ justify-content: center;
+ align-items: center;
+ }
+.mo_all_sell{
+ padding: 20px 10px;
+ background: linear-gradient(90deg, #585fb4, #48529e);
+ border-radius: 25px;
+ text-align: center;
+ margin: 15px ;
+ display: flex;
+ justify-content: center;
+ align-items: center;
+}
/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;
@@ -297,16 +613,19 @@
}
}
}
+
.tui-wrapItem {
- padding: 0.175rem 0.3rem 0;
+ padding: 0.175rem 0rem 0;
color: #898a8e;
width: 54%;
- line-height: .4rem;
+ line-height: 0.4rem;
}
+
.moli_orderTitle {
padding: 0.3rem 0.3rem 0;
color: #ccc;
}
+
.moli_title {
padding: 0.3rem;
border-bottom: 1px solid #494949;
--
Gitblit v1.9.3