1

admin

2026-01-31 732c30b33f782c2d2ebb62eacda2fb7a453a7ecd

 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;