From 732c30b33f782c2d2ebb62eacda2fb7a453a7ecd Mon Sep 17 00:00:00 2001
From: admin <344137771@qq.com>
Date: Sat, 31 Jan 2026 11:01:45 +0800
Subject: [PATCH] 1
---
src/page/trading/TradeNew.vue | 393 +++++++++++++++++++++++++++++++++++++++++++++++--------
1 files changed, 335 insertions(+), 58 deletions(-)
diff --git a/src/page/trading/TradeNew.vue b/src/page/trading/TradeNew.vue
index c7205a8..7285ee5 100644
--- a/src/page/trading/TradeNew.vue
+++ b/src/page/trading/TradeNew.vue
@@ -1,66 +1,305 @@
<template>
<div class="trade_new">
- <tab-head></tab-head>
+ <tab-head>
+ <!-- <van-popover v-model="showPopover" trigger="click" :actions="actions" @select="onSelect" slot="left">
+ <template #reference>
+ <van-button type="primary">{{ $t("一键平仓") }}</van-button>
+ </template>
+</van-popover> -->
+ </tab-head>
- <van-row class="list_head">
- <van-col span="8" class="flex-start head_item">
- {{ $t("hj313") }}/{{ $t("Worth") }}
- </van-col>
- <van-col span="8" class="flex-start head_item">
- {{ $t("sl") }}/{{ $t("Profit") }}
- </van-col>
- <van-col span="8" class="flex-end head_item">
- {{ $t("Cost") }}/{{ $t("Current") }}
- </van-col>
- </van-row>
+ <div class="order_tabs">
+ <van-tabs v-model="active" swipe-threshold="1">
+ <van-tab :title="$t('hj160')" name=""></van-tab>
+ <van-tab :title="$t('美股指数')" name="US"></van-tab>
+ <van-tab :title="$t('日股指数')" name="JP"></van-tab>
+ <van-tab :title="$t('hj109')" name="GaDan"></van-tab>
+ <!-- <van-tab :title="$t('hksi')" name="HK"></van-tab>
+ <van-tab :title="$t('tsi')" name="TW"></van-tab> -->
+ </van-tabs>
+ </div>
- <van-row class="list_item" v-for="item in 10" :key="item">
- <van-col span="8" class="item_n">
- <div class="flex-start">
- <span class="i_icon">US</span>
- <span class="i_hint">WINVU</span>
- </div>
- <div class="i_name">124.1</div>
- </van-col>
- <van-col span="8" class="item_n">
- <p class="flex-start">18</p>
- <p class="flex-start i_name">24.1 (24.1%)</p>
- </van-col>
- <van-col span="8" class="item_n">
- <div class="flex-end" style="margin-bottom: .15em;">
- <span>10</span>
- </div>
- <div class="flex-end">
- <span>12.41</span>
- </div>
- </van-col>
- <van-col span="24" class="flex-start transaction_type">
- <span>AI交易</span>
- </van-col>
- <van-col span="24" class="flex-between item_card">
- <div class="card_label">
- <p>建仓成本</p>
- <p>100</p>
- </div>
- <div class="card_label">
- <p>平仓金额</p>
- <p>90</p>
- </div>
- <div class="card_label">
- <p>预期收益</p>
- <p>-10</p>
- </div>
- </van-col>
- </van-row>
+ <!-- 挂单列表 -->
+ <div v-if="active == 'GaDan'">
+
+ <van-row class="list_head">
+ <van-col span="14" class="flex-start head_item">
+ {{ $t("hj313") }}/{{ $t("Worth") }}
+ </van-col>
+ <van-col span="3" class="flex-center head_item">
+ {{ $t("sl") }}
+ </van-col>
+ <van-col span="3" class="flex-center head_item">
+ {{ $t("Cost") }}
+ </van-col>
+ </van-row>
+
+ <van-row class="list_item" v-for="i in list" :key="i.id">
+ <van-col span="14" class="item_n">
+ <div class="flex-start">
+ <span class="i_icon">{{ i.stockGid }}</span>
+ <span class="i_hint">{{ i.stockName }}</span>
+ </div>
+ <div class="i_name">
+ {{ (i.buyNum * i.targetPrice).toFixed(2) }}
+ </div>
+ </van-col>
+ <van-col span="3" class="item_n">
+ <p class="flex-center">{{ i.buyNum }}</p>
+ </van-col>
+ <van-col span="3" class="item_n">
+ <div class="flex-center" style="margin-bottom: .15em;">
+ <span>{{ i.targetPrice }}</span>
+ </div>
+ </van-col>
+ <van-col span="4" class="item_n">
+ <div class="flex-center delete-btn-wrapper">
+ <van-icon name="delete" size="0.5rem" color="#ee0a24" @click.stop="handleDelete(i)" />
+ </div>
+ </van-col>
+ </van-row>
+ </div>
+ <!-- 正常持仓列表 -->
+ <div v-else>
+ <van-row class="list_head">
+ <van-col span="8" class="flex-start head_item">
+ {{ $t("hj313") }}/{{ $t("Worth") }}
+ </van-col>
+ <van-col span="8" class="flex-start head_item">
+ {{ $t("sl") }}/{{ $t("Profit") }}
+ </van-col>
+ <van-col span="8" class="flex-end head_item">
+ {{ $t("Cost") }}/{{ $t("Current") }}
+ </van-col>
+ </van-row>
+
+ <van-row class="list_item" v-for="i in list" :key="i.id" @click="toDetails(i)">
+ <van-col span="8" class="item_n">
+ <div class="flex-start">
+ <span class="i_icon">{{ i.stockGid }}</span>
+ <span class="i_hint">{{ i.stockSpell }}</span>
+ </div>
+ <div class="i_name">
+ {{ (i.orderNum * i.now_price).toFixed(2) }}
+ </div>
+ </van-col>
+ <van-col span="8" class="item_n">
+ <p class="flex-start">{{ i.orderNum }}</p>
+ <p class="flex-start i_name" :style="{
+ color:
+ i.profitAndLose > 0 ? 'green' : i.profitAndLose < 0 ? 'red' : ''
+ }">
+ {{ i.profitAndLose }} ({{ i.profitAndLoseParent }})
+ </p>
+ </van-col>
+ <van-col span="8" class="item_n">
+ <div class="flex-end" style="margin-bottom: .15em;">
+ <span>{{ i.buyOrderPrice }}</span>
+ </div>
+ <div class="flex-end">
+ <span>{{ i.now_price }}</span>
+ </div>
+ </van-col>
+ <van-col span="24" class="flex-start transaction_type">
+ <span>{{ types[i.positionType] }}</span>
+ </van-col>
+ <van-col span="24" class="flex-between-start item_card" v-if="i.positionType == 4">
+ <div class="card_label">
+ <p>{{ $t("建仓成本") }}</p>
+ <p>{{ i.orderTotalPrice }}</p>
+ </div>
+ <div class="card_label">
+ <p>{{ $t("pcje") }}</p>
+ <p>{{ i.sellOrderTotalPrice }}</p>
+ </div>
+ <div class="card_label">
+ <p>{{ $t("预期收益") }}</p>
+ <p>{{ i.profitAndLose }}</p>
+ </div>
+ </van-col>
+ </van-row>
+ </div>
+
+ <!-- 无数据时显示 -->
+ <div class="no_data flex-center" v-show="!list || list.length == 0">
+ <img src="@/assets/img/zhaobudao2.png" alt="" />
+ </div>
+
+ <n-pagination :pageNo.sync="pageNum" :pageSize="pageSize" :total="currentTotal" v-if="active != 'GaDan'"></n-pagination>
</div>
</template>
<script>
+let times = null; // 计时器
import tabHead from "@/components/tabHead.vue";
+import * as api from "@/axios/api";
+import nPagination from "@/components/nPagination.vue";
+import { Notify, Dialog } from "vant";
export default {
components: {
- tabHead
+ tabHead,
+ nPagination
+ },
+ data() {
+ return {
+ pageNum: 1,
+ pageSize: 15,
+ total: 1,
+ // 为每个tab使用独立的list变量
+ lists: {
+ '': [], // 默认tab
+ 'US': [], // 美股指数
+ 'JP': [], // 日股指数
+ 'GaDan': [] // 挂单
+ },
+ // 为每个tab使用独立的total变量
+ totals: {
+ '': 1,
+ 'US': 1,
+ 'JP': 1,
+ 'GaDan': 0
+ },
+ active: "",
+ types: {
+ 0: this.$t("日内"),
+ 2: "IPO",
+ 3: this.$t("hj621"),
+ 4: "AI"
+ },
+ actions: [{ text: '确定', key: '1' }, { text: '取消', key: '2' }],
+ showPopover: false,
+ };
+ },
+ computed: {
+ // 当前tab对应的list
+ list() {
+ return this.lists[this.active] || [];
+ },
+ // 当前tab对应的total
+ currentTotal() {
+ return this.totals[this.active] || 0;
+ }
+ },
+ watch: {
+ pageNum() {
+ this.getList();
+ this.creatTimer();
+ },
+ active(val) {
+ this.pageNum = 1;
+ // 清空当前tab的数据
+ if (this.lists[val]) {
+ this.lists[val] = [];
+ }
+ if (val == 'GaDan') {
+ this.stopTimer()
+ this.getList2();
+ }
+ else {
+ this.getList();
+ this.creatTimer();
+ }
+ }
+ },
+ created() {
+ this.getList();
+ this.creatTimer();
+ },
+ destroyed() {
+ this.stopTimer();
+ },
+ methods: {
+ // 获取持仓数据
+ async getList() {
+ const currentActive = this.active;
+ let data = await api.getchicang({
+ state: 0,
+ stockType: currentActive,
+ pageNum: this.pageNum,
+ pageSize: this.pageSize
+ });
+
+ if (data.status === 0) {
+ // 只有当active没有变化时才更新数据，防止数据错乱
+ if (this.active === currentActive) {
+ this.lists[currentActive] = data.data.list || [];
+ this.totals[currentActive] = data.data.total || 0;
+ this.total = data.data.total || 0;
+ }
+ }
+ },
+ // 获取挂单数据
+ async getList2() {
+ const currentActive = this.active;
+ let data = await api.getGdOrderList();
+
+ if (data.status === 0) {
+ // 只有当active没有变化时才更新数据，防止数据错乱
+ if (this.active === currentActive && currentActive === 'GaDan') {
+ this.lists['GaDan'] = data.data || [];
+ }
+ }
+ },
+ // 跳转详情
+ toDetails(i) {
+ if (!i.positionSn) return;
+ this.$router.push({
+ path: "/Stockdetail",
+ query: { codes: i.positionSn }
+ });
+ },
+ //
+ stopTimer() {
+ if (times) {
+ clearInterval(times);
+ times = null;
+ }
+ },
+ creatTimer() {
+ this.stopTimer()
+ times = setInterval(() => {
+ this.getList();
+ }, 3000);
+ },
+ // 一键平仓确认弹框
+ onSelect(action) {
+ if (action.key == 1) this.oneClose();
+ },
+ // 一键平仓
+ async oneClose() {
+ const res = await api.allsell();
+ if (res.status === 0) {
+ Notify({ type: "success", message: res.msg });
+ } else {
+ Notify({ type: "danger", message: res.msg });
+ }
+ },
+ // 删除挂单
+ handleDelete(item) {
+ Dialog.confirm({
+ title: this.$t("提示"),
+ message: this.$t("确认删除") + "?",
+ confirmButtonText: this.$t("qr"),
+ cancelButtonText: this.$t("qx")
+ }).then(async () => {
+ // 用户确认后执行删除
+ try {
+ const data = await api.delGuaDan({ id: item.id });
+ if (data.status === 0) {
+ Notify({ type: "success", message: data.msg || this.$t("hj137") });
+ // 刷新挂单列表
+ this.getList2();
+ } else {
+ Notify({ type: "danger", message: data.msg || this.$t("获取数据失败") });
+ }
+ } catch (error) {
+ Notify({ type: "danger", message: this.$t("获取数据失败") });
+ }
+ }).catch(() => {
+ // 用户取消，不做任何操作
+ });
+ }
}
};
</script>
@@ -70,12 +309,41 @@
@dark_green: #07c160;
@red: #ee0a24;
@brown: #ff976a;
+@green: #c4d600;
.trade_new {
width: 100%;
- height: 100%;
+ // height: 100%;
background: #fff;
font-size: 10vw;
+ padding-bottom: 1.3rem;
+
+ // padding-top: 1.4em;
+ /deep/ .van-tabs--line .van-tabs__wrap {
+ height: 1.2em;
+ }
+
+ /deep/ .van-tab__text--ellipsis {
+ overflow: visible;
+ }
+
+ /deep/ .van-tab {
+ font-size: 0.4em;
+ }
+
+ /deep/ .van-tabs__line {
+ background-color: @green;
+ height: 0.1em;
+ width: 1em;
+ }
+
+ .order_tabs {
+ width: 100%;
+ // position: fixed;
+ // top: 1.4em;
+ // left: 0;
+ // z-index: 999;
+ }
.list_head {
background-color: @green2;
@@ -107,7 +375,7 @@
color: #999;
font-size: 0.35em;
- & > p:last-child {
+ &>p:last-child {
color: #333;
margin-top: 0.15em;
}
@@ -117,6 +385,7 @@
.transaction_type {
color: #fff;
padding-top: 0.08em;
+
span {
font-size: 0.3em;
background: @brown;
@@ -152,17 +421,25 @@
}
}
+ .delete-btn-wrapper {
+ width: 100%;
+ height: 100%;
+ cursor: pointer;
+
+ &:hover {
+ opacity: 0.8;
+ }
+ }
+
.edit {
width: 100%;
height: 100%;
position: absolute;
top: 0;
left: 0;
- background: linear-gradient(
- to right,
- rgba(0, 0, 0, 0),
- rgba(0, 0, 0, 0.8)
- );
+ background: linear-gradient(to right,
+ rgba(0, 0, 0, 0),
+ rgba(0, 0, 0, 0.8));
text-align: end;
color: @red;
padding-right: 0.25em;
--
Gitblit v1.9.3