2

PC-20250623MANY\Administrator

2025-09-15 0f6b38dfdfe93a1d630d984417af2fbb03c7e0ff

 src/page/user/myOrder.vue

@@ -1,5 +1,79 @@
<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')"
@@ -28,12 +102,12 @@
            {{ i.orderDirection == "买涨" ? $t("gm") : $t("hj78") }}
          </div>
        </div>
        <div class="moli_orderTitle">
        <!-- <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> -->
        <div style="display:flex;flex-wrap:wrap;padding:0 .3rem .35rem;">
          <!-- <div class="tui-wrapItem flex-start">
            <div>
              {{ $t("Price") }}
            </div>
@@ -78,19 +152,95 @@
            <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">
          <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>
@@ -197,8 +347,12 @@
</template>

<script>
import tabHead from "@/components/tabHead.vue";
import * as api from "@/axios/api";
export default {
  components: {
    tabHead
  },
  data() {
    return {
      active: "0",
@@ -208,7 +362,8 @@
      list: [], // 持仓数据
      list2: [], // 平仓数据
      actObj: {}, // 选择的持仓对象
      actIndex: null
      actIndex: null,
      moneyData: {} // 账户金额
    };
  },
  watch: {
@@ -227,7 +382,9 @@
      default: false
    }
  },
  created() {},
  created() {
    if (!this.Operation) this.getMoney();
  },
  methods: {
    // 获取 持仓 数据
    async getList(state = 0) {
@@ -244,9 +401,41 @@
      }
    },
    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];
      }
    }
  }
};
@@ -269,6 +458,69 @@
  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 {
@@ -298,10 +550,10 @@
        }
      }
      .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;